@charset "UTF-8";
/* ==========================================================================
   GUSTO ITALIA — тема для OpenCart 3.0.0.2
   Тёмная база, оранжевый акцент, крупные скруглённые карточки и кнопки-пилюли.
   Поверх — казахский слой (қошқар мүйіз, киіз, көк, алтын) и итальянский
   (терракота, тонкие прописные, курсивная антиква в цитатах).
   --------------------------------------------------------------------------
   Подключается ПОСЛЕ стандартного stylesheet.css и переопределяет его.
   Все настройки — в блоке :root ниже.
   ========================================================================== */

:root{
  /* --- Тёмная база ----------------------------------------------------- */
  --bg:        #131110;   /* фон страницы                          */
  --bg-2:      #1A1715;   /* фон секций-полос                      */
  --card:      #201C1A;   /* карточки, панели                      */
  --card-2:    #282320;   /* приподнятое состояние, поля ввода     */
  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.16);

  --text:      #F3EEE6;
  --text-2:    rgba(243,238,230,.62);
  --text-3:    rgba(243,238,230,.40);

  /* --- Акценты --------------------------------------------------------- */
  --accent:    #EE8B3D;   /* оранжевый: главные действия           */
  --accent-d:  #D8742A;
  --accent-l:  #F7AE72;
  --accent-s:  rgba(238,139,61,.14);   /* мягкая подложка         */

  --terracotta:#C4512F;   /* Италия: скидки, распродажа            */
  --kok:       #35A2AF;   /* Қазақстан: степная бирюза, статусы    */
  --altyn:     #D9A93F;   /* алтын: орнамент, рейтинг              */

  --ok:        #5DBB7A;

  /* --- Светлые подложки под фото товаров ------------------------------- */
  --shot:      #F4F0E8;
  --shot-2:    #E9E2D5;

  /* --- Форма ----------------------------------------------------------- */
  --r-lg:      22px;   /* баннеры, крупные панели  */
  --r:         16px;   /* карточки                 */
  --r-sm:      12px;   /* поля, мелкие блоки       */
  --pill:      999px;
  --wrap:      1280px;

  --shadow:    0 18px 50px -22px rgba(0,0,0,.75);

  /* Montserrat казахский покрывает полностью (проверено по cmap файлов
     Google Fonts), Noto Sans оставлен просто запасным. */
  --font-display:"Montserrat","Noto Sans",Arial,sans-serif;
  /* Inter вместо Manrope: у Manrope нет Cyrillic Extended — ә ғ қ ң ө ұ ү һ і.
     Браузер подставлял их поглифно из системного шрифта, и казахское слово
     набиралось двумя гарнитурами сразу. Проверено на «Кәсіби сүт салқындатқыш».
     Inter покрывает весь диапазон и по пропорциям к Manrope близок. */
  --font-text:  "Inter","Noto Sans","Helvetica Neue",Arial,sans-serif;
  /* Playfair, а НЕ Playfair Display: у Display нет ә ң қ ө ү һ ғ (и заглавных).
     В казахской цитате они выпадали в системный сериф. См. --font-display. */
  --font-quote: "Playfair",Georgia,serif;
}

/* --- Орнаменты (қошқар мүйіз, тұмарша) -------------------------------- */
:root{
  --orn-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' width='64' height='24'%3E%3Cg fill='none' stroke='%23D9A93F' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 12h10'/%3E%3Cpath d='M10 12c0-6 8-7 8-2s-5 5-5 2'/%3E%3Cpath d='M10 12c0 6 8 7 8 2s-5-5-5-2'/%3E%3Cpath d='M18 12h6'/%3E%3Cpath d='M32 5l7 7-7 7-7-7z'/%3E%3Cpath d='M40 12h6'/%3E%3Cpath d='M54 12c0-6-8-7-8-2s5 5 5 2'/%3E%3Cpath d='M54 12c0 6-8 7-8 2s5-5 5-2'/%3E%3Cpath d='M54 12h10'/%3E%3C/g%3E%3C/svg%3E");
  --orn-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' width='64' height='24'%3E%3Cg fill='none' stroke='%23131110' stroke-width='1.3' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M0 12h10'/%3E%3Cpath d='M10 12c0-6 8-7 8-2s-5 5-5 2'/%3E%3Cpath d='M10 12c0 6 8 7 8 2s-5-5-5-2'/%3E%3Cpath d='M18 12h6'/%3E%3Cpath d='M32 5l7 7-7 7-7-7z'/%3E%3Cpath d='M40 12h6'/%3E%3Cpath d='M54 12c0-6-8-7-8-2s5 5 5 2'/%3E%3Cpath d='M54 12c0 6-8 7-8 2s5-5 5-2'/%3E%3Cpath d='M54 12h10'/%3E%3C/g%3E%3C/svg%3E");
  /* киіз — войлочная сетка тұмарша */
  --kiiz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' width='56' height='56'%3E%3Cg fill='none' stroke='%23D9A93F' stroke-width='1' opacity='.22'%3E%3Cpath d='M28 2l26 26-26 26L2 28z'/%3E%3Cpath d='M28 16l12 12-12 12-12-12z'/%3E%3C/g%3E%3C/svg%3E");
  --kiiz-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' width='56' height='56'%3E%3Cg fill='none' stroke='%23131110' stroke-width='1' opacity='.16'%3E%3Cpath d='M28 2l26 26-26 26L2 28z'/%3E%3Cpath d='M28 16l12 12-12 12-12-12z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   БАЗА
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  font-family:var(--font-text);
  font-size:15px;
  line-height:1.6;
  color:var(--text-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:#fff; }

.container{ max-width:var(--wrap); width:auto; padding-left:24px; padding-right:24px; }

h1,h2,h3,h4,h5,legend{ color:var(--text); margin-top:0; font-family:var(--font-text); }

/* Крупные «плакатные» заголовки — тонкие прописные */
h1,h2,.g-display{
  font-family:var(--font-display);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.08;
}
h1{ font-size:44px; margin-bottom:18px; }
h2{ font-size:34px; margin-bottom:16px; }
h3{ font-size:20px; line-height:1.3; margin-bottom:12px; font-weight:600; letter-spacing:-.005em; }
h4{ font-size:16px; line-height:1.35; margin-bottom:8px; font-weight:600; }
h5{ font-size:13px; font-weight:700; }

a{ color:var(--accent); text-decoration:none; transition:color .16s ease; }
a:hover,a:focus{ color:var(--accent-l); text-decoration:none; }

hr{ border:0; border-top:1px solid var(--line); margin:28px 0; }
img{ max-width:100%; }
p{ margin:0 0 14px; }
strong,b{ color:var(--text); }

/* Табличные цифры: цены и суммы не «пляшут» */
.price,.g-price__now,.g-price__old,.g-spec b,.g-summary .table,
.g-stat__n,#checkout-cart .table td{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   ТИПОГРАФСКИЕ ПРИМИТИВЫ
   ========================================================================== */
.g-eyebrow{
  display:block; font-family:var(--font-text);
  font-size:13px; font-weight:500; color:var(--text-3);
  margin:0 0 10px; letter-spacing:.01em;
}
.g-eyebrow--accent{ color:var(--accent); }
.g-quote{
  font-family:var(--font-quote); font-style:italic; font-size:18px;
  line-height:1.5; color:var(--text); border-left:2px solid var(--altyn);
  padding-left:18px; margin:22px 0 0;
}

/* Орнаментальная нить */
.g-rule{ height:22px; background:var(--orn-gold) repeat-x center/58px 22px; opacity:.5; }

/* Шапка секции: подпись, крупный заголовок, кнопка справа */
.g-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin:0 0 30px; flex-wrap:wrap;
}
.g-head__l{ min-width:0; }
.g-head__t{ margin:0; }
.g-head__more{ flex:none; }

/* ==========================================================================
   КНОПКИ — пилюли
   ========================================================================== */
.btn{
  font-family:var(--font-text);
  font-size:13.5px; font-weight:600; letter-spacing:.01em;
  text-transform:none;
  padding:13px 26px;
  border-radius:var(--pill);
  border:1px solid transparent;
  box-shadow:none; text-shadow:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:active{ box-shadow:none; transform:translateY(1px); }
.btn-lg{ font-size:15px; padding:16px 34px; }
.btn-sm{ font-size:12.5px; padding:9px 18px; }
.btn-xs{ font-size:11px; padding:6px 12px; }

.btn-primary,.btn-primary:focus{
  background:var(--accent); border-color:var(--accent); color:#1B1108;
  background-image:none; font-weight:700;
}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary:active:hover{
  background:var(--accent-l)!important; border-color:var(--accent-l)!important; color:#1B1108!important;
}
.btn-default,.btn-default:focus{
  background:transparent; border-color:var(--line-2); color:var(--text);
  background-image:none;
}
.btn-default:hover,.btn-default:active{
  background:transparent!important; border-color:var(--accent)!important; color:var(--accent)!important;
}
.btn-inverse,.btn-inverse:focus{
  background:var(--accent); border-color:var(--accent); color:#1B1108;
  background-image:none; font-weight:700;
}
.btn-inverse:hover,.btn-inverse:active{ background:var(--accent-l)!important; border-color:var(--accent-l)!important; color:#1B1108!important; }
.btn-danger,.btn-danger:focus{ background:transparent; border-color:var(--line-2); color:var(--text-2); background-image:none; }
.btn-danger:hover{ background:transparent!important; border-color:var(--terracotta)!important; color:var(--terracotta)!important; }
.btn-info,.btn-info:focus,.btn-success,.btn-success:focus{
  background:var(--kok); border-color:var(--kok); color:#08201F; background-image:none; font-weight:700;
}
.btn-info:hover,.btn-success:hover{ background:#43B7C4!important; border-color:#43B7C4!important; }
.btn-link{ color:var(--accent); padding-left:0; font-weight:600; }
.btn-link:hover{ color:var(--accent-l); }

/* Круглая иконочная кнопка */
.g-ico{
  width:40px; height:40px; border-radius:50%; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:transparent; color:var(--text-2);
  font-size:14px; transition:all .18s ease;
}
.g-ico:hover{ border-color:var(--accent); color:var(--accent); }

/* Текстовая ссылка со стрелкой */
.g-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; color:var(--text);
}
.g-arrow::after{ content:"→"; transition:transform .18s ease; color:var(--accent); }
.g-arrow:hover{ color:var(--accent); }
.g-arrow:hover::after{ transform:translateX(4px); }

/* ==========================================================================
   ФОРМЫ
   ========================================================================== */
.form-control{
  height:auto; padding:14px 18px; font-size:14px;
  color:var(--text); background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--pill);
  box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.form-control::placeholder{ color:var(--text-3); }
.form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-s); background:var(--card-2); }
.input-lg{ padding:16px 22px; font-size:15px; border-radius:var(--pill); }
textarea.form-control{ min-height:120px; border-radius:var(--r-sm); }
label,.control-label{
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  text-transform:none; color:var(--text-2); margin-bottom:7px;
}
.input-group-addon{
  background:var(--card-2); border-color:var(--line); color:var(--text-3);
  font-size:12.5px; font-weight:600; border-radius:var(--pill);
}
.has-error .form-control{ border-color:var(--terracotta); }
.text-danger{ color:#E8765A; font-size:12.5px; }
.help-block{ color:var(--text-3); font-size:12.5px; }
select.form-control{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23EE8B3D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:38px;
}
select.form-control::-ms-expand{ display:none; }
select.form-control option{ background:var(--card); color:var(--text); }

.checkbox label,.radio label{ font-size:14px; font-weight:500; color:var(--text-2); }
.checkbox label:hover,.radio label:hover{ color:var(--text); }

/* Алерты */
.alert{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-sm); background:var(--card);
  color:var(--text-2); padding:15px 20px; font-size:14px; text-shadow:none;
}
.alert-success{ border-left-color:var(--ok); }
.alert-danger { border-left-color:var(--terracotta); }
.alert-info   { border-left-color:var(--kok); }
.alert .close{ color:var(--text-3); opacity:1; text-shadow:none; }

/* Хлебные крошки */
.breadcrumb{
  background:none; border:0; padding:26px 0 18px; margin:0; border-radius:0;
  font-size:13px;
}
.breadcrumb > li{ padding:0; text-shadow:none; }
.breadcrumb > li:after{ display:none; }
.breadcrumb > li + li:before{ content:"·"; color:var(--text-3); padding:0 9px; }
.breadcrumb > li > a{ color:var(--text-3); }
.breadcrumb > li > a:hover{ color:var(--accent); }
.breadcrumb > li:last-child > a{ color:var(--text-2); }

/* Пагинация */
.pagination{ margin:0; }
.pagination > li > a,.pagination > li > span{
  color:var(--text-2); border:1px solid var(--line); background:var(--card);
  padding:10px 17px; font-weight:600; margin:0 4px 0 0; border-radius:var(--pill)!important;
}
.pagination > li > a:hover{ background:var(--card-2); color:var(--text); border-color:var(--line-2); }
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover{ background:var(--accent); border-color:var(--accent); color:#1B1108; }

/* ==========================================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ========================================================================== */
#top{
  background:var(--bg); border:0; border-bottom:1px solid var(--line);
  border-radius:0; min-height:0; margin:0; padding:0;
  color:var(--text-3); font-size:12.5px;
}
#top .container{ display:flex; align-items:center; gap:16px; min-height:44px; flex-wrap:wrap; }
#top a{ color:var(--text-3); }
#top a:hover{ color:var(--accent); }
#top .g-top-note{ display:inline-flex; align-items:center; gap:8px; margin-right:auto; }
#top .g-top-note .fa{ color:var(--accent); }
#top .g-top-note b{ color:var(--text-2); font-weight:600; }
#top .btn-link,#top .btn-group .btn{
  color:var(--text-3); font-size:12.5px; font-weight:500;
  padding:10px 6px; background:none; border:0;
}
#top .btn-link:hover,#top .btn-group .btn:hover{ color:var(--accent); }
#top-links{ float:none!important; margin:0; }
#top-links .list-inline{ margin:0; display:flex; align-items:center; gap:2px; }
#top-links li > a{ padding:10px 9px; display:inline-block; }

/* ==========================================================================
   ШАПКА
   ========================================================================== */
header{ background:var(--bg); border:0; padding:0; margin:0; color:var(--text); }
header .container{ padding-top:20px; padding-bottom:20px; }
header .row{ display:flex; align-items:center; flex-wrap:wrap; }

#logo{ margin:0; }
#logo a{ display:inline-flex; align-items:center; }
#logo .g-logo-full{ height:46px; width:auto; display:block; }
#logo .g-logo-mark{ height:42px; width:auto; display:none; }
#logo img{ max-height:52px; width:auto; }
#logo h1{
  margin:0; font-family:var(--font-display); font-size:24px; font-weight:400;
  letter-spacing:.09em; line-height:1.05; text-transform:uppercase;
}
#logo h1 a{ color:var(--text); display:inline-block; }
#logo h1 a:hover{ color:var(--accent); }
#logo .g-logo-sub{
  display:block; font-family:var(--font-text); font-size:9.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:5px;
}

/* Поиск */
#search{ margin:0; }
#search .form-control{
  border-right:0; border-radius:var(--pill) 0 0 var(--pill); padding-left:22px;
}
#search .btn{
  background:var(--accent); border-color:var(--accent); color:#1B1108;
  border-radius:0 var(--pill) var(--pill) 0; padding:16px 24px;
}
#search .btn:hover{ background:var(--accent-l)!important; border-color:var(--accent-l)!important; }

/* Телефон */
.g-head-phone{ text-align:right; line-height:1.25; }
.g-head-phone a{ font-size:17px; font-weight:700; color:var(--text); display:block; letter-spacing:-.01em; }
.g-head-phone a:hover{ color:var(--accent); }
.g-head-phone span{ font-size:11.5px; color:var(--text-3); }

/* Корзина */
#cart{ float:none; }
#cart > .btn{
  background:var(--accent); border-color:var(--accent); color:#1B1108;
  text-align:left; position:relative; padding:15px 22px; font-weight:700;
  display:flex; align-items:center; gap:10px; border-radius:var(--pill); overflow:hidden;
}
#cart > .btn:hover{ background:var(--accent-l)!important; border-color:var(--accent-l)!important; }
#cart #cart-total{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cart .dropdown-menu{
  min-width:350px; padding:0; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); background:var(--card);
}
#cart .dropdown-menu li > div{ padding:16px 18px; min-width:350px; }
#cart .dropdown-menu table{ margin:0; font-size:13px; }
#cart .dropdown-menu .table > tbody > tr > td{ border-color:var(--line); vertical-align:middle; color:var(--text-2); }
#cart .dropdown-menu p.text-center{ padding:24px 16px; color:var(--text-3); }
#cart .img-thumbnail{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:4px; background:var(--shot);
}

/* Золотая нить под шапкой */
.g-header-rule{
  height:22px; background:var(--orn-gold) repeat-x center/58px 22px; opacity:.26;
}

/* ==========================================================================
   ГЛАВНОЕ МЕНЮ — пилюля
   ========================================================================== */
#menu{
  background:transparent; border:0; border-radius:0; margin:0 0 6px; min-height:0;
}
#menu .container{ padding-top:4px; padding-bottom:4px; text-align:center; }
/* so-ladaz отжимает полосу меню вправо — гасим и float, и выравнивание,
   строка пунктов стоит по центру под шапкой.                          */
#menu .navbar-collapse{ float:none!important; text-align:center; padding-left:0; padding-right:0; }
#menu .navbar-nav{
  margin:0; display:inline-flex!important; flex-direction:row!important; flex-wrap:wrap;
  justify-content:center; float:none!important;
  background:none!important; border:0!important; border-radius:0; padding:0;
}
/* float:left оставляем осознанно: если flex у .navbar-nav кто-то перебьёт,
   пункты всё равно встанут в строку, а не столбиком. Внутри flex он не мешает. */
#menu .nav > li{ float:left; display:block; }
#menu .nav > li > a{
  color:var(--text-2); font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase;
  padding:13px 19px; background:none; text-shadow:none; border-radius:0;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
#menu .nav > li:hover > a,#menu .nav > li.open > a{ color:var(--text); background:none; }
#menu .nav > li.active > a{ color:var(--accent); background:none; border-bottom-color:var(--accent); }
#menu .dropdown-menu{
  padding:22px 26px; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); background:var(--card); margin-top:8px;
}
#menu .dropdown-inner{ display:flex; gap:34px; }
#menu .dropdown-inner ul{ min-width:190px; }
#menu .dropdown-inner li a{
  padding:7px 0; font-size:13.5px; color:var(--text-2); font-weight:500; display:block;
}
#menu .dropdown-inner li a:hover{ color:var(--accent); background:none; }
#menu .see-all{
  margin-top:14px; border-top:1px solid var(--line); padding:13px 0 0;
  font-size:12.5px; font-weight:600; color:var(--accent); border-radius:0; display:block;
}
#menu .see-all:hover,#menu .see-all:focus{ background:none; color:var(--accent-l); }
#menu .btn-navbar{
  background:var(--accent); border-color:var(--accent); color:#1B1108; border-radius:var(--r-sm);
}
#menu #category{ color:var(--text); font-weight:700; font-size:13px; padding:15px 0; float:left; }
/* ==========================================================================
   СЕКЦИИ
   ========================================================================== */
.g-section{ padding:66px 0; }
.g-section--tight{ padding:44px 0; }
.g-section--dark2{ background:var(--bg-2); }

/* --- Разделительный орнамент между витринами -------------------------------
   Модули (Новинки, Рекомендуемые, блог) идут в {{ content_top }} подряд, без
   собственных обёрток, и упираются друг в друга. Ставим между ними нить с
   қошқар мүйіз посередине — тот же знак, что в .g-rule под шапкой, но с
   волосяными линиями по бокам, чтобы читался как граница разделов.
   Разметка: <div class="g-orn" aria-hidden="true"><span></span></div>       */
.g-orn{
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin:52px 0 46px;
}
.g-orn::before,.g-orn::after{
  content:""; flex:1 1 0; max-width:320px; height:1px;
}
.g-orn::before{ background:linear-gradient(90deg,transparent,var(--line-2)); }
.g-orn::after{ background:linear-gradient(270deg,transparent,var(--line-2)); }
.g-orn > span{
  flex:0 0 auto; width:64px; height:24px;
  background:var(--orn-gold) no-repeat center/64px 24px; opacity:.8;
}
/* В боковых колонках витрина узкая, орнамент там только мешает */
#column-left .g-orn,#column-right .g-orn{ display:none; }

/* ==========================================================================
   ГЕРОЙ — крупный скруглённый баннер с фотографией
   ========================================================================== */
.g-hero{ padding:6px 0 0; }
/* 31.08.2026: внутри баннера остались только фотографии и лента категорий
   по нижнему краю. Ни заголовка, ни кнопок, ни витрины справа — поэтому
   не сетка в две колонки, как было, а один блок, прижатый вниз. */
.g-hero__banner{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  min-height:540px; display:flex; align-items:flex-end;
  background:#0F0D0C; isolation:isolate;
}
/* Фон-слайдер: четыре слоя друг над другом, перекрёстное затухание на CSS.
   JS не нужен — значит нечему конфликтовать с common.js и модулями so-ladaz.

   Длительность цикла живёт в --g-cycle, задержки считаются от неё долями.
   Так сделано не для красоты: в v26 цикл замедлили до 48 с, а задержки
   остались 0/6/12/18 с — четвёртый кадр гас на 31-й секунде, следующий
   заход первого начинался на 48-й, и между ними баннер стоял чёрным
   шестнадцать секунд. Пока задержки выражены долями цикла, так не выйдет:
   меняешь --g-cycle, остальное подстраивается само.

   Кадр держится четверть цикла, перекрытие на переходе — 3% цикла.
   01.09.2026: цикл сокращён с 24 с до 16 с — 4 с на кадр вместо 6 с. */
.g-hero__bg{
  --g-cycle:16s;
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center center;
  opacity:0;
  animation:g-hero-slide var(--g-cycle) linear infinite both;
}
.g-hero__bg--1{ animation-delay:0s; }
.g-hero__bg--2{ animation-delay:calc(var(--g-cycle) * .25); }
.g-hero__bg--3{ animation-delay:calc(var(--g-cycle) * .5); }
.g-hero__bg--4{ animation-delay:calc(var(--g-cycle) * .75); }
@keyframes g-hero-slide{
  0%{ opacity:0; } 3%{ opacity:1; } 25%{ opacity:1; } 28%{ opacity:0; } 100%{ opacity:0; }
}
/* Тем, у кого в системе выключена анимация, кадры не замораживаем, а
   замедляем в полтора раза: 6 с на кадр, переход ~0,7 с. Раньше здесь было
   вдвое (12 с на кадр) — но именно эту ветку и видит машина заказчика, где
   «Эффекты анимации» выключены, так что замедление читалось как «баннер
   почти не меняется». Перелистывание — это
   изменение прозрачности, без движения, наездов и мельканий, то есть не то,
   от чего защищает prefers-reduced-motion. А полная остановка превращала
   главный экран магазина в одну неподвижную картинку — и выглядела поломкой.
   В Windows это Параметры → Специальные возможности → Визуальные эффекты →
   «Эффекты анимации». */
@media (prefers-reduced-motion:reduce){
  .g-hero__bg{ --g-cycle:24s; }
}
.g-hero__banner::before{
  /* Затемнение теперь только по нижнему краю — под лентой категорий.
     Раньше гасили левую половину, потому что там стоял текст; фотографию
     больше ничто не перекрывает, и верх кадра остаётся чистым. */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,
    rgba(12,10,9,.90) 0%, rgba(12,10,9,.62) 14%,
    rgba(12,10,9,.22) 30%, rgba(12,10,9,0) 48%);
}
.g-hero__banner::after{
  /* киіз-сетка поверх затемнения — казахский слой, тоже снизу вверх */
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--kiiz) repeat; opacity:.5;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.34) 22%,transparent 46%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.34) 22%,transparent 46%);
}
.g-hero__in{
  position:relative; z-index:2; width:100%;
  padding:0 34px 28px;
}
/* Витрина справа и плашка поверх неё сняты 31.08.2026 вместе с текстом,
   стили .g-hero__shot / .g-hero__tag оставлены: разметка лежит в
   _deadcode/hero-text.twig и возвращается вставкой обратно в home.twig. */
.g-hero__shot{
  position:relative; z-index:2;
  padding:44px 56px; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-end; gap:14px;
}
.g-hero__shot img{
  width:min(100%,320px); border-radius:var(--r); display:block;
  box-shadow:0 34px 74px -30px rgba(0,0,0,.95);
}
.g-hero__tag{
  width:min(100%,320px);
  background:rgba(32,28,26,.86); border:1px solid var(--line);
  border-left:3px solid var(--accent); backdrop-filter:blur(6px);
  border-radius:var(--r-sm); padding:14px 20px;
}
.g-hero__tag b{ display:block; font-size:14px; color:var(--text); margin-bottom:3px; }
.g-hero__tag span{ font-size:12px; color:var(--text-3); line-height:1.45; display:block; }
.g-hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text-2); margin:0 0 14px;
}
.g-hero__eyebrow::before{ content:""; width:26px; height:1px; background:var(--altyn); }
.g-hero h1{
  font-size:clamp(38px,4.6vw,66px); margin:0 0 22px;
  color:#fff; font-weight:200; letter-spacing:.035em;
}
.g-hero h1 b{ font-weight:400; color:var(--accent); }
/* Лента категорий — строго в один ряд. Если ссылок станет больше или экран
   узкий, ряд не переносится, а прокручивается пальцем; полосу прокрутки
   прячем, чтобы она не резала нижний край баннера. */
.g-hero__chips{
  display:flex; flex-wrap:nowrap; gap:9px; margin:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.g-hero__chips::-webkit-scrollbar{ display:none; }
.g-hero__chips a{
  flex:0 0 auto; white-space:nowrap;
  display:inline-block; padding:8px 18px; border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.86);
  font-size:13px; font-weight:500; backdrop-filter:blur(3px);
  background:rgba(12,10,9,.34);
}
.g-hero__chips a:hover{ background:var(--accent); border-color:var(--accent); color:#1B1108; }
.g-hero__note{
  background:rgba(19,17,16,.62); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r); padding:18px 22px; max-width:480px; margin:0 0 26px;
  backdrop-filter:blur(6px);
}
.g-hero__note p{ margin:0; font-size:14px; line-height:1.6; color:rgba(243,238,230,.78); }
.g-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* Полоса фактов под баннером */
.g-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px;
}
.g-fact{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; display:flex; gap:14px; align-items:flex-start;
}
.g-fact__ico{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--accent-s); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.g-fact b{ display:block; font-size:14px; color:var(--text); margin-bottom:3px; font-weight:700; }
.g-fact span{ font-size:12.5px; color:var(--text-3); line-height:1.45; }

/* ==========================================================================
   ПЛИТКИ КАТЕГОРИЙ
   ========================================================================== */
.g-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.g-cat{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 10px 22px; text-align:center;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.g-cat:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--shadow); }
.g-cat__fig{
  display:block; position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-sm); background:var(--shot); margin-bottom:18px;
}
.g-cat__fig img{ width:100%; height:100%; object-fit:cover; }
.g-cat__n{ display:block; font-size:16.5px; font-weight:700; color:var(--text); margin-bottom:5px; }
.g-cat:hover .g-cat__n{ color:var(--accent); }
.g-cat__c{ display:block; font-size:12px; color:var(--text-3); padding:0 12px; }

/* ==========================================================================
   КАРТОЧКА ТОВАРА
   ========================================================================== */
.product-thumb{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:10px; margin-bottom:20px; position:relative; overflow:visible;
  display:flex; flex-direction:column;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.product-thumb:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.product-thumb .image{
  position:relative; background:var(--shot); border:0;
  border-radius:var(--r-sm); overflow:hidden;
  padding:18px; text-align:center;
}
.product-thumb .image a{ display:block; }
.product-thumb .image img{ margin:0 auto; transition:transform .35s ease; mix-blend-mode:multiply; }
.product-thumb:hover .image img{ transform:scale(1.05); }

/* Иконки «в избранное / сравнить» — поверх фото */
.g-act{ position:absolute; z-index:3; top:10px; right:10px; display:flex; flex-direction:column; gap:7px; }
.g-act button{
  width:34px; height:34px; border-radius:50%; border:0; padding:0;
  background:rgba(19,17,16,.55); color:#fff; font-size:12px;
  backdrop-filter:blur(4px); transition:background-color .18s ease,color .18s ease;
}
.g-act button:hover{ background:var(--accent); color:#1B1108; }

.product-thumb .caption{ padding:18px 12px 0; flex:1 1 auto; display:flex; flex-direction:column; }
.product-thumb .caption h4{
  font-size:15px; line-height:1.35; margin:0 0 12px; font-weight:600; text-align:center;
  min-height:2.7em;
}
.product-thumb .caption h4 a{ color:var(--text); }
.product-thumb .caption h4 a:hover{ color:var(--accent); }
.product-thumb .caption > p{
  font-size:12.5px; line-height:1.5; color:var(--text-3); margin:0 0 14px; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Строки характеристик, как в референсе */
.g-spec{ margin:auto 0 0; border-top:1px solid var(--line); }
.g-spec__r{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 2px; border-bottom:1px solid var(--line); font-size:12.5px;
}
.g-spec__r span{ color:var(--text-3); }
.g-spec__r b{ color:var(--text); font-weight:700; font-size:14px; white-space:nowrap; }
.g-spec__r b .price-old{
  font-size:12px; color:var(--text-3); text-decoration:line-through;
  font-weight:500; margin-left:7px;
}
.g-spec__r b .price-new{ color:var(--accent); }
.g-spec__r .rating{ margin:0; }

.product-thumb .price{
  display:block; margin:0; font-size:16px; font-weight:800; color:var(--text);
}
.product-thumb .price-new{ color:var(--accent); }
.product-thumb .price-old{
  font-size:12.5px; color:var(--text-3); text-decoration:line-through; margin-left:8px; font-weight:500;
}
.product-thumb .price-tax{ display:block; font-size:11px; color:var(--text-3); font-weight:500; }

.rating .fa-stack{ width:15px; height:15px; line-height:15px; }
.rating .fa-star,.rating .fa-star + .fa-star-o{ color:var(--altyn); }
.rating .fa-star-o{ color:rgba(255,255,255,.18); }

/* Кнопка карточки — оранжевая пилюля во всю ширину */
.product-thumb .button-group{ border:0; background:none; display:flex; gap:8px; padding:14px 2px 4px; }
.product-thumb .button-group button{
  flex:1 1 auto; width:auto; height:44px; border:0; border-radius:var(--pill);
  background:var(--accent); color:#1B1108; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:background-color .18s ease;
}
.product-thumb .button-group button:hover{ background:var(--accent-l); }

/* Бейджи */
.g-badge{
  position:absolute; z-index:3; top:10px; left:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:6px 13px; border-radius:var(--pill);
  background:var(--terracotta); color:#fff; line-height:1.4;
}
.g-badge--kok{ background:var(--kok); color:#08201F; }
.g-badge--gold{ background:var(--altyn); color:#1B1108; }

/* Горизонтальный список */
.product-list .product-thumb{ flex-direction:row; gap:16px; }
.product-list .product-thumb > div:not([class]){ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.product-list .image{ flex:none; width:250px; }
.product-list .caption{ padding:14px 8px 0; text-align:left; }
.product-list .caption h4{ text-align:left; min-height:0; }
.product-list .caption > p{ text-align:left; }
.product-list .button-group{ max-width:280px; }

/* ==========================================================================
   ОРАНЖЕВАЯ ПОЛОСА — «Клуб капсул»
   ========================================================================== */
.g-band{ position:relative; background:var(--accent); overflow:hidden; }
.g-band::before{
  content:""; position:absolute; inset:0;
  background:var(--kiiz-dark) repeat; opacity:.9;
}
.g-band__in{ position:relative; z-index:1; padding:60px 0; }
.g-band .g-eyebrow{ color:rgba(27,17,8,.62); }
.g-band h2{ color:#1B1108; margin:0 0 30px; }
.g-band__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g-band__step{
  background:var(--card); border-radius:var(--r); padding:30px 28px 32px;
  text-align:center; position:relative;
}
.g-band__step .g-band__n{
  width:52px; height:52px; border-radius:50%; margin:0 auto 18px;
  background:var(--accent-s); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800;
}
.g-band__step h3{ font-size:17px; margin:0 0 14px; color:var(--text); }
.g-band__step h3::after{
  content:""; display:block; width:44px; height:1px; background:var(--altyn);
  margin:14px auto 0; opacity:.7;
}
.g-band__step p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--text-2); }
.g-band__cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.g-band .btn-primary,.g-band .btn-primary:focus{ background:#1B1108; border-color:#1B1108; color:var(--accent); }
.g-band .btn-primary:hover{ background:#000!important; border-color:#000!important; color:var(--accent-l)!important; }
.g-band .btn-default,.g-band .btn-default:focus{ border-color:rgba(27,17,8,.35); color:#1B1108; }
.g-band .btn-default:hover{ border-color:#1B1108!important; color:#1B1108!important; }

/* ==========================================================================
   ПРОМО-БЛОК: оранжевая панель + тёмная панель
   ========================================================================== */
.g-promo{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; }
.g-promo__l{
  position:relative; background:var(--accent); border-radius:var(--r-lg);
  padding:42px 44px; overflow:hidden;
}
.g-promo__l::before{
  content:""; position:absolute; inset:0; background:var(--kiiz-dark) repeat; opacity:.85;
}
.g-promo__l > *{ position:relative; z-index:1; }
.g-promo__l .g-eyebrow{ color:rgba(27,17,8,.62); }
.g-promo__l h2{ color:#1B1108; font-size:34px; margin:0 0 16px; }
.g-promo__l p{ color:rgba(27,17,8,.78); font-size:14.5px; margin:0; max-width:44ch; }
.g-promo__r{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px 40px;
}
.g-promo__r h3{ font-size:20px; margin:0 0 6px; }
.g-promo__r > p{ font-size:13px; color:var(--text-3); margin:0 0 22px; }
.g-promo__r .form-control{ margin-bottom:12px; }
.g-promo__r .btn{ width:100%; }
.g-promo__agree{ font-size:12px; color:var(--text-3); margin:14px 0 0; }

/* ==========================================================================
   О НАС / ДВЕ ТРАДИЦИИ
   ========================================================================== */
.g-story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
.g-story__art{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g-story__art img{
  width:100%; height:100%; object-fit:cover; border-radius:var(--r); background:var(--shot);
}
.g-story__art img:first-child{ grid-row:span 2; aspect-ratio:3/4; }
.g-story__art img + img{ aspect-ratio:4/3; }
.g-story h2{ margin:0 0 18px; }
.g-story p{ font-size:14.5px; line-height:1.7; }
.g-cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:26px; }
.g-cols h3{ font-size:16px; margin:0 0 8px; }
.g-cols h3 small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:7px;
}
.g-cols p{ font-size:13.5px; color:var(--text-3); margin:0; }
.g-stats{ display:flex; gap:44px; flex-wrap:wrap; margin-top:30px; }
.g-stat{ max-width:230px; }
.g-stat__n{
  font-family:var(--font-display); font-size:40px; font-weight:300;
  color:var(--accent); line-height:1; margin-bottom:6px;
}
.g-stat b{ display:block; font-size:14px; color:var(--text); margin-bottom:6px; }
.g-stat span{ font-size:12.5px; color:var(--text-3); line-height:1.5; }

/* ==========================================================================
   ОТЗЫВЫ
   ========================================================================== */
.g-revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g-rev{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:44px 28px 30px; text-align:center; position:relative; margin-top:28px;
}
.g-rev__av{
  position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  width:64px; height:64px; border-radius:50%; overflow:hidden;
  border:3px solid var(--bg); background:var(--shot);
}
.g-rev__av img{ width:100%; height:100%; object-fit:cover; }
.g-rev__q{
  position:absolute; top:-14px; left:calc(50% + 26px);
  width:30px; height:30px; border-radius:50%; background:var(--accent); color:#1B1108;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
  border:3px solid var(--bg);
}
.g-rev b{ display:block; font-size:15px; color:var(--text); margin-bottom:8px; }
.g-rev .rating{ margin-bottom:14px; }
.g-rev p{
  font-size:13px; line-height:1.6; color:var(--text-3); margin:0;
  padding-top:14px; border-top:1px solid var(--line);
}

/* ==========================================================================
   БРЕНДЫ / СЕРИИ
   ========================================================================== */
.g-brands{ display:flex; flex-wrap:wrap; gap:10px; }
.g-brand{
  flex:1 1 150px; text-align:center; padding:20px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:14.5px; font-weight:600; color:var(--text-2);
  transition:all .18s ease;
}
.g-brand:hover{ color:var(--accent); border-color:var(--line-2); background:var(--card-2); }
.g-brand img{ max-height:32px; width:auto; opacity:.7; }
.g-brand:hover img{ opacity:1; }

/* ==========================================================================
   КАТАЛОГ
   ========================================================================== */
.g-cat-head{
  display:flex; align-items:flex-end; gap:34px; flex-wrap:wrap;
  padding-bottom:26px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.g-cat-head h2{ font-size:38px; margin:0; }
.g-cat-head__desc{
  flex:1 1 340px; font-size:14.5px; line-height:1.6; color:var(--text-2);
  margin:0; max-width:60ch;
}
/* Счётчик у заголовка убран из шаблона; правило на случай, если на сервере
   ещё лежит прежний category.twig — тот же счётчик есть внизу у пагинации. */
.g-cat-head__count{ display:none; }

/* Крошки дублируют заголовок — прячем на листинге и в карточке товара.
   Из разметки не убираем: common.js вставляет после .breadcrumb алерты
   «товар добавлен в корзину», без этого узла они пропадут.             */
body.product-category .breadcrumb,
body.product-product .breadcrumb{ display:none; }

/* Чипсы уточнения */
.g-refine{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 24px; padding:0; list-style:none; }
.g-refine a{
  display:inline-block; padding:9px 20px; border-radius:var(--pill);
  border:1px solid var(--line-2); font-size:13px; font-weight:500;
  color:var(--text-2); background:transparent;
}
.g-refine a:hover,.g-refine li.is-on a{
  background:var(--accent); border-color:var(--accent); color:#1B1108; font-weight:600;
}

/* Панель сортировки */
.g-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:0 0 22px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.g-toolbar > *{ height:44px; }
.g-toolbar .btn-group{ margin-right:auto; display:flex; gap:6px; }
.g-toolbar .btn-group .btn{
  height:44px; width:44px; padding:0; border-radius:50%;
  border-color:var(--line-2); background:transparent; color:var(--text-3);
  display:inline-flex; align-items:center; justify-content:center;
}
.g-toolbar .btn-group .btn.active,.g-toolbar .btn-group .btn.active:hover{
  background:var(--accent); border-color:var(--accent); color:#1B1108;
}
/* Поля «Сортировка» и «Показать». Своя обёртка .g-sel вместо bootstrap-
   ного input-group: его стили в so-ladaz переопределены и разъезжаются.  */
.g-sel{
  display:inline-flex!important; align-items:center!important; height:44px; margin:0;
  border:1px solid var(--line)!important; border-radius:var(--pill);
  background:transparent!important; padding:0 6px 0 16px; gap:8px;
}
/* Подпись и значение выравнивает сам flex — поэтому у обоих снята
   собственная высота и line-height. Пока они стояли на height:42/line-height:42,
   любая чужая правка кегля (у select он приходил крупнее) уводила текст
   с общей линии. Кегль тоже фиксируем, иначе разъезжается снова. */
.g-sel label,.g-sel select{
  height:auto!important; line-height:1.2!important;
  margin:0!important; padding:0!important;
  font-size:13px!important; align-self:center!important;
  border:0!important; box-shadow:none!important; background-color:transparent!important;
}
.g-sel label{ white-space:nowrap; font-weight:500; color:var(--text-3); }
.g-sel select{
  min-width:90px; max-width:220px; outline:none; cursor:pointer;
  font-weight:600!important; color:var(--text);
  /* своя стрелка: нативную so-ladaz гасит через appearance:none */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:22px!important;
  background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23B4472E' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 4px center/10px 6px!important;
}
.g-sel select option{ color:#17110D; background:#FFF; }

/* Ссылка «Сравнение товаров» — в so-ladaz на ней зелёная заливка btn-success */
.g-toolbar #compare-total,.g-toolbar #compare-total:hover,.g-toolbar #compare-total:focus{
  height:44px; display:inline-flex; align-items:center; padding:0 18px;
  border:1px solid var(--line)!important; border-radius:var(--pill);
  background:transparent!important; background-image:none!important;
  box-shadow:none!important; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--text-2)!important;
}
.g-toolbar #compare-total:hover{ color:var(--accent)!important; border-color:var(--accent)!important; }

/* Боковая колонка */
#column-left .panel,#column-right .panel{
  border:1px solid var(--line); border-radius:var(--r); box-shadow:none;
  background:var(--card); margin-bottom:20px; overflow:hidden;
}
#column-left .panel-heading,#column-right .panel-heading{
  background:transparent; border-bottom:1px solid var(--line); border-radius:0;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); padding:18px 22px;
}
#column-left .list-group,#column-right .list-group{ margin:0; }
#column-left .list-group-item,#column-right .list-group-item{
  border:0; border-bottom:1px solid var(--line); border-radius:0!important;
  padding:12px 22px; font-size:13.5px; color:var(--text-2); background:transparent;
}
#column-left .list-group-item:last-child{ border-bottom:0; }
#column-left a.list-group-item:hover{ background:var(--card-2); color:var(--accent); }
#column-left .list-group-item.active,#column-left .list-group-item.active:hover{
  background:var(--accent-s); color:var(--accent); border-color:var(--line); font-weight:700;
}
.panel-footer{ background:transparent; border-top:1px solid var(--line); border-radius:0; padding:16px 22px; }
/* ==========================================================================
   КАРТОЧКА ТОВАРА (страница)
   ========================================================================== */
#product-product h1{
  font-family:var(--font-text); font-weight:700; font-size:28px;
  text-transform:none; letter-spacing:-.015em; line-height:1.25; margin:0 0 14px;
}
.g-pd{ display:grid; grid-template-columns:1.06fr .94fr; gap:44px; align-items:start; }

/* Галерея */
.g-gallery .thumbnails{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.g-gallery__main{
  flex:0 0 100%; background:var(--shot); border:0;
  border-radius:var(--r-lg); overflow:hidden; position:relative;
}
.g-gallery__main .thumbnail{
  display:block; margin:0; padding:40px; border:0; border-radius:0;
  background:transparent; box-shadow:none;
}
.g-gallery__main img{ width:100%; height:auto; mix-blend-mode:multiply; }
.g-gallery__thumb{ flex:0 0 auto; }
.g-gallery__thumb .thumbnail{
  width:88px; height:88px; margin:0; padding:9px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--shot); transition:border-color .18s ease; box-shadow:none;
}
.g-gallery__thumb .thumbnail:hover{ border-color:var(--accent); }
.g-gallery__thumb img{ max-height:100%; width:auto; mix-blend-mode:multiply; }

/* Правая колонка */
.g-buy__brand{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px; display:block;
}
/* Строка под заголовком: оценка + «В закладки»/«В сравнение» */
.g-buy__line{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 26px; margin:0 0 16px;
}
.g-buy__rating{ margin:0; display:flex; align-items:center; gap:10px; }
.g-buy__rating a{ font-size:13px; color:var(--text-3); }
.g-buy__rating a:hover{ color:var(--accent); }
/* Текстовые действия без рамок — рядом с оценкой, не спорят с «Купить» */
.g-buy__links{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.g-buy__links button{
  border:0!important; background:none!important; box-shadow:none!important;
  padding:0!important; margin:0; font-size:13px; font-weight:600;
  color:var(--text-2); display:inline-flex; align-items:center; gap:7px;
  transition:color .18s ease;
}
.g-buy__links button:hover,.g-buy__links button:focus{ color:var(--accent); outline:none; }
.g-buy__links button i{ font-size:14px; color:var(--text-3); }
.g-buy__links button:hover i{ color:var(--accent); }
.g-buy__meta{
  list-style:none; padding:0; margin:0 0 22px;
  display:flex; flex-wrap:wrap; gap:0 26px; font-size:13px; color:var(--text-3);
}
.g-buy__meta li strong{ color:var(--text); font-weight:600; }
.g-buy__meta .g-instock{ color:var(--ok); font-weight:700; }

.g-price{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 26px; margin:0 0 22px;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.g-price__now{
  font-family:var(--font-text); font-size:34px; font-weight:800;
  letter-spacing:-.025em; color:var(--text); line-height:1;
}
.g-price__old{ font-size:17px; color:var(--text-3); text-decoration:line-through; }
.g-price__note{ font-size:12.5px; color:var(--text-3); width:100%; margin:8px 0 0; }
#product-product .g-price__now h2{ display:inline; font-size:inherit; margin:0; }

#product{ margin:0; }
#product .form-group{ margin-bottom:18px; }
#product h3{
  font-family:var(--font-text); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  margin:24px 0 14px;
}
#product hr{ margin:22px 0; }
.g-qty-row{ display:flex; gap:12px; align-items:stretch; }
.g-qty-row .g-qty{ flex:none; width:108px; }
/* Поле количества — в тон соседним блокам (цена, «В закладки»): белая
   карточка с рамкой. На общем .form-control фон кремовый (--card-2),
   и рядом с белым он читался как серая заплатка.                      */
.g-qty-row .g-qty .form-control{
  text-align:center; font-weight:700; height:100%;
  background:var(--card)!important; border:1px solid var(--line)!important;
  color:var(--text)!important;
}
.g-qty-row .g-qty .form-control:focus{
  border-color:var(--accent)!important; box-shadow:0 0 0 3px var(--accent-s);
}
.g-qty-row .btn{ flex:1 1 auto; }

.g-assure{
  margin-top:22px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); overflow:hidden;
}
.g-assure__i{
  display:flex; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.g-assure__i:last-child{ border-bottom:0; }
.g-assure__i .fa{ color:var(--accent); width:16px; text-align:center; margin-top:3px; flex:none; }
.g-assure__i b{ display:block; font-size:13.5px; color:var(--text); font-weight:700; }
.g-assure__i span{ font-size:12.5px; color:var(--text-3); line-height:1.45; }

/* Вкладки */
.nav-tabs{ border-bottom:1px solid var(--line); margin:56px 0 0; }
.nav-tabs > li{ margin-bottom:-1px; }
.nav-tabs > li > a{
  border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:14px 2px; margin-right:34px;
  font-size:13.5px; font-weight:600; color:var(--text-3); background:none!important;
}
.nav-tabs > li > a:hover{ color:var(--text); border-bottom-color:var(--line-2); }
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{
  color:var(--text); border:0; border-bottom:2px solid var(--accent); background:none;
}
.tab-content{ padding:32px 0 0; font-size:14.5px; line-height:1.75; color:var(--text-2); max-width:78ch; }

#tab-specification .table{ max-width:760px; }
#tab-specification .table > thead > tr > td{
  background:var(--card-2); border-color:var(--line)!important;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); padding:14px 18px;
}
#tab-specification .table > tbody > tr > td{
  border-color:var(--line)!important; padding:12px 18px; font-size:14px; color:var(--text-2);
}
#tab-specification .table > tbody > tr > td:first-child{ color:var(--text-3); width:46%; }
.table-bordered{ border-color:var(--line); }
.table > thead > tr > td,.table > tbody > tr > td{ border-color:var(--line); }

/* ==========================================================================
   КОРЗИНА
   ========================================================================== */
#checkout-cart h1{ font-size:36px; margin-bottom:24px; }
.g-cart{ display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
.g-cart__list{
  border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden;
}
#checkout-cart .table-responsive{ border:0; margin:0; }
#checkout-cart .table{ margin:0; border:0; }
#checkout-cart .table > thead > tr > td{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); padding:16px 20px;
}
#checkout-cart .table > tbody > tr > td{
  border:0; border-bottom:1px solid var(--line); padding:18px 20px;
  vertical-align:middle; color:var(--text-2);
}
#checkout-cart .table > tbody > tr:last-child > td{ border-bottom:0; }
#checkout-cart .table a{ font-size:14.5px; color:var(--text); font-weight:600; }
#checkout-cart .table a:hover{ color:var(--accent); }
#checkout-cart .img-thumbnail{
  border:0; border-radius:var(--r-sm); padding:6px; background:var(--shot);
  width:86px; height:86px; object-fit:contain;
}
#checkout-cart .input-group .form-control{ text-align:center; font-weight:700; padding:10px 8px; }
#checkout-cart .input-group-btn .btn{ padding:11px 14px; }
#checkout-cart small{ color:var(--text-3); }
#checkout-cart .table > tbody > tr > td:nth-child(n+4),
#checkout-cart .table > thead > tr > td:nth-child(n+4){ white-space:nowrap; }

.g-summary{
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  position:sticky; top:20px; overflow:hidden;
}
.g-summary__h{
  padding:20px 24px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text);
}
.g-summary__b{ padding:10px 24px 24px; }
.g-summary .table{ margin:0; border:0; }
.g-summary .table > tbody > tr > td{
  border:0; border-bottom:1px solid var(--line); padding:13px 0; font-size:14px; color:var(--text-2);
}
.g-summary .table > tbody > tr:last-child > td{
  border-bottom:0; padding-top:18px; font-size:20px; font-weight:800;
  letter-spacing:-.02em; color:var(--text);
}
.g-summary .table > tbody > tr:last-child > td strong{ font-weight:800; }
.g-summary .btn-primary{ width:100%; margin-top:16px; }
.g-summary__note{
  font-size:12.5px; color:var(--text-3); line-height:1.55; margin:16px 0 0;
  padding-top:16px; border-top:1px solid var(--line);
}
.g-summary__note .fa{ color:var(--accent); margin-right:7px; }

/* ==========================================================================
   ОФОРМЛЕНИЕ ЗАКАЗА
   ========================================================================== */
#checkout-checkout h1{ font-size:36px; margin-bottom:10px; }
#checkout-checkout .panel-group{ margin-top:24px; counter-reset:gstep; }
#checkout-checkout .panel{
  border:1px solid var(--line); border-radius:var(--r)!important;
  box-shadow:none; background:var(--card); margin-bottom:14px!important; overflow:hidden;
}
#checkout-checkout .panel-heading{ background:transparent; border-bottom:0; border-radius:0; padding:0; }
#checkout-checkout .panel-title{ font-size:18px; font-weight:600; margin:0; }
#checkout-checkout .panel-title > a{
  display:flex; align-items:center; gap:16px; padding:22px 26px; color:var(--text);
}
#checkout-checkout .panel-title > a::before{
  counter-increment:gstep; content:counter(gstep);
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--accent-s); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800;
}
#checkout-checkout .panel-title > a:hover{ color:var(--accent); }
#checkout-checkout .panel-body{ padding:6px 26px 28px 78px; border-top:1px solid var(--line); }
#checkout-checkout .panel-body > .row{ margin-top:18px; }
#checkout-checkout .buttons{ margin-top:20px; }
#checkout-checkout fieldset legend{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); border-bottom:1px solid var(--line);
  padding-bottom:12px; margin-bottom:20px;
}
#checkout-checkout .well{
  background:var(--card-2); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:none; color:var(--text-2);
}

/* Полоса шагов */
.g-steps{ display:flex; gap:10px; margin:0 0 26px; flex-wrap:wrap; }
.g-steps__i{
  flex:1 1 0; min-width:170px; padding:15px 20px;
  border:1px solid var(--line); border-radius:var(--pill); background:var(--card);
  display:flex; align-items:center; gap:12px;
}
.g-steps__n{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--card-2); color:var(--text-3);
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.g-steps__i b{ font-size:13px; font-weight:600; color:var(--text-3); }
.g-steps__i.is-done{ border-color:rgba(53,162,175,.4); }
.g-steps__i.is-done .g-steps__n{ background:var(--kok); color:#08201F; }
.g-steps__i.is-done b{ color:var(--text-2); }
.g-steps__i.is-now{ border-color:var(--accent); background:var(--accent-s); }
.g-steps__i.is-now .g-steps__n{ background:var(--accent); color:#1B1108; }
.g-steps__i.is-now b{ color:var(--text); }

/* Способы оплаты */
.g-pay{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.g-pay span{
  border:1px solid var(--line); border-radius:var(--pill);
  padding:8px 16px; font-size:12px; font-weight:600;
  color:var(--text-3); background:transparent;
}

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
footer{
  margin-top:70px; padding:0; border:0;
  background:var(--bg-2); color:var(--text-3); position:relative;
}
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:22px;
  background:var(--orn-gold) repeat-x center/58px 22px; opacity:.35;
}
footer .container{ padding-top:64px; padding-bottom:34px; }
footer h5{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); margin:0 0 18px;
}
footer a{ color:var(--text-3); font-size:13.5px; }
footer a:hover{ color:var(--accent); }
footer ul li{ margin-bottom:10px; }
footer hr{ border-top:1px solid var(--line); margin:36px 0 22px; }
footer p{ font-size:12.5px; color:var(--text-3); }

.g-foot-brand{ padding-right:30px; }
.g-foot-brand__n{
  font-family:var(--font-display); font-size:22px; font-weight:400;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text); margin:0 0 5px;
}
.g-foot-brand__s{
  font-size:9.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.g-foot-brand p{ font-size:13px; color:var(--text-3); line-height:1.6; }
.g-foot-contact{ margin-top:18px; }
.g-foot-contact a.g-foot-tel{ font-size:20px; font-weight:700; color:var(--text); display:block; }
.g-foot-contact a.g-foot-tel:hover{ color:var(--accent); }
/* Адрес и часы работы приходят из настроек магазина отдельными полями и
   бывают многострочными — отсюда два блока с интервалом, а не одна строка. */
.g-foot-contact span{ font-size:12.5px; display:block; color:var(--text-3); line-height:1.55; }
.g-foot-contact span + span{ margin-top:6px; }
.g-foot-soc{ display:flex; gap:9px; margin-top:20px; }
.g-foot-soc a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:all .18s ease;
}
.g-foot-soc a:hover{ border-color:var(--accent); color:#1B1108; background:var(--accent); }
.g-foot-bottom{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.g-foot-bottom p{ margin:0; }
.g-foot-bottom .g-pay{ margin-left:auto; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width:1199px){
  .g-hero__in{ padding:0 26px 24px; }
  .g-pd{ gap:32px; }
  .g-cart{ grid-template-columns:1fr 310px; }
  .g-facts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:991px){
  h1{ font-size:34px; } h2{ font-size:28px; }
  /* Баннер ниже, но не «схлопнутый»: внутри только лента категорий, и без
     заданной высоты от фотографии осталась бы полоска. */
  .g-hero__banner{ min-height:380px; }
  .g-hero__in{ padding:0 22px 20px; }
  .g-hero__shot{ padding:0 30px 36px; align-items:center; }
  .g-hero__shot img{ width:min(100%,260px); }
  .g-hero__tag{ width:100%; }
  .g-cats{ grid-template-columns:1fr 1fr; }
  .g-band__steps{ grid-template-columns:1fr; }
  .g-promo{ grid-template-columns:1fr; }
  .g-story{ grid-template-columns:1fr; gap:28px; }
  .g-revs{ grid-template-columns:1fr; }
  .g-rev{ margin-top:36px; }
  .g-pd{ grid-template-columns:1fr; gap:30px; }
  .g-cart{ grid-template-columns:1fr; }
  .g-summary{ position:static; }
  header .row{ display:block; }
  #logo{ margin-bottom:18px; text-align:center; }
  #logo a{ justify-content:center; }
  .g-head-phone{ text-align:center; margin-bottom:14px; }
  #search{ margin-bottom:14px; }
  /* Пункты остаются в строку и на планшете — просто плотнее и с переносом */
  #menu .navbar-nav{ display:inline-flex!important; flex-direction:row!important; flex-wrap:wrap; justify-content:center; width:auto; }
  #menu .nav > li{ float:left; }
  #menu .nav > li > a{ padding:10px 12px; font-size:12px; letter-spacing:.06em; }
  #menu .dropdown-inner{ display:block; }
  .product-list .product-thumb{ flex-direction:column; }
  .product-list .image{ width:auto; }
}
@media (max-width:767px){
  body{ font-size:14.5px; }
  .container{ padding-left:16px; padding-right:16px; }
  .g-section{ padding:44px 0; }
  h1{ font-size:28px; } h2{ font-size:24px; } h3{ font-size:18px; }
  .g-hero__banner{ min-height:300px; }
  .g-hero__in{ padding:0 16px 16px; }
  .g-hero__chips a{ padding:7px 15px; font-size:12.5px; }
  .g-facts{ grid-template-columns:1fr; }
  .g-cats{ grid-template-columns:1fr 1fr; gap:12px; }
  .g-cols{ grid-template-columns:1fr; gap:22px; }
  .g-stats{ gap:24px; }
  .g-story__art{ grid-template-columns:1fr 1fr; }
  .g-promo__l,.g-promo__r{ padding:30px 24px; }
  .g-brand{ flex:1 1 45%; }
  .g-head{ gap:16px; }
  .g-sel{ flex:1 1 100%; }
  .g-sel select{ max-width:none; flex:1 1 auto; }
  .g-toolbar .btn-group{ margin-right:0; }
  #checkout-checkout .panel-body{ padding:6px 20px 24px; }
  #checkout-checkout .panel-title > a{ padding:18px 20px; gap:12px; }
  .g-price__now{ font-size:29px; }
  .g-foot-brand{ padding-right:0; margin-bottom:34px; }
  footer .container{ padding-top:48px; }
  .g-foot-bottom .g-pay{ margin-left:0; }
  #top .g-top-note{ display:none; }
  /* в узкой шапке остаётся только компактный знак */
  #logo .g-logo-full{ display:none; }
  #logo .g-logo-mark{ display:block; height:38px; }
}

@media print{
  #top,#menu,footer,.g-band,.g-facts,#cart,.button-group{ display:none!important; }
  body{ background:#fff; color:#000; }
}
/* ==========================================================================
   СОВМЕСТИМОСТЬ: гасим светлую стандартную тему OpenCart
   ========================================================================== */

/* Общий тёмный слой для страниц, которые тема не переопределяет */
#content{ min-height:0; padding-bottom:10px; color:var(--text-2); }
.well,.panel,.panel-default,.thumbnail{
  background:var(--card); border-color:var(--line); box-shadow:none;
  color:var(--text-2); border-radius:var(--r);
}
.panel-default > .panel-heading{
  background:transparent; border-color:var(--line); color:var(--text);
}
.list-group-item{ background:transparent; border-color:var(--line); color:var(--text-2); }
.table > thead > tr > th,.table > tbody > tr > th{ border-color:var(--line); color:var(--text); }
.table-striped > tbody > tr:nth-of-type(odd){ background:rgba(255,255,255,.02); }
.table-hover > tbody > tr:hover{ background:rgba(255,255,255,.04); }
.img-thumbnail{ background:var(--shot); border-color:var(--line); border-radius:var(--r-sm); }
.label-info{ background:var(--kok); color:#08201F; }
.close{ color:var(--text-2); opacity:.7; text-shadow:none; }
.close:hover{ color:var(--text); opacity:1; }
legend{ color:var(--text); border-bottom-color:var(--line); }
.dropdown-menu{
  background:var(--card); border-color:var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow);
}
.dropdown-menu > li > a{ color:var(--text-2); font-size:13.5px; padding:9px 20px; }
.dropdown-menu > li > a:hover{ background:var(--card-2); color:var(--accent); }

/* Переключатели языка и валюты OpenCart кладут в выпадающий список <button>,
   а не <a> — правило выше их не ловит, и они оставались с серым градиентом
   Bootstrap. Приводим к тому же виду, что и пункты-ссылки. */
.dropdown-menu > li > button,
.dropdown-menu .language-select,
.dropdown-menu .currency-select{
  display:block; width:100%; text-align:left;
  background:transparent; border:0; box-shadow:none;
  color:var(--text-2); font-size:13.5px; font-weight:500;
  padding:9px 20px; border-radius:0; line-height:1.5;
}
.dropdown-menu > li > button:hover,
.dropdown-menu .language-select:hover,
.dropdown-menu .currency-select:hover{
  background:var(--card-2); color:var(--accent);
}
.dropdown-menu > li > button:focus{ outline:0; }
.dropdown-menu img{ margin-right:8px; vertical-align:-1px; border-radius:2px; }

/* Текущий язык в списке — помечаем цветом, раз флага больше нет */
.dropdown-menu .language-select.is-current,
.dropdown-menu .currency-select.is-current{ color:var(--accent); font-weight:600; }

/* Валютный переключатель OpenCart оставляет символ в <strong> перед
   названием — прижимаем, чтобы не разъезжалось */
.dropdown-menu .currency-select strong{ margin-right:6px; }
.dropdown-menu .divider{ background:var(--line); }
.tooltip-inner{ background:#000; border-radius:var(--r-sm); font-size:12px; }
.tooltip.top .tooltip-arrow{ border-top-color:#000; }
.nav-tabs.nav-justified > li > a{ border-radius:0; }
.form-horizontal .control-label{ text-align:left; }

/* Карточка товара: гасим правила стандартной темы */
.product-thumb,
.product-grid .product-thumb,
.product-list .product-thumb{ overflow:visible; }
.product-thumb .caption,
.product-grid .product-thumb .caption,
.product-list .product-thumb .caption{ min-height:0; margin-left:0; }
.product-grid .product-thumb .caption{ padding:18px 12px 0; }
.product-list .product-thumb .caption{ padding:14px 8px 0; }
.product-thumb .image,
.product-grid .product-thumb .image,
.product-list .product-thumb .image{ float:none; padding:18px; text-align:center; }
.product-thumb .image a:hover{ opacity:1; }
.product-thumb .button-group,
.product-list .product-thumb .button-group{
  border:0; background:none; overflow:visible;
}
.product-thumb .button-group button,
.product-thumb .button-group button + button{
  width:auto; float:none; line-height:normal; border-left:0;
}
.product-thumb h4{ font-weight:600; }
.product-thumb .price{ color:var(--text); }
h2.price{ margin:0; }
.product-thumb .rating{ padding-bottom:0; }
.rating .fa-stack{ font-size:8px; }
.rating .fa-star,.rating .fa-star-o,.rating .fa-star + .fa-star-o{ font-size:13px; }

/* Равная высота карточек в строке */
.row.g-prow{ display:flex; flex-wrap:wrap; }
.g-prow > .product-layout,
.g-prow > [class*="col-"]{ display:flex; }
.g-prow > .product-layout > .product-thumb,
.g-prow > [class*="col-"] > .product-thumb{ width:100%; }
.product-thumb > div:not([class]){ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }

/* Галерея товара */
.g-gallery .thumbnails{ margin:0; overflow:visible; }
.g-gallery .thumbnails > li{ margin-left:0; }
.g-gallery .thumbnails .image-additional{ float:none; margin-left:0; max-width:none; }
.g-gallery .image-additional a{ margin-bottom:0; border:0; padding:0; }

/* Обязательные поля */
div.required .control-label:before,
.form-group.required .control-label:before{ content:"* "; color:var(--accent); font-weight:700; }

/* Модальные окна и капча на тёмном */
.modal-content{ background:var(--card); border-color:var(--line); border-radius:var(--r); }
.modal-header,.modal-footer{ border-color:var(--line); }
.popover{ background:var(--card); border-color:var(--line); color:var(--text-2); }

/* Swiper (слайдер/баннеры модулей) */
.swiper-viewport{
  border:0; border-radius:var(--r-lg); box-shadow:none; margin:0 0 20px; background:var(--card);
  overflow:hidden;
}
.swiper-pagination-bullet{ background:rgba(255,255,255,.4); }
.swiper-pagination-bullet-active{ background:var(--accent); }

/* Ссылки внутри текстовых блоков (описание, вкладки) */
.tab-content a,.g-cat-head__desc a,#tab-description a{ color:var(--accent); }
.tab-content a:hover,#tab-description a:hover{ color:var(--accent-l); }
/* Названия товаров в карточках всегда светлые */
.product-thumb .caption h4 a{ color:var(--text); }
.product-thumb .caption h4 a:hover{ color:var(--accent); }

/* В сетке описание скрыто — карточка компактная; в списке показываем */
.product-grid .product-thumb .caption > p{ display:none; }
.product-list .product-thumb .caption > p{ display:-webkit-box; }

/* ==========================================================================
   ПАНЕЛЬ СОРТИРОВКИ НА СТАРОЙ РАЗМЕТКЕ (input-group)
   Работает, пока на сервере лежит непереустановленный category.twig:
   тот же вид, что у нашей обёртки .g-sel, но поверх bootstrap-классов.
   so-ladaz задаёт им фон, высоту и рамки с высокой специфичностью,
   поэтому здесь без !important не обойтись.
   ========================================================================== */
.g-toolbar .form-group,.g-toolbar .input-group{
  margin:0!important; display:inline-flex!important; align-items:center;
  width:auto!important; height:44px; gap:6px; padding:0 4px 0 16px;
  border:1px solid var(--line)!important; border-radius:var(--pill);
  background:transparent!important; box-shadow:none!important;
}
/* margin:0 здесь принципиален: .input-group-addon — это <label>, а bootstrap
   даёт всем label margin-bottom:5px. Во flex-контейнере он центрируется
   вместе с внешним отступом, и подпись висит на пару пикселей выше значения. */
.g-toolbar .input-group-addon{
  display:inline-block!important; width:auto!important; white-space:nowrap;
  height:42px!important; line-height:42px!important;
  padding:0!important; margin:0!important; align-self:center!important;
  border:0!important; border-radius:0!important; background:transparent!important;
  color:var(--text-3)!important; font-size:13px!important; font-weight:500!important;
  vertical-align:middle!important;
}
.g-toolbar .form-control{
  display:inline-block!important; float:none!important; vertical-align:middle!important;
  align-self:center!important; width:auto!important; min-width:90px; max-width:220px;
  height:42px!important; line-height:42px!important;
  padding:0 22px 0 8px!important; margin:0!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  color:var(--text)!important; font-size:13px!important; font-weight:600!important;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23B4472E' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 4px center/10px 6px!important;
}
.g-toolbar .form-control option{ color:#17110D; background:#FFF; }
/* Кнопка сравнения на старой разметке (.btn.btn-link) */
.g-toolbar .btn-link#compare-total{
  border:1px solid var(--line)!important; border-radius:var(--pill);
  background:transparent!important; background-image:none!important;
  color:var(--text-2)!important; text-decoration:none!important;
}

/* ==========================================================================
   БЛОГ (Simple Blog в разметке so-ladaz)
   Шапка статьи в стилях style2/style5 лежит поверх фотографии: so-ladaz
   даёт ей градиент от #111 слева к прозрачному справа и светлый текст.
   Наш 01-base.css задаёт `h1,h2,h3{color:var(--text)}`, и заголовок в
   плашке становится тёмным по тёмному — на светлой версии не виден вовсе.
   Лечится плотной подложкой во всю ширину плашки и светлым текстом.

   Строка «Posted by … Created Date …» снята совсем (30.08.2026, по просьбе
   заказчика): подписи в ней английские, а дату Simple Blog отдаёт обрезанной
   до месяца. Автор у всех статей один — админ магазина, смысла в подписи нет.
   ========================================================================== */
/* width:1170px оставляем: элемент абсолютный внутри .container, но
   containing block у него — .article--mainimage во всю ширину экрана,
   так что 1170px и есть ширина контейнера. Ограничиваем только сверху. */
.article--maintitle{
  max-width:100%!important;
  color:#FFF6EE!important;
}
.article--maintitle .article-title{
  background:linear-gradient(to right,
    rgba(12,8,6,.88) 0%, rgba(12,8,6,.78) 60%, rgba(12,8,6,.58) 100%)!important;
  filter:none!important;
  padding:12px 16px!important;
  margin-bottom:0!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.article--maintitle .article-title h3,
.article--maintitle .article-title h1,
.article--maintitle .article-title h2{
  color:#FFF6EE!important; margin:0!important;
}

/* Автор и дата — во всех стилях статьи, и поверх фото, и под ним. */
.article-info .article-sub-title,
.article--maintitle .article-sub-title{ display:none!important; }

/* Заголовок в стилях без наложения (default, style1, style3, style4) —
   там текст лежит на фоне страницы, нужен наш цвет, а не серый so-ladaz. */
.article-info > .article-title h3,
.article--maincontent .article-title h3{ color:var(--text); }

@media (max-width:1199px){
  /* Экран уже 1170px — фиксированная ширина плашки уводит её вправо. */
  .article--maintitle{ width:auto!important; left:15px; right:15px; }
}
@media (max-width:767px){
  /* На узком экране сдвиг на -130% выносит плашку за пределы фотографии. */
  .article--maintitle{
    position:static!important; transform:none!important; margin-top:-1px;
  }
  .article--maintitle .article-title{
    background:rgba(12,8,6,.92)!important;
  }
}
/* ==========================================================================
   СВЕТЛАЯ ВЕРСИЯ — слой поверх тёмной сборки
   --------------------------------------------------------------------------
   Палитра и форма взяты из оригинальной светлой темы (gusto-preview_2.html):
   тёплая бумага, эспрессо-текст, терракота, оливка, көк, алтын, киіз.
   Углы острые (3/6px), заголовки — Playfair, кнопки не пилюли.
   (В том исходнике стоял Playfair Display; заменён — см. --font-display ниже.)

   Тот CSS был написан под прежнюю разметку и на нынешние шаблоны не ложится,
   поэтому здесь перенесён его язык, а не файл.

   Чтобы вернуть тёмную тему — не включать этот файл в сборку.
   ========================================================================== */

:root{
  /* --- Бумага и текст ---------------------------------------------------
     Разброс между фоном, полосой и карточкой сделан заметным: при разнице
     в пару процентов всё сливалось в бежевое пятно без чётких краёв.
     -------------------------------------------------------------------- */
  --bg:        #F7F2E8;   /* тёплая бумага                        */
  --bg-2:      #EFE5D2;   /* полосы, второй фон                   */
  --card:      #FFFFFF;   /* карточки — чистый белый, не кремовый */
  --card-2:    #F4EDE1;   /* поля ввода, приподнятое состояние    */
  --line:      #D3C4A9;   /* киіз, теперь различим на бумаге      */
  --line-2:    #B2A088;

  --text:      #16100B;   /* эспрессо                             */
  --text-2:    #2C2118;
  --text-3:    #6B5B4B;

  /* --- Акцент: терракота вместо оранжевого ------------------------------ */
  --accent:    #B4472E;   /* алматинское яблоко, главные действия */
  --accent-d:  #96371F;
  --accent-l:  #C85B41;
  --accent-s:  rgba(180,71,46,.10);

  --terracotta:#B4472E;
  --olive:     #5A6B4B;
  --crema:     #E7C79B;
  --kok:       #1D6E7E;   /* көк — степная бирюза                 */
  --altyn:     #C79A3C;   /* алтын                                */
  --ok:        #4C7A4A;

  /* --- Подложки под фото -------------------------------------------------
     Белые, а не бежевые: на кремовой подложке фотографии товаров выглядели
     тусклыми и грязноватыми.
     -------------------------------------------------------------------- */
  --shot:      #FFFFFF;
  --shot-2:    #F3ECE0;

  /* --- Форма: острые углы, никаких пилюль ------------------------------- */
  --r-lg:      6px;
  --r:         3px;
  --r-sm:      3px;
  --pill:      3px;

  /* Тень с чётким первым пикселем: один мягкий ореол давал «дымку» */
  --shadow:    0 1px 2px rgba(23,17,13,.07), 0 10px 24px -18px rgba(23,17,13,.35);

  /* --- Типографика: серифные заголовки ----------------------------------
     "Playfair", а НЕ "Playfair Display". У Display нет подмножества
     cyrillic-ext: физически отсутствуют ә ң қ ө ү һ ғ Ә Ң Қ Ө Ү Һ Ғ —
     14 букв из 18 казахских. Браузер добирал их поглифно из Noto Serif,
     и слово «Соңғы» набиралось двумя гарнитурами сразу.
     Playfair — то же семейство того же автора, дидоновская пластика
     сохраняется, но кириллица полная. Проверено по cmap woff2-файлов. */
  --font-display:"Playfair","Noto Serif","Times New Roman",Georgia,serif;
}

/* --- ЧЁТКОСТЬ ТЕКСТА ----------------------------------------------------
   Главная причина «тумана». В базе стоит -webkit-font-smoothing:antialiased —
   на тёмном фоне это правильно, светлые буквы там иначе заплывают. На светлом
   фоне тот же режим делает тёмный текст тоньше и серее: страница выглядит
   подёрнутой дымкой. Возвращаем субпиксельное сглаживание.

   Плюс body в базе красится в --text-2 (вторичный цвет) и весом 300. На тёмном
   это осознанное приглушение, на бумаге — просто блёклый текст.
   -------------------------------------------------------------------- */
body{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  color:var(--text);
  font-weight:400;
}

/* Заголовки Playfair: 500 на бумаге смотрится анемично */
h1,h2{ font-weight:600; }
h3,h4{ font-weight:600; }

/* Размытие за элементами убираем везде, кроме тёмного героя: на светлом
   фоне backdrop-filter даёт ту самую мутную кайму. */
.g-act button{ backdrop-filter:none; }

/* Логотипы брендов в базе приглушены до .7 — на бумаге это читается как
   выцветание, а не как приём. */
.g-brand img{ opacity:.85; }

/* --- Текст на терракоте -------------------------------------------------
   В тёмной сборке поверх оранжевого стоял тёмный #1B1108. На терракоте он
   не читается — нужен светлый. Ниже перечислены все такие места.
   -------------------------------------------------------------------- */
.btn-primary,.btn-primary:focus,
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary:active:hover,
.btn-inverse,.btn-inverse:focus,.btn-inverse:hover,.btn-inverse:active,
.pagination > .active > a,.pagination > .active > span,.pagination > .active > a:hover,
#search .btn,
#cart > .btn,
#menu .btn-navbar,
.g-hero__chips a:hover,
.g-act button:hover,
.product-thumb .button-group button,
.g-refine a:hover,.g-refine li.is-on a,
.g-toolbar .btn-group .btn.active,.g-toolbar .btn-group .btn.active:hover,
.g-steps__i.is-now .g-steps__n,
.g-badge,
.g-foot-soc a:hover{
  color:#FFF6EE!important;
}

/* Бирюза көк тоже тёмная — на ней нужен светлый текст, а не #08201F */
.btn-info,.btn-info:focus,.btn-success,.btn-success:focus,
.g-badge--kok,
.g-steps__i.is-done .g-steps__n,
.label-info{ color:#EAF4F5!important; }

/* А вот здесь тёмный текст ПРАВИЛЬНЫЙ и трогать его нельзя:
   .g-rev__q — цитата отзыва на светлой карточке,
   .g-badge--gold — на золоте алтын.                               */
.g-badge--gold{ color:#2A1F0A!important; }

/* Полоса-баннер во всю ширину: терракотовый фон, светлый текст */
.g-band,.g-band h2,.g-band .g-eyebrow,
.g-promo__l h2,.g-promo__l p,.g-promo__l .g-eyebrow{ color:#FFF6EE; }
.g-band .g-eyebrow,.g-promo__l .g-eyebrow{ color:rgba(255,246,238,.72); }
.g-band .btn-primary,.g-band .btn-primary:focus{
  background:#FFF6EE; border-color:#FFF6EE; color:var(--accent)!important;
}
.g-band .btn-primary:hover{
  background:#fff!important; border-color:#fff!important; color:var(--accent-d)!important;
}
.g-band .btn-default,.g-band .btn-default:focus{
  border-color:rgba(255,246,238,.45); color:#FFF6EE!important;
}
.g-band .btn-default:hover{ border-color:#FFF6EE!important; color:#FFF6EE!important; }

/* --- Поиск в шапке ------------------------------------------------------
   В тёмной теме поле и кнопка склеивались в таблетку (--pill:999px), и
   расхождение высот было незаметно за круглыми боками. На острых углах оно
   вылезло. Задаём обоим одинаковую высоту и убираем зазор.
   -------------------------------------------------------------------- */
#search .form-control{
  height:50px; line-height:normal; padding:0 20px;
  border:1px solid var(--line); border-right:0;
  border-radius:var(--r) 0 0 var(--r);
  background:var(--card);
}
#search .form-control:focus{ border-color:var(--line-2); border-right:0; }
#search .input-group-btn{ vertical-align:top; }
#search .btn{
  height:50px; padding:0 26px; line-height:1;
  border-radius:0 var(--r) var(--r) 0;
}

/* --- Описание товара ----------------------------------------------------
   Тексты в базе вставлены из Word: внутри сидят инлайновые
   font-family:"Times New Roman" и background:white. Отсюда и серифный шрифт,
   и белые прямоугольники разной ширины поверх бумаги. Своей вёрстки тут нет,
   поэтому глушим инлайн-стили — иначе править пришлось бы каждое описание
   вручную в админке.
   -------------------------------------------------------------------- */
#tab-description,#tab-description *{
  font-family:var(--font-text)!important;
  background-color:transparent!important;
}
#tab-description *{ color:inherit!important; }
#tab-description{ color:var(--text-2); }
#tab-description p{ margin:0 0 12px; }
#tab-description b,#tab-description strong{
  color:var(--text)!important; font-weight:700;
}
/* Пустые абзацы-распорки из Word: у них нет содержимого, но есть высота */
#tab-description p:empty{ display:none; }
#tab-description img{ max-width:100%; height:auto; }

/* --- Точечные правки: зашитое «белое по тёмному» ------------------------ */
.rating .fa-star-o{ color:rgba(23,17,13,.20); }
.rating .fa-star{ color:var(--altyn); }
.table-striped > tbody > tr:nth-of-type(odd){ background:rgba(23,17,13,.035); }
.table-hover > tbody > tr:hover{ background:rgba(23,17,13,.06); }
.swiper-pagination-bullet{ background:rgba(23,17,13,.26); }
.tooltip-inner{ background:#17110D; }
.tooltip.top .tooltip-arrow{ border-top-color:#17110D; }
.text-danger{ color:var(--terracotta); }

/* Наведение на бирюзовые кнопки: в базе оно уводило в #43B7C4 */
.btn-info:hover,.btn-success:hover{ background:var(--kok)!important; border-color:var(--kok)!important; color:#EAF4F5!important; }

/* --- Типографика --------------------------------------------------------
   Playfair — шрифт с высоким контрастом штриха. В прописную разрядку,
   рассчитанную на узкий Montserrat, он не помещается.
   -------------------------------------------------------------------- */
/* вес задан выше (600) — здесь его не переопределяем */
h1,h2,h3,.g-display{ letter-spacing:0; text-transform:none; }
.g-eyebrow{ font-family:var(--font-text); letter-spacing:.16em; }

/* Герой: на светлой странице фотография остаётся тёмной, иначе пропадёт
   светлый текст поверх неё. Это приём, а не остаток тёмной темы. */
.g-header-rule{ opacity:.6; }

/* Разделительный орнамент: на бумаге #F7F2E8 тёмное золото --altyn (#C79A3C)
   держится лучше, чем светлое #D9A93F тёмной версии. Тот же контур қошқар
   мүйіз, перекрашен обводкой в SVG — переменную --orn-gold не трогаем, она
   работает на нити под шапкой. */
.g-orn > span{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' width='64' height='24'%3E%3Cg fill='none' stroke='%23C79A3C' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 12h10'/%3E%3Cpath d='M10 12c0-6 8-7 8-2s-5 5-5 2'/%3E%3Cpath d='M10 12c0 6 8 7 8 2s-5-5-5-2'/%3E%3Cpath d='M18 12h6'/%3E%3Cpath d='M32 5l7 7-7 7-7-7z'/%3E%3Cpath d='M40 12h6'/%3E%3Cpath d='M54 12c0-6-8-7-8-2s5 5 5 2'/%3E%3Cpath d='M54 12c0 6-8 7-8 2s5-5 5-2'/%3E%3Cpath d='M54 12h10'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.95;
}

/* --- Тёмный остров внутри светлой страницы ------------------------------
   Баннер героя — единственное место, где подложка осталась тёмной, а шкала
   --text/--text-2/--text-3 в этом файле переехала на эспрессо. Из-за этого
   надпись «Продажа, аренда и сервис» (--text-2), плашка «Дегустация
   бесплатно» (--text + --text-3) и ссылка «Смотреть капсулы» (.g-arrow,
   --text) рисовались почти чёрным по тёмно-коричневому.

   Чинить каждый селектор поимённо не нужно: переменные наследуются, поэтому
   светлая шкала возвращается локально — на самом .g-hero__banner. Всё, что
   внутри, подхватывает её автоматически, включая мобильную раскладку.
   --accent при этом остаётся терракотовым, как на остальной странице.
   -------------------------------------------------------------------- */
.g-hero__banner{
  --text:   #FFF6EE;
  --text-2: rgba(255,246,238,.84);
  --text-3: rgba(255,246,238,.68);
  --line:   rgba(255,246,238,.18);
  --line-2: rgba(255,246,238,.28);
}
/* Плашка под фото: полупрозрачная подложка ложилась на светлую часть
   градиента и почти не отделялась от него — уплотняем. */
.g-hero__tag{ background:rgba(14,11,10,.90); }