/*
  GamesGu.ru — общий файл стилей.
  Докстринг:
    Единый CSS для всех страниц магазина: шапка, левое меню категорий, футер,
    а также общие компоненты каталога/страниц.

  Важно:
    - Файл подключается как /static/site-shared.css
    - Не зависит от mag.go (только статический файл).
*/

/* ===== base styles (из index.html) ===== */
:root {
      --primary-bg: #ffffff;
      --secondary-bg: #f8f9fa;
      --accent-blue: #4361ee;
      --accent-blue-light: #4895ef;
      --accent-purple: #7209b7;
      --text-dark: #212529;
      --text-gray: #6c757d;
      --text-light: #adb5bd;
      --border-color: #dee2e6;
      --shadow-light: rgba(0, 0, 0, 0.05);
      --shadow-medium: rgba(0, 0, 0, 0.08);
      --shadow-dark: rgba(0, 0, 0, 0.1);
      --success-color: #2ecc71;
      --warning-color: #f39c12;
      --heart-color: #e74c3c;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--primary-bg);
      color: var(--text-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 15px;
    }

    /* Верхняя панель */
    #top {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
      color: white;
      padding: 10px 0;
      font-size: 14px;
    }

    #top .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #top .contact-info {
      display: flex;
      gap: 30px;
    }

    #top .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #top .contact-item i {
      font-size: 12px;
    }

    #top .contact-item a {
      color: white;
      text-decoration: none;
      transition: opacity 0.3s ease;
    }

    #top .contact-item a:hover {
      opacity: 0.9;
    }

    #top .auth-links {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    #top .auth-links a {
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: opacity 0.3s ease;
    }

    #top .auth-links a:hover {
      opacity: 0.9;
    }

    /* Кнопка "Написать нам" в верхней панели */
    .write-us-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 15px;
      background: var(--success-color);
      color: white;
      text-decoration: none;
      border-radius: 20px;
      font-weight: 500;
      font-size: 13px;
      transition: all 0.3s ease;
    }

    .write-us-button:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
      color: white;
    }

    /* Хедер */
    header {
      background: var(--primary-bg);
      padding: 20px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    #logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .logo-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-image img {
      height: 70px; /* Увеличен размер логотипа */
      width: auto;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .logo-main {
      display: none; /* Скрываем GamesGu.ru */
    }

    .logo-subtitle {
      font-size: 18px; /* Увеличили шрифт */
      color: var(--text-gray);
      font-weight: 600; /* Сделали жирнее */
      letter-spacing: 1px;
      white-space: nowrap;
    }

    /* Основная навигация */
    .main-nav {
      background: var(--primary-bg);
      border-bottom: 1px solid var(--border-color);
      box-shadow: 0 2px 10px var(--shadow-light);
    }

    .main-nav .container {
      display: flex;
      justify-content: center;
    }

    .nav-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-menu li {
      position: relative;
    }

    .nav-menu a {
      display: block;
      padding: 18px 22px;
      color: var(--text-dark);
      text-decoration: none;
      font-weight: 500;
      font-size: 15px;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-menu a:hover {
      color: var(--accent-blue);
    }

    .nav-menu a:hover::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      background: var(--accent-blue);
      border-radius: 3px 3px 0 0;
    }

    .nav-menu a.active {
      color: var(--accent-blue);
      background: linear-gradient(to bottom, rgba(67, 97, 238, 0.05), transparent);
    }

    .nav-menu a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      background: var(--accent-blue);
      border-radius: 3px 3px 0 0;
    }

    /* Панель поиска и корзины */
    .header-right {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .search-form {
      position: relative;
      width: 400px;
      max-width: 100%;
    }

    .search-form input {
      width: 100%;
      padding: 12px 50px 12px 20px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--secondary-bg);
      transition: all 0.3s ease;
    }

    .search-form input:focus {
      outline: none;
      border-color: var(--accent-blue);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
      background: white;
    }

    .search-form button {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background: var(--accent-blue);
      color: white;
      border: none;
      border-radius: 0 8px 8px 0;
      width: 50px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .search-form button:hover {
      background: var(--accent-purple);
    }

    /* Кнопка избранного */
    #wishlist-header {
      position: relative;
    }

    .wishlist-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: var(--primary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      position: relative;
    }

    .wishlist-button:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
    }

    .wishlist-button.active {
      color: var(--heart-color);
      border-color: var(--heart-color);
    }

    .wishlist-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--heart-color);
      color: white;
      font-size: 11px;
      font-weight: 600;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--primary-bg);
    }

    /* Корзина - кнопка */
    #cart {
      position: relative;
    }

    .cart-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--accent-blue);
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .cart-button:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(114, 9, 183, 0.2);
    }

    .cart-count {
      background: white;
      color: var(--accent-blue);
      font-size: 12px;
      font-weight: 600;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Стиль для иконки корзины - новая красивая иконка */
    .cart-icon-image {
      width: 24px;
      height: 24px;
      filter: brightness(0) invert(1);
    }

    /* Playstation иконки в меню */
    .ps-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
      display: inline-block;
    }

    /* Модальное окно корзины */
    .cart-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .cart-modal.active {
      display: flex;
    }

    .cart-content {
      background: white;
      border-radius: 12px;
      width: 100%;
      max-width: 900px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .cart-header {
      padding: 20px 30px;
      background: var(--accent-blue);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cart-header h3 {
      margin: 0;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .close-cart {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.3s ease;
    }

    .close-cart:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .cart-body {
      padding: 30px;
      display: flex;
      gap: 30px;
      flex: 1;
      overflow: auto;
    }

    .cart-items {
      flex: 1;
      min-width: 0;
    }

    .cart-summary {
      width: 300px;
      flex-shrink: 0;
      background: var(--secondary-bg);
      border-radius: 8px;
      padding: 25px;
      display: flex;
      flex-direction: column;
    }

    .cart-item {
      display: flex;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid var(--border-color);
      gap: 20px;
    }

    .cart-item:last-child {
      border-bottom: none;
    }

    .cart-item-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .cart-item-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cart-item-info {
      flex: 1;
      min-width: 0;
    }

    .cart-item-title .cart-item-link,
    .cart-item-image .cart-item-link-image {
      color: inherit;
      text-decoration: none;
      display: inline-block;
    }

    .cart-item-title .cart-item-link:hover {
      color: var(--accent-blue);
      text-decoration: underline;
    }

    .cart-item-image .cart-item-link-image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
    }

    .cart-item-image .cart-item-link-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .cart-item-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 16px;
    }

    .cart-item-price {
      color: var(--accent-blue);
      font-weight: 600;
      font-size: 18px;
    }

    .cart-item-controls {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .quantity-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .quantity-btn:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .quantity-input {
      width: 40px;
      text-align: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 5px;
      font-size: 16px;
      font-weight: 500;
    }

    .remove-item {
      background: none;
      border: none;
      color: var(--text-light);
      cursor: pointer;
      padding: 5px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .remove-item:hover {
      color: #e74c3c;
      background: rgba(231, 76, 60, 0.1);
    }

    .summary-title {
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--border-color);
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 15px;
    }

    .summary-total {
      font-weight: 700;
      font-size: 20px;
      color: var(--accent-blue);
      margin: 20px 0;
      padding-top: 20px;
      border-top: 2px solid var(--border-color);
    }

    .checkout-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: auto;
    }

    .checkout-btn {
      padding: 14px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      text-decoration: none;
    }

    .checkout-btn.primary {
      background: var(--accent-blue);
      color: white;
    }

    .checkout-btn.primary:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .checkout-btn.secondary {
      background: var(--success-color);
      color: white;
    }

    .checkout-btn.secondary:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }

    .checkout-btn.tertiary {
      background: var(--warning-color);
      color: white;
    }

    .checkout-btn.tertiary:hover {
      background: #e67e22;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
    }

    .cart-empty {
      text-align: center;
      padding: 40px;
      color: var(--text-gray);
    }

    .cart-empty i {
      font-size: 48px;
      margin-bottom: 20px;
      opacity: 0.5;
    }

    .cart-empty h4 {
      margin-bottom: 10px;
      font-weight: 600;
    }

    /* Основной контент */
    main {
      min-height: calc(100vh - 400px);
      padding: 30px 0;
      background: var(--secondary-bg);
    }

    .content-wrapper {
      display: flex;
      gap: 30px;
    }

    /* Левая колонка с фиксированным меню */
    #sidebar {
      width: 220px;
      flex-shrink: 0;
    }

    .catalog-nav {
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 15px var(--shadow-light);
      position: sticky;
      top: 20px;
    }

    .catalog-header {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
      color: white;
      padding: 18px 20px;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .catalog-header i {
      font-size: 18px;
    }

    .catalog-menu {
      padding: 0;
    }

    .catalog-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .catalog-item {
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .catalog-item:last-child {
      border-bottom: none;
    }

    .catalog-item:hover {
      background: var(--secondary-bg);
    }

    .catalog-link {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      color: var(--text-dark);
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      transition: all 0.3s ease;
      gap: 10px;
    }

    .catalog-link:hover {
      color: var(--accent-blue);
      padding-left: 25px;
    }

    .catalog-link img.ps-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    /* Правая колонка с контентом */
    #content {
      flex: 1;
      background: var(--primary-bg);
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 2px 15px var(--shadow-light);
      overflow: hidden;
    }

    /* Карусель */
    .carousel {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 40px;
      box-shadow: 0 4px 20px var(--shadow-medium);
    }

    .carousel-item img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .carousel-control-prev,
    .carousel-control-next {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      margin: 0 15px;
    }

    .carousel:hover .carousel-control-prev,
    .carousel:hover .carousel-control-next {
      opacity: 1;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-color: var(--accent-blue);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background-size: 15px;
    }

    h1 {
      color: var(--text-dark);
      font-weight: 700;
      margin-bottom: 30px;
      font-size: 28px;
    }

    h2 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 25px;
      font-size: 32px;
      text-align: center;
    }

    /* Страница контактов */
    .contacts-page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .contacts-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .contacts-header h1 {
      font-size: 32px;
      color: var(--accent-blue);
      margin-bottom: 15px;
    }

    .contacts-header p {
      font-size: 18px;
      color: var(--text-gray);
      line-height: 1.6;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contacts-info {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 40px;
    }

    .contact-card {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: transform 0.3s ease;
      min-height: 280px;
      display: flex;
      flex-direction: column;
    }

    .contact-card:hover {
      transform: translateY(-5px);
    }

    .contact-card i {
      font-size: 36px;
      color: var(--accent-blue);
      margin-bottom: 15px;
    }

    .contact-card h3 {
      font-size: 18px;
      margin-bottom: 15px;
      color: var(--text-dark);
    }

    .contact-card .contact-content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contact-card p {
      color: var(--text-gray);
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 5px;
    }

    .contact-card a {
      color: var(--accent-blue);
      text-decoration: none;
      font-weight: 500;
    }

    .contact-card a:hover {
      text-decoration: underline;
    }

    /* Фотографии магазина - 3 строчки по 1 столбцу */
    .store-photos {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 40px;
    }

    .store-photo {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px var(--shadow-medium);
    }

    .store-photo img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .store-photo:hover img {
      transform: scale(1.03);
    }

    /* Яндекс карта */
    #map, #map-pickup {
      width: 100%;
      height: 400px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px var(--shadow-medium);
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .map-container {
      position: relative;
    }

    .map-info {
      background: white;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px var(--shadow-light);
    }

    .map-info h3 {
      color: var(--accent-blue);
      margin-bottom: 15px;
      font-size: 20px;
    }

    .map-info p {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .map-info strong {
      color: var(--text-dark);
    }

    /* НОВЫЙ СТИЛЬ: Страница "Способы оплаты" - полностью переделана */
    .payment-page-container {
      max-width: 900px;
      margin: 0 auto;
    }

    .payment-methods-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 20px;
      margin-bottom: 30px;
    }

    .payment-row {
      display: contents;
    }

    .payment-image-col {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: var(--secondary-bg);
      border-radius: 12px;
      overflow: hidden;
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }

    .payment-image-col img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .payment-info-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px;
      background: white;
      border-radius: 12px;
      border: 1px solid var(--border-color);
    }

    .payment-info-col h3 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .payment-info-col p {
      color: var(--text-gray);
      font-size: 15px;
      line-height: 1.5;
      margin: 0;
    }

    .payment-security {
      margin-top: 30px;
      padding: 20px;
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .payment-security i {
      color: var(--accent-blue);
      font-size: 24px;
    }

    .payment-security strong {
      color: var(--text-dark);
      font-weight: 600;
    }

    /* Страница самовывоза */
    .transport-info {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
    }

    .transport-info h3 {
      color: var(--accent-blue);
      margin-bottom: 15px;
    }

    .bus-schedule {
      margin-top: 20px;
    }

    .bus-route {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      padding: 10px;
      background: white;
      border-radius: 8px;
    }

    .bus-number {
      background: var(--accent-blue);
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 600;
    }

    .bus-image {
      margin-top: 20px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 10px var(--shadow-light);
    }

    .bus-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* НОВЫЙ СТИЛЬ: Категории товаров в каталоге */
    .catalog-categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }

    .category-card {
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      text-decoration: none;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .category-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px var(--shadow-dark);
      border-color: var(--accent-blue);
    }

    .category-card.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--secondary-bg);
    }

    .category-card.disabled:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--border-color);
    }

    .category-image {
      height: 150px;
      overflow: hidden;
    }

    .category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .category-card:hover .category-image img {
      transform: scale(1.05);
    }

    .category-card.disabled:hover .category-image img {
      transform: none;
    }

    .category-content {
      padding: 20px;
      text-align: center;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .category-content h3 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .category-count {
      color: var(--text-gray);
      font-size: 14px;
    }



    /* PS5 категории: квадратные фото + градиентная подложка с подписью */
    #ps5-catalog-page .category-card.ps5-feature-card {
      padding: 0;
      overflow: hidden;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-image {
      position: relative;
      height: auto;
      aspect-ratio: 1 / 1;
      margin: 0;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .ps5-category-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 26px 14px 14px;
      text-align: center;
      background: linear-gradient(180deg, rgba(7, 13, 24, 0) 0%, rgba(7, 13, 24, 0.58) 48%, rgba(7, 13, 24, 0.9) 100%);
      pointer-events: none;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .ps5-category-overlay span {
      display: block;
      color: #ffffff;
      font-size: 32px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.01em;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-content {
      padding: 12px 16px 14px;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-content h3 {
      display: none;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-count {
      font-size: 13px;
    }

    @media (max-width: 768px) {
      #ps5-catalog-page .category-card.ps5-feature-card .ps5-category-overlay span {
        font-size: 24px;
      }
    }
    /* НОВЫЙ СТИЛЬ: Компактный алфавитный фильтр - ИЗМЕНЕН размер шрифта */
    .alphabet-filter-compact {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 30px;
    }

    .alphabet-letters-compact {
      display: flex;
      flex-wrap: nowrap;
      gap: 3px;
      justify-content: center;
      overflow-x: auto;
      padding-bottom: 5px;
    }

    .alphabet-letters-compact.ru {
      margin-bottom: 8px;
    }

    .alphabet-letters-compact.en {
      margin-top: 8px;
    }

    .alphabet-divider {
      height: 1px;
      background: var(--border-color);
      margin: 8px 0;
      width: 100%;
    }

    .alphabet-letter-compact {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      background: white;
      border: 1px solid var(--border-color);
      color: var(--text-gray);
      flex-shrink: 0;
      font-size: 13px; /* Размер для активных букв */
    }

    .alphabet-letter-compact:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .alphabet-letter-compact.active {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .alphabet-letter-compact.active.clicked {
      background: var(--warning-color);
      border-color: var(--warning-color);
    }

    .alphabet-letter-compact.disabled {
      background: var(--secondary-bg);
      color: var(--text-light);
      cursor: not-allowed;
      border-color: var(--border-color);
      font-size: 11px; /* Меньший размер для неактивных букв */
      width: 24px;
      height: 24px;
    }

    .alphabet-letter-compact.disabled:hover {
      background: var(--secondary-bg);
      color: var(--text-light);
      border-color: var(--border-color);
    }

    .catalog-products {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }

    .catalog-header-page {
      text-align: center;
      margin-bottom: 30px;
    }

    .catalog-header-page h1 {
      font-size: 32px;
      color: var(--accent-blue);
      margin-bottom: 10px;
    }

    /* Карточки товаров - 9 плашек (3x3) */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      margin-bottom: 30px;
    }

    .product-card {
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px var(--shadow-dark);
      border-color: var(--accent-blue);
    }

    .wishlist-button-product {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 36px;
      height: 36px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      z-index: 10;
      color: var(--text-light);
    }

    .wishlist-button-product:hover {
      background: var(--heart-color);
      color: white;
      transform: scale(1.1);
    }

    .wishlist-button-product.active {
      color: var(--heart-color);
      background: white;
    }

    .wishlist-button-product.active:hover {
      color: white;
      background: var(--heart-color);
    }

    .product-image {
      padding: 20px;
      text-align: center;
      background: var(--secondary-bg);
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .product-image img {
      max-height: 160px;
      max-width: 100%;
      object-fit: contain;
      transition: transform 0.5s ease;
    }

    .product-card:hover .product-image img {
      transform: scale(1.05);
    }

    .product-content {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .product-title {
      margin-bottom: 10px;
      min-height: 48px;
    }

    .product-title a {
      color: var(--text-dark);
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      transition: color 0.3s ease;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-title a:hover {
      color: var(--accent-blue);
    }

    .product-description {
      color: var(--text-gray);
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 15px;
      flex-grow: 1;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-price {
      margin-top: auto;
    }

    .price-new {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 20px;
      display: block;
    }

    .price-tax {
      color: var(--text-gray);
      font-size: 13px;
    }

    .product-actions {
      margin-top: 15px;
      display: flex;
      gap: 10px;
    }

    .product-actions button {
      flex: 1;
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 10px;
      color: var(--text-dark);
      transition: all 0.3s ease;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .product-actions button.add-to-cart {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .product-actions button.remove-from-cart {
      background: #e74c3c;
      color: white;
      border-color: #e74c3c;
    }

    .product-actions button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .product-actions button.add-to-cart:hover {
      background: var(--accent-purple);
      border-color: var(--accent-purple);
    }

    .product-actions button.remove-from-cart:hover {
      background: #c0392b;
      border-color: #c0392b;
    }

    /* Карточка товара (детальная страница) */
    .product-detail-page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .product-detail-container {
      display: flex;
      gap: 40px;
      margin-top: 30px;
    }

    .product-detail-images {
      flex: 1;
      max-width: 500px;
    }

    .product-main-image {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px var(--shadow-medium);
      margin-bottom: 20px;
    }

    .product-main-image img {
      width: 100%;
      height: 400px;
      object-fit: contain;
      background: var(--secondary-bg);
      padding: 30px;
    }

    .product-thumbnails {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .product-thumbnail {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }

    .product-thumbnail:hover,
    .product-thumbnail.active {
      border-color: var(--accent-blue);
    }

    .product-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-detail-info {
      flex: 1;
    }

    .product-detail-title {
      color: var(--text-dark);
      font-weight: 700;
      font-size: 28px;
      margin-bottom: 15px;
    }

    .product-detail-price {
      margin-bottom: 25px;
    }

    .product-detail-price .price-new {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 32px;
      display: block;
      margin-bottom: 5px;
    }

    .product-detail-price .price-tax {
      color: var(--text-gray);
      font-size: 14px;
    }

    .product-detail-stock {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
    }

    .stock-available {
      color: var(--success-color);
      font-weight: 600;
    }

    .stock-unavailable {
      color: #e74c3c;
      font-weight: 600;
    }

    .product-parameters {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
    }

    .product-parameters h3 {
      color: var(--accent-blue);
      margin-bottom: 20px;
      font-size: 20px;
    }

    .parameter-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .parameter-item:last-child {
      border-bottom: none;
    }

    .parameter-name {
      color: var(--text-dark);
      font-weight: 500;
    }

    .parameter-value {
      color: var(--text-gray);
    }

    .product-description-detail {
      margin-bottom: 30px;
    }

    .product-description-detail h3 {
      color: var(--text-dark);
      margin-bottom: 15px;
      font-size: 20px;
    }

    .product-description-detail p {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 15px;
      font-size: 16px;
    }

    .product-key-features {
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
    }

    .product-key-features h3 {
      color: var(--accent-blue);
      margin-bottom: 20px;
      font-size: 20px;
    }

    .key-features-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .key-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .key-feature-item i {
      color: var(--accent-blue);
      margin-top: 3px;
    }

    .product-detail-actions {
      display: flex;
      gap: 15px;
      margin-top: 30px;
    }

    .product-detail-actions button {
      flex: 1;
      padding: 15px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .btn-add-to-cart-detail {
      background: var(--accent-blue);
      color: white;
    }

    .btn-add-to-cart-detail:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .btn-buy-now {
      background: var(--success-color);
      color: white;
    }

    .btn-buy-now:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }

    .btn-add-to-wishlist-detail {
      width: 60px;
      background: var(--secondary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
    }

    .btn-add-to-wishlist-detail:hover {
      background: var(--heart-color);
      color: white;
      border-color: var(--heart-color);
    }

    .btn-add-to-wishlist-detail.active {
      color: var(--heart-color);
      border-color: var(--heart-color);
    }

    /* Стили для страницы услуг */
    .service-card {
      display: flex;
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 30px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px var(--shadow-dark);
      border-color: var(--accent-blue);
    }

    .service-image {
      width: 300px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .service-card:hover .service-image img {
      transform: scale(1.05);
    }

    .service-content {
      flex: 1;
      padding: 25px;
      display: flex;
      flex-direction: column;
    }

    .service-content h3 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 15px;
      font-size: 20px;
    }

    .service-description {
      color: var(--text-gray);
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 20px;
      flex-grow: 1;
    }

    .service-price {
      margin-bottom: 20px;
    }

    .service-price .price-new {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 24px;
      display: block;
      margin-bottom: 5px;
    }

    .service-price .price-tax {
      color: var(--text-gray);
      font-size: 14px;
    }

    .service-actions {
      display: flex;
      gap: 15px;
    }

    .service-actions button,
.service-actions a.btn-service-detail,
.service-actions a.btn-service-order {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Важно для <a>, чтобы выглядело как кнопка */
  text-decoration: none;
}

    .btn-service-detail {
      background: var(--secondary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
    }

    .btn-service-detail:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .btn-service-order {
      background: var(--accent-blue);
      color: white;
    }

    .btn-service-order:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    /* Стили для детальной страницы услуги */
    .service-detail-content {
      display: flex;
      gap: 40px;
      margin-top: 30px;
    }

    .service-detail-image {
      width: 40%;
      flex-shrink: 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px var(--shadow-medium);
    }

    .service-detail-image img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .service-detail-text {
      flex: 1;
    }

    .service-detail-text h3,
    .service-detail-text h4,
    .service-detail-text h5 {
      color: var(--text-dark);
      margin-top: 25px;
      margin-bottom: 15px;
    }

    .service-detail-text h3 {
      font-size: 24px;
      border-bottom: 2px solid var(--accent-blue);
      padding-bottom: 10px;
    }

    .service-detail-text h4 {
      font-size: 20px;
      color: var(--accent-blue);
    }

    .service-detail-text h5 {
      font-size: 18px;
      color: var(--text-dark);
    }

    .service-detail-text p {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 15px;
      font-size: 16px;
    }

    .service-detail-text ul {
      margin-bottom: 20px;
      padding-left: 20px;
    }

    .service-detail-text li {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 8px;
      font-size: 15px;
    }

    .service-included,
    .service-note,
    .service-options {
      background: var(--secondary-bg);
      padding: 20px;
      border-radius: 8px;
      margin: 25px 0;
    }

    .service-included h4,
    .service-note h4,
    .service-options h4 {
      margin-top: 0;
    }

    .service-price-detail {
      background: var(--primary-bg);
      border: 2px solid var(--accent-blue);
      border-radius: 12px;
      padding: 25px;
      margin: 30px 0;
    }

    .service-price-detail h4 {
      color: var(--accent-blue);
      margin-top: 0;
      margin-bottom: 20px;
      text-align: center;
    }

    .price-list {
      max-width: 600px;
      margin: 0 auto;
    }

    .price-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
      font-size: 16px;
    }

    .price-item:last-child {
      border-bottom: none;
    }

    .price-item.total {
      font-weight: 700;
      font-size: 18px;
      color: var(--accent-blue);
      margin-top: 10px;
      padding-top: 15px;
      border-top: 2px solid var(--border-color);
    }

    .price-item .price {
      font-weight: 600;
      color: var(--accent-blue);
    }

    .price-note {
      text-align: center;
      font-style: italic;
      color: var(--text-gray);
      margin-top: 15px;
      font-size: 14px;
    }

    .service-contact-buttons {
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      padding: 30px;
      margin-top: 40px;
      text-align: center;
    }

    .service-contact-buttons h4 {
      color: var(--accent-blue);
      margin-bottom: 25px;
      font-size: 32px;
    }

    .contact-buttons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }

    .contact-btn {
      padding: 15px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: none;
    }

    .contact-btn.phone {
      background: var(--success-color);
      color: white;
    }

    .contact-btn.phone:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }

    .contact-btn.telegram {
      background: #0088cc;
      color: white;
    }

    .contact-btn.telegram:hover {
      background: #0077b5;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    }

    .contact-btn.form {
      background: var(--accent-blue);
      color: white;
      grid-column: span 2;
    }

    .contact-btn.form:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .contact-note {
      color: var(--text-gray);
      font-size: 14px;
      margin-top: 15px;
      font-style: italic;
    }

    /* Футер */
    footer {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      color: white;
      padding: 50px 0 30px;
      margin-top: 40px;
    }

    .footer-top {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 40px;
      margin-bottom: 30px;
    }

    .footer-section h5 {
      color: var(--accent-blue-light);
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid rgba(72, 149, 239, 0.3);
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 12px;
    }

    .footer-links a {
      color: #adb5bd;
      text-decoration: none;
      transition: all 0.3s ease;
      font-size: 14px;
      display: inline-block;
    }

    .footer-links a:hover {
      color: white;
      transform: translateX(5px);
    }

    .contact-info {
      font-size: 14px;
    }

    .contact-item {
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .contact-item i {
      color: var(--accent-blue-light);
      margin-top: 2px;
    }

    .footer-bottom {
      padding-top: 20px;
      font-size: 14px;
      color: #adb5bd;
      text-align: center;
    }

    /* Страница избранного */
    .wishlist-page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .wishlist-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .wishlist-header h1 {
      font-size: 32px;
      color: var(--heart-color);
      margin-bottom: 15px;
    }

    .wishlist-count-badge {
      display: inline-block;
      background: var(--heart-color);
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 14px;
      margin-top: 10px;
    }

    .wishlist-empty {
      text-align: center;
      padding: 60px 20px;
      background: var(--secondary-bg);
      border-radius: 12px;
      margin: 40px 0;
    }

    .wishlist-empty i {
      font-size: 64px;
      color: var(--text-light);
      margin-bottom: 20px;
    }

    .wishlist-empty h3 {
      color: var(--text-gray);
      margin-bottom: 15px;
    }

    .wishlist-empty p {
      color: var(--text-light);
      max-width: 500px;
      margin: 0 auto 25px;
    }

    .btn-browse {
      display: inline-block;
      padding: 12px 30px;
      background: var(--accent-blue);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .btn-browse:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    /* Lifehack текст */
    .lifehack-text {
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      padding: 30px;
      margin: 30px 0;
      border-left: 4px solid var(--accent-blue);
    }

    .lifehack-text h4 {
      color: var(--accent-blue);
      margin-bottom: 20px;
      font-size: 20px;
    }

    .lifehack-text p {
      margin-bottom: 15px;
      line-height: 1.6;
      color: var(--text-dark);
    }

    .lifehack-text ul {
      margin: 15px 0 15px 20px;
    }

    .lifehack-text li {
      margin-bottom: 8px;
      color: var(--text-dark);
    }

    /* Модальное окно для Telegram чата */
    .telegram-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .telegram-modal.active {
      display: flex;
    }

    .telegram-content {
      background: white;
      border-radius: 12px;
      width: 100%;
      max-width: 500px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .telegram-header {
      padding: 20px 30px;
      background: #0088cc;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .telegram-header h3 {
      margin: 0;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .close-telegram {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.3s ease;
    }

    .close-telegram:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .telegram-body {
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
      overflow: auto;
    }

    .telegram-form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .telegram-form-group label {
      font-weight: 500;
      color: var(--text-dark);
    }

    .telegram-form-group input,
    .telegram-form-group textarea {
      padding: 12px 15px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .telegram-form-group input:focus,
    .telegram-form-group textarea:focus {
      outline: none;
      border-color: #0088cc;
      box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
    }

    .telegram-form-group textarea {
      min-height: 120px;
      resize: vertical;
    }

    .telegram-submit-btn {
      padding: 14px;
      background: #0088cc;
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
    }

    .telegram-submit-btn:hover {
      background: #0077b5;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    }

    .telegram-note {
      color: var(--text-gray);
      font-size: 14px;
      text-align: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
    }

    /* Кнопка "Назад" в каталоге */
    .back-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: var(--secondary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      margin-bottom: 20px;
    }
    /* Центрирование умной кнопки "Вернуться назад" */
.back-button.back-button-center {
  display: flex;              /* делаем блочной flex-кнопкой */
  width: fit-content;         /* ширина по контенту, иначе будет на всю строку */
  margin: 0 auto 20px;        /* центр + сохраняем нижний отступ как в .back-button */
  justify-content: center;    /* на всякий случай */
  align-self: center;         /* если кнопка окажется внутри flex-контейнера */
}

    .back-button:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
      transform: translateY(-2px);
    }

    /* Стили для результатов поиска */
    .search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      max-height: 400px;
      overflow-y: auto;
      display: none;
    }

    .search-results.active {
      display: block;
    }

    .search-result-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .search-result-item:last-child {
      border-bottom: none;
    }

    .search-result-item:hover {
      background: var(--secondary-bg);
    }

    .search-result-image {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .search-result-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .search-result-info {
      flex: 1;
      min-width: 0;
    }

    .search-result-title {
      font-weight: 500;
      font-size: 14px;
      color: var(--text-dark);
      margin-bottom: 3px;
    }

    .search-result-price {
      font-size: 13px;
      color: var(--accent-blue);
      font-weight: 600;
    }

    .search-no-results {
      padding: 20px;
      text-align: center;
      color: var(--text-gray);
    }

    /* Адаптивность */

    @media (min-width: 1280px) {
      .products-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 992px) {
      .content-wrapper {
        flex-direction: column;
      }

      #sidebar {
        width: 100%;
        position: static;
      }

      .catalog-nav {
        position: static;
      }

      .search-form {
        width: 300px;
      }

      .nav-menu a {
        padding: 15px 18px;
        font-size: 14px;
      }

      .cart-body {
        flex-direction: column;
      }

      .cart-summary {
        width: 100%;
      }

      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .contacts-info {
        grid-template-columns: repeat(3, 1fr);
      }

      #map, #map-pickup {
        height: 350px;
      }

      .payment-methods-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .payment-image-col {
        max-height: 200px;
      }

      .payment-image-col img {
        max-height: 150px;
      }

      .service-card {
        flex-direction: column;
      }

      .service-image {
        width: 100%;
        height: 250px;
      }

      .service-detail-content {
        flex-direction: column;
      }

      .service-detail-image {
        width: 100%;
      }

      .service-detail-image img {
        height: 300px;
      }

      .contact-buttons {
        grid-template-columns: 1fr;
      }

      .contact-btn.form {
        grid-column: span 2;
      }

      .catalog-categories {
        grid-template-columns: repeat(2, 1fr);
      }

      .product-detail-container {
        flex-direction: column;
      }

      .product-detail-images {
        max-width: 100%;
      }

      .key-features-list {
        grid-template-columns: 1fr;
      }

      /* Адаптация алфавитного фильтра */
      .alphabet-letters-compact {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    @media (max-width: 768px) {
      .header-content {
        flex-direction: column;
        text-align: center;
      }

      #logo {
        align-items: center;
      }

      .search-form {
        width: 100%;
      }

      .header-right {
        width: 100%;
        justify-content: space-between;
      }

      .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
      }

      .nav-menu a {
        padding: 12px 15px;
        font-size: 13px;
      }

      #top .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }

      #top .contact-info {
        flex-direction: column;
        gap: 10px;
      }

      #top .auth-links {
        flex-wrap: wrap;
        justify-content: center;
      }

      .carousel-item img {
        height: 250px;
      }

      .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .cart-modal {
        padding: 10px;
      }

      .cart-header {
        padding: 15px 20px;
      }

      .cart-body {
        padding: 20px;
      }

      .cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .cart-item-image {
        width: 100%;
        height: 150px;
      }

      .cart-item-controls {
        width: 100%;
        justify-content: space-between;
      }

      .store-photo img {
        height: 200px;
      }

      #map, #map-pickup {
        height: 300px;
        margin-bottom: 30px;
      }

      .catalog-categories {
        grid-template-columns: 1fr;
      }

      .contacts-info {
        grid-template-columns: 1fr;
      }

      .contacts-header p {
        white-space: normal;
        font-size: 16px;
      }

      .alphabet-letters-compact {
        justify-content: center;
      }

      .payment-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
      }

      .payment-image-col, .payment-info-col {
        width: 100%;
      }
    }

    @media (max-width: 576px) {
      #content {
        padding: 20px;
      }

      h1 {
        font-size: 24px;
      }

      h2 {
        font-size: 20px;
      }

      .product-image {
        height: 180px;
      }

      .nav-menu {
        flex-direction: column;
        align-items: center;
      }

      .nav-menu a {
        width: 100%;
        text-align: center;
        padding: 10px;
      }

      .product-actions {
        flex-direction: column;
      }

      .contacts-header h1 {
        font-size: 26px;
      }

      .contacts-header p {
        font-size: 16px;
      }

      #map, #map-pickup {
        height: 250px;
      }

      .service-actions {
        flex-direction: column;
      }

      .service-content {
        padding: 20px;
      }

      .service-content h3 {
        font-size: 18px;
      }

      .service-contact-buttons {
        padding: 20px;
      }

      .contact-btn {
        padding: 12px;
        font-size: 14px;
      }

      .alphabet-letter-compact {
        width: 26px;
        height: 26px;
        font-size: 11px;
      }

      .wishlist-button-product {
        width: 32px;
        height: 32px;
        top: 10px;
        right: 10px;
      }

      .product-detail-actions {
        flex-direction: column;
      }

      .btn-add-to-wishlist-detail {
        width: 100%;
      }
    }

    @media (min-width: 1200px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 767px) {
      .products-grid {
        grid-template-columns: 1fr;
      }
    }

    .text-primary {
      color: var(--accent-blue) !important;
    }

    .bg-light {
      background: var(--secondary-bg);
    }

    .rounded {
      border-radius: 8px;
    }

    .shadow-sm {
      box-shadow: 0 2px 8px var(--shadow-light);
    }

    .shadow-md {
      box-shadow: 0 4px 15px var(--shadow-medium);
    }

    /* Страницы контента */
    .page-content {

    }

    .page-content.active {
      display: block;
    }

/* ===== shop-runtime-v6-styles (из index.html) ===== */
/* ===== Runtime fix v6: единая ширина, сетка, карточки ===== */
  .container {
    max-width: 1400px !important;
  }

  #sidebar {
    width: 220px !important;
    flex-shrink: 0;
  }

  #content {
    flex: 1;
    min-width: 0;
  }

  /* Каталог: 3 карточки в строке на десктопе */
  .catalog-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
  }

  @media (max-width: 992px) {
    .catalog-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 768px) {
    .catalog-products {
      grid-template-columns: 1fr !important;
    }

    #sidebar {
      width: 100% !important;
    }
  }

  /* Карточка товара: одинаковая геометрия + кнопка всегда снизу */
  .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-title {
    min-height: 52px;
    margin-bottom: 8px;
  }

  .product-title a {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    word-break: break-word;
  }

  .product-description {
    min-height: 34px;
  }

  .product-price {
    margin-top: auto;
  }

  .product-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
  }

  .product-actions .add-to-cart {
    width: 100%;
    border-radius: 8px;
  }

  /* Сердце в правом верхнем углу карточки */
  .wishlist-button-product {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.95);
    color: #aeb7c2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
  }

  .wishlist-button-product:hover {
    color: var(--heart-color);
    border-color: var(--heart-color);
    transform: scale(1.05);
  }

  .wishlist-button-product.active {
    color: var(--heart-color);
    border-color: var(--heart-color);
    background: #fff5f7;
  }

  /* Состояние "товар в корзине" */
  .add-to-cart.in-cart,
  .add-to-cart.remove-from-cart {
    background: linear-gradient(135deg, #5c2dd5, #7b2cbf) !important;
    border: 1px solid #4c1db8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(92, 45, 213, 0.28);
  }

  .add-to-cart.in-cart:hover,
  .add-to-cart.remove-from-cart:hover {
    background: linear-gradient(135deg, #4f22c2, #6f22ae) !important;
  }

  .btn-add-to-cart-detail.in-cart {
    background: linear-gradient(135deg, #5c2dd5, #7b2cbf) !important;
    color: #fff !important;
    border-color: #4c1db8 !important;
  }

  .empty-cart {
    padding: 24px;
    text-align: center;
    color: var(--text-gray);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    margin: 8px 0;
  }

  .wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  @media (max-width: 992px) {
    .wishlist-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 768px) {
    .wishlist-grid {
      grid-template-columns: 1fr;
    }
  }

/* ===== site-v9-fixes (из index.html) ===== */
/* v9: аккуратные правки интерфейса без слома текущей логики */

  /* Единая ширина рабочей зоны */
  .container { max-width: 1400px; }
  #content { width: 100%; max-width: none; }
  .content-wrapper { display: flex; align-items: flex-start; gap: 20px; }
  #sidebar, .sidebar { flex: 0 0 220px; width: 220px; max-width: 220px; }

  /* В шаблоне каталога убираем лишний служебный заголовок */
  #catalog-template-page .catalog-header-page { display: none !important; }

  /* Группы (Приставки / Игры / Аксессуары) */
  #catalog-categories-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
  }
  #catalog-categories-container .category-card {
    min-height: 170px;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  #catalog-categories-container .category-image {
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  #catalog-categories-container .category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #catalog-categories-container .category-content h3 {
    font-size: 28px;
    line-height: 1.15;
  }
  #catalog-categories-container .category-count { font-size: 14px; }

  /* v14: Квадратные изображения и подписи с градиентом в блоках шаблонного каталога */
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card {
    padding: 0;
    min-height: 0;
    overflow: hidden;
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .category-image {
    position: relative;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .template-category-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 12px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(9, 12, 20, 0) 0%, rgba(9, 12, 20, 0.58) 48%, rgba(9, 12, 20, 0.9) 100%);
    pointer-events: none;
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .template-category-overlay span {
    display: block;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .category-content {
    display: none;
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .category-content h3 {
    display: none;
  }
  #catalog-template-page #catalog-categories-container .category-card.template-feature-card .category-count {
    display: none;
  }
  @media (max-width: 768px) {
    #catalog-template-page #catalog-categories-container .category-card.template-feature-card .template-category-overlay span {
      font-size: 24px;
    }
  }

  /* Алфавит делаем заметным */
  .alphabet-filter-compact {
    background: #f6f7fb;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0 16px;
  }
  .alphabet-letters-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .alphabet-letter-compact {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 13px;
    border-radius: 7px;
  }

  /* Сетка карточек: 3 / 2 / 1 и на всю доступную ширину */
  #catalog-template-page #catalog-products-container,
  #subcategory-template-page #subcategory-products-container,
  #ps5-catalog-page #ps5-catalog-products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #catalog-template-page #catalog-products-container > .products-grid,
  #subcategory-template-page #subcategory-products-container > .products-grid,
  #catalog-template-page #catalog-products-container > .catalog-products,
  #subcategory-template-page #subcategory-products-container > .catalog-products {
    display: contents !important;
  }

  /* Карточка товара */
  #catalog-products-container .product-card,
  #subcategory-products-container .product-card,
  #ps5-catalog-products .product-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 14px;
  }

  #catalog-products-container .product-image,
  #subcategory-products-container .product-image,
  #ps5-catalog-products .product-image {
    height: 260px;
    padding: 6px 8px;
    background: var(--secondary-bg);
  }

  #catalog-products-container .product-image img,
  #subcategory-products-container .product-image img,
  #ps5-catalog-products .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  #catalog-products-container .product-content,
  #subcategory-products-container .product-content,
  #ps5-catalog-products .product-content {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
  }

  #catalog-products-container .product-title,
  #subcategory-products-container .product-title,
  #ps5-catalog-products .product-title {
    margin-bottom: 10px;
    min-height: unset;
  }

  #catalog-products-container .product-title a,
  #subcategory-products-container .product-title a,
  #ps5-catalog-products .product-title a {
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #catalog-products-container .product-description,
  #subcategory-products-container .product-description,
  #ps5-catalog-products .product-description {
    display: none !important;
  }

  #catalog-products-container .product-price,
  #subcategory-products-container .product-price,
  #ps5-catalog-products .product-price { margin-top: auto; }

  #catalog-products-container .product-actions,
  #subcategory-products-container .product-actions,
  #ps5-catalog-products .product-actions { margin-top: 12px; }

  /* Состояние "в корзине" — мягкий оранжевый */
  .product-actions button.remove-from-cart,
  .product-actions button.in-cart,
  #add-to-cart-detail.in-cart {
    background: #e89a33 !important;
    border-color: #e89a33 !important;
    color: #fff !important;
  }
  .product-actions button.remove-from-cart:hover,
  .product-actions button.in-cart:hover,
  #add-to-cart-detail.in-cart:hover {
    background: #d98722 !important;
    border-color: #d98722 !important;
  }

  /* Плашка поверх карты */
  .map-badge-v9 {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    background: rgba(17, 24, 39, 0.86);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.3;
    pointer-events: none;
    backdrop-filter: blur(2px);
  }

  /* Галерея на главной: индикаторы сверху, текст читабельнее */
  #main-carousel .carousel-indicators {
    top: 14px;
    bottom: auto;
    margin-bottom: 0;
    z-index: 5;
  }
  #main-carousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.5);
    opacity: 1;
    margin: 0 5px;
  }
  #main-carousel .carousel-indicators .active { background: #fff; }
  #main-carousel .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 26px 20px;
    text-align: left;
    background: linear-gradient(180deg, rgba(14,20,34,0) 0%, rgba(14,20,34,.78) 58%, rgba(14,20,34,.92) 100%);
  }
  #main-carousel .carousel-caption h5 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
  }
  #main-carousel .carousel-caption p {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
  }

  /* Кнопка возврата для страниц услуги */
  .service-back-btn { margin-bottom: 14px; }

  @media (max-width: 1200px) {
    #catalog-template-page #catalog-products-container,
    #subcategory-template-page #subcategory-products-container,
    #ps5-catalog-page #ps5-catalog-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #catalog-categories-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 768px) {
    #catalog-template-page #catalog-products-container,
    #subcategory-template-page #subcategory-products-container,
    #ps5-catalog-page #ps5-catalog-products { grid-template-columns: 1fr !important; }

    #catalog-categories-container { grid-template-columns: 1fr; }

    #catalog-products-container .product-image,
    #subcategory-products-container .product-image,
    #ps5-catalog-products .product-image { height: 220px; }

    #main-carousel .carousel-caption h5 { font-size: 32px; }
    #main-carousel .carousel-caption p { font-size: 14px; }
  }

/* ===== shop-runtime-v7-overrides (из index.html) ===== */
/* ===== Runtime fix v7 ===== */
  .container { max-width: 1400px !important; }
  #sidebar { width: 220px !important; flex-shrink: 0; }
  #content { flex: 1; min-width: 0; overflow: visible !important; }

  /* Каталог: 3/2/1 карточки */
  .catalog-products,
  .products-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  @media (max-width: 1279px) {
    .catalog-products,
    .products-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 767px) {
    .catalog-products,
    .products-grid {
      grid-template-columns: 1fr !important;
    }

    #sidebar {
      width: 100% !important;
    }
  }

  /* Фото товара: крупнее и строго по центру */
  .product-image {
    height: 235px !important;
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--secondary-bg);
    cursor: default !important; /* клики по фото не открывают старую деталку */
  }

  .product-image img {
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
  }

  .product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-title {
    min-height: 112px !important;
    margin-bottom: 10px;
  }

  .product-title a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .product-description {
    min-height: 40px;
  }

  .product-price { margin-top: auto; }
  .product-actions { margin-top: 12px; display: flex; }
  .product-actions .add-to-cart { width: 100%; }

  /* Цвет кнопки "В корзине" — оранжевый в стиле сайта */
  .add-to-cart.in-cart,
  .add-to-cart.remove-from-cart,
  .btn-add-to-cart-detail.in-cart {
    background: linear-gradient(135deg, #ff9f43, #ff7f11) !important;
    border-color: #e66f00 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(255, 127, 17, 0.28);
  }

  .add-to-cart.in-cart:hover,
  .add-to-cart.remove-from-cart:hover,
  .btn-add-to-cart-detail.in-cart:hover {
    background: linear-gradient(135deg, #ff922b, #f97316) !important;
  }

  .add-to-cart.out-of-stock,
  .btn-add-to-cart-detail.out-of-stock {
    background: #c7ced6 !important;
    border-color: #b8c0c9 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  .cart-stock-note {
    margin-top: 6px;
    font-size: 12px;
    color: #5f6b7a;
  }

  .cart-stock-note.out {
    color: #e74c3c;
    font-weight: 600;
  }

  .runtime-notice {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    background: rgba(28, 34, 43, 0.92);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }

  .runtime-notice.show {
    opacity: 1;
    transform: translateY(0);
  }

  .runtime-notice.warn {
    background: rgba(230, 111, 0, 0.92);
  }

  /* Карусель: читабельная подпись и кликабельные точки */
  #main-carousel .carousel-caption.d-none.d-md-block { display: block !important; }

  #main-carousel .carousel-caption {
    background: linear-gradient(0deg, rgba(0,0,0,.60), rgba(0,0,0,.20));
    border-radius: 12px;
    padding: 14px 18px;
    left: 4%;
    right: 4%;
    bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
  }

  #main-carousel .carousel-caption h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  #main-carousel .carousel-caption p {
    font-size: 15px;
    margin: 0;
  }

  #main-carousel .carousel-indicators [data-bs-target] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 0 6px;
    border: 2px solid rgba(255,255,255,.9);
    background-color: rgba(255,255,255,.45);
    opacity: 1;
  }

  #main-carousel .carousel-indicators .active {
    background-color: #ff9f43;
    border-color: #ff9f43;
    transform: scale(1.05);
  }

  #main-carousel .carousel-item[data-page] {
    cursor: pointer;
  }

/* ===== shop-runtime-v8-overrides (из index.html) ===== */
/* ===== Runtime fix v8: визуальные и layout доработки ===== */
  main > .container,
  main .container {
    max-width: 1680px !important;
    width: calc(100% - 24px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .content-wrapper { gap: 18px !important; }
  #sidebar { width: 220px !important; }
  #content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 18px !important;
  }

  /* Контейнеры каталога занимают всю доступную ширину */
  #catalog-template-page,
  #subcategory-template-page,
  #ps5-catalog-page { width: 100% !important; max-width: none !important; }

  #catalog-products-container,
  #subcategory-products-container,
  #ps5-catalog-products {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #catalog-products-container > *,
  #subcategory-products-container > *,
  #ps5-catalog-products > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  @media (max-width: 1200px) {
    #catalog-products-container,
    #subcategory-products-container,
    #ps5-catalog-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 767px) {
    #catalog-products-container,
    #subcategory-products-container,
    #ps5-catalog-products {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
  }

  /* Картинка товара крупнее, по центру, пропорции сохранены */
  .product-image {
    height: 320px !important;
    padding: 0 !important;
    background: #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  .product-content {
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
  }

  .product-title {
    min-height: 68px !important;
    margin: 0 !important;
  }

  .product-title a {
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-description {
    min-height: 0 !important;
    margin: 0 !important;
    display: none !important;
  }

  .product-price { margin-top: auto !important; }

  /* Баннер: сплошная подложка-градиент до низа, мягкие индикаторы */
  #main-carousel .carousel-item { position: relative !important; }
  #main-carousel .carousel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(11,15,25,.78) 0%, rgba(11,15,25,.46) 45%, rgba(11,15,25,0) 78%);
  }

  #main-carousel .carousel-caption {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 24px 26px 24px !important;
    z-index: 2;
  }

  #main-carousel .carousel-indicators {
    bottom: 10px !important;
    gap: 8px;
  }

  #main-carousel .carousel-indicators [data-bs-target] {
    width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    background: rgba(255,255,255,.35) !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  #main-carousel .carousel-indicators .active {
    background: rgba(255, 168, 107, .95) !important;
    border-color: rgba(255, 168, 107, 1) !important;
    transform: scale(1.06);
  }

  /* Кнопка возврата в услугах */
  .service-back-btn {
    margin-bottom: 12px !important;
  }

/* ===== site-v10-fixes (из index.html) ===== */
/* ===== v10: общий ритм ширин под 3 карточки ===== */
  #top .container,
  header .container,
  .main-nav .container,
  main > .container,
  footer .container {
    max-width: 1320px !important;
  }

  .content-wrapper {
    align-items: flex-start !important;
    gap: 14px !important;
  }

  #sidebar,
  .sidebar {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
  }

  #content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .page-content {
    width: 100% !important;
    max-width: none !important;
  }

  /* ===== v10: сетка каталога без "запертого" контейнера ===== */
  #catalog-template-page #catalog-products-container,
  #ps5-catalog-page #ps5-catalog-products,
  #subcategory-template-page #subcategory-products-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #catalog-template-page #catalog-products-container > .products-grid,
  #subcategory-template-page #subcategory-products-container > .products-grid,
  #ps5-catalog-page #ps5-catalog-products > .products-grid,
  #catalog-template-page #catalog-products-container > .catalog-products,
  #subcategory-template-page #subcategory-products-container > .catalog-products,
  #ps5-catalog-page #ps5-catalog-products > .catalog-products {
    display: contents !important;
  }

  #catalog-template-page .catalog-header-page,
  #catalog-template-page .catalog-categories,
  #catalog-template-page .alphabet-filter-compact,
  #catalog-template-page #catalog-products-container,
  #ps5-catalog-page .catalog-header-page,
  #ps5-catalog-page .catalog-categories,
  #ps5-catalog-page .alphabet-filter-compact,
  #ps5-catalog-page #ps5-catalog-products,
  #subcategory-template-page .catalog-header-page,
  #subcategory-template-page .alphabet-filter-compact,
  #subcategory-template-page #subcategory-products-container {
    max-width: none !important;
  }

  /* ===== v10: карточка товара (размер/фото/ритм) ===== */
  #catalog-template-page .product-card,
  #ps5-catalog-page .product-card,
  #subcategory-template-page .product-card,
  .catalog-products .product-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 470px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #catalog-template-page .product-image,
  #ps5-catalog-page .product-image,
  #subcategory-template-page .product-image,
  .catalog-products .product-image {
    height: 250px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f3f5f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #catalog-template-page .product-image img,
  #ps5-catalog-page .product-image img,
  #subcategory-template-page .product-image img,
  .catalog-products .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  .catalog-products .product-content {
    padding: 12px 12px 14px !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
  }

  .catalog-products .product-title {
    min-height: 68px !important;
    margin: 0 !important;
  }

  .catalog-products .product-title a {
    font-size: 13px !important;
    line-height: 1.36 !important;
  }

  .catalog-products .product-price {
    margin-top: auto !important;
  }

  .catalog-products .product-actions {
    margin-top: 10px !important;
  }

  /* ===== v10: подпись в шапке ===== */
  .logo-subtitle {
    font-family: "Segoe UI", "Inter", "Arial", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .11em !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    opacity: .92 !important;
  }

  /* ===== v10: баннер/галерея ===== */
  #main-carousel .carousel-item {
    position: relative !important;
    cursor: pointer;
  }

  #main-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(9,13,22,.30) 0%, rgba(9,13,22,.54) 58%, rgba(9,13,22,.76) 100%);
  }

  #main-carousel .carousel-caption,
  #main-carousel .carousel-caption.d-none.d-md-block {
    display: block !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(92%, 940px) !important;
    padding: 20px 24px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(13,18,30,.66), rgba(13,18,30,.82)) !important;
    text-align: center !important;
    z-index: 3;
  }

  #main-carousel .carousel-caption h5 {
    font-size: clamp(24px, 3.2vw, 38px) !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
  }

  #main-carousel .carousel-caption p {
    font-size: clamp(15px, 1.8vw, 21px) !important;
    line-height: 1.34 !important;
    margin-bottom: 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
  }

  #main-carousel .carousel-indicators {
    top: 14px !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
    gap: 8px;
    z-index: 6;
  }

  #main-carousel .carousel-indicators [data-bs-target] {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    background: rgba(255,255,255,.42) !important;
    opacity: 1 !important;
  }

  #main-carousel .carousel-indicators .active {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,1) !important;
    transform: scale(1.06);
  }

  /* ===== v10: алфавит (английский сверху) ===== */
  .alphabet-filter-compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .alphabet-divider {
    display: none !important;
  }

  .alphabet-letters-compact.en {
    order: 1;
  }

  .alphabet-letters-compact.ru {
    order: 2;
  }

  .alphabet-letters-compact {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .alphabet-letter-compact {
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(60,88,170,.25) !important;
    background: rgba(72,101,206,.10) !important;
    color: #2d4fbb !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: .15s ease;
  }

  .alphabet-letter-compact.active,
  .alphabet-letter-compact.is-active {
    background: linear-gradient(180deg, #4f68da, #435fd5) !important;
    color: #fff !important;
    border-color: rgba(67,95,213,.95) !important;
  }

  .alphabet-letter-compact.is-disabled {
    background: #eceff4 !important;
    color: #9aa4b2 !important;
    border-color: #d4dae3 !important;
    cursor: default;
  }

  @media (max-width: 1200px) {
    #catalog-template-page #catalog-products-container,
    #ps5-catalog-page #ps5-catalog-products,
    #subcategory-template-page #subcategory-products-container {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    #main-carousel .carousel-caption,
    #main-carousel .carousel-caption.d-none.d-md-block {
      width: min(94%, 760px) !important;
      padding: 18px 18px !important;
    }
  }

  @media (max-width: 768px) {
    #top .container,
    header .container,
    .main-nav .container,
    main > .container,
    footer .container {
      max-width: 100% !important;
    }

    #catalog-template-page #catalog-products-container,
    #ps5-catalog-page #ps5-catalog-products,
    #subcategory-template-page #subcategory-products-container {
      grid-template-columns: 1fr !important;
    }

    #main-carousel .carousel-caption,
    #main-carousel .carousel-caption.d-none.d-md-block {
      width: min(95%, 92vw) !important;
      padding: 14px 14px !important;
      top: 54% !important;
    }

    #main-carousel .carousel-caption h5 {
      font-size: clamp(18px, 5vw, 24px) !important;
    }

    #main-carousel .carousel-caption p {
      font-size: clamp(12px, 3.7vw, 15px) !important;
    }
  }

  /* ===== v10.1: галерея — текст снизу по центру, градиент на всю ширину ===== */
  #main-carousel .carousel-item::after {
    background: linear-gradient(to top, rgba(9,13,22,.86) 0%, rgba(9,13,22,0) 62%) !important;
  }

  #main-carousel .carousel-caption,
  #main-carousel .carousel-caption.d-none.d-md-block {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    width: min(92%, 980px) !important;
    padding: 0 18px 10px !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  /* ===== v10.1: карточки в категориях — фото как на главной, цена по центру ===== */
  #catalog-template-page .product-image,
  #ps5-catalog-page .product-image,
  #subcategory-template-page .product-image,
  .catalog-products .product-image {
    height: 290px !important;
    background: #fff !important;
  }

  .catalog-products .product-title {
    min-height: 56px !important;
  }

  .catalog-products .product-title a {
    font-size: 14px !important;
    line-height: 1.34 !important;
  }

  .catalog-products .product-price {
    margin-top: auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .catalog-products .product-price,
  .catalog-products .product-price * {
    text-align: center !important;
  }

  .catalog-products .product-price {
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 140, 0, .30) !important;
    background: rgba(255, 140, 0, .10) !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ===== v10.1: алфавит — полный, несуществующие буквы серые и некликабельные ===== */
  .alphabet-letter-compact.is-disabled {
    opacity: .42 !important;
    border-color: rgba(120,120,120,.22) !important;
    background: rgba(120,120,120,.10) !important;
    cursor: not-allowed !important;
  }

  .alphabet-letter-compact.is-enabled {
    opacity: 1 !important;
    cursor: pointer !important;
  }

  .alphabet-letter-compact.is-active {
    border-color: rgba(255, 140, 0, .85) !important;
    background: rgba(255, 140, 0, .20) !important;
  }

/* ===== site-v10-1a-fixes (из index.html) ===== */
/* ===== V10.1A точечные правки ===== */

  /* 1) Галерея: текст снизу по центру + градиент на всю ширину */
  #main-carousel .carousel-caption {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    text-align: center !important;
    padding: 28px 18px 16px !important;
    background: linear-gradient(180deg, rgba(8,16,34,0) 0%, rgba(8,16,34,0.55) 45%, rgba(8,16,34,0.86) 100%) !important;
    pointer-events: none;
  }

  #main-carousel .carousel-caption h5,
  #main-carousel .carousel-caption p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 920px;
  }

  #main-carousel .carousel-indicators {
    top: 10px !important;
    bottom: auto !important;
    z-index: 8;
  }

  #main-carousel .carousel-item {
    cursor: pointer;
  }

  /* 2) Карточки: hover без смещения, но с визуальным эффектом */
  .product-card {
    transition: box-shadow .22s ease, border-color .22s ease, filter .22s ease !important;
    transform: none !important;
  }

  .product-card:hover {
    transform: none !important;
    border-color: rgba(130, 161, 223, 0.55) !important;
    box-shadow: 0 10px 24px rgba(10, 19, 42, 0.28) !important;
    filter: brightness(1.015);
  }

  .product-card:hover .product-image img {
    transform: scale(1.03) !important;
  }

  .product-actions,
  .wishlist-button-product {
    position: relative;
    z-index: 3;
  }

  /* 3) Цена в стилистике сайта */
  .product-card .product-price {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
  }

  .product-card .price-new {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 20px !important;
    line-height: 1.2;
    font-weight: 800;
    color: #f3f7ff !important;
    letter-spacing: 0.2px;
  }

  .product-card .price-new::before {
    content: "ЦЕНА:";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #9bb0d7;
  }

  .product-card .price-tax {
    text-align: center !important;
  }

  /* Убираем оранжевый для состояния 'в корзине' — в стилистике сайта */
  .product-actions .add-to-cart.in-cart,
  .product-actions .add-to-cart.remove-from-cart,
  #add-to-cart-detail.in-cart,
  .btn-add-to-cart-detail.in-cart {
    background: linear-gradient(135deg, #2f559a 0%, #24457f 100%) !important;
    border-color: #355ea8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(24, 48, 95, 0.35);
  }

  .product-actions .add-to-cart.in-cart:hover,
  .product-actions .add-to-cart.remove-from-cart:hover,
  #add-to-cart-detail.in-cart:hover,
  .btn-add-to-cart-detail.in-cart:hover {
    background: linear-gradient(135deg, #294b88 0%, #203c6f 100%) !important;
  }

  /* 4) Алфавит: всегда виден */
  .alphabet-filter-compact.v101a-ready {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    margin: 12px 0 18px;
  }

  .alphabet-filter-compact.v101a-ready .alphabet-letters-compact {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .alphabet-filter-compact.v101a-ready .alphabet-letters-compact.en { order: 1; }
  .alphabet-filter-compact.v101a-ready .alphabet-letters-compact.ru { order: 2; }

  .alphabet-filter-compact.v101a-ready .alphabet-letter-compact {
    min-width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(84, 111, 161, 0.45);
    background: rgba(19, 35, 66, 0.6);
    color: #dce6f8;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .18s ease;
    user-select: none;
  }

  .alphabet-filter-compact.v101a-ready .alphabet-letter-compact.is-disabled {
    color: #7f8aa3;
    background: rgba(24, 31, 46, 0.55);
    border-color: rgba(76, 87, 112, 0.35);
    cursor: default;
    pointer-events: none;
  }

  .alphabet-filter-compact.v101a-ready .alphabet-letter-compact.is-enabled:hover {
    background: rgba(41, 65, 111, 0.82);
    color: #fff;
  }

  .alphabet-filter-compact.v101a-ready .alphabet-letter-compact.is-active {
    color: #fff;
    border-color: #d57b2a;
    background: linear-gradient(135deg, #e39a40 0%, #c86b2c 100%);
    box-shadow: 0 4px 10px rgba(179, 97, 35, 0.35);
  }

  /* 5) Плашка над картой */
  .map-store-badge-v101a {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(12, 22, 44, 0.88);
    border: 1px solid rgba(111, 144, 206, 0.45);
    color: #eef4ff;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    pointer-events: none;
  }

  #map, #map-pickup {
    position: relative;
    overflow: hidden;
  }

/* ===== site-v13-unified-fixes (из index.html) ===== */
/* ===== V13: финальная унификация карточек, алфавита, шапки и самовывоза ===== */

  /* 1) Шапка: аккуратная подпись бренда без переноса правого блока */
  .logo-subtitle.v13-ready {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #2a3f73 !important;
    padding: 6px 10px;
    border: 1px solid rgba(67, 97, 238, 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.06), rgba(114, 9, 183, 0.04));
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0.7px rgba(30, 58, 115, 0.2);
  }

  .logo-subtitle.v13-ready .logo-char,
  .logo-subtitle.v13-ready .logo-char.space {
    all: unset;
  }

  @media (min-width: 1200px) {
    .header-content {
      flex-wrap: nowrap !important;
    }

    #logo {
      flex: 0 0 auto;
      min-width: 0;
    }

    .header-right {
      margin-left: auto;
      min-width: 0;
      flex-wrap: nowrap;
    }
  }

  /* 2) Единый внешний вид карточек: главная = категории = избранное */
  .product-card {
    border: 1px solid #dde2ea !important;
    border-radius: 14px !important;
    overflow: hidden;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 470px !important;
  }

  .product-card .product-image {
    height: 270px !important;
    background: #f3f5f8 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-card .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  .product-card .product-content {
    padding: 12px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    flex: 1 1 auto !important;
  }

  .product-card .product-title {
    min-height: 72px !important;
    margin: 0 !important;
  }

  .product-card .product-title a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .product-card .product-description {
    display: none !important;
  }

  .product-card .product-price,
  .catalog-products .product-price,
  #catalog-products-container .product-price,
  #subcategory-products-container .product-price,
  #ps5-catalog-products .product-price,
  #popular-products .product-price,
  .wishlist-grid .product-price {
    margin-top: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .product-card .price-new {
    width: 100%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 22px !important;
    line-height: 1.2;
    font-weight: 800 !important;
    color: #244a86 !important;
    letter-spacing: 0.01em;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .product-card .price-new::before {
    content: none !important;
  }

  .product-card .price-new .price-label,
  .product-card .price-new .price-value {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
  }

  .product-card .price-tax {
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center !important;
    color: #7e8aa0 !important;
    font-size: 12px !important;
  }

  .product-card .product-actions {
    margin-top: 12px !important;
  }

  /* Кнопка в карточке: default — синий, hover — фиолетовый, в корзине — оранжевый */
  .product-card .product-actions .add-to-cart:not(.in-cart):not(.remove-from-cart):not(.out-of-stock),
  #add-to-cart-detail:not(.in-cart):not(.remove-from-cart):not(.out-of-stock),
  .btn-add-to-cart-detail:not(.in-cart):not(.remove-from-cart):not(.out-of-stock) {
    background: linear-gradient(135deg, #4361ee 0%, #4895ef 100%) !important;
    border-color: #3f5ae0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(67, 97, 238, 0.24) !important;
  }

  .product-card .product-actions .add-to-cart:not(.in-cart):not(.remove-from-cart):not(.out-of-stock):hover,
  #add-to-cart-detail:not(.in-cart):not(.remove-from-cart):not(.out-of-stock):hover,
  .btn-add-to-cart-detail:not(.in-cart):not(.remove-from-cart):not(.out-of-stock):hover {
    background: linear-gradient(135deg, #6c3fd8 0%, #7209b7 100%) !important;
    border-color: #662ecf !important;
    box-shadow: 0 8px 18px rgba(114, 9, 183, 0.26) !important;
  }

  .product-card .product-actions .add-to-cart.in-cart,
  .product-card .product-actions .add-to-cart.remove-from-cart,
  #add-to-cart-detail.in-cart,
  .btn-add-to-cart-detail.in-cart,
  #add-to-cart-detail.remove-from-cart,
  .btn-add-to-cart-detail.remove-from-cart {
    background: linear-gradient(135deg, #ff9f43 0%, #f37f12 100%) !important;
    border-color: #e88720 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(214, 121, 24, 0.28) !important;
  }

  .product-card .product-actions .add-to-cart.in-cart:hover,
  .product-card .product-actions .add-to-cart.remove-from-cart:hover,
  #add-to-cart-detail.in-cart:hover,
  .btn-add-to-cart-detail.in-cart:hover,
  #add-to-cart-detail.remove-from-cart:hover,
  .btn-add-to-cart-detail.remove-from-cart:hover {
    background: linear-gradient(135deg, #f29330 0%, #de7310 100%) !important;
    border-color: #d77717 !important;
  }

  .product-card .product-actions .add-to-cart.out-of-stock,
  #add-to-cart-detail.out-of-stock,
  .btn-add-to-cart-detail.out-of-stock {
    background: #c3cad4 !important;
    border-color: #b4bcc8 !important;
    color: #f7f9fb !important;
    box-shadow: none !important;
  }

  /* 3) Корзина: шире и аккуратнее длинные названия */
  .cart-content {
    max-width: 1080px !important;
  }

  .cart-body {
    gap: 20px !important;
  }

  .cart-summary {
    width: 320px !important;
  }

  .cart-item {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .cart-item-title {
    margin-bottom: 6px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  .cart-item-price {
    font-size: 16px !important;
  }

  /* Подсветка активной категории в левом каталоге */
  .catalog-item.is-current {
    background: linear-gradient(90deg, rgba(67, 97, 238, 0.10), rgba(67, 149, 239, 0.04));
  }

  .catalog-link.is-current {
    color: #3559d6 !important;
    font-weight: 700 !important;
    border-left: 3px solid #4361ee;
    padding-left: 17px !important;
  }

  .catalog-link.is-current:hover {
    padding-left: 17px !important;
  }

  /* 4) Алфавит: полный набор, разделитель RU/EN, неактивные буквы не кликаются */
  .alphabet-filter-compact.v13-ready {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin: 12px 0 18px !important;
    padding: 10px 12px !important;
    border: 1px solid #dbe2ec !important;
    border-radius: 12px !important;
    background: #f7f9fc !important;
  }

  .alphabet-filter-compact.v13-ready .alphabet-row {
    display: block;
    min-width: 0;
  }

  .alphabet-filter-compact.v13-ready .alphabet-lang {
    display: none !important;
  }

  .alphabet-filter-compact.v13-ready .alphabet-divider {
    display: block !important;
    height: 1px;
    margin: 1px 0 2px;
    background: rgba(108, 126, 159, 0.32);
  }

  .alphabet-filter-compact.v13-ready .alphabet-letters-compact {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .alphabet-filter-compact.v13-ready .alphabet-letter-compact {
    min-width: 27px;
    height: 27px;
    border-radius: 7px;
    border: 1px solid rgba(84, 111, 161, 0.42);
    background: rgba(53, 78, 128, 0.12);
    color: #28477f;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .16s ease;
    user-select: none;
    flex: 0 0 auto;
  }

  .alphabet-filter-compact.v13-ready .alphabet-letter-compact:hover {
    background: rgba(42, 68, 121, 0.2);
    color: #18376f;
  }

  .alphabet-filter-compact.v13-ready .alphabet-letter-compact.is-disabled {
    cursor: default;
    opacity: 0.42;
    color: #8ea0bf;
    border-color: rgba(142, 160, 191, 0.45);
    background: rgba(141, 156, 184, 0.12);
    box-shadow: none;
  }

  .alphabet-filter-compact.v13-ready .alphabet-letter-compact.is-disabled:hover {
    color: #8ea0bf;
    background: rgba(141, 156, 184, 0.12);
  }

  .alphabet-filter-compact.v13-ready .alphabet-letter-compact.is-active {
    background: linear-gradient(135deg, #ff9f43 0%, #f07f11 100%);
    border-color: #d57619;
    color: #fff;
    box-shadow: 0 4px 12px rgba(204, 113, 24, 0.3);
  }

  /* 5) Самовывоз: бейдж карты в угол, не по центру */
  .map-store-badge-v101a,
  .map-badge-v9,
  .map-store-badge-v13 {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    transform: none !important;
    z-index: 4 !important;
    background: rgba(11, 21, 42, 0.86) !important;
    color: #eef4ff !important;
    border: 1px solid rgba(120, 148, 202, 0.45) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    pointer-events: none;
    backdrop-filter: blur(2px);
    max-width: calc(100% - 16px);
    white-space: normal;
  }

  .transport-info .bus-schedule.v13-bus-bottom {
    margin-top: 20px;
    border-top: 1px dashed #d8dee9;
    padding-top: 14px;
  }

  /* 6) На десктопе алфавит в одну строку для каждого языка */
  @media (min-width: 1024px) {
    .alphabet-filter-compact.v13-ready .alphabet-letters-compact {
      overflow-x: visible;
    }
  }

  @media (max-width: 1100px) {
    .logo-subtitle.v13-ready {
      font-size: 12px !important;
      letter-spacing: 0.12em !important;
      padding: 6px 9px;
    }

    .product-card .price-new {
      font-size: 20px !important;
    }

    .product-card .product-actions .add-to-cart,
    .product-card .product-actions .add-to-cart.in-cart,
    .product-card .product-actions .add-to-cart.remove-from-cart {
      font-size: 16px !important;
    }
  }

  @media (max-width: 768px) {
    .logo-subtitle.v13-ready {
      font-size: 11px !important;
      letter-spacing: 0.10em !important;
      padding: 5px 8px;
    }

    .product-card {
      min-height: 430px !important;
    }

    .product-card .product-image {
      height: 230px !important;
    }

    .product-card .price-new {
      font-size: 19px !important;
    }

    .product-card .product-actions .add-to-cart,
    .product-card .product-actions .add-to-cart.in-cart,
    .product-card .product-actions .add-to-cart.remove-from-cart {
      font-size: 16px !important;
    }

    .cart-content {
      max-width: 96vw !important;
    }

    .cart-body {
      flex-direction: column;
    }

    .cart-summary {
      width: 100% !important;
    }
  }

/* ===== base styles (из category.html) ===== */
:root {
      --primary-bg: #ffffff;
      --secondary-bg: #f8f9fa;
      --accent-blue: #4361ee;
      --accent-blue-light: #4895ef;
      --accent-purple: #7209b7;
      --text-dark: #212529;
      --text-gray: #6c757d;
      --text-light: #adb5bd;
      --border-color: #dee2e6;
      --shadow-light: rgba(0, 0, 0, 0.05);
      --shadow-medium: rgba(0, 0, 0, 0.08);
      --shadow-dark: rgba(0, 0, 0, 0.1);
      --success-color: #2ecc71;
      --warning-color: #f39c12;
      --heart-color: #e74c3c;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--primary-bg);
      color: var(--text-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    /* Верхняя панель */
    #top {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
      color: white;
      padding: 10px 0;
      font-size: 14px;
    }

    #top .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #top .contact-info {
      display: flex;
      gap: 30px;
    }

    #top .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #top .contact-item i {
      font-size: 12px;
    }

    #top .contact-item a {
      color: white;
      text-decoration: none;
      transition: opacity 0.3s ease;
    }

    #top .contact-item a:hover {
      opacity: 0.9;
    }

    #top .auth-links {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    #top .auth-links a {
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: opacity 0.3s ease;
    }

    #top .auth-links a:hover {
      opacity: 0.9;
    }

    /* Кнопка "Написать нам" в верхней панели */
    .write-us-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 15px;
      background: var(--success-color);
      color: white;
      text-decoration: none;
      border-radius: 20px;
      font-weight: 500;
      font-size: 13px;
      transition: all 0.3s ease;
    }

    .write-us-button:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
      color: white;
    }

    /* Хедер */
    header {
      background: var(--primary-bg);
      padding: 20px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    #logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .logo-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-image img {
      height: 70px; /* Увеличен размер логотипа */
      width: auto;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .logo-main {
      display: none; /* Скрываем GamesGu.ru */
    }

    .logo-subtitle {
      font-size: 18px; /* Увеличили шрифт */
      color: var(--text-gray);
      font-weight: 600; /* Сделали жирнее */
      letter-spacing: 1px;
      white-space: nowrap;
    }

    /* Основная навигация */
    .main-nav {
      background: var(--primary-bg);
      border-bottom: 1px solid var(--border-color);
      box-shadow: 0 2px 10px var(--shadow-light);
    }

    .main-nav .container {
      display: flex;
      justify-content: center;
    }

    .nav-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-menu li {
      position: relative;
    }

    .nav-menu a {
      display: block;
      padding: 18px 22px;
      color: var(--text-dark);
      text-decoration: none;
      font-weight: 500;
      font-size: 15px;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-menu a:hover {
      color: var(--accent-blue);
    }

    .nav-menu a:hover::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      background: var(--accent-blue);
      border-radius: 3px 3px 0 0;
    }

    .nav-menu a.active {
      color: var(--accent-blue);
      background: linear-gradient(to bottom, rgba(67, 97, 238, 0.05), transparent);
    }

    .nav-menu a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      background: var(--accent-blue);
      border-radius: 3px 3px 0 0;
    }

    /* Панель поиска и корзины */
    .header-right {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .search-form {
      position: relative;
      width: 400px;
      max-width: 100%;
    }

    .search-form input {
      width: 100%;
      padding: 12px 50px 12px 20px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--secondary-bg);
      transition: all 0.3s ease;
    }

    .search-form input:focus {
      outline: none;
      border-color: var(--accent-blue);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
      background: white;
    }

    .search-form button {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background: var(--accent-blue);
      color: white;
      border: none;
      border-radius: 0 8px 8px 0;
      width: 50px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .search-form button:hover {
      background: var(--accent-purple);
    }

    /* Кнопка избранного */
    #wishlist-header {
      position: relative;
    }

    .wishlist-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: var(--primary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      position: relative;
    }

    .wishlist-button:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
    }

    .wishlist-button.active {
      color: var(--heart-color);
      border-color: var(--heart-color);
    }

    .wishlist-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--heart-color);
      color: white;
      font-size: 11px;
      font-weight: 600;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--primary-bg);
    }

    /* Корзина - кнопка */
    #cart {
      position: relative;
    }

    .cart-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--accent-blue);
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .cart-button:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(114, 9, 183, 0.2);
    }

    .cart-count {
      background: white;
      color: var(--accent-blue);
      font-size: 12px;
      font-weight: 600;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Стиль для иконки корзины - новая красивая иконка */
    .cart-icon-image {
      width: 24px;
      height: 24px;
      filter: brightness(0) invert(1);
    }

    /* Playstation иконки в меню */
    .ps-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
      display: inline-block;
    }

    /* Модальное окно корзины */
    .cart-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .cart-modal.active {
      display: flex;
    }

    .cart-content {
      background: white;
      border-radius: 12px;
      width: 100%;
      max-width: 900px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .cart-header {
      padding: 20px 30px;
      background: var(--accent-blue);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cart-header h3 {
      margin: 0;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .close-cart {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.3s ease;
    }

    .close-cart:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .cart-body {
      padding: 30px;
      display: flex;
      gap: 30px;
      flex: 1;
      overflow: auto;
    }

    .cart-items {
      flex: 1;
      min-width: 0;
    }

    .cart-summary {
      width: 300px;
      flex-shrink: 0;
      background: var(--secondary-bg);
      border-radius: 8px;
      padding: 25px;
      display: flex;
      flex-direction: column;
    }

    .cart-item {
      display: flex;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid var(--border-color);
      gap: 20px;
    }

    .cart-item:last-child {
      border-bottom: none;
    }

    .cart-item-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .cart-item-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cart-item-info {
      flex: 1;
      min-width: 0;
    }

    .cart-item-title .cart-item-link,
    .cart-item-image .cart-item-link-image {
      color: inherit;
      text-decoration: none;
      display: inline-block;
    }

    .cart-item-title .cart-item-link:hover {
      color: var(--accent-blue);
      text-decoration: underline;
    }

    .cart-item-image .cart-item-link-image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
    }

    .cart-item-image .cart-item-link-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .cart-item-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 16px;
    }

    .cart-item-price {
      color: var(--accent-blue);
      font-weight: 600;
      font-size: 18px;
    }

    .cart-item-controls {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .quantity-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .quantity-btn:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .quantity-input {
      width: 40px;
      text-align: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 5px;
      font-size: 16px;
      font-weight: 500;
    }

    .remove-item {
      background: none;
      border: none;
      color: var(--text-light);
      cursor: pointer;
      padding: 5px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .remove-item:hover {
      color: #e74c3c;
      background: rgba(231, 76, 60, 0.1);
    }

    .summary-title {
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--border-color);
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 15px;
    }

    .summary-total {
      font-weight: 700;
      font-size: 20px;
      color: var(--accent-blue);
      margin: 20px 0;
      padding-top: 20px;
      border-top: 2px solid var(--border-color);
    }

    .checkout-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: auto;
    }

    .checkout-btn {
      padding: 14px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      text-decoration: none;
    }

    .checkout-btn.primary {
      background: var(--accent-blue);
      color: white;
    }

    .checkout-btn.primary:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .checkout-btn.secondary {
      background: var(--success-color);
      color: white;
    }

    .checkout-btn.secondary:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }

    .checkout-btn.tertiary {
      background: var(--warning-color);
      color: white;
    }

    .checkout-btn.tertiary:hover {
      background: #e67e22;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
    }

    .cart-empty {
      text-align: center;
      padding: 40px;
      color: var(--text-gray);
    }

    .cart-empty i {
      font-size: 48px;
      margin-bottom: 20px;
      opacity: 0.5;
    }

    .cart-empty h4 {
      margin-bottom: 10px;
      font-weight: 600;
    }

    /* Основной контент */
    main {
      min-height: calc(100vh - 400px);
      padding: 30px 0;
      background: var(--secondary-bg);
    }

    .content-wrapper {
      display: flex;
      gap: 30px;
    }

    /* Левая колонка с фиксированным меню */
    #sidebar {
      width: 250px;
      flex-shrink: 0;
    }

    .catalog-nav {
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 15px var(--shadow-light);
      position: sticky;
      top: 20px;
    }

    .catalog-header {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
      color: white;
      padding: 18px 20px;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .catalog-header i {
      font-size: 18px;
    }

    .catalog-menu {
      padding: 0;
    }

    .catalog-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .catalog-item {
      border-bottom: 1px solid var(--border-color);
      transition: background 0.3s ease;
    }

    .catalog-item:last-child {
      border-bottom: none;
    }

    .catalog-item:hover {
      background: var(--secondary-bg);
    }

    .catalog-link {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      color: var(--text-dark);
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      transition: all 0.3s ease;
      gap: 10px;
    }

    .catalog-link:hover {
      color: var(--accent-blue);
      padding-left: 25px;
    }

    .catalog-link img.ps-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    /* Правая колонка с контентом */
    #content {
      flex: 1;
      background: var(--primary-bg);
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 2px 15px var(--shadow-light);
      overflow: hidden;
    }

    /* Карусель */
    .carousel {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 40px;
      box-shadow: 0 4px 20px var(--shadow-medium);
    }

    .carousel-item img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .carousel-control-prev,
    .carousel-control-next {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      margin: 0 15px;
    }

    .carousel:hover .carousel-control-prev,
    .carousel:hover .carousel-control-next {
      opacity: 1;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-color: var(--accent-blue);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background-size: 15px;
    }

    h1 {
      color: var(--text-dark);
      font-weight: 700;
      margin-bottom: 30px;
      font-size: 28px;
    }

    h2 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 25px;
      font-size: 32px;
      text-align: center;
    }

    /* Страница контактов */
    .contacts-page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .contacts-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .contacts-header h1 {
      font-size: 32px;
      color: var(--accent-blue);
      margin-bottom: 15px;
    }

    .contacts-header p {
      font-size: 18px;
      color: var(--text-gray);
      line-height: 1.6;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contacts-info {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 40px;
    }

    .contact-card {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: transform 0.3s ease;
      min-height: 280px;
      display: flex;
      flex-direction: column;
    }

    .contact-card:hover {
      transform: translateY(-5px);
    }

    .contact-card i {
      font-size: 36px;
      color: var(--accent-blue);
      margin-bottom: 15px;
    }

    .contact-card h3 {
      font-size: 18px;
      margin-bottom: 15px;
      color: var(--text-dark);
    }

    .contact-card .contact-content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contact-card p {
      color: var(--text-gray);
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 5px;
    }

    .contact-card a {
      color: var(--accent-blue);
      text-decoration: none;
      font-weight: 500;
    }

    .contact-card a:hover {
      text-decoration: underline;
    }

    /* Фотографии магазина - 3 строчки по 1 столбцу */
    .store-photos {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 40px;
    }

    .store-photo {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px var(--shadow-medium);
    }

    .store-photo img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .store-photo:hover img {
      transform: scale(1.03);
    }

    /* Яндекс карта */
    #map, #map-pickup {
      width: 100%;
      height: 400px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px var(--shadow-medium);
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .map-container {
      position: relative;
    }

    .map-info {
      background: white;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px var(--shadow-light);
    }

    .map-info h3 {
      color: var(--accent-blue);
      margin-bottom: 15px;
      font-size: 20px;
    }

    .map-info p {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .map-info strong {
      color: var(--text-dark);
    }

    /* НОВЫЙ СТИЛЬ: Страница "Способы оплаты" - полностью переделана */
    .payment-page-container {
      max-width: 900px;
      margin: 0 auto;
    }

    .payment-methods-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 20px;
      margin-bottom: 30px;
    }

    .payment-row {
      display: contents;
    }

    .payment-image-col {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: var(--secondary-bg);
      border-radius: 12px;
      overflow: hidden;
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }

    .payment-image-col img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .payment-info-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px;
      background: white;
      border-radius: 12px;
      border: 1px solid var(--border-color);
    }

    .payment-info-col h3 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .payment-info-col p {
      color: var(--text-gray);
      font-size: 15px;
      line-height: 1.5;
      margin: 0;
    }

    .payment-security {
      margin-top: 30px;
      padding: 20px;
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .payment-security i {
      color: var(--accent-blue);
      font-size: 24px;
    }

    .payment-security strong {
      color: var(--text-dark);
      font-weight: 600;
    }

    /* Страница самовывоза */
    .transport-info {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
    }

    .transport-info h3 {
      color: var(--accent-blue);
      margin-bottom: 15px;
    }

    .bus-schedule {
      margin-top: 20px;
    }

    .bus-route {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      padding: 10px;
      background: white;
      border-radius: 8px;
    }

    .bus-number {
      background: var(--accent-blue);
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 600;
    }

    .bus-image {
      margin-top: 20px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 10px var(--shadow-light);
    }

    .bus-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* НОВЫЙ СТИЛЬ: Категории товаров в каталоге */
    .catalog-categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }

    .category-card {
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      text-decoration: none;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .category-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px var(--shadow-dark);
      border-color: var(--accent-blue);
    }

    .category-card.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--secondary-bg);
    }

    .category-card.disabled:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--border-color);
    }

    .category-image {
      height: 150px;
      overflow: hidden;
    }

    .category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .category-card:hover .category-image img {
      transform: scale(1.05);
    }

    .category-card.disabled:hover .category-image img {
      transform: none;
    }

    .category-content {
      padding: 20px;
      text-align: center;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .category-content h3 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .category-count {
      color: var(--text-gray);
      font-size: 14px;
    }



    /* PS5 категории: квадратные фото + градиентная подложка с подписью */
    #ps5-catalog-page .category-card.ps5-feature-card {
      padding: 0;
      overflow: hidden;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-image {
      position: relative;
      height: auto;
      aspect-ratio: 1 / 1;
      margin: 0;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .ps5-category-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 26px 14px 14px;
      text-align: center;
      background: linear-gradient(180deg, rgba(7, 13, 24, 0) 0%, rgba(7, 13, 24, 0.58) 48%, rgba(7, 13, 24, 0.9) 100%);
      pointer-events: none;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .ps5-category-overlay span {
      display: block;
      color: #ffffff;
      font-size: 32px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.01em;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-content {
      padding: 12px 16px 14px;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-content h3 {
      display: none;
    }

    #ps5-catalog-page .category-card.ps5-feature-card .category-count {
      font-size: 13px;
    }

    @media (max-width: 768px) {
      #ps5-catalog-page .category-card.ps5-feature-card .ps5-category-overlay span {
        font-size: 24px;
      }
    }
    /* НОВЫЙ СТИЛЬ: Компактный алфавитный фильтр - ИЗМЕНЕН размер шрифта */
    .alphabet-filter-compact {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 30px;
    }

    .alphabet-letters-compact {
      display: flex;
      flex-wrap: nowrap;
      gap: 3px;
      justify-content: center;
      overflow-x: auto;
      padding-bottom: 5px;
    }

    .alphabet-letters-compact.ru {
      margin-bottom: 8px;
    }

    .alphabet-letters-compact.en {
      margin-top: 8px;
    }

    .alphabet-divider {
      height: 1px;
      background: var(--border-color);
      margin: 8px 0;
      width: 100%;
    }

    .alphabet-letter-compact {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      background: white;
      border: 1px solid var(--border-color);
      color: var(--text-gray);
      flex-shrink: 0;
      font-size: 13px; /* Размер для активных букв */
    }

    .alphabet-letter-compact:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .alphabet-letter-compact.active {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .alphabet-letter-compact.active.clicked {
      background: var(--warning-color);
      border-color: var(--warning-color);
    }

    .alphabet-letter-compact.disabled {
      background: var(--secondary-bg);
      color: var(--text-light);
      cursor: not-allowed;
      border-color: var(--border-color);
      font-size: 11px; /* Меньший размер для неактивных букв */
      width: 24px;
      height: 24px;
    }

    .alphabet-letter-compact.disabled:hover {
      background: var(--secondary-bg);
      color: var(--text-light);
      border-color: var(--border-color);
    }

    .catalog-products {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }

    .catalog-header-page {
      text-align: center;
      margin-bottom: 30px;
    }

    .catalog-header-page h1 {
      font-size: 32px;
      color: var(--accent-blue);
      margin-bottom: 10px;
    }

    /* Карточки товаров - 9 плашек (3x3) */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      margin-bottom: 30px;
    }

    .product-card {
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px var(--shadow-dark);
      border-color: var(--accent-blue);
    }

    .wishlist-button-product {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 36px;
      height: 36px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      z-index: 10;
      color: var(--text-light);
    }

    .wishlist-button-product:hover {
      background: var(--heart-color);
      color: white;
      transform: scale(1.1);
    }

    .wishlist-button-product.active {
      color: var(--heart-color);
      background: white;
    }

    .wishlist-button-product.active:hover {
      color: white;
      background: var(--heart-color);
    }

    .product-image {
      padding: 20px;
      text-align: center;
      background: var(--secondary-bg);
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .product-image img {
      max-height: 160px;
      max-width: 100%;
      object-fit: contain;
      transition: transform 0.5s ease;
    }

    .product-card:hover .product-image img {
      transform: scale(1.05);
    }

    .product-content {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .product-title {
      margin-bottom: 10px;
      min-height: 48px;
    }

    .product-title a {
      color: var(--text-dark);
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      transition: color 0.3s ease;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-title a:hover {
      color: var(--accent-blue);
    }

    .product-description {
      color: var(--text-gray);
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 15px;
      flex-grow: 1;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-price {
      margin-top: auto;
    }

    .price-new {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 20px;
      display: block;
    }

    .price-tax {
      color: var(--text-gray);
      font-size: 13px;
    }

    .product-actions {
      margin-top: 15px;
      display: flex;
      gap: 10px;
    }

    .product-actions button {
      flex: 1;
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 10px;
      color: var(--text-dark);
      transition: all 0.3s ease;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .product-actions button.add-to-cart {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .product-actions button.remove-from-cart {
      background: #e74c3c;
      color: white;
      border-color: #e74c3c;
    }

    .product-actions button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .product-actions button.add-to-cart:hover {
      background: var(--accent-purple);
      border-color: var(--accent-purple);
    }

    .product-actions button.remove-from-cart:hover {
      background: #c0392b;
      border-color: #c0392b;
    }

    /* Карточка товара (детальная страница) */
    .product-detail-page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .product-detail-container {
      display: flex;
      gap: 40px;
      margin-top: 30px;
    }

    .product-detail-images {
      flex: 1;
      max-width: 500px;
    }

    .product-main-image {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px var(--shadow-medium);
      margin-bottom: 20px;
    }

    .product-main-image img {
      width: 100%;
      height: 400px;
      object-fit: contain;
      background: var(--secondary-bg);
      padding: 30px;
    }

    .product-thumbnails {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .product-thumbnail {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }

    .product-thumbnail:hover,
    .product-thumbnail.active {
      border-color: var(--accent-blue);
    }

    .product-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-detail-info {
      flex: 1;
    }

    .product-detail-title {
      color: var(--text-dark);
      font-weight: 700;
      font-size: 28px;
      margin-bottom: 15px;
    }

    .product-detail-price {
      margin-bottom: 25px;
    }

    .product-detail-price .price-new {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 32px;
      display: block;
      margin-bottom: 5px;
    }

    .product-detail-price .price-tax {
      color: var(--text-gray);
      font-size: 14px;
    }

    .product-detail-stock {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
    }

    .stock-available {
      color: var(--success-color);
      font-weight: 600;
    }

    .stock-unavailable {
      color: #e74c3c;
      font-weight: 600;
    }

    .product-parameters {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
    }

    .product-parameters h3 {
      color: var(--accent-blue);
      margin-bottom: 20px;
      font-size: 20px;
    }

    .parameter-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .parameter-item:last-child {
      border-bottom: none;
    }

    .parameter-name {
      color: var(--text-dark);
      font-weight: 500;
    }

    .parameter-value {
      color: var(--text-gray);
    }

    .product-description-detail {
      margin-bottom: 30px;
    }

    .product-description-detail h3 {
      color: var(--text-dark);
      margin-bottom: 15px;
      font-size: 20px;
    }

    .product-description-detail p {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 15px;
      font-size: 16px;
    }

    .product-key-features {
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 30px;
    }

    .product-key-features h3 {
      color: var(--accent-blue);
      margin-bottom: 20px;
      font-size: 20px;
    }

    .key-features-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .key-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .key-feature-item i {
      color: var(--accent-blue);
      margin-top: 3px;
    }

    .product-detail-actions {
      display: flex;
      gap: 15px;
      margin-top: 30px;
    }

    .product-detail-actions button {
      flex: 1;
      padding: 15px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .btn-add-to-cart-detail {
      background: var(--accent-blue);
      color: white;
    }

    .btn-add-to-cart-detail:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .btn-buy-now {
      background: var(--success-color);
      color: white;
    }

    .btn-buy-now:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }

    .btn-add-to-wishlist-detail {
      width: 60px;
      background: var(--secondary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
    }

    .btn-add-to-wishlist-detail:hover {
      background: var(--heart-color);
      color: white;
      border-color: var(--heart-color);
    }

    .btn-add-to-wishlist-detail.active {
      color: var(--heart-color);
      border-color: var(--heart-color);
    }

    /* Стили для страницы услуг */
    .service-card {
      display: flex;
      background: var(--primary-bg);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 30px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px var(--shadow-dark);
      border-color: var(--accent-blue);
    }

    .service-image {
      width: 300px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .service-card:hover .service-image img {
      transform: scale(1.05);
    }

    .service-content {
      flex: 1;
      padding: 25px;
      display: flex;
      flex-direction: column;
    }

    .service-content h3 {
      color: var(--text-dark);
      font-weight: 600;
      margin-bottom: 15px;
      font-size: 20px;
    }

    .service-description {
      color: var(--text-gray);
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 20px;
      flex-grow: 1;
    }

    .service-price {
      margin-bottom: 20px;
    }

    .service-price .price-new {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 24px;
      display: block;
      margin-bottom: 5px;
    }

    .service-price .price-tax {
      color: var(--text-gray);
      font-size: 14px;
    }

    .service-actions {
      display: flex;
      gap: 15px;
    }

    
    .btn-service-detail {
      background: var(--secondary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
    }

    .btn-service-detail:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
    }

    .btn-service-order {
      background: var(--accent-blue);
      color: white;
    }

    .btn-service-order:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    /* Стили для детальной страницы услуги */
    .service-detail-content {
      display: flex;
      gap: 40px;
      margin-top: 30px;
    }

    .service-detail-image {
      width: 40%;
      flex-shrink: 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px var(--shadow-medium);
    }

    .service-detail-image img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .service-detail-text {
      flex: 1;
    }

    .service-detail-text h3,
    .service-detail-text h4,
    .service-detail-text h5 {
      color: var(--text-dark);
      margin-top: 25px;
      margin-bottom: 15px;
    }

    .service-detail-text h3 {
      font-size: 24px;
      border-bottom: 2px solid var(--accent-blue);
      padding-bottom: 10px;
    }

    .service-detail-text h4 {
      font-size: 20px;
      color: var(--accent-blue);
    }

    .service-detail-text h5 {
      font-size: 18px;
      color: var(--text-dark);
    }

    .service-detail-text p {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 15px;
      font-size: 16px;
    }

    .service-detail-text ul {
      margin-bottom: 20px;
      padding-left: 20px;
    }

    .service-detail-text li {
      color: var(--text-gray);
      line-height: 1.6;
      margin-bottom: 8px;
      font-size: 15px;
    }

    .service-included,
    .service-note,
    .service-options {
      background: var(--secondary-bg);
      padding: 20px;
      border-radius: 8px;
      margin: 25px 0;
    }

    .service-included h4,
    .service-note h4,
    .service-options h4 {
      margin-top: 0;
    }

    .service-price-detail {
      background: var(--primary-bg);
      border: 2px solid var(--accent-blue);
      border-radius: 12px;
      padding: 25px;
      margin: 30px 0;
    }

    .service-price-detail h4 {
      color: var(--accent-blue);
      margin-top: 0;
      margin-bottom: 20px;
      text-align: center;
    }

    .price-list {
      max-width: 600px;
      margin: 0 auto;
    }

    .price-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
      font-size: 16px;
    }

    .price-item:last-child {
      border-bottom: none;
    }

    .price-item.total {
      font-weight: 700;
      font-size: 18px;
      color: var(--accent-blue);
      margin-top: 10px;
      padding-top: 15px;
      border-top: 2px solid var(--border-color);
    }

    .price-item .price {
      font-weight: 600;
      color: var(--accent-blue);
    }

    .price-note {
      text-align: center;
      font-style: italic;
      color: var(--text-gray);
      margin-top: 15px;
      font-size: 14px;
    }

    .service-contact-buttons {
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      padding: 30px;
      margin-top: 40px;
      text-align: center;
    }

    .service-contact-buttons h4 {
      color: var(--accent-blue);
      margin-bottom: 25px;
      font-size: 32px;
    }

    .contact-buttons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }

    .contact-btn {
      padding: 15px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: none;
    }

    .contact-btn.phone {
      background: var(--success-color);
      color: white;
    }

    .contact-btn.phone:hover {
      background: #27ae60;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }

    .contact-btn.telegram {
      background: #0088cc;
      color: white;
    }

    .contact-btn.telegram:hover {
      background: #0077b5;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    }

    .contact-btn.form {
      background: var(--accent-blue);
      color: white;
      grid-column: span 2;
    }

    .contact-btn.form:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .contact-note {
      color: var(--text-gray);
      font-size: 14px;
      margin-top: 15px;
      font-style: italic;
    }

    /* Футер */
    footer {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      color: white;
      padding: 50px 0 30px;
      margin-top: 40px;
    }

    .footer-top {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 40px;
      margin-bottom: 30px;
    }

    .footer-section h5 {
      color: var(--accent-blue-light);
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid rgba(72, 149, 239, 0.3);
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 12px;
    }

    .footer-links a {
      color: #adb5bd;
      text-decoration: none;
      transition: all 0.3s ease;
      font-size: 14px;
      display: inline-block;
    }

    .footer-links a:hover {
      color: white;
      transform: translateX(5px);
    }

    .contact-info {
      font-size: 14px;
    }

    .contact-item {
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .contact-item i {
      color: var(--accent-blue-light);
      margin-top: 2px;
    }

    .footer-bottom {
      padding-top: 20px;
      font-size: 14px;
      color: #adb5bd;
      text-align: center;
    }

    /* Страница избранного */
    .wishlist-page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .wishlist-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .wishlist-header h1 {
      font-size: 32px;
      color: var(--heart-color);
      margin-bottom: 15px;
    }

    .wishlist-count-badge {
      display: inline-block;
      background: var(--heart-color);
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 14px;
      margin-top: 10px;
    }

    .wishlist-empty {
      text-align: center;
      padding: 60px 20px;
      background: var(--secondary-bg);
      border-radius: 12px;
      margin: 40px 0;
    }

    .wishlist-empty i {
      font-size: 64px;
      color: var(--text-light);
      margin-bottom: 20px;
    }

    .wishlist-empty h3 {
      color: var(--text-gray);
      margin-bottom: 15px;
    }

    .wishlist-empty p {
      color: var(--text-light);
      max-width: 500px;
      margin: 0 auto 25px;
    }

    .btn-browse {
      display: inline-block;
      padding: 12px 30px;
      background: var(--accent-blue);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .btn-browse:hover {
      background: var(--accent-purple);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    /* Lifehack текст */
    .lifehack-text {
      background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(114, 9, 183, 0.05));
      border-radius: 12px;
      padding: 30px;
      margin: 30px 0;
      border-left: 4px solid var(--accent-blue);
    }

    .lifehack-text h4 {
      color: var(--accent-blue);
      margin-bottom: 20px;
      font-size: 20px;
    }

    .lifehack-text p {
      margin-bottom: 15px;
      line-height: 1.6;
      color: var(--text-dark);
    }

    .lifehack-text ul {
      margin: 15px 0 15px 20px;
    }

    .lifehack-text li {
      margin-bottom: 8px;
      color: var(--text-dark);
    }

    /* Модальное окно для Telegram чата */
    .telegram-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .telegram-modal.active {
      display: flex;
    }

    .telegram-content {
      background: white;
      border-radius: 12px;
      width: 100%;
      max-width: 500px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .telegram-header {
      padding: 20px 30px;
      background: #0088cc;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .telegram-header h3 {
      margin: 0;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .close-telegram {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.3s ease;
    }

    .close-telegram:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .telegram-body {
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
      overflow: auto;
    }

    .telegram-form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .telegram-form-group label {
      font-weight: 500;
      color: var(--text-dark);
    }

    .telegram-form-group input,
    .telegram-form-group textarea {
      padding: 12px 15px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .telegram-form-group input:focus,
    .telegram-form-group textarea:focus {
      outline: none;
      border-color: #0088cc;
      box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
    }

    .telegram-form-group textarea {
      min-height: 120px;
      resize: vertical;
    }

    .telegram-submit-btn {
      padding: 14px;
      background: #0088cc;
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
    }

    .telegram-submit-btn:hover {
      background: #0077b5;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    }

    .telegram-note {
      color: var(--text-gray);
      font-size: 14px;
      text-align: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
    }

    /* Кнопка "Назад" в каталоге */
    .back-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: var(--secondary-bg);
      color: var(--text-dark);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      margin-bottom: 20px;
    }

    .back-button:hover {
      background: var(--accent-blue);
      color: white;
      border-color: var(--accent-blue);
      transform: translateY(-2px);
    }

    /* Стили для результатов поиска */
    .search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      max-height: 400px;
      overflow-y: auto;
      display: none;
    }

    .search-results.active {
      display: block;
    }

    .search-result-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .search-result-item:last-child {
      border-bottom: none;
    }

    .search-result-item:hover {
      background: var(--secondary-bg);
    }

    .search-result-image {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .search-result-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .search-result-info {
      flex: 1;
      min-width: 0;
    }

    .search-result-title {
      font-weight: 500;
      font-size: 14px;
      color: var(--text-dark);
      margin-bottom: 3px;
    }

    .search-result-price {
      font-size: 13px;
      color: var(--accent-blue);
      font-weight: 600;
    }

    .search-no-results {
      padding: 20px;
      text-align: center;
      color: var(--text-gray);
    }

    /* Адаптивность */
    @media (max-width: 992px) {
      .content-wrapper {
        flex-direction: column;
      }

      #sidebar {
        width: 100%;
        position: static;
      }

      .catalog-nav {
        position: static;
      }

      .search-form {
        width: 300px;
      }

      .nav-menu a {
        padding: 15px 18px;
        font-size: 14px;
      }

      .cart-body {
        flex-direction: column;
      }

      .cart-summary {
        width: 100%;
      }

      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .contacts-info {
        grid-template-columns: repeat(3, 1fr);
      }

      #map, #map-pickup {
        height: 350px;
      }

      .payment-methods-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .payment-image-col {
        max-height: 200px;
      }

      .payment-image-col img {
        max-height: 150px;
      }

      .service-card {
        flex-direction: column;
      }

      .service-image {
        width: 100%;
        height: 250px;
      }

      .service-detail-content {
        flex-direction: column;
      }

      .service-detail-image {
        width: 100%;
      }

      .service-detail-image img {
        height: 300px;
      }

      .contact-buttons {
        grid-template-columns: 1fr;
      }

      .contact-btn.form {
        grid-column: span 2;
      }

      .catalog-categories {
        grid-template-columns: repeat(2, 1fr);
      }

      .product-detail-container {
        flex-direction: column;
      }

      .product-detail-images {
        max-width: 100%;
      }

      .key-features-list {
        grid-template-columns: 1fr;
      }

      /* Адаптация алфавитного фильтра */
      .alphabet-letters-compact {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    @media (max-width: 768px) {
      .header-content {
        flex-direction: column;
        text-align: center;
      }

      #logo {
        align-items: center;
      }

      .search-form {
        width: 100%;
      }

      .header-right {
        width: 100%;
        justify-content: space-between;
      }

      .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
      }

      .nav-menu a {
        padding: 12px 15px;
        font-size: 13px;
      }

      #top .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }

      #top .contact-info {
        flex-direction: column;
        gap: 10px;
      }

      #top .auth-links {
        flex-wrap: wrap;
        justify-content: center;
      }

      .carousel-item img {
        height: 250px;
      }

      .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .cart-modal {
        padding: 10px;
      }

      .cart-header {
        padding: 15px 20px;
      }

      .cart-body {
        padding: 20px;
      }

      .cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .cart-item-image {
        width: 100%;
        height: 150px;
      }

      .cart-item-controls {
        width: 100%;
        justify-content: space-between;
      }

      .store-photo img {
        height: 200px;
      }

      #map, #map-pickup {
        height: 300px;
        margin-bottom: 30px;
      }

      .catalog-categories {
        grid-template-columns: 1fr;
      }

      .contacts-info {
        grid-template-columns: 1fr;
      }

      .contacts-header p {
        white-space: normal;
        font-size: 16px;
      }

      .alphabet-letters-compact {
        justify-content: center;
      }

      .payment-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
      }

      .payment-image-col, .payment-info-col {
        width: 100%;
      }
    }

    @media (max-width: 576px) {
      #content {
        padding: 20px;
      }

      h1 {
        font-size: 24px;
      }

      h2 {
        font-size: 20px;
      }

      .product-image {
        height: 180px;
      }

      .nav-menu {
        flex-direction: column;
        align-items: center;
      }

      .nav-menu a {
        width: 100%;
        text-align: center;
        padding: 10px;
      }

      .product-actions {
        flex-direction: column;
      }

      .contacts-header h1 {
        font-size: 26px;
      }

      .contacts-header p {
        font-size: 16px;
      }

      #map, #map-pickup {
        height: 250px;
      }

      .service-actions {
        flex-direction: column;
      }

      .service-content {
        padding: 20px;
      }

      .service-content h3 {
        font-size: 18px;
      }

      .service-contact-buttons {
        padding: 20px;
      }

      .contact-btn {
        padding: 12px;
        font-size: 14px;
      }

      .alphabet-letter-compact {
        width: 26px;
        height: 26px;
        font-size: 11px;
      }

      .wishlist-button-product {
        width: 32px;
        height: 32px;
        top: 10px;
        right: 10px;
      }

      .product-detail-actions {
        flex-direction: column;
      }

      .btn-add-to-wishlist-detail {
        width: 100%;
      }
    }

    @media (min-width: 1200px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 767px) {
      .products-grid {
        grid-template-columns: 1fr;
      }
    }

    .text-primary {
      color: var(--accent-blue) !important;
    }

    .bg-light {
      background: var(--secondary-bg);
    }

    .rounded {
      border-radius: 8px;
    }

    .shadow-sm {
      box-shadow: 0 2px 8px var(--shadow-light);
    }

    .shadow-md {
      box-shadow: 0 4px 15px var(--shadow-medium);
    }


    .page-content.active {
      display: block;
    }

/* ===== product page styles (из product.html; только центральная часть) ===== */
.product-shell {
      width: 100%;
      max-width: none;
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: 18px;
      box-shadow: 0 14px 34px var(--shadow-light);
      padding: 22px;
    }

    .product-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 12px;
    }

    .btn-back-product {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border-color);
      background: #fff;
      color: #1f2937;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
      padding: 9px 14px;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 0 2px 8px var(--shadow-light);
    }

    .btn-back-product:hover {
      color: var(--accent-blue);
      border-color: rgba(67, 97, 238, .45);
      transform: translateY(-1px);
      box-shadow: 0 5px 14px var(--shadow-medium);
    }

    .breadcrumbs {
      font-size: 13px;
      color: var(--text-gray);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .breadcrumbs .sep {
      color: #9ca3af;
      font-size: 11px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .gallery-main img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid var(--border-color);
      background: #fff;
      box-shadow: 0 10px 24px var(--shadow-light);
    }

    .gallery-thumbs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 12px;
    }

    .gallery-thumbs img {
      width: 100%;
      height: 92px;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: #fff;
      cursor: pointer;
      transition: all .2s ease;
    }

    .gallery-thumbs img:hover {
      border-color: var(--accent-blue-light);
      box-shadow: 0 6px 16px var(--shadow-light);
      transform: translateY(-1px);
    }

    .gallery-thumbs img.is-active {
      border-color: var(--accent-blue);
      box-shadow: 0 0 0 2px rgba(67, 97, 238, .2);
    }

    .product-page-title {
      font-size: 30px;
      line-height: 1.2;
      margin: 0 0 14px;
      font-weight: 700;
      color: #1f2937;
    }

    .price-wrap {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .price-wrap .new {
      font-size: 34px;
      font-weight: 800;
      color: var(--accent-blue);
      line-height: 1;
    }

    .price-wrap .old {
      font-size: 17px;
      color: #8a8f98;
      text-decoration: line-through;
    }

    .product-badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .product-badges .badge {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #2442a0;
      background: rgba(67, 97, 238, .1);
      border: 1px solid rgba(67, 97, 238, .2);
      border-radius: 999px;
      padding: 7px 12px;
      line-height: 1;
    }

    .product-badges .badge-id {
      color: #4b5563;
      background: #f3f4f6;
      border-color: #e5e7eb;
    }

    .product-desc {
      border-top: 1px solid var(--border-color);
      padding-top: 14px;
      color: #374151;
      white-space: pre-wrap;
      font-size: 15px;
    }

    .specs {
      margin-top: 20px;
      border-top: 1px solid var(--border-color);
      padding-top: 16px;
    }

    .specs h2 {
      margin: 0 0 10px;
      font-size: 21px;
      font-weight: 700;
      color: #1f2937;
    }

    .specs .meta {
      color: var(--text-gray);
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 12px;
      font-size: 14px;
    }

    .specs-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 8px 20px var(--shadow-light);
    }

    .specs-table th,
    .specs-table td {
      padding: 11px 12px;
      border-top: 1px solid var(--border-color);
      vertical-align: top;
      font-size: 14px;
    }

    .specs-table tr:first-child th,
    .specs-table tr:first-child td {
      border-top: none;
    }

    .specs-table th {
      width: 34%;
      text-align: left;
      background: #fafbff;
      color: #111827;
      font-weight: 600;
    }

    .updated-at {
      margin-top: 14px;
      font-size: 12px;
      color: var(--text-gray);
      text-align: right;
    }