/* -----------------------------------------------------------------------------------------
   VaM Shop - open source ecommerce solution
   http://vamshop.ru

   Copyright (c) 2005-2008 VaM Shop 
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License 
   ---------------------------------------------------------------------------------------*/

/*<![CDATA[*/

body {
    color: #444444; /* Замените на желаемый цвет текста для всего сайта */
}

	/* Самый верх шапки */

	h1 span { color: #000;}
	.test-box {
		background: #87caf4; 
		border: 0px dashed #000;
		border-bottom: 0px dashed #000;
		
		margin: 0px auto 0;
		padding: 0px 0;
		
	}
	
	.test-box a {
    color: #fff;
    
	}
	
		.test-box ul {		
			margin: 0;
			padding: 0;
			list-style: none;
			
			
		
		}
	.test-width { 
		background: #87caf4; 
		text-align: center;
		padding: 5px 0;
		margin: 10px auto 0;
	}


.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px; /* отступ между карточками */
  font-family: Inter, Roboto, system-ui, sans-serif;
}

/* Каждая строка — карточка */
.cart-table tr {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
}

/* Ячейки */
.cart-table td {
  padding: 12px;
  vertical-align: middle;
  font-size: 13px;
  color: #333;
  border: none; /* убираем стандартные границы */
}

/* Фото товара */
.cart-table img {
  max-width: 150px;
  border-radius: 2px;
}

/* Название */
.cart-title {
  font-size: 14px;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.cart-title:hover {
  color: #007bff;
}

/* Атрибуты */
.cart-attrs {
  font-size: 12px;
  color: #666;
}

/* Цена */
.cart-price {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #dd2c00;
}

/* Удалить */
.cart-delete {
  text-align: center;
}

.cart-table th {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  padding: 6px 8px;
  border: none;
}

.cart-table .label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 4px;
}



/* только для корзины */
.cart-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 12px; /* расстояние между товарами */
}

.cart-table td {
  padding: 12px !important; /* чуть больше воздуха */
  border-bottom: 1px solid #eee;
}

/* последняя строка (итог) без разрыва */
.cart-table tr:last-child td {
  border-bottom: none;
}

/* ================================
   иконки в подкатегориях
   ================================ */

.subcat-scope .subcat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 15px 0;
}

/* Стиль для заголовка h2 */
.subcat-scope h2 {
    font-size: 20px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    color: #555555 !important;
    margin-bottom: 2px;
}

.subcat-scope .subcat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
border: 1px solid #ededed;
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;

    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.subcat-scope .subcat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 1. Настраиваем контейнер (родителя) */
.subcat-scope .subcat-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;

    /* Центрирование содержимого */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Настраиваем само изображение */
.subcat-scope .subcat-image img {
    width: 80%;
    height: 80%;
    object-fit: contain; /* Используйте contain, чтобы картинка не обрезалась, если она 90% */
    display: block;
}

.subcat-scope .subcat-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-align: center;
    line-height: 1.3;
}

/* ===== Планшеты ===== */
@media (max-width: 1024px) {
    .subcat-scope .subcat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Мобильные ===== */
@media (max-width: 640px) {
    .subcat-scope .subcat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .subcat-scope .subcat-card {
        padding: 12px;
        border-radius: 12px;
    }

    .subcat-scope .subcat-title {
        font-size: 13px;
    }
}




/* Конкретно для h2 */
h2 {
    color: #555;
    font-size: 19px; 
    line-height: 1.4rem; 
    margin: 15px 0 0 0; /* 15px зверху, 0 справа і знизу, 0 зліва */
    padding: 7px 0 12px 5px;
    display: inline-block;
    padding-right: 5px;
    z-index: 2;
    position: relative;
    font-weight: 600;
}

h2 a {
  text-decoration: none; /* убрать подчеркивание */
  color: #444444;        /* тот же цвет, что у заголовка */
}


h3 {
    color: #555;
    font-size: 18px; 
    line-height: 1.4rem; 
    margin: 0;
    padding: 7px 0 7px 5px;
    display: inline-block;
    padding-right: 5px;
    z-index: 2;
    position: relative;
    font-weight: 500;
}


h4 {
    color: #555;
    font-size: 17px; 
    line-height: 1.4rem; 
    margin: 0;
    padding: 7px 0 7px 5px;
    display: inline-block;
    padding-right: 5px;
    z-index: 2;
    position: relative;
    font-weight: 500;
}

/* линия */
hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #eeeeee; /* толщина 1 пиксель */
}


/* страница про магазин */
  .video-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  /* Надежный контейнер для видео (работает везде) */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000; /* Фон, пока грузится видео */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


  /* Карусель отзывов (CSS Scroll Snap) */
  .reviews-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* плавная прокрутка на iOS */
  }
  .review-card {
    flex: 0 0 85%; /* На мобильном карточка занимает 85% ширины */
    scroll-snap-align: start;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  @media (min-width: 768px) {
    .review-card {
      flex: 0 0 45%; /* На планшете 45% */
    }
  }
  @media (min-width: 1024px) {
    .review-card {
      flex: 0 0 30%; /* На ПК 30% - видно 3 отзыва сразу */
    }
  }
  .review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
  }
  .review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
  .review-stars {
    color: #f7c52f;
    font-size: 1.2em;
  }
  
  /* Галерея фото клиентов */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
  }
  .gallery-item img {
    width: 100%;
    border-radius: 8px;
    display: block;
  }
  .gallery-caption {
    font-size: 0.9em;
    text-align: center;
    color: #555;
    margin-top: 5px;
  }

  /* Кнопки и акценты */
  .btn-primary {
    display: inline-block;
    background-color: #ff6600;
    color: #fff !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-align: center;
  }
  .btn-primary:hover {
    background-color: #e55c00;
  }
  .social-block {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 30px;
  }
/* страница про магазин */

/* Статьи - стили для статей */

.article-image {
    text-align: center;
    margin: 20px 0;
}
.article-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}



    .malukamy-article-container {
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.7;
        color: #5a5450;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        padding: 1px;
        border-radius: 15px;
    }
    .malukamy-block {
        background: #ffffff;
        border: 1px solid #f2e1d5;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
       
    }
    .malukamy-block h2 {
        color: #4e403b;
        margin-top: 0;
        font-size: 1.3rem;
        border-bottom: 2px solid #f9ece4;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .malukamy-block h3 {
        color: #4e403b;
        font-size: 1.2rem;
        margin-top: 5px;
    }

    /* СТИЛІ ДЛЯ ТАБЛИЦІ */
    .malukamy-block table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 0.95rem;
        border-radius: 8px;
        overflow: hidden; /* Щоб закруглити кути */
        border: 1px solid #f2e1d5;
    }
    .malukamy-block table thead {
        background-color: #fef5ef;
    }
    .malukamy-block table td, 
    .malukamy-block table th {
        padding: 12px 15px;
        border: 1px solid #f2e1d5;
        text-align: left;
    }
    .malukamy-block table thead td {
        color: #8d6e63;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }
    /* Щоб таблиця не вилазила на мобільних */
    @media (max-width: 600px) {
        .malukamy-block {
            padding: 15px;
            overflow-x: auto;
        }
        .malukamy-block table {
            display: block;
            overflow-x: auto;
        }
    }

    .malukamy-accent-quote {
        background-color: #fef5ef;
        border-left: 4px solid #ffac85;
        padding: 15px;
        font-style: italic;
        margin: 15px 0;
        border-radius: 0 8px 8px 0;
        color: #795548;
        font-size: 0.95rem;
    }
    
    /* Інші стилі залишаються без змін */
    .malukamy-tip-box {
        background-color: #f4f7f2;
        border: 1px dashed #6d8d63;
        padding: 20px;
        margin: 20px 0;
        border-radius: 12px;
    }

    strong { color: #8d6e63; }
    hr { border: 0; border-top: 1px solid #f2e1d5; margin: 25px 0; }
    ul { padding-left: 20px; }
    li { margin-bottom: 8px; }
    
    
        /* Галерея схем */
    .malukamy-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 25px 0;
    }
    .gallery-item {
        background: #fffaf8;
        border: 1px solid #f2e1d5;
        border-radius: 12px;
        overflow: hidden;
        text-align: center;
        transition: transform 0.2s;
    }
    .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
    }
    .gallery-caption {
        padding: 12px;
        font-size: 13px;
        color: #8d6e63;
        line-height: 1.4;
        font-style: italic;
    }



/* СТИЛІ ДЛЯ СПИСКІВ (НУМЕРОВАНИХ ТА МАРКОВАНИХ) */
    .malukamy-block ul, 
    .malukamy-block ol {
        padding-left: 35px; /* Збільшений відступ для цифр та буліт */
        margin: 15px 0;
    }

    .malukamy-block li {
        margin-bottom: 12px; /* Більше простору між пунктами для легкості читання */
        padding-left: 5px;
    }

    /* Стилізація самих цифр у нумерованому списку */
    .malukamy-block ol li::marker {
        color: #ffac85; /* Робимо цифри кольоровим акцентом */
        font-weight: bold;
    }

/* Колір маркерів (крапок) у звичайному списку */
    .malukamy-block ul li::marker {
        color: #ffac85; /* Персиковий колір для крапок */
    }


/* Стили для чеклиста с галочками */
    .malukamy-checklist {
        list-style: none !important;
        padding-left: 0 !important;
    }
    .malukamy-checklist li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }

    /* Стили для таблицы сравнения (зебры) */
    .comparison-table tbody tr:nth-child(even) {
        background-color: #fafafa;
    }
    .comparison-table td:first-child {
        font-weight: 600;
        color: #4e403b;
        width: 40%;
    }

figcaption {
    font-size: 0.9rem;
    font-style: italic;
    color: #6d5b54; /* Мягкий коричневый под твой стиль */
    text-align: center;
    margin-top: 10px;
    padding: 0 15px;
    line-height: 1.4;
}





.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    background-color: #f2e1d5;
    color: #8d6e63;
}

.malukamy-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background-color: #8d6e63;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(141, 110, 99, 0.3);
    margin: 20px 0;
}

.malukamy-download-btn:hover {
    background-color: #795d54;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 110, 99, 0.4);
}

.malukamy-download-btn svg {
    margin-right: 10px;
}




  .warmth-ladder-full {
        max-width: 100%;
        margin: 40px auto;
        padding: 25px;
        background: #ffffff;
        border: 1px solid #f2e1d5;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    .ladder-title { text-align: center; font-size: 24px; margin-bottom: 30px; color: #222; }
 .ladder-header { margin-bottom: 30px; }

    .ladder-header p { font-size: 16px; color: #666; margin: 0 auto; line-height: 1.5; }
    
    .step-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        padding: 12px 20px;
        border-radius: 16px;
        background: #fdfdfd;
        border: 1px solid #f0f0f0;
        transition: all 0.3s ease;
    }
    .step-item:hover { transform: scale(1.02); box-shadow: 0 5px 15px rgba(0,0,0,0.08); border-color: #ffcc00; }

    .step-num {
        font-weight: 800;
        font-size: 14px;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-right: 20px;
        flex-shrink: 0;
    }
    .sn-1 { background: #e3f2fd; color: #1976d2; }
    .sn-2 { background: #bbdefb; color: #1565c0; }
    .sn-3 { background: #e8f5e9; color: #2e7d32; }
    .sn-4 { background: #fff9c4; color: #fbc02d; }
    .sn-5 { background: #ffe0b2; color: #ef6c00; }
    .sn-6 { background: #ffccbc; color: #d84315; }
    .sn-7 { background: #ffcdd2; color: #c62828; }

    .step-img-thumb { width: 60px; height: 60px; object-fit: contain; margin-right: 20px; }
    .step-text { flex-grow: 1; }
    .step-text b { font-size: 17px; display: block; color: #111; }
    .step-text span { font-size: 13px; color: #777; }

    @media (max-width: 600px) {
        .step-item { padding: 10px; }
        .step-num { margin-right: 10px; width: 30px; height: 30px; font-size: 12px; }
        .step-img-thumb { width: 50px; height: 50px; margin-right: 10px; }
        .step-text b { font-size: 15px; }
    }

 @media (max-width: 600px) {
        .warmth-ladder-full { padding: 20px 15px; }
      
    }

/* Статьи - стили для статей */




/* стандартные кружочки */
ul {
  margin: 1em 0;        /* отступ сверху и снизу */
  padding-left: 1.5em;  /* отступ слева под маркеры */
  list-style-type: disc; /* стандартные кружочки (можно: circle, square) */
}

ul li {
  margin: 0.4em 0;      /* промежуток между пунктами */
  line-height: 1.6;     /* читаемость */
  color: #444;          /* цвет текста */
  font-size: 16px;      /* размер шрифта */
}


/* для блогов списки */
.blog ul {
  list-style-type: disc;   /* обычные кружки */
  padding-left: 1.5em;
  margin: 1em 0;
}

.blog ul li {
  color: #333;             /* цвет текста */
  font-size: 16px;
  line-height: 1.6;
}

.blog ul li::marker {
  color: #ff7f50;          /* цвет кружков */
  font-size: 18px;         /* можно сделать их крупнее */
}

 


 /* "Порада: текст */
.advice-box {
  background: #f7f7f7;         /* ніжно-сірий фон */
  border-left: 4px solid #FFB985; /* персикова вертикальна смужка */
  padding: 12px 16px;
  margin: 1.5em 0;
  font-size: 1em;
  line-height: 1.6;
  border-radius: 6px;          /* легке скруглення */
}

.advice-box b {
  color: #333;                 /* "Порада:" виділяється */
}

.advice-box a {
  color: #FF914D;              /* яскравіший персиковий для посилань */
  font-weight: 600;
  text-decoration: none;
}

.advice-box a:hover {
  text-decoration: underline;
}


blockquote {
  background: #f9f9f9;            
  border-left: 4px solid #FFB985;  
  margin: 1em 0;
  padding: 20px 24px 20px 60px; /* место под кавычку */
  font-style: italic;
  border-radius: 6px;
  color: #444;
  position: relative;
}

blockquote::before {
  content: "“"; /* открывающая кавычка */
  font-size: 48px;     /* крупная */
  font-weight: bold;   /* жирная */
  color: #FFB985;      /* персиковая */
  position: absolute;
  top: 10px;
  left: 20px;
  font-family: Georgia, serif; /* шрифт с красивыми кавычками */
}

blockquote p {
  margin: 0;
  line-height: 1.6;
}

blockquote b {
  font-style: normal;   
  color: #333;
}


.porada {
  background-color: #f7f7f7;   /* светло-серый фон */
  border-left: 4px solid #66ccff; /* голубая полоска слева */
  margin: 15px 0;             /* отступы сверху и снизу */
  padding: 12px 16px;         /* внутренний отступ */
  border-radius: 6px;         /* легкое скругление */
  color: #333;                /* цвет текста */
  font-size: 16px;            /* размер шрифта */
  line-height: 1.6;           /* читаемость */
}

.porada strong {
  color: #333;                /* чуть темнее для выделения */
}


/* ссылки на полезную статью */
.note-link-blog {
  background-color: #f9f9f9;      /* светлый фон */
  padding: 12px 16px;             /* внутренние отступы */
  border-left: 4px solid #ff7f50; /* оранжевая полоска */
  border-radius: 6px;             /* лёгкое скругление */
  margin-top: 10px;               /* отступ сверху */
  margin-bottom: 10px;            /* отступ снизу */
}

.note-link-blog a {
  color: #ff7f50;                 /* цвет ссылки */
  text-decoration: none;          /* без подчёркивания */
  font-weight: 500;               /* слегка выделим */
}

.note-link-blog a:hover {
  text-decoration: underline;     /* подчёркивание при наведении */
}


/* пояснения под таблицей или фото */
.caption {
  font-style: italic;        /* курсив */
  color: #555;               /* трохи світліший колір тексту */
  font-size: 14px;           /* менший шрифт для підпису */
  margin: 8px 0 15px 0;      /* відступи зверху і знизу */
}

/* на концоіку о магазине */
.about-us {
  background-color: #f7f7f7;  /* світлий фон */
  padding: 16px 20px;
  border-radius: 6px;
  margin: 20px 0;
  color: #444;
  font-size: 16px;
  line-height: 1.6;
  font-style: normal;
}


.about-us strong {
  color: #444;                     /* виділення заголовка */
}


/* поделиться в фейсбук */
.share-block {
  text-align: left;   /* кнопка будет по центру */
  margin: 20px 0 20px 10px; /* верх 20px, право 0, низ 20px, слева 30px */
}

.share-btn-fb {
  display: inline-block;
  padding: 8px 14px;
  background-color: #1877f2;
  color: #fff;
  font-size: 13px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.share-btn-fb:hover {
  background-color: #145dbf;
  color: #fff; /* фиксируем цвет текста */
}


/* "Кстати" и сссылка на товар */
.discount-note {
  background-color: #fff3e0; /* пастельний бежевий, м’яко виділяє */
  border-left: 4px solid #ff9800; /* колір акценту */
  padding: 10px 15px;
  margin: 15px 0;
  font-size: 14px;
  border-radius: 4px;
}






/* Цвет обычных ссылок в магазине */
a {
  color: #0088cc;
  text-decoration: none;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}
/* /Цвет обычных ссылок в магазине */


/* Центр */
div#wrapper
   {
     float: left;
     width: 100%;
   }

div#content
   {
     margin: 0 20%; /* отступ центра от боковых колонок */
	 margin-right: 1%;
   }

/* /Центр */

/* Левая колонка */
div#left
   {
     float: left;
     width: 19%; /* Ширина левой колонки */
     margin-left: -100%;
     background: #fff;
   }
/* /Левая колонка */

/* Правая колонка */
div#right
   {
     float: left;
     overflow: auto;
     width: 14%; /* Ширина правой колонки */
     margin-left: -14%;
     background: #fff;
   }
/* /Правая колонка */



/* Базовые настройки для футера */

 #futer {
  font-family: 'Inter', sans-serif;
  background: #FFFEFB;
  color: #333;
  padding: 20px 20px 30px;
  border-top: 1px solid #ffe5ca;
  line-height: 1.6;
}

.futer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

/* --- Блок ЛОГО --- */
.futer-about {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.futer-logo {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}

/* Раскрашиваем каждую букву по порядку */
.futer-logo span:nth-child(1) { color: #0193f1; }
.futer-logo span:nth-child(2) { color: #ffba00; }
.futer-logo span:nth-child(3) { color: #ff232b; }
.futer-logo span:nth-child(4) { color: #02bd01; }
.futer-logo span:nth-child(5) { color: #ff2128; }
.futer-logo span:nth-child(6) { color: #ffba00; }
.futer-logo span:nth-child(7) { color: #0193f1; }

.futer-tagline {
  font-size: 14px;
  color: #666;
  max-width: 300px;
}

/* Колонки */
.futer-col {
  display: flex;
  flex-direction: column;
}

.futer-heading {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 20px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ссылки */
.futer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.futer-nav-list a {
  text-decoration: none;
  color: #666;
  font-size: 14px;
  transition: all 0.2s ease;
  display: inline-block;
}

.futer-nav-list a:hover {
  color: #31b9e6;
  padding-left: 5px;
}

/* Контакты */
.futer-tel {
  display: block;
  color: #31b9e6;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}

.futer-socials {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.futer-socials img {
  width: 30px;
  height: 30px;
  transition: transform 0.2s;
}

.futer-socials img:hover { transform: scale(1.1); }

/* ===== Accordion logic: OFF on desktop, ON on mobile ===== */
.futer-toggle {
  display: none; /* чекбоксы не показываем */
}

/* Десктоп: контент всегда виден, никаких аккордеонов */
.futer-acc .futer-content {
  display: block;
}

.futer-acc .futer-heading {
  cursor: default;
}

.futer-acc .futer-heading::after {
  content: "";
}

/* ===== MOBILE ===== */
@media (max-width: 800px) {
  .futer-wrap {
    grid-template-columns: 1fr;
    gap: 15px; /* компактнее */
  }

  .futer-about {
    text-align: left;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
    max-width: 100%;
  }

  .futer-tagline {
    max-width: 100%;
  }

  /* Включаем аккордеон */
  .futer-acc .futer-heading {
    display: block;
    cursor: pointer;
    position: relative;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
  }

  .futer-acc .futer-heading::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
  }

  .futer-acc .futer-content {
    display: none;
    padding: 10px 0 15px;
  }

  .futer-acc .futer-toggle:checked + .futer-heading + .futer-content {
    display: block;
  }

  .futer-acc .futer-toggle:checked + .futer-heading::after {
    content: "−";
  }
}

/* Нижняя часть */
.futer-bottom {
  max-width: 1200px;
  margin: 20px auto 0;
  padding-top: 8px;
  border-top: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #aaa;
}

@media (max-width: 600px) {
  .futer-bottom {
    flex-direction: column;
    gap: 10px;
  }
}
/* Базовые настройки для футера */



/* Навигация */
div#navigation 
   {
     padding-top: 0.2em;
     padding-bottom: 0.5em;
     padding-left: 0px;
     text-align: center;
     color: #ffffff;
background:url(img/center_nav.png) repeat-x; height:35px; width:100%;
   }

#navigation span 
   {
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #ffffff;
     padding: 15px 35px 5px 35px; 
   }
   
#navigation a
   {
     font: 14px Arial, sans-serif, Verdana;
     font-weight: bold;
     color: #ffffff;
padding: 9px 30px 8px 29px;
     text-decoration: none;
   }

#navigation a:hover
   {
     font: 14px Arial, sans-serif, Verdana;
     font-weight: bold;
     color: #ffffff;
background: url(img/menu_hover.png) 0 1px repeat-x;
padding: 9px 30px 8px 29px;
     text-decoration: none;
   }

#navigation a:visited
   {
     font: 14px Arial, sans-serif, Verdana;
     font-weight: bold;
     color: #ffffff;
     text-decoration: none;
   }
   
/* /Навигация */
   
/* Заголовок страницы */
#content h1 
   {
     display: block;
     font-size: 26px;
      font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500; /* жирный для заголовков */
    
     color: #555555;
    
     padding: 1px 0 1px 5px; 
     margin: 0.2em 0 0.2em 0; 
   }

#content h1 a 
   {
     font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600; /* жирный для заголовков */
    color: #444444; /* можно заменить на персиковый или голубой акцент */
   }
   
#content h1 a {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 500;          /* жирный заголовок */
  color: #444;            /* тёмно-серый цвет */
  text-decoration: none;     /* убираем подчёркивание */
}

#content h1 a:hover {
  color: #fa954b;            /* персиковый при наведении */
  text-decoration: underline; /* или none — если вообще не нужно */
}

/* /Заголовок страницы */



/* /Слайдер на главной - Баннер */
.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none; /* размер банера */
    margin: 0 auto;
}

  .slides {
    display: flex;
    transition: transform 0.5s ease;
  }
  .slide {
    min-width: 100%;
    flex: 1;
  }
  .slide img {
    width: 100%;
    height: auto;
  }
  .controls {
    text-align: center;
    margin-top: 10px;
  }
  .control {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 5px;
  }
  .control.active {
    background-color: black;
  }
  /* /Слайдер на главной - Баннер */
  
  /* Контейнер для інфографіки (показується на мобільних за замовчуванням) */
  .dostavka-img-container {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
  }

  .dostavka-img-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  /* Приховуємо картинки на десктопі (екрани ширше 1024px) */
  @media (min-width: 1025px) {
    .dostavka-img-container {
      display: none !important;
    }
  }
  
  /* Стилі для доставки оплати */
  .icon-delivery { color: #93c5fd; }
  .icon-payment { color: #FFB985; }
  .icon-guarantee { color: #e27d60; }
  .icon-return { color: #81c784; }
  .icon-podderjka { color: #ff8ca9; }
    /* Стилі для доставки оплати */
  



/* Базовые настройки для футера */

  #futer {
        font-family: 'Inter', sans-serif;
        background: #fffaf2; 
        color: #333;
        padding: 50px 20px 30px;
        border-top: 2px solid #faca98;
        line-height: 1.6;
    }

    .futer-wrap {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
    }
    
    
    /* --- Блок ЛОГО --- */
    .futer-about {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .futer-logo {
        font-size: 22px;
        font-weight: 800;
        color: #31b9e6; /* Твой синий */
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
    }
    
    /* Раскрашиваем каждую букву по порядку */
.futer-logo span:nth-child(1) { color: #0193f1; }
.futer-logo span:nth-child(2) { color: #ffba00; }
.futer-logo span:nth-child(3) { color: #ff232b; }
.futer-logo span:nth-child(4) { color: #02bd01; }
.futer-logo span:nth-child(5) { color: #ff2128; }
.futer-logo span:nth-child(6) { color: #ffba00; }
.futer-logo span:nth-child(7) { color: #0193f1; }

    .futer-tagline {
        font-size: 14px;
        color: #666;
        max-width: 300px; /* Чтобы текст не растягивался слишком сильно */
    }

    /* Колонки */
    .futer-col {
        display: flex;
        flex-direction: column;
    }

    .futer-heading {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 20px;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Стили ссылок из твоего списка */
    .futer-nav-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .futer-nav-list a {
        text-decoration: none;
        color: #666;
        font-size: 14px;
        transition: all 0.2s ease;
        display: inline-block;
    }

    .futer-nav-list a:hover {
        color: #31b9e6;
        padding-left: 5px; /* Мягкий сдвиг при наведении */
    }

    /* Контакты */
    .futer-tel {
        display: block;
        color: #31b9e6;
        text-decoration: none;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .futer-socials {
        display: flex;
        gap: 12px;
        margin-top: 15px;
    }

    .futer-socials img {
        width: 30px;
        height: 30px;
        transition: transform 0.2s;
    }

    .futer-socials img:hover { transform: scale(1.1); }
    
    
    @media (max-width: 800px) {
        .futer-wrap {
            grid-template-columns: 1fr; /* Все в одну колонку */
            gap: 35px;
        }

        .futer-about {
            text-align: left; /* Обычное выравнивание слева */
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 25px;
            max-width: 100%;
        }

        .futer-tagline {
            max-width: 100%; /* На мобиле текст на всю ширину */
        }

        .futer-col {
            align-items: flex-start; /* Все списки ровно слева */
        }
    }

    /* Нижняя часть */
    .futer-bottom {
        max-width: 1200px;
        margin: 40px auto 0;
        padding-top: 20px;
        border-top: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 12px;
        color: #aaa;
    }

    @media (max-width: 600px) {
        .futer-wrap { text-align: left; }
        .futer-col { align-items: center; }
        .futer-bottom { flex-direction: column; gap: 10px; }
        .futer-socials { justify-content: center; }
    }
    
    
    
    
/* Скругленные углы */
.page 
   {
     background: transparent;
     width: 100%;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
   }

.pageItem {
    display: flex;
    flex-wrap: wrap;
  
    gap: 5px; /* промежуток между карточками */
}



/* Вспомогательные элементы из вашего образца */
strong { color: #4f433f; }
hr { border: 0; border-top: 1px solid #f2e1d5; margin: 25px 0; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }

.product-card {
    flex: 1 1 calc(25% - 15px); /* 4 карточки в ряд с учетом промежутка */
    max-width: calc(25% - 5px);
    background-color: #fff;
    border: 1px solid #efecec;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    transition: transform 0.08s ease, box-shadow 0.08s ease; /* плавная анимация */
}

.product-card:hover {
    transform: scale(1.03); /* увеличиваем карточку */
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.15); /* тень сзади */
}


.product-image {
    width: 100%;
    height: 200px;              /* фиксированная высота блока */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;        /* серый фон, если картинка не заполняет весь блок */
    border-radius: 6px;
}

.product-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;        /* картинка целиком помещается */
    display: block;
}



.product-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-size: 14px;
    font-weight: 500;
    margin: 5px 0;
    color: #222222;
    margin-top: 1px; /* отступ сверху */
     line-height: 1.2;
}

.product-name a {
    font-family: 'Roboto', sans-serif; /* шрифт Roboto */
    color: #222222;                    /* цвет текста */
    font-size: 15px;                   /* размер шрифта ссылки */
    font-weight: 400;                  /* обычная толщина */
    text-decoration: none;             /* убираем подчеркивание */
}

.product-name a:hover {
    color: #fa954b;           /* цвет при наведении */
    text-decoration: none;    /* чтобы и при hover не появлялось */
}



.product-short-description {
    font-size: 13px;        /* размер шрифта */
    color: #666666;         /* цвет текста */
    line-height: 1.4;       /* расстояние между строками, можно 1.5–1.8 для читаемости */
    margin-bottom: 10px;    /* отступ снизу от блока */
    flex-grow: 1;           /* чтобы блок занимал доступное пространство */
    margin: 5px 0 10px 0;  /* отступ сверху и снизу */
}


.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.product-footer .product-price {
    color: #f84147;       /* цвет цены, можно любой HEX или имя цвета */
    font-weight: bold;    /* жирный текст */
    font-size: 16px;      /* размер шрифта */
    
}



.product-buy button, .product-buy a {
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}



.page h1, .page p 
   {
     margin: 0 8px;
   }

.page h1 
   {
     font-size: 2em;
     color: #fff;
   }

.page p 
   {
     padding-bottom: 0.6em;
     padding-top: 0.6em;
   }

.page .b1, .page .b2, .page .b3, .page .b4, .page .b1b, .page .b2b, .page .b3b, .page .b4b 
   {
     display: block;
     overflow: hidden;
     font-size: 1px;
   }

.page .b1, .page .b2, .page .b3, .page .b1b, .page .b2b, .page .b3b 
   {
     height: 1px;
   }

.page .b2 
   {
     background: #FFCC99;
     border-left: 1px solid #FFCC99;
     border-right: 1px solid #FFCC99;
   }

.page .b3 
   {
     background: #FFCC99;
     border-left: 1px solid #FFCC99;
     border-right: 1px solid #FFCC99;
   }

.page .b4 
   {
     background: #FFCC99;
     border-left: 1px solid #FFCC99;
     border-right: 1px solid #FFCC99;
   }

.page .b4b 
   {
     background: #FFCC99;
     border-left: 1px solid #FFCC99;
     border-right: 1px solid #FFCC99;
   }

.page .b3b 
   {
     background: #FFCC99;
     border-left: 1px solid #FFCC99;
     border-right: 1px solid #FFCC99;
   }

.page .b2b 
   {
     background: #FFCC99;
     border-left: 1px solid #FFCC99;
     border-right: 1px solid #FFCC99;
   }

.page .b1 
   {
     margin: 0 5px;
     background: #FFCC99;
   }

.page .b2, .page .b2b 
   {
     margin: 0 3px;
     border-width: 0 2px;
   }

.page .b3, .page .b3b 
   {
     margin: 0 2px;
   }

.page .b4, .page .b4b 
   {
     height: 2px;
     margin: 0 1px;
   }

.page .b1b 
   {
     margin: 0 5px;
     background: #FFCC99;
   }

.pagecontent 
   {
     display: block;
     padding-left: 0.5em;
     padding-right: 0.5em;
     background: #FFF;
     border-left: 1px solid #FFF8FB;
     border-right: 1px solid #FFF8FB;
   }

.pagecontentfooter 
   {
     display: block;
     text-align: right;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
   }
/* /Скругленные углы */

/*- Меню-закладки сверху */


#menu 
   {
	  background:url("img/logo.jpg") repeat-x;
	  border-bottom: 1px solid #FEFAED;
	  border-width: 0px;
	  margin-top: 0em;
	  padding-top: .0em;
               color: #fff;
               font-weight: bold;
	  text-decoration: none;
   }

#menu ul, #navigation ul li 
   {
	  list-style: none;
	  margin: 0;
	  padding: 0;
   }

#menu ul 
   {
	  padding: 0px 0 0px;
	  text-align: center;
   }

#menu ul li 
   {
	  display: inline;
	  margin:0 .375em;
   }

#menu ul li a:hover span 
   {
	  color: #fff;
     font-weight: bold;
	  text-decoration: none;
   }

/*- /Меню-закладки сверху */

/*- Боксы */

/*- Бокс разделы */
#boxCategories
   {
     text-align: left;
     margin-bottom: 0.5em;
     margin-top: 0.5em;
     padding-bottom: 0.3em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: none;
     border-bottom-color: #fff;

   }

/* Заголовок бокса разделы */
#boxCategories h5 {
  display: block;
   font-size: 16px; /* размер шрифта */
  font-weight: bold;
  color: #ffffff;
  background-color: #90929f; /* фон персиковый */
  margin: 1px 1px 10px 3px;
  padding: 10px 8px; /* положение заголовка бокса разделы */
  text-align: center; 
}
/* /Заголовок бокса разделы */




/*- Список разделов */
#categoriesBoxMenu 
   {
      margin: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
     width: 100%;
   }

#categoriesBoxMenu #CatNavi, #CatNavi ul, #CatNavi li 
   { 
     margin: 0; 
     padding: 0; 
     list-style-type: none; 
   }

#categoriesBoxMenu #CatNavi li a
   { 
     width: 100%;
     display: block; 
     padding: 0.1em 0;
     text-indent: 0.4em; /*- /Растояние ссылок от левого края */
     background-color: #fff; 
     text-decoration: none; 
     margin: 0.32em 0;  /*- /Расстояние между строками в меню товаров */
     border-left: 0.3em solid #ffb985; 
     border-top:1px solid #fff; 
     border-bottom:1px solid #fff; 
     border-right:1px solid #fff; 
 font-family: 'Roboto', sans-serif;
  font-size: 14px;

     
   }

#categoriesBoxMenu #CatNavi li a:hover
   { 
     color: #D2691E;    /*- /Цвет наведенной ссылки в категории товаров */ 
background:#FFF7E5; /*- /Фоновая наведеная картинка в меню товаров */
     border-left: 0.3em solid #FFCB77; 
     border-top:1px solid #FFCB77; 
     border-bottom:1px solid #FFCB77; 
     border-right:1px solid #FFCB77; 
    
   }

#categoriesBoxMenu #CatNavi .CatLevel1, 
#categoriesBoxMenu #CatNavi .CatLevel2, 
#categoriesBoxMenu #CatNavi .CatLevel3,
#categoriesBoxMenu #CatNavi .CatLevel4,
#categoriesBoxMenu #CatNavi .CatLevel5,
#categoriesBoxMenu #CatNavi .CatLevel6
   {
     padding-left: 0.4em;
   }

#categoriesBoxMenu #CatNavi .CurrentParent a 
   { 
     font-weight: bold; 
      color: #D2691E;

    
   }

#categoriesBoxMenu #CatNavi li a,
#categoriesBoxMenu #CatNavi .Current li a,
#categoriesBoxMenu #CatNavi .CurrentParent li a,
#categoriesBoxMenu #CatNavi .CurrentParent .Current li a 
   { 
     font-weight: normal; 
 color: #0F0E0E; 
   }

#categoriesBoxMenu #CatNavi .Current a,
#categoriesBoxMenu #CatNavi .CurrentParent .Current a 
   { 
     font-weight: bold; 
 color: #D2691E;    /*- /Цвет наведенной ссылки в категории товаров */ 

   }
   
/*- /Список разделов */

/*- /Бокс разделы */

/*- Бокс контент */
#boxContent
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
               border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса контент */
#boxContent h5 
   {
  display: block;
  font: 16px sans-serif, Arial, Verdana;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffb985; /* фон персиковый */
  margin: 1px 1px 10px 3px;
  padding: 10px 10px; /* положение заголовка бокса разделы */

}
  }
/*- /Заголовок бокса контент */

/*- Содержимое бокса контент */
#boxContentContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxContentContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

#boxContent ul
   {
     list-style-type: none;
     text-align: left;
     padding-left: 0.5em;
     margin: 0 0 0 0;
   }

#boxContent li 
   {
	  display: block;
      font-family: 'Roboto', Arial, Verdana, sans-serif;
     background: url(img/icon_arrow1.jpg) no-repeat left center;
      font-size: 14px;     
     padding: 0 0 0 12px; 
   }

/*- /Содержимое бокса контент */

/*- /Бокс контент */

/*- Бокс информация */
#boxInformation
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса информация */
#boxInformation h5 
   {
      display: block;
  font: 16px sans-serif, Arial, Verdana;
  font-weight: bold;
  color: #ffffff;
  background-color: #90929f; /* фон персиковый */
  margin: 1px 1px 10px 3px;
  padding: 10px 10px; /* положение заголовка бокса разделы */
}
    
    
    .product-description-container {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Пример: 16 пикселей, можно изменить */
     color: #555;
}

  }
/*- /Заголовок бокса информация */

/*- Содержимое бокса информация */
#boxInformationContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxInformationContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

#boxInformation ul
   {
     list-style-type: none;
     text-align: left;
     padding-left: 0.5em;
     margin: 0 0 0 0;
   }

#boxInformation li {
 display: block;
      font-family: 'Roboto', Arial, Verdana, sans-serif;
     background: url(img/icon_arrow1.jpg) no-repeat left center;
      font-size: 14px;     
     padding: 0 0 0 12px;  
}

/*- /Содержимое бокса контент */

/*- /Бокс информация */

/*- Бокс быстрый заказ */
#boxAddQuickie
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса быстрый заказ */
#boxAddQuickie h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса быстрый заказ */

/*- Содержимое бокса быстрый заказ */
#boxAddQuickieContent 
   {
     padding-left: 1em;
  }

#boxAddQuickieContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса быстрый заказ */

/*- Форма быстрый заказ */
.addquickieform input {
	width: 80%;
	font-size: 1em;
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
	padding: 2px;
   margin-top: 0.2em;
   margin-bottom: 0.4em;
}

.addquickieform input:focus, .sffocus, .sffocus {
	background-color: #ffc;
}
/*- /Форма быстрый заказ */

/*- /Бокс быстрый заказ */

/*- Бокс авторы */
#boxAuthors
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса авторы */
#boxAuthors h5 
   {
     display: block;
     font: 13px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #006600;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса авторы */

/*- Содержимое бокса авторы */
#boxAuthorsContent 
   {
     padding-left: 1em;
  }

#boxAuthorsContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса авторы */

/*- /Бокс авторы */

/*- Бокс статьи */
#boxArticles
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;

   }

/*- Заголовок бокса статьи */
#boxArticles h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса статьи */

/*- Содержимое бокса статьи */
#boxArticlesContent 
   {
     padding-left: 1em;
  }

#boxArticlesContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса статьи */

/*- /Бокс статьи */

/*- Бокс партнёрка */
#boxAffiliate
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса партнёрка */
#boxAffiliate h5 
   {
     display: block;
     font: 13px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #990000;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса партнёрка */

/*- Содержимое бокса партнёрка */
#boxAffiliateContent 
   {
     padding-left: 1em;
  }

#boxAffiliateContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса партнёрка */

/*- /Бокс партнёрка */

/*- Бокс новые статьи */
#boxArticlesNew
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */

   }

/*- Заголовок бокса новые статьи */
#boxArticlesNew h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса новые статьи */

/*- Содержимое бокса новые статьи */
#boxArticlesNewContent 
   {
     padding-left: 1em;
  }

#boxArticlesNewContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса новые статьи */

/*- /Бокс новые статьи */

/*- Бокс просмотренные товары */
#boxLastViewed
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса просмотренные товары */
#boxLastViewed h5 
   {
     display: block;
     font: 14px Arial, Verdana, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса просмотренные товары */

/*- Содержимое бокса просмотренные товары */
#boxLastViewedContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxLastViewedContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса просмотренные товары */

/*- /Бокс просмотренные товары */

/*- Бокс отзывы */
#boxReviews
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса отзывы */
#boxReviews h5 
   {
     display: block;
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #0173E0;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса отзывы */

/*- Содержимое бокса отзывы */
#boxReviewsContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxReviewsContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса отзывы */

/*- /Бокс отзывы */

/*- Бокс поиск */
#boxSearch
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */

   }

/*- Заголовок бокса поиск */
#boxSearch h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }

#boxSearch h5 a
   {
     color: #D2691E;
     text-decoration: none;
   }
/*- /Заголовок бокса поиск */

/*- Содержимое бокса поиск */
#boxSearchContent 
   {
     padding-left: 1em;
  }

#boxSearchContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса поиск */

/*- Форма бокса поиск */
.searchboxform input {
	width: 95%;
	font-size: 1em;
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
	padding: 2px;
   margin-top: 0.2em;
   margin-bottom: 0.4em;
}

.searchboxform input:focus, .sffocus, .sffocus {
	background-color: #ffc;
}
/*- /Форма бокса поиск */

/*- /Бокс поиск */



/*- Бокс скидки */
#boxSpecials
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса скидки */
#boxSpecials h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #C2814C;
     border-bottom: 2px #C2814C solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }

#boxSpecials h5 a
   {
     color: #C2814C;
     text-decoration: none;
   }
/*- /Заголовок бокса скидки */

/*- Содержимое бокса скидки */
#boxSpecialsContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxSpecialsContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса скидки */

/*- /Бокс скидки */

/*- Бокс рекомендуемые */
#boxFeatured
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса рекомендуемые */
#boxFeatured h5 
   {
     display: block;
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
  
#boxFeatured h5 a
   {
     color: #D2691E;
     text-decoration: none;
   }
/*- /Заголовок бокса рекомендуемые */

/*- Содержимое бокса рекомендуемые */
#boxFeaturedContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxFeaturedContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса рекомендуемые */

/*- /Бокс рекомендуемые */

/*- Бокс новинки */
#boxWhatsNew
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса новинки */
#boxWhatsNew h5 
   {
       display: block;
  font: 16px sans-serif, Arial, Verdana;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffb985; /* фон персиковый */
  margin: 1px 1px 10px 3px;
  padding: 10px 10px; /* положение заголовка бокса разделы */
  }

#boxWhatsNew h5 a
   {
     color: #fff;
     text-decoration: none;
   }
/*- /Заголовок бокса новинки */

/*- Содержимое бокса новинки */
#boxWhatsNewContent 
   {
     padding-left: 0;
     text-align: center;
     
  }

#boxWhatsNewContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса новинки */

/*- /Бокс новинки */

/*- Бокс новости */
#boxNews
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса новости */
#boxNews h5 
   {
     display: block;
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #0173E0;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }

#boxNews h5 a
   {
     color: #0173E0;
     text-decoration: none;
   }
/*- /Заголовок бокса новости */

/*- Содержимое бокса новости */
#boxNews .boxNewsContent 
   {
     padding-left: 1em;
     margin-bottom: 0.5em;
     text-align: left;
  }

#boxNews .boxNewsContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса новости */

/*- /Бокс новости */

/*- Бокс вопросы и ответы */
#boxFaq
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса вопросы и ответы */
#boxFaq h5 
   {
     display: block;
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #0173E0;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }

#boxFaq h5 a
   {
     color: #0173E0;
     text-decoration: none;
   }
/*- /Заголовок бокса вопросы и ответы */

/*- Содержимое бокса вопросы и ответы */
#boxFaq .boxFaqContent 
   {
     padding-left: 1em;
     margin-bottom: 0.5em;
     text-align: left;
  }

#boxFaq .boxFaqContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса вопросы и ответы */

dl.itemFaqDefault 
   {
     width: 48%;
     float: left;
     margin: 0.5em 0 0.5em 0;
     padding: 0 0 0 0;
   }

dl.itemFaq 
   {
     width: 98%;
     float: left;
     margin: 0.5em 0 0.5em 0;
     padding: 0 0 0 0;
   }

dt.itemFaq 
   {
     display: none;
     float: left;
     background: transparent;
     border-right: 0px #FFF8FB solid;
     margin: 0 0 0 0;
     padding: 5px 5px 0 5px;
     text-align: left;
   }

dd.itemFaq
   {
     margin-left: 1em;
     padding: 0 0;
     line-height: normal;
     background: transparent;
   }

/*- /Бокс вопросы и ответы */

/*- Бокс корзина */

/* Оформление */
#boxCart {
    text-align: left;
    margin-left: 5px;        /* отступ слева */
    margin-bottom: 1.1em;
    margin-top: 0.6em;
    margin-right: 0.3em;     /* отступ от правого края браузера */
    padding-top: 0.0em;
    padding-bottom: 0.1em;   /* отступ от края бокса */
}


#boxCart .top, #boxCart .bottom 
   {
     display: block; 
     background: transparent; 
     font-size: 1px;
   }




#boxCart .boxheader 
   {
 display: block;
    color: #ffffff;                 /* цвет текста белый */
    background-color: #7dd0b1;      /* фон персиковый */
    font-weight: bold;
    padding: 0.1em 0;               /* отступы сверху и снизу */
     

  
   }

#boxCart .boxcontent 
   {
     display: block; 
     background: #fff; 
     border-left: 0px solid #fff; 
     border-right: 0px solid #fff;
   }

#boxCart .boxcontent  span 
   {
     font-weight: bold;
   }

#boxCart .boxheader p 
   {
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     padding-left: 0.5em;
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 0;
     margin-right: 0;
   }

#boxCart .boxcontent p 
   {
     padding-top: 0.3em;
     padding-bottom: 0.1em;
     padding-left: 0.5em;
     margin-top: 0.1em;
     margin-bottom: 0.1em;
     margin-left: 0;
     margin-right: 0;
   }
/* /Оформление */

/* Ссылки в заголовке бокса */
#boxCart .boxheader a {
    display: block;          /* чтобы padding применялся ко всей ширине */
    padding-left: 10px;       /* отступ текста от левого края */
    color: #ffffff;          /* цвет текста, если нужно */
    text-decoration: none;   /* убираем подчеркивание */
}


#boxCart .boxheader a:hover 
   {
     color: #fff;
     text-decoration: none;
   }
/* /Ссылки в заголовке бокса */

p.CartContentRight
   {
     text-align: right;
     padding-right: 0.2em;
   }

p.CartContentCenter
   {
     text-align: center;
   }

/*- /Бокс корзина */


/* /Кнопка удаления товара из корзины */

.btn-delete {
  background: none !important;   /* убираем серый фон */
  border: none !important;       /* убираем рамку */
  padding: 0 !important;         /* убираем внутренние отступы */
  margin: 0 !important;          /* убираем внешние */
  cursor: pointer !important;    /* делаем курсор-руку */
  line-height: 1 !important;     /* фикс выравнивания */
}

.btn-delete svg, 
.btn-delete i {
  font-size: 25px !important;    /* размер иконки */
  color: red !important;         /* цвет иконки */
}
.btn-delete:hover svg,
.btn-delete:hover i {
  color: darkred !important;     /* цвет при наведении */
}

.icon-trash {
  fill: #ffb985 !important;
}
.btn-delete:hover .icon-trash {
  fill: #ff7e28 !important; /* при наведении чуть темнее */
}
/* Сброс для именно этой кнопки удаления */
td .btn-delete,
td .btn-delete:hover,
td .btn-delete:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/*- Бокс вход/админ */

/* Оформление */
#boxLogin {
    text-align: left;
    margin-top: 0.6em;
    margin-right: 0em;
    margin-bottom: 0.1em;
    margin-left: 5px;          /* отступ слева 5px */
    padding-top: 0.1em;
    padding-bottom: 0.2em;
    background-color: #f5f5f5; /* очень светлый серый, современный */

}


#boxLogin .top, #boxLogin .bottom 
    {
     display: block; 
     background: transparent; 
     font-size: 1px;
   }





#boxLogin .b1, #boxLogin .b1b
   {
     margin: 0 5px; 
     background: #4176F8;
   }

#boxLogin .b2, #boxLogin .b2b
   {
     margin: 0 4px;
   }

#boxLogin .b3, #boxLogin .b3b 
   {
     margin: 0 3px;
   }

#boxLogin .b4, #boxLogin .b4b 
   {
     margin: 0 2px;
   }

#boxLogin .b5, #boxLogin .b5b 
   {
     margin: 0 1px;
   }

#boxLogin .boxheader {
    display: block;
    color: #ffffff;                 /* цвет текста белый */
    background-color: #ffb985;      /* фон персиковый */
    font-weight: bold;
    padding: 0.1em 0;               /* отступы сверху и снизу */
}


#boxLogin .boxcontent 
   {
     display: block;
     padding-left: 0.5em; 
     background: #fff; 
     border-left: 0px solid #fff; 
     border-right: 0px solid #fff;
   }

#boxLogin .boxcontent  span 
   {
     font-weight: bold;
   }

#boxLogin .boxheader p 
   {
     padding-top: 0.4em;
     padding-bottom: 0.4em;
     padding-left: 0.5em;
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 0;
     margin-right: 0;
   }

#boxLogin .boxcontent p 
   {
     padding-top: 0.1em;
     padding-bottom: 0.1em;
     padding-left: 0.2em;
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 0;
     margin-right: 0;
   }
/* /Оформление */

/*- Форма входа */
/*- Форма входа */
.loginform input {
    width: 88%;                    /* ширина поля */
    font-family: 'Roboto', sans-serif; /* современный шрифт */
    font-size: 16px;               /* размер шрифта */
    border: 1px solid #ccc;        /* граница */
    border-radius: 4px;            /* скругленные углы */
    padding: 8px 10px;             /* внутренние отступы */
    margin-top: 0.2em;
    margin-bottom: 0.4em;
    box-sizing: border-box;        /* чтобы padding не увеличивал ширину */
    transition: border-color 0.3s, box-shadow 0.3s; /* плавный эффект */
}

.loginform input:focus {
    border-color: #7dd0b1;        /* цвет рамки при фокусе */
    box-shadow: 0 0 5px rgba(125, 208, 177, 0.5);
    outline: none;
}

/*- /Форма входа */

p.LoginContentCenter
   {
     text-align: center;
   }

p.LoginContentLeft
   {
     text-align: left;
   }

/*- /Бокс вход/админ */

/*- Бокс мои загрузки */
#boxDownloads
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса мои загрузки */
#boxDownloads h5 
   {
     display: block;
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #006600;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса мои загрузки */

/*- Содержимое бокса мои загрузки */
#boxDownloadsContent 
   {
     padding-left: 0;
     text-align: left;
  }

#boxDownloadsContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса мои загрузки */

/*- /Бокс мои загрузки */

/*- Бокс рассылка */
#boxNewsletter
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса рассылка */
#boxNewsletter h5 
   {
     display: block;
     font: 14px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #0173E0;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса рассылка */

/*- Содержимое бокса рассылка */
#boxNewsletterContent 
   {
     padding-left: 1em;
  }

#boxNewsletterContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса рассылка */

/*- Форма рассылка */
.newsletterform input {
	width: 70%;
	font-size: 1em;
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
	padding: 2px;
   margin-top: 0.2em;
   margin-bottom: 0.4em;
}

.newsletterform input:focus, .sffocus, .sffocus {
	background-color: #ffc;
}
/*- /Форма рассылка */

/*- /Бокс рассылка */

/*- Бокс лучшие товары */
#boxBestsellers
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #fff7e5;
   }

/*- Заголовок бокса лучшие товары */
#boxBestsellers h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса лучшие товары */

/*- Содержимое бокса лучшие товары */
#boxBestsellersContent 
   {
     padding-left: 1em;
  }

#boxBestsellersContent p 
   {
     margin: 0 0 0 0;
     text-align: left;
  }

/*- /Содержимое бокса лучшие товары */

#boxBestsellersContent p.BestsellersContentRight
   {
     text-align: right;
     padding-right: 0.2em;
     padding-bottom: 0.3em;
   }

#boxBestsellersContent  span 
   {

   
   }
   
/*- /Бокс лучшие товары */

/*- Бокс информация о группе */
#boxGroupInfo
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
     }

/*- Заголовок бокса информация о группе */
#boxGroupInfo h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса информация о группе */

/*- Содержимое бокса информация о группе */
#boxGroupInfoContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxGroupInfoContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

#boxGroupInfoContent  span 
   {
     font-weight: bold;
   }

/*- /Содержимое бокса информация о группе */

/*- /Бокс информация о группе */

/*- Бокс валюты */
#boxCurrencies
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса валюты */
#boxCurrencies h5 
   {
     display: block;
     font: 13px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса валюты */

/*- Содержимое бокса валюты */
#boxCurrenciesContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxCurrenciesContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса валюты */

/*- Форма выбора валюты */
#boxCurrenciesContent select {
	width: 70%;
	font-size: 1em;
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
	padding: 2px;
   margin-top: 0.2em;
   margin-bottom: 0.4em;
}
/*- /Форма выбора валюты */

/*- /Бокс валюты */

/*- Бокс языки */
#boxLanguages
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.2em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	  border-bottom-width: 1px;
	  border-bottom-style: dashed;
     border-bottom-color: #0173E0;
   }

/*- Заголовок бокса языки */
#boxLanguages h5 
   {
     display: block;
     font: 13px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #CC0000;
     border-bottom: 2px #0173E0 solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса языки */

/*- Содержимое бокса языки */
#boxLanguagesContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxLanguagesContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса языки */

/*- /Бокс языки */

/*- Бокс производители */
#boxManufacturers
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
  	     }

/*- Заголовок бокса производители */
#boxManufacturers h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #C2814C solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса производители */

/*- Содержимое бокса производители */
#boxManufacturersContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxManufacturersContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса производители */

/*- Форма выбора производителя */
#boxManufacturersContent select {
	width: 90%;
	font-size: 1em;
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
	padding: 2px;
   margin-top: 0.2em;
   margin-bottom: 0.4em;
}
/*- /Форма выбора производителя */

/*- /Бокс производители */

/*- Бокс информация о производителе */
#boxManufacturersInfo
   {
     text-align: left;
     margin-bottom: 0.2em;
     margin-top: 0.2em;
     margin-right: 0.3em; /* отступ от правого края браузера */
     padding-top: 0.2em;
     padding-bottom: 0.4em; /* отступ от края бокса, т.е. от пунктирной линии */
     }

/*- Заголовок бокса информация о производителе */
#boxManufacturersInfo h5 
   {
     display: block;
     font: 15px Arial, Verdana, Arial, sans-serif;
     font-weight: bold;
     color: #D2691E;
     border-bottom: 2px #D2691E solid;
     background: url(img/box.gif) no-repeat left center;
     margin: 0 0 .4em .3em;
     padding: .1em 0 0 16px;
  }
/*- /Заголовок бокса информация о производителе */

/*- Содержимое бокса информация о производителе */
#boxManufacturersInfoContent 
   {
     padding-left: 0;
     text-align: center;
  }

#boxManufacturersInfoContent p 
   {
     margin: 0 0 0 0;
     padding-bottom: 0.2em;
  }

/*- /Содержимое бокса информация о производителе */

/*- /Бокс информация о производителе */

/*- /Боксы */

/*- Время парсинга */
div#parseTime
   {
     clear: left;
     background: #FFF8FB;
     width: 100%;
     text-align: center;
     color: #000;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
   }
/*- /Время парсинга */

/*- Информация о магазине */
div#copyright
   {
     clear: left;
     background: #fff7e5;
     width: 100%;
     text-align: center;
     color: #000;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
   }

div.copyright
   {
     clear: left;
     background: #fff;
     width: 100%;
     text-align: left;
     color: #000;
     padding-top: 0.5em;
     padding-bottom: 1.3em;
     border-top: 1px solid #ffb985;
   }
/*- /Информация о магазине */

/*- Формы */

form 
   {
	  width: 100%;
	  margin: 0;
   }

:root{
  --form-bg: #ffffff;
  --input-bg: #fbfbfd;
  --border: #d6d9dd;
  --border-strong: #bfc5ca;
  --accent: #2563eb; /* основной цвет (можно сменить) */
  --text: #0f1724;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(16,24,40,0.06);
  --gap: 12px;
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
}

/* Контейнер формы — центруем и ограничиваем ширину на больших экранах */
.form {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px;
  background: var(--form-bg);
  border-radius: 16px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Базовые поля */
.form :is(input, textarea, select) {
  box-sizing: border-box;
  width: 98%;               /* делаем 100% внутри контейнера — гибче, чем фиксированные % */
  max-width: 98%;
  padding: 12px 14px;
  font-size: 1rem;           /* 16px ≈ 1rem */
  line-height: 1.35;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Лёгкая инсет-теневая подсказка для глубины */
.form :is(input, textarea, select) {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
}

/* Множественные колонки: допустим, у вас был width:60% — реализуем гибкую сетку */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 колонки по умолчанию */
  gap: var(--gap);
  align-items: start;
}

/* Одноколоночная на мобильных */
@media (max-width: 720px){
  .form-row { grid-template-columns: 1fr; }
}

/* Состояние фокуса — заметно и доступно */
.form :is(input:focus, textarea:focus, select:focus) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
  box-shadow: 0 6px 18px rgba(37,99,235,0.12), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

/* Валидация (пример) */
.form :is(input:invalid) {
  border-color: #ef4444; /* красный */
  box-shadow: 0 6px 12px rgba(239,68,68,0.06);
}

/* Placeholder — менее навязчивый */
.form :is(input::placeholder, textarea::placeholder) {
  color: #9aa3b2;
  opacity: 1;
}

/* Текстarea: автоподгон по высоте — улучшение UX */
.form textarea {
  min-height: 120px;
  resize: vertical; /* пользователю можно менять высоту */
  padding-top: 14px;
}

/* Кнопки в той же стилистике */
.form button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 85%, black 15%));
  color: white;
  box-shadow: 0 8px 20px rgba(37,99,235,0.12);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Нажатие */
.form button:active { transform: translateY(1px) scale(0.998); }

/* Доступность: видимый фокус для клавиатурных пользователей */
.form :is(input, textarea, select, button):focus-visible {
  outline: 3px solid rgba(37,99,235,0.12);
  outline-offset: 4px;
}

/* Поддержка пользователей с 'prefers-reduced-motion' */
@media (prefers-reduced-motion: reduce){
  :root { --transition: 0ms; }
  .form :is(input, textarea, select, button) { transition: none; transform: none; }
}



/*- Подсветка ошибок формы */
#errormsg
   {
     border: 2px solid #c00;
     padding: 5px;
     width: 96%;
   }    

.error
   {
	  background: #fcc;
   }
/*- /Подсветка ошибок формы */
   
.form textarea:focus, input:focus, .sffocus, .sffocus 
   {
	  background-color: #ffc;
   }

span.Requirement 
   {
     color: red;
   }

/*- /Формы */

/*- Цены */

span.markProductOutOfStock 
   {
     font-family: Arial, Verdana, sans-serif;
     color: #CC3333;
     font-weight: bold;
   }

span.productSpecialPrice 
   {
     font-family: Verdana, Arial, sans-serif;
     color: #CC3333;
   }
   
span.productOldPrice {
    font-family: 'Roboto', sans-serif;
    color: #797878;
    font-size: 12px;
    text-decoration: line-through;
    font-weight: 500; /* чуть толще, но не жирный */
}

span.errorText 
   {
     font-family: Verdana, Arial, sans-serif;
     color: #CC3333;
   }

/*- /Цены */

/* Ошибка на странице свяжитесь с нами */

div.contacterror 
   {
     border: 1px solid; 
     border-color: #D2691E; 
     background-color: #FEFAED; 
     text-align: center; 
     margin-bottom: 0.5em; 
     margin-top: 0.5em;
   }

/* /Ошибка на странице свяжитесь с нами */

/* Вывод товаров */

/* Количество колонок с товаром на странице новинки */
dl.itemNewProducts 
   {
     display: block;
     width: 90%; /* количество колонок, 50% - товар выводится двумя колонками, т.е. два товара в одной строке, 100% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 250px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     background: transparent;
   }
/* /Количество колонок с товаром на странице новинки */

/* Количество колонок с товаром на странице рекомендуемые товары */
dl.itemFeaturedProducts 
   {
     display: block;
     width: 48%; /* количество колонок, 48% - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 180px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 7 0 0 0;
     padding: 0 0 0 0;
     border-bottom: 1px #FEBED8 solid;
   }
/* /Количество колонок с товаром на странице рекомендуемые товары */

/* Количество колонок с товаром в блоке новинки на главной странице */
dl.itemNewProductsDefault {
    flex: 1 1 calc(25% - 15px);
    max-width: calc(25% - 5px);
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex
;
    flex-direction: column;
    padding: 10px;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Наведение на карточку */
dl.itemNewProductsDefault:hover {
    transform: translateY(-3px); /* лёгкое поднятие */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* более заметная тень */
}

/* Убираем правый отступ у каждого третьего элемента */
dl.itemNewProductsDefault:nth-child(3n) {
    margin-right: 0;
}

/* Контейнер для очистки float */
#newProductsContainer::after {
    content: "";
    display: table;
    clear: both;
}

/* /Количество колонок с товаром в блоке новинки на главной странице */

/* Количество колонок с новостями на главной странице */
dl.itemLatestNewsDefault 
   {
     display: block;
     width: 49%; /* количество колонок, 48% (не 50, иначе в IE всё равно в одну колонку будут) - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 180px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 7 0 0 0;
     padding: 0 0 0 0;
     background: transparent;
     border-bottom: 1px #FFCC99 solid;
   }
/* /Количество колонок с новостями на главной странице */

/* Количество колонок с новостями на странице новостей */
dl.itemLatestNews 
   {
     display: block;
     width: 49%; /* количество колонок, 48% (не 50, иначе в IE всё равно в одну колонку будут) - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 180px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 7 0 0 0;
     padding: 0 0 0 0;
     background: transparent;
     border-bottom: 1px #FFCC99 solid;
   }
/* /Количество колонок с новостями на странице новостей */

/* Количество колонок с товаром на странице скидки */
dl.itemSpecials 
   {
     display: block;
     width: 49%; /* количество колонок, 48% (не 50, иначе в IE всё равно в одну колонку будут) - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 180px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 7 0 0 0;
     padding: 0 0 0 0;
     background: transparent;
     border-bottom: 1px #FFCC99 solid;
   }
/* /Количество колонок с товаром на странице скидки */

/* Количество колонок с товаром на странице мои данные */
dl.itemLastViewed 
   {
     display: block;
     width: 49%; /* количество колонок, 48% (не 50, иначе в IE всё равно в одну колонку будут) - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 190px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 7 0 0 0;
     padding: 0 0 0 0;
     background: transparent;
     border-bottom: 1px #FFCC99 solid;
   }

/* /Количество колонок с товаром на странице мои данные */

/* Информация о заказе, адрес клиента и адрес доставки */
dl.ordersAddress 
   {
     display: block;
     width: 49%; /* количество колонок, 48% - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     border-bottom: 1px #FFCC99 solid;
   }

dt.ordersAddress 
   {
     display: block;
     float: left;
     background: transparent;
     border-right: 0px #FFF8FB solid;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     text-align: center;
   }

dd.ordersAddress
   {
     display: block;
     margin: 0 0 0 1em;
     padding: 0 0 0 0;
     line-height: normal;
     background: transparent;
   }

/* /Информация о заказе, адрес клиента и адрес доставки */

/* Адресная книга */
dl.AddressBook 
   {
     display: block;
     width: 49%; /* количество колонок, 48% - товар выводится двумя колонками, т.е. два товара в одной строке, 99% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
   }

dt.AddressBook 
   {
     display: block;
     float: left;
     width: 90px;
     background: transparent;
     border-right: 0px #FFCC99 solid;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     text-align: center;
   }

dd.AddressBook
   {
     display: block;
     margin: 0 0 0 90px;
     padding: 0 0 0 0;
     line-height: normal;
     background: transparent;
   }

dl.AddressBookList 
   {
     display: block;
     width: 49%;
     float: left;
     height: auto;
     margin: 0 0 0 0;
     padding: 0 0 1em 0;
   }

dt.AddressBookList 
   {
     display: block;
     float: left;
     background: transparent;
     border-right: 0px #FFF8FB solid;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     text-align: center;
   }

dd.AddressBookList
   {
     display: block;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     line-height: normal;
     background: transparent;
   }

/* /Адресная книга */

/* Вход */
dl.Login 
   {
     display: block;
     width: 49%;
     float: left;
     margin: 2em 0 1em 0;
     padding: 0 0 0 0;
   }

dt.Login
   {
     float: left;
     display: block;
     background: transparent;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     text-align: center;
   }

dd.Login
   {
     display: block;
     margin: 0 0 0 1em;
     padding: 0 0 0 0;
     line-height: normal;
     background: transparent;
   }

/* /Вход */

dt.itemImage 
   {
     float: left;
     display: block;
     background: transparent;
     border-right: 0px #FFCC99 solid;
     margin: 0px 0px 50px 0px;
     padding: 5px 15px 5px 3px;
     text-align: center;
   }

dt.itemNews 
   {
     display: none;
     float: left;
     background: transparent;
     border-right: 0px #FFF8FB solid;
     margin: 0 0 0 0;
     padding: 5px 5px 0 5px;
     text-align: left;
   }
dd.itemDescription1
   {
     display: block;
     margin: 0 0 0 0;
     padding: 0px 15px 0px 0px;
     line-height: normal;
     background: transparent;
     font-size: 15px;
     color: #555555;
   }
   
dd.itemDescription
   {
     display: block;
     margin: 0 0 0 0;
     padding: 6px 15px 2px 3px;
     line-height: normal;
     background: transparent;
     font-size: 14px;
     color: #555555;
   }

DescriptionPrice
   {
     display: block;
     margin: 1em 0 0 0;
     padding: 0 0;
     line-height: normal;
     background: transparent;
     color: #f87106;
     font: 17px Arial, sans-serif, Verdana;
     font-weight: bold;
   }

dd.itemNews
   {
     display: block;
     margin-left: 1em;
     padding: 0 0;
     line-height: normal;
     background: transparent;
   }

div.clear
   {
     clear: both;
   }

div.navigation
   {
     display: block;
     width: 100%;
     padding-top: 1em;
   }

span.right
   {
     float: right;
   }

/* /Вывод товаров */

/* Вывод категорий */

dl.itemCategoriesListing 
   {
     width: 49%; /* количество колонок, 50% - товар выводится двумя колонками, т.е. два товара в одной строке, 100% - товар выводится одной колонкой, т.е. один товар в одной строке */ 
     float: left;
     height: 180px; /* высота блока с товаром, нужно устанавливать обязательно, иначе блоки товаров с картинками и без будут "слипаться" */ 
     margin: 0 0 0 0;
     padding: 5px 5px 0 5px;
     background: transparent;
   }

dt.itemCategoriesListing 
   {
     float: left;
     height: 250px;
     background: transparent;
     border-right: 0px #FFCC99 solid;
     margin: 0 0 0 0;
     padding: 5px 5px 0 5px;
     text-align: center;
   }

dd.itemCategoriesListing 
   {
     margin: 0 1em 0 1em;
     padding: 0 0;
     line-height: normal;
     background: transparent;
     text-align: center;
   }

/* /Вывод категорий */

/* Страница карточки товара */

p.center
   {
     text-align: center;
   }

div.ProductInfoLeft
   {
     float: left;
     margin-right: 1em;
   }

div.ProductInfoRight
   {
     float: right;
     margin-left: 0em;
     margin-right: 1em;
     text-align: right;
   }

/* /Страница карточки товара */

/* Ссылки на странице мои данные */

ul.accountLinks 
   {
     list-style-type: none;
     text-align: left;
     padding-left: 1em;
     margin: 0 0 0 0;
   }

li.accountLinks 
   {
	  display: block;
     font: 13px Arial, Verdana, Arial, sans-serif;
     background: url(img/icon_arrow1.jpg) no-repeat left center;
     padding: 0 0 3px 13px; 
   }

/* /Ссылки на странице мои данные */

span.bold 
   {
     font-weight: bold;
   }

/* Ajax quick find */

div.ajaxQuickFind 
   {
     text-align: left;
   }

ul.ajaxQuickFind 
   {
     list-style-type: none;
     list-style-image: none;
     padding-left: 0px;
   }

li.ajaxQuickFind 
   {
     font-size: 80%;
     padding-left: 0px;
   } 

/* /Ajax quick find */

/* Ajax add quickie suggest */

div.ajaxAddQuickie 
   {
     text-align: left;
   }

div.addQuick 
   {
     text-align: left;
     color: #0173E0;
     text-decoration: underline;
     cursor: pointer;
   }
   
ul.ajaxAddQuickie 
   {
     list-style-type: none;
     list-style-image: none;
     padding-left: 0px;
   }

li.ajaxAddQuickie 
   {
     font-size: 80%;
     padding-left: 0px;
   } 

/* /Ajax add quickie suggest */

.errorBox 
   {
	  background-color: #ffb3b5;
   }

.messageStackError, .messageStackWarning 
   { 
     background-color: #ffb3b5; 
   }

.messageStackSuccess 
   { 
     background-color: #99ff00; 
   }

.headerError {
    background-color: #ffb3b5; /* твой фон */
    
    color: #800000;            /* цвет текста */
    font-size: 16px;           /* размер шрифта */
    font-weight: 600;          /* жирность текста */
    padding: 5px 15px;        /* внутренние отступы */
    border-radius: 8px;        /* закругление углов */
    display: flex;
    align-items: center;
    gap: 8px;                  /* расстояние между смайликом и текстом */
}


.messageStack
   {
     background-color: #ffb3b5; 
     padding: 0.5em 0.5em 0.5em 0.5em; 
   }



.category-list {

	
}
.category-list ul {
	
text-align: center;
}

.category-list ul li{ 
	margin:0 7px 7px 0;
	position:relative;
	overflow: auto;
	float:left;
	padding:0;
}
.category-list ul li a{ 
	padding:5px 8px; 
	background-color:#FFFCF0;
	display:block;
	-webkit-border-radius: 5px ;
	-moz-border-radius: 5px ;
	-khtml-border-radius: 5px ;
	border-radius: 5px ;
	border:1px solid #e9e9e9;
padding: 10px 12px;
}
.category-list ul li a:hover { background-color:#FFF8E8; color:#309BE3;}
/* manufacturer */
.manufacturer-list {
	border: 1px solid #e9e9e9;
	border-radius:5px;
	overflow: auto;
	margin-bottom: 20px;
}


/* Стиль для блока сортировки */
.sort-links {
    font-size: 14px;       /* вместо <font size="2"> */
    font-family: Arial, sans-serif;
    color: #333;           /* основной цвет текста */
}

span.sort-label1 {
    font-size: 14px;             /* размер текста */
    font-weight: 500;            /* толщина текста (semi-bold) */
    font-family: 'Roboto', sans-serif; /* современный шрифт */
    color: #666666;              /* цвет текста */
}


.sort-options .sort-label {
    font-size: 16px;      /* размер шрифта */
   font-weight: 500;     /* толщина шрифта */
    color: #666;       /* серый цвет текста */
}


.sort-links a {
    color: #0073e6;        /* цвет ссылок */
    text-decoration: none; /* убрать подчеркивание */
    margin: 0 3px;         /* небольшой отступ между ссылками */
}

.sort-links a:hover {
    text-decoration: underline; /* при наведении подчеркнуть */
}

.right.sort-links a {
    color: #555555;       /* серый цвет вместо синего */
    text-decoration: none; /* убрать подчеркивание */
}

.right.sort-links a:hover {
    color: #555555;       /* цвет при наведении не менять */
    text-decoration: underline; /* или none, если совсем без подчеркивания */
}

/* Вібор размера */

/* Общий стиль кнопок */
button.btn,
input[type="submit"].btn,
a.sort-btn {
  display: inline-block;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  background-color: #90929f; /* мятній */
  line-height: 1.2 !important;
  margin: 1px !important;
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

}

/* Hover эффект */
button.btn:hover,
input[type="submit"].btn:hover,
a.sort-btn:hover {
  background-color: #ffb985; /* мятный */
 
}

/* Активное состояние */
button.btn:active,
input[type="submit"].btn:active,
a.sort-btn:active {
  background-color: #e6a86b;

}

.sort-container {
    width: 99%;
    max-width: 99%;
    margin: 10px auto;      /* отступ сверху и снизу 10px, центрирование по горизонтали */
    padding: 10px 0;        /* внутренние отступы сверху и снизу по 10px */
    box-sizing: border-box;
}

/* прокрутка сео текста */
 .descropshn {
        height: 500px;
         overflow: auto;
    }
    
 /* Чисті стилі для FAQ */
  .faq-container {
    max-width: 100%;
    margin: 0 auto;
    color: #333;
    font-family: inherit;
    line-height: 1.6;
  }
  
  .faq-section-title {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5em;
    border-bottom: 2px solid #ff6600; /* Акцентний колір бренду */
    padding-bottom: 10px;
    display: inline-block;
  }

  /* Стиль для кожного питання (HTML5 Details) */
  details.faq-item {
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
  }

  details.faq-item[open] {
    background: #fdfdfd;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-color: #ddd;
  }

  summary.faq-question {
    cursor: pointer;
    font-weight: 600;
    padding: 15px;
    list-style: none; /* Прибирає стандартний трикутник */
    position: relative;
    padding-right: 40px;
    background-color: #f9f9f9;
    border-radius: 8px;
    user-select: none;
  }

  /* Кастомний хрестик/плюсик */
  summary.faq-question::after {
    content: '+';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: #ff6600;
    transition: transform 0.2s;
  }

  details[open] summary.faq-question::after {
    content: '−'; /* Мінус */
    color: #333;
  }

  /* Анімація прибирання стандартного маркера в Safari/Chrome */
  summary.faq-question::-webkit-details-marker {
    display: none;
  }

  .faq-answer {
    padding: 15px;
    color: #555;
    border-top: 1px solid #eee;
  }

  .faq-answer a {
    color: #ff6600;
    text-decoration: underline;
  }
  
  .faq-answer ul {
    margin-left: 20px;
    margin-top: 10px;
  }
  
  .seo-text-block {
    background-color: #f4f4f4;
    padding: 25px;
    border-radius: 12px;
    margin-top: 50px;
    font-size: 0.95em;
  }
  
  
  /* ==================================== */
/* 3. СТИЛІ ДЛЯ АККОРДЕОНУ (Через <details>) */
/* ==================================== */

.accordion-group {
    margin-top: 15px;
    margin-bottom: 25px;
}

.accordion-item {
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    border-radius: 6px;
}

/* 1. Стиль для заголовка/summary */
.accordion-header {
    background-color: #f7f7f7;
    color: #333333;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Приховуємо стандартну іконку <details> */
.accordion-header {
    list-style: none; /* Приховуємо стандартний трикутник у більшості браузерів */
}
.accordion-header::-webkit-details-marker {
    display: none; /* Приховуємо трикутник у Chrome */
}

/* 2. Зміна кольору при наведенні */
.accordion-header:hover {
    background-color: #e6e6e6;
}

/* 3. Контент всередині акордеону */
.accordion-content {
    padding: 0 20px 20px 20px; /* Внутрішній відступ для контенту */
    background-color: white;
}

/* 4. Іконка "плюс" / "мінус" (через CSS) */
.accordion-header::after {
    content: '+';
    font-weight: 900;
    margin-left: 10px;
    font-size: 20px;
    color: #888;
}

/* Змінюємо іконку на "мінус", коли details відкрито */
.accordion-item[open] > .accordion-header::after {
    content: '–';
    color: #333;
}

/* Стиль для лінії-розділювача між блоками акордеону */
.accordion-hr {
    border: none;
    height: 1px;
    background-color: #dddddd;
    margin: 15px 0;
}



 .calc-box {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border: 1px solid #eeeeee;
    font-family: "Segoe UI", Roboto, sans-serif;
  }

  .calc-box h3 {
    font-size: 20px;
    margin-bottom: 12px;
    text-align: center;
  }

  .calc-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
  }

  .calc-item {
    display: contents;
  }

  .calc-item span {
    font-size: 15px;
    color: #333;
  }

  .quantity {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 110px;
    justify-content: space-between;
  }

  .quantity button {
    background: #FFB985 !important;
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
  }

  .quantity button:hover {
    background: #ff5252 !important;
  }

  .quantity input {
    border: none;
    text-align: center;
    width: 40px;
    font-size: 14px;
  }

  .calc-total {
    margin-top: 20px;
  padding: 16px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #444;
background: #f1fdf4;
  border: 1px solid #a5d6a7;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  }

/* Убираем стрелки в Chrome, Safari, Edge */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Убираем стрелки в Firefox */
.quantity input[type=number] {
  -moz-appearance: textfield;
}


  @media (max-width: 480px) {
    .calc-grid {
      grid-template-columns: 1fr 110px;
    }
  }
  
   section {
  margin: 20px 0;
}

section h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #fff;
}

.card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 150px; /* ограничение по высоте, чтобы ряд был ровным */
  display: block;
  margin: 0 auto 10px;
}

.card .title {
  font-size: 1rem;
  margin-bottom: 8px;
}

.card .watch {
  display: inline-block;
  padding: 6px 12px;
  background: #f48fb1;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.card .watch:hover {
  background: #ec407a;
}

/* адаптив */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
      
/*]]>*/