/* ========================================================================== */
/* Объединенный и исправленный CSS для chokolato.ru            */
/* ========================================================================== */

/*
 * ИСПРАВЛЕНИЕ: Загрузка Google Fonts через @import удалена.
 * Убедитесь, что в вашем файле header.tpl есть асинхронная загрузка
 * через <link rel="preload">, как мы обсуждали ранее.
 */


/* --- Секция 1: Локальные Шрифты с исправлением для font-display --- */

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(https://www.chokolato.ru/catalog/view/theme/wic/stylesheet/fonts/fonts/glyphicons-halflings-regular.eot);
  src: url(https://www.chokolato.ru/catalog/view/theme/wic/stylesheet/fonts/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(https://www.chokolato.ru/catalog/view/theme/wic/stylesheet/fonts/fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(/catalog/view/theme/wic/stylesheet/fonts/fonts/glyphicons-halflings-regular.woff) format('woff'),url(https://www.chokolato.ru/catalog/view/theme/wic/stylesheet/fonts/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(https://www.chokolato.ru/catalog/view/theme/wic/stylesheet/fonts/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
  font-display: swap; /* ИСПРАВЛЕНО */
}

@font-face {
    font-family: 'FontAwesome';
    src: url(/catalog/view/theme/wic/stylesheet/fonts/fonts/fontawesome-webfont.eot?v=4.4.0);
    src: url(/catalog/view/theme/wic/stylesheet/fonts/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0) format('embedded-opentype'), url(/catalog/view/theme/wic/stylesheet/fonts/fonts/fontawesome-webfont.woff2?v=4.4.0) format('woff2'), url(/catalog/view/theme/wic/stylesheet/fonts/fonts/fontawesome-webfont.woff?v=4.4.0) format('woff'), url(/catalog/view/theme/wic/stylesheet/fonts/fonts/fontawesome-webfont.ttf?v=4.4.0) format('truetype'), url(/catalog/view/theme/wic/stylesheet/fonts/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* ПРАВИЛЬНО (уже было) */
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"),local("Roboto-Regular"),url("https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxP.ttf") format("truetype");
    font-display: swap; /* ИСПРАВЛЕНО */
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"),local("Roboto-Medium"),url("https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc9.ttf") format("truetype");
    font-display: swap; /* ИСПРАВЛЕНО */
}

/* --- Секция 2: Базовые стили и сбросы (Bootstrap + Normalize.css) --- */
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,main,menu,nav{display:block}[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,pre{font-family:monospace,monospace;font-size:1em}button,input,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.small,small{font-size:85%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-uppercase{text-transform:uppercase}
/* ... Остальные стили Bootstrap и Normalize ... */
/* Я не буду вставлять их сюда, чтобы не делать ответ слишком длинным, но они должны быть здесь */


/* --- Секция 3: Ваши кастомные стили для темы "wic" --- */

body {
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    color: #000;
    width: 100%;
    background: url(https://www.chokolato.ru/catalog/view/theme/wic/image/bg.jpg.webp) top center
}
h1,h2,h3,h4,h5,h6 {
    color: #444
}
.fa {
    font-size: 16px
}
h1 {
    font-size: 33px
}
h2 {
    font-size: 27px
}
h3 {
    font-size: 21px
}
h4 {
    font-size: 15px
}
a {
    color: #23a1d1
}
a:hover {
    text-decoration: none
}
label {
    font-size: 14px;
    font-weight: 400
}
.block-header {
    margin: 0 0 1em;
    background: #361c1b;
    color: #ededed;
    padding: .7em 1em;
    text-transform: uppercase;
    font-family: Roboto,sans-serif;
    font-size: 1.2em;
    font-weight: 400
}
/* ... и так далее, все ваши уникальные стили для темы ... */


/* ========================================================================== */
/*        Финальные стили для исправления CLS (смещения макета)         */
/* ========================================================================== */

/* 1. Резервируем место для главного баннера */
#slideshow0 {
    position: relative;
    aspect-ratio: 1140 / 476;
    background-color: #f5f5f5;
    overflow: hidden;
    margin-top: 0 !important;
}

/* 2. Резервируем место для изображений товаров и категорий */
.product-thumb .image,
.featured-categories .image {
    aspect-ratio: 1 / 1;
    background-color: #f8f8f8;
    overflow: hidden;
    display: block;
}
.product-thumb .image img,
.featured-categories .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Выравнивание высоты блоков категорий на главной */
.featured-categories .row {
    display: flex;
    flex-wrap: wrap;
}
.featured-categories .category-layout {
    display: flex;
    flex-direction: column;
}
.featured-categories .category-thumb {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.featured-categories .caption {
   flex-grow: 1;
}