body {font-family: 'Open Sans', sans-serif;font-weight: 400;color: #666;font-size: 12px;line-height: 20px;width: 100%;background: #f8f9fa;} h1, h2, h3, h4, h5, h6 {color: #444;} h1 {font-size: 33px;} h2 {font-size: 27px;} h3 {font-size: 21px;} h4 {font-size: 15px;} h5 {font-size: 12px;} h6 {font-size: 10.2px;} legend {font-size: 18px;padding: 7px 0px} label {font-size: 12px;font-weight: normal;} select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control { font-size: 12px;} span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {display: inline;} div.required .control-label:before {content: '* ';color: #F00;font-weight: bold;} a{text-decoration: none;} :root { --primary-color: #2c583b; --secondary-color: #4a6cf7; --dark-color: #222; --gray-color: #666; --light-gray: #f8f9fa; --border-color: #eee; --shadow: 0 5px 30px rgba(0, 0, 0, 0.05); } /************ container *************/ .wide-product-container {background: #f8f9fa;padding-bottom: 40px;width: 100%;max-width: 1920px;margin: 0 auto;} .container-fluid {max-width: 1600px;padding: 0 20px;} .category-page {background: #f8f9fa;padding-bottom: 40px;overflow: hidden;} .row {display: flex;flex-wrap: wrap;margin: 0 -10px;} #content {padding: 0 15px;flex: 1;min-width: 0;} /*.custom-row {display: flex;flex-wrap: wrap;margin: 0 -15px;}*/ .custom-row {display: flex;flex-wrap: wrap;margin: 0 -20px;padding: 0px 20px 0px 20px} @media (max-width: 767px) { .custom-row {display: flow-root;flex-wrap: wrap;margin: 0 -15px; padding: 0px 5px 0px 5px} } @media (max-width: 1007px) { .row .col-md-3 {display: none !important; } } /*********************** Шапка сайта header ***********************/ #top {background: #ffffff;color: #333333;padding: 10px 0;box-shadow: 0 1px 10px rgba(0,0,0,0.08);font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size: 14px;border-bottom: 1px solid #f0f0f0;} #top .container-fluid {justify-content: space-between;align-items: center;max-width: 1700px;margin: 0 auto;padding: 0 20px;} #top-links ul {margin: 0;padding: 0;display: flex;align-items: center;gap: 20px;} #top-links li {margin: 0;padding: 0;display: flex;align-items: center;position: relative;} #top-links a {color: #555555;text-decoration: none;transition: all 0.2s ease;padding: 6px 12px;display: flex;align-items: center;font-weight: 500; border-radius: 6px;} #top-links a:hover {color: #0066ff;background: rgba(0, 102, 255, 0.05);} #top-links a i {margin-right: 8px;font-size: 15px;color: #777777;margin-top: -2px;} #top-links a:hover i {color: inherit;} #top-links a:hover {animation: subtleBounce 0.4s ease;} .top-divider {color: #e0e0e0;margin: 0 5px;} .user-greeting {color: #0066ff;font-weight: 600;} .logout-link {color: #ff4444;} .logout-link i {color: inherit;} .header-top-line {display: flex;align-items: center;justify-content: space-between;white-space: nowrap;} #top-links {display: inline-block;margin-left: 15px;} .list-inline {margin: 0;padding: 0;display: inline-flex;align-items: center;} .list-inline li {display: inline-flex;align-items: center;} .top-divider {margin: 0 10px;color: #ddd;} @keyframes subtleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } } @media (max-width: 768px) { #top {padding: 8px 0;} .hidden-mobile {margin-left: 5px;} #top-links ul {gap: 12px;} #top-links a {padding: 6px 8px;} #top-links a i {margin-right: 0;font-size: 16px;} .top-divider {display: none;} } .site-header {background: #ffffff;position: relative;/*z-index: 900;*/padding: 15px 0;} .header-grid {display: grid;grid-template-columns: auto 1fr auto auto; align-items: center;gap: 50px; max-width: 1700px;margin: 0 auto;padding: 0 15px;} .header-logo {transition: transform 0.3s ease;} .header-logo:hover {transform: scale(1.03);} .logo-img {max-height: 110px;width: 100%;display: block;transition: opacity 0.3s;} .logo-img:hover {opacity: 0.9;} .logo-text {margin: 0;font-size: 24px;font-weight: 700;color: #2c3e50;} .logo-text a {color: inherit;text-decoration: none;transition: color 0.3s;} .logo-text a:hover {color: #3498db;} .header-search {position: relative;} .header-contacts {display: flex;flex-direction: column;align-items: flex-end;gap: 5px;} .header-phone {position: relative;} .phone-link {display: flex;align-items: center;gap: 8px;color: #2c3e50;text-decoration: none;font-weight: 600; font-size: 15px;transition: all 0.3s ease;padding: 5px 10px;border-radius: 4px;} .phone-icon {color: #3498db;font-size: 14px;transition: transform 0.3s;} .phone-link:hover {color: #3498db;background: rgba(52, 152, 219, 0.1);} .phone-link:hover .phone-icon {transform: rotate(15deg);} .header-social {display: flex;gap: 12px;} .social-icon {display: flex;align-items: center;justify-content: center;width: 38px;height: 38px;background: #f8f9fa; color: #555;border-radius: 50%;font-size: 18px;transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.1);} .social-icon:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.15);} .header-cart {position: relative;display: flex;align-items: center;justify-content: flex-end;gap: 12px;} .account-compact {display: flex;align-items: center;gap: 6px;} .header-user-icon,.header-logout-icon {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px; border-radius: 50%;background: transparent;transition: all 0.2s ease;text-decoration: none; box-shadow: 0px 0px 15px -1px rgb(199 199 199 / 51%);} .header-user-icon i {font-size: 18px;color: #d9a147;} .header-logout-icon i {font-size: 14px;color: #666;} .header-user-icon:hover,.header-logout-icon:hover {background: #f5f5f5;border-color: #ccc;text-decoration: none;} /* Адаптив — ещё компактнее */ @media (max-width: 768px) { .header-user-icon, .header-logout-icon {width: 40px;height: 40px;} .header-user-icon i {font-size: 16px;} .header-logout-icon i {font-size: 13px;} .header-cart {gap: 15px;} .account-compact {gap: 4px;} } @media (max-width: 1200px) { .header-grid {gap: 20px;} .phone-text {display: none;} .phone-link {padding: 8px;background: rgba(52, 152, 219, 0.1);border-radius: 50%;} } @media (max-width: 992px) { .header-grid {grid-template-columns: auto 1fr auto; /* Логотип → Поиск → Корзина */} .header-contacts {display: none;} } @media (max-width: 768px) { .header-grid { grid-template-columns: auto auto; grid-template-areas: "logo cart" "search search"; gap: 15px; } .header-logo {grid-area: logo;} .header-search {grid-area: search;} .header-cart {grid-area: cart;justify-self: end;} .logo-img {max-height: 100px;width: 80%;} } @media (max-width: 480px) { .header-grid {padding: 0 15px;} .logo-text {font-size: 20px;} .logo-img {width: 80%;} } /*********************** language ***********************/ .centered-language-switcher { --primary-color: #4361ee; --primary-light: #e6ecfe; --text-color: #2b2d42; --text-light: #6c757d; --border-color: #e9ecef; --bg-color: #ffffff; --hover-color: #f8f9fa; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; position: relative; font-family: 'Inter', system-ui, sans-serif; } .language-dialog-button {display: flex;align-items: center;gap: 8px;padding: 10px 16px;background: var(--bg-color);border: 1px solid var(--border-color); border-radius: var(--radius-sm);cursor: pointer;transition: var(--transition);box-shadow: var(--shadow-sm);font-size: 14px;font-weight: 500; color: var(--text-color);} .language-dialog-button:hover {border-color: #ced4da;box-shadow: var(--shadow-md);} .current-language-flag {width: 20px;height: 15px;border-radius: 3px;object-fit: cover;box-shadow: 0 1px 2px rgba(0,0,0,0.1);} .dropdown-chevron {transition: transform 0.3s ease;color: var(--text-light);margin-left: 4px;} /* Стили диалогового окна */ .language-dialog-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);backdrop-filter: blur(5px);display: flex; align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s;z-index: 1000;padding: 20px;} .language-dialog-overlay.active {opacity: 1;visibility: visible;} .language-dialog {background: var(--bg-color);border-radius: var(--radius-lg);width: 100%;max-width: 420px;max-height: 80vh;overflow: hidden; box-shadow: var(--shadow-lg);transform: translateY(20px);transition: transform 0.3s ease;} .language-dialog-overlay.active .language-dialog {transform: translateY(0);} .dialog-header {display: flex;justify-content: space-between;align-items: center;padding: 20px;border-bottom: 1px solid var(--border-color);} .dialog-title {margin: 0;font-size: 18px;font-weight: 600;color: var(--text-color);} .dialog-close-button {background: none;border: none;padding: 6px;cursor: pointer;color: var(--text-light);transition: color 0.2s ease;border-radius: 50%; display: flex;align-items: center;justify-content: center;} .dialog-close-button:hover {background: var(--hover-color);color: var(--text-color);} .dialog-body {padding: 8px;} .language-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 8px;padding: 12px;} .language-card {display: flex;flex-direction: column;align-items: center;padding: 16px 12px;text-decoration: none;color: var(--text-color); transition: var(--transition);border-radius: var(--radius-sm);position: relative;border: 1px solid transparent;} .language-card:hover {background: var(--hover-color);border-color: var(--border-color);transform: translateY(-2px);} .language-card.selected {background: var(--primary-light);border-color: var(--primary-color);} .card-flag-container {width: 40px;height: 30px;margin-bottom: 12px;border-radius: 4px;overflow: hidden;box-shadow: 0 1px 3px rgba(0,0,0,0.1);display: flex; align-items: center;justify-content: center;} .language-flag {width: 100%;height: 100%;object-fit: cover;} .card-text {text-align: center;} .language-name {display: block;font-weight: 500;font-size: 14px;margin-bottom: 2px;} .language-code {display: block;font-size: 12px;color: var(--text-light);} .selection-badge {position: absolute;top: 8px;right: 8px;width: 20px;height: 20px;background: var(--primary-color);border-radius: 50%;display: flex; align-items: center;justify-content: center;} .selection-badge svg {color: white;width: 12px;height: 12px;} @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } } /* Адаптивность */ @media (max-width: 480px) { .language-grid {grid-template-columns: 1fr 1fr;} .language-card {padding: 12px 8px;} .card-flag-container {width: 36px;height: 27px;margin-bottom: 8px;} } /**************** Поиск ****************/ .search-container {max-width: 900px;margin: 0 auto;padding: 20px;font-family: 'Segoe UI', sans-serif;position: relative;} .search-box-wrapper {position: relative;/*z-index: 1001;*/} .search-box {display: flex;align-items: center;border-radius: 8px;padding: 8px 16px;transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .search-box:focus-within {background: #fff;box-shadow: 0 4px 12px rgba(0,0,0,0.15);transform: translateY(-2px);} .search-field {flex: 1;padding: 12px 8px;border: none;font-size: 16px;outline: none;background: transparent;color: #333;} .search-field::placeholder {color: #999;transition: opacity 0.3s ease;} .search-field:focus::placeholder {opacity: 0.5;} .search-button {background: none;border: none;padding: 8px;cursor: pointer;color: #666;transition: all 0.3s ease; border-radius: 50%;display: flex;align-items: center;justify-content: center;} .search-button:hover {color: #333;background: rgba(0,0,0,0.05);} .search-results {position: absolute;top: calc(100% + 5px);left: 0;right: 0;background: #fff;border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);max-height: 400px;overflow-y: auto;z-index: 1001;display: none;} .search-result-item {padding: 12px 16px;border-bottom: 1px solid #eee;cursor: pointer;transition: background 0.2s;display: flex;align-items: center;} .search-result-item:hover {background: #f5f5f5;} .search-result-item:focus {outline: 2px solid #0066cc;background: #e6f2ff;} .search-result-item:last-child {border-bottom: none;} .search-result-image {width: 40px;height: 40px;margin-right: 10px;object-fit: cover;border-radius: 4px;background: #f0f0f0;} .search-result-info {flex: 1;} .search-result-name {font-weight: 500;margin-bottom: 2px;} .search-result-price-container {display: flex;flex-direction: column;align-items: flex-end;margin-left: 10px;} .search-result-price {color: #e53935;font-weight: bold;white-space: nowrap;} .search-result-special {color: #e53935;font-weight: bold;} .search-result-old-price {text-decoration: line-through;color: #999;font-size: 0.9em;} .search-result-stickers {display: flex;gap: 5px;margin-top: 5px;} .search-result-sticker {max-height: 20px;max-width: 60px;} .search-tags {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 15px;justify-content: center;position: relative;/*z-index: 1000;*/} .search-tag {padding: 4px 10px;background: #f8f9fa;border-radius: 12px;font-size: 13px;color: #555;cursor: pointer;transition: all 0.2s ease;animation: tagInsert 0.3s ease forwards;font-weight: 600;} .search-tag:hover, .search-tag:focus {background: #ddd;color: #333;outline: none;} .search-tag:active {transform: scale(0.95);} .search-status {padding: 12px 16px;text-align: center;color: #666;} .loading-spinner {border: 2px solid #f3f3f3;border-top: 2px solid #3498db;border-radius: 50%;width: 16px;height: 16px;animation: spin 1s linear infinite; margin: 0 auto 8px;} .error {color: #e53935;} .retry-button {background: #f5f5f5;border: none;padding: 6px 12px;border-radius: 4px;margin-top: 8px;cursor: pointer;} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes tagInsert { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (max-width: 768px) { .search-container {padding: 15px;} .search-field {font-size: 14px;padding: 10px 8px;} .search-tags {gap: 6px;} .search-tag {padding: 5px 10px;font-size: 13px;} } @media (max-width: 480px) { .search-container {padding: 10px;} .search-box {padding: 6px 12px;} .search-field {font-size: 13px;} .search-results {top: 60px;max-height: 60vh;} .search-tags {gap: 4px;} .search-tag {padding: 4px 8px;font-size: 12px;} } /************* Корзина **************/ .mini-cart-container {position: relative;display: inline-block;font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;} .mini-cart-trigger-btn {display: flex;align-items: center;padding: 12px 24px;background: linear-gradient(135deg, #6e8efb, #a777e3);color: white; border: none;border-radius: 50px;font-weight: 700;cursor: pointer;box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);transition: all 0.3s ease; position: relative;font-size: 16px;} .mini-cart-trigger-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(110, 142, 251, 0.6);background: linear-gradient(135deg, #5d7de8, #9666d8);} .cart-icon-wrapper {position: relative;display: flex;margin-right: 17px;} .mini-cart-items-count {position: absolute;top: -10px;right: -9px;background: #ff4757;color: white;border-radius: 50%;width: 22px;height: 22px;display: flex; align-items: center;justify-content: center;font-size: 12px;font-weight: 600;} .badge-pulse {animation: pulse 1.5s infinite;} @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(255, 71, 87, 0.2); } 100% { transform: scale(1); } } .mini-cart-side-panel { position: fixed;right: -100%;top: 0;height: 100%;width: 90%;max-width: 37.5rem;background: #fff;z-index: 10002;transition: right 0.3s ease;display: flex; flex-direction: column;} .mini-cart-container.active .mini-cart-side-panel {right: 0;} .mini-cart-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 10001;opacity: 0;visibility: hidden; transition: all 0.3s ease;} .mini-cart-container.active .mini-cart-overlay {opacity: 1;visibility: visible;} .mini-cart-panel-content {flex: 1;overflow-y: auto;padding: 20px;} .mini-cart-header-section {display: flex;justify-content: space-between;align-items: center;padding-bottom: 15px;border-bottom: 1px solid #eee; margin-bottom: 15px;} .mini-cart-title {margin: 0;font-size: 20px;font-weight: 700;} .mini-cart-close-btn {background: none;border: none;font-size: 20px;color: #666;cursor: pointer;padding: 5px;transition: transform 0.2s ease;} .mini-cart-close-btn:active {transform: scale(0.9);} .mini-cart-product-item {display: flex;padding: 15px 0;border-bottom: 1px solid #f5f5f5;position: relative;} .mini-cart-product-image-box {width: 70px;height: 70px;border-radius: 8px;overflow: hidden;margin-right: 15px;background: #f9f9f9;display: flex; align-items: center;justify-content: center;flex-shrink: 0;} .mini-cart-product-thumb {max-width: 100%;max-height: 100%;object-fit: contain;} .mini-cart-product-info {flex-grow: 1;padding-right: 25px;} .mini-cart-product-name {font-weight: 600;color: #333;text-decoration: none;display: block;margin-bottom: 6px;font-size: 15px;} .mini-cart-product-options {margin: 6px 0;} .mini-cart-product-option {display: block;font-size: 13px;color: #666;line-height: 1.4;} .mini-cart-product-meta {margin-top: 8px;display: flex;align-items: center;} .mini-cart-product-qty {font-size: 14px;color: #666;margin-right: 6px;} .mini-cart-product-price {font-weight: 600;color: #333;font-size: 15px;} .mini-cart-remove-btn {position: absolute;right: 0;top: 15px;background: none;border: none;color: #ccc;cursor: pointer;padding: 5px;font-size: 16px; transition: transform 0.2s ease;} .mini-cart-remove-btn:active {transform: scale(0.9);} .mini-cart-totals-section {padding: 15px 0;margin: 15px 0;border-top: 1px solid #eee;border-bottom: 1px solid #eee;} .mini-cart-totals-header {margin-bottom: 10px;} .mini-cart-total-row {display: flex;justify-content: space-between;margin: 10px 0;font-size: 16px;} .mini-cart-total-amount {font-weight: 700;} .mini-cart-actions-box {display: flex;padding: 15px;background: #f9f9f9;border-top: 1px solid #eee;} .mini-cart-checkout-btn {flex: 1;padding: 12px;border-radius: 6px;font-weight: 600;text-align: center;text-decoration: none;font-size: 14px; background: #4a6cf7;color: white;border: none;} .mini-cart-empty-state {text-align: center;padding: 20px;} .mini-cart-empty-state i {font-size: 20px;color: #ababab;margin: 20px 0;} .mini-cart-empty-message {color: #666;margin-bottom: 20px;font-size: 16px;} .mini-cart-continue-btn {display: inline-block;padding: 12px 24px;background: #4a6cf7;color: white;border-radius: 6px;text-decoration: none;font-weight: 600;} @media only screen and (max-width: 500px) { .cart-icon-wrapper {position: initial;} } @media (min-width: 500px) { .cart-icon-wrapper .fa-shopping-cart {display: none;} } @media (max-width: 768px) { .mini-cart-side-panel {width: 100%;max-width: 100%;bottom: 97px; } .mini-cart-trigger-btn {padding: 15px;min-width: 50px;min-height: 50px;justify-content: center;} .cart-label {display: none;} .mini-cart-items-count {width: 26px;height: 26px;font-size: 14px;top: -5px;right: -5px;} } /**************** banner.tpl *****************/ .nextgen-banner {position: relative;margin: 20px 0;border-radius: 8px;overflow: hidden;isolation: isolate;height: 300px; } .banner-slide {width: 100%;height: 100%;display: none;} .banner-slide.active {display: block;animation: fadeIn 0.8s ease;} @keyframes fadeIn { from { opacity: 0.4; } to { opacity: 1; } } .banner-image-wrapper {position: relative;width: 100%;height: 100%;overflow: hidden;} .banner-img {width: 100%;height: 100%;object-fit: cover;transition: none} .banner-link:hover .banner-img {transform: none} .banner-content {position: absolute;bottom: 0;left: 0;right: 0;padding: 20px;color: #fff;} .banner-title {margin: 0 0 8px;font-size: 2.5rem;font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.3);opacity: 0;} /* НОВЫЙ СТИЛЬ ДЛЯ КНОПКИ banner-cta */ .banner-cta {display: inline-block;padding: 5px 15px;background: transparent;border: 2px solid white;border-radius: 8px; font-size: 1rem;font-weight: 600;transform: translateY(15px);transition: all 0.6s ease 0.1s;opacity: 0;color: white; text-decoration: none;backdrop-filter: blur(4px);} .banner-slide.active .banner-cta {transform: translateY(0);opacity: 1;} .banner-cta:hover {background: white;color: #4f46e5;transform: translateY(-2px);border-color: white;} /* НОВЫЕ СТРЕЛКИ И НАВИГАЦИЯ */ .banner-nav {position: absolute;bottom: 20px;right: 20px;left: auto;transform: none;display: flex;gap: 10px;z-index: 10;} .banner-nav button {width: 25px;height: 25px;border-radius: 50%;background: rgba(0,0,0,0.6);border: none; cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;color: white;} .banner-nav button:hover {background: #4f46e5;transform: scale(1.05);} .banner-nav button svg {width: 20px;height: 20px;fill: currentColor;} .nav-dots {display: flex;gap: 8px;align-items: center;} .nav-dots .dot {width: 8px;height: 8px;border-radius: 50%;background: rgba(255,255,255,0.5);cursor: pointer; transition: all 0.3s ease;} .nav-dots .dot.active {background: white;transform: scale(1.2);} @media (max-width: 1024px) { .nextgen-banner {height: 280px;} } /* МОБИЛЬНАЯ ВЕРСИЯ - ВИДНО КРАЙ СЛЕДУЮЩЕГО СЛАЙДА */ @media (max-width: 768px) { .nextgen-banner {height: 350px;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch; display: flex;gap: 15px;scrollbar-width: none;} .nextgen-banner::-webkit-scrollbar {display: none;} .banner-slide {flex: 0 0 calc(100% - 40px);scroll-snap-align: start;display: block !important;animation: none !important;} .banner-slide.active {animation: none;} .banner-content {padding: 15px;} .banner-title {font-size: 1.2rem;} .banner-cta {padding: 5px 12px;font-size: 0.8rem;} .banner-nav {display: none;} } @media (max-width: 480px) { .nextgen-banner {height: 350px;gap: 12px;} .banner-slide {flex: 0 0 calc(100% - 30px);} .banner-title {font-size: 1rem;margin-bottom: 5px;} } @media (max-width: 920px) { .col-md-9:has(#banner0) { width: 100%; } } /********************* manufacturer.tpl *********************/ .tags-cloud-section {padding: 20px;background: #fff;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,0.05);margin-bottom: 30px;} .tags-cloud-title {font-size: 22px;color: #333;margin-bottom: 20px;text-align: center;font-weight: 600;} .tags-cloud {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;line-height: 1.6;} .tag {display: inline-block;padding: 6px 10px;border-radius: 50px;background: #f3f4f6;color: #4b5563;text-decoration: none; font-size: calc(12px + var(--size) * 0.2px);transition: all 0.3s ease;border: 1px solid #e5e7eb;} .tag:hover {background: #3b82f6;color: white;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);} .tag.active {background: #3b82f6;color: white;font-weight: 500;border-color: #3b82f6;} @media (max-width: 768px) { .tags-cloud {gap: 8px;} .tag {padding: 5px 12px;font-size: 14px;} } /******************** category.tpl ********************/ .products-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 25px;margin-bottom: 40px;} .product-card {background: white;border-radius: 12px;overflow: hidden;box-shadow: var(--shadow);transition: transform 0.3s, box-shadow 0.3s; position: relative;display: flex;flex-direction: column;} .product-card:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);} .product-badge {position: absolute;top: 10px;left: 10px;z-index: 2;} .product-image-container {position: relative;display: flex;align-items: center;justify-content: center;background: #f9f9f9;overflow: hidden;} .product-image-link {display: block;width: 100%;height: 100%;text-align: center;} .product-image {max-height: 100%;max-width: 100%;object-fit: contain;transition: transform 0.3s;/*padding: 10px;*/} .product-card:hover .product-image {transform: scale(1.05);} .product-info {padding: 20px;display: flex;flex-direction: column;flex-grow: 1;} .product-title-rating {display: flex;justify-content: space-between;align-items: flex-start;gap: 6px;margin-bottom: 10px;} .product-title-rating .title-text {font-size: 13px;line-height: 1.4;color: var(--dark-color);text-decoration: none;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;flex: 1;} .product-title-rating .title-text:hover {color: var(--primary-color);} .product-title-rating .rating-text {white-space: nowrap;font-size: 12px;color: #000;flex-shrink: 0;margin-top: 8px;} .product-price-row {margin-top: auto;padding-top: 15px;border-top: 1px solid var(--border-color);} .price-and-button {display: flex;justify-content: space-between;align-items: flex-end;gap: 10px;} .product-price {flex: 1;min-width: 0;display: flex;flex-direction: column;} .price-old-wrapper {line-height: 1.2;margin-bottom: 2px;} .price-old {text-decoration: line-through;color: #999;font-size: 14px;white-space: nowrap;} .price-current {font-weight: 700;color: #000;font-size: 18px;line-height: 1.2;} .price-tax {font-size: 12px;color: var(--gray-color);white-space: nowrap;margin-top: 2px;} .product-buttons {flex-shrink: 0;} .price-new {font-weight: 700;color: #f84147;font-size: 18px;line-height: 1.2;} .add-to-cart-btn{height:50px;padding:8px 15px;background:var(--primary-color);white-space:nowrap;color:white;border:none;border-radius:6px;font-size:16px; font-weight:600;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;flex:1;min-width:0;} .add-to-cart-btn:hover {background: #d9a147;} .add-to-cart-btn-min{width:35px;height:35px;padding:8px 15px;background:var(--primary-color);white-space:nowrap;color:white;border:none;border-radius:6px;font-size:13px; font-weight:600;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;flex:1;min-width:0;} .add-to-cart-btn-min:hover {background: #d9a147;} .product-actions {position: absolute;top: 10px;right: 10px;display: flex;flex-direction: column;gap: 5px;z-index: 2;/*opacity: 0;*/transform: translateY(-10px); transition: all 0.3s ease;margin-top: 10px;} .product-card:hover .product-actions {opacity: 1;transform: translateY(0);} .product-actions button {width: 36px;height: 36px;background: white;border: none;border-radius: 50%;color: #666;cursor: pointer;transition: all 0.3s; display: flow;justify-content: center;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);} .product-actions button:hover {background: #d82e2e;color: white;} .subcat-simple { margin: 0 0 35px 0;} .subcat-simple-header {margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;} .subcat-simple-title {font-size: 18px;font-weight: 600;color: #333;margin: 0;display: inline-block;position: relative;} .subcat-simple-title:after {content: '';position: absolute;bottom: -12px;left: 0;width: 40px;height: 2px; background: #e74c3c;} /* Сетка категорий */ .subcat-premium-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: 30px;} /* Карточка категории 1 уровня */ .premium-category-card {background: #fff;border-radius: 20px;padding: 25px;transition: all 0.3s ease;border: 1px solid #f0f0f0;box-shadow: 0 2px 10px rgba(0,0,0,0.02);} .premium-category-card:hover {transform: translateY(-5px);box-shadow: 0 15px 35px rgba(0,0,0,0.1);border-color: #ffe2d9;} /* Ссылка категории 1 уровня (по умолчанию - с детьми) */ .premium-category-link {display: flex;align-items: center;gap: 15px;text-decoration: none;padding-bottom: 20px;border-bottom: 2px solid #f8f9fa;margin-bottom: 20px;} /* Ссылка категории 1 уровня (БЕЗ детей) */ .premium-category-link.no-children {padding-bottom: 0;border-bottom: none; margin-bottom: 0;} /* Иконка категории */ .premium-category-icon {width: 70px;height: 70px;border-radius: 18px;background: linear-gradient(135deg, #fff5f2, #fff);display: flex;align-items: center;justify-content: center;overflow: hidden;box-shadow: 0 5px 15px rgba(231, 76, 60, 0.1);transition: all 0.3s ease;} .premium-category-card:hover .premium-category-icon {transform: scale(1.05);box-shadow: 0 8px 20px rgba(231, 76, 60, 0.15);} .premium-category-icon img {width: 100%;height: 100%;object-fit: cover;} .premium-icon-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center; color: #e74c3c;} /* Название категории 1 уровня */ .premium-category-name {font-size: 15px;font-weight: 700;color: #2c3e50;flex: 1;transition: color 0.3s ease;} .premium-category-link:hover .premium-category-name {color: #e74c3c;} /* Блок подкатегорий */ .premium-subcategories {display: flex;flex-direction: column;gap: 20px;} /* Подкатегория 2 уровня */ .premium-subcategory-item {padding-left: 15px;border-left: 3px solid #f0f0f0;transition: border-color 0.3s ease;} .premium-subcategory-item:hover {border-left-color: #e74c3c;} .premium-subcategory-link {display: flex;align-items: center;gap: 12px;text-decoration: none;padding: 8px 0; transition: all 0.2s ease;} .premium-subcategory-link:hover {transform: translateX(5px);} /* Маленькая иконка для подкатегории 2 уровня */ .subcat-icon-small {width: 35px;height: 35px;border-radius: 10px;overflow: hidden;background: #f8f9fa;display: flex;align-items: center;justify-content: center;} .subcat-icon-small img {width: 100%;height: 100%;object-fit: cover;} .premium-subcategory-link span {font-size: 15px;font-weight: 500;color: #555;transition: color 0.2s ease;} .premium-subcategory-link:hover span {color: #e74c3c;} /* Список категорий 3 уровня (БЕЗ КАРТИНОК) */ .premium-depth3-list {display: flex;flex-wrap: wrap;gap: 12px;margin-top: 12px;margin-left: 47px;padding: 10px 0 5px 0;} .premium-depth3-link {display: inline-flex;align-items: center;gap: 8px;text-decoration: none;font-size: 13px;color: #777;padding: 5px 12px;background: #fafafa;border-radius: 20px;transition: all 0.2s ease;} .premium-depth3-link:hover {background: #e74c3c;color: #fff;transform: translateY(-2px);} .premium-depth3-link:hover .depth3-dot circle {fill: #fff;} .depth3-dot {flex-shrink: 0;} /* Анимация при загрузке */ .premium-category-card {animation: fadeInUp 0.4s ease forwards;opacity: 0;} @keyframes fadeInUp { from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);} } /* Задержки для карточек */ .premium-category-card:nth-child(1) { animation-delay: 0.05s; } .premium-category-card:nth-child(2) { animation-delay: 0.1s; } .premium-category-card:nth-child(3) { animation-delay: 0.15s; } .premium-category-card:nth-child(4) { animation-delay: 0.2s; } .premium-category-card:nth-child(5) { animation-delay: 0.25s; } .premium-category-card:nth-child(6) { animation-delay: 0.3s; } /* Адаптивность */ @media (max-width: 992px) { .subcat-premium-grid {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;} .premium-category-card {padding: 20px;} .premium-category-name {font-size: 18px;} .premium-category-icon {width: 60px;height: 60px;} } @media (max-width: 768px) { .premium-category-card {padding: 18px;} .premium-category-name {font-size: 16px;} .premium-category-icon {width: 50px;height: 50px;} .premium-depth3-list {margin-left: 30px;gap: 8px;} .premium-depth3-link {font-size: 12px;padding: 4px 10px; } } @media (max-width: 576px) { .subcat-premium-grid {grid-template-columns: 1fr;} .premium-subcategory-link span {font-size: 14px;} .premium-depth3-list {margin-left: 20px;} } @media (max-width: 1399px) { .products-grid {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}/*250*/ } @media (max-width: 767px) { .products-grid {grid-template-columns: repeat(2, 1fr);gap: 15px;} .add-to-cart-btn {padding: 8px 12px;font-size: 14px;} .add-to-cart-btn-min {padding: 8px 12px;font-size: 14px;} .product-image-container {height: 180px;padding: 15px;} .product-info {padding: 15px;} } @media (max-width: 400px) { .products-grid {grid-template-columns: 1fr;} .add-to-cart-btn {padding: 6px 10px;font-size: 12px;min-width: 80px;} .add-to-cart-btn-min {padding: 6px 10px;font-size: 12px;min-width: 80px;} } /*************** breadcrumb ***************/ .modern-breadcrumbs {padding: 15px 17px 0px 17px;font-family: 'Segoe UI', Roboto, sans-serif;margin-top: 10px;} .breadcrumb-list {display: flex;align-items: center;flex-wrap: wrap;padding: 0;margin: 0;list-style: none;} .breadcrumb-item {display: flex;align-items: center;margin-right: 8px;} .breadcrumb-link {display: flex;align-items: center;text-decoration: none;color: #4A6EA9;font-size: 14px;font-weight: 500;transition: color 0.2s;} .breadcrumb-link:hover {color: #2C4B7F;text-decoration: underline;} .breadcrumb-text {white-space: nowrap;} .breadcrumb-arrow {margin-left: 8px;margin-right: 4px;flex-shrink: 0;} .breadcrumb-current {color: #333;font-size: 14px;font-weight: 600;white-space: nowrap;} @media (max-width: 768px) { .breadcrumb-link, .breadcrumb-current {font-size: 13px;} .breadcrumb-item {margin-right: 6px;} .breadcrumb-arrow {margin-left: 6px;margin-right: 3px;} /* Для хлебных крошек на мобильных */ .modern-breadcrumbs {overflow-x: auto;overflow-y: visible;-webkit-overflow-scrolling: touch; white-space: normal;} .breadcrumb-list {display: flex;flex-wrap: wrap;align-items: center;padding: 8px 0; margin: 0;list-style: none;} .breadcrumb-item {display: inline-flex;align-items: center;flex-wrap: wrap;margin-bottom: 5px; } .breadcrumb-current {display: inline-block;word-break: break-word;white-space: normal;line-height: 1.4;max-width: 100%;} .breadcrumb-text {word-break: break-word;white-space: normal;} } /*********************** manufacturer_list.tpl ***********************/ .manufacturer-index {background: #f8f9fa;border-radius: 12px;padding: 20px 24px;margin-bottom: 40px;display: flex;flex-wrap: wrap;align-items: center;gap: 12px;} .index-label {font-weight: 600;color: #333;font-size: 16px;} .index-links {display: flex;flex-wrap: wrap;gap: 8px;} .index-link {display: inline-flex;align-items: center;justify-content: center;min-width: 36px;height: 36px;padding: 0 10px;background: white;border-radius: 8px;color: #2c3e50;text-decoration: none;font-weight: 500;transition: all 0.2s ease;border: 1px solid #e0e0e0;} .index-link:hover {background: #2c3e50;color: white;border-color: #2c3e50;transform: translateY(-2px);} .manufacturer-section {margin-bottom: 48px;} .manufacturer-letter {font-size: 28px;font-weight: 700;color: #2c3e50;padding-bottom: 16px;margin-bottom: 24px;border-bottom: 3px solid #f19d27;display: inline-block;} .manufacturers-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px;} .manufacturer-card {background: white;border-radius: 12px;overflow: hidden;transition: all 0.3s ease; border: 1px solid #edf2f7;} .manufacturer-card:hover {transform: translateY(-4px);box-shadow: 0 8px 24px rgba(0,0,0,0.1);border-color: transparent;} .manufacturer-link {display: flex;flex-direction: column;align-items: center;padding: 24px 16px;text-decoration: none; color: #333;} .manufacturer-image {width: 100px;height: 100px;display: flex;align-items: center;justify-content: center; margin-bottom: 16px;} .manufacturer-image img {max-width: 100%;max-height: 100%;object-fit: contain;} .manufacturer-name {font-size: 15px;font-weight: 500;text-align: center;color: #2c3e50;transition: color 0.2s ease;} .manufacturer-count {font-size: 12px;color: #999;margin-top: 8px;display: block;transition: color 0.2s ease;} .manufacturer-card:hover .manufacturer-name {color: #f19d27;} .manufacturer-card:hover .manufacturer-count {color: #f19d27;} .btn-continue {display: inline-block;padding: 12px 28px;background: #f19d27;color: white;border-radius: 8px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;border: none;} .btn-continue:hover {background: #e08e1a;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(241, 157, 39, 0.3);color: white;} @media (max-width: 768px) { .manufacturers-grid {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 16px;} .manufacturer-letter {font-size: 24px;} .index-link {min-width: 32px;height: 32px;font-size: 14px;} .manufacturer-image {width: 70px;height: 70px;} .manufacturer-name {font-size: 13px;} .manufacturer-count {font-size: 11px;} } /*********************** viewed_products.tpl ***********************/ .viewed-products-horizontal {margin: 0px 0px 20px 0px;padding: 15px;background: #fff;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);} .viewed-products-horizontal h4 {font-size: 18px;margin: 0 0 15px 0;color: #333;font-weight: 600;} .viewed-scroll-container {overflow-x: auto;padding-bottom: 8px;} .viewed-scroll-container::-webkit-scrollbar {height: 4px;} .viewed-scroll-container::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 2px;} .viewed-scroll-container::-webkit-scrollbar-thumb {background: #2c583b;border-radius: 2px;} .viewed-scroll-container::-webkit-scrollbar-thumb:hover {background: #d9a147;} .viewed-items-wrapper {display: flex;gap: 15px;padding: 5px 5px 15px 5px;} .viewed-item-horizontal {flex: 0 0 250px;display: flex;gap: 12px;padding: 12px;background: #fff;border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);transition: transform 0.2s;} .viewed-item-horizontal:hover {transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0,0,0,0.1);} .viewed-image-horizontal {flex: 0 0 80px;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 6px; overflow: hidden;border: 1px solid #f0f0f0;} .viewed-image-horizontal img {max-height: 100%;max-width: 100%;object-fit: contain;transition: transform 0.3s;} .viewed-image-horizontal:hover img {transform: scale(1.05);} .viewed-info-horizontal {flex: 1;display: flex;flex-direction: column;min-width: 0;} .viewed-title-horizontal {font-size: 15px;line-height: 1.4;color: #222;text-decoration: none;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;flex: 1;margin-bottom: 8px;transition: color 0.2s;} .viewed-title-horizontal:hover {color: var(--primary-color);} .viewed-price-row {display: flex;align-items: center;justify-content: space-between;margin-top: auto;gap: 5px;} .viewed-price-horizontal {flex: 1;} .price-new-h {color: #d82e2e;font-weight: bold;font-size: 15px;} .price-old-h {text-decoration: line-through;color: #999;font-size: 13px;} .price-current-h {font-weight: bold;font-size: 15px;} .viewed-row-cart {width: 30px;height: 30px;background:var(--primary-color);color: white;border: none;border-radius: 4px;cursor: pointer;display: flex; align-items: center;justify-content: center;flex-shrink: 0;transition: all 0.3s;} .viewed-row-cart:hover {background: #d9a147;transform: scale(1.05);} @media (max-width: 767px) { .viewed-item-horizontal {flex: 0 0 180px;padding: 10px;} .viewed-image-horizontal {flex: 0 0 60px;height: 60px;} .viewed-title-horizontal {font-size: 14px;} .viewed-price-row {flex-wrap: wrap;} .viewed-row-cart {margin-left: auto;} .price-new-h {font-size: 12px;} .price-old-h {font-size: 10px;} .price-current-h {font-size: 12px;} } /*************** product.tpl ***************/ /* Блок "Запитати про товар" */ .ask-about-product {margin: 20px 0;padding: 15px;border: 1px solid #e0e0e0;border-radius: 8px;text-align: center; background: #fafafa;} .ask-title {font-size: 16px;font-weight: 600;margin-bottom: 12px;color: #333;} .messenger-buttons {display: flex;gap: 10px;justify-content: center;flex-wrap: wrap;} .messenger-btn {display: flex;align-items: center;gap: 8px;padding: 10px 15px;border-radius: 6px;text-decoration: none; font-weight: 500;transition: all 0.3s ease;flex: 1;justify-content: center;min-width: 120px;max-width: 140px; color: white;font-size: 14px;border: #000;} .viber-btn {background: #7360f2;} .telegram-btn {background: #0088cc;} .whatsapp-btn {background: #25D366;} .messenger-btn:hover {opacity: 0.9;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.2);} /* Мобильные мессенджеры */ .mobile-messengers {display: flex;gap: 8px;padding: 10px;background: #f8f9fa;border-top: 1px solid #e0e0e0;} .mobile-messenger-btn {flex: 1;padding: 12px;border-radius: 6px;text-align: center;text-decoration: none; font-size: 18px;color: white;transition: all 0.3s ease;} .mobile-messenger-btn:hover {transform: scale(1.05);} /* Быстрый вопрос */ .quick-ask-section {display: flex;align-items: center;gap: 15px;margin: 15px 0;padding: 12px 15px;background: #f8f9fa;border-radius: 8px;border-left: 4px solid #007bff;} .quick-ask-title {font-size: 14px;font-weight: 500;color: #666;white-space: nowrap;} .quick-messengers {display: flex;gap: 8px;} .quick-messenger-btn {padding: 10px 12px;border-radius: 6px;text-decoration: none;font-size: 16px;transition: all 0.3s ease;color: white;} .quick-messenger-btn:hover {transform: scale(1.1);} /* Адаптивность */ @media (max-width: 768px) { .messenger-buttons {flex-direction: column;} .messenger-btn {max-width: none;min-width: auto;} .quick-ask-section {flex-direction: column;text-align: center;gap: 10px;} .quick-messengers {justify-content: center;} .mobile-messengers {gap: 5px;} .mobile-messenger-btn {padding: 10px;font-size: 16px;} } @media (max-width: 480px) { .messenger-btn {padding: 8px 12px;font-size: 13px;} .quick-messenger-btn {padding: 8px 10px;font-size: 14px;} } /*************** search.tpl ***************/ .hashtag-hero-banner { position: relative;display: flex;justify-content: center;align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);padding: 20px 15px;border-radius: 20px;overflow: hidden; margin: 25px 0;border: 1px solid rgba(255, 255, 255, 0.2);text-align: center;} .hashtag-hero-banner::before { content: "#Digital #Tech #Innovation #Future #AI #VR #IoT #Smart #Mobile #Gadgets";position: absolute;top: 0; left: 0;right: 0;bottom: 0;font-size: 18px;font-weight: 800;color: rgba(255, 255, 255, 0.1);display: flex; align-items: center;justify-content: center;text-align: center;line-height: 1.3;pointer-events: none; font-family: 'Arial', sans-serif;padding: 30px;letter-spacing: 1px;} .hashtag-hero-content {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: center;} .hashtag-hero-title {color: white;font-size: 2.5em;font-weight: 700;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); margin: 0 0 15px 0;} .hashtag-hero-subtitle {color: rgba(255, 255, 255, 0.95);font-size: 1.1em;font-weight: 400;margin: 0 0 25px 0; line-height: 1.5;max-width: 500px;} .contact-buttons {display: flex;gap: 15px;justify-content: center;flex-wrap: wrap;} .contact-button {display: flex;align-items: center;gap: 8px;padding: 12px 24px;border-radius: 10px; text-decoration: none;font-weight: 600;font-size: 1em;transition: all 0.3s ease; border: 2px solid rgba(255, 255, 255, 0.3);color: white;} .contact-button.telegram {background: rgba(255, 255, 255, 0.15);} .contact-button.viber {background: rgba(255, 255, 255, 0.15);} .contact-button:hover {transform: translateY(-2px);background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5);} /*************** contact.tpl ***************/ .modern-store-header {background: linear-gradient(135deg, #52683e 0%, #2c583b 100%);border-radius: 20px;padding: 40px; margin-bottom: 40px;color: white;position: relative;overflow: hidden;} .modern-store-header::before {content: '';position: absolute;top: 0;right: 0;width: 300px;height: 300px; background: rgba(255,255,255,0.1);border-radius: 50%;transform: translate(30%, -30%);} .store-brand {display: flex;align-items: center;gap: 25px;margin-bottom: 25px;position: relative;z-index: 2;} .store-logo-wrapper {flex-shrink: 0;} .store-logo {width: 100px;height: 100px;border-radius: 20px;background: white;padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);object-fit: contain;} .store-identity {flex: 1;} .store-name {font-size: 2.5em;font-weight: 800;margin: 0 0 10px;text-shadow: 2px 2px 4px rgba(0,0,0,0.3);color:#fff;} .store-motto {font-size: 1.2em;opacity: 0.9;margin: 0;} .store-highlights {display: flex;gap: 30px;position: relative;z-index: 2;font-weight: 600;} .highlight-item {display: flex;align-items: center;gap: 10px;font-size: 1.1em;} .highlight-item i {font-size: 1.3em;color: #ffd700;} /* Contact Grid Layout */ .contact-grid-layout {display: grid;grid-template-columns: 1fr 400px;gap: 30px;margin-bottom: 50px;} .contact-info-column {display: flex;flex-direction: column;gap: 25px;} .contact-form-column {display: flex;flex-direction: column;gap: 25px;} /* Contact Details Grid */ .contact-details-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 25px;} /* Card Styles */ .bio-card, .contacts-card, .social-card, .form-card, .photo-card {background: white;border-radius: 20px;box-shadow: 0 5px 25px rgba(0,0,0,0.08);overflow: hidden; transition: transform 0.3s, box-shadow 0.3s;will-change: transform;} .bio-card:hover, .contacts-card:hover, .social-card:hover, .form-card:hover, .photo-card:hover {transform: translateY(-5px);box-shadow: 0 15px 40px rgba(0,0,0,0.15);} .card-header {background:#d9a147;color: white;padding: 25px;display: flex;align-items: center;gap: 15px;} .card-header i {font-size: 1.5em;} .card-header h2 {margin: 0;font-size: 1.4em;font-weight: 700;} .card-content {padding: 25px;} /* Photo Card Styles */ .store-photo-wrapper {position: relative;border-radius: 12px;overflow: hidden;margin-bottom: 15px;} .store-photo {width: 100%;height: 200px;object-fit: cover;transition: transform 0.3s;} .photo-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s;} .store-photo-wrapper:hover .photo-overlay {opacity: 1;} .store-photo-wrapper:hover .store-photo {transform: scale(1.05);} .view-photo-btn {background: white;color: #333;border: none;padding: 10px 20px;border-radius: 20px;font-weight: 600;cursor: pointer;display: flex;align-items: center;gap: 8px;transition: all 0.3s;} .view-photo-btn:hover {background: #667eea;color: white;} .photo-caption {text-align: center;color: #666;font-size: 0.9em;margin: 0;} .no-photo-placeholder {text-align: center;padding: 40px 20px;color: #999;} .no-photo-placeholder i {margin-bottom: 15px;color: #ddd;} .no-photo-placeholder p {margin: 0;font-size: 0.9em;} /* Bio Card */ .bio-stats {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;margin-top: 20px;} .stat {text-align: center;padding: 15px;background: #f8f9fa;border-radius: 12px;} .stat strong {display: block;font-size: 1.8em;color: #667eea;margin-bottom: 5px;} .stat span {font-size: 0.9em;color: #666;} /* Contact Items */ .contact-item {display: flex;gap: 15px;margin-bottom: 25px;align-items: flex-start;} .contact-item:last-child {margin-bottom: 0;} .contact-icon {width: 50px;height: 50px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 12px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} .contact-icon i {color: white;font-size: 1.2em;} .contact-info h3 {margin: 0 0 8px;color: #333;font-size: 1.1em;} .contact-info p {margin: 0 0 10px;color: #666;line-height: 1.5;} .phone-primary {font-size: 1.2em;font-weight: 700;color: #333 !important;} .phone-secondary {color: #666;} .email-link, .map-link {color: #667eea;text-decoration: none;font-weight: 600;display: inline-flex;align-items: center;gap: 5px;transition: color 0.3s;} .email-link:hover, .map-link:hover {color: #764ba2;} /* Social Grid */ .social-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;} .social-btn {display: flex;align-items: center;gap: 12px;padding: 15px;background: #f8f9fa;border-radius: 12px;text-decoration: none;color: #333;transition: all 0.3s;border: 2px solid transparent;} .social-btn:hover {transform: translateY(-2px);border-color: currentColor;box-shadow: 0 5px 15px rgba(0,0,0,0.1);} .social-btn i {font-size: 1.3em;width: 20px;text-align: center;} .social-btn.telegram { color: #0088cc; } .social-btn.viber { color: #7360f2; } .social-btn.instagram { color: #e4405f; } .social-btn.facebook { color: #1877f2; } .social-btn.linkedin { color: #0a66c2; } .social-btn.youtube { color: #ff0000; } .social-btn.tiktok { color: #000000; } .social-btn.whatsapp { color: #25d366; } /* Form Styles */ .modern-contact-form {width: 100%;} .form-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;} .form-group {margin-bottom: 20px;} .form-group.full-width {grid-column: 1 / -1;} .form-input, .form-select, .form-textarea {width: 100%;padding: 15px 20px;border: 2px solid #f0f0f0;border-radius: 12px;font-size: 15px;transition: all 0.3s;background: #fafafa;font-family: inherit;} .form-input:focus, .form-select:focus, .form-textarea:focus {border-color: #667eea;background: white;box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);outline: none;} .form-textarea {resize: vertical;min-height: 120px;} .error-message {color: #e74c3c;font-size: 0.85em;margin-top: 5px;display: block;} .alert {padding: 15px;border-radius: 12px;margin-bottom: 20px;} .alert-danger {background: #fee;border: 1px solid #f5c6cb;color: #721c24;} .submit-btn {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border: none;padding: 18px 35px;border-radius: 12px;font-size: 16px;font-weight: 700;cursor: pointer;transition: all 0.3s;display: flex;align-items: center;gap: 10px;width: 100%;justify-content: center;} .submit-btn:hover {transform: translateY(-2px);box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);} .submit-btn:active {transform: translateY(0);} /* Quick Contacts */ .quick-contacts {display: flex;flex-direction: column;gap: 15px;} .quick-contact-item {background: white;border-radius: 15px;padding: 20px;box-shadow: 0 5px 20px rgba(0,0,0,0.08);display: flex;gap: 15px;align-items: center;} .quick-icon {width: 50px;height: 50px;background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);border-radius: 12px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} .quick-icon i {color: white;font-size: 1.3em;} .quick-info h4 {margin: 0 0 5px;color: #333;} .quick-info p {margin: 0 0 10px;color: #666;font-size: 0.9em;} .quick-info a {color: #667eea;text-decoration: none;font-weight: 600;font-size: 0.9em;transition: color 0.3s;} .quick-info a:hover {color: #764ba2;} /* Locations Section */ .locations-section {margin-top: 50px;} .section-header {text-align: center;margin-bottom: 40px;} .section-header h2 {font-size: 2.2em;color: #333;margin-bottom: 10px;} .section-header p {color: #666;font-size: 1.1em;} .locations-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 25px;} .location-card {background: white;border-radius: 20px;overflow: hidden;box-shadow: 0 5px 25px rgba(0,0,0,0.08);transition: transform 0.3s, box-shadow 0.3s;} .location-card:hover {transform: translateY(-5px);box-shadow: 0 15px 40px rgba(0,0,0,0.15);} .location-image {position: relative;height: 200px;overflow: hidden;} .location-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s;} .location-card:hover .location-image img {transform: scale(1.05);} .location-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s;} .location-card:hover .location-overlay {opacity: 1;} .view-map-btn {background: white;color: #333;border: none;padding: 12px 25px;border-radius: 25px;font-weight: 600;cursor: pointer;transition: all 0.3s;} .view-map-btn:hover {background: #667eea;color: white;} .location-details {padding: 25px;} .location-details h3 {margin: 0 0 10px;color: #333;font-size: 1.3em;} .location-address {color: #666;margin-bottom: 15px;line-height: 1.5;} .location-meta {margin-bottom: 20px;} .meta-item {display: flex;align-items: center;gap: 10px;margin-bottom: 8px;color: #666;} .meta-item i {color: #667eea;width: 16px;} .location-map-link {display: inline-flex;align-items: center;gap: 8px;color: #667eea;text-decoration: none;font-weight: 600;transition: color 0.3s;} .location-map-link:hover {color: #764ba2;} /* Responsive Design */ @media (max-width: 1200px) { .contact-grid-layout {grid-template-columns: 1fr;} .contact-form-column {order: -1;} } @media (max-width: 992px) { .contact-details-grid {grid-template-columns: 1fr;} } @media (max-width: 768px) { .modern-store-header {padding: 25px;text-align: center;} .store-brand {flex-direction: column;} .store-highlights {flex-direction: column;gap: 15px;} .form-grid {grid-template-columns: 1fr;} .bio-stats {grid-template-columns: 1fr;} .social-grid {grid-template-columns: 1fr;} .locations-grid {grid-template-columns: 1fr;} .quick-contact-item { flex-direction: column; text-align: center;} .contact-icon {align-self: center;} } @media (max-width: 480px) { .store-name {font-size: 2em;} .card-header {padding: 20px;} .location-details {padding: 20px;} .modern-store-header {padding: 20px;} } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .bio-card, .contacts-card, .social-card, .form-card, .photo-card, .location-card, .submit-btn, .social-btn {transition-duration: 0.01ms;animation-duration: 0.01ms;} } /*************** not_found.tpl ***************/ /* Main container */ .error-404-container {min-height: calc(100vh - 200px);background: #f5f5f5;padding: 0px 0 40px;position: relative;overflow-x: hidden;} /* Breadcrumbs - стандартный стиль */ .error-breadcrumbs {margin-bottom: 30px;} .error-breadcrumbs .breadcrumb-list {background: transparent;padding: 0;margin: 0;display: flex;list-style: none;} .error-breadcrumbs .breadcrumb-item {display: flex;align-items: center;} .error-breadcrumbs .breadcrumb-link {display: flex;align-items: center;gap: 8px;text-decoration: none;color: #666; font-size: 14px;transition: color 0.3s ease;} .error-breadcrumbs .breadcrumb-link:hover {color: #667eea;} .error-breadcrumbs .breadcrumb-current {color: #333;font-size: 14px;} .error-breadcrumbs .breadcrumb-arrow path {stroke: #999;} /* Main card */ .error-modern-card {background: rgba(255,255,255,0.95);border-radius: 40px;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);padding: 60px 40px;position: relative;overflow: hidden;backdrop-filter: blur(10px);transition: transform 0.3s ease;} .error-modern-card:hover {transform: translateY(-5px);} /* Split Layout - Text Left & Image Right */ .error-split-layout {display: flex;gap: 50px;align-items: center;position: relative;z-index: 1;} .error-left-content {flex: 1;text-align: left;} .error-right-image {flex: 0.8;display: flex;flex-direction: column;align-items: center;justify-content: center;} /* Animated shapes */ .error-shapes {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;} .shape {position: absolute;border-radius: 50%;background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));animation: float 20s infinite ease-in-out;} .shape-1 {width: 300px;height: 300px;top: -150px;right: -150px;animation-delay: 0s;} .shape-2 {width: 200px;height: 200px;bottom: -100px;left: -100px;animation-delay: 5s;} .shape-3 {width: 150px;height: 150px;top: 50%;left: 50%;transform: translate(-50%, -50%);animation-delay: 10s;} @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } /* Glitch effect for 404 */ .error-404-number {margin-bottom: 20px;} .glitch-wrapper {text-align: left;} .glitch {font-size: 120px;font-weight: 900;color: #667eea;position: relative;display: inline-block;text-shadow: 0.05em 0 0 rgba(255,0,0,0.75), -0.05em -0.05em 0 rgba(0,255,0,0.75);animation: glitch 0.3s infinite;} .glitch::before, .glitch::after {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .glitch::before {left: 2px;text-shadow: -2px 0 rgba(255,0,0,0.8);animation: glitch-anim-1 0.3s infinite linear alternate-reverse;} .glitch::after {left: -2px;text-shadow: 2px 0 rgba(0,0,255,0.8);animation: glitch-anim-2 0.3s infinite linear alternate-reverse;} @keyframes glitch { 0% { transform: skew(0deg); } 20% { transform: skew(2deg); } 40% { transform: skew(-2deg); } 60% { transform: skew(1deg); } 80% { transform: skew(-1deg); } 100% { transform: skew(0deg); } } @keyframes glitch-anim-1 { 0% { clip-path: inset(20% 0 30% 0); } 20% { clip-path: inset(70% 0 10% 0); } 40% { clip-path: inset(40% 0 40% 0); } 60% { clip-path: inset(80% 0 5% 0); } 80% { clip-path: inset(10% 0 60% 0); } 100% { clip-path: inset(30% 0 50% 0); } } @keyframes glitch-anim-2 { 0% { clip-path: inset(40% 0 20% 0); } 20% { clip-path: inset(10% 0 70% 0); } 40% { clip-path: inset(50% 0 30% 0); } 60% { clip-path: inset(15% 0 75% 0); } 80% { clip-path: inset(60% 0 20% 0); } 100% { clip-path: inset(25% 0 55% 0); } } /* Main title */ .error-main-title {font-size: 36px;font-weight: 800;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 20px;} /* Description */ .error-description {margin-bottom: 40px;} .error-description p {font-size: 18px;color: #666;line-height: 1.6;} /* Action buttons */ .error-actions-modern {display: flex;gap: 15px;} .btn-home {display: inline-flex;align-items: center;gap: 8px;padding: 12px 28px;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;box-shadow: 0 4px 15px rgba(102,126,234,0.3);} .btn-home:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(102,126,234,0.4);} /* Right Side - Image Styles */ .image-wrapper {position: relative;animation: floatImage 3s ease-in-out infinite;} .error-image {width: 100%;max-width: 350px;height: auto;display: block;margin: 0 auto;filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));} .image-shine {position: absolute;top: 0;left: 0;right: 0;bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);border-radius: 50%;animation: shine 3s infinite;pointer-events: none;} @keyframes floatImage { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes shine { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } .image-caption {display: flex;align-items: center;gap: 8px;margin-top: 20px;padding: 8px 16px;background: rgba(102,126,234,0.1);border-radius: 50px;font-size: 14px;color: #667eea;animation: fadeInUp 0.6s ease-out;} @keyframes fadeInUp { from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);} } /* Responsive */ @media (max-width: 992px) { .error-split-layout {flex-direction: column;text-align: center;} .error-left-content {text-align: center;} .glitch-wrapper {text-align: center;} .error-actions-modern {justify-content: center;} .error-right-image {margin-top: 30px;} } @media (max-width: 768px) { .error-modern-card {padding: 40px 20px;} .glitch {font-size: 70px;} .error-main-title {font-size: 28px;} .error-description p {font-size: 16px;} .error-actions-modern {flex-direction: column;align-items: stretch;} .btn-home {justify-content: center;} .error-image {max-width: 250px;} } @media (max-width: 480px) { .glitch {font-size: 50px;} .error-main-title {font-size: 22px;} } /*************** pagination ***************/ .pagination-wrapper {text-align: center;margin-top: 30px;} .pagination-wrapper .row {display:contents;} .pagination-wrapper .pagination {display: inline-flex;flex-wrap: wrap;gap: 6px;padding: 10px 15px;border-radius: 8px;background-color: white;box-shadow: var(--shadow);} .pagination-wrapper .pagination a, .pagination-wrapper .pagination span {display: inline-block;padding: 8px 14px;border: 1px solid var(--border-color);background-color: var(--light-gray);color: var(--dark-color);font-size: 14px;border-radius: 6px;text-decoration: none;transition: all 0.3s;} .pagination-wrapper .pagination a:hover {background-color: var(--primary-color);color: white;border-color: var(--primary-color);} .pagination-wrapper .pagination .current, .pagination-wrapper .pagination span.active {background-color: var(--primary-color);color: white;border-color: var(--primary-color);cursor: default;} .pagination-wrapper .pagination .disabled {opacity: 0.5;pointer-events: none;} .pagination li.active span {background-color: #d9a147;color: #fff;cursor: default;display: inline-block;padding: 6px 12px;border-radius: 3px;} @media (max-width: 576px) { .pagination-wrapper .pagination {gap: 4px;padding: 8px 10px;} .pagination-wrapper .pagination a, .pagination-wrapper .pagination span { padding: 6px 10px; font-size: 13px; } } /******************** Карточка товара ********************/ .wide-product-card {background: white;border-radius: 12px;box-shadow: 0 5px 30px rgba(0,0,0,0.05);overflow: hidden;margin-bottom: 40px;} .product-content-row {display: flex;padding: 30px;gap: 40px;} .product-gallery-wide {flex: 0 0 55%;max-width: 55%;} .main-image-container {position: relative;margin-bottom: 15px;border-radius: 10px;overflow: hidden;/*background: #f9f9f9;*/text-align: center;/*padding: 20px;height: 750px;*/display: flex;align-items: center;justify-content: center;} .main-image-container img {max-height: 100%;max-width: 100%;object-fit: contain;} .nav-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 25px;height: 35px;background: rgba(0, 0, 0, 0.5);color: white;border: none; font-size: 20px;cursor: pointer;z-index: 10;transition: all 0.3s;display: flex;align-items: center;justify-content: center;} .nav-arrow:hover {background: rgba(0,0,0,0.8);} .prev-arrow {left: 20px;} .next-arrow {right: 20px;} .thumbnail-strip {display: flex;gap: 10px;overflow-x: auto;padding: 10px 0;} .thumb-item {flex: 0 0 80px;height: 80px;border: 1px solid #ddd;border-radius: 6px;padding: 5px;cursor: pointer;transition: all 0.3s;background: white;} .thumb-item:hover {border-color: #d82e2e;} .thumb-item.active {border: 2px solid #d82e2e;} .thumb-item img {width: 100%;height: 100%;object-fit: contain;} .video-thumb {display: flex;align-items: center;justify-content: center;background: #f8f8f8;} .video-thumb-icon {color: #ff0000;font-size: 24px;} .thumb-item.active.video-thumb {background: #d82e2e;} .thumb-item.active.video-thumb .video-thumb-icon {color: white;} .product-info-wide {flex: 1;padding-top: 10px;} .product-title {font-size: 20px;font-weight: 500;margin: 0 0 20px 0;color: #4f4f4f;} .product-meta {margin-bottom: 25px;} .meta-item {display: flow-root;margin-bottom: 8px;font-size: 13px;} .meta-label {font-weight: 600;min-width: 100px;color: #666;} .meta-value {color: #333;} .meta-value a {color: #d82e2e;text-decoration: none;} .availability .in-stock {color: #28a745;} .availability .out-of-stock {color: #dc3545;} .related-products-compact {margin: 20px 0;padding: 10px 0;border-top: 1px solid #eee;border-bottom: 1px solid #eee;} .related-products-label {font-size: 14px;color: #666;margin-bottom: 10px;text-align: center;} .related-icons-container {display: flex;flex-wrap: wrap;gap: 8px;} .related-product-icon {display: block;width: 50px;height: 50px;border: 1px solid #ddd;border-radius: 4px;position: relative;overflow: hidden; transition: all 0.3s ease;} .related-product-icon:hover {border-color: #c1b17e;transform: translateY(-3px);box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .related-product-icon img {width: 100%;height: 100%;object-fit: cover;} .icon-sale-badge {position: absolute;top: 0;right: 0;background: #e74c3c;color: white;font-size: 10px;padding: 2px 4px;border-radius: 0 0 0 4px;} .notice-3d-print {margin: 15px 0;} .notice-container {border: 1px solid #e0e0e0;border-radius: 8px;padding: 12px;background-color: #fffaf0;box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s ease;} .notice-container:hover {border-color: #f1b400;box-shadow: 0 4px 12px rgba(241, 180, 0, 0.15);} .notice-content {display: flex;align-items: flex-start;gap: 12px;} .notice-icon {color: #f1b400;} .notice-text p {margin: 0;color: #333;font-size: 14px;line-height: 1.5;} @media (max-width: 768px) { .notice-content {flex-direction: row;align-items: center;} .notice-icon {font-size: 20px;} } .size-color input[type="radio"] {display: none;} .size-color label {font-size: 13px;font-weight: normal;border: 1px solid #2c583b;padding: 8px; margin: 6px;width: 80px;text-align: center;cursor: pointer;font-weight: bold;background: #fff; display: inline-block;border-radius: 10%;color: #000;} .size-color label:hover {border: 1px solid #2c583b;background: #1bd25a17;} .size-color input[type=radio]:checked + label {background: #e4ddc6;border: 1px solid #c1b17e;} .size-color .radio {display: inline-block;margin: 0;} .fa-info-circle{font-size: 20px;margin-top: 2px;} /*********************** Карточка товара Цены ************************/ .price-section {margin: 25px 0;padding: 15px 0;border-top: 1px solid #eee;} .price-row {display: flex;align-items: center;margin: 5px 0;} .current-price {font-size: 28px;font-weight: 500;color: #000;} .original-price {font-size: 18px;text-decoration: line-through;color: #999;margin-right: 15px;} .sale-price {font-size: 28px;font-weight: 700;color: #f84147;margin-right: 15px;} .sale-badge {background: #d82e2e;color: white;padding: 4px 10px;border-radius: 4px;font-size: 16px;font-weight: 600;} .bg-price { /*background: linear-gradient(135deg, #d9a147 0%, #e8b866 30%, #f5d9a3 70%, #ffffff 100%);*/ padding: 14px; border-radius: 8px; display: flex; gap: 8px; border: 2px solid #d9a147;} .bg-price .sale-price::before {content: '🔥️'; margin-right: 6px;} @media (max-width: 767px) { .current-price, .sale-price {font-size: 24px;} .original-price {font-size: 16px;} .sale-badge {font-size: 14px;padding: 3px 8px;} } /*********************** Карточка товара Опции ************************/ .product-options {margin: 30px 0;} .option-group {margin-bottom: 20px;} .option-label {display: block;margin-bottom: 10px;font-weight: 600;color: #555;font-size: 16px;} .form-select {width: 100%;max-width: 400px;padding: 12px 15px;border: 1px solid #ddd;border-radius: 6px;font-size: 16px;background: white;} /******************************* Карточка товара Кнопки Купить *******************************/ .quantity-and-cart {display: flex;align-items: center;gap: 15px;} .quantity-control {display: flex;border: 1px solid #ddd;border-radius: 6px;overflow: hidden;flex-shrink: 0;max-width: 180px;} .qty-btn {width: 45px;height: 50px;background: #f8f8f8;border: none;font-size: 16px;cursor: pointer;transition: all 0.3s;flex-shrink: 0;} .qty-btn:hover {background: #eee;} .qty-input {width: 50px !important;height: 50px;border: none;border-left: 1px solid #ddd;border-right: 1px solid #ddd;text-align: center;font-size: 16px; padding: 0 5px;flex-shrink: 0;} .btn-text {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} @media (max-width: 767px) { .quantity-and-cart {flex-direction: row;align-items: center;gap: 10px;width: 100%;} .quantity-control {width: auto;flex: none;max-width: 150px;} .add-to-cart-btn {flex: 1;min-width: 0;height: 50px;padding: 0 10px;} .add-to-cart-btn-min {flex: 1;min-width: 0;width:40px;height: 40px;padding: 0 10px;} .qty-btn {width: 40px;height: 50px;} .qty-input {width: 50px;height: 50px;} } @media (max-width: 480px) { .quantity-and-cart {flex-wrap: nowrap;} .quantity-control {max-width: 140px;} .add-to-cart-btn {flex: 1;min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .add-to-cart-btn-min {flex: 1;min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} } .benefits-section {margin: 40px 0 20px;} .benefits-section h3 {font-size: 20px;margin-bottom: 20px;} .benefits-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap: 15px;} .benefit-item {display: flex;align-items: center;gap: 10px;padding: 12px;background: white;border-radius: 6px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);} .benefit-item img {width: 35px;height: 35px;object-fit: contain;margin-left: 10px;} .benefit-item span {font-size: 14px;} .product-details-tabs {padding: 0 30px 30px;} .tabs-nav {display: flex;list-style: none;padding: 0;margin: 0 0 15px 0;border-bottom: 2px solid #eee;} .tabs-nav li {margin-right: 25px;} .tabs-nav li a {display: block;padding: 12px 0;color: #666;font-weight: 600;text-decoration: none;position: relative;font-size: 16px;} .tabs-nav li.active a {color: #2c583b;} .tabs-nav li.active a:after {content: '';position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px; background: #d9a147;} .tabs-content {/*padding: 20px 0;*/} .tab-pane {display: none;} .tab-pane.active {display: block;} .specs-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));gap: 25px;} .specs-group {margin-bottom: 30px;} .specs-group h4 {margin: 0 0 15px 0;font-size: 18px;padding-bottom: 8px;border-bottom: 1px solid #eee;} .specs-list {display: grid;gap: 12px;} .spec-item {display: grid;grid-template-columns: 180px 1fr;} .spec-name {color: #666;font-size: 15px;} .spec-value {font-weight: 500;font-size: 15px;} @media (min-width: 768px) { .review-form {max-width: 50%;} } .submit-btn {background: #d82e2e;color: white;border: none;padding: 12px 30px;font-size: 16px;border-radius: 6px;cursor: pointer;transition: all 0.3s;} .submit-btn:hover {background: #b82525;} .related-products {margin-top: 50px;} .related-products h2 {text-align: center;font-size: 28px;margin-bottom: 40px;position: relative;} .related-products h2:after {content: '';display: block;width: 80px;height: 3px;background: #d82e2e;margin: 15px auto 0;} .related-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 25px;} .related-item {background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 3px 15px rgba(0,0,0,0.08);transition: all 0.3s;} .related-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);} .related-item .product-image {position: relative;height: 220px;display: flex;align-items: center;justify-content: center;padding: 20px;background: #f9f9f9;} .related-item .product-image img {max-height: 180px;width: auto;transition: transform 0.3s;} .related-item:hover .product-image img {transform: scale(1.05);} .related-item:hover .quick-actions {opacity: 1;} .related-item .product-info {padding: 20px;} .related-item .product-info h3 {margin: 0 0 10px 0;font-size: 16px;} .related-item .product-info h3 a {color: #333;text-decoration: none;transition: color 0.3s;} .related-item .product-info h3 a:hover {color: #d82e2e;} .related-item .price {font-weight: 700;color: #d82e2e;font-size: 18px;} .related-item .old-price {text-decoration: line-through;color: #999;font-size: 14px;margin-left: 5px;} .quick-actions {position: absolute;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;padding: 10px;background: rgba(0,0,0,0.7); opacity: 0;transition: opacity 0.3s;} .quick-actions button {background: none;border: none;color: white;width: 40px;height: 40px;font-size: 16px;margin: 0 5px;cursor: pointer; transition: all 0.3s;border-radius: 50%;} .quick-actions button:hover {color: #d82e2e;background: rgba(255,255,255,0.2);} /************************************** Карточка товара Модальное окно видео **************************************/ .video-modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;display: none;align-items: center;justify-content: center;} .video-modal.active {display: flex;} .modal-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);} .modal-content {position: relative;width: 90%;max-width: 1000px;z-index: 10000;} .close-modal {position: absolute;top: -40px;right: 0;background: none;border: none;color: white;font-size: 30px;cursor: pointer;z-index: 10001;} .close-modal:hover {color: #d82e2e;} .video-container {position: relative;padding-bottom: 56.25%; height: 0;overflow: hidden;} .video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;} /************************************** Уведомление о добавлении в корзину **************************************/ .product-added-notification {position: fixed;top: 20px;right: 20px;z-index: 9999;display: flex;align-items: center;padding: 15px 20px;background: #fff; border-radius: 8px;box-shadow: 0 5px 20px rgba(0,0,0,0.15);border-left: 4px solid #4CAF50;transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);max-width: 350px;} .product-added-notification.show {transform: translateX(0);} .notification-icon {margin-right: 5px;font-size: 15px;color: #4CAF50;} .notification-content {flex: 1;} .notification-title {font-weight: 600;margin-bottom: 5px;color: #333;} .notification-message {font-size: 14px;color: #666;margin-bottom: 5px;} .notification-actions {display: flex;margin-top: 10px;} .notification-btn {padding: 5px 12px;border-radius: 4px;font-size: 13px;font-weight: 500;cursor: pointer;transition: all 0.3s;margin-right: 8px;} .notification-btn.cart {background: #4CAF50;color: white;border: 1px solid #4CAF50;} .notification-btn.cart:hover {background: #3d8b40;} .notification-btn.close {background: transparent;color: #666;border: 1px solid #ddd;} .notification-btn.close:hover {background: #f5f5f5;} .notification-close {margin-left: 15px;color: #999;cursor: pointer;font-size: 18px;transition: color 0.3s;} .notification-close:hover {color: #333;} @media (max-width: 1399px) { .product-content-row {gap: 30px;} .product-gallery-wide {flex: 0 0 50%;max-width: 50%;} } @media (max-width: 1199px) { .container-fluid {padding: 0 20px;} .product-content-row {flex-direction: column;gap: 30px;padding: 20px;} .product-gallery-wide {flex: 1;max-width: 100%;} .main-image-container {height: 450px;} } @media (max-width: 991px) { .main-image-container {height: 400px;/*padding: 30px;*/} .product-title {font-size: 28px;} .current-price, .sale-price {font-size: 32px;} .original-price {font-size: 20px;} .related-grid {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));} .product-added-notification {max-width: 300px;} } @media (max-width: 767px) { .container-fluid {padding: 0 15px;} .product-content-row {padding: 15px;} .main-image-container {height: 350px;/*padding: 20px;*/} .product-title {font-size: 15px;} .current-price, .sale-price {font-size: 28px;} .add-to-cart-btn {height: 50px;font-size: 16px;} .add-to-cart-btn-min {width:40px;height: 40px;font-size: 16px;} .wishlist-btn, .compare-btn {height: 45px;font-size: 14px;} .benefits-grid {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));} .related-grid {grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap: 20px;} .nav-arrow {width: 40px;height: 40px;font-size: 16px;} .product-added-notification {top: 10px;right: 10px;max-width: calc(100% - 20px);} } @media (max-width: 575px) { .main-image-container {height: 400px;} .thumb-item {flex: 0 0 70px;height: 70px;} .quantity-control {width: auto;} .add-to-cart-btn {max-width: none;} .add-to-cart-btn-min {max-width: none;} .specs-grid {grid-template-columns: 1fr;} .spec-item {grid-template-columns: 1fr;gap: 5px;} .related-grid {grid-template-columns: 1fr;} .nav-arrow {width: 20px;height: 35px;font-size: 14px;} .prev-arrow {left: 10px;} .next-arrow {right: 10px;} .notification-actions {flex-direction: column;} .notification-btn {margin-right: 0;margin-bottom: 8px;width: 100%;} } /************************* Блока Доставки-Оплата **************************/ .dp-method-header {display: flex;padding: 8px 0;margin-bottom: 5px;border-bottom: 1px solid #e0e0e0;font-weight: 600;font-size: 13px;color: #555;} .dp-method {display: flex;padding: 10px 0;align-items: center;border-bottom: 1px dashed #eee;} .dp-col-1, .dp-col-2, .dp-col-3 {flex: 1;padding: 0 5px;} .dp-col-1 {display: flex;align-items: center;flex: 2; } .dp-method-icon {width: 30px;height: 30px;background: rgba(74, 108, 247, 0.1);border-radius: 6px;display: flex;align-items: center;justify-content: center; margin-right: 10px;flex-shrink: 0;} .dp-method-icon i {color: #4a6cf7;font-size: 14px;} .dp-method-name {font-size: 13px;font-weight: 500;} .dp-delivery-time {font-size: 13px;color: #333;} .dp-method-price {font-size: 13px;color: #4a6cf7;font-weight: 500;text-align: right;} @media (max-width: 768px) { .dp-method-header {display: none;} .dp-method {flex-wrap: wrap;position: relative;padding-left: 40px;} .dp-col-1 {flex: 0 0 100%;margin-bottom: 5px;} .dp-col-2, .dp-col-3 {flex: 1;} .dp-method-icon {position: absolute;left: 0;top: 10px;} } /****************** Блока Дисконт ******************/ .discounts-block {margin: 25px 0;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 15px rgba(0,0,0,0.1);} .discounts-title {background: #4a6ea9;color: #fff;padding: 12px 15px;margin: 0;font-size: 16px;font-weight: 600;} .discounts-table {background: #fff;} .discounts-header {display: flex;background: #f5f7fa;padding: 10px 15px;font-weight: 600;border-bottom: 1px solid #e1e5eb;} .discount-row {display: flex;padding: 12px 15px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s;} .discount-row:last-child {border-bottom: none;} .discount-row:hover {background: #f9fafc;} .discount-col {flex: 1;padding: 0 5px;} .discount-col.qty {flex: 0 0 120px;color: #4a6ea9;font-weight: 500;} .discount-col.price {font-weight: 600;color: #2c3e50;font-size: 13px;} .discount-col.save {text-align: right;} .save-amount {display: inline-block;background: #e74c3c;color: #fff;padding: 3px 8px;border-radius: 4px;font-size: 13px;font-weight: 600;margin-right: 8px;} .save-text {color: #7f8c8d;font-size: 13px;} /******************************************** Блока цена и Купить прикреплена к footer *********************************************/ .mobile-sticky-footer {display: none;position: fixed;bottom: 0;left: 0;right: 0;background: #fff;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);padding-top:20px; padding-right:15px;padding-left:15px;padding-bottom:35px;z-index: 800;border-top: 1px solid #eee;transform: translateY(0);transition: transform 0.3s ease;} .mobile-sticky-footer .footer-content {display: flex;align-items: center;justify-content: space-between;} .mobile-sticky-footer .price-block {flex: 1;padding-right: 10px;} .mobile-sticky-footer .current-price {font-size: 18px;font-weight: bold;color: #333;} .mobile-sticky-footer .original-price {font-size: 14px;text-decoration: line-through;color: #999;} .mobile-sticky-footer .quantity-block {display: flex;align-items: center;margin-right: 10px;} .mobile-sticky-footer .qty-btn {width: 30px;height: 30px;border: 1px solid #ddd;background: #f9f9f9;display: flex;align-items: center; justify-content: center;font-size: 16px;cursor: pointer;} .mobile-sticky-footer .qty-input {width: 40px;height: 30px;text-align: center;border: 1px solid #ddd;margin: 0 5px;} .mobile-sticky-footer .buy-btn {background: #ff6b00;color: white;border: none;padding: 10px 15px;border-radius: 4px;font-weight: bold;cursor: pointer; white-space: nowrap;} @media (max-width: 767px) { .mobile-sticky-footer {display: block;} } /************************ review.tpl ************************/ .reviews-container {font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;} .review-card {background: #fff;border-radius: 12px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);padding: 20px;margin: 20px; transition: transform 0.2s, box-shadow 0.2s;} .review-card:hover {transform: translateY(-2px);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);} .review-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;flex-wrap: wrap;} .review-author {display: flex;flex-direction: column;} .review-author strong {font-size: 16px;color: #333;font-weight: 600;} .review-date {font-size: 13px;color: #888;margin-top: 2px;} .review-rating {display: flex;align-items: center;} .review-form h3 {margin: 0 0 20px 0;font-size: 18px;} .review-form {max-width: 100%;padding: 25px;background: #f9f9f9;border-radius: 8px;/*margin-top: 30px;*/flex: 1 1 100%;box-shadow: 0 2px 4px rgba(0,0,0,0.05);} @media (max-width: 767px) { .review-form {padding:5px;} .product-details-tabs {padding: 0 10px 30px;} } .star {color: #e0e0e0;margin-left: 2px;} .star.filled {color: #FFC107;} .review-content {margin-top: 10px;} .review-text {color: #444;line-height: 1.6;margin: 0;font-size: 15px;} .reviews-pagination {margin-top: 30px;text-align: center;} .no-reviews {text-align: center;padding: 40px 20px;background: #f9f9f9;border-radius: 12px;color: #666;height: 250px;} .no-reviews svg {margin-bottom: 15px;} .no-reviews p {margin: 0;font-size: 16px;} .review-photo-thumb {max-width: 300px;max-height: 300px;width: auto;height: auto;cursor: pointer;border-radius: 4px;box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease;border: 1px solid #eee;} .review-photo-thumb:hover {transform: scale(1.02);box-shadow: 0 4px 8px rgba(0,0,0,0.15);} .review-photo-modal {display: none;position: fixed;z-index: 10000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.9); overflow: auto;animation: fadeIn 0.3s;} @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } .review-photo-content {display: block;margin: 60px auto 20px;max-width: 90%;max-height: calc(100vh - 100px);width: auto;height: auto;animation: zoomIn 0.3s;} @keyframes zoomIn { from {transform: scale(0.9);} to {transform: scale(1);} } .review-photo-close {position: absolute;top: 20px;right: 30px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;transition: 0.3s; z-index: 10001;background: rgba(0,0,0,0.5);width: 50px;height: 50px;line-height: 42px;text-align: center;border-radius: 50%;} .review-photo-close:hover {color: #bbb;transform: rotate(90deg);} .rating-stars {unicode-bidi: bidi-override;direction: rtl;text-align: center;margin: 20px 0;margin-top: 20px;} .rating-stars input {display: none;} .rating-stars label {display: inline-block;padding: 0 5px;font-size: 50px;color: #ccc;cursor: pointer;transition: color 0.2s;} .rating-stars label:before {content: "★";} .rating-stars input:checked ~ label, .rating-stars label:hover, .rating-stars label:hover ~ label {color: #ffa900;} .rating-stars input:checked + label:hover, .rating-stars input:checked ~ label:hover, .rating-stars label:hover ~ input:checked ~ label, .rating-stars input:checked ~ label:hover ~ label {color: #ffa900;} .review-form-container {display: flex;flex-wrap: wrap;gap: 30px;/*margin-top: 30px;*/} .reviews-sidebar {flex: 1 1 100%;} @media (min-width: 768px) { .review-form {flex: 1 1 calc(50% - 15px);} .reviews-sidebar {flex: 1 1 calc(50% - 15px);} } @media (max-width: 768px) { .rating-stars label {padding: 0 3px;font-size: 45px;} } .review-form .form-group {margin-bottom: 15px;} .review-form input[type="text"], .review-form textarea {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;} .review-form textarea {min-height: 100px;resize: vertical;} .rating-reason-group {margin-top: 20px;padding: 15px;background: #fff;border-radius: 6px;border: 1px solid #eee;box-shadow: 0 1px 3px rgba(0,0,0,0.05);} .rating-reason-group h4 {margin-top: 0;color: #333;font-size: 16px;padding-bottom: 10px;border-bottom: 1px solid #eee;} .checkbox-group-rating {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;margin-top: 10px;} .checkbox-group-rating label {display: flex;align-items: center;padding: 8px 12px;background: #f5f5f5;border-radius: 4px;cursor: pointer;transition: all 0.2s;} .checkbox-group-rating label:hover {background: #eee;} .checkbox-group-rating input[type="checkbox"] {margin-right: 8px;} #photo-upload-section {margin-top: 20px;padding: 15px;background: #fff;border-radius: 6px;border: 1px solid #eee;} .upload-preview {margin-top: 10px;display: flex;flex-wrap: wrap;gap: 10px;} .upload-preview-item {position: relative;width: 100px;height: 100px;border: 1px solid #ddd;border-radius: 4px;overflow: hidden;} .upload-preview-item img {width: 100%;height: 100%;object-fit: cover;} .remove-preview-rating {position: absolute;top: 5px;right: 5px;background: rgba(0,0,0,0.5);color: white;border: none;border-radius: 50%;width: 20px; height: 20px;display: flex;align-items: center;justify-content: center;cursor: pointer;} .submit-btn {background: #4CAF50;color: white;border: none;padding: 12px 20px;border-radius: 4px;cursor: pointer;font-size: 16px; transition: background 0.3s;width: 100%;margin-top: 20px;} .submit-btn:hover {background: #45a049;} .submit-btn[disabled] {background: #cccccc;cursor: not-allowed;} @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .reviews-sidebar {background: #fff;border-radius: 8px;/*box-shadow: 0 2px 4px rgba(0,0,0,0.05);padding: 20px;*/max-height: 800px;overflow-y: auto;} .reviews-sidebar h3 {margin-top: 0;padding-bottom: 15px;border-bottom: 1px solid #eee;} .review-item {padding: 15px 0;border-bottom: 1px solid #f5f5f5;} .review-item:last-child {border-bottom: none;} .review-author {font-weight: bold;margin-bottom: 5px;} .review-date {color: #999;font-size: 12px;margin-bottom: 8px;} .review-text {margin-bottom: 10px;line-height: 1.5;} .review-photo {margin-top: 10px;} .review-photo img {max-width: 100px;max-height: 100px;border-radius: 4px;margin-right: 5px;margin-bottom: 5px;} .review-reasons {margin-top: 10px;font-size: 13px;color: #666;} .review-reasons span {display: inline-block;background: #b8dd4a87;padding: 6px 7px;border-radius: 12px;margin-right: 5px;margin-bottom: 5px;font-weight: 600; color: #000000;font-family: inherit;} .rating-display {unicode-bidi: bidi-override;direction: ltr;display: inline-block;} .rating-display span {display: inline-block;position: relative;width: 1.1em;font-size: 16px;} .rating-display span:before {content: "★";position: absolute;color: #ccc;} .rating-display .filled:before {color: #ffa900;} .required-field:before {content: "*";color: red;} .file-upload-wrapper {position: relative;margin-bottom: 15px;} .file-upload-label {display: block;padding: 20px 15px;background: #f5f5f5;border: 1px dashed #ddd;border-radius: 4px;text-align: center; cursor: pointer;transition: all 0.3s;} .file-upload-label:hover {background: #eee;border-color: #ccc;} .file-upload-label i {margin-right: 8px;} .file-upload-input {position: absolute;left: 0;top: 0;opacity: 0;width: 100%;height: 100%;cursor: pointer;} .file-upload-text {display: block;margin-top: 5px;font-size: 12px;color: #666;} .notification {position: fixed;top: 20px;right: 20px;z-index: 9999;display: flex;align-items: center;padding: 15px 20px;background: #fff; border-radius: 8px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);transform: translateX(120%);transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); max-width: 350px;cursor: pointer;overflow: hidden;} .notification.success {border-left: 4px solid #4CAF50;} .notification.error {border-left: 4px solid #f44336;} .notification i.fa {margin-right: 10px;font-size: 20px;} .notification.success i.fa {color: #4CAF50;} .notification.error i.fa {color: #f44336;} .notification-progress {position: absolute;bottom: 0;left: 0;height: 3px;width: 100%;background: rgba(0,0,0,0.1);} .notification-progress:after {content: '';position: absolute;bottom: 0;left: 0;height: 100%;width: 100%;background: #4CAF50; animation: progress 5s linear forwards;} .notification.success .notification-progress:after {background: #4CAF50;} .notification.error .notification-progress:after {background: #f44336;} @keyframes progress { 0% {width: 100%;} 100% {width: 0%;} } .checkbox-group-rating {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 12px;margin-top: 10px;} .checkbox-group-rating label {display: flex;align-items: center;padding: 12px 14px;border-radius: 12px;background: #f5f5f5;border: 2px solid transparent; cursor: pointer;transition: all 0.3s ease;font-size: 15px;position: relative;} .checkbox-group-rating input[type="checkbox"] {display: none;} .checkbox-group-rating .emoji-box {width: 34px;height: 34px;margin-right: 10px;font-size: 22px;display: flex;align-items: center;justify-content: center; border-radius: 50%;background: #e0e0e0;flex-shrink: 0;transition: background 0.3s, transform 0.3s;} .checkbox-group-rating .text {flex: 1;color: #333;line-height: 1.3;} .checkbox-group-rating input[type="checkbox"]:checked ~ .emoji-box, .checkbox-group-rating input[type="checkbox"]:checked ~ .text, .checkbox-group-rating input[type="checkbox"]:checked ~ .emoji-box + .text {color: white;} .checkbox-group-rating input[type="checkbox"]:checked ~ .emoji-box::before {background: transparent;} .checkbox-group-rating input[type="checkbox"]:checked ~ .emoji-box {background: #10b981;transform: scale(1.1);} .checkbox-group-rating input[type="checkbox"]:checked:checked + .emoji-box + .text {font-weight: 600;} .checkbox-group-rating label:has(input[type="checkbox"]:checked) {background: linear-gradient(135deg, #34d399, #10b981);border-color: #10b981;color: white;} .review-card {display: none;} .review-card.visible {display: block;} .review-rating {display: flex;gap: 2px;} .star.filled svg {fill: currentColor;} .reviews-sidebar {max-height: 700px;overflow-y: auto;} #rating-reasons.required h4 {position: relative;} .required-field {color: red;margin-left: 5px;} @media (max-width: 768px) { .review-photo-thumb {max-width: 200px;max-height: 200px;} .review-photo-content {margin-top: 120px;} .review-photo-close {top: 10px;right: 15px;font-size: 30px;} } @media (max-width: 768px) { .review-header {flex-direction: column;align-items: flex-start;} .review-rating {margin-top: 8px;} .review-card {padding: 15px;} } @media (max-width: 480px) { .review-text {font-size: 14px;} } /******************** exit_intent.tpl *********************/ #exit-intent-email .email-content {border: none;border-radius: 8px;overflow: hidden;position: relative;} #exit-intent-email .email-close {position: absolute;right: 15px;top: 15px;font-size: 24px;opacity: 0.5;z-index: 1;background: none;border: none;cursor: pointer;} #exit-intent-email .email-close:hover {opacity: 1;} #exit-intent-email .email-body {padding: 30px;text-align: center;} #exit-intent-email .email-title {font-size: 22px;font-weight: 600;margin-bottom: 10px;color: #222;} #exit-intent-email .email-text {font-size: 15px;color: #666;margin-bottom: 25px;line-height: 1.4;} #exit-intent-email .email-input {width: 100%;height: 48px;border: 1px solid #e0e0e0;border-radius: 4px;padding: 0 10px;font-size: 15px;margin-bottom: 15px;} #exit-intent-email .email-input:focus {border-color: #aaa;box-shadow: none;} #exit-intent-email .email-submit {width: 100%;background: #222;color: white;border: none;height: 48px;border-radius: 4px;font-size: 15px;font-weight: 500; cursor: pointer;transition: background 0.2s;} #exit-intent-email .email-submit:hover {background: #444;} #exit-intent-email .email-footer {font-size: 12px;color: #999;margin-top: 15px;line-height: 1.4;} .email-positioned {position: fixed;width: 100%;max-width: 380px;margin: 0 auto;background: #ebebeb;z-index: 1001;border-radius: 10px;} @media (min-width: 768px) { .email-positioned {right: 5px;bottom: 20px;top: auto;left: auto;} } @media (max-width: 767px) { .email-positioned {top: 50% !important;left: 50% !important;transform: translate(-50%, -50%) !important;width: calc(100% - 40px) !important;} #exit-intent-email .email-body {padding: 25px 20px;} } /******************** sitemap.tpl *********************/ .wide-sitemap-container {padding: 0px 0px 30px;background: #f9f9f9;font-family: 'Roboto', sans-serif;} .sitemap-page {margin: 0 auto;background: #fff;padding: 25px;border-radius: 10px;box-shadow: 0 2px 20px rgba(0,0,0,0.08);} .sitemap-title {font-size: 28px;color: #2c3e50;margin-bottom: 30px;padding-bottom: 15px;border-bottom: 1px solid #eaeaea;font-weight: 600;} .sitemap-grid {display: flex;flex-wrap: wrap;gap: 40px;} .sitemap-section {flex: 1;min-width: 300px;} .section-title {font-size: 20px;color: #34495e;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #f1f5f9;font-weight: 500;} .category-tree {list-style: none;padding: 0;margin: 0;} .category-item {margin-bottom: 12px;} .category-link {display: flex;align-items: center;padding: 10px 15px;color: #2c3e50;text-decoration: none;border-radius: 6px;transition: all 0.3s; font-size: 15px;} .category-link:hover {background: #f1f5f9;color: #3498db;} .category-link i {margin-right: 12px;color: #7f8c8d;width: 20px;text-align: center;} .main-category {font-weight: 500;color: #2c3e50;} .subcategory-level, .subsubcategory-level {margin-left: 30px;padding-left: 15px;border-left: 1px solid #e0e6ed;} .subcategory-item, .subsubcategory-level a {margin-top: 8px;} .sitemap-links {list-style: none;padding: 0;margin: 0;} .simple-link {margin-bottom: 8px;border-radius: 6px;overflow: hidden;box-shadow: 0 1px 3px rgba(0,0,0,0.1);} .simple-link .sitemap-link {background: #f8fafc;} .simple-link .sitemap-link:hover {background: #f1f5f9;} .sitemap-accordion-item {margin-bottom: 8px;border-radius: 6px;overflow: hidden;box-shadow: 0 1px 3px rgba(0,0,0,0.1);transition: all 0.3s ease;} .sitemap-accordion-item:hover {box-shadow: 0 2px 8px rgba(0,0,0,0.15);} .sitemap-accordion-header {background: #f8f9fa;cursor: pointer;transition: background 0.3s;} .sitemap-accordion-header:hover {background: #e9ecef;} .sitemap-link {display: flex;align-items: center;padding: 12px 15px;color: #2c3e50;font-weight: 500;text-decoration: none;font-size: 15px;} .sitemap-link i:first-child {margin-right: 12px;font-size: 18px;color: #4a6ea9;width: 24px;text-align: center;} .accordion-arrow {margin-left: auto;transition: transform 0.3s;font-size: 14px;color: #6c757d;} .sitemap-sublinks {max-height: 0;overflow: hidden;padding-left: 0;margin: 0;background: #fff;transition: max-height 0.3s ease-out;} .sitemap-accordion-item.active .sitemap-sublinks {max-height: 500px;} .sitemap-accordion-item.active .accordion-arrow {transform: rotate(180deg);} .sublink-item {border-top: 1px solid #f1f1f1;} .sublink {display: flex;align-items: center;padding: 10px 15px 10px 42px;color: #555;text-decoration: none;transition: all 0.2s;font-size: 14px;} .sublink:hover {background: #f8f9fa;color: #2a5885;} .sublink i {margin-right: 10px;font-size: 15px;color: #6c757d;width: 20px;text-align: center;} .sublink:hover i {color: #4a6ea9;} @media (max-width: 768px) { .sitemap-grid {flex-direction: column;gap: 30px;} .sitemap-page {padding: 15px;} .sitemap-title {font-size: 24px;} .section-title {font-size: 18px;} } /******************** information.tpl *********************/ .wide-page-container {padding: 0px 0px 30px;background: #f9f9f9;font-family: 'Roboto', sans-serif;} .information-page {margin: 0 auto;background: #fff;padding: 0;border-radius: 8px;box-shadow: 0 2px 15px rgba(0,0,0,0.05);} .information-content {padding: 25px;} .information-card {background: #fff;border-radius: 6px;padding: 15px;} .page-title {font-size: 28px;color: #2c3e50;margin-bottom: 25px;padding-bottom: 15px;border-bottom: 1px solid #eee;font-weight: 600;} .page-content {line-height: 1.6;color: #444;font-size: 15px;} .page-content p {margin-bottom: 15px;} .page-content ul, .page-content ol {margin-bottom: 15px;padding-left: 20px;} .page-content img {max-width: 100%;height: auto;border-radius: 4px;margin: 10px 0;} .page-content a {color: #0066cc;text-decoration: none;transition: color 0.3s;} .page-content a:hover {color: #004499;text-decoration: underline;} .page-content h2, .page-content h3, .page-content h4 {color: #2c3e50;margin: 20px 0 15px;} .page-content h2 {font-size: 22px;border-bottom: 1px solid #eee;padding-bottom: 8px;} .page-content h3 {font-size: 19px;} .page-content h4 {font-size: 17px;} @media (max-width: 768px) { .information-content {padding: 15px;} .page-title {font-size: 24px;margin-bottom: 20px;} .modern-breadcrumbs {padding: 10px 15px;}} /******************** success.tpl ********************/ .success-content {display: flex;justify-content: center;align-items: center;min-height: 70vh;padding: 40px 0;} .success-container {text-align: center;max-width: 700px;margin: 0 auto;padding: 50px;background: white; border-radius: 24px;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);position: relative;animation: fadeInUp 0.5s ease-out;} .success-animation {text-align: center;margin-bottom: 30px;} .success-checkmark i {font-size: 80px;color: #28a745;animation: successBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;} @keyframes successBounce { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .success-checkmark:hover i {animation: successPulse 0.6s ease-in-out;} @keyframes successPulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); text-shadow: 0 0 10px rgba(40, 167, 69, 0.5); } 100% { transform: scale(1); } } .failure-cross {width: 80px;height: 80px;margin: 0 auto;position: relative;display: inline-block;cursor: default;} .cross-icon {position: relative;width: 80px;height: 80px;display: inline-block;} .cross-icon::after {content: '';position: absolute;top: -4px;left: -4px;right: -4px;bottom: -4px; border-radius: 50%;background: #FFE3E3;} .cross-circle {position: absolute;width: 80px;height: 80px;border: 4px solid #DC3545;border-radius: 50%; top: 0;left: 0;z-index: 10;opacity: 0;transform: scale(0.8);animation: circlePulse 0.5s ease-out forwards;} .cross-line {position: absolute;width: 50px;height: 4px;background-color: #DC3545;border-radius: 2px;top: 38px; left: 15px;z-index: 10;opacity: 0;transform-origin: center;} .cross-line-1 {transform: rotate(45deg);animation: lineDraw 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s forwards;} .cross-line-2 {transform: rotate(-45deg);animation: lineDrawReverse 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) 0.35s forwards;} /* Специальная анимация для LQP Fail */ .lqp-fail-cross .cross-circle {animation: circleBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;} .lqp-fail-cross .cross-line-1 {animation: lineDrawElastic 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s forwards;} .lqp-fail-cross .cross-line-2 {animation: lineDrawReverseElastic 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.45s forwards;} .failure-cross:hover .cross-circle {animation: rippleEffect 0.6s ease-out;} .failure-cross:hover .cross-line {filter: drop-shadow(0 0 3px rgba(220, 53, 69, 0.5));} .success-title {font-size: 36px;font-weight: 700;margin-bottom: 20px;text-align: center;color: #333;background: linear-gradient(135deg, #008C29 0%, #00B140 100%);-webkit-background-clip: text; -webkit-text-fill-color: transparent;background-clip: text;} .failure-title {color: #DC3545;background: linear-gradient(135deg, #DC3545 0%, #E74C3C 100%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;} .logout-title {color: #008C29;text-align: center;margin-bottom: 20px;} .lqp-fail-title {font-size: 28px;} .success-message {font-size: 18px;line-height: 1.6;color: #666;margin-bottom: 40px;text-align: center;} .failure-message {color: #DC3545;} .logout-message {text-align: center;color: #6c757d;font-size: 16px;line-height: 1.6;margin-bottom: 30px;} .lqp-fail-message {background-color: #fff5f5;border-left: 4px solid #dc3545;padding: 20px;border-radius: 8px;text-align: left;max-width: 500px;margin: 20px auto;} .lqp-fail-message p {margin-bottom: 10px;font-size: 16px;line-height: 1.5;} .lqp-fail-message ul {margin: 10px 0 0 20px;padding-left: 0;list-style-type: disc;} .lqp-fail-message li {margin: 8px 0;color: #555;font-size: 14px;} .order-details-card {background: #f8fff9;padding: 25px;border-radius: 16px;margin-bottom: 40px;border: 1px solid #e0f7e5;max-width: 500px;margin-left: auto;margin-right: auto;} .order-details-card h3 {color: #008C29;margin-top: 0;margin-bottom: 20px;font-size: 20px;text-align: center;} .order-info-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));gap: 50px;text-align: center;} .order-info-item {display: flow-root;justify-content: space-between;padding: 12px 0;border-bottom: 1px solid #e0f7e5;} .order-info-item:last-child {border-bottom: none;} .order-info-label {color: #7E7E7E;font-weight: 500;display: block;font-size: 12px;margin-bottom: 5px;} .order-info-value {color: #333;font-weight: 600;display: block;font-size: 16px;} .success-actions {display: flex;gap: 15px;justify-content: center;flex-wrap: wrap;margin: 30px 0;} .success-btn {/*display: inline-flex;*/align-items: center;gap: 10px;padding: 12px 24px;border-radius: 12px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer;position: relative;overflow: hidden;} .success-btn i {font-size: 16px;} .success-btn.primary {background: linear-gradient(135deg, #008C29 0%, #00B140 100%);color: white;box-shadow: 0 4px 15px rgba(0, 140, 41, 0.3);} .success-btn.primary:hover {transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0, 140, 41, 0.4);} .success-btn.failure-btn {background: linear-gradient(135deg, #DC3545 0%, #E74C3C 100%);color: white;box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);} .success-btn.failure-btn:hover {transform: translateY(-3px);box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);} .success-btn.secondary {background: white;color: #008C29;border: 2px solid #008C29;} .success-btn.secondary:hover {background: #f8fff9;transform: translateY(-3px);} .success-btn:active {transform: scale(0.98);} .success-next-steps {text-align: left;margin-top: 40px;padding-top: 30px;border-top: 1px solid #e0e0e0;} .success-next-steps h3 {color: #008C29;margin-bottom: 25px;text-align: center;font-size: 20px;} .steps-timeline {position: relative;display: flex;justify-content: space-between;gap: 20px;flex-wrap: wrap;} .steps-timeline::before {content: '';position: absolute;left: 30px;top: 0;bottom: 0;width: 2px;background: #e0f7e5;} .step {flex: 1;text-align: center;padding: 20px;background: #f8f9fa;border-radius: 12px;transition: all 0.3s ease;margin-bottom: 30px;position: relative;} .step:hover {transform: translateY(-5px);box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);} .step-icon {width: 60px;height: 60px;margin: 0 auto 15px;background: #008C29;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 20px;color: white;position: relative;z-index: 2;} .step-icon i {font-size: 24px;color: white;} .step-content {padding-top: 10px;} .step-content h4 {margin: 0 0 8px 0;color: #333;font-size: 16px;} .step-content p {margin: 0;color: #666;font-size: 14px;line-height: 1.5;} .modern-breadcrumbs {margin-bottom: 15px;} .breadcrumb-list {display: flex;flex-wrap: wrap;list-style: none;padding: 0;margin: 0;} .breadcrumb-item {display: flex;align-items: center;} .breadcrumb-link {display: inline-flex;align-items: center;text-decoration: none;color: #7E7E7E;transition: color 0.3s;} .breadcrumb-link:hover {color: #28a745;text-decoration: none;} .breadcrumb-text {font-size: 12px;} .breadcrumb-arrow {margin: 0 8px;font-size: 12px;color: #7E7E7E;} .breadcrumb-current {color: #333;font-weight: 500;font-size: 12px;} .logout-notification {text-align: center;margin-bottom: 30px;} .logout-notification i {color: #008C29;} .logout-icon {display: inline-flex;justify-content: center;align-items: center;width: 120px;height: 120px;background: #f8f9fa;border-radius: 50%;border: 3px solid #e9ecef;} .logout-link {color: #008C29;text-decoration: none;font-weight: 500;} .logout-link:hover {text-decoration: underline;} @keyframes circlePulse { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.8; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes lineDraw { 0% { opacity: 0; transform: rotate(45deg) scaleX(0); } 100% { opacity: 1; transform: rotate(45deg) scaleX(1); } } @keyframes lineDrawReverse { 0% { opacity: 0; transform: rotate(-45deg) scaleX(0); } 100% { opacity: 1; transform: rotate(-45deg) scaleX(1); } } @keyframes circleBounce { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 0.9; transform: scale(1.2); } 70% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes lineDrawElastic { 0% { opacity: 0; transform: rotate(45deg) scaleX(0); } 60% { opacity: 1; transform: rotate(45deg) scaleX(1.1); } 100% { opacity: 1; transform: rotate(45deg) scaleX(1); } } @keyframes lineDrawReverseElastic { 0% { opacity: 0; transform: rotate(-45deg) scaleX(0); } 60% { opacity: 1; transform: rotate(-45deg) scaleX(1.1); } 100% { opacity: 1; transform: rotate(-45deg) scaleX(1); } } @keyframes rippleEffect { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); transform: scale(1); } 100% { box-shadow: 0 0 0 20px rgba(220, 53, 69, 0); transform: scale(1.05); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .success-container {padding: 30px 20px;margin: 0 15px;} .success-title {font-size: 28px;} .success-checkmark i {font-size: 60px;} .cross-icon, .cross-circle {width: 60px;height: 60px;} .cross-line {width: 38px;top: 28px;left: 11px;} .success-actions {flex-direction: column;} .lqp-fail-actions {flex-direction: column;align-items: center;} .lqp-fail-actions .success-btn {width: 100%;max-width: 280px;} .order-info-grid {grid-template-columns: 1fr;gap: 20px;} .steps-timeline {flex-direction: column;} .steps-timeline::before {left: 30px;} .step {margin-bottom: 15px;} .lqp-fail-message {padding: 15px;margin: 15px;} } /******************** footer.tpl *********************/ .compact-footer {background: #f9f9f9;color: #333;padding: 40px 0 25px;font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, sans-serif;line-height: 1.6; border-top: 1px solid #e0e0e0;font-size: 15px;} .footer-grid {display: grid;grid-template-columns: 1fr;gap: 30px;margin-bottom: 30px;} .footer-brand {margin-bottom: 20px;} .footer-logo img {max-width: 180px;height: auto;margin-bottom: 15px;} .footer-description {color: #666;margin-bottom: 20px;font-size: 14px;} .extension-block {background: #f0f4f8;padding: 15px;border-radius: 8px;margin-top: 20px;} .extension-btn {display: flex;align-items: center;gap: 10px;color: #4285F4;font-weight: 500;text-decoration: none;margin-bottom: 8px;} .extension-btn svg {flex-shrink: 0;} .extension-note {font-size: 13px;color: 666;margin: 0;} .footer-nav {margin-bottom: 15px;} .nav-title {font-size: 18px;font-weight: 600;margin: 0 0 15px 0;color: #222;display: flex;justify-content: space-between;align-items: center; position: relative;padding-bottom: 10px;} .nav-title::after {content: '';position: absolute;bottom: 0;left: 0;width: 40px;height: 2px;background: #4285F4;} .nav-links {list-style: none;padding: 0;margin: 0;} .nav-links li {margin-bottom: 8px;} .nav-links a {color: #555;text-decoration: none;transition: all 0.3s;font-size: 15px;display: block;padding: 6px 0;position: relative;} .nav-links a:hover {color: #4285F4;padding-left: 5px;} .footer-contact {margin-bottom: 15px;} .contact-info {margin-bottom: 20px;} .contact-item {display: flex;align-items: flex-start;gap: 12px;margin-bottom: 15px;} .contact-item svg {flex-shrink: 0;margin-top: 2px;} .contact-item a {color: #4285F4;text-decoration: none;transition: opacity 0.3s;} .contact-item a:hover {opacity: 0.8;} .contact-hours {display: block;font-size: 13px;color: #666;margin-top: 3px;} .social-media h4 {font-size: 16px;margin-bottom: 12px;color: #444;} .social-icons {display: flex;gap: 15px;} .social-icons a {color: #555;transition: color 0.3s;} .social-icons a:hover {color: #4285F4;} .footer-bottom {border-top: 1px solid #e0e0e0;padding-top: 20px;display: flex;flex-direction: column;gap: 15px;} .copyright {color: #666;font-size: 14px;} .payment-methods {display: flex;align-items: center;} .payment-methods img {height: 60px;width: auto;filter: grayscale(100%);opacity: 0.7;transition: all 0.3s;} .payment-methods img:hover {filter: grayscale(0%);opacity: 1;} .accordion-icon {font-size: 20px;transition: transform 0.3s ease;color: #666;display: none;} .accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);padding-left: 15px;opacity: 0;} /* Контакты всегда открыты */ .contacts-always-open .accordion-content {max-height: 1000px !important;opacity: 1 !important;padding-bottom: 15px;} .contacts-always-open .accordion-icon {display: none !important;} /* Анимация появления элементов футера */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .footer-grid > * {animation: fadeIn 0.5s ease forwards;opacity: 0;} .footer-grid > *:nth-child(1) { animation-delay: 0.1s; } .footer-grid > *:nth-child(2) { animation-delay: 0.2s; } .footer-grid > *:nth-child(3) { animation-delay: 0.3s; } .footer-grid > *:nth-child(4) { animation-delay: 0.4s; } .footer-grid > *:nth-child(5) { animation-delay: 0.5s; } /* Адаптивные стили */ @media (max-width: 767px) { .accordion-icon {display: inline-block !important;} .nav-title {cursor: pointer;padding-right: 20px;} .accordion.active .accordion-content {max-height: 500px;padding-bottom: 15px;opacity: 1;} .accordion.active .accordion-icon {transform: rotate(45deg);color: #4285F4;} .compact-footer {padding: 30px 0 20px;} .footer-bottom {text-align: center;align-items: center;} } @media (min-width: 768px) { .footer-grid {grid-template-columns: repeat(2, 1fr);gap: 40px 30px;} .accordion-icon {display: none !important;} .accordion-content {max-height: none !important;padding-left: 0;opacity: 1 !important;} .nav-title {cursor: auto;} .footer-bottom {flex-direction: row;justify-content: space-between;align-items: center;} } @media (min-width: 992px) { .footer-grid {grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;gap: 50px;} .footer-contact {padding-left: 20px;border-left: 1px solid #e0e0e0;} } /* Доступность */ a:focus-visible, button:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; } /***************** Setting ******************/ .cmswidget {display:none;}/*Loading...*/