

/* Start:/local/templates/hockey_one/components/bitrix/catalog.element/.default/style.css?178906851010936*/
/* Родные стили из твоего файла */
.about p { 
    margin-bottom: 10px !important; 
}
body { 
    background-color: #fff !important; 
}

/* Gate L: keep the complete product media column visible while the longer
   desktop/tablet information column scrolls. The site header is not fixed;
   24px is the measured comfortable viewport clearance. */
@media screen and (min-width: 992px) {
    @supports (position: sticky) {
        /* The legacy 80px spacing belonged to .info and therefore enlarged
           the sticky containing block below the purchase controls. Keep the
           same visual section gap on the tabs instead, so both columns end at
           the actual purchase-area boundary. */
        .item-page .wrap > .flex > .info {
            margin-bottom: 0;
        }

        .item-page .wrap > .tabs {
            margin-top: 80px;
        }

        .item-page .wrap > .flex > .photos {
            align-self: flex-start;
            position: -webkit-sticky;
            position: sticky;
            top: 24px;
            z-index: 2;
        }
    }
}

@media screen and (max-width: 991px) {
    .item-page .wrap > .flex > .photos {
        position: relative;
        top: auto;
        z-index: auto;
    }
}

/* Gate L: accessible, independent product-detail accordions.  The legacy
   global .block .name click handler intentionally does not match these
   buttons, preventing double toggles while preserving all selected values. */
.item-page .info .h1-product-accordion__toggle {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 48px 24px 0;
    border: 0;
    border-bottom: 1px solid #e6e6e7;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: 'DrukTextWideCyr-Medium', 'Druk Text Wide Cyr', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -.05em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.item-page .info .h1-product-accordion__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    width: 6px;
    height: 6px;
    margin-top: -1px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-135deg);
    transition: transform .18s ease;
}

.item-page .info .h1-product-accordion__toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ff2b35;
    transform: translateY(-50%);
    transition: background-color .18s ease, box-shadow .18s ease;
}

.item-page .info .h1-product-accordion__toggle[aria-expanded="false"]::after {
    margin-top: -5px;
    transform: rotate(45deg);
}

.item-page .info .h1-product-accordion__toggle[aria-expanded="false"]::before {
    background: #ff8f96;
}

.item-page .info .h1-product-accordion__toggle:hover::before,
.item-page .info .h1-product-accordion__toggle:focus-visible::before,
.item-page .info .h1-product-accordion__toggle[aria-expanded="true"]::before {
    background: #ff2b35;
}

.item-page .info .h1-product-accordion__toggle:focus-visible {
    outline: none;
}

.item-page .info .h1-product-accordion__toggle:focus-visible::before {
    box-shadow: 0 0 0 3px rgba(255, 43, 53, .22);
}

.item-page .info .h1-product-accordion__panel {
    overflow: hidden;
    border-top: 0;
}

/* Expanded characteristics already get their intended 25px rhythm from the
   first option group. Remove only the legacy outer 20px wrapper margin so
   the divider-to-content gap does not stack to ~46px. */
.item-page .info .chars.h1-product-accordion >
.h1-product-accordion__toggle[aria-expanded="true"] ~
.h1-product-accordion__panel > .select.flex {
    margin-top: 0;
}

.item-page .info .h1-product-accordion__summary {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    padding: 16px 0 0;
}

.item-page .info .h1-product-accordion__summary-label {
    flex: 0 0 100%;
    margin: 0 0 2px;
    color: #fe272c;
    font-family: 'DrukTextWideCyr-Medium', 'Druk Text Wide Cyr', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.item-page .info .h1-product-accordion__toggle[aria-expanded="false"] + .h1-product-accordion__summary:not([hidden]) {
    display: flex;
}

.item-page .info .h1-product-accordion__chip {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid #1b1b1c;
    border-radius: 5px;
    background: #fff;
    color: #6d6d6d;
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    text-transform: none;
}

.item-page .info .h1-product-accordion__summary--custom {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.item-page .info .h1-product-accordion__summary--custom .h1-product-accordion__summary-label {
    flex: 0 0 auto;
    margin: 0;
    color: #6d6d6d;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

.item-page .info .h1-product-accordion__summary--custom .h1-product-accordion__chip {
    box-sizing: border-box;
    max-width: calc(100% - 112px);
    min-height: 38px;
    padding: 7px 10px 7px 14px;
    border-radius: 100px;
    font-family: 'DrukTextWideCyr-Medium', 'Druk Text Wide Cyr', sans-serif;
    font-size: 12px;
    line-height: 22px;
}

.item-page .info .h1-product-accordion__summary--custom .h1-product-accordion__chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-page .info .h1-product-accordion__chip-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.item-page .info .h1-product-accordion__chip-label {
    color: #6d6d6d;
    font-weight: 500;
}

.item-page .info .h1-product-accordion__chip-value {
    color: #1b1b1c;
    font-weight: 700;
}

.item-page .info .h1-product-accordion__chip-remove {
    display: inline-flex;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #777;
    font: 500 13px/1 Arial, sans-serif;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.item-page .info .h1-product-accordion__chip-remove:hover,
.item-page .info .h1-product-accordion__chip-remove:focus-visible {
    outline: none;
    background: transparent;
    color: #fe272c;
    box-shadow: 0 0 0 2px rgba(254, 39, 44, .15);
}

@media screen and (max-width: 600px) {
    .item-page .info .h1-product-accordion__toggle {
        padding: 0 42px 18px 0;
        font-size: 14px;
        line-height: 18px;
    }

    .item-page .info .h1-product-accordion__summary {
        padding-top: 14px;
    }

    .item-page .info .h1-product-accordion__chip {
        font-size: 12px;
        line-height: 28px;
    }

    .item-page .info .h1-product-accordion__summary--custom {
        gap: 8px;
    }

    .item-page .info .h1-product-accordion__summary--custom .h1-product-accordion__summary-label {
        font-size: 13px;
        line-height: 18px;
    }

    .item-page .info .h1-product-accordion__summary--custom .h1-product-accordion__chip {
        max-width: calc(100% - 98px);
        min-height: 36px;
        padding: 6px 9px 6px 12px;
        font-size: 11px;
        line-height: 22px;
    }
}

/* --- Доработка Kochetov Danil: Честный дробный рейтинг --- */

/* Схлопываем отступ заголовка h1 в карточке */
.item-page .wrap .info h1 {
    margin-bottom: 0 !important;
}

/* Обертка рейтинга (общая для каталога и карточки) */
.rating.star-fractional {
    display: flex !important;
    flex-direction: row !important; /* Гарантируем горизонталь */
    flex-wrap: nowrap !important;   /* Запрещаем перенос на вторую строку */
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 20px !important;
    height: 24px !important;
    width: auto !important;
}

/* Конструктор звездного контейнера */
.stars-container {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    line-height: 1 !important;
    font-size: 0 !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    height: 18px !important; /* Принудительная высота контейнера */
    width: 100px !important;  /* 5 звезд по 18px + отступы */
}

/* Нижний слой (серые звезды) */
.stars-bg {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Верхний слой (золотые звезды) */
.stars-fg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important; /* Главная магия обрезки золота по проценту */
    pointer-events: none !important;
    z-index: 2 !important;
    height: 100% !important;
}

/* ПРИНУДИТЕЛЬНЫЙ ВОЗВРАТ ВИДИМОСТИ И РЯДНОСТИ */
.star-fractional i.star {
    display: inline-block !important; /* Чтобы стояли в ряд */
    width: 18px !important;  /* Ширина одной звезды */
    height: 18px !important; /* Высота одной звезды */
    margin-right: 2px !important;
    font-style: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Скрытый слой кликов Битрикса (для голосования в карточке) */
.hidden-vote-engine {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* Обнуление системных таблиц Битрикса внутри скрытого блока */
.hidden-vote-engine table, 
.hidden-vote-engine td, 
.hidden-vote-engine .iblock-vote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Счетчик голосов (число в скобках) */
.rating-count {
    margin-left: 8px !important;
    font-size: 13px !important;
    color: #888 !important;
    display: inline-block !important;
}

/* End */


/* Start:/local/templates/hockey_one/components/bitrix/catalog.section/another/style.css?17890624502774*/
.index-catalog-block2.h1-another {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background-color: #f1f1f1;
  /* One high-resolution, non-tileable image owns the full-width section.
     Internal wrappers stay transparent, so no overlapping panels or seams
     can be introduced at carousel/container boundaries. */
  background-image: url('/local/templates/hockey_one/img/top-page-line.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.h1-another {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.h1-another > .wrap {
  position: relative;
}

.h1-another__head h2 {
  margin: 0 0 28px;
}

.h1-another .similar__products {
  margin-right: -15px;
  margin-left: -15px;
}

.h1-another .similar__products .slick-list {
  overflow: hidden;
}

.h1-another .similar__products .item {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  height: 565px !important;
  min-height: 565px !important;
}

.h1-another .similar__products .item .pr_n_qua {
  margin-top: auto;
}

.h1-another .controls__slider__wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1170px;
  max-width: 100%;
  min-height: 62px;
  margin: 0 auto;
}

.h1-another .arrows__wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 112px;
  margin-left: auto;
  padding-top: 7px;
}

.h1-another .arrows__wrap .slick-arrow {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto;
}

.h1-another .dots__main__wrapper {
  min-width: 0;
}

@media screen and (max-width: 1023px) {
  .h1-another .similar__products .item {
    height: 570px !important;
    min-height: 570px !important;
  }

  .h1-another .controls__slider__wrap {
    width: auto;
    min-height: 75px;
  }
}

@media screen and (max-width: 768px) {
  .index-catalog-block2.h1-another {
    /* Keep the 1920px texture at its natural grain scale on tall mobile
       sections. One CSS background layer repeats vertically; the source
       texture has transparent, near-matching top/bottom edges. */
    background-size: 1920px 760px;
    background-position: center top;
    background-repeat: repeat-y;
  }

  .h1-another__head h2 {
    margin-bottom: 20px;
  }

  .h1-another .similar__products {
    height: auto;
  }
}

@media screen and (max-width: 600px) {
  .h1-another .similar__products {
    margin-right: -8px;
    margin-left: -8px;
  }

  .h1-another .similar__products .item {
    height: 590px !important;
    min-height: 590px !important;
    margin-right: 8px !important;
    margin-left: 8px !important;
  }

  .h1-another .arrows__wrap {
    min-width: 104px;
  }
}

/* End */
/* /local/templates/hockey_one/components/bitrix/catalog.element/.default/style.css?178906851010936 */
/* /local/templates/hockey_one/components/bitrix/catalog.section/another/style.css?17890624502774 */
