:root {
--special-text-color: #FFFFFF;
--special-bg-color: #E35845;
--special-icon-color: #ffffff;
--newproduct-text-color: #FFFFFF;
--newproduct-bg-color: #457DE3;
--newproduct-icon-color: #ffffff;
--bestseller-text-color: #FFFFFF;
--bestseller-bg-color: #E3AD45;
--bestseller-icon-color: #ffffff;
--popular-text-color: #FFFFFF;
--popular-bg-color: #53A974;
--popular-icon-color: #ffffff;
}

/* codex-category-page-premium-ui-2026-02-28 */
.breadcrumb-box {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid #dfe9f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
}

.breadcrumb-box .breadcrumb {
  margin: 0;
}

.breadcrumb-box .breadcrumb > li > span,
.breadcrumb-box .breadcrumb > li > a span {
  color: #35577f;
}

.breadcrumb-box .breadcrumb > li:last-child > span {
  color: #163b69;
  font-weight: 600;
}

.breadcrumb-box + .row > .col-xs-12.col-sm-12 > h1 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #112a4d;
  font-weight: 800;
}

#column-left .mod-categories {
  border: 1px solid #dfe9f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 10px 24px rgba(20, 52, 103, 0.08);
  padding: 10px;
}

#column-left .mod-cat-list-items {
  margin: 0;
}

#column-left .mod-cat-list-items > li.mc-item {
  border: 1px solid #d8e5f8;
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 8px;
  overflow: hidden;
}

#column-left .mod-cat-list-items > li.mc-item:last-child {
  margin-bottom: 0;
}

#column-left .mod-cat-list-items > li > span {
  padding: 10px 12px;
}

#column-left .mod-cat-list-items a {
  color: #1c4670;
  font-weight: 600;
}

#column-left .mod-cat-list-items .mc-item.is-active-item > span > a {
  color: #174a8f;
}

#column-left .mod-cat-list-items .mc-show-child {
  color: #3e6694;
}

#column-left .mod-cat-list-items .mc-children {
  margin: 0;
  padding: 0 10px 10px;
}

#column-left .mod-cat-list-items .mc-child-item {
  margin-top: 6px;
  border: 1px solid #e4edf9;
  border-radius: 10px;
  background: #f8fbff;
}

#column-left .mod-cat-list-items .mc-child-item > span {
  padding: 8px 10px;
}

#column-left .mod-cat-list-items .mc-child-item.is-active-item {
  border-color: #b7cced;
  background: #eef5ff;
}

#content.ns-smv .view-box {
  border: 1px solid #dfe9f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  padding: 8px 10px;
  margin-bottom: 14px;
}

#content.ns-smv .view-box .localstorage {
  min-height: 44px;
}

#content.ns-smv .view-box .us-category-sort-title {
  color: #1f4a76;
  font-weight: 700;
}

#content.ns-smv .view-box .btn-sort-limit,
#content.ns-smv .view-box .product_list_toolbar .btn-view {
  border: 1px solid #d2e1f7;
  border-radius: 10px;
  background: #ffffff;
  color: #2d5b8e;
}

#content.ns-smv .view-box .product_list_toolbar .btn-view.active {
  border-color: #2f6fdb;
  background: linear-gradient(180deg, #2f6fdb 0%, #2a63c3 100%);
  color: #ffffff;
}

#content.ns-smv .row-flex.category-page {
  margin-left: -7px;
  margin-right: -7px;
}

#content.ns-smv .row-flex.category-page .product-layout {
  padding-left: 7px;
  padding-right: 7px;
  margin-bottom: 14px;
}

#content.ns-smv .row-flex.category-page .product-thumb {
  border: 1px solid #d9e4f5;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 49, 101, 0.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#content.ns-smv .row-flex.category-page .product-thumb:hover {
  transform: translateY(-2px);
  border-color: #abc4e8;
  box-shadow: 0 12px 24px rgba(15, 46, 100, 0.14);
}

#content.ns-smv .row-flex.category-page .product-thumb .image {
  padding: 14px 14px 10px;
  background: radial-gradient(circle at 28% 20%, #ffffff 0%, #f3f7ff 72%);
  border-bottom: 1px solid #ebf1fb;
}

#content.ns-smv .row-flex.category-page .product-thumb .image > a {
  min-height: 184px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#content.ns-smv .row-flex.category-page .product-thumb .image > a img {
  width: 100%;
  max-width: 204px;
  height: auto;
  object-fit: contain;
}

#content.ns-smv .row-flex.category-page .product-thumb .caption {
  padding: 10px 14px 12px;
}

#content.ns-smv .row-flex.category-page .product-thumb .product-name {
  margin-bottom: 8px;
}

#content.ns-smv .row-flex.category-page .product-thumb .product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.65em;
  color: #173355;
  font-size: 15px;
  line-height: 1.33;
  font-weight: 700;
}

#content.ns-smv .row-flex.category-page .product-thumb .product-name a:hover {
  color: #1f5bc2;
}

#content.ns-smv .row-flex.category-page .product-thumb .rating {
  margin-bottom: 8px !important;
}

#content.ns-smv .row-flex.category-page .product-thumb .product-model {
  display: none;
}

#content.ns-smv .row-flex.category-page .product-thumb .product_model_sstatus {
  margin-bottom: 8px !important;
}

#content.ns-smv .row-flex.category-page .product-thumb .stock-status {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

#content.ns-smv .row-flex.category-page .product-thumb .price-actions-box {
  gap: 10px;
  align-items: flex-end;
}

#content.ns-smv .row-flex.category-page .product-thumb .price {
  margin-right: auto;
}

#content.ns-smv .row-flex.category-page .product-thumb .price .price_value {
  color: #14396d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.05;
}

#content.ns-smv .row-flex.category-page .product-thumb .price .price-old .price_value {
  font-size: 15px;
  font-weight: 500;
}

#content.ns-smv .row-flex.category-page .product-thumb .price-tax {
  display: none;
}

#content.ns-smv .row-flex.category-page .product-thumb .cart .btn.btn-general {
  min-height: 40px;
  border-radius: 11px;
  padding: 0 14px;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  border: 0;
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(47, 111, 219, 0.25);
}

#content.ns-smv .row-flex.category-page .product-thumb .cart .btn.btn-general:hover {
  background: linear-gradient(180deg, #2a63c3 0%, #214f9e 100%);
}

#content.ns-smv .row-flex.category-page .product-thumb .stickers-ns {
  top: 9px;
  left: 9px;
}

#content.ns-smv .row-flex.category-page .product-thumb .sticker-ns {
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 9px;
  letter-spacing: .02em;
}

#content.ns-smv .row-flex.category-page .product-thumb .addit-action .btn {
  border: 1px solid #d3e1f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #2f5f98;
  box-shadow: 0 4px 10px rgba(16, 50, 103, 0.12);
}

#content.ns-smv .row-flex.category-page .product-thumb .addit-action .btn:hover {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

#content.ns-smv .row-flex.category-page .us-product-attributes {
  margin-top: 10px;
  border-top: 1px solid #ecf2fb;
  padding: 10px 14px 12px;
  background: #f9fbff;
}

#content.ns-smv .row-flex.category-page .us-product-attributes__item {
  margin-bottom: 6px;
}

#content.ns-smv .row-flex.category-page .us-product-attributes__name {
  color: #375980;
}

#content.ns-smv .row-flex.category-page .us-product-attributes__text {
  color: #18395e;
  font-weight: 500;
}

#content.ns-smv .category_description {
  margin-top: 14px;
  border: 1px solid #dfe9f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  padding: 14px;
}

#content.ns-smv .category_description .p-content {
  color: #27486f;
  font-size: 16px;
  line-height: 1.65;
}

#content.ns-smv .category_description .p-content .otQkpb {
  margin: 22px 0 10px !important;
  font-size: clamp(20px, 1.9vw, 28px) !important;
  line-height: 1.25 !important;
  color: #14365f !important;
  font-weight: 800 !important;
  font-family: inherit !important;
}

#content.ns-smv .category_description .p-content .Y3BBE {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #27486f !important;
}

#content.ns-smv .category_description .p-content .txxDge,
#content.ns-smv .category_description .p-content .rBl3me,
#content.ns-smv .category_description .p-content .Fsg96 {
  display: none !important;
}

#content.ns-smv .category_description .p-content img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px;
  display: block;
  margin: 12px auto;
}

#content.ns-smv .category_description .p-content ul,
#content.ns-smv .category_description .p-content ol {
  margin: 10px 0 14px;
  padding-left: 20px;
}

#content.ns-smv .category_description .p-content li {
  margin-bottom: 8px;
}

.dark-theme .breadcrumb-box {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
}

.dark-theme .breadcrumb-box .breadcrumb > li > span,
.dark-theme .breadcrumb-box .breadcrumb > li > a span {
  color: #9fc1df;
}

.dark-theme .breadcrumb-box + .row > .col-xs-12.col-sm-12 > h1 {
  color: #e8f1ff;
}

.dark-theme #column-left .mod-categories {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme #column-left .mod-cat-list-items > li.mc-item {
  border-color: #324a6d;
  background: #1f2f44;
}

.dark-theme #column-left .mod-cat-list-items a {
  color: #c5daef;
}

.dark-theme #column-left .mod-cat-list-items .mc-child-item {
  border-color: #345173;
  background: #21344d;
}

.dark-theme #content.ns-smv .view-box {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
}

.dark-theme #content.ns-smv .view-box .us-category-sort-title {
  color: #d4e6fb;
}

.dark-theme #content.ns-smv .view-box .btn-sort-limit,
.dark-theme #content.ns-smv .view-box .product_list_toolbar .btn-view {
  border-color: #3a5175;
  background: #21324a;
  color: #c5daef;
}

.dark-theme #content.ns-smv .row-flex.category-page .product-thumb {
  border-color: #324a6d;
  background: #1f2f44;
  box-shadow: none;
}

.dark-theme #content.ns-smv .row-flex.category-page .product-thumb .image {
  background: #22354f;
  border-bottom-color: #2e4669;
}

.dark-theme #content.ns-smv .row-flex.category-page .product-thumb .product-name a {
  color: #edf5ff;
}

.dark-theme #content.ns-smv .row-flex.category-page .product-thumb .price .price_value {
  color: #a3c9ff;
}

.dark-theme #content.ns-smv .row-flex.category-page .product-thumb .addit-action .btn {
  border-color: #3a5175;
  background: rgba(28, 44, 66, 0.9);
  color: #cce0f5;
  box-shadow: none;
}

.dark-theme #content.ns-smv .row-flex.category-page .product-thumb .addit-action .btn:hover {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

.dark-theme #content.ns-smv .row-flex.category-page .us-product-attributes {
  border-top-color: #2e4669;
  background: #1d2d43;
}

.dark-theme #content.ns-smv .category_description {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
}

.dark-theme #content.ns-smv .category_description .p-content {
  color: #c8ddef;
}

.dark-theme #content.ns-smv .category_description .p-content .otQkpb {
  color: #e8f1ff !important;
}

.dark-theme #content.ns-smv .category_description .p-content .Y3BBE {
  color: #c8ddef !important;
}

@media (max-width: 1199px) {
  .breadcrumb-box + .row > .col-xs-12.col-sm-12 > h1 {
    font-size: clamp(22px, 4vw, 30px);
  }

  #column-left .mod-categories {
    border-radius: 14px;
    padding: 8px;
  }

  #content.ns-smv .view-box {
    border-radius: 12px;
    padding: 8px;
  }

  #content.ns-smv .row-flex.category-page .product-layout {
    margin-bottom: 12px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .image > a {
    min-height: 168px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .product-name a {
    font-size: 14px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .price .price_value {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .breadcrumb-box {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .breadcrumb-box + .row > .col-xs-12.col-sm-12 > h1 {
    margin-bottom: 10px;
    font-size: clamp(20px, 6vw, 26px);
  }

  #content.ns-smv .view-box {
    margin-bottom: 10px;
  }

  #content.ns-smv .view-box .localstorage {
    min-height: 40px;
  }

  #content.ns-smv .row-flex.category-page .product-layout {
    margin-bottom: 10px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb {
    border-radius: 12px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .image {
    padding: 10px 10px 8px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .image > a {
    min-height: 150px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .caption {
    padding: 8px 10px 10px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .product-name a {
    font-size: 14px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .price .price_value {
    font-size: 17px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .cart .btn.btn-general {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
  }

  #content.ns-smv .row-flex.category-page .product-thumb .sticker-ns {
    font-size: 10px;
    padding: 2px 8px;
  }

  #content.ns-smv .category_description {
    margin-top: 10px;
    border-radius: 12px;
    padding: 10px;
  }

  #content.ns-smv .category_description .p-content {
    font-size: 14px;
    line-height: 1.55;
  }

  #content.ns-smv .category_description .p-content .otQkpb {
    margin: 16px 0 8px !important;
    font-size: clamp(18px, 5.3vw, 22px) !important;
    line-height: 1.28 !important;
  }

  #content.ns-smv .category_description .p-content .Y3BBE {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* codex-home-category-browser-cards-2026-02-28 */
.home-hits-sales {
  margin: 14px 0 18px;
}

.home-hits-sales .container-module {
  margin-bottom: 0;
  border: 1px solid #dfe9f8;
  border-radius: 20px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 14px 30px rgba(19, 55, 118, 0.08);
}

.home-hits-sales .title-module {
  margin-bottom: 14px;
  padding-right: 92px;
}

.home-hits-sales .title-module span {
  display: block;
  color: #112a4d !important;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.home-hits-sales .d-flex {
  position: relative;
}

.home-hits-sales .swiper.swiper-module {
  overflow: visible;
  opacity: 1 !important;
  visibility: visible !important;
}

.home-hits-sales .swiper-wrapper {
  align-items: stretch;
}

.home-hits-sales .swiper-mod-navigation {
  top: 4px;
  right: 2px;
  display: flex;
  gap: 8px;
}

.home-hits-sales .swiper-mod-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid #c9dbf6;
  border-radius: 10px;
  background: #ffffff;
  color: #2a63c3;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.home-hits-sales .swiper-mod-arrow:hover {
  border-color: #9ebdea;
  background: #ecf3ff;
  color: #194791;
}

.home-hits-sales .swiper-mod-arrow.swiper-button-disabled {
  opacity: 0.42;
}

.home-hits-sales .item {
  height: auto;
}

.home-hits-sales .product-thumb {
  border: 1px solid #d9e4f5;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 49, 101, 0.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-hits-sales .product-thumb:hover {
  border-color: #abc4e8;
  box-shadow: 0 12px 24px rgba(15, 46, 100, 0.14);
  transform: translateY(-2px);
}

.home-hits-sales .product-thumb .image {
  padding: 14px 14px 10px;
  background: radial-gradient(circle at 28% 20%, #ffffff 0%, #f3f7ff 72%);
  border-bottom: 1px solid #ebf1fb;
}

.home-hits-sales .product-thumb .image > a {
  min-height: 184px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hits-sales .product-thumb .image > a img {
  width: 100%;
  max-width: 184px;
  height: auto;
  object-fit: contain;
}

.home-hits-sales .product-thumb .caption {
  padding: 10px 14px 14px;
}

.home-hits-sales .product-thumb .product-name {
  margin-bottom: 8px;
}

.home-hits-sales .product-thumb .product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.65em;
  color: #173355;
  font-size: 15px;
  line-height: 1.32;
  font-weight: 700;
}

.home-hits-sales .product-thumb .product-name a:hover {
  color: #1f5bc2;
}

.home-hits-sales .product-thumb .rating {
  margin-bottom: 8px !important;
}

.home-hits-sales .product-thumb .product-model {
  display: none;
}

.home-hits-sales .product-thumb .product_model_sstatus {
  margin-bottom: 8px !important;
}

.home-hits-sales .product-thumb .stock-status {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.home-hits-sales .product-thumb .quantity_plus_minus {
  display: none !important;
}

.home-hits-sales .product-thumb .price-actions-box {
  gap: 10px;
  align-items: flex-end;
}

.home-hits-sales .product-thumb .price {
  margin-right: auto;
}

.home-hits-sales .product-thumb .price .price_value {
  color: #14396d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.05;
}

.home-hits-sales .product-thumb .price .price-old .price_value {
  font-size: 15px;
  font-weight: 500;
}

.home-hits-sales .product-thumb .price-tax {
  display: none;
}

.home-hits-sales .product-thumb .cart {
  margin-left: auto;
}

.home-hits-sales .product-thumb .cart .btn.btn-general {
  min-height: 40px;
  border-radius: 11px;
  padding: 0 14px;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  border: 0;
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(47, 111, 219, 0.25);
}

.home-hits-sales .product-thumb .cart .btn.btn-general:hover {
  background: linear-gradient(180deg, #2a63c3 0%, #214f9e 100%);
}

.home-hits-sales .product-thumb .stickers-ns {
  top: 9px;
  left: 9px;
}

.home-hits-sales .product-thumb .sticker-ns {
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 9px;
  letter-spacing: .02em;
}

.dark-theme .home-hits-sales .container-module {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme .home-hits-sales .title-module span {
  color: #e8f1ff !important;
}

.dark-theme .home-hits-sales .swiper-mod-arrow {
  border-color: #3a5175;
  background: #21324a;
  color: #c5daef;
}

.dark-theme .home-hits-sales .product-thumb {
  border-color: #324a6d;
  background: #1f2f44;
  box-shadow: none;
}

.dark-theme .home-hits-sales .product-thumb .image {
  background: #22354f;
  border-bottom-color: #2e4669;
}

.dark-theme .home-hits-sales .product-thumb .product-name a {
  color: #edf5ff;
}

.dark-theme .home-hits-sales .product-thumb .price .price_value {
  color: #a3c9ff;
}

@media (max-width: 1199px) {
  .home-hits-sales {
    margin: 10px 0 16px;
  }

  .home-hits-sales .container-module {
    border-radius: 16px;
    padding: 14px 14px 10px;
  }

  .home-hits-sales .title-module {
    padding-right: 84px;
  }

  .home-hits-sales .title-module span {
    font-size: clamp(22px, 3.7vw, 30px);
  }

  .home-hits-sales .product-thumb .image > a {
    min-height: 166px;
  }

  .home-hits-sales .product-thumb .product-name a {
    font-size: 14px;
  }

  .home-hits-sales .product-thumb .price .price_value {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .home-hits-sales {
    margin: 8px 0 12px;
  }

  .home-hits-sales .container-module {
    border-radius: 12px;
    padding: 12px 10px 8px;
  }

  .home-hits-sales .title-module {
    margin-bottom: 10px;
    padding-right: 0;
  }

  .home-hits-sales .title-module span {
    font-size: clamp(20px, 6vw, 26px);
  }

  .home-hits-sales .product-thumb {
    border-radius: 12px;
  }

  .home-hits-sales .product-thumb .image {
    padding: 10px 10px 8px;
  }

  .home-hits-sales .product-thumb .image > a {
    min-height: 150px;
  }

  .home-hits-sales .product-thumb .caption {
    padding: 8px 10px 10px;
  }

  .home-hits-sales .product-thumb .product-name a {
    font-size: 14px;
  }

  .home-hits-sales .product-thumb .price .price_value {
    font-size: 17px;
  }

  .home-hits-sales .product-thumb .cart .btn.btn-general {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
  }

  .home-hits-sales .product-thumb .stickers-ns {
    top: 7px;
    left: 7px;
  }

  .home-hits-sales .product-thumb .sticker-ns {
    font-size: 10px;
    padding: 2px 8px;
  }

  .home-hits-sales .swiper-mod-navigation {
    display: none;
  }
}

.home-category-browser {
  --hcb-accent: #2f6fdb;
  --hcb-accent-dark: #163f8f;
  --hcb-tab-bg: #f4f8ff;
  --hcb-tab-border: #d4e2f6;
  --hcb-card-border: #d9e4f5;
  --hcb-card-bg: #ffffff;
  --hcb-media-bg: #f3f7ff;
  --hcb-text-main: #112a4d;
  --hcb-text-muted: #456487;
  margin: 14px 0 24px;
  padding: 18px 18px 16px;
  border: 1px solid #dfe9f8;
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 14px 30px rgba(19, 55, 118, 0.08);
}

.home-category-browser__head {
  margin-bottom: 14px;
}

.home-category-browser__title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--hcb-text-main);
  font-weight: 800;
}

.home-category-browser__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.home-category-browser__tab {
  appearance: none;
  border: 1px solid var(--hcb-tab-border);
  background: var(--hcb-tab-bg);
  color: #1b4874;
  border-radius: 12px;
  min-height: 46px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.home-category-browser__tab:hover,
.home-category-browser__tab:focus-visible {
  outline: 0;
  border-color: #a9c3ea;
  background: #ebf3ff;
  color: #133a67;
  transform: translateY(-1px);
}

.home-category-browser__tab.is-active {
  border-color: var(--hcb-accent);
  background: linear-gradient(180deg, #2f6fdb 0%, #2a63c3 100%);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(47, 111, 219, 0.28);
}

.home-category-browser__pane[hidden] {
  display: none !important;
}

.home-category-browser__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-category-browser__card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 15px;
  border: 1px solid var(--hcb-card-border);
  background: var(--hcb-card-bg);
  text-decoration: none;
  color: var(--hcb-text-main);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-category-browser__card:hover,
.home-category-browser__card:focus-visible {
  text-decoration: none;
  color: var(--hcb-text-main);
  transform: translateY(-2px);
  border-color: #adc4e8;
  box-shadow: 0 12px 24px rgba(15, 46, 100, 0.14);
}

.home-category-browser__media {
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 25% 20%, #ffffff 0%, var(--hcb-media-bg) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px 10px;
}

.home-category-browser__media img {
  width: 100%;
  height: 100%;
  max-width: 230px;
  object-fit: contain;
}

.home-category-browser__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 14px 12px;
}

.home-category-browser__name {
  margin-bottom: 9px;
  color: #173355;
  font-size: 16px;
  line-height: 1.34;
  font-weight: 700;
}

.home-category-browser__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--hcb-text-muted);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
}

.home-category-browser__meta .up-icon-angle-right {
  font-size: 12px;
  color: var(--hcb-accent-dark);
}

.home-category-browser__empty {
  grid-column: 1 / -1;
  border: 1px solid #d7e5fb;
  border-radius: 12px;
  background: #f3f8ff;
  color: #35587f;
  padding: 14px;
  font-size: 14px;
}

.dark-theme .home-category-browser {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme .home-category-browser__title {
  color: #e8f1ff;
}

.dark-theme .home-category-browser__tab {
  border-color: #3a5175;
  background: #21324a;
  color: #c5daef;
}

.dark-theme .home-category-browser__tab:hover,
.dark-theme .home-category-browser__tab:focus-visible {
  border-color: #4a6794;
  background: #26405f;
  color: #e8f2ff;
}

.dark-theme .home-category-browser__tab.is-active {
  border-color: #3b8ef3;
  background: linear-gradient(180deg, #2f6fdb 0%, #255cbc 100%);
  color: #ffffff;
}

.dark-theme .home-category-browser__card {
  border-color: #324a6d;
  background: #1f2f44;
  color: #e2edfa;
}

.dark-theme .home-category-browser__media {
  background: #22354f;
}

.dark-theme .home-category-browser__name {
  color: #eef5ff;
}

.dark-theme .home-category-browser__meta {
  color: #a8c5e4;
}

.dark-theme .home-category-browser__meta .up-icon-angle-right {
  color: #89b6eb;
}

@media (min-width: 1600px) {
  .home-category-browser__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1399px) {
  .home-category-browser__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .home-category-browser {
    margin-top: 10px;
    margin-bottom: 16px;
    padding: 14px 14px 12px;
    border-radius: 16px;
  }

  .home-category-browser__title {
    font-size: clamp(22px, 4vw, 30px);
  }

  .home-category-browser__tab {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 13px;
  }

  .home-category-browser__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .home-category-browser__name {
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .home-category-browser__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-category-browser {
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 12px 10px 10px;
    border-radius: 14px;
  }

  .home-category-browser__head {
    margin-bottom: 10px;
  }

  .home-category-browser__title {
    font-size: clamp(20px, 6vw, 26px);
  }

  .home-category-browser__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    margin: 0 -2px 12px;
    padding: 0 2px 4px;
    gap: 8px;
  }

  .home-category-browser__tabs::-webkit-scrollbar {
    display: none;
  }

  .home-category-browser__tabs.is-scrollable {
    padding-right: 46px;
  }

  .home-category-browser__tabs.is-scrollable::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 4px;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(248, 251, 255, 0) 0%, rgba(248, 251, 255, 0.88) 54%, #f8fbff 100%);
    border-radius: 0 10px 10px 0;
    opacity: 1;
    transition: opacity .18s ease;
  }

  .home-category-browser__tabs.is-scrollable::before {
    content: "Swipe \2192";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #355f9e;
    background: #eef4ff;
    border: 1px solid #cddcf3;
    border-radius: 999px;
    padding: 4px 7px;
    opacity: 1;
    transition: opacity .18s ease;
  }

  html[lang^='uk'] .home-category-browser__tabs.is-scrollable::before {
    content: "\421\432\430\439\43f \2192";
  }

  html[lang^='ru'] .home-category-browser__tabs.is-scrollable::before {
    content: "\421\432\430\439\43f \2192";
  }

  .home-category-browser__tabs.is-scrollable.is-at-end::before,
  .home-category-browser__tabs.is-scrollable.is-at-end::after {
    opacity: 0;
  }

  .home-category-browser__tabs.is-scrollable:not(.is-start)::before {
    opacity: 0;
  }

  .home-category-browser__tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .home-category-browser__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-category-browser__media {
    padding: 10px 8px 4px;
  }

  .home-category-browser__body {
    padding: 6px 9px 9px;
  }

  .home-category-browser__name {
    font-size: 14px;
    margin-bottom: 7px;
  }

  .home-category-browser__meta {
    font-size: 12px;
  }
}

@media (max-width: 575px) {
  .home-category-browser__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-category-browser__tab,
  .home-category-browser__card {
    transition: none;
  }
}
.light-theme {
--up-color-price: #000000;
--up-color-sale-price: #C5C5C5;
--up-color-status-in-stock: #84C1A8;
--up-color-status-out-of-stock: #E60202;
--up-color-link: #3572E1;
--up-color-link-hover: #1F60D7;
--up-color-rating-active: #F3AB07;
--up-color-rating-passive: #C5C5C5;
--up-bg-menu: #FFFFFF;
--up-bg-menu-hover: #EAEAEA;
--up-color-menu: #000000;
--up-color-menu-hover: #000000;
--up-border-color-menu: #F6F6F6;
--up-border-color-menu-hover: #EAEAEA;
--up-bg-header-total-cw: #E3C045;
--up-color-header-total-cw: #FFFFFF;
--up-bg-header-cart: #0A0A0A;
--up-color-header-cart: #FFFFFF;
--up-bg-header-total-cart: #3F78E0;
--up-color-header-total-cart: #FFFFFF;
--up-bg-mod-add-to-cart: #0A0A0A;
--up-color-mod-add-to-cart: #FFFFFF;
--up-bg-mod-add-to-cart-hover: #E3C045;
--up-color-mod-add-to-cart-hover: #0A0A0A;
--up-bg-mod-add-to-cart-hover-block: #0A0A0A;
--up-color-mod-add-to-cart-hover-block: #FFFFFF;
--up-bc-mod-add-to-cart: transparent;
--up-bc-mod-add-to-cart-hover: transparent;
--up-bc-mod-add-to-cart-hover-block: transparent;
--up-bg-mod-dop-btn: #F8F8F8;
--up-color-mod-dop-btn: #000000;
--up-bg-mod-dop-btn-hover: #EAEAEA;
--up-color-mod-dop-btn-hover: #000000;
--up-bg-scroll-top: #0A0A0A;
--up-color-icon-scroll-top: #FFFFFF;
--up-bg-scroll-top-hover: #1B1B1B;
--up-color-icon-scroll-top-hover: #FFFFFF;
--up-color-progress-scroll-top: #457DE3;
--up-color-progress-scroll-top-hover: #457DE3;
--up-bg-pp-add-to-cart: #0A0A0A;
--up-color-pp-add-to-cart: #FFFFFF;
--up-bg-pp-add-to-cart-hover: #E3C045;
--up-color-pp-add-to-cart-hover: #0A0A0A;
--up-bc-pp-add-to-cart: transparent;
--up-bc-pp-add-to-cart-hover: transparent;
--up-bg-pp-fastorder: #E3C045;
--up-color-pp-fastorder: #000000;
--up-bg-pp-fastorder-hover: #000000;
--up-color-pp-fastorder-hover: #FFFFFF;
--up-bc-pp-fastorder: transparent;
--up-bc-pp-fastorder-hover: transparent;
--up-bg-pp-compare: #F8F8F8;
--up-color-pp-compare: #000000;
--up-bg-pp-compare-hover: #EAEAEA;
--up-color-pp-compare-hover: #000000;
--up-bg-pp-wishlist: #F8F8F8;
--up-color-pp-wishlist: #000000;
--up-bg-pp-wishlist-hover: #EAEAEA;
--up-color-pp-wishlist-hover: #000000;
--up-bg-btn-primary: #1d52b8;
--up-color-btn-primary: #FFFFFF;
--up-bg-btn-primary-hover: #3b82f6;
--up-color-btn-primary-hover: #FFFFFF;
--up-bg-btn-default: #F8F8F8;
--up-color-btn-default: #000000;
--up-bg-btn-default-hover: #EAEAEA;
--up-color-btn-default-hover: #000000;
--up-bg-btn-black: #0A0A0A;
--up-color-btn-black: #FFFFFF;
--up-bg-btn-black-hover: #0A0A0A;
--up-color-btn-black-hover: #E3C045;
--up-bg-fix-bar: #06040A;
--up-bg-btn-fix-bar: #1B1B1B;
--up-bc-fix-bar: #313131;
--up-color-icon-btn-fix-bar: #FFFFFF;
--up-bg-total-fix-bar: #3572E1;
--up-color-total-fix-bar: #FFFFFF;
}
.dark-theme {
--up-color-price: #FFFFFF;
--up-color-sale-price: #F84147;
--up-color-status-in-stock: #9AC872;
--up-color-status-out-of-stock: #E65A2E;
--up-color-link: #3572E1;
--up-color-link-hover: #1F60D7;
--up-color-rating-active: #FFB249;
--up-color-rating-passive: #B1B1B1;
--up-bg-menu: #0F0F0F;
--up-bg-menu-hover: #1D1D1D;
--up-color-menu: #B1B1B1;
--up-color-menu-hover: #B1B1B1;
--up-border-color-menu: transparent;
--up-border-color-menu-hover: transparent;
--up-bg-header-total-cw: #E3C045;
--up-color-header-total-cw: #FFFFFF;
--up-bg-header-cart: #0A0A0A;
--up-color-header-cart: #FFFFFF;
--up-bg-header-total-cart: #3F78E0;
--up-color-header-total-cart: #FFFFFF;
--up-bg-mod-add-to-cart: #FFFFFF;
--up-color-mod-add-to-cart: #000000;
--up-bg-mod-add-to-cart-hover: #3F78E0;
--up-color-mod-add-to-cart-hover: #FFFFFF;
--up-bg-mod-add-to-cart-hover-block: #FFFFFF;
--up-color-mod-add-to-cart-hover-block: #000000;
--up-bc-mod-add-to-cart: transparent;
--up-bc-mod-add-to-cart-hover: transparent;
--up-bc-mod-add-to-cart-hover-block: transparent;
--up-bg-mod-dop-btn: #F8F8F8;
--up-color-mod-dop-btn: #000000;
--up-bg-mod-dop-btn-hover: #EAEAEA;
--up-color-mod-dop-btn-hover: #000000;
--up-bg-scroll-top: #0A0A0A;
--up-color-icon-scroll-top: #FFFFFF;
--up-bg-scroll-top-hover: #1B1B1B;
--up-color-icon-scroll-top-hover: #FFFFFF;
--up-color-progress-scroll-top: #457DE3;
--up-color-progress-scroll-top-hover: #457DE3;
--up-bg-pp-add-to-cart: #3F78E0;
--up-color-pp-add-to-cart: #FFFFFF;
--up-bg-pp-add-to-cart-hover: #457DE3;
--up-color-pp-add-to-cart-hover: #FFFFFF;
--up-bc-pp-add-to-cart: transparent;
--up-bc-pp-add-to-cart-hover: transparent;
--up-bg-pp-fastorder: #0F0F0F;
--up-color-pp-fastorder: #3F78E0;
--up-bg-pp-fastorder-hover: #3F78E0;
--up-color-pp-fastorder-hover: #FFFFFF;
--up-bc-pp-fastorder: #3F78E0;
--up-bc-pp-fastorder-hover: #3F78E0;
--up-bg-pp-compare: #1D1D1D;
--up-color-pp-compare: #B1B1B1;
--up-bg-pp-compare-hover: #2F2F2F;
--up-color-pp-compare-hover: #FFFFFF;
--up-bg-pp-wishlist: #1D1D1D;
--up-color-pp-wishlist: #B1B1B1;
--up-bg-pp-wishlist-hover: #2F2F2F;
--up-color-pp-wishlist-hover: #FFFFFF;
--up-bg-btn-primary: #457DE3;
--up-color-btn-primary: #FFFFFF;
--up-bg-btn-primary-hover: #3572E1;
--up-color-btn-primary-hover: #FFFFFF;
--up-bg-btn-default: #0F0F0F;
--up-color-btn-default: #FFFFFF;
--up-bg-btn-default-hover: #1D1D1D;
--up-color-btn-default-hover: #FFFFFF;
--up-bg-btn-black: #1D1D1D;
--up-color-btn-black: #FFFFFF;
--up-bg-btn-black-hover: #2F2F2F;
--up-color-btn-black-hover: #FFFFFF;
--up-bg-fix-bar: #0A0A0A;
--up-bg-btn-fix-bar: #1B1B1B;
--up-bc-fix-bar: #313131;
--up-color-icon-btn-fix-bar: #FFFFFF;
--up-bg-total-fix-bar: #3572E1;
--up-color-total-fix-bar: #FFFFFF;
}
.sticker-ns {float:left;}
.product-thumb .action-timer {
	flex-direction: column;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
@media (min-width: 600px){
.product-grid .product-thumb .cart .btn-general,
.container-module .product-thumb .cart .btn-general {padding: 5px;}
.product-grid .product-thumb .cart .btn-general span.text-cart-add,
.container-module .product-thumb .cart .btn-general span.text-cart-add {display: none;}
}

/* codex-home-grid-fix-2026-02-27 */
@media (max-width: 767px) {
  .container-module .latest_gv.row-flex {
    margin-left: -5px;
    margin-right: -5px;
  }
  .container-module .latest_gv > .item {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* codex-home-hide-top-and-dedup-reviews-2026-02-27 */
/* Hide custom top zone created in previous iterations */
.home-usp-strip,
.home-seo-heading,
.home-rootcats,
.home-sidepromo {
  display: none !important;
}
/* Remove duplicated bottom reviews block in pos15 (keep earlier reviews module) */
.box-bg-full.bg_mode_pos_15 .pos15 > .container-module:first-child {
  display: none !important;
}

/* codex-home-top-no-visible-h1-2026-02-28 */
/* Competitor-like top: clean category nav, H1 kept for SEO but not visually dominant */
.home-usp-strip,
.home-rootcats {
  display: block !important;
}

.home-sidepromo {
  display: none !important;
}

.home-seo-heading {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  height: 0;
}

.home-seo-heading__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-usp-strip {
  margin: 8px auto 10px;
}

.home-usp-strip__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-usp-strip__item {
  margin: 0 !important;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e3ebf8;
  background: #f7faff;
  color: #5d7190;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.home-usp-strip__item::before,
.home-usp-strip__item + .home-usp-strip__item {
  content: none !important;
  border: 0 !important;
}

.home-rootcats {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px auto 22px;
  padding: 14px 16px;
  border: 1px solid #e7effa;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.home-rootcats::before,
.home-rootcats::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 150px;
  height: 70px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at center, rgba(53, 114, 225, 0.20) 0%, rgba(53, 114, 225, 0) 72%);
}

.home-rootcats::before {
  left: -96px;
}

.home-rootcats::after {
  right: -96px;
}

.home-rootcats__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #d8e6fb;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(25, 85, 180, 0.08);
  color: #1a3d73;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.home-rootcats__btn:hover,
.home-rootcats__btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(25, 85, 180, 0.14);
  border-color: #bcd4f8;
  color: #12366b;
  text-decoration: none;
}

.dark-theme .home-rootcats {
  border-color: #2a3852;
  background: linear-gradient(180deg, #151f2f 0%, #121a28 100%);
}

.dark-theme .home-rootcats::before,
.dark-theme .home-rootcats::after {
  background: radial-gradient(circle at center, rgba(73, 139, 255, 0.30) 0%, rgba(73, 139, 255, 0) 75%);
}

.dark-theme .home-rootcats__btn {
  border-color: #334968;
  background: #1a2740;
  color: #d8e6ff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.dark-theme .home-rootcats__btn:hover,
.dark-theme .home-rootcats__btn:focus {
  border-color: #4b6fa8;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1199px) {
  .home-rootcats::before,
  .home-rootcats::after {
    display: none;
  }
}

@media (max-width: 991px) {
  .home-usp-strip {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .home-rootcats {
    margin: 8px auto 16px;
    padding: 10px;
    gap: 8px;
    border-radius: 14px;
  }

  .home-rootcats__btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 138px;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }

  .home-rootcats__btn:nth-child(3) {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .home-rootcats__btn {
    flex-basis: 100%;
  }
}

/* codex-home-brand-solid-and-font-2026-02-28 */
/* Global typography refresh: local Montserrat files, no external CDN */
@font-face {
  font-family: 'Montserrat MSG';
  src: url('fonts/montserrat-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat MSG';
  src: url('fonts/montserrat-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat MSG';
  src: url('fonts/montserrat-bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html,
body,
input,
select,
textarea,
button {
  font-family: 'Montserrat MSG', 'Exo 2', sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.module-title,
.product-name,
.btn,
.chm-btn {
  font-family: 'Montserrat MSG', 'Exo 2', sans-serif;
}

/* Homepage top zone: stricter premium look */
.home-usp-strip {
  display: none !important;
}

.home-sidepromo {
  display: none !important;
}

.home-seo-heading {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  height: 0;
}

.home-seo-heading__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-rootcats {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 960px;
  margin: 12px auto 24px;
  padding: 9px;
  border: 1px solid #e4ebf6;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(17, 33, 62, 0.06);
}

.home-rootcats::before,
.home-rootcats::after {
  content: none !important;
  display: none !important;
}

.home-rootcats__btn {
  flex: 1 1 0;
  min-width: 180px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #f5f8fd;
  color: #182b4d;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home-rootcats__btn:first-child {
  background: #3f78e0;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(47, 104, 201, 0.26);
}

.home-rootcats__btn:hover,
.home-rootcats__btn:focus {
  border-color: #ccdbf4;
  background: #ebf2fd;
  color: #11284b;
  text-decoration: none;
}

.home-rootcats__btn:first-child:hover,
.home-rootcats__btn:first-child:focus {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

.dark-theme .home-rootcats {
  border-color: #2f425f;
  background: #121b2b;
  box-shadow: none;
}

.dark-theme .home-rootcats__btn {
  background: #1a273e;
  color: #d8e6ff;
  border-color: transparent;
}

.dark-theme .home-rootcats__btn:first-child {
  background: #3f78e0;
  color: #ffffff;
}

.dark-theme .home-rootcats__btn:hover,
.dark-theme .home-rootcats__btn:focus {
  border-color: #406089;
  background: #223453;
  color: #ffffff;
}

.dark-theme .home-rootcats__btn:first-child:hover,
.dark-theme .home-rootcats__btn:first-child:focus {
  border-color: #2f6fdb;
  background: #2f6fdb;
}

@media (max-width: 991px) {
  .home-rootcats {
    max-width: 100%;
    margin: 10px auto 16px;
  }
}

@media (max-width: 767px) {
  .home-rootcats {
    padding: 8px;
    gap: 7px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(17, 33, 62, 0.07);
  }

  .home-rootcats__btn {
    flex: 1 1 calc(50% - 7px);
    min-width: 132px;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  .home-rootcats__btn:nth-child(3) {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .home-rootcats__btn {
    flex-basis: 100%;
  }
}

/* codex-home-premium-tabs-grid-ui-2026-02-28 */
/* Premium category switcher under header, connected to latest grids */
.home-rootcats {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1140px;
  margin: 10px auto 26px;
  padding: 10px;
  border: 1px solid #e2eaf8;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(16, 31, 57, 0.06);
}

.home-rootcats::before,
.home-rootcats::after {
  content: none !important;
  display: none !important;
}

.home-rootcats__btn,
.home-rootcats__btn:first-child {
  flex: 1 1 0;
  min-width: 198px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid #dce7f8;
  background: #f4f8ff;
  color: #152a4d;
  box-shadow: none;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.home-rootcats__btn:hover,
.home-rootcats__btn:focus,
.home-rootcats__btn:first-child:hover,
.home-rootcats__btn:first-child:focus {
  background: #edf4ff;
  border-color: #c7d8f5;
  color: #0f264b;
  text-decoration: none;
}

.home-rootcats__btn-ic {
  font-size: 18px;
  line-height: 1;
  opacity: 0.92;
}

.home-rootcats__btn-tx {
  display: inline-block;
  line-height: 1.2;
}

.home-rootcats__btn.is-active {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(47, 111, 219, 0.28);
}

.home-rootcats__btn.is-active .home-rootcats__btn-ic {
  opacity: 1;
}

.dark-theme .home-rootcats {
  border-color: #2d425f;
  background: #111a2a;
  box-shadow: none;
}

.dark-theme .home-rootcats__btn,
.dark-theme .home-rootcats__btn:first-child {
  border-color: #324a6a;
  background: #19273f;
  color: #d8e6ff;
}

.dark-theme .home-rootcats__btn:hover,
.dark-theme .home-rootcats__btn:focus,
.dark-theme .home-rootcats__btn:first-child:hover,
.dark-theme .home-rootcats__btn:first-child:focus {
  border-color: #45638b;
  background: #223554;
  color: #ffffff;
}

.dark-theme .home-rootcats__btn.is-active {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.home-grid-switch-ready .js-home-grid-module {
  display: none;
}

.home-grid-switch-ready .js-home-grid-module.is-active {
  display: block;
}

.home-grid-switch-ready .js-home-grid-module .title-module {
  display: none;
}

.home-grid-switch-ready .js-home-grid-module .latest_gv {
  margin-top: 0;
}

@media (max-width: 991px) {
  .home-rootcats {
    margin: 8px auto 18px;
    border-radius: 16px;
  }

  .home-rootcats__btn,
  .home-rootcats__btn:first-child {
    min-width: 164px;
    min-height: 50px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .home-rootcats {
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
  }

  .home-rootcats__btn,
  .home-rootcats__btn:first-child {
    flex: 1 1 calc(50% - 8px);
    min-width: 132px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 13px;
    padding: 10px 12px;
  }

  .home-rootcats__btn:nth-child(3) {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .home-rootcats__btn,
  .home-rootcats__btn:first-child {
    flex-basis: 100%;
  }
}

/* codex-header-menu-icons-style-2026-02-28 */
#menu-vertical-list > li > a.parent-link .item-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
}

#menu-vertical-list > li > a.parent-link .msg-menu-cat-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #d8e3f6;
  background: #f4f8ff;
  color: #2f6fdb;
  font-size: 12px;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#menu-vertical-list > li > a.parent-link .msg-menu-cat-text {
  line-height: 1.25;
}

#menu-vertical-list > li.menu-open > a.parent-link .msg-menu-cat-icon,
#menu-vertical-list > li > a.parent-link:hover .msg-menu-cat-icon,
#menu-vertical-list > li > a.parent-link.hover .msg-menu-cat-icon {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

.dark-theme #menu-vertical-list > li > a.parent-link .msg-menu-cat-icon {
  background: #1a2740;
  border-color: #32496b;
  color: #8db4ff;
}

.dark-theme #menu-vertical-list > li.menu-open > a.parent-link .msg-menu-cat-icon,
.dark-theme #menu-vertical-list > li > a.parent-link:hover .msg-menu-cat-icon,
.dark-theme #menu-vertical-list > li > a.parent-link.hover .msg-menu-cat-icon {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

@media (max-width: 1199px) {
  #menu-vertical-list > li > a.parent-link .item-name {
    gap: 8px;
  }

  #menu-vertical-list > li > a.parent-link .msg-menu-cat-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
  }
}

/* codex-leaf-menu-icon-style-2026-03-29: make leaf (no-dropdown) items look same as parent-link */
#menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready .item-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready .msg-menu-cat-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #d8e3f6;
  background: #f4f8ff;
  color: #2f6fdb;
  font-size: 12px;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready .msg-menu-cat-text {
  line-height: 1.25;
}

#menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready:hover .msg-menu-cat-icon {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

.dark-theme #menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready .msg-menu-cat-icon {
  background: #1a2740;
  border-color: #32496b;
  color: #8db4ff;
}

.dark-theme #menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready:hover .msg-menu-cat-icon {
  background: #2f6fdb;
  border-color: #2f6fdb;
  color: #ffffff;
}

@media (max-width: 1199px) {
  #menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready .item-name {
    gap: 8px;
  }
  #menu-vertical-list > li > a.dropdown-img.msg-menu-icon-ready .msg-menu-cat-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
  }
}

/* codex-header-menu-subicons-style-2026-02-28 */
/* Catalog button with stable text label */
.btn-menu-top.msg-menu-btn-ready {
  gap: 8px;
}

.btn-menu-top.msg-menu-btn-ready .text-category {
  display: none !important;
}

.btn-menu-top.msg-menu-btn-ready .msg-menu-btn-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: inherit;
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .btn-menu-top.msg-menu-btn-ready .msg-menu-btn-label {
    font-size: 12px;
  }
}

/* Subcategory icons inside mega menu */
#menu-vertical-list .ns-dd .nsmenu-haschild > li > a,
#menu-vertical-list .ns-dd .nsmenu-ischild-simple > ul > li > a,
#menu-vertical-list .ns-dd .child_4level_simple > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#menu-vertical-list .msg-menu-sub-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #dbe7fb;
  background: #f3f8ff;
  color: #2f6fdb;
  font-size: 10px;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#menu-vertical-list .nsmenu-haschild > li > a:hover .msg-menu-sub-icon,
#menu-vertical-list .nsmenu-ischild-simple > ul > li > a:hover .msg-menu-sub-icon,
#menu-vertical-list .child_4level_simple > ul > li > a:hover .msg-menu-sub-icon,
#menu-vertical-list .nsmenu-haschild > li > a.hover .msg-menu-sub-icon,
#menu-vertical-list .nsmenu-ischild-simple > ul > li > a.hover .msg-menu-sub-icon,
#menu-vertical-list .child_4level_simple > ul > li > a.hover .msg-menu-sub-icon {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

.dark-theme #menu-vertical-list .msg-menu-sub-icon {
  border-color: #344b6e;
  background: #1a2840;
  color: #8db4ff;
}

.dark-theme #menu-vertical-list .nsmenu-haschild > li > a:hover .msg-menu-sub-icon,
.dark-theme #menu-vertical-list .nsmenu-ischild-simple > ul > li > a:hover .msg-menu-sub-icon,
.dark-theme #menu-vertical-list .child_4level_simple > ul > li > a:hover .msg-menu-sub-icon,
.dark-theme #menu-vertical-list .nsmenu-haschild > li > a.hover .msg-menu-sub-icon,
.dark-theme #menu-vertical-list .nsmenu-ischild-simple > ul > li > a.hover .msg-menu-sub-icon,
.dark-theme #menu-vertical-list .child_4level_simple > ul > li > a.hover .msg-menu-sub-icon {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

/* Fill free area in opened desktop catalog with trust chips */
#menu-vertical-list > li.msg-menu-service-cards {
  display: none !important;
}

@media (min-width: 1200px) {
  .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards {
    display: block !important;
    height: auto !important;
    align-items: stretch !important;
    padding: 10px 10px 12px;
    border-top: 1px dashed var(--up-border-color);
  }

  .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards .msg-menu-service-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards .msg-menu-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid #d9e6fb;
    background: #f6f9ff;
    color: #355a94;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
  }

  .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards .msg-menu-chip i {
    color: #2f6fdb;
    font-size: 11px;
  }

  .dark-theme .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards {
    border-top-color: #314865;
  }

  .dark-theme .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards .msg-menu-chip {
    border-color: #344a6b;
    background: #18263f;
    color: #c5d8ff;
  }

  .dark-theme .menu-header-box.mm_open_hp #menu-vertical-list > li.msg-menu-service-cards .msg-menu-chip i {
    color: #8db4ff;
  }
}

/* codex-menu-rect-and-logo-symmetry-2026-02-28 */
/* Make catalog button rectangular and aligned with logo */
.btn-menu-top.msg-menu-btn-ready {
  overflow: visible;
}

.btn-menu-top.msg-menu-btn-ready .up-icon-angle-down {
  display: none !important;
}

@media (min-width: 992px) {
  .up-header__left {
    gap: 10px;
  }

  .up-header__left #logo.up-header__logo-top {
    margin-right: 0 !important;
    display: flex;
    align-items: center;
  }

  .up-header__left #logo.up-header__logo-top + .box-menu-top {
    margin-left: 0;
  }

  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready {
    width: auto;
    min-width: 124px;
    height: 50px;
    padding: 0 14px;
    border-radius: 12px;
    justify-content: center;
    gap: 8px;
  }

  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready .msg-menu-btn-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }

  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready i.up-icon-menu-line,
  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready i.up-icon-menu-grid,
  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready svg.icon-menu-line,
  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready svg.icon-menu {
    flex: 0 0 auto;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready {
    min-width: 112px;
    height: 48px;
    padding: 0 12px;
  }

  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready .msg-menu-btn-label {
    font-size: 13px;
  }
}

/* Stable mobile "Menu" label */
@media (max-width: 991px) {
  .up-header__btn-mobile-menu {
    width: auto;
    min-width: 44px;
    padding: 0 10px;
    border-radius: 10px;
    gap: 6px;
  }

  .up-header__btn-mobile-menu .text-a-icon {
    display: none !important;
  }

  .up-header__btn-mobile-menu::after {
    content: 'Меню';
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  html[lang^='en'] .up-header__btn-mobile-menu::after {
    content: 'Menu';
  }
}

/* codex-logo-center-header-all-devices-2026-02-28 */
/* Center logo for 13" and desktop while preserving controls */
@media (min-width: 1200px) {
  .up-header > .container > .row.dflex.align-items-center {
    position: relative;
  }

  .up-header__left {
    position: static;
    min-width: 124px;
    z-index: 4;
  }

  .up-header__left #logo.up-header__logo-top {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    min-width: 0 !important;
    z-index: 3;
    pointer-events: auto;
  }

  .up-header__left #logo.up-header__logo-top img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .up-header__left .box-menu-top {
    position: relative;
    z-index: 5;
  }

  .up-header__right {
    position: relative;
    z-index: 4;
  }
}

@media (max-width: 1199px) {
  .up-header__left #logo.up-header__logo-top {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-left: auto;
    margin-right: auto;
    min-width: 0 !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* codex-logo-visibility-and-custom-fit-2026-02-28 */
/* Force logo visibility and center alignment on desktop */
@media (min-width: 1200px) {
  .up-header > .container > .row.dflex.align-items-center {
    position: relative;
    min-height: 88px;
  }

  .up-header__left {
    position: static;
    z-index: 10;
  }

  .up-header__right {
    position: relative;
    z-index: 11;
  }

  .up-header__left #logo.up-header__logo-top {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 40 !important;
    display: block !important;
    min-width: 0 !important;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-desktop,
  .up-header__left #logo.up-header__logo-top .up-header__logo-mobile {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 76px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .up-header__left #logo.up-header__logo-top {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    z-index: 20;
  }

  .up-header__left #logo.up-header__logo-top img {
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 991px) {
  .up-header__left #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* codex-logo-leftzone-centered-and-static-2026-02-28 */
/* Restore original header flow: no center-screen absolute logo */
@media (min-width: 992px) {
  .up-header > .container > .row.dflex.align-items-center {
    position: relative !important;
    min-height: 0 !important;
  }

  .up-header__left {
    position: relative !important;
    z-index: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  .up-header__right {
    position: relative !important;
    z-index: auto !important;
  }

  .up-header__left #logo.up-header__logo-top {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: auto !important;
    pointer-events: auto;
    margin: 0 12px 0 0 !important;
    min-width: 176px !important;
    width: 176px;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-desktop,
  .up-header__left #logo.up-header__logo-top .up-header__logo-mobile {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    max-height: 64px !important;
  }

  .up-header__left .box-menu-top {
    margin-left: 0 !important;
    position: relative;
    z-index: 3;
  }
}

@media (min-width: 1200px) {
  .up-header__left #logo.up-header__logo-top {
    min-width: 198px !important;
    width: 198px;
    margin-right: 14px !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    max-height: 66px !important;
  }
}

@media (max-width: 991px) {
  .up-header__left #logo.up-header__logo-top,
  .up-header__logo-mobile {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  .up-header__left #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    margin: 0 auto !important;
  }
}

/* codex-logo-final-single-and-size-2026-02-28 */
/* One logo per viewport + readable size + center in left header zone */
@media (min-width: 992px) {
  .up-header > .container > .row.dflex.align-items-center {
    position: relative;
  }

  .up-header__left {
    position: relative !important;
    min-width: 308px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .up-header__left .box-menu-top {
    position: relative;
    z-index: 12;
  }

  .up-header__left #logo.up-header__logo-top {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    z-index: 11;
    display: block !important;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-desktop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-mobile {
    display: none !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 1200px) {
  .up-header__left {
    min-width: 340px;
  }

  .up-header__left #logo.up-header__logo-top img {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (max-width: 991px) {
  .up-header__left #logo.up-header__logo-top {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-desktop {
    display: none !important;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-mobile {
    display: block !important;
  }

  .up-header__left #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
}

/* codex-logo-final-no-overlap-big-2026-02-28 */
/* Final header logo layout: no overlap, bigger readable logo, one logo per viewport */
@media (min-width: 992px) {
  .up-header__left {
    display: grid !important;
    grid-template-columns: minmax(176px, 1fr) auto;
    align-items: center !important;
    column-gap: 12px;
    min-width: 330px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative !important;
  }

  .up-header__left > #logo.up-header__logo-top {
    grid-column: 1;
    justify-self: center;
    align-self: center;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    z-index: 2 !important;
    pointer-events: auto;
  }

  .up-header__left > .box-menu-top {
    grid-column: 2;
    justify-self: start;
    margin: 0 !important;
    position: relative;
    z-index: 3;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-desktop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile {
    display: none !important;
  }

  .up-header__left > #logo.up-header__logo-top img {
    display: block !important;
    width: 84px !important;
    height: 84px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 1200px) {
  .up-header__left {
    min-width: 372px;
  }

  .up-header__left > #logo.up-header__logo-top img {
    width: 92px !important;
    height: 92px !important;
  }
}

@media (max-width: 991px) {
  .up-header__left > #logo.up-header__logo-top {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-desktop {
    display: none !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile {
    display: block !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
}


/* codex-logo-v2-webp-sizing-2026-02-28 */
@media (min-width: 992px) {
  .up-header__left > #logo.up-header__logo-top img {
    width: 92px !important;
    height: 92px !important;
  }
}

@media (min-width: 1200px) {
  .up-header__left > #logo.up-header__logo-top img {
    width: 100px !important;
    height: 100px !important;
  }
}

@media (max-width: 991px) {
  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* codex-mobile-header-hotfix-2026-02-28 */
@media (max-width: 991px) {
  .up-header__left {
    position: relative !important;
    z-index: 20 !important;
    gap: 8px;
  }

  .up-header__left > #logo.up-header__logo-top {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    margin: 0 8px !important;
    z-index: 21 !important;
    pointer-events: none !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__logo-mobile {
    display: block !important;
  }

  .up-header__left > #logo.up-header__logo-top a,
  .up-header__logo-mobile a {
    display: block !important;
    pointer-events: auto !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto !important;
  }

  .up-header__btn-mobile-menu,
  .up-header__right .btn-open-contact,
  .up-header__right .btn-open-search,
  .up-header__right #cart > .btn,
  .up-header__right .btn-account {
    position: relative;
    z-index: 40;
    pointer-events: auto !important;
  }
}

/* codex-home-h1-mobile-hardhide-2026-02-28 */
@media (max-width: 991px) {
  .home-seo-heading,
  .home-seo-heading__title {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* codex-home-rootcats-ks-style-2026-02-28 */
.home-rootcats.home-rootcats--ks {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 1040px;
  margin: 12px auto 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-rootcats.home-rootcats--ks .home-rootcats__btn,
.home-rootcats.home-rootcats--ks .home-rootcats__btn:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 124px;
  padding: 16px 14px;
  border: 1px solid #d9e5f8;
  border-radius: 14px;
  background: #f7fbff;
  color: #17335d;
  box-shadow: 0 8px 18px rgba(20, 57, 118, 0.08);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.home-rootcats.home-rootcats--ks .home-rootcats__btn:hover,
.home-rootcats.home-rootcats--ks .home-rootcats__btn:focus,
.home-rootcats.home-rootcats--ks .home-rootcats__btn:first-child:hover,
.home-rootcats.home-rootcats--ks .home-rootcats__btn:first-child:focus {
  transform: translateY(-1px);
  border-color: #9ebef0;
  background: #ffffff;
  color: #102a4e;
  box-shadow: 0 12px 24px rgba(20, 57, 118, 0.13);
}

.home-rootcats.home-rootcats--ks .home-rootcats__media {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7daf7;
  background: #ffffff;
  color: #2e6fdb;
  font-size: 19px;
  line-height: 1;
}

.home-rootcats.home-rootcats--ks .home-rootcats__btn.is-cat-generator .home-rootcats__media {
  color: #1f67d7;
}

.home-rootcats.home-rootcats--ks .home-rootcats__btn.is-cat-accessory .home-rootcats__media {
  color: #3377e1;
}

.home-rootcats.home-rootcats--ks .home-rootcats__btn-tx {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 991px) {
  .home-rootcats.home-rootcats--ks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 8px auto 16px;
  }

  .home-rootcats.home-rootcats--ks .home-rootcats__btn,
  .home-rootcats.home-rootcats--ks .home-rootcats__btn:first-child {
    min-height: 102px;
    padding: 12px 8px;
    border-radius: 12px;
  }

  .home-rootcats.home-rootcats--ks .home-rootcats__media {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .home-rootcats.home-rootcats--ks .home-rootcats__btn-tx {
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .home-rootcats.home-rootcats--ks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-rootcats.home-rootcats--ks .home-rootcats__btn.is-cat-accessory {
    grid-column: 1 / -1;
  }
}

/* Keep all home grids visible even if stale browser JS toggles old switch classes */
.home-grid-switch-ready .js-home-grid-module,
.home-grid-switch-ready .js-home-grid-module.is-active {
  display: block !important;
}

/* codex-upstore-menu-horizontal-under-header-2026-02-28 */
@media (min-width: 1200px) {
  .home-page-content-top {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) {
    display: block;
    position: relative;
    z-index: 1007;
    overflow: visible;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) .menu-box {
    position: relative;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    display: block;
    padding-top: 2px;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical {
    width: 100% !important;
    max-width: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical + #maskMenuHC,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical:hover + #maskMenuHC,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical.open + #maskMenuHC {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li {
    flex: 0 0 auto;
    width: auto !important;
    border: 0 !important;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.parent-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #d9e5f8;
    background: #f7fbff;
    color: #17335d;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.parent-link .item-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.parent-link .up-icon-angle-right {
    font-size: 10px;
    transform: rotate(90deg);
    opacity: 0.75;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li.menu-open > a.parent-link,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.parent-link:hover,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.parent-link.hover {
    border-color: #9ebef0;
    background: #ffffff;
    color: #102a4e;
    box-shadow: 0 8px 18px rgba(20, 57, 118, 0.12);
  }

  /* codex-leaf-topbar-pill-2026-03-29: leaf items (no dropdown) match parent-link pill style */
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.dropdown-img {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #d9e5f8;
    background: #f7fbff;
    color: #17335d;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.dropdown-img .item-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical-list > li > a.dropdown-img:hover {
    border-color: #9ebef0;
    background: #ffffff;
    color: #102a4e;
    box-shadow: 0 8px 18px rgba(20, 57, 118, 0.12);
  }

  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical #menu-vertical-list > li .dropdown-menu-simple,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical #menu-vertical-list > li .dropdown-menu-simple .nsmenu-ischild-simple,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical #menu-vertical-list > li .dropdown-menu-simple .nsmenu-full3level,
  .menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical #menu-vertical-list > li .dropdown-menu-simple .child_4level_simple {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: min(920px, calc(100vw - 36px)) !important;
    max-width: 920px;
    height: auto !important;
    max-height: 76vh;
    border-radius: 12px !important;
    overflow: auto;
  }
}

/* codex-home-reviews-premium-ui-2026-02-28 */
.container-module:has(.rating-info-box):has(.store-reviews) {
  margin-bottom: 18px;
  border: 1px solid #dfe9f8;
  border-radius: 20px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 14px 30px rgba(19, 55, 118, 0.08);
}

.container-module > .title-module:has(.see-all-reviews) {
  position: relative;
  margin-bottom: 14px;
  padding-right: 150px;
}

.container-module > .title-module:has(.see-all-reviews) > span {
  display: block;
  color: #112a4d;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.container-module > .title-module:has(.see-all-reviews) .see-all-reviews {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  top: 4px;
  right: 2px;
  padding: 8px 12px;
  border: 1px solid #c9dbf6;
  border-radius: 10px;
  background: #ffffff;
  color: #2a63c3;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.container-module > .title-module:has(.see-all-reviews) .see-all-reviews svg {
  margin-left: 0;
  width: 16px;
  height: 9px;
}

.container-module > .title-module:has(.see-all-reviews) .see-all-reviews:hover {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(47, 111, 219, 0.22);
  text-decoration: none;
}

.container-module .rating-info-box {
  margin-top: 0;
  margin-left: -7px;
  margin-right: -7px;
}

.container-module .rating-info-box .col-xs-12 {
  padding-left: 7px;
  padding-right: 7px;
  margin-top: 0;
  margin-bottom: 14px;
}

.container-module .rating-info-box .reviews-block {
  border: 1px solid #d9e6f8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(19, 56, 117, 0.08);
}

.container-module .rating-info-box .reviews-block.f-box,
.container-module .rating-info-box .reviews-block.s-box {
  padding: 22px 24px;
}

.container-module .average-rating__rating {
  color: #14396d;
  font-weight: 800;
}

.container-module .average-reviews__content {
  min-width: 96px;
  border: 1px solid #d5e4f8;
  border-radius: 999px;
  background: #ffffff;
}

.container-module .average-reviews__totals {
  background: #eaf2ff;
  color: #1f5bc2;
  font-weight: 700;
}

.container-module .btn-block-rs .chm-btn.chm-btn-black {
  min-height: 40px;
  border-radius: 11px;
  border: 0;
  color: #ffffff;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  box-shadow: 0 10px 18px rgba(47, 111, 219, 0.25);
}

.container-module .btn-block-rs .chm-btn.chm-btn-black:hover {
  background: linear-gradient(180deg, #2a63c3 0%, #214f9e 100%);
}

.container-module .rating-summary {
  gap: 8px;
}

.container-module .rating-summary__item {
  width: 56px;
  height: 134px;
  border: 1px solid #d6e3f8;
  border-radius: 14px;
  background: #ffffff;
}

.container-module .rating-summary__content {
  width: 40px;
  border-radius: 999px;
  background: #f2f7ff;
}

.container-module .rating-summary__star {
  color: #173355;
  font-size: 21px;
  font-weight: 700;
}

.container-module .rating-summary__percent {
  color: #2a4f7e;
}

.container-module .reviews_theme__item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #d8e4f6;
}

.container-module .reviews_theme .reviews_theme__item:last-child,
.container-module .reviews_theme .reviews_theme__item:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.container-module .reviews_theme__item:after {
  content: none;
}

.container-module .reviews_theme__text,
.container-module .reviews_theme__stars {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.container-module .reviews_theme__text {
  color: #1a406b;
  font-weight: 600;
}

.container-module .store-reviews {
  margin-left: -7px;
  margin-right: -7px;
  margin-bottom: 6px;
}

.container-module .store-reviews__item {
  padding-left: 7px;
  padding-right: 7px;
  margin-bottom: 14px;
}

.container-module .store-reviews__content {
  margin-top: 0;
  border: 1px solid #d9e4f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 49, 101, 0.08);
  padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.container-module .store-reviews__content:hover {
  transform: translateY(-2px);
  border-color: #abc4e8;
  box-shadow: 0 12px 24px rgba(15, 46, 100, 0.14);
}

.container-module .store-reviews__header {
  margin-bottom: 12px;
}

.container-module .store-reviews__letter {
  width: 42px;
  height: 42px;
  margin-right: 12px;
  background: linear-gradient(180deg, #eef5ff 0%, #e7f0ff 100%);
  color: #1f5bc2;
  font-weight: 700;
}

.container-module .store-reviews__author {
  color: #173355;
  font-size: 15px;
}

.container-module .store-reviews__stars .reviews_theme__star {
  width: 14px;
  margin-right: 2px;
}

.container-module .store-reviews__stars .reviews_theme__star:after,
.container-module .store-reviews__stars .reviews_theme__star-active:after {
  font-size: 14px;
  line-height: 14px;
}

.container-module .store-reviews__description {
  margin-bottom: 14px;
  color: #365579;
  font-size: 14px;
  line-height: 1.55;
  -webkit-line-clamp: 5;
  max-height: none;
}

.container-module .store-reviews__date {
  color: #6b84a5;
  font-size: 13px;
}

.container-module .store-reviews__date svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.container-module .store-reviews__date svg path {
  fill: currentColor;
}

[class^="showmore-review-store"].box-showmore,
[class*=" showmore-review-store"].box-showmore {
  margin-top: 2px;
  text-align: center;
}

[class^="showmore-review-store"].box-showmore .chm-btn,
[class*=" showmore-review-store"].box-showmore .chm-btn {
  border-radius: 11px;
  border: 1px solid #c9dbf6;
  background: #ffffff;
  color: #2a63c3;
  font-weight: 600;
  box-shadow: 0 8px 16px rgba(20, 57, 118, 0.1);
}

[class^="showmore-review-store"].box-showmore .chm-btn:hover,
[class*=" showmore-review-store"].box-showmore .chm-btn:hover {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

.dark-theme .container-module:has(.rating-info-box):has(.store-reviews) {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme .container-module > .title-module:has(.see-all-reviews) > span {
  color: #e8f1ff;
}

.dark-theme .container-module > .title-module:has(.see-all-reviews) .see-all-reviews {
  border-color: #3a5175;
  background: #21324a;
  color: #c5daef;
}

.dark-theme .container-module > .title-module:has(.see-all-reviews) .see-all-reviews:hover {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

.dark-theme .container-module .rating-info-box .reviews-block,
.dark-theme .container-module .store-reviews__content {
  border-color: #324a6d;
  background: #1f2f44;
  box-shadow: none;
}

.dark-theme .container-module .average-reviews__content {
  border-color: #3a5175;
  background: #21324a;
}

.dark-theme .container-module .average-reviews__totals {
  background: #2a3f5f;
  color: #cde1f6;
}

.dark-theme .container-module .rating-summary__item {
  border-color: #3a5175;
  background: #21324a;
}

.dark-theme .container-module .rating-summary__content {
  background: #2b4264;
}

.dark-theme .container-module .rating-summary__star,
.dark-theme .container-module .reviews_theme__text,
.dark-theme .container-module .store-reviews__author {
  color: #e8f1ff;
}

.dark-theme .container-module .rating-summary__percent,
.dark-theme .container-module .store-reviews__description,
.dark-theme .container-module .store-reviews__date {
  color: #c8ddef;
}

.dark-theme .container-module .reviews_theme__item {
  border-bottom-color: #3a5175;
}

.dark-theme [class^="showmore-review-store"].box-showmore .chm-btn,
.dark-theme [class*=" showmore-review-store"].box-showmore .chm-btn {
  border-color: #3a5175;
  background: #21324a;
  color: #c5daef;
  box-shadow: none;
}

.dark-theme [class^="showmore-review-store"].box-showmore .chm-btn:hover,
.dark-theme [class*=" showmore-review-store"].box-showmore .chm-btn:hover {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

@media (max-width: 1199px) {
  .container-module:has(.rating-info-box):has(.store-reviews) {
    border-radius: 16px;
    padding: 14px 14px 12px;
  }

  .container-module > .title-module:has(.see-all-reviews) {
    padding-right: 140px;
  }

  .container-module > .title-module:has(.see-all-reviews) > span {
    font-size: clamp(22px, 3.5vw, 30px);
  }

  .container-module .rating-info-box .reviews-block.f-box,
  .container-module .rating-info-box .reviews-block.s-box {
    padding: 16px;
  }
}

@media (max-width: 767px) {
  .container-module:has(.rating-info-box):has(.store-reviews) {
    margin-bottom: 14px;
    border-radius: 14px;
    padding: 12px 10px 10px;
  }

  .container-module > .title-module:has(.see-all-reviews) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 0;
    margin-bottom: 10px;
  }

  .container-module > .title-module:has(.see-all-reviews) > span {
    font-size: clamp(20px, 6vw, 26px);
  }

  .container-module > .title-module:has(.see-all-reviews) .see-all-reviews {
    position: relative;
    right: auto;
    top: auto;
    align-self: flex-start;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12px;
  }

  .container-module .rating-info-box {
    margin-left: -5px;
    margin-right: -5px;
  }

  .container-module .rating-info-box .col-xs-12 {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }

  .container-module .rating-info-box .reviews-block.f-box,
  .container-module .rating-info-box .reviews-block.s-box {
    padding: 12px;
    border-radius: 12px;
  }

  .container-module .average-rating__rating {
    font-size: 44px;
    line-height: 1;
  }

  .container-module .average-reviews__content {
    min-width: 84px;
  }

  .container-module .rating-summary {
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .container-module .rating-summary::-webkit-scrollbar {
    display: none;
  }

  .container-module .rating-summary__item {
    width: 48px;
    min-width: 48px;
    height: 118px;
    padding: 6px;
    border-radius: 12px;
  }

  .container-module .rating-summary__icon {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
  }

  .container-module .rating-summary__content {
    width: 30px;
    height: 70px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .container-module .rating-summary__star {
    font-size: 18px;
  }

  .container-module .rating-summary__percent {
    font-size: 11px;
  }

  .container-module .reviews_theme__text {
    font-size: 13px;
  }

  .container-module .store-reviews {
    margin-left: -5px;
    margin-right: -5px;
  }

  .container-module .store-reviews__item {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }

  .container-module .store-reviews__content {
    border-radius: 12px;
    padding: 12px;
  }

  .container-module .store-reviews__letter {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    font-size: 15px;
  }

  .container-module .store-reviews__author {
    font-size: 14px;
  }

  .container-module .store-reviews__description {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 5;
  }

  .container-module .store-reviews__date {
    font-size: 12px;
  }

  [class^="showmore-review-store"].box-showmore,
  [class*=" showmore-review-store"].box-showmore {
    margin-top: 0;
  }
}

/* codex-home-news-premium-ui-2026-02-28 */
.container-module.module-articles.latest-atricles {
  margin-bottom: 18px;
  border: 1px solid #dfe9f8;
  border-radius: 20px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 14px 30px rgba(19, 55, 118, 0.08);
}

.container-module.module-articles.latest-atricles .title-module.rc-mod {
  margin-bottom: 14px;
}

.container-module.module-articles.latest-atricles .title-module.rc-mod > span {
  display: block;
  color: #112a4d;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.container-module.module-articles.latest-atricles .module-articles__list {
  margin-left: -7px;
  margin-right: -7px;
}

.container-module.module-articles.latest-atricles .module-articles__item {
  margin-top: 0;
  margin-bottom: 14px;
  padding-left: 7px;
  padding-right: 7px;
}

.container-module.module-articles.latest-atricles .module-articles__content {
  padding: 12px;
  border: 1px solid #d9e4f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 49, 101, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.container-module.module-articles.latest-atricles .module-articles__content:hover {
  transform: translateY(-2px);
  border-color: #abc4e8;
  box-shadow: 0 12px 24px rgba(15, 46, 100, 0.14);
}

.container-module.module-articles.latest-atricles .module-articles__image {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 24% 18%, #ffffff 0%, #f3f7ff 78%);
}

.container-module.module-articles.latest-atricles .module-articles__image > a {
  display: block;
  aspect-ratio: 16 / 9;
}

.container-module.module-articles.latest-atricles .module-articles__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .22s ease;
}

.container-module.module-articles.latest-atricles .module-articles__content:hover .module-articles__image img {
  transform: scale(1.03);
}

.container-module.module-articles.latest-atricles .module-articles__title {
  margin-bottom: 12px;
}

.container-module.module-articles.latest-atricles .module-articles__title a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.1em;
  color: #173355;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none;
}

.container-module.module-articles.latest-atricles .module-articles__title a:hover {
  color: #1f5bc2;
  text-decoration: none;
}

.container-module.module-articles.latest-atricles .module-atricles__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.container-module.module-articles.latest-atricles .module-articles__date,
.container-module.module-articles.latest-atricles .module-atricles__viewed {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d8e6f9;
  border-radius: 999px;
  background: #f7fbff;
  color: #47698f;
  font-size: 12px;
  line-height: 1;
}

.container-module.module-articles.latest-atricles .module-articles__date svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.container-module.module-articles.latest-atricles .module-articles__date svg path {
  fill: currentColor;
}

.container-module.module-articles.latest-atricles .module-articles__date-text {
  white-space: nowrap;
}

.container-module.module-articles.latest-atricles .module-atricles__viewed i {
  margin-right: 6px;
  font-size: 14px;
}

.dark-theme .container-module.module-articles.latest-atricles {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme .container-module.module-articles.latest-atricles .title-module.rc-mod > span {
  color: #e8f1ff;
}

.dark-theme .container-module.module-articles.latest-atricles .module-articles__content {
  border-color: #324a6d;
  background: #1f2f44;
  box-shadow: none;
}

.dark-theme .container-module.module-articles.latest-atricles .module-articles__image {
  background: #22354f;
}

.dark-theme .container-module.module-articles.latest-atricles .module-articles__title a {
  color: #e8f1ff;
}

.dark-theme .container-module.module-articles.latest-atricles .module-articles__title a:hover {
  color: #b8d7ff;
}

.dark-theme .container-module.module-articles.latest-atricles .module-articles__date,
.dark-theme .container-module.module-articles.latest-atricles .module-atricles__viewed {
  border-color: #3a5175;
  background: #21324a;
  color: #c8ddef;
}

@media (max-width: 1199px) {
  .container-module.module-articles.latest-atricles {
    border-radius: 16px;
    padding: 14px 14px 12px;
  }

  .container-module.module-articles.latest-atricles .title-module.rc-mod > span {
    font-size: clamp(22px, 3.5vw, 30px);
  }

  .container-module.module-articles.latest-atricles .module-articles__title a {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .container-module.module-articles.latest-atricles {
    margin-bottom: 14px;
    border-radius: 14px;
    padding: 12px 10px 10px;
  }

  .container-module.module-articles.latest-atricles .title-module.rc-mod {
    margin-bottom: 10px;
  }

  .container-module.module-articles.latest-atricles .title-module.rc-mod > span {
    font-size: clamp(20px, 6vw, 26px);
  }

  .container-module.module-articles.latest-atricles .module-articles__list {
    margin-left: -5px;
    margin-right: -5px;
  }

  .container-module.module-articles.latest-atricles .module-articles__item {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }

  .container-module.module-articles.latest-atricles .module-articles__content {
    padding: 10px;
    border-radius: 12px;
  }

  .container-module.module-articles.latest-atricles .module-articles__image {
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .container-module.module-articles.latest-atricles .module-articles__image img {
    border-radius: 10px;
  }

  .container-module.module-articles.latest-atricles .module-articles__title {
    margin-bottom: 10px;
  }

  .container-module.module-articles.latest-atricles .module-articles__title a {
    min-height: 3.9em;
    font-size: 14px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }

  .container-module.module-articles.latest-atricles .module-atricles__footer {
    gap: 6px;
  }

  .container-module.module-articles.latest-atricles .module-articles__date,
  .container-module.module-articles.latest-atricles .module-atricles__viewed {
    min-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  .container-module.module-articles.latest-atricles .module-articles__date svg {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }

  .container-module.module-articles.latest-atricles .module-atricles__viewed i {
    margin-right: 5px;
    font-size: 12px;
  }
}

/* codex-news-article-premium-ui-2026-02-28 */
.content-box-cs > h1 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #112a4d;
  font-weight: 800;
}

#content.ns-smv .image-atricle {
  margin-bottom: 14px;
  border: 1px solid #d9e5f8;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 24% 18%, #ffffff 0%, #f3f7ff 78%);
  box-shadow: 0 10px 24px rgba(20, 52, 103, 0.08);
}

#content.ns-smv .image-atricle img {
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}

#content.ns-smv .description-article {
  margin-bottom: 12px;
  border: 1px solid #dfe9f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 10px 24px rgba(20, 52, 103, 0.08);
  padding: 18px;
  color: #27486f;
}

#content.ns-smv .description-article h2,
#content.ns-smv .description-article h3 {
  color: #14365f;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
}

#content.ns-smv .description-article h2 {
  font-size: clamp(22px, 2.2vw, 32px);
}

#content.ns-smv .description-article h3 {
  font-size: clamp(18px, 1.8vw, 24px);
  margin-top: 18px;
}

#content.ns-smv .description-article p,
#content.ns-smv .description-article li {
  font-size: 16px;
  line-height: 1.65;
}

#content.ns-smv .description-article p {
  margin: 0 0 12px;
}

#content.ns-smv .description-article ul,
#content.ns-smv .description-article ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

#content.ns-smv .description-article li {
  margin-bottom: 8px;
}

#content.ns-smv .description-article a {
  color: #1f5bc2;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#content.ns-smv .description-article a:hover {
  color: #1a4b9f;
}

#content.ns-smv .description-article > *:last-child {
  margin-bottom: 0;
}

#content.ns-smv .info-article {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

#content.ns-smv .info-article .a2a_kit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

#content.ns-smv .info-article .a2a_kit a {
  width: 30px;
  height: 30px;
  border: 1px solid #d2e1f7;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(16, 50, 103, 0.08);
}

#content.ns-smv .info-article .date-added-article,
#content.ns-smv .info-article .total-comnent-article,
#content.ns-smv .info-article .aviewed-article {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d8e6f9;
  border-radius: 999px;
  background: #f7fbff;
  color: #47698f;
  font-size: 13px;
}

#content.ns-smv .info-article .icon-calendar,
#content.ns-smv .info-article .icon-comment,
#content.ns-smv .info-article .icon-aviewed {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  color: inherit;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module {
  margin-bottom: 14px;
  border: 1px solid #dfe9f8;
  border-radius: 16px;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 10px 24px rgba(20, 52, 103, 0.08);
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module > .title-module {
  margin-bottom: 10px;
  padding-right: 82px;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module > .title-module > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #14365f;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 800;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .swiper-mod-navigation {
  top: 2px;
  right: 0;
  display: flex;
  gap: 8px;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .swiper-mod-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid #c9dbf6;
  border-radius: 10px;
  background: #ffffff;
  color: #2a63c3;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .swiper-mod-arrow:hover {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .item {
  height: auto;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb {
  border: 1px solid #d9e4f5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 49, 101, 0.08);
  overflow: hidden;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .image {
  border-bottom: 1px solid #ebf1fb;
  background: radial-gradient(circle at 28% 20%, #ffffff 0%, #f3f7ff 72%);
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .product-name a {
  color: #173355;
  font-weight: 700;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .price .price_value {
  color: #14396d;
  font-weight: 800;
}

#content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .cart .btn.btn-general {
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  color: #ffffff;
}

.article-comment-title {
  margin-top: 8px;
  margin-bottom: 10px;
  color: #112a4d;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  font-weight: 800;
}

.article-comment-title sup {
  margin-left: 6px;
  color: #2f6fdb;
  font-size: 12px;
  font-weight: 700;
}

#article-comment-box {
  margin-bottom: 10px;
}

#article-comment,
#form-article-comment {
  border: 1px solid #dfe9f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 8px 20px rgba(19, 56, 117, 0.08);
}

#form-article-comment > h2 {
  margin: 0 0 14px;
  color: #14365f;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.25;
  font-weight: 800;
}

#form-article-comment .control-label {
  color: #1f4a76;
  font-weight: 600;
}

#form-article-comment .form-control {
  border: 1px solid #cfdff5;
  border-radius: 10px;
  background: #ffffff;
}

#form-article-comment textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

#form-article-comment .help-block {
  color: #5a7598;
}

#button-article-comment.chm-btn {
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(47, 111, 219, 0.25);
}

#button-article-comment.chm-btn:hover {
  background: linear-gradient(180deg, #2a63c3 0%, #214f9e 100%);
}

.dark-theme .content-box-cs > h1 {
  color: #e8f1ff;
}

.dark-theme #content.ns-smv .image-atricle {
  border-color: #324a6d;
  background: #22354f;
  box-shadow: none;
}

.dark-theme #content.ns-smv .description-article {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  color: #c8ddef;
  box-shadow: none;
}

.dark-theme #content.ns-smv .description-article h2,
.dark-theme #content.ns-smv .description-article h3 {
  color: #e8f1ff;
}

.dark-theme #content.ns-smv .description-article a {
  color: #a3c9ff;
}

.dark-theme #content.ns-smv .description-article a:hover {
  color: #c3ddff;
}

.dark-theme #content.ns-smv .info-article .a2a_kit a {
  border-color: #3a5175;
  background: #21324a;
  box-shadow: none;
}

.dark-theme #content.ns-smv .info-article .date-added-article,
.dark-theme #content.ns-smv .info-article .total-comnent-article,
.dark-theme #content.ns-smv .info-article .aviewed-article {
  border-color: #3a5175;
  background: #21324a;
  color: #c8ddef;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module > .title-module > span {
  color: #e8f1ff;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .swiper-mod-arrow {
  border-color: #3a5175;
  background: #21324a;
  color: #c8ddef;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .swiper-mod-arrow:hover {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb {
  border-color: #324a6d;
  background: #1f2f44;
  box-shadow: none;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .image {
  border-bottom-color: #2e4669;
  background: #22354f;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .product-name a {
  color: #e8f1ff;
}

.dark-theme #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .product-thumb .price .price_value {
  color: #a3c9ff;
}

.dark-theme .article-comment-title {
  color: #e8f1ff;
}

.dark-theme #article-comment,
.dark-theme #form-article-comment {
  border-color: #2b4163;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme #form-article-comment > h2 {
  color: #e8f1ff;
}

.dark-theme #form-article-comment .control-label,
.dark-theme #form-article-comment .help-block {
  color: #c8ddef;
}

.dark-theme #form-article-comment .form-control {
  border-color: #3a5175;
  background: #21324a;
  color: #e8f1ff;
}

@media (max-width: 767px) {
  .content-box-cs > h1 {
    margin-bottom: 10px;
    font-size: clamp(20px, 6vw, 26px);
  }

  #content.ns-smv .image-atricle {
    margin-bottom: 10px;
    border-radius: 12px;
  }

  #content.ns-smv .description-article {
    margin-bottom: 10px;
    border-radius: 12px;
    padding: 10px;
  }

  #content.ns-smv .description-article h2 {
    font-size: clamp(18px, 5.4vw, 24px);
  }

  #content.ns-smv .description-article h3 {
    margin-top: 14px;
    font-size: clamp(16px, 5vw, 20px);
  }

  #content.ns-smv .description-article p,
  #content.ns-smv .description-article li {
    font-size: 14px;
    line-height: 1.55;
  }

  #content.ns-smv .description-article ul,
  #content.ns-smv .description-article ol {
    padding-left: 18px;
  }

  #content.ns-smv .info-article {
    gap: 6px;
    margin-bottom: 10px;
  }

  #content.ns-smv .info-article .a2a_kit {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-right: 0;
    scrollbar-width: none;
  }

  #content.ns-smv .info-article .a2a_kit::-webkit-scrollbar {
    display: none;
  }

  #content.ns-smv .info-article .a2a_kit a {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  #content.ns-smv .info-article .date-added-article,
  #content.ns-smv .info-article .total-comnent-article,
  #content.ns-smv .info-article .aviewed-article {
    min-height: 26px;
    padding: 0 8px;
    font-size: 12px;
  }

  #content.ns-smv .info-article .icon-calendar,
  #content.ns-smv .info-article .icon-comment,
  #content.ns-smv .info-article .icon-aviewed {
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }

  #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module {
    border-radius: 12px;
    padding: 10px 10px 8px;
  }

  #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module > .title-module {
    padding-right: 0;
    margin-bottom: 8px;
  }

  #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module > .title-module > span {
    font-size: clamp(18px, 5.3vw, 22px);
  }

  #content.ns-smv .row.pt-15 > .col-sm-12 > .container-module .swiper-mod-navigation {
    display: none;
  }

  .article-comment-title {
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: clamp(18px, 5.3vw, 22px);
  }

  #article-comment,
  #form-article-comment {
    border-radius: 12px;
  }

  #form-article-comment > h2 {
    margin-bottom: 10px;
    font-size: clamp(16px, 5vw, 20px);
  }

  #form-article-comment .help-block {
    font-size: 12px;
  }
}

/* codex-product-page-premium-ui-2026-02-28 */
.h1-prod-name {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #112a4d;
  font-weight: 800;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top {
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid #dbe7f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 10px 22px rgba(22, 54, 107, 0.08);
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .container-tab {
  align-items: center;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .tabs__header__scroll {
  margin-right: 10px;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > .tabs__active_line {
  display: none;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li {
  float: none;
  margin: 0;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li > a {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #d4e3f7;
  border-radius: 11px;
  background: #ffffff;
  color: #24466e;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li > a:hover {
  border-color: #b7cfef;
  color: #1b4f97;
}

.h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li.active > a {
  border-color: #2f6fdb;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(47, 111, 219, 0.22);
}

#product .image-block {
  border: 1px solid #dbe7f8;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 12px 28px rgba(21, 53, 105, 0.08);
  padding: 14px;
}

#product .general-image {
  border: 1px solid #dce8f8;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 14%, #ffffff 0%, #f5f9ff 68%);
  overflow: hidden;
}

#product #image-box .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

#product #image-box .swiper-slide img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
}

#product .image-additional .item .thumbnail {
  border: 1px solid #d6e4f7;
  border-radius: 11px;
  background: #ffffff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

#product .image-additional .item .thumbnail:hover {
  border-color: #abc6e9;
  box-shadow: 0 6px 14px rgba(37, 72, 126, 0.12);
  transform: translateY(-1px);
}

#product .image-additional .swiper-slide-thumb-active .thumbnail,
#product .image-additional .item.active .thumbnail {
  border-color: #2f6fdb;
  box-shadow: 0 8px 16px rgba(47, 111, 219, 0.2);
}

#product .image-additional .item .thumbnail img {
  border-radius: 10px;
}

#product .right-block-inner {
  border: 1px solid #dbe7f8;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 12px 28px rgba(21, 53, 105, 0.08);
  padding: 14px;
}

#product .info-product {
  border: 1px solid #dbe7f8;
  border-radius: 14px;
  background: #ffffff;
  padding: 11px 12px;
  margin-bottom: 10px;
}

#product .info-product .info-model,
#product .info-product .info-sku,
#product .info-product .info-weight,
#product .info-product .info-manufacturer {
  color: #35587e;
  font-size: 13px;
  line-height: 1.38;
}

#product .info-product .info-model span,
#product .info-product .info-sku span,
#product .info-product .info-weight span,
#product .info-product .info-manufacturer span {
  color: #163a68;
  font-weight: 700;
}

#product .info-product .stock-status.instock {
  border-radius: 999px;
  background: #eaf8ef;
  color: #1e8b4d;
  font-weight: 700;
}

#product .price-group {
  border: 1px solid #d6e5fb;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  padding: 12px;
}

#product .price-group .price .autocalc-product-price {
  font-size: clamp(28px, 2.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #12396c;
  font-weight: 800;
}

#product .price-group .price .price-tax {
  margin-top: 4px;
  color: #4f6f95;
  font-size: 13px;
}

#product .price-group .found-cheaper .btn-cheaper {
  color: #1e5fc3;
  font-size: 13px;
  font-weight: 600;
}

#product .price-group .found-cheaper .btn-cheaper:hover {
  color: #154b9d;
}

#product .short-desc-b,
#product .short-attr-b,
#product .related-products,
#product .product-payment,
#product .product-delivery {
  margin-top: 12px;
  border: 1px solid #dbe7f8;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
}

#product .title_short_description,
#product .title_short_attribute,
#product .related-products__title,
#product .product-payment__title,
#product .product-delivery__title {
  color: #173b6a;
  font-size: 17px;
  line-height: 1.24;
  font-weight: 800;
  margin-bottom: 10px;
}

#product .short-desc-b .text_short_description {
  color: #254970;
  line-height: 1.52;
}

#product .short-desc-b .redmore-link,
#product .short-attr-b .redmore-link {
  color: #1e5fc3;
  font-weight: 600;
}

#product .short-desc-b .redmore-link:hover,
#product .short-attr-b .redmore-link:hover {
  color: #164992;
}

#product .short-attr-b .short-attribute {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed #dce7f8;
}

#product .short-attr-b .short-attribute:last-child {
  border-bottom: 0;
}

#product .short-attr-b .attr-name {
  color: #3a5f86;
}

#product .short-attr-b .attr-text {
  color: #193d67;
  font-weight: 600;
  text-align: right;
}

#product .related-products__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#product .related-products__item {
  border: 1px solid #d7e4f7;
  border-radius: 13px;
  background: #f8fbff;
  padding: 10px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#product .related-products__item:hover {
  border-color: #b8cee9;
  box-shadow: 0 10px 20px rgba(25, 57, 109, 0.12);
  transform: translateY(-1px);
}

#product .related-products__image {
  width: 86px;
  min-width: 86px;
  height: 86px;
  border-radius: 11px;
  background: #ffffff;
  border: 1px solid #d7e5f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#product .related-products__image img {
  max-width: 78px;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
}

#product .related-products__name-model a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #17385f;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

#product .related-products__name-model a:hover {
  color: #1c59bb;
}

#product .related-products__model {
  margin-top: 2px;
  color: #607fa6;
  font-size: 12px;
}

#product .related-products__price .price_value {
  color: #123a6c;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.08;
}

#product .related-products__price .price-tax {
  margin-top: 3px;
  color: #5b789b;
  font-size: 12px;
}

#product .related-products__action .cart .btn.btn-general {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  box-shadow: 0 8px 16px rgba(47, 111, 219, 0.24);
}

#product .related-products__action .cart .btn.btn-general:hover {
  background: linear-gradient(180deg, #2a63c3 0%, #214f9e 100%);
}

#product .product-payment__list {
  gap: 8px;
}

#product .product-payment__item {
  border: 1px solid #d9e6f8;
  border-radius: 10px;
  background: #f8fbff;
}

#product .product-payment__image {
  min-height: 38px;
}

#product .product-delivery__list {
  margin: 0;
}

#product .product-delivery__item {
  padding: 0;
  margin-bottom: 8px;
}

#product .product-delivery__item:last-child {
  margin-bottom: 0;
}

#product .product-delivery__content {
  border: 1px solid #d7e4f7;
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px;
}

#product .product-delivery__name,
#product .product-delivery__name a {
  color: #173e6d;
  font-weight: 700;
}

#product .product-delivery__description,
#product .product-delivery__text-price {
  color: #5a789f;
  font-size: 12px;
}

#product .product-delivery__price {
  color: #124072;
  font-size: 16px;
  font-weight: 800;
}

#product + .row.cbp .tabs-product {
  margin-top: 14px;
}

#product + .row.cbp .tabs-product .tab-content.show-all-tabs {
  width: 100%;
}

#product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane {
  border: 1px solid #dbe7f8;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  box-shadow: 0 12px 28px rgba(20, 52, 103, 0.08);
  padding: 16px;
}

#product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane > .ch-h2 {
  margin: 0 0 14px;
  color: #153761;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  font-weight: 800;
}

#tab-description :where(h1, h2, h3, h4, h5, h6):not(.ch-h2),
.category_description .p-content :where(h1, h2, h3, h4, h5, h6) {
  margin: 28px 0 14px;
  color: #163861;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

#tab-description h1,
.category_description .p-content h1 {
  font-size: clamp(28px, 2.2vw, 34px);
}

#tab-description h2,
.category_description .p-content h2 {
  font-size: clamp(24px, 1.9vw, 29px);
}

#tab-description h3,
.category_description .p-content h3 {
  font-size: clamp(20px, 1.6vw, 24px);
}

#tab-description h4,
#tab-description h5,
#tab-description h6,
.category_description .p-content h4,
.category_description .p-content h5,
.category_description .p-content h6 {
  font-size: 18px;
}

#tab-description > :first-child:not(.ch-h2),
.category_description .p-content > :first-child {
  margin-top: 0;
}

#tab-description p,
#tab-description li {
  color: #23476f;
  line-height: 1.62;
  font-size: 16px;
}

#tab-description strong {
  color: #112f54;
}

#tab-description ul,
#tab-description ol {
  padding-left: 20px;
}

#tab-specification .short-attributes-groups {
  display: grid;
  gap: 10px;
}

#tab-specification .attr-group-name {
  margin-bottom: 0;
  padding: 9px 12px;
  border: 1px solid #d3e2f8;
  border-radius: 11px;
  background: #ffffff;
  color: #173d6b;
  font-weight: 800;
}

#tab-specification .short-attribute {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #d7e4f7;
  border-radius: 11px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(220px, .95fr) 1.05fr;
  align-items: start;
  gap: 12px;
}

#tab-specification .short-attribute .attr-name {
  color: #3a5f86;
}

#tab-specification .short-attribute .attr-text {
  color: #193d67;
  font-weight: 700;
}

#tab-review .reviews-product {
  border: 1px solid #d8e5f7;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
  gap: 14px;
}

#tab-review .reviews-product__average {
  border: 1px solid #d7e5f8;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
}

#tab-review .reviews-product__rating {
  color: #123d70;
  font-weight: 800;
}

#tab-review .reviews-product__details,
#tab-review .reviews-product__totals {
  color: #355a81;
}

#tab-review .reviews-product__rating-summary {
  border: 1px solid #d7e5f8;
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px;
}

#tab-review #review .empty-list {
  border: 1px dashed #cdddf5;
  border-radius: 11px;
  background: #ffffff;
}

#tab-question-answer .chm-empty {
  border: 1px dashed #cdddf5;
  border-radius: 11px;
  background: #ffffff;
}

.sticky-product-info {
  border-top: 1px solid #cfe0f8;
  background: rgba(248, 251, 255, 0.96);
  box-shadow: 0 -8px 20px rgba(20, 52, 103, 0.08);
  backdrop-filter: blur(4px);
}

.sticky-product-info__name {
  color: #123660;
  font-weight: 700;
}

.sticky-product-info__model {
  color: #5b789f;
}

.sticky-product-info .btn.btn-general {
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #2f6fdb 0%, #285fb9 100%);
  box-shadow: 0 10px 20px rgba(47, 111, 219, 0.24);
}

.sticky-product-info .btn.btn-general:hover {
  background: linear-gradient(180deg, #2a63c3 0%, #214f9e 100%);
}

.dark-theme .h1-prod-name {
  color: #e8f1ff;
}

.dark-theme .h1-prod-name + .row #content > .tabs__header.tabs_top,
.dark-theme #product .image-block,
.dark-theme #product .right-block-inner,
.dark-theme #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane {
  border-color: #2f4261;
  background: linear-gradient(180deg, #18253a 0%, #162235 100%);
  box-shadow: none;
}

.dark-theme .h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li > a,
.dark-theme #product .info-product,
.dark-theme #product .price-group,
.dark-theme #product .short-desc-b,
.dark-theme #product .short-attr-b,
.dark-theme #product .related-products,
.dark-theme #product .product-payment,
.dark-theme #product .product-delivery,
.dark-theme #product .related-products__item,
.dark-theme #product .related-products__image,
.dark-theme #product .product-delivery__content,
.dark-theme #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane .short-attribute,
.dark-theme #tab-specification .attr-group-name,
.dark-theme #tab-review .reviews-product,
.dark-theme #tab-review .reviews-product__average,
.dark-theme #tab-review .reviews-product__rating-summary,
.dark-theme #tab-review #review .empty-list,
.dark-theme #tab-question-answer .chm-empty {
  border-color: #334a6d;
  background: #21324a;
  box-shadow: none;
}

.dark-theme .h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li > a {
  color: #cfe1fb;
}

.dark-theme .h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li.active > a {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #ffffff;
}

.dark-theme #product .price-group .price .autocalc-product-price,
.dark-theme #product .related-products__price .price_value,
.dark-theme #product .product-delivery__price {
  color: #a3c9ff;
}

.dark-theme #product .info-product .info-model,
.dark-theme #product .info-product .info-sku,
.dark-theme #product .info-product .info-weight,
.dark-theme #product .info-product .info-manufacturer,
.dark-theme #product .price-group .price .price-tax,
.dark-theme #product .short-desc-b .text_short_description,
.dark-theme #product .short-attr-b .attr-name,
.dark-theme #product .related-products__model,
.dark-theme #product .product-delivery__description,
.dark-theme #product .product-delivery__text-price,
.dark-theme #tab-description p,
.dark-theme #tab-description li,
.dark-theme #tab-specification .short-attribute .attr-name,
.dark-theme #tab-review .reviews-product__details,
.dark-theme #tab-review .reviews-product__totals,
.dark-theme .sticky-product-info__model {
  color: #bfd4eb;
}

.dark-theme #product .info-product .info-model span,
.dark-theme #product .info-product .info-sku span,
.dark-theme #product .info-product .info-weight span,
.dark-theme #product .info-product .info-manufacturer span,
.dark-theme #product .title_short_description,
.dark-theme #product .title_short_attribute,
.dark-theme #product .related-products__title,
.dark-theme #product .product-payment__title,
.dark-theme #product .product-delivery__title,
.dark-theme #product .related-products__name-model a,
.dark-theme #product .product-delivery__name,
.dark-theme #product .product-delivery__name a,
.dark-theme #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane > .ch-h2,
.dark-theme #tab-specification .attr-group-name,
.dark-theme #tab-specification .short-attribute .attr-text,
.dark-theme #tab-description strong,
.dark-theme .sticky-product-info__name {
  color: #e8f1ff;
}

.dark-theme .sticky-product-info {
  border-top-color: #334a6d;
  background: rgba(21, 33, 52, 0.96);
  box-shadow: none;
}

@media (max-width: 1366px) {
  #product .image-block,
  #product .right-block-inner,
  #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane {
    border-radius: 16px;
  }

  #product .price-group .price .autocalc-product-price {
    font-size: clamp(24px, 2.5vw, 33px);
  }

  #product .related-products__price .price_value {
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  .h1-prod-name {
    margin-bottom: 12px;
    font-size: clamp(22px, 5.2vw, 32px);
  }

  .h1-prod-name + .row #content > .tabs__header.tabs_top {
    border-radius: 14px;
    padding: 7px 8px;
  }

  #product .image-block,
  #product .right-block-inner,
  #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane {
    padding: 12px;
  }

  #product .right-block {
    margin-top: 12px;
  }

  #product .related-products__item {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  #product .related-products__image {
    width: 76px;
    min-width: 76px;
    height: 76px;
  }

  #product .related-products__image img {
    max-width: 70px;
    max-height: 70px;
  }

  #tab-specification .short-attribute {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 767px) {
  .h1-prod-name {
    margin-bottom: 10px;
    font-size: clamp(20px, 6.4vw, 27px);
    line-height: 1.2;
  }

  .h1-prod-name + .row #content > .tabs__header.tabs_top {
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(22, 54, 107, 0.08);
  }

  .h1-prod-name + .row #content > .tabs__header.tabs_top .tabs__header__scroll {
    margin-right: 0;
  }

  .h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs {
    gap: 6px;
  }

  .h1-prod-name + .row #content > .tabs__header.tabs_top .my-tabs > li > a {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 13px;
  }

  #product .image-block,
  #product .right-block-inner,
  #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane {
    border-radius: 12px;
    padding: 10px;
  }

  #product .info-product,
  #product .price-group,
  #product .short-desc-b,
  #product .short-attr-b,
  #product .related-products,
  #product .product-payment,
  #product .product-delivery,
  #tab-review .reviews-product,
  #tab-review .reviews-product__average,
  #tab-review .reviews-product__rating-summary {
    border-radius: 10px;
    padding: 10px;
  }

  #product .title_short_description,
  #product .title_short_attribute,
  #product .related-products__title,
  #product .product-payment__title,
  #product .product-delivery__title {
    margin-bottom: 8px;
    font-size: 16px;
  }

  #product .price-group .price .autocalc-product-price {
    font-size: clamp(24px, 7vw, 30px);
  }

  #product .related-products__item {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
  }

  #product .related-products__image {
    width: 68px;
    min-width: 68px;
    height: 68px;
    border-radius: 8px;
  }

  #product .related-products__image img {
    max-width: 62px;
    max-height: 62px;
  }

  #product .related-products__name-model a {
    font-size: 13px;
  }

  #product .related-products__price .price_value {
    font-size: 18px;
  }

  #product .product-delivery__content {
    border-radius: 10px;
    padding: 8px;
  }

  #product + .row.cbp .tabs-product {
    margin-top: 10px;
  }

  #product + .row.cbp .tabs-product .tab-content.show-all-tabs > .tab-pane > .ch-h2 {
    margin-bottom: 10px;
    font-size: clamp(18px, 5.6vw, 24px);
  }

  #tab-description p,
  #tab-description li {
    font-size: 14px;
    line-height: 1.55;
  }

  .sticky-product-info {
    backdrop-filter: none;
  }
}

/* codex-footer-contrast-dark-2026-02-28 */
footer.ch-light-theme {
  position: relative;
  margin-top: 28px;
  color: #d7e5f8;
  background:
    radial-gradient(1200px 520px at 50% -220px, rgba(63, 120, 224, 0.22) 0%, rgba(63, 120, 224, 0) 65%),
    linear-gradient(180deg, #0f1f34 0%, #0b1727 58%, #08111d 100%);
  border-top: 1px solid #1d3150;
}

footer.ch-light-theme .box-banner-container {
  padding-top: 16px;
  padding-bottom: 6px;
}

footer.ch-light-theme .banner-footer {
  row-gap: 10px;
}

footer.ch-light-theme .block-banner-footer {
  height: 100%;
  min-height: 128px;
  border: 1px solid #223755;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 39, 62, 0.95) 0%, rgba(17, 31, 50, 0.95) 100%);
  box-shadow: 0 8px 20px rgba(3, 9, 17, 0.28);
  padding: 12px 11px;
  transition: border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}

footer.ch-light-theme .block-banner-footer:hover {
  border-color: #365a87;
  box-shadow: 0 12px 24px rgba(2, 9, 19, 0.36);
  transform: translateY(-2px);
}

footer.ch-light-theme .image-banner-footer {
  width: 42px;
  height: 42px;
  border: 1px solid #2a4670;
  border-radius: 10px;
  background: rgba(17, 36, 60, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

footer.ch-light-theme .banner-title-footer {
  color: #f2f7ff;
  font-weight: 700;
}

footer.ch-light-theme .banner-description-footer {
  color: #99b4d6;
}

footer.ch-light-theme .container > .footer-top {
  margin-top: 10px;
  border-top: 1px solid #1e3250;
  border-bottom: 1px solid #1e3250;
}

footer.ch-light-theme .newsletter-info,
footer.ch-light-theme .newsletter {
  border: 1px solid #253b5b;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 34, 54, 0.96) 0%, rgba(13, 25, 41, 0.96) 100%);
  box-shadow: 0 8px 20px rgba(3, 10, 18, 0.28);
  padding: 12px;
}

footer.ch-light-theme .newsletter-info .title-nl,
footer.ch-light-theme .newsletter-info .title-nl div {
  color: #e8f1ff;
}

footer.ch-light-theme #input-newsletter.form-control {
  border: 1px solid #2a4468;
  border-radius: 11px;
  background: #0f2035;
  color: #eaf2ff;
}

footer.ch-light-theme #input-newsletter.form-control::placeholder {
  color: #89a7cb;
}

footer.ch-light-theme .btn.btn-subscribe,
footer.ch-light-theme .btn.btn-newsletter {
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #3f78e0 0%, #2f63c1 100%);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(26, 83, 167, 0.34);
}

footer.ch-light-theme .btn.btn-subscribe:hover,
footer.ch-light-theme .btn.btn-newsletter:hover {
  background: linear-gradient(180deg, #4a83ea 0%, #335fae 100%);
}

footer.ch-light-theme #logo-footer {
  text-align: right;
}

footer.ch-light-theme #logo-footer img {
  filter: drop-shadow(0 4px 10px rgba(3, 10, 18, 0.35));
}

footer.ch-light-theme .footer-center {
  padding-top: 16px;
  padding-bottom: 12px;
}

footer.ch-light-theme .footer-contact .list-unstyled > li,
footer.ch-light-theme .ch-socials > li,
footer.ch-light-theme .f-column > .col-xs-12 {
  border-radius: 12px;
}

footer.ch-light-theme .footer-contact .dflex {
  color: #d2e0f5;
}

footer.ch-light-theme .footer-contact [style*="color:#fff"] {
  color: #dce8fa !important;
}

footer.ch-light-theme .footer-contact [style*="color:#3F78E0"] {
  color: #6da4ff !important;
}

footer.ch-light-theme .ch-socials {
  margin-top: 8px;
}

footer.ch-light-theme .ch-socials a {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #243a5a;
  border-radius: 10px;
  background: rgba(14, 29, 47, 0.86);
  color: #dbe8fb;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

footer.ch-light-theme .ch-socials a:hover {
  border-color: #3d6394;
  background: rgba(21, 43, 69, 0.95);
  color: #ffffff;
}

footer.ch-light-theme .title-f {
  margin-bottom: 10px;
  color: #f0f6ff;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
}

footer.ch-light-theme .f-column .list-unstyled li {
  margin-bottom: 5px;
}

footer.ch-light-theme .f-column .list-unstyled li a {
  color: #bfd1ea;
  transition: color .2s ease, opacity .2s ease;
}

footer.ch-light-theme .f-column .list-unstyled li a:hover {
  color: #ffffff;
}

footer.ch-light-theme .copyright__payments {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #1e3250;
}

footer.ch-light-theme .ch-payments > span {
  border: 1px solid #2a4366;
  border-radius: 10px;
  background: rgba(13, 27, 44, 0.9);
  padding: 3px;
}

footer.ch-light-theme .copyright {
  color: #9eb8d8;
}

@media (max-width: 991px) {
  footer.ch-light-theme {
    margin-top: 22px;
  }

  footer.ch-light-theme #logo-footer {
    text-align: left;
    margin-top: 10px;
  }

  footer.ch-light-theme .footer-center {
    row-gap: 10px;
  }

  footer.ch-light-theme .title-f {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  footer.ch-light-theme .box-banner-container {
    padding-top: 12px;
    padding-bottom: 4px;
  }

  footer.ch-light-theme .block-banner-footer {
    min-height: 112px;
    border-radius: 12px;
    padding: 10px 9px;
  }

  footer.ch-light-theme .banner-title-footer {
    font-size: 13px;
    line-height: 1.25;
  }

  footer.ch-light-theme .banner-description-footer {
    font-size: 12px;
    line-height: 1.3;
  }

  footer.ch-light-theme .newsletter-info,
  footer.ch-light-theme .newsletter {
    border-radius: 12px;
    padding: 10px;
  }

  footer.ch-light-theme .title-f {
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 17px;
  }

  footer.ch-light-theme .f-column .list-unstyled li a {
    font-size: 14px;
  }

  footer.ch-light-theme .ch-socials a {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 13px;
  }

  footer.ch-light-theme .copyright__payments {
    gap: 8px;
  }
}

/* codex-footer-no-black-text-fix-2026-02-28 */
footer.ch-light-theme,
footer.ch-light-theme .title-nl,
footer.ch-light-theme .title-nl div,
footer.ch-light-theme .title-f,
footer.ch-light-theme .copyright,
footer.ch-light-theme .banner-title-footer,
footer.ch-light-theme .banner-description-footer,
footer.ch-light-theme .footer-contact,
footer.ch-light-theme .footer-contact .dflex,
footer.ch-light-theme .footer-contact .dflex div,
footer.ch-light-theme .footer-contact .dflex span,
footer.ch-light-theme .footer-contact a,
footer.ch-light-theme .footer-contact a div,
footer.ch-light-theme .footer-contact a span,
footer.ch-light-theme .f-column .list-unstyled li a,
footer.ch-light-theme .ch-socials a {
  color: #d7e5f8 !important;
}

footer.ch-light-theme .title-f,
footer.ch-light-theme .banner-title-footer,
footer.ch-light-theme .footer-contact a div,
footer.ch-light-theme .footer-contact .dflex div {
  color: #f0f6ff !important;
}

footer.ch-light-theme .banner-description-footer,
footer.ch-light-theme .footer-contact .dflex span,
footer.ch-light-theme .copyright,
footer.ch-light-theme .f-column .list-unstyled li a {
  color: #a9c1df !important;
}

footer.ch-light-theme a:hover,
footer.ch-light-theme .f-column .list-unstyled li a:hover,
footer.ch-light-theme .footer-contact a:hover,
footer.ch-light-theme .ch-socials a:hover {
  color: #ffffff !important;
}

footer.ch-light-theme .block-banner-footer .text-footer-banner .banner-title-footer {
  color: #f2f7ff !important;
}

footer.ch-light-theme .block-banner-footer .text-footer-banner .banner-description-footer {
  color: #99b4d6 !important;
}

footer.ch-light-theme .newsletter-info .title-nl,
footer.ch-light-theme .newsletter-info .title-nl div {
  color: #e8f1ff !important;
}

footer.ch-light-theme .newsletter .form-control,
footer.ch-light-theme .newsletter .form-control:focus,
footer.ch-light-theme #input-newsletter.form-control {
  color: #eaf2ff !important;
  background: #0f2035 !important;
}

footer.ch-light-theme .newsletter .form-control::placeholder,
footer.ch-light-theme #input-newsletter.form-control::placeholder {
  color: #89a7cb !important;
}

footer.ch-light-theme .igb-nl {
  background: #0f2035 !important;
  border-color: #2a4468 !important;
}

@media (max-width: 767px) {
  footer.ch-light-theme .f-column > .col-xs-12 {
    border-top: 1px solid #1f3555 !important;
    background: rgba(13, 26, 42, 0.82) !important;
  }

  footer.ch-light-theme .title-f {
    color: #f0f6ff !important;
    background: rgba(13, 26, 42, 0.9) !important;
  }

  footer.ch-light-theme .title-f:after {
    color: #9ab5d8 !important;
  }

  footer.ch-light-theme .f-column .list-unstyled {
    background: rgba(15, 31, 50, 0.92) !important;
  }

  footer.ch-light-theme .f-column .list-unstyled li a {
    color: #c7d9ef !important;
  }
}

/* codex-footer-smooth-top-transition-2026-02-28 */
footer.ch-light-theme {
  margin-top: 46px;
  border-top-color: transparent;
}

footer.ch-light-theme::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -96px;
  height: 96px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 17, 29, 0) 0%,
    rgba(10, 21, 35, 0.2) 34%,
    rgba(12, 24, 40, 0.62) 72%,
    rgba(15, 31, 52, 0.96) 100%
  );
}

footer.ch-light-theme > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  footer.ch-light-theme {
    margin-top: 38px;
  }

  footer.ch-light-theme::before {
    top: -82px;
    height: 82px;
  }
}

@media (max-width: 767px) {
  footer.ch-light-theme {
    margin-top: 30px;
  }

  footer.ch-light-theme::before {
    top: -64px;
    height: 64px;
    background: linear-gradient(
      180deg,
      rgba(8, 17, 29, 0) 0%,
      rgba(10, 21, 35, 0.3) 38%,
      rgba(12, 24, 40, 0.7) 78%,
      rgba(15, 31, 52, 0.97) 100%
    );
  }
}

/* codex-home-mobile-final-polish-2026-02-28 */
@media (max-width: 767px) {
  /* Hits sales: denser cards for mobile */
  .home-hits-sales .container-module {
    padding: 10px 8px 8px !important;
  }

  .home-hits-sales .title-module {
    margin-bottom: 8px !important;
  }

  .home-hits-sales .title-module span {
    font-size: clamp(18px, 5.3vw, 22px) !important;
  }

  .home-hits-sales .product-thumb .image > a {
    min-height: 122px !important;
  }

  .home-hits-sales .product-thumb .product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .home-hits-sales .product-thumb .price .price_value {
    font-size: 16px !important;
  }

  .home-hits-sales .product-thumb .caption {
    padding: 8px 8px 9px !important;
  }

  .home-hits-sales .product-thumb .cart .btn.btn-general {
    min-height: 34px !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
  }

  /* Category browser: prevent oversized cards */
  .home-category-browser {
    padding: 10px 8px 9px !important;
  }

  .home-category-browser__title {
    font-size: clamp(18px, 5.3vw, 22px) !important;
  }

  .home-category-browser__tabs {
    margin: 0 -1px 10px !important;
    padding: 0 1px 3px !important;
    gap: 6px !important;
  }

  .home-category-browser__tab {
    min-height: 36px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  .home-category-browser__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-category-browser__card {
    border-radius: 11px !important;
  }

  .home-category-browser__media {
    aspect-ratio: 1 / 1 !important;
    padding: 8px 7px 5px !important;
  }

  .home-category-browser__media img {
    max-width: 112px !important;
    max-height: 98px !important;
    width: 100%;
    height: auto;
  }

  .home-category-browser__body {
    padding: 6px 8px 8px !important;
  }

  .home-category-browser__name {
    font-size: 13px !important;
    line-height: 1.32 !important;
    margin-bottom: 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.64em;
  }

  .home-category-browser__meta {
    font-size: 11px !important;
  }

  /* Reviews block fallback for mobile consistency */
  .container-module .rating-info-box .reviews-block.f-box,
  .container-module .rating-info-box .reviews-block.s-box {
    border-radius: 10px !important;
    padding: 10px !important;
  }

  .container-module .average-rating__rating {
    font-size: 36px !important;
  }

  .container-module .store-reviews__content {
    border-radius: 10px !important;
    padding: 10px !important;
  }

  .container-module .store-reviews__description {
    font-size: 12px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 4 !important;
  }

  .container-module .store-reviews__item {
    margin-bottom: 8px !important;
  }

  /* News: compact 2-col feed on phones */
  .container-module.module-articles.latest-atricles {
    padding: 10px 8px 8px !important;
  }

  .container-module.module-articles.latest-atricles .title-module.rc-mod > span {
    font-size: clamp(18px, 5.3vw, 22px) !important;
  }

  .container-module.module-articles.latest-atricles .module-articles__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 8px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .container-module.module-articles.latest-atricles .module-articles__content {
    border-radius: 10px !important;
    padding: 8px !important;
  }

  .container-module.module-articles.latest-atricles .module-articles__title a {
    font-size: 13px !important;
    line-height: 1.34 !important;
    min-height: 3.55em !important;
    -webkit-line-clamp: 2 !important;
  }

  .container-module.module-articles.latest-atricles .module-articles__date,
  .container-module.module-articles.latest-atricles .module-atricles__viewed {
    min-height: 24px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .home-category-browser__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-category-browser__media img {
    max-width: 96px !important;
    max-height: 86px !important;
  }

  .container-module.module-articles.latest-atricles .module-articles__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* codex-footer-newsletter-layout-fix-2026-02-28 */
footer.ch-light-theme .box-newsletter .newsletter-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  min-height: 88px;
  padding: 14px 16px;
}

footer.ch-light-theme .box-newsletter .newsletter-info .title-nl {
  margin: 0 !important;
  padding: 0;
  text-align: left;
  line-height: 1.35;
  font-size: 15px;
}

footer.ch-light-theme .box-newsletter .newsletter-info .title-nl div {
  margin: 0 !important;
}

footer.ch-light-theme .box-newsletter .newsletter-info .title-nl div + div {
  margin-top: 4px !important;
}

footer.ch-light-theme .box-newsletter .btn.btn-subscribe {
  min-height: 46px;
  height: 46px;
  padding: 0 18px;
  justify-content: center;
  white-space: nowrap;
}

footer.ch-light-theme .box-newsletter .newsletter {
  width: 100%;
  margin-top: 0;
}

footer.ch-light-theme .box-newsletter .newsletter .input-group {
  width: 100%;
}

@media (max-width: 991px) {
  footer.ch-light-theme .box-newsletter .newsletter-info {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 12px 14px;
  }

  footer.ch-light-theme .box-newsletter .newsletter-info .title-nl {
    text-align: center;
    font-size: 14px;
  }

  footer.ch-light-theme .box-newsletter .btn.btn-subscribe {
    width: 100%;
  }
}

@media (max-width: 767px) {
  footer.ch-light-theme .box-newsletter .newsletter-info,
  footer.ch-light-theme .box-newsletter .newsletter {
    padding: 10px 12px;
  }

  footer.ch-light-theme .box-newsletter .newsletter-info .title-nl {
    font-size: 13px;
    line-height: 1.3;
  }

  footer.ch-light-theme .box-newsletter .btn.btn-subscribe {
    min-height: 42px;
    height: 42px;
    padding: 0 14px;
  }
}

/* codex-footer-newsletter-active-state-fix-2026-02-28 */
footer.ch-light-theme .box-newsletter .newsletter {
  display: none;
  position: relative;
  top: auto;
  right: auto;
  opacity: 1;
  z-index: 1;
}

footer.ch-light-theme .box-newsletter .newsletter.active {
  display: block;
  position: relative;
  top: auto;
  right: auto;
  opacity: 1;
  z-index: 2;
}

footer.ch-light-theme .box-newsletter .newsletter .input-group {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100% !important;
  max-width: 100%;
  flex: 1 1 100% !important;
  overflow: hidden;
}

footer.ch-light-theme .box-newsletter .newsletter .form-control,
footer.ch-light-theme .box-newsletter .newsletter .form-control:focus {
  flex: 1 1 0 !important;
  min-width: 0;
  width: 1% !important;
  max-width: 100%;
  height: 52px;
  line-height: 1.2;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 14px;
}

footer.ch-light-theme .box-newsletter .newsletter .igb-nl {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 58px !important;
  min-width: 58px;
  height: 52px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0 !important;
  padding-right: 8px;
}

footer.ch-light-theme .box-newsletter .newsletter .btn.btn-newsletter {
  width: 48px;
  min-width: 48px;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-radius: 10px !important;
  white-space: nowrap;
  justify-content: center;
}

footer.ch-light-theme .box-newsletter .newsletter .btn.btn-newsletter .text-btn {
  display: none !important;
  margin-left: 0 !important;
}

@media (max-width: 767px) {
  footer.ch-light-theme .box-newsletter .newsletter .form-control,
  footer.ch-light-theme .box-newsletter .newsletter .form-control:focus {
    height: 46px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 0 12px;
    font-size: 13px !important;
  }

  footer.ch-light-theme .box-newsletter .newsletter .igb-nl {
    height: 46px;
    width: 52px !important;
    min-width: 52px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 6px;
  }

  footer.ch-light-theme .box-newsletter .newsletter .btn.btn-newsletter {
    width: 42px;
    min-width: 42px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
  }

  footer.ch-light-theme .box-newsletter .newsletter .btn.btn-newsletter .text-btn {
    display: none !important;
  }
}

/* codex-home-mobile-hits-and-logo-fix-2026-02-28 */
@media (max-width: 991px) {
  .up-header {
    height: auto !important;
    max-height: none !important;
    min-height: 74px;
    overflow: visible !important;
    padding-bottom: 0;
  }

  .up-header > .container {
    padding-bottom: 6px;
  }

  .home-hits-sales .swiper.swiper-module {
    overflow: hidden;
    margin: 0 -2px;
    padding: 0 2px 2px;
    touch-action: auto;
  }

  .home-hits-sales .swiper-wrapper {
    align-items: stretch !important;
  }

  .home-hits-sales .swiper-slide {
    display: flex !important;
    box-sizing: border-box;
    height: auto !important;
  }

  .home-hits-sales .swiper-slide > .item,
  .home-hits-sales .item {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
  }

  .home-hits-sales .product-thumb,
  .home-hits-sales .product-thumb:hover {
    width: 100%;
    height: 100%;
    transform: none !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
  }

  .home-hits-sales .product-thumb .addit-action {
    display: none !important;
  }

  .home-hits-sales .product-thumb .price-actions-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .home-hits-sales .product-thumb .price {
    min-width: 0;
  }

  .home-hits-sales .product-thumb .price .price_value {
    font-size: clamp(15px, 4.7vw, 17px);
    line-height: 1.1;
    white-space: nowrap;
  }

  .home-hits-sales .product-thumb .cart .btn.btn-general {
    min-width: 96px;
    padding: 0 10px;
  }

  .up-header > .container > .row.dflex.align-items-center {
    position: relative !important;
    min-height: 72px;
    padding-top: 5px !important;
    padding-bottom: 13px !important;
  }

  .up-header__left {
    position: static !important;
    min-width: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    z-index: 44 !important;
  }

  .up-header__left > #logo.up-header__logo-top {
    position: absolute !important;
    left: 50% !important;
    top: calc(50% + 4px) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 60px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
    z-index: 45 !important;
    pointer-events: auto !important;
  }

  .up-header__left > #logo.up-header__logo-top a {
    pointer-events: auto !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-desktop {
    display: none !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile.mr-auto,
  .up-header__logo-mobile.mr-auto {
    display: block !important;
    margin: 0 !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .up-header__btn-mobile-menu,
  .up-header__right {
    position: relative !important;
    z-index: 48 !important;
  }
}

@media (max-width: 767px) {
  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll::-webkit-scrollbar {
    display: none;
  }

  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    transform: none !important;
    transition: none !important;
    gap: 8px;
    padding-right: 0;
  }

  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll .swiper-slide {
    flex: 0 0 92%;
    max-width: 92%;
    scroll-snap-align: start;
    margin-right: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll .swiper-slide:not(.swiper-slide-visible),
  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll .swiper-slide.swiper-slide-duplicate {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .home-hits-sales .product-thumb .image > a {
    min-height: 138px;
  }

  .home-hits-sales .product-thumb .caption {
    padding: 8px 8px 10px;
  }

  .home-hits-sales .product-thumb .product-name a {
    min-height: 2.5em;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 420px) {
  .up-header {
    min-height: 68px;
    padding-bottom: 0;
  }

  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll .swiper-slide {
    flex-basis: 95%;
    max-width: 95%;
  }

  .up-header > .container > .row.dflex.align-items-center {
    min-height: 66px;
    padding-top: 4px !important;
    padding-bottom: 11px !important;
  }

  .up-header__left > #logo.up-header__logo-top {
    width: 54px !important;
    min-width: 54px !important;
    flex: 0 0 54px !important;
  }

.up-header__left > #logo.up-header__logo-top img,
.up-header__logo-mobile img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  }
}

/* codex-product-tags-and-viewed-premium-2026-02-28 */
#product .product-tags-block {
  margin-top: 18px !important;
  margin-bottom: 4px !important;
  padding: 14px 14px 10px;
  border: 1px solid #dbe6fb;
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbff 0%, #f2f7ff 100%);
}

#product .product-tags-title {
  margin-bottom: 10px;
  color: #153768;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

#product .product-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#product .product-tag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid #c9daf9;
  border-radius: 999px;
  background: #ffffff;
  color: #1d4e90;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#product .product-tag-chip:hover {
  border-color: #3f78e0;
  background: #3f78e0;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(63, 120, 224, 0.24);
}

#product .thumbnails .stickers-ns,
.recent-viewed-module .stickers-ns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

#product .thumbnails .sticker-ns,
.recent-viewed-module .sticker-ns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0 !important;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 37, 70, 0.12);
}

#product .thumbnails .sticker-ns.special,
.recent-viewed-module .sticker-ns.special {
  border-color: #f5a9ac;
  background: linear-gradient(180deg, #ff7f86 0%, #ef4f60 100%);
}

#product .thumbnails .sticker-ns.bestseller,
.recent-viewed-module .sticker-ns.bestseller {
  border-color: #f4c36f;
  background: linear-gradient(180deg, #f5c46c 0%, #e7a73c 100%);
}

#product .thumbnails .sticker-ns.popular,
.recent-viewed-module .sticker-ns.popular {
  border-color: #8fd1a0;
  background: linear-gradient(180deg, #67c686 0%, #2ea66d 100%);
}

#product .thumbnails .sticker-ns.newproduct,
.recent-viewed-module .sticker-ns.newproduct {
  border-color: #9cc1ff;
  background: linear-gradient(180deg, #6ea4ff 0%, #3f78e0 100%);
}

#product .thumbnails .sticker-ns i,
.recent-viewed-module .sticker-ns i {
  margin-right: 5px;
  font-size: 11px;
}

.recent-viewed-module {
  margin-top: 22px;
  margin-bottom: 4px;
  padding: 18px 18px 14px;
  border: 1px solid #d7e4fb;
  border-radius: 20px;
  background: linear-gradient(180deg, #f6f9ff 0%, #edf4ff 100%);
}

.recent-viewed-module .title-module {
  margin-bottom: 14px;
}

.recent-viewed-module .title-module span {
  color: #163a6d;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
}

.recent-viewed-module .swiper-mod-navigation {
  top: 22px;
  right: 18px;
}

.recent-viewed-module .swiper-mod-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid #d5e2fb;
  border-radius: 12px;
  background: #ffffff;
  color: #25518c;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.recent-viewed-module .swiper-mod-arrow:hover {
  border-color: #3f78e0;
  box-shadow: 0 10px 18px rgba(63, 120, 224, 0.18);
  transform: translateY(-1px);
}

.recent-viewed-module .swiper-mod-arrow.swiper-button-disabled {
  opacity: .45;
}

.recent-viewed-module .product-thumb {
  border: 1px solid #d7e4fb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(25, 60, 120, 0.08);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.recent-viewed-module .product-thumb:hover {
  border-color: #bfd4fb;
  box-shadow: 0 16px 36px rgba(25, 60, 120, 0.13);
  transform: translateY(-2px);
}

.recent-viewed-module .product-thumb .image {
  border-radius: 14px 14px 0 0;
  background: #f5f8ff;
}

.recent-viewed-module .product-thumb .caption {
  padding-top: 14px;
}

.recent-viewed-module .price-actions-box .quantity_plus_minus {
  display: none !important;
}

.recent-viewed-module .price-actions-box {
  align-items: center;
  gap: 10px;
}

.recent-viewed-module .price-actions-box .price {
  flex: 1 1 auto;
}

.recent-viewed-module .product_model_sstatus {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.recent-viewed-module .product-model {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 991px) {
  #product .product-tags-block {
    padding: 12px 12px 9px;
    border-radius: 14px;
  }

  .recent-viewed-module {
    padding: 14px 14px 10px;
    border-radius: 16px;
  }

  .recent-viewed-module .title-module span {
    font-size: 26px;
  }

  .recent-viewed-module .swiper-mod-navigation {
    right: 14px;
    top: 18px;
  }
}

@media (max-width: 767px) {
  #product .product-tags-block {
    margin-top: 12px !important;
  }

  #product .product-tags-title {
    font-size: 14px;
  }

  #product .product-tag-chip {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 11px;
  }

  .recent-viewed-module {
    padding: 12px 12px 8px;
    border-radius: 14px;
  }

  .recent-viewed-module .title-module span {
    font-size: 23px;
  }

  .recent-viewed-module .swiper-mod-arrow {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

/* codex-viewed-sidebar-premium-2026-02-28 */
.container-module-viewed {
  padding: 10px 8px 4px;
}

.container-module-viewed .product-thumb-viewed {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #d7e4fb;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  box-shadow: 0 10px 22px rgba(22, 58, 109, 0.08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.container-module-viewed .product-thumb-viewed + div.product-thumb-viewed {
  border-top: 0;
}

.container-module-viewed .product-thumb-viewed:hover {
  border-color: #bdd3fa;
  box-shadow: 0 14px 26px rgba(22, 58, 109, 0.13);
  transform: translateY(-1px);
}

.container-module-viewed .image {
  flex: 0 0 112px;
  max-width: 112px;
}

.container-module-viewed .image img {
  border-radius: 12px;
}

.container-module-viewed .caption {
  padding: 0 0 0 10px;
}

.container-module-viewed .product-name {
  margin-bottom: 9px;
}

.container-module-viewed .product-name a {
  color: #193766;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.container-module-viewed .price {
  color: #14325d;
  font-size: 20px;
  font-weight: 800;
}

.container-module-viewed .price .price-tax {
  color: #6e87ab;
  font-size: 11px;
  font-weight: 500;
}

.container-module-viewed .cart .btn-general {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2d65d6 0%, #3e7cf0 100%);
  border: 0;
  box-shadow: 0 10px 20px rgba(47, 104, 214, 0.35);
}

.container-module-viewed .cart .btn-general .up-icon-cart {
  color: #fff;
}

@media (max-width: 767px) {
  .container-module-viewed {
    padding: 8px 6px 4px;
  }

  .container-module-viewed .product-thumb-viewed {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 12px;
  }

  .container-module-viewed .image {
    flex: 0 0 92px;
    max-width: 92px;
  }

  .container-module-viewed .caption {
    padding-left: 8px;
  }

  .container-module-viewed .product-name a {
    font-size: 12px;
  }

  .container-module-viewed .price {
    font-size: 17px;
  }
}

/* codex-product-tags-hard-fallback-2026-02-28 */
#content #product .product-tags-block,
#product .product-tags-block,
.product-tags-block {
  display: block !important;
  margin-top: 18px !important;
  margin-bottom: 6px !important;
  padding: 14px 14px 10px !important;
  border: 1px solid #dbe6fb !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #f9fbff 0%, #f2f7ff 100%) !important;
}

#content #product .product-tags-title,
#product .product-tags-title,
.product-tags-title {
  display: block !important;
  margin: 0 0 10px !important;
  color: #153768 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#content #product .product-tags-list,
#product .product-tags-list,
.product-tags-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#content #product .product-tags-list a,
#content #product a.product-tag-chip,
#product .product-tags-list a,
#product a.product-tag-chip,
.product-tags-list a,
a.product-tag-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 4px 11px !important;
  margin: 0 !important;
  border: 1px solid #c9daf9 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1d4e90 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#content #product .product-tags-list a:hover,
#content #product a.product-tag-chip:hover,
#product .product-tags-list a:hover,
#product a.product-tag-chip:hover,
.product-tags-list a:hover,
a.product-tag-chip:hover {
  border-color: #3f78e0 !important;
  background: #3f78e0 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(63, 120, 224, 0.24) !important;
}

/* ── UkrCredits button icons fix (2026-03-03) ──
   .btn-general img has min-width:100% / min-height:100% from stylesheet.css
   which overrides inline max-width:16px on payment bank logos.
   Fix: reset min-* and set explicit small dimensions. */
#button-ukrcredits img {
  min-width: unset !important;
  min-height: unset !important;
  width: 20px !important;
  height: auto !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

/* ── Product page buttons: 2-row layout + recolor (2026-03-03) ──
   Row 1: [Купити] [Швидке замовлення]  — рівні половини
   Row 2: [Купити в кредит]             — повна ширина
   Жовтий знімаємо з Швидкого, ставимо на Кредит. */

/* Flex-контейнер — два рядки кнопок */
#product .action-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
}

/* Quantity-adder залишається своїм рядком */
#product .action-group .quantity-adder {
  width: 100% !important;
  flex: 0 0 100% !important;
}

/* .cart-обгортка: займає рівно половину */
#product .action-group .cart {
  flex: 1 1 calc(50% - 4px) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Кнопка Купити: на всю ширину свого flex-блоку */
#product .action-group .cart .btn-general,
#product #button-cart {
  width: 100% !important;
  height: 52px !important;
  border-radius: 44px !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* ── Швидке замовлення: половина рядка, НЕЙТРАЛЬНИЙ колір ── */
#product .action-group .btn-fastorder,
#product .btn-fastorder {
  flex: 1 1 calc(50% - 4px) !important;
  min-width: 0 !important;
  width: auto !important;
  height: 52px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  border-radius: 44px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #f0f4ff !important;
  color: #2c4f7e !important;
  border: 1.5px solid #d0dcf5 !important;
}

#product .action-group .btn-fastorder:hover,
#product .btn-fastorder:hover {
  background: #dce7ff !important;
  color: #1a3a66 !important;
  border-color: #b0c8f0 !important;
}

/* ── Купити в кредит: повна ширина, ЖОВТИЙ ── */
#product #button-ukrcredits {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  border-radius: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #E3C045 !important;
  color: #1a1100 !important;
  border: 0 !important;
  letter-spacing: 0.01em !important;
}

#product #button-ukrcredits:hover {
  background: #d0ac2d !important;
  color: #000000 !important;
}

/* Іконки всередині жовтої кнопки */
#product #button-ukrcredits img,
#button-ukrcredits img {
  min-width: unset !important;
  min-height: unset !important;
  width: 22px !important;
  height: auto !important;
  vertical-align: middle !important;
  margin: 0 1px !important;
  border-radius: 3px !important;
}

/* ── Product buttons v2: Швидке = чорний як Купити + responsive (2026-03-03) ── */

/* === ШВИДКЕ ЗАМОВЛЕННЯ: чорний з жовтим hover — ідентично до Купити === */
#product .action-group .btn-fastorder,
#product .btn-fastorder,
#popup-quickview .btn-fastorder {
  background: #0A0A0A !important;
  color: #ffffff !important;
  border: 0 !important;
  -webkit-transition: background .15s ease !important;
  transition: background .15s ease !important;
}

#product .action-group .btn-fastorder:hover,
#product .btn-fastorder:hover,
#popup-quickview .btn-fastorder:hover {
  background: #E3C045 !important;
  color: #0A0A0A !important;
  border: 0 !important;
}

/* === RESPONSIVE === */

/* Mobile: ≤ 767px — кнопки стакаються у стовпець */
@media (max-width: 767px) {
  #product .action-group {
    flex-direction: column !important;
    gap: 6px !important;
  }

  #product .action-group .cart {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  #product .action-group .cart .btn-general,
  #product #button-cart {
    width: 100% !important;
    height: 50px !important;
  }

  #product .action-group .btn-fastorder,
  #product .btn-fastorder {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 50px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  #product #button-ukrcredits {
    height: 50px !important;
  }
}

/* Tablet: 768px–1319px — рядок 1 рівні половини, рядок 2 повна ширина */
@media (min-width: 768px) and (max-width: 1319px) {
  #product .action-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #product .action-group .cart {
    flex: 1 1 calc(50% - 4px) !important;
  }

  #product .action-group .btn-fastorder,
  #product .btn-fastorder {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  #product #button-ukrcredits {
    flex: 0 0 100% !important;
  }
}

/* Desktop: ≥ 1320px — те саме що tablet, але з більшими відступами */
@media (min-width: 1320px) {
  #product .action-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  #product .action-group .cart {
    flex: 1 1 calc(50% - 5px) !important;
  }

  #product .action-group .btn-fastorder,
  #product .btn-fastorder {
    flex: 1 1 calc(50% - 5px) !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  #product #button-ukrcredits {
    flex: 0 0 100% !important;
  }
}

/* ── Quantity adder: растянуть на всю ширину action-group (2026-03-03) ── */

/* Обёртка — полная ширина + совпадающая высота с кнопками */
#product .action-group .quantity-adder {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 52px !important;
  border-radius: 44px !important;
  box-sizing: border-box !important;
}

/* quantity-number — flex-контейнер на всю ширину */
#product .action-group .quantity-adder .quantity-number {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Input — занимает всё свободное пространство между кнопками */
#product .action-group .quantity-adder .quantity-number input.quantity-product {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  text-align: center !important;
}

/* +/- кнопки — фиксированная ширина чуть больше для баланса */
#product .action-group .quantity-adder .add-action {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
}

/* codex-mm-open-hp-no-hover-dd-20260303: disable subcategory dropdown on
   category pill hover in mm_open_hp mode when not explicitly opened via button.
   Catalog button click adds active-m + m-sticky → dropdown works normally.
   Pill hover alone (no button click) → dropdown stays hidden. */
@media (min-width: 992px) {
  .menu-header-box.mm_open_hp:not(.m-sticky):not(.active-m) #menu-vertical #menu-vertical-list > li.menu-open > .ns-dd,
  .menu-header-box.mm_open_hp:not(.m-sticky):not(.active-m) #menu-vertical #menu-vertical-list > li.menu-open > .ns-dd.dropdown-menu-simple,
  .menu-header-box.mm_open_hp:not(.m-sticky):not(.active-m) #menu-vertical #menu-vertical-list > li.menu-open > .ns-dd.dropdown-menu-manufacturer,
  .menu-header-box.mm_open_hp:not(.m-sticky):not(.active-m) #menu-vertical #menu-vertical-list > li.menu-open > .ns-dd.dropdown-menu-information {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ===== CHECKOUT CRO v2 2026-03-04 ===== */

/* ── Cart Benefits Strip ── */
.cart-benefits-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 16px;
    padding: 0;
}
.cart-benefit-card {
    flex: 1 1 calc(25% - 10px);
    min-width: 140px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(145deg, #f4f8ff 0%, #eaf2ff 100%);
    border: 1px solid #dce9f9;
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .2s, box-shadow .2s, transform .18s;
}
.cart-benefit-card:hover {
    border-color: #b8d2f5;
    box-shadow: 0 6px 16px rgba(18, 60, 120, 0.10);
    transform: translateY(-2px);
}
.cart-benefit-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.82);
    border: 1px solid #c8ddf8;
    border-radius: 10px;
}
.cart-benefit-title {
    font-size: 13px;
    font-weight: 700;
    color: #112a4d;
    line-height: 1.3;
}
.cart-benefit-desc {
    font-size: 12px;
    color: #5a7a9b;
    line-height: 1.3;
    margin-top: 2px;
}

/* ── OPC Trust Cards (checkout sidebar) ── */
.opc-trust-cards {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.opc-trust-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, #f4f8ff 0%, #eaf2ff 100%);
    border: 1px solid #dce9f9;
    border-radius: 10px;
    padding: 9px 10px;
    min-width: 0;
}
.opc-trust-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.85);
    border: 1px solid #c8ddf8;
    border-radius: 8px;
}
.opc-trust-title {
    font-size: 12px;
    font-weight: 700;
    color: #112a4d;
    line-height: 1.25;
}
.opc-trust-desc {
    font-size: 11px;
    color: #5a7a9b;
    line-height: 1.25;
    margin-top: 1px;
}

/* ── OPC Payment Icons Row ── */
.opc-payment-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.opc-payment-row img {
    height: 26px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #e4edf8;
    padding: 2px 4px;
    background: #fff;
    object-fit: contain;
}
.opc-secure-text {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #27ae60;
    font-weight: 600;
    margin-left: 2px;
}

/* ── Cart Trust Mini (old, hide if exists) ── */
.cart-trust-mini {
    display: none !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cart-benefits-strip {
        gap: 8px;
    }
    .cart-benefit-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 130px;
        padding: 10px 11px;
    }
    .opc-trust-cards {
        flex-direction: column;
    }
}
@media (max-width: 479px) {
    .cart-benefit-card {
        flex: 1 1 100%;
    }
}

/* ===== END CHECKOUT CRO v2 ===== */

/* ===== CHECKOUT PAGE DESIGN 2026-03-04 ===== */

/* ─────────────────────────────────────────────────────────────────────────
   SHARED CARD MIXIN (via CSS custom properties)
───────────────────────────────────────────────────────────────────────── */
:root {
    --opc-card-bg: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%);
    --opc-card-border: 1px solid #dce9f8;
    --opc-card-radius: 18px;
    --opc-card-shadow: 0 6px 22px rgba(19, 55, 118, 0.07);
    --opc-card-shadow-hover: 0 10px 28px rgba(19, 55, 118, 0.11);
    --opc-title-color: #112a4d;
    --opc-accent: #3b82f6;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEADING
═══════════════════════════════════════════════════════════════════════ */
.opc-h1 {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 800;
    color: var(--opc-title-color);
    letter-spacing: -0.015em;
    margin-bottom: 20px;
    line-height: 1.15;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD STYLE — всі блоки лівої та правої колонки
═══════════════════════════════════════════════════════════════════════ */
/* Named blocks */
.checkout_form .checkout-сustomer,
.checkout_form .checkout-address,
.checkout_form .checkout-shipping-address,
.checkout_form .checkout-shipping-method,
.checkout_form .checkout-payment-method,
.checkout_form .checkout-comment {
    background: var(--opc-card-bg);
    border: var(--opc-card-border);
    border-radius: var(--opc-card-radius);
    box-shadow: var(--opc-card-shadow);
    padding: 20px 22px 18px !important;
    margin-bottom: 0;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.checkout_form .checkout-сustomer:hover,
.checkout_form .checkout-address:hover,
.checkout_form .checkout-shipping-method:hover,
.checkout_form .checkout-payment-method:hover {
    box-shadow: var(--opc-card-shadow-hover);
    border-color: #c4d9f3;
}

/* Cart block (onepcheckout_cart.twig outer div has no class → wrap via parent) */
.checkout_form .opc_block_cart > div,
.checkout-col-left .cart-list {
    background: var(--opc-card-bg) !important;
    border: var(--opc-card-border) !important;
    border-radius: var(--opc-card-radius) !important;
    box-shadow: var(--opc-card-shadow) !important;
    padding: 18px 20px !important;
}

/* Right sidebar totals card */
.totals-inner {
    background: var(--opc-card-bg);
    border: var(--opc-card-border);
    border-radius: var(--opc-card-radius);
    box-shadow: var(--opc-card-shadow);
    padding: 18px 18px 16px;
    overflow: visible;          /* fix: не обрізати trust-cards */
}
.checkout-col-fix-right .mb-30 {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADINGS — синя смуга зліва
═══════════════════════════════════════════════════════════════════════ */
.checkout-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--opc-title-color) !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #dce9f8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 14px !important;
}
.checkout-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: calc(100% - 16px);
    background: linear-gradient(180deg, var(--opc-accent) 0%, #1d52b8 100%);
    border-radius: 3px;
}

/* title-customer всередині checkout-heading — не дублювати стилі */
.checkout-heading .title-customer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.checkout-heading .title-customer::before {
    display: none !important;
}

/* OPC cart title (right sidebar "Ваше замовлення") */
.title-text-next {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dce9f8;
}
.title-text-next .opc-cart-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--opc-title-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FORM CONTROLS
═══════════════════════════════════════════════════════════════════════ */
.opc-label,
.checkout_form .control-label {
    font-size: 13px;
    font-weight: 600;
    color: #3a5578;
    margin-bottom: 5px;
    display: block;
}
.checkout_form .form-group.required .control-label::after {
    content: ' *';
    color: #e05252;
}

/* Text / textarea */
.checkout_form input.form-control,
.checkout_form textarea.form-control {
    border: 1.5px solid #d0e2f5;
    border-radius: 10px;
    background: #fff;
    color: #112a4d;
    font-size: 14px;
    height: 42px;
    padding: 8px 13px;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-shadow: none;
}
.checkout_form textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

/* Select — НЕ фіксована висота, нативний вигляд */
.checkout_form select.form-control {
    border: 1.5px solid #d0e2f5;
    border-radius: 10px;
    background: #fff;
    color: #112a4d;
    font-size: 14px;
    height: auto;
    min-height: 42px;
    padding: 6px 13px;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-shadow: none;
    -webkit-appearance: auto;
    appearance: auto;
}

/* Focus */
.checkout_form .form-control:focus {
    border-color: var(--opc-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none;
}
.checkout_form .form-control::placeholder {
    color: #aabcce;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CART ITEMS (in checkout)
═══════════════════════════════════════════════════════════════════════ */
.checkout_form .cart-item + div.cart-item {
    border-top: 1px dashed #dce9f8 !important;
}
.checkout_form .cart-item-prod-name a {
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-title-color);
    line-height: 1.35;
}
.checkout_form .cart-item-prod-name a:hover {
    color: var(--opc-accent);
}
.checkout_form .cart-item-price,
.checkout_form .cart-item-total {
    font-weight: 700;
    color: #1a4a8a;
    font-size: 14px;
}
.checkout_form .cart-item-left img {
    border-radius: 10px;
    border: 1px solid #dce9f8;
    background: #fff;
    padding: 4px;
}
.checkout_form .text-cart-item-price,
.checkout_form .text-cart-item-total {
    font-size: 11px;
    font-weight: 400;
    color: #7a9ab8;
    display: block;
    margin-bottom: 2px;
}
.checkout_form .btn-quantity-minus,
.checkout_form .btn-quantity-plus {
    background: #eef4fd;
    border: 1px solid #d0e2f5;
    color: var(--opc-title-color);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout_form .btn-quantity-minus:hover,
.checkout_form .btn-quantity-plus:hover {
    background: #dbeafe;
    border-color: var(--opc-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOTALS TABLE
═══════════════════════════════════════════════════════════════════════ */
.table_total .total-title {
    color: #5a7a9b;
    font-size: 13px;
    padding: 6px 0;
}
.table_total .total-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-title-color);
}
.table_total tr.total-last td {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--opc-title-color) !important;
    padding-top: 10px !important;
    border-top: 2px solid #dce9f8;
}

/* Shipping progress */
.free-ship-progress-bar {
    border-radius: 6px;
    overflow: hidden;
    height: 5px;
    margin-bottom: 5px;
    background: #e2ecf8;
}
.free-ship-bar-fill {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--opc-accent) 0%, #1d52b8 100%);
    height: 5px;
    transition: width 0.4s ease;
}
.free-ship-info {
    font-size: 12px;
    color: #6a8baa;
    margin-bottom: 12px;
}
.free-ship-info.active-free-ship {
    color: #27ae60;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   AGREE CHECKBOX
═══════════════════════════════════════════════════════════════════════ */
.checkout-agree {
    background: rgba(255,255,255,0.75);
    border: 1px solid #dde9f7;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.checkout-agree .chm-checkbox {
    font-size: 12px;
    color: #5a7a9b;
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIRM BUTTON
═══════════════════════════════════════════════════════════════════════ */
#button-register,
.confirm-block .btn-primary {
    background: linear-gradient(135deg, #1d52b8 0%, #3b82f6 60%, #60a5fa 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    height: 52px !important;
    box-shadow: 0 6px 20px rgba(29, 82, 184, 0.32) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
    color: #fff !important;
    width: 100% !important;
}
#button-register:hover,
.confirm-block .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(29, 82, 184, 0.40) !important;
    filter: brightness(1.07) !important;
}
#button-register:active,
.confirm-block .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(29, 82, 184, 0.22) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ERROR ALERT
═══════════════════════════════════════════════════════════════════════ */
.opc-alert-danger {
    background: #fff5f5;
    border: 1px solid #fccece;
    border-radius: 12px;
    color: #c0392b;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT TWEAKS
═══════════════════════════════════════════════════════════════════════ */
.checkout-col-center {
    gap: 20px;
    align-items: flex-start;
}
.checkout-col-left {
    margin-right: 0 !important;
}
.mb-30 {
    margin-bottom: 16px !important;
}
.breadcrumbs-box .breadcrumb {
    background: transparent;
    padding: 4px 0 12px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (768-991px)
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
    .checkout_form .checkout-сustomer,
    .checkout_form .checkout-address,
    .checkout_form .checkout-shipping-method,
    .checkout_form .checkout-payment-method,
    .checkout_form .checkout-comment {
        padding: 16px 18px 14px !important;
        border-radius: 14px;
    }
    .totals-inner { border-radius: 14px; padding: 16px 16px 14px; }
    .opc-h1 { font-size: 26px; margin-bottom: 16px; }
    .checkout-col-left, .checkout-col-fix-right { width: 100% !important; }
    .checkout-col-fix-right { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤767px)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .opc-h1 { font-size: 22px; margin-bottom: 12px; }
    .checkout_form .checkout-сustomer,
    .checkout_form .checkout-address,
    .checkout_form .checkout-shipping-method,
    .checkout_form .checkout-payment-method,
    .checkout_form .checkout-comment {
        padding: 14px 14px 12px !important;
        border-radius: 12px;
    }
    .checkout_form .opc_block_cart > div,
    .checkout-col-left .cart-list {
        padding: 14px 14px !important;
        border-radius: 12px !important;
    }
    .totals-inner {
        padding: 14px 14px 12px;
        border-radius: 12px;
    }
    .checkout-heading {
        font-size: 14px !important;
        padding-bottom: 11px !important;
        margin-bottom: 13px !important;
    }
    #button-register,
    .confirm-block .btn-primary {
        font-size: 15px !important;
        height: 48px !important;
        border-radius: 10px !important;
    }
    .checkout_form input.form-control,
    .checkout_form select.form-control {
        height: 40px;
        min-height: 40px;
        font-size: 14px;
        border-radius: 9px;
    }
    .opc-trust-cards { flex-direction: column; }
    .opc-trust-card { flex-direction: row; }
    .table_total tr.total-last td { font-size: 15px !important; }
    .mb-30 { margin-bottom: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤479px)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
    .opc-h1 { font-size: 20px; }
    .checkout_form .checkout-сustomer,
    .checkout_form .checkout-address {
        padding: 12px 12px 10px !important;
        border-radius: 10px;
    }
    .totals-inner { padding: 12px; border-radius: 10px; }
    .opc-payment-row img { height: 22px; }
    #button-register,
    .confirm-block .btn-primary {
        font-size: 14px !important;
        height: 46px !important;
    }
}

/* ===== END CHECKOUT PAGE DESIGN ===== */
/* ── Quantity fix 2026-03-04 ── */
.ch-cart-quantity .form-control { padding: 0 !important; height: 34px !important; border-radius: 0 !important; border-width: 1px 0 1px 0 !important; max-width: 30px !important; text-align: center !important; box-shadow: none !important; background: var(--up-quantity-bg) !important; color: var(--up-text-color) !important; }
.ch-cart-quantity .btn-quantity-minus { width: 28px !important; height: 34px !important; border-radius: 8px 0 0 8px !important; border-width: 1px 0 1px 1px !important; padding: 0 !important; background: var(--up-quantity-bg) !important; box-shadow: none !important; }
.ch-cart-quantity .btn-quantity-plus { width: 28px !important; height: 34px !important; border-radius: 0 8px 8px 0 !important; border-width: 1px 1px 1px 0 !important; padding: 0 !important; background: var(--up-quantity-bg) !important; box-shadow: none !important; }

/* ── Checkout breadcrumb — той самий стиль що й продуктова сторінка ── */
.breadcrumbs-box {
    margin-bottom: 14px;
    padding: 9px 16px;
    border: 1px solid #dfe9f8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
    display: flex;
    align-items: center;
}
.breadcrumbs-box .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}
/* All items */
.breadcrumbs-box .breadcrumb > li {
    font-size: 13px;
    color: #35577f;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
/* Links */
.breadcrumbs-box .breadcrumb > li > a {
    color: #35577f;
    text-decoration: underline;
    text-decoration-color: rgba(53, 87, 127, 0.35);
    text-underline-offset: 2px;
    transition: color 0.15s;
}
.breadcrumbs-box .breadcrumb > li > a:hover {
    color: #1d52b8;
    text-decoration-color: rgba(29, 82, 184, 0.5);
}
/* Separator "/" */
.breadcrumbs-box .breadcrumb > li:after {
    content: "/";
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin-left: 6px;
    color: #b0c8e0;
    font-weight: 400;
}
.breadcrumbs-box .breadcrumb > li:last-child:after {
    display: none;
}
.breadcrumbs-box .breadcrumb > li:before {
    content: '' !important;
    padding: 0 !important;
}
/* Current page (last li — non-link) */
.breadcrumbs-box .breadcrumb > li:last-child,
.breadcrumbs-box .breadcrumb > li:last-child > a {
    color: #163b69;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}
/* Dark theme */
.dark-theme .breadcrumbs-box {
    background: linear-gradient(180deg, rgba(22,39,62,0.7) 0%, rgba(17,31,50,0.7) 100%);
    border-color: #223755;
}
.dark-theme .breadcrumbs-box .breadcrumb > li > a,
.dark-theme .breadcrumbs-box .breadcrumb > li {
    color: #8bacc8;
}
.dark-theme .breadcrumbs-box .breadcrumb > li:last-child {
    color: #c8dff5;
}
/* Mobile */
@media (max-width: 767px) {
    .breadcrumbs-box {
        padding: 7px 12px;
        border-radius: 10px;
        overflow: hidden;
    }
    .breadcrumbs-box .breadcrumb > li:last-child {
        max-width: 220px;
    }
}
/* breadcrumbs-box CHECKOUT */

/* ===== CART PAGE DESIGN 2026-03-04 ===== */
/* Примітка: body class порожній, використовуємо :has() + .page-cart як anchor */

/* ── Breadcrumb — підтримка обох станів TWIG: з .breadcrumbs-box і без ── */
/* Варіант 1: TWIG додав .breadcrumbs-box обгортку */
.container:has(.page-cart) > .breadcrumbs-box,
/* Варіант 2: TWIG cache ще не оновився — raw <ul.breadcrumb> */
.container:has(.page-cart) > ul.breadcrumb {
    display: flex !important;
    align-items: center;
    margin-bottom: 14px !important;
    padding: 9px 16px !important;
    border: 1px solid #d8e8f8 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f4f8ff 0%, #edf3fd 100%) !important;
    box-shadow: 0 2px 10px rgba(19, 55, 118, 0.07) !important;
}

/* ── Breadcrumb items ── */
.container:has(.page-cart) > ul.breadcrumb > li,
.container:has(.page-cart) > ul.breadcrumb > li > a,
.container:has(.page-cart) > .breadcrumbs-box ul.breadcrumb > li,
.container:has(.page-cart) > .breadcrumbs-box ul.breadcrumb > li > a {
    font-size: 13px;
    color: #35577f;
    text-decoration: none;
}
.container:has(.page-cart) > ul.breadcrumb > li > a:hover,
.container:has(.page-cart) > .breadcrumbs-box ul.breadcrumb > li > a:hover {
    color: #1d52b8;
    text-decoration: underline;
}
/* Reset Bootstrap default slash, add our own via :after */
.container:has(.page-cart) > ul.breadcrumb > li:before {
    content: '' !important;
    padding: 0 !important;
}
.container:has(.page-cart) > ul.breadcrumb > li:after {
    content: '/';
    color: #b0c8e0;
    padding: 0 6px;
    font-weight: 400;
}
.container:has(.page-cart) > ul.breadcrumb > li:last-child:after {
    display: none;
}

/* ── Page H1 ── */
#content:has(.page-cart) > h1,
#content:has(.page-cart-empty) > h1 {
    font-size: clamp(20px, 2.4vw, 32px) !important;
    font-weight: 800 !important;
    color: #112a4d !important;
    letter-spacing: -0.01em;
    margin-bottom: 22px !important;
    line-height: 1.15;
}

/* ── Left column — card style ── */
.cart-col-left {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%) !important;
    border: 1px solid #dce9f8 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 22px rgba(19, 55, 118, 0.07) !important;
    padding: 20px 22px 18px !important;
    margin-bottom: 0 !important;
}

/* ── Right column — card style ── */
.cart-col-right {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%) !important;
    border: 1px solid #dce9f8 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 22px rgba(19, 55, 118, 0.07) !important;
    padding: 18px 20px 16px !important;
}

/* ── Hover lift ── */
.cart-col-left:hover,
.cart-col-right:hover {
    box-shadow: 0 10px 28px rgba(19, 55, 118, 0.11) !important;
    border-color: #c8ddf5 !important;
}

/* ── Cart item separators ── */
.cart-list .cart-item + .cart-item {
    border-top: 1px solid #dce9f8 !important;
    margin-top: 14px;
    padding-top: 14px;
}

/* ── Product thumbnail ── */
.cart-item .cart-item-left img {
    border-radius: 10px;
    border: 1px solid #dce9f8;
}

/* ── Product name ── */
.cart-item .cart-item-prod-name a {
    font-size: 14px;
    font-weight: 600;
    color: #112a4d;
    text-decoration: none;
    line-height: 1.35;
}
.cart-item .cart-item-prod-name a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

/* ── Product model ── */
.cart-item .product-model {
    font-size: 12px;
    color: #8aaec8;
    margin-top: 2px;
}

/* ── Price labels ── */
.cart-item .text-cart-item-price,
.cart-item .text-cart-item-total {
    font-size: 11px;
    color: #9ab5cc;
    display: block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Unit price ── */
.cart-item .cart-item-price {
    font-size: 13px;
    font-weight: 600;
    color: #4a6a8a;
}

/* ── Row total ── */
.cart-item .cart-item-total {
    font-size: 15px;
    font-weight: 700;
    color: #1a4a8a;
}

/* ── Remove button ── */
.cart-item .btn-remove {
    color: #c0392b !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.cart-item .btn-remove:hover {
    opacity: 1;
    background: transparent !important;
}

/* ── Coupon accordion ── */
.checkout-cart-accordion .text-checkout-modules {
    font-size: 13px;
    font-weight: 600;
    color: #3a5578;
    padding: 8px 0 12px;
    border-bottom: 1px solid #dce9f8;
    margin-bottom: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.checkout-cart-accordion .text-checkout-modules:hover { color: #3b82f6; }

/* ── Totals table ── */
.cart-col-right .table-cart { margin-bottom: 14px; width: 100%; }
.cart-col-right .table-cart td {
    color: #5a7a9b;
    font-size: 13px;
    padding: 5px 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle;
}
.cart-col-right .table-cart td.text-right { font-weight: 600; color: #2a4a6d; }
.cart-col-right .table-cart tr:last-child td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #112a4d !important;
    border-top: 1px solid #dce9f8 !important;
    padding-top: 11px !important;
}

/* ── Button container ── */
.cart-col-right > .dflex { flex-direction: column; gap: 0; }

/* ── Checkout CTA button ── */
.cart-col-right .btn-primary {
    background: linear-gradient(135deg, #1d52b8 0%, #3b82f6 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    height: 52px !important;
    box-shadow: 0 6px 20px rgba(29, 82, 184, 0.30) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    text-decoration: none !important;
    width: 100%;
}
.cart-col-right .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(29, 82, 184, 0.38) !important;
    filter: brightness(1.08);
    color: #fff !important;
}

/* ── Benefits strip ── */
.cart-benefits-strip { margin: 14px 0 !important; }

/* ── Responsive ── */
@media (max-width: 991px) {
    .cart-col-left, .cart-col-right {
        padding: 16px 18px 14px !important;
        border-radius: 14px !important;
    }
    #content:has(.page-cart) > h1 { font-size: 26px !important; margin-bottom: 16px !important; }
}
@media (max-width: 767px) {
    .cart-col-left, .cart-col-right {
        padding: 14px 14px 12px !important;
        border-radius: 12px !important;
    }
    #content:has(.page-cart) > h1 { font-size: 22px !important; margin-bottom: 14px !important; }
    .cart-col-right .btn-primary { font-size: 15px !important; height: 48px !important; border-radius: 10px !important; }
    .cart-item .cart-item-total { font-size: 14px; }
    .container:has(.page-cart) > .breadcrumbs-box,
    .container:has(.page-cart) > ul.breadcrumb {
        padding: 7px 12px !important;
        border-radius: 10px !important;
    }
}
@media (max-width: 479px) {
    .cart-col-left, .cart-col-right { padding: 12px 12px 10px !important; border-radius: 10px !important; }
    .cart-col-right .btn-primary { font-size: 14px !important; height: 46px !important; }
}

/* ===== END CART PAGE DESIGN ===== */


/* ===== BLOG PAGE DESIGN 2026-03-04 ===== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED CARD COMPONENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-page-h1 {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: #112a4d;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
    line-height: 1.2;
}

/* ── Card base ── */
.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dce9f8;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(19,55,118,0.07);
    text-decoration: none !important;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(19,55,118,0.13);
    border-color: #b0ccf0;
    text-decoration: none !important;
}

/* ── Cover ── */
.blog-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #e8f0fb;
    flex-shrink: 0;
}
.blog-card__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.35s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.05); }
.blog-card__cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(6,18,42,0.55) 100%);
    pointer-events: none;
}
.blog-card__date-badge {
    position: absolute; bottom: 10px; left: 12px; z-index: 2;
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.92);
}

/* ── Body ── */
.blog-card__body {
    display: flex; flex-direction: column; flex: 1;
    padding: 14px 16px 16px; gap: 7px;
}
.blog-card__title {
    font-size: 14px; font-weight: 700;
    color: #0f2540; line-height: 1.38; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card:hover .blog-card__title { color: #1d52b8; }
.blog-card__desc {
    font-size: 12px; color: #5a7898; line-height: 1.5; flex: 1; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__cta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; color: #3b82f6;
    margin-top: auto; transition: color 0.15s, gap 0.15s;
}
.blog-card:hover .blog-card__cta { color: #1d52b8; gap: 7px; }

/* ── Small card variant (related) ── */
.blog-card--sm .blog-card__title { font-size: 13px; -webkit-line-clamp: 2; }
.blog-card--sm .blog-card__body { padding: 11px 13px 13px; }

/* ── Module card variant (homepage latest) ── */
.blog-card--module .blog-card__body { padding: 12px 14px 14px; }
.blog-card--module .blog-card__title { font-size: 13px; -webkit-line-clamp: 2; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG LISTING PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}
/* Without sidebar — 3 columns */
.col-sm-12 .blog-grid { grid-template-columns: repeat(3, 1fr); }

.blog-grid--related { grid-template-columns: repeat(3, 1fr); gap: 14px; }

.blog-pagination { margin-top: 8px; display: flex; justify-content: center; }
.blog-pagination .pagination { margin: 0; }
.blog-empty { text-align: center; padding: 48px 20px; color: #5a7a9b; }

/* ── Sidebar list-group ── */
aside .list-group {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid #dce9f8 !important;
    box-shadow: 0 3px 14px rgba(19,55,118,0.06) !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}
aside .list-group-item {
    font-size: 13px !important; font-weight: 600 !important;
    color: #2a4a72 !important;
    background: linear-gradient(135deg, #f8fbff 0%, #f2f6fd 100%) !important;
    border-color: #e4eef8 !important;
    padding: 11px 16px !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    transition: background 0.15s, color 0.15s !important;
}
aside .list-group-item:hover, aside .list-group-item.active {
    background: rgba(59,130,246,0.08) !important; color: #1d52b8 !important;
}
/* Category item count badge */
aside .list-group-item::after {
    content: attr(data-count);
    font-size: 11px; font-weight: 700;
    background: #ddeeff; color: #3b82f6;
    border-radius: 20px; padding: 1px 7px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG ARTICLE PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-article {
    background: #fff;
    border: 1px solid #dce9f8;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(19,55,118,0.07);
    overflow: hidden;
    margin-bottom: 32px;
}

/* ── Hero image ── */
.blog-article__hero {
    width: 100%;
    aspect-ratio: 21/9;
    overflow: hidden;
    background: #e8f0fb;
}
.blog-article__hero-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* ── Header (meta + title) ── */
.blog-article__header {
    padding: 24px 28px 0;
}
.blog-article__meta {
    display: flex; align-items: center; gap: 16px;
    font-size: 12px; color: #8aaec8; font-weight: 600;
    margin-bottom: 12px;
}
.blog-article__meta-date,
.blog-article__meta-views {
    display: flex; align-items: center; gap: 5px;
}
.blog-article__title {
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 800; color: #0f2540;
    letter-spacing: -0.02em; line-height: 1.25;
    margin: 0 0 4px;
}

/* ── Article body ── */
.blog-article__body {
    padding: 20px 28px 28px;
    font-size: 15px; line-height: 1.75; color: #2a3f58;
}
.blog-article__body h2 {
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700; color: #0f2540;
    margin: 28px 0 12px; line-height: 1.3;
    border-left: 4px solid #3b82f6;
    padding-left: 14px;
}
.blog-article__body h3 {
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 700; color: #112a4d;
    margin: 22px 0 10px;
}
.blog-article__body p { margin: 0 0 16px; }
.blog-article__body ul, .blog-article__body ol {
    padding-left: 22px; margin: 0 0 16px;
}
.blog-article__body li { margin-bottom: 6px; }
.blog-article__body img {
    max-width: 100%; border-radius: 12px;
    border: 1px solid #dce9f8; margin: 12px 0;
}
.blog-article__body a { color: #3b82f6; text-decoration: underline; }
.blog-article__body a:hover { color: #1d52b8; }
.blog-article__body strong { color: #0f2540; font-weight: 700; }
.blog-article__body blockquote {
    border-left: 4px solid #3b82f6;
    background: #f4f8ff; border-radius: 0 10px 10px 0;
    padding: 14px 18px; margin: 20px 0; color: #2a4a72;
}

/* ── Share ── */
.blog-article__share {
    display: flex; align-items: center; gap: 12px;
    padding: 0 28px 24px;
    border-top: 1px solid #e8f0fb; margin-top: 4px; padding-top: 18px;
}
.blog-article__share-label {
    font-size: 13px; font-weight: 600; color: #8aaec8; flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION TITLES (Products / Related)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-section-title {
    display: flex; align-items: center; gap: 9px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 800; color: #112a4d;
    margin: 0 0 18px; padding-bottom: 14px;
    border-bottom: 2px solid #e8f0fb;
}
.blog-section-title svg { color: #3b82f6; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUCT CARDS (in article)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-products-section { margin-bottom: 32px; }
.blog-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.blog-prod-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #dce9f8;
    border-radius: 14px; box-shadow: 0 2px 10px rgba(19,55,118,0.06);
    text-decoration: none !important; color: inherit; overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.blog-prod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(19,55,118,0.12);
    border-color: #b0ccf0;
}
.blog-prod-card__img-wrap {
    aspect-ratio: 1/1; overflow: hidden; background: #f4f8ff;
}
.blog-prod-card__img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.3s;
}
.blog-prod-card:hover .blog-prod-card__img { transform: scale(1.06); }
.blog-prod-card__body {
    display: flex; flex-direction: column;
    padding: 11px 13px 13px; gap: 5px; flex: 1;
}
.blog-prod-card__name {
    font-size: 12px; font-weight: 600; color: #1a3a5c;
    line-height: 1.35; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-prod-card__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.blog-prod-card__price,
.blog-prod-card__special { font-size: 14px; font-weight: 800; color: #1a4a8a; }
.blog-prod-card__old { font-size: 12px; color: #a0b4c8; text-decoration: line-through; }
.blog-prod-card__btn {
    font-size: 11px; font-weight: 700; color: #3b82f6;
    margin-top: 4px;
}
.blog-prod-card:hover .blog-prod-card__btn { color: #1d52b8; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LATEST ARTICLES MODULE (homepage)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-latest-module { padding: 0; }
.blog-latest-module__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.blog-latest-module__title {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800; color: #112a4d;
    letter-spacing: -0.02em; margin: 0;
}
.blog-latest-module__all {
    font-size: 13px; font-weight: 700; color: #3b82f6;
    text-decoration: none; white-space: nowrap;
    transition: color 0.15s;
}
.blog-latest-module__all:hover { color: #1d52b8; }
.blog-latest-module__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RELATED SECTION (in article)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-related-section { margin-bottom: 32px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1199px) {
    .blog-latest-module__grid { grid-template-columns: repeat(3, 1fr); }
    .blog-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .blog-grid--related, .col-sm-12 .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-latest-module__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .blog-products-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-article__hero { aspect-ratio: 16/9; }
    .blog-article__header, .blog-article__body, .blog-article__share { padding-left: 20px; padding-right: 20px; }
    .blog-article__title { font-size: 22px; }
}
@media (max-width: 767px) {
    .blog-page-h1 { font-size: 20px; margin-bottom: 16px; }
    .blog-grid, .blog-grid--related, .col-sm-12 .blog-grid { grid-template-columns: 1fr; gap: 12px; }
    .blog-latest-module__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .blog-products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .blog-article { border-radius: 14px; }
    .blog-article__header, .blog-article__body, .blog-article__share { padding-left: 16px; padding-right: 16px; }
    .blog-article__body { font-size: 14px; }
    .blog-article__title { font-size: 20px; }
    .blog-article__body h2 { font-size: 17px; }
    .blog-prod-card__name { font-size: 11px; }
}
@media (max-width: 479px) {
    .blog-latest-module__grid { grid-template-columns: 1fr; }
    .blog-products-grid { grid-template-columns: 1fr 1fr; }
    .blog-section-title { font-size: 16px; }
}

/* ===== END BLOG PAGE DESIGN ===== */
/* BLOG CATEGORY NAV */
.blog-cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0}
.blog-cat-item{display:inline-flex;align-items:center;padding:6px 16px;border-radius:20px;border:1px solid #dce9f8;background:linear-gradient(135deg,#f8fbff,#eef4fd);color:#2a4a72;font-size:13px;font-weight:600;text-decoration:none;transition:all .18s}
.blog-cat-item:hover,.blog-cat-item.active{background:linear-gradient(135deg,#1d52b8,#3b82f6);border-color:#1d52b8;color:#fff;text-decoration:none}

/* BLOG LATEST INLINE MODULE */
.blog-latest-inline{margin:24px 0 0}
.blog-latest-inline__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#column-left .blog-latest-inline__grid,#column-right .blog-latest-inline__grid{grid-template-columns:1fr;gap:10px}
#column-left .blog-latest-inline,#column-right .blog-latest-inline{margin:16px 0 0}
#column-left .blog-card--sm .blog-card__cover,#column-right .blog-card--sm .blog-card__cover{aspect-ratio:16/9;max-height:110px}
#column-left .blog-card--sm .blog-card__title,#column-right .blog-card--sm .blog-card__title{font-size:12px;-webkit-line-clamp:3;line-clamp:3}
#column-left .blog-card--sm .blog-card__body,#column-right .blog-card--sm .blog-card__body{padding:8px 10px 10px}
#column-left .blog-card--sm .blog-card__cta,#column-right .blog-card--sm .blog-card__cta{font-size:11px}

@media(max-width:991px){.blog-latest-inline__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.blog-latest-inline__grid{grid-template-columns:1fr}}
.blog-card--sm .blog-card__cover{aspect-ratio:16/9}
.blog-card--sm .blog-card__title{font-size:13px;-webkit-line-clamp:3}

/* BLOG SIDEBAR CATEGORIES */
.blog-sidebar-cats{display:flex;flex-direction:column;gap:4px;margin:0 0 20px}
.blog-sidebar-cat{display:block;padding:8px 14px;border-radius:10px;border:1px solid #dce9f8;background:linear-gradient(135deg,#f8fbff,#eef4fd);color:#2a4a72;font-size:13px;font-weight:600;text-decoration:none;transition:all .18s}
.blog-sidebar-cat:hover,.blog-sidebar-cat.active{background:linear-gradient(135deg,#1d52b8,#3b82f6);border-color:#1d52b8;color:#fff;text-decoration:none}
/* Hide blog_category sidebar list-group legacy */
aside .list-group-item.active{background:#1d52b8;border-color:#1d52b8}

#column-left .blog-section-title,#column-right .blog-section-title{font-size:14px;font-weight:700;color:#112a4d;margin:0 0 10px;display:flex;align-items:center;gap:6px}
#column-left .blog-section-title svg,#column-right .blog-section-title svg{width:15px;height:15px}

/* \u2500\u2500 Blog pagination color (2026-03-04) \u2500\u2500 */
.blog-pagination .pagination>li>a,.blog-pagination .pagination>li>span{color:#1d52b8;border-color:#dce9f8;font-weight:600}
.blog-pagination .pagination>li.active>span{background:#1d52b8;border-color:#1d52b8;color:#fff}
.blog-pagination .pagination>li>a:hover{background:linear-gradient(135deg,#1d52b8,#3b82f6);border-color:#1d52b8;color:#fff}
.blog-pagination{margin-top:24px}


/* ── Blog share buttons (2026-03-04) ── */
.blog-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 24px;margin:0;background:linear-gradient(135deg,#f6f9ff,#eef4fd);border-top:1px solid #dce9f8;border-radius:0 0 16px 16px}
.blog-share__label{font-size:13px;font-weight:700;color:#2a4a72;white-space:nowrap}
.blog-share__btns{display:flex;gap:8px;flex-wrap:wrap}
.blog-share__btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all .18s;white-space:nowrap;line-height:1}
.blog-share__btn--fb{background:#1877f2;color:#fff}.blog-share__btn--fb:hover{background:#1558c0;color:#fff}
.blog-share__btn--tg{background:#0088cc;color:#fff}.blog-share__btn--tg:hover{background:#006eaa;color:#fff}
.blog-share__btn--wa{background:#25d366;color:#fff}.blog-share__btn--wa:hover{background:#128c7e;color:#fff}
.blog-share__btn--vb{background:#7360f2;color:#fff}.blog-share__btn--vb:hover{background:#5b4dc9;color:#fff}
.blog-share__btn--copy{background:#f0f3f8;color:#2a4a72;border:1px solid #dce9f8}.blog-share__btn--copy:hover{background:#1d52b8;color:#fff;border-color:#1d52b8}
@media(max-width:575px){
  .blog-share{gap:10px;padding:16px}
  .blog-share__btn span{display:none}
  .blog-share__btn{padding:8px 10px;border-radius:50%}
}

/* ── Sidebar related products (article page) (2026-03-04 v2) ── */
.article-sidebar-products{margin:16px 0 0}
.sidebar-prod-list{display:flex;flex-direction:column;gap:0}
.sidebar-prod-card{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef2f8;text-decoration:none;color:inherit;transition:all .18s}
.sidebar-prod-card:last-child{border-bottom:none;padding-bottom:0}
.sidebar-prod-card:hover{text-decoration:none;opacity:.82}
.sidebar-prod-card__img-wrap{flex:0 0 76px;width:76px;height:76px;border-radius:10px;overflow:hidden;background:#f3f7fd;border:1px solid #e5edf8}
.sidebar-prod-card__img{width:100%;height:100%;object-fit:contain}
.sidebar-prod-card__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sidebar-prod-card__name{font-size:13px;font-weight:600;color:#1a2a4a;line-height:1.38;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-prod-card__prices{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sidebar-prod-card__price{font-size:13px;font-weight:700;color:#1d52b8}
.sidebar-prod-card__price--special{color:#e35845}
.sidebar-prod-card__price-old{font-size:11px;color:#8899aa;text-decoration:line-through}
.sidebar-prod-card__cta{font-size:11px;color:#1d52b8;font-weight:600;margin-top:1px}

/* Mobile: sidebar becomes full-width — switch to 2-col grid */
@media(max-width:767px){
  .sidebar-prod-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .sidebar-prod-card{flex-direction:column;align-items:flex-start;padding:12px;border:1px solid #e5edf8;border-bottom:1px solid #e5edf8;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(29,82,184,.06)}
  .sidebar-prod-card:last-child{border-bottom:1px solid #e5edf8;padding-bottom:12px}
  .sidebar-prod-card__img-wrap{flex:none;width:100%;height:100px;border-radius:8px;border:none;background:#f3f7fd}
  .sidebar-prod-card__img{object-fit:contain}
  .sidebar-prod-card__name{-webkit-line-clamp:2}
}
@media(max-width:400px){
  .sidebar-prod-list{grid-template-columns:1fr}
  .sidebar-prod-card__img-wrap{height:120px}
}

/* ── Manufacturer / Brands page (2026-03-04-v2) ── */
.mfr-page{padding:0 0 20px}

/* Hero */
.mfr-hero{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;margin:0 0 18px;background:linear-gradient(135deg,#f6f9ff 0%,#eef4fd 100%);border:1px solid #dce9f8;border-radius:14px}
.mfr-hero__icon{flex:0 0 44px;width:44px;height:44px;background:linear-gradient(135deg,#1d52b8,#3b82f6);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;margin-top:2px}
.mfr-hero__title{margin:0 0 6px;font-size:24px;font-weight:800;color:#112a4d;line-height:1.2}
.mfr-hero__desc{margin:0;font-size:13px;color:#4a6080;line-height:1.55;max-width:680px}
@media(max-width:575px){
  .mfr-hero{padding:12px 14px;gap:10px;margin-bottom:14px}
  .mfr-hero__icon{flex:0 0 36px;width:36px;height:36px;border-radius:8px}
  .mfr-hero__title{font-size:18px}
}

/* A-Z Quick nav */
.mfr-az-nav{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 16px;padding:10px 14px;background:#f8fafd;border:1px solid #e5edf8;border-radius:10px}
.mfr-az-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 5px;background:#fff;border:1px solid #dce9f8;border-radius:6px;font-size:12px;font-weight:700;color:#3b6fb4;text-decoration:none;transition:all .15s}
.mfr-az-nav a:hover{background:linear-gradient(135deg,#1d52b8,#3b82f6);color:#fff;border-color:#1d52b8;text-decoration:none}

/* Section letter divider */
.mfr-section{margin-bottom:12px;background:#f8fafd;border:1px solid #dce9f8;border-radius:14px;padding:14px 16px 16px;box-shadow:0 1px 6px rgba(29,82,184,.06)}
.mfr-section__letter{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-bottom:12px;background:linear-gradient(135deg,#1d52b8,#3b82f6);color:#fff;font-size:14px;font-weight:800;border-radius:8px}

/* Brand grid */
.mfr-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1199px){.mfr-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:991px){.mfr-grid{grid-template-columns:repeat(4,1fr);gap:8px}}
@media(max-width:767px){.mfr-grid{grid-template-columns:repeat(3,1fr);gap:8px}}
@media(max-width:480px){.mfr-grid{grid-template-columns:repeat(2,1fr);gap:8px}}

/* Brand card */
.mfr-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 10px 10px;background:#fff;border:1px solid #e5edf8;border-radius:12px;text-decoration:none;color:#112a4d;transition:all .18s;text-align:center;min-height:100px;position:relative;overflow:hidden}
.mfr-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(29,82,184,.04),rgba(59,130,246,.04));opacity:0;transition:opacity .18s}
.mfr-card:hover{border-color:#3b82f6;box-shadow:0 4px 16px rgba(29,82,184,.13);transform:translateY(-2px);text-decoration:none;color:#1d52b8}
.mfr-card:hover::before{opacity:1}
.mfr-card:active{transform:translateY(-1px)}

/* Logo container */
.mfr-card__logo-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:52px}
.mfr-card__logo{max-width:90%;max-height:48px;object-fit:contain;filter:grayscale(15%) opacity(.9);transition:filter .18s}
.mfr-card:hover .mfr-card__logo{filter:grayscale(0%) opacity(1)}

/* Initials placeholder (no logo) */
.mfr-card__initials{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#e8f0fe,#dce9f8);color:#1d52b8;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.5px;transition:all .18s;flex-shrink:0}
.mfr-card:hover .mfr-card__initials{background:linear-gradient(135deg,#1d52b8,#3b82f6);color:#fff}

/* Card name */
.mfr-card__name{font-size:11px;font-weight:700;color:#112a4d;line-height:1.25;word-break:break-word}
.mfr-card:hover .mfr-card__name{color:#1d52b8}

/* Product count badge */
.mfr-card__count{font-size:10px;font-weight:600;color:#6b8ab0;background:#f0f4fb;border-radius:20px;padding:1px 7px;line-height:1.5}
.mfr-card:hover .mfr-card__count{background:#dce9f8;color:#1d52b8}

/* Empty state */
.mfr-empty{color:#6b8ab0;padding:32px 0;font-size:16px}


/* ================================================================
   ACCOUNT — повна адаптація під дизайн сайту (2026-03-05)
   ================================================================ */

/* --- Breadcrumb (вже є breadcrumb-box, але для акаунту додатковий відступ) --- */
[id^="account-"] .breadcrumb-box {
  margin-bottom: 14px;
}

/* --- Заголовок сторінки h1 --- */
[id^="account-"] > h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f6f9ff 0%, #eef4fd 100%);
  border: 1px solid #dce9f8;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 800;
  color: #112a4d;
  line-height: 1.2;
}
[id^="account-"] > h1::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 4px;
  height: 22px;
  background: linear-gradient(180deg, #1d52b8, #3b82f6);
  border-radius: 3px;
}

/* --- Картки контенту (override existing) --- */
.chm-account-content,
.chm-well,
.register-content.chm-content,
.register-content {
  background: #fff;
  border: 1px solid #e5edf8 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 1px 6px rgba(29,82,184,.06);
}
.chm-well.flex-column {
  display: flex;
  flex-direction: column;
}

/* --- Заголовки всередині карток --- */
.chm-content-title,
.chm-title-auth {
  font-size: 15px;
  font-weight: 700;
  color: #112a4d;
  margin-bottom: 16px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid #eef4fd;
}

/* --- Fieldsets у формах акаунту --- */
.chm-account-content fieldset,
.register-content fieldset {
  border: 1px solid #e5edf8;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.chm-account-content legend,
.register-content legend {
  width: auto;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #1d52b8;
  background: linear-gradient(135deg, #f0f6ff, #e8f0fd);
  border: 1px solid #dce9f8;
  border-radius: 6px;
  margin-bottom: 14px;
}

/* --- Inputs у формах --- */
.chm-account-content .form-control,
.register-content .form-control,
.chm-content .form-control,
.chm-well .form-control {
  border-color: #dce9f8;
  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  color: #112a4d;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.chm-account-content .form-control:focus,
.register-content .form-control:focus,
.chm-well .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
  outline: none;
}

/* --- Таблиці замовлень --- */
.ch-table {
  border-radius: 10px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5edf8;
  width: 100%;
}
.ch-table thead tr td,
.ch-table thead tr th {
  background: linear-gradient(180deg, #f6f9ff 0%, #eef4fd 100%);
  color: #1d52b8;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 2px solid #dce9f8 !important;
  padding: 10px 14px !important;
}
.ch-table tbody tr td {
  padding: 10px 14px !important;
  border-color: #f0f4fb !important;
  font-size: 14px;
  vertical-align: middle;
  color: #26374a;
}
.ch-table tbody tr:hover td {
  background: #f8fafd;
}
.ch-table a {
  color: #1d52b8;
  font-weight: 600;
  text-decoration: none;
}
.ch-table a:hover {
  color: #3b82f6;
  text-decoration: underline;
}

/* --- Порожній стан --- */
.chm-text-empty {
  padding: 40px 16px;
  text-align: center;
  color: #6b8ab0;
  font-size: 15px;
}

/* --- Кнопки всередині карток --- */
.chm-account-content .buttons,
.register-content .buttons {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef4fd;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Сайдбар акаунту --- */
.chm-list-group {
  background: #fff !important;
  border: 1px solid #e5edf8 !important;
  border-radius: 14px !important;
  padding: 14px !important;
}
.chm-list-group a.chm-list-group-item {
  border-radius: 8px !important;
  color: #26374a;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px !important;
  background: transparent;
  transition: all .15s;
}
.chm-list-group a.chm-list-group-item:hover {
  background: #f0f6ff !important;
  color: #1d52b8 !important;
}
.chm-list-group a.chm-list-group-item.active,
.chm-list-group a.active {
  background: linear-gradient(135deg, #1d52b8, #3b82f6) !important;
  color: #fff !important;
}
.chm-list-group-item.active::before {
  display: none;
}
.chm-list-group a + a {
  margin-top: 4px !important;
}

/* --- Login/Register auth блоки --- */
.chm-auth .chm-well {
  height: 100%;
}
.popup-social {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eef4fd;
}
.popup-social .social_title {
  font-size: 13px;
  color: #6b8ab0;
  margin-bottom: 10px;
}

/* --- Пагінація в акаунті --- */
.chm-account-content .pagination > li > a,
.chm-account-content .pagination > li > span {
  border-color: #dce9f8;
  color: #1d52b8;
  border-radius: 6px;
  margin: 0 2px;
}
.chm-account-content .pagination > .active > a,
.chm-account-content .pagination > .active > span {
  background: linear-gradient(135deg, #1d52b8, #3b82f6);
  border-color: #1d52b8;
  color: #fff;
}
.chm-account-content .pagination > li > a:hover {
  background: #f0f6ff;
  border-color: #3b82f6;
  color: #1d52b8;
}

/* --- Мобільна адаптація --- */
@media (max-width: 767px) {
  [id^="account-"] > h1 {
    font-size: 18px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .chm-account-content,
  .chm-well,
  .register-content {
    padding: 16px !important;
    border-radius: 10px !important;
  }
}

/* ================================================================
   ACCOUNT — кнопки: override чорного light-theme → синій стиль
   ================================================================ */

/* btn-primary */
[id^="account-"] .btn-primary,
[id^="account-"] .chm-btn-primary {
  background: linear-gradient(135deg, #1d52b8 0%, #3b82f6 100%) !important;
  background-color: #1d52b8 !important;
  border-color: #1d52b8 !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all .18s;
  box-shadow: 0 2px 8px rgba(29,82,184,.18);
}
[id^="account-"] .btn-primary:hover,
[id^="account-"] .btn-primary:focus,
[id^="account-"] .chm-btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #1d52b8 100%) !important;
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(29,82,184,.28);
  text-decoration: none;
}

/* btn-default */
[id^="account-"] .btn-default {
  background: #f0f4fb !important;
  background-color: #f0f4fb !important;
  color: #1d52b8 !important;
  border: 1px solid #dce9f8 !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all .18s;
}
[id^="account-"] .btn-default:hover,
[id^="account-"] .btn-default:focus {
  background: #dce9f8 !important;
  background-color: #dce9f8 !important;
  color: #112a4d !important;
  border-color: #b8cef5 !important;
}

/* btn-danger (delete address etc) */
[id^="account-"] .btn-danger {
  background: linear-gradient(135deg, #e53e3e, #c53030) !important;
  border-color: #c53030 !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
}
[id^="account-"] .btn-danger:hover {
  background: linear-gradient(135deg, #c53030, #9b2c2c) !important;
  border-color: #9b2c2c !important;
  color: #fff !important;
}

/* input[type=submit] btn-primary (register, edit форми) */
[id^="account-"] input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #1d52b8 0%, #3b82f6 100%) !important;
  border-color: #1d52b8 !important;
  color: #fff !important;
  height: 42px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
[id^="account-"] input[type="submit"].btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #1d52b8 100%) !important;
  box-shadow: 0 4px 14px rgba(29,82,184,.28);
}

/* ================================================================
   HIDE "без податку" — глобально
   ================================================================ */
.price-tax,
.points {
  display: none !important;
}

/* ================================================================
   CART SIDEBAR — редизайн під дизайн сайту (2026-03-05)
   ================================================================ */

/* --- Панель (фон + тінь) --- */
.light-theme .header-cart-fix-right {
  background: #fff;
  border-left: 1px solid #dce9f8;
  box-shadow: -4px 0 32px rgba(29,82,184,.10);
}

/* --- Header кошика --- */
.header-cart-top {
  background: linear-gradient(135deg, #f6f9ff 0%, #eef4fd 100%);
  border-bottom: 1px solid #dce9f8!important;
  padding: 0 20px!important;
  height: 58px!important;
}
.header-cart-title {
  font-size: 16px!important;
  font-weight: 800!important;
  color: #112a4d!important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-cart-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, #1d52b8, #3b82f6);
  border-radius: 2px;
  flex-shrink: 0;
}

/* --- Кнопка закрити --- */
.light-theme .header-cart-close {
  background: #fff!important;
  border: 1px solid #dce9f8!important;
  border-radius: 8px!important;
  width: 30px!important;
  height: 30px!important;
  transition: all .15s;
}
.light-theme .header-cart-close:hover {
  background: #f0f6ff!important;
  border-color: #3b82f6!important;
  box-shadow: none!important;
}
.light-theme .header-cart-close i {
  color: #1d52b8!important;
  font-size: 12px!important;
}

/* --- Товар у кошику --- */
.header-cart-product-item,
.header-cart-voucher-item {
  padding: 14px 0!important;
}
.header-cart-products > div:last-child {
  border-bottom: 1px solid #e5edf8!important;
}
.header-cart-product-item + div.header-cart-product-item,
.header-cart-product-item + div.header-cart-voucher-item,
.header-cart-voucher-item + div.header-cart-voucher-item {
  border-top: 1px solid #e5edf8!important;
}
.header-cart-product-item-left img {
  border-radius: 10px!important;
  border: 1px solid #e5edf8!important;
  padding: 4px!important;
  background: #f8fafd!important;
}
.header-cart-voucher-name,
.header-cart-product-name a {
  color: #112a4d!important;
  font-size: 13px!important;
  font-weight: 600!important;
  line-height: 1.35;
}
.header-cart-product-name a:hover {
  color: #1d52b8!important;
}
.header-cart-item-total {
  color: #1d52b8!important;
  font-size: 14px!important;
  font-weight: 800!important;
  margin-top: 8px!important;
}

/* --- Кнопка видалення --- */
.light-theme .header-cart-product-item-left .btn-link-delete {
  color: #b0bec5!important;
  transition: color .15s;
}
.light-theme .header-cart-product-item-left .btn-link-delete:hover {
  color: #e53e3e!important;
}

/* --- Кількість --- */
.ch-cart-quantity .btn-quantity-minus,
.ch-cart-quantity .btn-quantity-plus {
  width: 26px!important;
  height: 26px!important;
  border-radius: 6px!important;
  background: #f0f4fb!important;
  border: 1px solid #dce9f8!important;
  color: #1d52b8!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.ch-cart-quantity .btn-quantity-minus:hover,
.ch-cart-quantity .btn-quantity-plus:hover {
  background: #dce9f8!important;
}
.ch-cart-quantity .form-control {
  width: 36px!important;
  height: 26px!important;
  text-align: center!important;
  border: 1px solid #dce9f8!important;
  border-radius: 6px!important;
  font-size: 13px!important;
  font-weight: 700!important;
  color: #112a4d!important;
  padding: 0 4px!important;
}

/* --- Секція підсумків --- */
.header-cart-totals {
  background: #f8fafd;
  border-top: 1px solid #e5edf8;
  border-bottom: 1px solid #e5edf8;
  margin: 0 -15px!important;
  padding: 12px 15px!important;
}
@media (min-width: 576px) {
  .header-cart-totals {
    margin: 0 -30px!important;
    padding: 12px 30px!important;
  }
}
.header-cart-text-info {
  color: #1d52b8!important;
  font-size: 14px!important;
  font-weight: 600!important;
  padding: 8px 0!important;
}
.ch-total-item {
  margin-top: 8px!important;
}
.header-cart-total-title {
  color: #4a6080!important;
  font-size: 14px!important;
}
.header-cart-total-text {
  color: #112a4d!important;
  font-size: 15px!important;
  font-weight: 700!important;
}

/* --- Sticky footer з кнопками --- */
.light-theme .header-cart-sticky {
  background: #fff!important;
  border-top: 1px solid #e5edf8!important;
  padding: 16px 20px!important;
}
@media (min-width: 576px) {
  .light-theme .header-cart-sticky {
    padding: 20px 30px!important;
  }
}

/* --- Кнопки кошика --- */
.header-cart-sticky .chm-btn-primary,
.header-cart-actions .chm-btn-primary {
  background: linear-gradient(135deg, #1d52b8 0%, #3b82f6 100%)!important;
  border: none!important;
  color: #fff!important;
  font-weight: 700!important;
  border-radius: 10px!important;
  box-shadow: 0 2px 10px rgba(29,82,184,.20)!important;
  transition: all .18s!important;
}
.header-cart-sticky .chm-btn-primary:hover,
.header-cart-actions .chm-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(29,82,184,.30)!important;
  filter: brightness(1.06)!important;
}
.header-cart-sticky .chm-btn-grey,
.header-cart-actions .chm-btn-grey {
  background: #f0f4fb!important;
  color: #1d52b8!important;
  border: 1px solid #dce9f8!important;
  font-weight: 600!important;
  border-radius: 10px!important;
}
.header-cart-sticky .chm-btn-grey:hover,
.header-cart-actions .chm-btn-grey:hover {
  background: #dce9f8!important;
}
.header-cart-sticky .chm-btn-white,
.header-cart-actions .chm-btn-white {
  background: #fff!important;
  color: #1d52b8!important;
  border: 1px solid #dce9f8!important;
  font-weight: 600!important;
  border-radius: 10px!important;
}
.header-cart-sticky .chm-btn-white:hover,
.header-cart-actions .chm-btn-white:hover {
  background: #f0f4fb!important;
  color: #112a4d!important;
}

/* --- Порожній кошик --- */
.header-cart-scroll .cart-empty {
  color: #112a4d!important;
  font-weight: 700!important;
}
.header-cart-scroll .cart-empty-info-text {
  color: #6b8ab0!important;
}

/* codex-cart-totals-polish-2026-03-05 START */
.header-cart-total-info .ch-total-item:first-child:nth-last-child(2),
.page-cart .table-cart tr:first-child:nth-last-child(2) {
  display: none !important;
}

.header-cart-text-info {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d9e5fa;
  border-radius: 12px;
  background: #ffffff;
}

.header-cart-total-info {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d9e5fa;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
}

.header-cart-total-info .ch-total-item {
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0;
  padding: 10px 0;
  border-top: 1px dashed #d2e1fa;
}

.header-cart-total-info .ch-total-item:first-child {
  border-top: 0;
  padding-top: 4px;
}

.header-cart-total-info .ch-total-item:last-child {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #bfd4f7;
}

.header-cart-total-info .header-cart-total-title {
  width: auto;
  flex: 1 1 auto;
  color: #4b5f83;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.header-cart-total-info .header-cart-total-text {
  flex: 0 0 auto;
  max-width: none;
  padding-left: 12px;
  color: #1d3f7f;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}

.header-cart-total-info .ch-total-item:last-child .header-cart-total-title {
  color: #1f4ea5;
  font-weight: 700;
}

.header-cart-total-info .ch-total-item:last-child .header-cart-total-text {
  color: var(--up-bg-header-total-cart, #3F78E0);
  font-size: 20px;
  font-weight: 700;
}

.page-cart .table-cart {
  border: 1px solid #d9e5fa;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
  margin-bottom: 20px;
}

.page-cart .table-cart tr td {
  padding: 12px 14px;
  border-top: 1px dashed #d2e1fa;
}

.page-cart .table-cart tr:first-child td {
  border-top: 0;
}

.page-cart .table-cart .total-title {
  color: #4b5f83;
  font-size: 14px;
  font-weight: 600;
}

.page-cart .table-cart .total-text {
  color: #1d3f7f;
  font-size: 17px;
  font-weight: 700;
}

.page-cart .table-cart tr:last-child .total-title,
.page-cart .table-cart tr:last-child .total-text {
  color: var(--up-bg-header-total-cart, #3F78E0);
  font-weight: 700;
}

@media (max-width: 767px) {
  .header-cart-total-info .header-cart-total-text {
    font-size: 15px;
  }

  .header-cart-total-info .ch-total-item:last-child .header-cart-total-text {
    font-size: 18px;
  }

  .page-cart .table-cart tr td {
    padding: 10px 12px;
  }
}
/* codex-cart-totals-polish-2026-03-05 END */
/* codex-category-showcase-refine-2026-03-08 */
.category-showcase-strip {
  position: relative;
  margin: 8px 0 18px;
}

.category-showcase-strip .swiper-module {
  overflow: visible;
}

.category-showcase-strip .subcategory {
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.category-showcase-strip .swiper-sub-category__item {
  height: auto;
  width: clamp(152px, 15vw, 182px);
  padding-left: 10px;
  padding-right: 10px;
}

.category-showcase-strip .swiper-wrapper {
  align-items: stretch;
}

.category-showcase-strip .subcategory.bg_item {
  position: relative;
  min-height: 252px;
  padding: 14px 14px 16px;
  border: 1px solid #d7e4f6;
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.96) 48%, rgba(236, 243, 253, 0.98) 100%);
  box-shadow: 0 14px 26px rgba(20, 55, 110, 0.07);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.category-showcase-strip .subcategory.bg_item:before {
  display: none;
}

.category-showcase-strip .subcategory.bg_item:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 28%);
  pointer-events: none;
}

.category-showcase-strip .subcategory.bg_item .sc-image {
  position: relative;
  z-index: 1;
  min-height: 138px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: inset 0 0 0 1px #e4edf9, 0 10px 20px rgba(36, 74, 135, 0.06);
}

.category-showcase-strip .subcategory.bg_item .sc-image img {
  width: auto;
  max-width: 100%;
  max-height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(22, 52, 104, 0.10));
  mix-blend-mode: normal;
}

.category-showcase-strip .subcategory .sc-name {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #15345c;
  font-size: 14px;
  line-height: 1.24;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.category-showcase-strip .subcategory .sc-name-label {
  max-width: 100%;
  letter-spacing: -0.01em;
}

.category-showcase-strip .subcategory .sc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #cfe0f7;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 12px rgba(31, 76, 142, 0.08);
  color: #2a5aa1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.category-showcase-strip .swiper-sub-category__navigation {
  position: absolute;
  top: -54px;
  right: 0;
  left: auto;
  width: auto;
  display: flex;
  gap: 8px;
  opacity: 1;
  pointer-events: none;
}

.category-showcase-strip .swiper-sub-category__navigation .swiper-sub-category__arrow {
  pointer-events: auto;
  position: static;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 1px solid rgba(206, 220, 244, 0.92);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(18, 49, 101, 0.10);
  color: #235195;
  backdrop-filter: blur(10px);
}

.category-showcase-strip .swiper-sub-category__navigation .swiper-sub-category__arrow.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 992px) {
  .category-showcase-strip .subcategory.bg_item:hover {
    transform: translateY(-3px);
    border-color: #b7cdee;
    box-shadow: 0 18px 34px rgba(18, 49, 101, 0.12);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 1) 0%, rgba(245, 249, 255, 1) 46%, rgba(232, 240, 252, 1) 100%);
  }

  .category-showcase-strip .subcategory.bg_item:hover .sc-name-label {
    color: #1d4f98;
  }
}

#content.ns-smv .category-toolbar-box {
  border-color: #d7e4f6;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
  box-shadow: 0 14px 30px rgba(17, 49, 101, 0.08);
  padding: 12px 14px;
  margin-bottom: 18px;
}

#content.ns-smv .category-toolbar-box .localstorage {
  min-height: 52px;
  gap: 12px;
  flex-wrap: wrap;
}

#content.ns-smv .category-toolbar-box .ch-limit-sorts {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#content.ns-smv .category-toolbar-box .btn-group.d-inline-flex.align-items-center {
  gap: 10px;
}

#content.ns-smv .category-toolbar-box .us-category-sort-title {
  margin: 0;
  padding: 0;
  color: #163d72;
  font-size: 17px;
  font-weight: 800;
}

@media (min-width: 992px) {
  #content.ns-smv .category-toolbar-box .ddm-sort-list-pc {
    gap: 8px;
    margin-right: 0;
  }

  #content.ns-smv .category-toolbar-box .ddm-sort-list-pc.dropdown-menu.ch-dropdown > li > button {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 16px;
    color: #6880a4;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }

  #content.ns-smv .category-toolbar-box .ddm-sort-list-pc.dropdown-menu.ch-dropdown > li > button:hover {
    color: #214e90;
    background: rgba(255, 255, 255, 0.7);
  }

  #content.ns-smv .category-toolbar-box .ddm-sort-list-pc.dropdown-menu.ch-dropdown > li.active > button {
    color: #163d72;
    text-decoration: none;
    border-color: #cfdef4;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(26, 61, 116, 0.10);
  }
}

#content.ns-smv .category-toolbar-box .btn-sort-limit,
#content.ns-smv .category-toolbar-box .product_list_toolbar .btn-view {
  border-color: #cfdef4;
  border-radius: 12px;
  min-height: 46px;
  box-shadow: 0 8px 16px rgba(22, 56, 111, 0.06);
}

@media (max-width: 991px) {
  .category-showcase-strip {
    margin-bottom: 18px;
  }

  .category-showcase-strip .swiper-sub-category__item {
    width: 156px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .category-showcase-strip .subcategory.bg_item {
    min-height: 228px;
    padding: 12px 12px 14px;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(20, 55, 110, 0.08);
  }

  .category-showcase-strip .subcategory.bg_item .sc-image {
    min-height: 120px;
    margin-bottom: 10px;
    border-radius: 16px;
  }

  .category-showcase-strip .subcategory.bg_item .sc-image img {
    max-height: 94px;
  }

  .category-showcase-strip .subcategory .sc-name {
    font-size: 14px;
    gap: 6px;
  }

  .category-showcase-strip .subcategory .sc-count {
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
  }

  #content.ns-smv .category-toolbar-box {
    padding: 10px;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  #content.ns-smv .category-toolbar-box .localstorage {
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .category-showcase-strip .swiper-sub-category__navigation {
    display: none;
  }

  .category-showcase-strip .swiper-sub-category__item {
    width: 146px;
  }

  .category-showcase-strip .subcategory.bg_item .sc-image {
    min-height: 118px;
  }

  .category-showcase-strip .subcategory.bg_item .sc-image img {
    max-height: 90px;
  }

  #content.ns-smv .category-toolbar-box .ch-limit-sorts {
    width: 100%;
  }

  #content.ns-smv .category-toolbar-box .btn-group {
    width: 100%;
  }

  #content.ns-smv .category-toolbar-box .btn-sort-limit {
    width: 100%;
    justify-content: space-between;
  }
}
/* codex-header-desktop-logo-balance-2026-03-09 */
/* Desktop/laptop header rebalance for the new wide logo */
@media (min-width: 992px) {
  .up-header > .container > .row.dflex.align-items-center {
    flex-wrap: nowrap;
  }

  .up-header__left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    gap: 18px !important;
    padding-right: 0 !important;
  }

  .up-header__left #logo.up-header__logo-top {
    flex: 0 0 252px !important;
    width: 252px !important;
    min-width: 252px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  .up-header__left #logo.up-header__logo-top .up-header__logo-desktop {
    width: 100%;
  }

  .up-header__left #logo.up-header__logo-top img {
    width: 100% !important;
    max-width: 252px !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  .up-header__left .box-menu-top {
    flex: 0 0 auto;
    margin-left: 4px !important;
  }

  .up-header__right {
    flex: 1 1 auto !important;
    min-width: 0;
    padding-left: 18px !important;
  }

  .up-header__right .box-search {
    order: 1;
    flex: 0 1 380px;
    max-width: 380px;
    min-width: 280px;
    margin-left: 24px !important;
    margin-right: 16px !important;
  }

  .up-header__right .phone-box {
    order: 2;
    flex: 0 0 auto;
    margin-left: 0 !important;
    margin-right: 12px !important;
  }

  .up-header__right .box-account {
    order: 3;
    margin-left: auto !important;
  }

  .up-header__right .box-cart {
    order: 4;
  }

  .up-header .box-menu-top .btn-menu-top.msg-menu-btn-ready,
  .up-header .box-menu-top .btn-menu-top {
    min-width: 128px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (min-width: 1200px) {
  .up-header__left {
    gap: 20px !important;
  }

  .up-header__left #logo.up-header__logo-top {
    flex-basis: 292px !important;
    width: 292px !important;
    min-width: 292px !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    max-width: 292px !important;
  }

  .up-header__right .box-search {
    flex-basis: 430px;
    max-width: 430px;
    min-width: 320px;
    margin-left: 30px !important;
    margin-right: 18px !important;
  }
}

@media (min-width: 1440px) {
  .up-header__left #logo.up-header__logo-top {
    flex-basis: 306px !important;
    width: 306px !important;
    min-width: 306px !important;
  }

  .up-header__left #logo.up-header__logo-top img {
    max-width: 306px !important;
  }

  .up-header__right .box-search {
    flex-basis: 460px;
    max-width: 460px;
  }
}

#logo-footer .msg-footer-logo-wide {
  width: min(100%, 280px);
  height: auto;
}
/* codex-header-desktop-logo-balance-tune-2026-03-09 */
@media (min-width: 992px) {
  .up-header__left {
    gap: 16px !important;
  }

  .up-header__left #logo.up-header__logo-top,
  .up-header__left .box-menu-top {
    display: flex;
    align-items: center;
  }

  .up-header__right {
    padding-left: 8px !important;
  }

  .up-header__right .box-search {
    margin-left: 10px !important;
    margin-right: 14px !important;
  }
}

@media (min-width: 1200px) {
  .up-header__left {
    gap: 18px !important;
  }

  .up-header__right {
    padding-left: 10px !important;
  }

  .up-header__right .box-search {
    margin-left: 14px !important;
    margin-right: 16px !important;
  }
}

@media (min-width: 1440px) {
  .up-header__right {
    padding-left: 12px !important;
  }

  .up-header__right .box-search {
    margin-left: 16px !important;
  }
}



/* codex-footer-logo-center-and-white-2026-03-09 */
@media (min-width: 992px) {
  footer.ch-light-theme .footer-top {
    align-items: center;
  }

  footer.ch-light-theme #logo-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    text-align: center;
  }

  footer.ch-light-theme #logo-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 88px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 28px rgba(3, 10, 18, 0.18);
  }

  #logo-footer .msg-footer-logo-wide {
    width: min(100%, 328px);
    margin: 0 auto;
  }
}



/* codex-footer-top-unify-2026-03-09 */
@media (min-width: 992px) {
  footer.ch-light-theme .newsletter-info,
  footer.ch-light-theme #logo-footer a {
    min-height: 94px;
    border: 1px solid #253b5b;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(18, 34, 54, 0.96) 0%, rgba(13, 25, 41, 0.96) 100%);
    box-shadow: 0 8px 20px rgba(3, 10, 18, 0.28);
  }

  footer.ch-light-theme .box-newsletter .newsletter-info {
    min-height: 94px;
    padding: 17px 16px;
  }

  footer.ch-light-theme #logo-footer a {
    padding: 17px 20px;
  }
}

footer.ch-light-theme .btn.btn-subscribe,
footer.ch-light-theme .btn.btn-newsletter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

footer.ch-light-theme .btn.btn-subscribe svg,
footer.ch-light-theme .btn.btn-newsletter svg {
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(10, 24, 42, 0.18));
}

footer.ch-light-theme .btn.btn-subscribe svg path,
footer.ch-light-theme .btn.btn-newsletter svg path {
  fill: #ffffff !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
  footer.ch-light-theme .box-newsletter .newsletter-info,
  footer.ch-light-theme #logo-footer a {
    min-height: 121px;
  }
}


/* codex-header-mobile-logo-balance-2026-03-10 */
@media (max-width: 991px) {
  .up-header > .container > .row.dflex.align-items-center {
    min-height: 70px;
    padding-top: 6px !important;
    padding-bottom: 12px !important;
  }

  .up-header__left > #logo.up-header__logo-top {
    width: 132px !important;
    min-width: 132px !important;
    flex: 0 0 132px !important;
    top: calc(50% + 2px) !important;
  }

  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile.mr-auto,
  .up-header__logo-mobile,
  .up-header__logo-mobile.mr-auto {
    width: 132px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
  }

  .up-header__left > #logo.up-header__logo-top a,
  .up-header__logo-mobile a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img,
  .up-header__logo-mobile img.msg-mobile-logo-wide {
    width: 132px !important;
    height: auto !important;
    max-width: 132px !important;
    max-height: 23px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 359px) {
  .up-header__left > #logo.up-header__logo-top,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile.mr-auto,
  .up-header__logo-mobile,
  .up-header__logo-mobile.mr-auto {
    width: 108px !important;
    min-width: 108px !important;
    flex-basis: 108px !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img,
  .up-header__logo-mobile img.msg-mobile-logo-wide {
    width: 108px !important;
    max-width: 108px !important;
    max-height: 19px !important;
  }
}

@media (min-width: 360px) and (max-width: 389px) {
  .up-header__left > #logo.up-header__logo-top,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile.mr-auto,
  .up-header__logo-mobile,
  .up-header__logo-mobile.mr-auto {
    width: 116px !important;
    min-width: 116px !important;
    flex-basis: 116px !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img,
  .up-header__logo-mobile img.msg-mobile-logo-wide {
    width: 116px !important;
    max-width: 116px !important;
    max-height: 20px !important;
  }
}

@media (min-width: 430px) and (max-width: 991px) {
  .up-header__left > #logo.up-header__logo-top,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__left > #logo.up-header__logo-top .up-header__logo-mobile.mr-auto,
  .up-header__logo-mobile,
  .up-header__logo-mobile.mr-auto {
    width: 144px !important;
    min-width: 144px !important;
    flex-basis: 144px !important;
  }

  .up-header__left > #logo.up-header__logo-top img,
  .up-header__logo-mobile img,
  .up-header__logo-mobile img.msg-mobile-logo-wide {
    width: 144px !important;
    max-width: 144px !important;
    max-height: 25px !important;
  }
}

/* ============================================================
   codex-mobile-hero-usp-seo-20260310
   Mobile: hero block with visible title + USP badges
   Desktop: hidden (USP strip shows instead)
   ============================================================ */

/* RESET: allow home-usp-strip on desktop, suppress on mobile */
@media (max-width: 991px) {
  .home-usp-strip {
    display: none !important;
  }
}

/* Mobile hero — hidden on desktop */
.home-mobile-hero {
  display: none;
}

@media (max-width: 991px) {
  .home-mobile-hero {
    display: block;
    margin: 8px 0 12px;
    padding: 18px 16px 16px;
    background: linear-gradient(135deg, #142e5e 0%, #1a4fa8 60%, #1f6fe5 100%);
    border-radius: 18px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
  }

  /* subtle glow overlay */
  .home-mobile-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.10) 0%, transparent 65%);
    pointer-events: none;
  }

  .home-mobile-hero__title {
    font-size: clamp(18px, 5.5vw, 23px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.18;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
  }

  .home-mobile-hero__usp {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: 1;
  }

  .home-mobile-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #e8f3ff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  .home-mobile-hero__badge::before {
    content: '✓';
    font-size: 11px;
    font-weight: 800;
    color: #80d4a0;
  }
}

/* ============================================================
   codex-mobile-hits-spacing-20260310
   Tighten top margin for hits section on mobile so it
   sits snugly below the new hero block
   ============================================================ */
@media (max-width: 991px) {
  .home-hits-sales {
    margin-top: 0 !important;
  }

  .home-category-browser {
    margin-top: 4px;
  }
}

/* ============================================================
   codex-mobile-container-padding-20260310
   Ensure main container has proper side padding on mobile
   so cards don't touch screen edges
   ============================================================ */
@media (max-width: 767px) {
  .container > .home-mobile-hero,
  .container > .home-hits-sales,
  .container > .home-category-browser {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
   codex-mobile-category-browser-20260310
   Compact category tabs on mobile: horizontal scroll
   ============================================================ */
@media (max-width: 767px) {
  .home-category-browser__tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-category-browser__tabs::-webkit-scrollbar {
    display: none;
  }

  .home-category-browser__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Category card grid: 2 columns on mobile */
  .home-category-browser__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .home-category-browser__card {
    border-radius: 12px !important;
  }

  .home-category-browser__media {
    aspect-ratio: 4/3;
    overflow: hidden;
  }

  .home-category-browser__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================================
   codex-mobile-articles-20260310
   News articles: 1 column on mobile instead of 4
   ============================================================ */
@media (max-width: 767px) {
  .module-articles .module-articles__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .module-articles .module-articles__item {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ============================================================
   codex-blue-palette-ui-20260310
   Recolor black/yellow buttons → site blue palette
   Center mobile header logo
   Fix ukrcredits button mobile sizing
   ============================================================ */

/* ── 1. Override CSS vars: black→blue, yellow→lighter blue ── */
.light-theme {
  /* "Купити" (product listing card) */
  --up-bg-mod-add-to-cart:            #163b69;
  --up-color-mod-add-to-cart:         #FFFFFF;
  --up-bg-mod-add-to-cart-hover:      #1d52b8;
  --up-color-mod-add-to-cart-hover:   #FFFFFF;
  --up-bg-mod-add-to-cart-hover-block:#163b69;
  --up-color-mod-add-to-cart-hover-block: #FFFFFF;
  --up-bc-mod-add-to-cart:            transparent;
  --up-bc-mod-add-to-cart-hover:      transparent;

  /* "Купити" (product page) */
  --up-bg-pp-add-to-cart:             #163b69;
  --up-color-pp-add-to-cart:          #FFFFFF;
  --up-bg-pp-add-to-cart-hover:       #1d52b8;
  --up-color-pp-add-to-cart-hover:    #FFFFFF;
  --up-bc-pp-add-to-cart:             transparent;
  --up-bc-pp-add-to-cart-hover:       transparent;

  /* "Швидке замовлення" fastorder button — keep light-blue outline (our override), reset theme defaults */
  --up-bg-pp-fastorder:               #f0f4ff;
  --up-color-pp-fastorder:            #2c4f7e;
  --up-bg-pp-fastorder-hover:         #dce7ff;
  --up-color-pp-fastorder-hover:      #1a3a66;
  --up-bc-pp-fastorder:               #d0dcf5;
  --up-bc-pp-fastorder-hover:         #b0c8f0;

  /* Header cart button */
  --up-bg-header-cart:                #163b69;
  --up-color-header-cart:             #FFFFFF;

  /* Call-widget total (CW) — was yellow, now blue accent */
  --up-bg-header-total-cw:            #1d52b8;
  --up-color-header-total-cw:         #FFFFFF;

  /* Scroll-to-top */
  --up-bg-scroll-top:                 #163b69;
  --up-bg-scroll-top-hover:           #1d52b8;

  /* "btn-black" generic */
  --up-bg-btn-black:                  #163b69;
  --up-color-btn-black:               #FFFFFF;
  --up-bg-btn-black-hover:            #1d52b8;
  --up-color-btn-black-hover:         #FFFFFF;
}

/* ── 2. "Купити в кредит" (#button-ukrcredits) — blue, full-width, mobile-safe ── */
#product #button-ukrcredits,
#button-ukrcredits {
  background: #1d52b8 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 52px !important;
  border-radius: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#product #button-ukrcredits:hover,
#button-ukrcredits:hover {
  background: #2563eb !important;
  color: #FFFFFF !important;
}

/* Іконки всередині кнопки кредиту */
#product #button-ukrcredits img,
#button-ukrcredits img {
  min-width: unset !important;
  min-height: unset !important;
  width: 22px !important;
  height: auto !important;
  vertical-align: middle !important;
  margin: 0 1px !important;
  border-radius: 3px !important;
}

/* Mobile: ensure button still full-width on very narrow screens */
@media (max-width: 575px) {
  #product #button-ukrcredits,
  #button-ukrcredits {
    height: 48px !important;
    font-size: 13px !important;
  }
  #product #button-ukrcredits img,
  #button-ukrcredits img {
    width: 18px !important;
  }
}

/* ── 3. Mobile header logo centering ── */
@media (max-width: 991px) {
  /* Relative anchor for the absolute logo */
  .up-header > .container > .row.dflex {
    position: relative;
  }

  /* Desktop logo hidden on mobile */
  .up-header__logo-desktop {
    display: none !important;
  }

  /* Logo container: absolute center of the header row */
  #logo.up-header__logo-top {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #logo.up-header__logo-top a,
  #logo.up-header__logo-top img {
    pointer-events: all !important;
  }

  /* Remove mr-auto shift that was causing asymmetry */
  .up-header__logo-mobile.mr-auto {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
/* ============================================================
   codex-fix-fastorder-ghost-20260310
   Override earlier black !important on Швидке замовлення.
   Result: ghost/outline button in brand-blue.
   ============================================================ */

/* Override all breakpoints with maximum specificity chain */
body #product .action-group .btn-fastorder,
body #product .btn-fastorder,
body #popup-quickview .btn-fastorder {
  background: transparent !important;
  background-color: transparent !important;
  color: #163b69 !important;
  border: 2px solid #163b69 !important;
  -webkit-transition: background .15s ease, color .15s ease !important;
  transition: background .15s ease, color .15s ease !important;
}

body #product .action-group .btn-fastorder:hover,
body #product .btn-fastorder:hover,
body #popup-quickview .btn-fastorder:hover {
  background: #163b69 !important;
  background-color: #163b69 !important;
  color: #ffffff !important;
  border-color: #163b69 !important;
}

/* Keep sizing/layout from existing rules, only override colors */
/* ============================================================
   codex-fix-goods-bar-blue-20260310
   Recolor fixed-goods-bar (wishlist/compare/viewed pill) black→blue
   ============================================================ */
.light-theme {
  --up-bg-fix-bar:           #163b69;
  --up-bg-btn-fix-bar:       #1d52b8;
  --up-bc-fix-bar:           #1a4a80;
  --up-color-icon-btn-fix-bar: #FFFFFF;
}
/* ============================================================
   codex-fix-share-btn-tabs-20260310
   Share button was position:absolute right:6px inside our
   border-radius:16px tab box — appeared on the border/edge.
   Fix: switch to flex item layout inside our tabs_top box.
   ============================================================ */

/* 1. Ensure container-tab is flex row */
.h1-prod-name + .row #content > .tabs__header.tabs_top .container-tab {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 2. Tab scroll area takes all remaining space */
.h1-prod-name + .row #content > .tabs__header.tabs_top .tabs__header__scroll {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}

/* 3. Share button: static flex item at the end (not absolute overlay) */
.h1-prod-name + .row #content > .tabs__header.tabs_top.has-share-next .top-product-button {
  position: static !important;
  background: transparent !important;
  padding: 0 0 0 8px !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* 4. Remove the padding-right that was reserved for the absolute button */
.h1-prod-name + .row #content > .tabs__header.tabs_top.has-share-next .my-tabs {
  padding-right: 0 !important;
}

/* 5. Hide the ::after gradient fade — our box has its own border */
.h1-prod-name + .row #content > .tabs__header.tabs_top::after {
  display: none !important;
}

/* ==========================================
   [codex-ukrcredits-popup-design-20260311]
   UkrCredits popup — site design adaptation
   Palette: #163b69 / #1d52b8 / #f4f7fc
   ========================================== */

/* Overlay */
.mfp-bg {
  background: rgba(22, 59, 105, 0.55) !important;
}
/* Popup container */
#ukrcredit-popup {
  padding: 28px 24px 20px !important;
  max-width: 700px !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(22, 59, 105, 0.2) !important;
}
/* Title */
#ukrcredit-popup .credithead {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #163b69 !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid #e8eef8 !important;
}
/* Close button */
.mfp-close {
  color: #163b69 !important;
  opacity: 0.55 !important;
  font-size: 32px !important;
  top: 4px !important;
  right: 4px !important;
}
.mfp-close:hover { opacity: 1 !important; }

/* Proposition card */
#ukrcredit-popup .proposition {
  border: none !important;
  border-left: 4px solid #1d52b8 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  background: #f4f7fc !important;
  transition: border-color 0.2s, background 0.2s;
}
#ukrcredit-popup .proposition:hover {
  background: #edf2fb !important;
  border-left-color: #163b69 !important;
}
#ukrcredit-popup .proposition:last-child { margin-bottom: 0 !important; }

/* Bank name column */
#ukrcredit-popup .prop_name {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center !important;
  width: calc(30% - 8px) !important;
  padding-right: 12px !important;
  vertical-align: middle;
}
#ukrcredit-popup .prop_name img {
  width: 34px !important; height: 34px !important;
  object-fit: contain !important; max-width: 34px !important;
}
#ukrcredit-popup .prop_name span {
  font-size: 11px !important; font-weight: 600 !important;
  color: #163b69 !important; line-height: 1.3 !important;
}
#ukrcredit-popup .prop_name .fa-question {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important;
  width: 17px !important; height: 17px !important;
  border-radius: 50% !important; background: #dde8f5 !important;
  color: #163b69 !important; font-size: 9px !important; cursor: pointer !important;
}

/* Info column */
#ukrcredit-popup .prop_info {
  width: calc(70% - 8px) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Calculator row */
#ukrcredit-popup .prop_calc {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 5px 7px !important;
  margin-bottom: 10px !important; text-align: left !important;
}
#ukrcredit-popup .prop_paymentsCount {
  font-size: 13px !important; font-weight: 700 !important;
  color: #163b69 !important; white-space: nowrap !important;
  width: auto !important; display: inline !important;
}
/* Month select */
#ukrcredit-popup .prop_select { display: inline-block !important; width: auto !important; }
#ukrcredit-popup .prop_select .form-control {
  height: 33px !important; min-width: 82px !important;
  border: 1.5px solid #c8d8ec !important; border-radius: 8px !important;
  color: #163b69 !important; font-weight: 600 !important;
  font-size: 12px !important; padding: 3px 8px !important;
  background: #fff !important; cursor: pointer !important; box-shadow: none !important;
}
#ukrcredit-popup .prop_select .form-control:focus {
  border-color: #1d52b8 !important; outline: none !important;
}
/* Prices */
#ukrcredit-popup .prop_permounth,
#ukrcredit-popup .prop_price {
  font-size: 13px !important; color: #4a5568 !important;
  white-space: nowrap !important; width: auto !important; display: inline !important;
}
#ukrcredit-popup .prop_permounth span,
#ukrcredit-popup .prop_price span {
  font-weight: 700 !important; color: #163b69 !important;
}

/* Slider track */
#ukrcredit-popup [id^="termSlider"] {
  height: 6px !important; background: #dde8f5 !important;
  border: none !important; border-radius: 6px !important;
  margin: 2px 0 10px !important; position: relative !important;
}
#ukrcredit-popup [id^="termSlider"].ui-slider {
  height: 6px !important; border: none !important; background: #dde8f5 !important;
}
/* Progress fill */
#ukrcredit-popup .progress {
  height: 6px !important; background: transparent !important;
  box-shadow: none !important; border-radius: 6px !important;
  margin: 0 !important; position: absolute !important;
  top: 0 !important; left: 0 !important; width: 100% !important; overflow: visible !important;
}
#ukrcredit-popup .progress-bar {
  background: #1d52b8 !important; height: 6px !important;
  border-radius: 6px !important; box-shadow: none !important;
  transition: width 0.15s ease !important;
}
/* Slider handle */
#ukrcredit-popup .ui-slider-handle {
  width: 18px !important; height: 18px !important; top: -6px !important;
  background: #1d52b8 !important; border: 3px solid #fff !important;
  border-radius: 50% !important; cursor: grab !important; outline: none !important;
  box-shadow: 0 2px 8px rgba(29,82,184,0.35) !important;
}
#ukrcredit-popup .ui-slider-handle:hover,
#ukrcredit-popup .ui-slider-handle:focus,
#ukrcredit-popup .ui-state-active.ui-slider-handle {
  background: #163b69 !important; cursor: grabbing !important;
}
#ukrcredit-popup .ui-state-default,
#ukrcredit-popup .ui-widget-content .ui-state-default {
  border: none !important; background: #1d52b8 !important;
}

/* Оформити button */
#ukrcredit-popup .prop_total {
  text-align: right !important; margin-top: 6px !important;
}
#ukrcredit-popup .prop_total > * {
  width: auto !important; display: inline-block !important;
}
#ukrcredit-popup .prop_total button,
#ukrcredit-popup .prop_total .btn-primary {
  background: #163b69 !important; border-color: #163b69 !important;
  color: #fff !important; border-radius: 44px !important;
  padding: 9px 26px !important; font-size: 13px !important;
  font-weight: 600 !important; letter-spacing: 0.2px !important;
  box-shadow: 0 4px 12px rgba(22,59,105,0.22) !important;
  transition: background 0.2s !important;
}
#ukrcredit-popup .prop_total button:hover,
#ukrcredit-popup .prop_total .btn-primary:hover {
  background: #1d52b8 !important; border-color: #1d52b8 !important;
}

/* Mobile */
@media (max-width: 600px) {
  #ukrcredit-popup { padding: 20px 14px 16px !important; }
  #ukrcredit-popup .prop_name,
  #ukrcredit-popup .prop_info {
    width: 100% !important; display: block !important; padding-right: 0 !important;
  }
  #ukrcredit-popup .prop_name {
    flex-direction: row !important; justify-content: flex-start !important;
    margin-bottom: 10px !important; gap: 10px !important;
  }
  #ukrcredit-popup .prop_name span { text-align: left !important; }
  #ukrcredit-popup .prop_calc { flex-wrap: wrap !important; gap: 4px 8px !important; }
  #ukrcredit-popup .prop_total { text-align: center !important; }
}

/* ==========================================
   [/codex-ukrcredits-popup-design-20260311]
   ========================================== */


/* ==========================================
   [codex-stickers-redesign-20260311]
   Product stickers — site design adaptation
   Top: #163b69 (navy) | New: #1d52b8 (blue)
   Hit: #e16a0a (orange) | Sale: #e02424 (red)
   ========================================== */

/* --- Color variables override --- */
.light-theme {
  --popular-bg-color:      #163b69;
  --popular-text-color:    #FFFFFF;
  --popular-icon-color:    #FFFFFF;

  --newproduct-bg-color:   #1d52b8;
  --newproduct-text-color: #FFFFFF;
  --newproduct-icon-color: #FFFFFF;

  --bestseller-bg-color:   #e16a0a;
  --bestseller-text-color: #FFFFFF;
  --bestseller-icon-color: #FFFFFF;

  --special-bg-color:      #e02424;
  --special-text-color:    #FFFFFF;
  --special-icon-color:    #FFFFFF;
}

/* --- Shape & typography upgrade --- */
.sticker-ns {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  height: 22px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20) !important;
  line-height: 14px !important;
}

@media (min-width: 768px) {
  .sticker-ns {
    font-size: 10.5px !important;
    padding: 5px 11px !important;
    height: 26px !important;
    letter-spacing: 0.8px !important;
    border-radius: 6px !important;
  }
}

/* Sale badge: vivid red, pill stays */
.sticker-ns.special {
  box-shadow: 0 2px 8px rgba(224,36,36,0.28) !important;
}
/* New badge: site blue glow */
.sticker-ns.newproduct {
  box-shadow: 0 2px 8px rgba(29,82,184,0.28) !important;
}
/* Top badge: navy shadow */
.sticker-ns.popular {
  box-shadow: 0 2px 8px rgba(22,59,105,0.30) !important;
}
/* Hit badge: orange glow */
.sticker-ns.bestseller {
  box-shadow: 0 2px 8px rgba(225,106,10,0.28) !important;
}

/* Also fix discount % badge */
.sticker-ch-pd.procent-skidka,
.sticker-ns.procent-skidka {
  background: #e02424 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  border-radius: 5px !important;
}

/* ==========================================
   [/codex-stickers-redesign-20260311]
   ========================================== */


/* ==========================================
   [codex-fix-stickers-product-page-20260311]
   Override hardcoded gradient stickers on
   product page thumbnails + recent-viewed
   ========================================== */

/* TOP (popular) — dark navy gradient */
#product .thumbnails .sticker-ns.popular,
.recent-viewed-module .sticker-ns.popular {
  border-color: #2a5a9f !important;
  background: linear-gradient(180deg, #1d52b8 0%, #163b69 100%) !important;
}

/* NEW (newproduct) — site blue gradient */
#product .thumbnails .sticker-ns.newproduct,
.recent-viewed-module .sticker-ns.newproduct {
  border-color: #4a7fd4 !important;
  background: linear-gradient(180deg, #3b7fe8 0%, #1d52b8 100%) !important;
}

/* HIT (bestseller) — orange gradient */
#product .thumbnails .sticker-ns.bestseller,
.recent-viewed-module .sticker-ns.bestseller {
  border-color: #f4956e !important;
  background: linear-gradient(180deg, #f48040 0%, #e16a0a 100%) !important;
}

/* SALE (special) — vivid red gradient (keep) */
#product .thumbnails .sticker-ns.special,
.recent-viewed-module .sticker-ns.special {
  border-color: #f58080 !important;
  background: linear-gradient(180deg, #ff5555 0%, #e02424 100%) !important;
}

/* Also fix typography on product page to match catalog */
#product .thumbnails .sticker-ns,
.recent-viewed-module .sticker-ns {
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  font-size: 11px !important;
}

/* ==========================================
   [/codex-fix-stickers-product-page-20260311]
   ========================================== */


/* ==========================================
   [codex-mobile-polish-20260311]
   Mobile polish: swiper touch | header sym
   | news 2-col | bottom bar blue
   ========================================== */

/* ---- 1. Swiper: allow vertical page scroll ---- */
/* touch-action: pan-y lets browser handle vertical
   scroll natively while Swiper handles horizontal */
.home-hits-sales .swiper,
.home-hits-sales .swiper-module {
  touch-action: pan-y !important;
}

/* ---- 2. Header: symmetric buttons on mobile ---- */
/* Hamburger = 44x44, phone was 30x30 — equalize */
@media (max-width: 767px) {
  .up-header .btn-open-contact {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
}

/* ---- 3. Новини block: 2-col layout on mobile ---- */
@media (max-width: 575px) {
  .latest-atricles .module-articles__item.col-xs-12 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: left !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .latest-atricles .module-articles__list.row-flex {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  .latest-atricles .module-articles__content {
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .latest-atricles .module-articles__image {
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .latest-atricles .module-articles__image img {
    border-radius: 8px !important;
    max-height: 110px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .latest-atricles .module-articles__title {
    margin-bottom: 6px !important;
  }
  .latest-atricles .module-articles__title a {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
  }
  .latest-atricles .module-atricles__footer {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
  .latest-atricles .module-articles__date-text {
    font-size: 11px !important;
  }
  .latest-atricles .module-atricles__viewed {
    font-size: 11px !important;
  }
}

/* ---- 4. Mobile bottom bar — site blue palette ---- */

/* Main bar: dark navy background */
#fm-fixed-mobile-bottom.fm_type_design_bottom_2,
#fm-fixed-mobile-bottom.fm_type_design_bottom_3 {
  background: #163b69 !important;
}

/* Individual buttons: site blue */
#fm-fixed-mobile-bottom.fm_type_design_bottom_3 .btn-fm-bottom:not(.btn-go-home) {
  background: #1d52b8 !important;
}

/* Icons + SVG: white */
#fm-fixed-mobile-bottom .btn-fm-bottom [class^="up-icon-"],
#fm-fixed-mobile-bottom .btn-fm-bottom [class*=" up-icon-"],
#fm-fixed-mobile-bottom .icon-chats,
#fm-fixed-mobile-bottom .icon-close-chats,
#fm-fixed-mobile-bottom .text-a-icon {
  color: #ffffff !important;
}

/* SVG paths inside chat button */
#fm-fixed-mobile-bottom .btn-fm-bottom svg path,
#fm-fixed-mobile-bottom .btn-fm-bottom svg circle,
#fm-fixed-mobile-bottom .btn-fm-bottom svg rect {
  fill: currentColor;
}

/* Over-footer state: white bar + light blue buttons + navy icons */
#fm-fixed-mobile-bottom.fm_type_design_bottom_2.over-footer,
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer {
  background: #ffffff !important;
}
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer .btn-fm-bottom:not(.btn-go-home) {
  background: #dde8f5 !important;
}
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer .btn-fm-bottom [class^="up-icon-"],
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer .btn-fm-bottom [class*=" up-icon-"],
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer .icon-chats,
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer .icon-close-chats,
#fm-fixed-mobile-bottom.fm_type_design_bottom_3.over-footer .text-a-icon {
  color: #163b69 !important;
}

/* ==========================================
   [/codex-mobile-polish-20260311]
   ========================================== */


/* ==========================================
   [codex-swiper-panxy-fix-20260311]
   Fix: hits carousel blocks vertical scroll
   Existing rule had touch-action: pan-x only
   → add pan-y so page scrolls vertically
   ========================================== */

@media (max-width: 767px) {
  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll {
    touch-action: pan-x pan-y !important;
  }
}

/* ==========================================
   [/codex-swiper-panxy-fix-20260311]
   ========================================== */


/* ==========================================
   [codex-header-news-fix-20260311]
   Fix 1: header mobile symmetry
   Fix 2: news 2-col on phones <=420px
   ========================================== */

/* ---- FIX 1: Mobile header — remove "Меню" text, compact hamburger ---- */
/* Root cause: ::after { content: "Меню" } makes left side ~90px wide
   while right has 4 buttons ~140px, causing logo-button overlap.
   Solution: icon-only hamburger + tighter right padding */

@media (max-width: 767px) {
  /* Hide the "Меню" text label — icon-only hamburger */
  .up-header__btn-mobile-menu::after {
    display: none !important;
  }
  .up-header__btn-mobile-menu {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  /* Tighten right section padding to avoid logo overlap */
  .up-header__right {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Phone contact button: compact like other buttons */
  .up-header .btn-open-contact {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* Small gap between right buttons */
  .phone-box,
  .box-account,
  .box-cart {
    margin-left: 4px !important;
  }
}

/* ---- FIX 2: News 2-column on phones <=420px ---- */
/* Root cause: @media (max-width:420px) has selector specificity (0,4,0)
   with width:100%!important which beats our previous (0,3,0) fix.
   Solution: same (0,4,0) selector appended AFTER → wins by cascade order */

@media (max-width: 575px) {
  .container-module.module-articles.latest-atricles .module-articles__list {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    float: none !important;
  }
}

/* ==========================================
   [/codex-header-news-fix-20260311]
   ========================================== */


/* ==========================================
   [codex-pw-precise-fix-20260311]
   Playwright-diagnosed precise fixes
   ========================================== */

/* ---- BUG 1: News flex-direction: column ---- */
/* Playwright found: listStyle.flexDirection = "column"
   Items flow TOP→BOTTOM in one tall column (1411px high!)
   instead of wrapping into 2 side-by-side columns.
   Fix: force row direction so items wrap left→right */

@media (max-width: 575px) {
  .container-module.module-articles.latest-atricles .module-articles__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* ---- BUG 2: Header logo overlaps right buttons ---- */
/* Playwright measurements at 390px viewport:
   - Hamburger right edge: x=54px
   - Logo: x=129→261px (center=195px, i.e. left:50%)
   - Right buttons: x=248→390px (start=248px)
   - Overlap: logo right 261 > buttons start 248 → 13px overlap
   Fix: shift logo center from 50% → 39%
   → center=152px, logo at 86→218px
   → gap_left=(86-54)=32px ≈ gap_right=(248-218)=30px ← symmetric ✓ */

@media (max-width: 767px) {
  .up-header__left > #logo.up-header__logo-top {
    left: 39% !important;
  }
}

/* ==========================================
   [/codex-pw-precise-fix-20260311]
   ========================================== */


/* ==========================================
   [codex-news-grid-fix-20260311]
   News 2-col: CSS Grid (flex approach failed)
   Playwright confirmed grid works:
   i0={x:14,w:177} i1={x:199,w:177} same-y ✓
   ========================================== */

@media (max-width: 575px) {
  /* Override flex with grid — avoids flex-direction:column conflict */
  .container-module.module-articles.latest-atricles .module-articles__list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    /* Reset flex properties */
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }

  /* Reset flex-item constraints on news cards */
  .container-module.module-articles.latest-atricles .module-articles__item {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Compact card for ~177px column width */
  .container-module.module-articles.latest-atricles .module-articles__content {
    padding: 8px !important;
    border-radius: 12px !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__image {
    margin-bottom: 7px !important;
    border-radius: 8px !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__image img {
    max-height: 100px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__title {
    margin-bottom: 6px !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__title a {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .container-module.module-articles.latest-atricles .module-atricles__footer {
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 6px !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__date,
  .container-module.module-articles.latest-atricles .module-atricles__viewed {
    font-size: 10px !important;
    gap: 4px !important;
  }
  .container-module.module-articles.latest-atricles .module-articles__date svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
  }
}

/* ==========================================
   [/codex-news-grid-fix-20260311]
   ========================================== */

/* ======================================================
   [codex-product-tabs-sticky-fix-20260311]
   Product page sticky tab bar — mobile header clearance.
   Problem: theme sets top:53px but mobile header = 77px
            → 24px of tab bar hidden behind header when sticky
   Playwright: tabsY=53, headerBottom=77, overlapPx=24
   Fix: top:80px clears the 77px header (77+3px buffer)
   ====================================================== */
@media (max-width: 767px) {
  .h1-prod-name + .row #content > .tabs__header.tabs_top {
    top: 80px !important;
    /* Flatten negative margins: on mobile sticky the bar should sit
       within the container, not overflow via negative margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Reduce border-radius so the sticky bar fills cleanly edge-to-edge */
    border-radius: 0 0 12px 12px !important;
    /* Extend background to fill any gap left by removing negative margins */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .h1-prod-name + .row #content > .tabs__header.tabs_top .tabs__header__scroll {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* [{/codex-product-tabs-sticky-fix-20260311}] */

/* ======================================================
   [codex-product-credit-btn-height-fix-20260311]
   Product page credit button (#button-ukrcredits) height fix.
   Problem: action-group has flex-direction:column (from theme/prev CSS)
            flex-basis:100% in column = 100% of parent height → overrides height:52px
            Result: button renders as 18.5px (line-height only)
   Playwright: creditH=19, after flex-direction:row fix → creditH=48 ✓
   Fix: force flex-direction:row; items wrap naturally to new rows via flex-wrap:wrap
   ====================================================== */
#product .action-group {
  flex-direction: row !important;
}

/* Mobile (<767px): all buttons remain full-width, stacked vertically */
@media (max-width: 767px) {
  #product .action-group {
    flex-direction: row !important;
  }
  /* Quantity row */
  #product .action-group .quantity-adder {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  /* Buy button — full width on mobile */
  #product .action-group .cart {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  /* Quick order — full width on mobile */
  #product .action-group .btn-fastorder,
  #product .btn-fastorder {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  /* Credit button — full width on mobile (already set, keep consistent) */
  #product #button-ukrcredits,
  #button-ukrcredits {
    flex: 0 0 100% !important;
    width: 100% !important;
    /* Explicit height re-declaration after flex-direction fix */
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* [{/codex-product-credit-btn-height-fix-20260311}] */

/* ═══════════════════════════════════════════════════════════════
   [codex-utility-pages-polish-20260311]
   Full-site audit: utility pages design polish
   Playwright-verified on 390px mobile viewport, 2026-03-11
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   FIX 1 — H1 on utility pages: search, compare, wishlist
   Measured: color:#000, 22px → target: #112a4d, 800w, clamp
   ────────────────────────────────────────────────────────────── */
/* Search (col-md-12 ns-smv), Wishlist (col-md-9 ns-smv) */
#content.ns-smv > h1 {
  color: #112a4d !important;
  font-size: clamp(22px, 5.6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
}
/* Compare (col-sm-12, no ns-smv), 404, generic utility */
#content.col-sm-12 > h1:not(.h1-prod-name),
#content.col-xs-12 > h1 {
  color: #112a4d !important;
  font-size: clamp(22px, 5.6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX 2 — Search form: .chm-search-block premium styling
   Currently: bare Bootstrap form, dark border rgb(34,34,34)
   ────────────────────────────────────────────────────────────── */
.chm-search-block {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  border: 1px solid #dbe7f8;
  border-radius: 14px;
  padding: 16px 14px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(22, 54, 107, 0.06);
}
.chm-search-block input[type="text"],
.chm-search-block input[type="search"],
.chm-search-block select {
  background: #ffffff !important;
  border: 1px solid #c8d9f2 !important;
  border-radius: 10px !important;
  color: #1f2d3d !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.chm-search-block input[type="text"]:focus,
.chm-search-block input[type="search"]:focus,
.chm-search-block select:focus {
  border-color: #1f6fe5 !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 229, 0.12) !important;
  outline: none !important;
}
.chm-search-block label {
  color: #284766 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}
#button-search {
  background: linear-gradient(180deg, #163b69 0%, #122e52 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  transition: background .2s ease !important;
}
#button-search:hover {
  background: #1d52b8 !important;
}
/* Search checkboxes label */
.chm-search-block .checkbox label {
  color: #35587e !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
@media (max-width: 767px) {
  .chm-search-block {
    padding: 12px;
    border-radius: 12px;
  }
}

/* ──────────────────────────────────────────────────────────────
   FIX 3 — Form inputs globally: .form-field + .form-control
   Measured: border rgb(34,34,34) = near-black → soft blue #c8d9f2
   Scope: NOT product page attributes (those use different markup)
   ────────────────────────────────────────────────────────────── */
.form-field,
#content input.form-control:not([type="hidden"]),
#content textarea.form-control,
#content select.form-control {
  background: #f8fbff !important;
  border: 1px solid #c8d9f2 !important;
  border-radius: 10px !important;
  color: #1f2d3d !important;
  font-size: 14px !important;
  padding: 10px 13px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.form-field:focus,
#content input.form-control:focus:not([type="hidden"]),
#content textarea.form-control:focus,
#content select.form-control:focus {
  border-color: #1f6fe5 !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 229, 0.12) !important;
  outline: none !important;
  background: #ffffff !important;
}
/* Login/Register section headers */
#content .col-md-6 > h2,
#content .account-register h2,
#content .account-login h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #112a4d !important;
  margin: 0 0 14px !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX 4 — Bottom-bar "Головна" pill (.btn-go-home)
   Problem: excluded from blue in :not(.btn-go-home) — stays white
   Fix: style it as our blue CTA pill
   ────────────────────────────────────────────────────────────── */
#fm-fixed-mobile-bottom .btn-fm-bottom.btn-go-home,
#fm-fixed-mobile-bottom .btn-go-home {
  background: #1a4a80 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 44px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  min-width: 80px !important;
}
#fm-fixed-mobile-bottom .btn-fm-bottom.btn-go-home:hover,
#fm-fixed-mobile-bottom .btn-go-home:hover {
  background: #1d52b8 !important;
}
#fm-fixed-mobile-bottom .btn-fm-bottom.btn-go-home [class*="up-icon-"],
#fm-fixed-mobile-bottom .btn-go-home [class*="up-icon-"] {
  color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX 5 — Empty-state pages: content min-height
   Compare/Wishlist empty: contentH = 320px → huge gap before footer
   ────────────────────────────────────────────────────────────── */
#content.col-sm-12:has(> h1 + p + .buttons),
#content:has(> .page-cart-empty) {
  min-height: 420px;
}
/* Fallback for browsers without :has() */
@supports not selector(:has(p)) {
  .col-sm-12 > #content,
  .col-xs-12 > #content {
    min-height: 0; /* don't apply if :has unsupported — avoid layout shift */
  }
}

/* ──────────────────────────────────────────────────────────────
   FIX 6 — Raw breadcrumb: <ul class="breadcrumb"> premium card
   .breadcrumb-box is styled; raw .breadcrumb on search/compare/
   wishlist/login pages has no card treatment
   ────────────────────────────────────────────────────────────── */
ul.breadcrumb:not(.breadcrumb-box ul) {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
  border: 1px solid #dfe9f8 !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  margin: 0 0 16px !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}
ul.breadcrumb li a {
  color: #2a5a9e !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
ul.breadcrumb li a:hover {
  color: #1f6fe5 !important;
  text-decoration: underline !important;
}
ul.breadcrumb li span:not([class]) {
  color: #4a6a8a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
ul.breadcrumb > li + li::before {
  content: "/" !important;
  color: #a0b8d4 !important;
  padding: 0 5px !important;
  font-weight: 300 !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX 7 — Utility page action buttons
   Compare/Wishlist/404 "Продовжити" / "Головна" in content
   Problem: default .btn-default Bootstrap style
   Fix: our blue pill style
   ────────────────────────────────────────────────────────────── */
.buttons .btn-go-home,
#content .buttons a.btn:not(.btn-primary),
#content .buttons .btn-default {
  background: linear-gradient(180deg, #163b69 0%, #122e52 100%) !important;
  border: 0 !important;
  border-radius: 44px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  transition: background .2s ease !important;
}
#content .buttons a.btn:not(.btn-primary):hover,
#content .buttons .btn-default:hover {
  background: #1d52b8 !important;
}
/* Primary action buttons (login, register submit) */
#content .btn-primary,
#button-login,
#button-register {
  background: linear-gradient(180deg, #163b69 0%, #122e52 100%) !important;
  border: 0 !important;
  border-radius: 44px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  min-width: 120px !important;
  transition: background .2s ease !important;
}
#content .btn-primary:hover,
#button-login:hover,
#button-register:hover {
  background: #1d52b8 !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX 8 — Category brand-browser subcategory cards (mobile)
   Problem: plain white cards with no premium treatment
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .category-browser-card,
  .subcat-card,
  .sub-categories .sub-cat-item,
  .child-categories .child-cat {
    border: 1px solid #dbe7f8 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%) !important;
    box-shadow: 0 4px 12px rgba(22, 54, 107, 0.06) !important;
    overflow: hidden !important;
    transition: box-shadow .2s ease, transform .15s ease !important;
  }
  .category-browser-card:hover,
  .sub-categories .sub-cat-item:hover {
    box-shadow: 0 8px 20px rgba(22, 54, 107, 0.12) !important;
    transform: translateY(-2px) !important;
  }
  /* Sub-category brand card image */
  .category-browser-card img,
  .sub-categories .sub-cat-item img {
    max-height: 100px !important;
    object-fit: contain !important;
    width: 100% !important;
  }
  /* Sub-category name text */
  .category-browser-card .name,
  .sub-categories .sub-cat-item .name,
  .child-categories .child-cat a {
    color: #1f2d3d !important;
    font-weight: 700 !important;
    font-size: 13px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   FIX 9 — Mobile breadcrumb account menu button ("Меню" icon)
   On account pages, breadcrumb area shows a "Меню" account icon
   that's from the account sidebar collapsed to mobile button
   Fix: style it to match our design
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .col-md-9 .breadcrumb-shortcuts,
  .breadcrumb + .account-shortcuts,
  .ns-smv .list-group.account-shortcuts {
    display: none !important;
  }
  /* The breadcrumb "Меню" account icon button — hide label, keep icon */
  .breadcrumb-menu-btn,
  [class*="breadcrumb"] .btn-account-menu {
    background: #1d52b8 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE POLISH — Small fixes across all pages
   ────────────────────────────────────────────────────────────── */
/* Body font on utility pages */
@media (max-width: 767px) {
  /* Cart empty state image */
  .page-cart-empty img,
  .cart-empty-image {
    max-width: 160px !important;
    margin: 20px auto !important;
  }
  /* Compare / wishlist empty text */
  #content > p:first-of-type {
    color: #35587e;
    font-size: 15px;
    line-height: 1.6;
  }
  /* Search form full-width on mobile */
  .chm-search-block .btn,
  #button-search {
    width: 100% !important;
    margin-top: 8px !important;
  }
  /* Fix potential horizontal overflow on utility pages */
  #content.col-md-9,
  #content.col-md-12,
  #content.col-sm-12,
  #content.col-xs-12 {
    overflow-x: hidden !important;
  }
}

/* [{/codex-utility-pages-polish-20260311}] */

/* ═══════════════════════════════════════════════════════════════
   [codex-utility-h1-patch-20260311]
   H1 color patch for nested cases + search block background
   ═══════════════════════════════════════════════════════════════ */

/* Wishlist: #content.ns-smv > .container > h1 (not direct child) */
#content.ns-smv .container > h1,
#content.ns-smv h1 {
  color: #112a4d !important;
  font-size: clamp(22px, 5.6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
}

/* Cart: .page-cart-empty > h1 (grandchild of #content) */
.page-cart-empty h1,
.page-cart-empty > h1 {
  color: #112a4d !important;
  font-size: clamp(20px, 5.2vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* 404: .chm-not-found > h1 */
.chm-not-found h1,
.chm-not-found > h1 {
  color: #112a4d !important;
  font-size: clamp(20px, 5.2vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Search block background (was transparent — needs !important) */
.chm-search-block {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
  box-shadow: 0 4px 14px rgba(22, 54, 107, 0.06) !important;
}

/* [{/codex-utility-h1-patch-20260311}] */

/* [codex-wishlist-h1-final-20260311] */
/* Wishlist H1: main > .container > h1 (completely outside #content) */
main > .container > h1:not(.h1-prod-name),
.container > h1:not(.h1-prod-name) {
  color: #112a4d !important;
  font-size: clamp(22px, 5.6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 16px !important;
}
/* [/codex-wishlist-h1-final-20260311] */


/* ═══════════════════════════════════════════════════════════════
   [codex-tabs-sticky-overflow-fix-20260311]
   FIX: overflow-x:hidden on #content breaks position:sticky tabs.
   Replace hidden → clip (clips but does NOT create scroll container).
   ═══════════════════════════════════════════════════════════════ */

/*
 * Override the overflow-x:hidden from codex-utility-pages-polish-20260311.
 * overflow-x:clip clips horizontal overflow without creating a scroll
 * container, so position:sticky on .tabs__header.tabs_top works correctly.
 */
#content.col-md-9,
#content.col-md-12,
#content.col-sm-12,
#content.col-xs-12 {
  overflow-x: clip !important;
}

/* Also fix tabs sticky top positioning explicitly */
@media (max-width: 991px) {
  .tabs__header.tabs_top {
    top: 80px !important;
    position: sticky !important;
    z-index: 500 !important;
  }
}

/* [{/codex-tabs-sticky-overflow-fix-20260311}] */


/* ═══════════════════════════════════════════════════════════════
   [codex-search-form-desktop-fix-20260311]
   FIX: Search form desktop layout — button inline with inputs.
   Uses CSS Grid to place #button-search on same row as inputs.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
  /* Restructure search block as CSS Grid */
  .chm-search-block {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "legend legend"
      "inputs  btn"
      "checks  checks";
    align-items: center;
    gap: 12px 16px;
  }

  /* Legend full width row 1 */
  .chm-search-block > .chm-legend {
    grid-area: legend;
    margin-bottom: 0 !important;
  }

  /* Bootstrap row: grid area "inputs", cancel its negative margin */
  .chm-search-block > .row {
    grid-area: inputs;
    margin: 0 !important;
    display: flex;
    align-items: center;
  }

  /* Cancel left padding on first col since row margin is reset */
  .chm-search-block > .row > [class*="col-"]:first-child {
    padding-left: 0;
  }

  /* Button: inline, proper size */
  .chm-search-block > #button-search {
    grid-area: btn;
    height: 44px !important;
    min-width: 160px !important;
    padding: 0 28px !important;
    font-size: 15px !important;
    white-space: nowrap;
    align-self: center;
  }

  /* Checkboxes: full width row 3 */
  .chm-search-block > .group-checkbox {
    grid-area: checks;
  }
}

/* [{/codex-search-form-desktop-fix-20260311}] */

/* codex-cart-benefits-3col-symmetry-2026-03-12 */
/* Fix: 3 benefit cards in equal columns (was 2+1 asymmetric) */
.cart-benefits-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
}
.cart-benefits-strip .cart-benefit-card {
    flex: unset;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 12px;
}
.cart-benefits-strip .cart-benefit-icon {
    width: 34px;
    height: 34px;
}
.cart-benefits-strip .cart-benefit-icon img {
    width: 20px;
    height: 20px;
}
@media (max-width: 767px) {
    .cart-benefits-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 479px) {
    .cart-benefits-strip {
        grid-template-columns: 1fr !important;
    }
}
/* end codex-cart-benefits-3col-symmetry-2026-03-12 */

/* codex-checkout-btn-radius-fix-2026-03-12 */
/* Fix: confirm button had 44px radius (pill-shape) from #content rule, restore to 14px */
.checkout-totals #button-register,
.confirm-block #button-register {
    border-radius: 14px !important;
}
/* end codex-checkout-btn-radius-fix-2026-03-12 */

/* codex-qty-btn-radius-fix-2026-03-12 */
/* Fix 1: quantity input — #content rule forces padding:10px 13px, squishes 30px input to 4px text area */
#content .ch-cart-quantity .form-control {
    padding: 2px 4px !important;
    width: 36px !important;
    text-align: center !important;
}
/* Fix 2: cart/checkout confirm button pill shape — #content rule sets border-radius:44px */
#content .btn-primary.w-100 {
    border-radius: 14px !important;
}
/* end codex-qty-btn-radius-fix-2026-03-12 */

/* codex-qty-padding-override-2026-03-12 */
/* Specificity fix: (1,3,1) beats conflicting rule's (1,2,1) — both use !important */
#content .ch-cart-quantity input.form-control:not([type="hidden"]) {
    padding: 2px 4px !important;
    width: 36px !important;
    text-align: center !important;
}
/* end codex-qty-padding-override-2026-03-12 */

/* codex-btn-text-center-2026-03-12 */
/* Fix: confirm button text not centered */
.confirm-block #button-register,
.checkout-totals #button-register {
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
/* end codex-btn-text-center-2026-03-12 */


/* codex-checkout-phone-and-confirm-align-2026-03-13 */
#onepcheckout .confirm-block {
    display: flex;
    justify-content: center;
}
#onepcheckout .confirm-block #button-register,
#onepcheckout .confirm-block .btn-primary {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(29, 82, 184, 0.30) !important;
}
#onepcheckout .opc-tel-mask,
#onepcheckout .opc-tel-mask .iti {
    width: 100%;
}
#onepcheckout #input-opc-telephone-main {
    letter-spacing: 0.01em;
}
@media (max-width: 767px) {
    #onepcheckout .confirm-block #button-register,
    #onepcheckout .confirm-block .btn-primary {
        width: 100% !important;
    }
}
/* end codex-checkout-phone-and-confirm-align-2026-03-13 */


/* codex-checkout-phone-visual-fix-2026-03-13 */
#content #onepcheckout .opc-tel-mask input.form-control#input-opc-telephone-main {
    padding-left: 100px !important;
    padding-right: 14px !important;
}
#onepcheckout .opc-tel-mask .iti__selected-country {
    border-radius: 12px 0 0 12px;
}
#onepcheckout .opc-tel-mask .iti__selected-country-primary {
    padding-left: 14px;
    padding-right: 8px;
}
#onepcheckout .opc-tel-mask .iti__selected-dial-code {
    color: #1f3c68;
    font-weight: 600;
}
#onepcheckout .opc-tel-mask .iti__arrow {
    border-top-color: #8da3c4;
}
@media (max-width: 479px) {
    #content #onepcheckout .opc-tel-mask input.form-control#input-opc-telephone-main {
        padding-left: 96px !important;
    }
}
/* end codex-checkout-phone-visual-fix-2026-03-13 */

/* codex-cart-checkout-density-polish-2026-03-13 */
.header-cart-text-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  line-height: 1.35 !important;
}
.header-cart-text-info .header-cart-total-cnt,
.header-cart-text-info .header-cart-total-price {
  white-space: nowrap;
}
.header-cart-text-info .up-icon-angle-down {
  margin-left: auto !important;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d6e3fa;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #1d52b8 !important;
  font-size: 12px !important;
}
.header-cart-total-info {
  margin-top: 10px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}
.header-cart-total-info .ch-total-item {
  padding: 12px 2px !important;
}
.page-cart .table-cart {
  border-radius: 18px !important;
  margin-bottom: 24px !important;
}
.page-cart .table-cart tr td {
  padding: 15px 20px !important;
}
.page-cart .cart-col-right {
  padding-left: 8px;
}
.page-cart .checkout-cart-accordion {
  margin-bottom: 14px;
}
#onepcheckout .totals-inner {
  padding: 22px 22px 18px !important;
  border-radius: 20px !important;
}
#onepcheckout .checkout-cart-accordion {
  margin-bottom: 14px !important;
}
#onepcheckout .checkout-totals .table_total.table-cart {
  margin: 8px 0 16px !important;
  border: 1px solid #dbe6f8 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(247,250,255,.96) 100%) !important;
}
#onepcheckout .checkout-totals .table_total.table-cart td {
  padding: 14px 18px !important;
}
#onepcheckout .checkout-totals .table_total.table-cart .total-title {
  color: #4b5f83 !important;
  font-weight: 600 !important;
}
#onepcheckout .checkout-totals .table_total.table-cart .total-text {
  color: #17386e !important;
  font-weight: 700 !important;
}
#onepcheckout .opc-trust-cards {
  margin-bottom: 14px !important;
}
#onepcheckout .opc-payment-row {
  margin-bottom: 16px !important;
  padding: 4px 2px 0 !important;
}
#onepcheckout .confirm-block {
  margin-top: 4px !important;
}
@media (max-width: 767px) {
  .header-cart-text-info {
    min-height: 54px !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .header-cart-text-info .up-icon-angle-down {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .header-cart-total-info {
    padding: 12px 12px !important;
  }
  .page-cart .table-cart tr td {
    padding: 13px 14px !important;
  }
  .page-cart .cart-col-right {
    padding-left: 0;
  }
  #onepcheckout .totals-inner {
    padding: 16px 16px 14px !important;
    border-radius: 14px !important;
  }
  #onepcheckout .checkout-totals .table_total.table-cart td {
    padding: 12px 14px !important;
  }
}
/* end codex-cart-checkout-density-polish-2026-03-13 */


/* codex-breadcrumb-global-center-fix-2026-03-13 */
.breadcrumb-box,
.breadcrumbs-box {
    display: flex;
    align-items: center;
}

.breadcrumb-box > ul.breadcrumb,
.breadcrumbs-box > ul.breadcrumb {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.breadcrumb-box > ul.breadcrumb > li,
.breadcrumbs-box > ul.breadcrumb > li,
.breadcrumb-box > ul.breadcrumb > li > a,
.breadcrumbs-box > ul.breadcrumb > li > a,
.breadcrumb-box > ul.breadcrumb > li > span,
.breadcrumbs-box > ul.breadcrumb > li > span {
    display: inline-flex;
    align-items: center;
}

@media (min-width: 768px) {
    .breadcrumb-box,
    .breadcrumbs-box {
        min-height: 78px;
    }
}

@media (max-width: 767px) {
    .breadcrumb-box,
    .breadcrumbs-box {
        min-height: 0;
    }
}


/* codex-breadcrumbs-box-single-card-fix-2026-03-13 */
.breadcrumbs-box {
    margin-bottom: 14px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    display: block !important;
}

.breadcrumbs-box > ul.breadcrumb {
    margin: 0 !important;
    padding: 16px 22px !important;
    min-height: 64px;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
    border: 1px solid #dfe9f8 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2px 0 !important;
}

.breadcrumbs-box > ul.breadcrumb > li,
.breadcrumbs-box > ul.breadcrumb > li > a,
.breadcrumbs-box > ul.breadcrumb > li > span {
    display: inline-flex !important;
    align-items: center !important;
}

@media (max-width: 767px) {
    .breadcrumbs-box > ul.breadcrumb {
        padding: 12px 16px !important;
        min-height: 52px;
        border-radius: 12px !important;
    }
}


/* codex-checkout-breadcrumb-force-center-fix-2026-03-13 */
.container > .breadcrumbs-box {
    padding: 0 !important;
    margin: 0 0 18px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

.container > .breadcrumbs-box > ul.breadcrumb {
    margin: 0 !important;
    padding: 18px 26px !important;
    min-height: 72px !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
    border: 1px solid #dfe9f8 !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.container > .breadcrumbs-box > ul.breadcrumb > li,
.container > .breadcrumbs-box > ul.breadcrumb > li > a,
.container > .breadcrumbs-box > ul.breadcrumb > li > span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

@media (max-width: 767px) {
    .container > .breadcrumbs-box > ul.breadcrumb {
        padding: 12px 16px !important;
        min-height: 52px !important;
        border-radius: 12px !important;
    }
}


/* codex-kyiv-courier-shipping-option-2026-03-14 */
.checkout-shipping-method .shipping_method_title {
  margin-bottom: 10px;
}
.checkout-shipping-method .shipping-method-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  width: 100%;
}
.checkout-shipping-method .shipping-method-option input[type="radio"] {
  margin-top: 3px;
  flex: 0 0 auto;
}
.checkout-shipping-method .shipping-method-icon {
  width: 20px !important;
  height: 20px !important;
  margin-top: 1px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.checkout-shipping-method .shipping-method-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.checkout-shipping-method .shipping-method-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #163b69;
  font-weight: 600;
  line-height: 1.25;
}
.checkout-shipping-method .shipping-method-price {
  color: #4d6d93;
  font-weight: 500;
}
.checkout-shipping-method .shipping-method-note {
  color: #6c86a5;
  font-size: 12px;
  line-height: 1.35;
}
.checkout-shipping-method .shipping-method-option--courier .shipping-method-icon {
  box-shadow: 0 4px 10px rgba(17, 42, 77, 0.08);
}


/* codex-kyiv-courier-title-layout-2026-03-14 */
.checkout-shipping-method .shipping_method_title--courier {
  margin-bottom: 8px;
}
.checkout-shipping-method .shipping_method_title--courier > span {
  display: inline-flex;
  align-items: center;
}
.checkout-shipping-method .shipping_method_title--courier img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(17, 42, 77, 0.08);
}
.checkout-shipping-method .shipping_method_title--courier + .radio.chm-radio .shipping-method-option {
  gap: 10px;
}
.checkout-shipping-method .shipping_method_title--courier + .radio.chm-radio input[type="radio"] {
  margin-top: 8px;
}
.checkout-shipping-method .shipping_method_title--courier + .radio.chm-radio .shipping-method-name {
  font-size: 18px;
  line-height: 1.15;
}


/* codex-kyiv-courier-city-lock-2026-03-14 */
.checkout-address .form-control.city-locked {
  background: #f3f7ff;
  border-color: #c9daf8;
  color: #163b69;
  font-weight: 600;
  cursor: not-allowed;
}
.checkout-address .form-control.city-locked::placeholder {
  color: #7d97b8;
}
.checkout-address .select2.city-locked,
.checkout-address .select2-container.city-locked {
  pointer-events: none;
}
.checkout-address .select2.city-locked .select2-selection,
.checkout-address .select2-container.city-locked .select2-selection {
  background: #f3f7ff;
  border-color: #c9daf8;
  color: #163b69;
}

/* codex-checkout-shipping-rhythm-align-2026-03-14 */
.checkout-shipping-method .shipping_method_title {
  margin-bottom: 12px;
}
.checkout-shipping-method .shipping_method_title > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #102947;
  font-weight: 700;
  line-height: 1.15;
}
.checkout-shipping-method .shipping_method_title:not(.shipping_method_title--courier) > span {
  font-size: 18px;
}
.checkout-shipping-method .shipping_method_title--courier {
  margin-bottom: 10px;
}
.checkout-shipping-method .shipping_method_title--courier > span {
  gap: 12px;
}
.checkout-shipping-method .shipping_method_title--courier img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px;
}
.checkout-shipping-method .radio.chm-radio {
  margin: 0 0 8px;
}
.checkout-shipping-method .radio.chm-radio:last-child {
  margin-bottom: 0;
}
.checkout-shipping-method .shipping-method-option {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.checkout-shipping-method .shipping-method-option:hover {
  background: #fbfdff;
  border-color: #dce9f8;
}
.checkout-shipping-method .radio.chm-radio:has(input[type="radio"]:checked) .shipping-method-option {
  border-color: #b8d0f4;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 6px 18px rgba(29, 82, 184, 0.08);
}
.checkout-shipping-method .shipping-method-option input[type="radio"] {
  margin-top: 4px;
}
.checkout-shipping-method .shipping-method-copy {
  gap: 4px;
}
.checkout-shipping-method .shipping-method-name {
  font-size: 16px;
  line-height: 1.22;
}
.checkout-shipping-method .shipping-method-price {
  font-weight: 600;
}
.checkout-shipping-method .shipping-method-note {
  font-size: 11px;
  line-height: 1.35;
}
.checkout-shipping-method .shipping_method_title--courier + .radio.chm-radio .shipping-method-option {
  padding-top: 6px;
}
.checkout-shipping-method .shipping_method_title--courier + .radio.chm-radio .shipping-method-name {
  font-size: 17px;
  line-height: 1.15;
}

/* codex-checkout-totals-aux-forms-fix-2026-03-14 */
#onepcheckout .totals-inner .checkout-cart-accordion {
  margin: 0 0 18px !important;
}
#onepcheckout .totals-inner .checkout-cart-accordion .text-checkout-modules {
  padding: 10px 0 16px !important;
  margin-bottom: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #425f86 !important;
}
#onepcheckout .totals-inner #collapse-dop-module {
  padding: 6px 0 2px !important;
}
#onepcheckout .totals-inner .cart-coupon,
#onepcheckout .totals-inner .cart-voucher,
#onepcheckout .totals-inner .cart-reward {
  margin-bottom: 18px !important;
}
#onepcheckout .totals-inner .cart-coupon:last-child,
#onepcheckout .totals-inner .cart-voucher:last-child,
#onepcheckout .totals-inner .cart-reward:last-child {
  margin-bottom: 8px !important;
}
#onepcheckout .totals-inner .cart-coupon .form-group,
#onepcheckout .totals-inner .cart-voucher .form-group,
#onepcheckout .totals-inner .cart-reward .form-group {
  margin: 0 !important;
}
#onepcheckout .totals-inner .cart-coupon .control-label,
#onepcheckout .totals-inner .cart-voucher .control-label,
#onepcheckout .totals-inner .cart-reward .control-label {
  display: block !important;
  margin: 0 0 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #101b2f !important;
}
#onepcheckout .totals-inner .cart-coupon .input-group,
#onepcheckout .totals-inner .cart-voucher .input-group,
#onepcheckout .totals-inner .cart-reward .input-group {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 128px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
#onepcheckout .totals-inner .cart-coupon .input-group-btn,
#onepcheckout .totals-inner .cart-voucher .input-group-btn,
#onepcheckout .totals-inner .cart-reward .input-group-btn {
  display: block !important;
  width: auto !important;
}
#onepcheckout .totals-inner .cart-coupon .form-control,
#onepcheckout .totals-inner .cart-voucher .form-control,
#onepcheckout .totals-inner .cart-reward .form-control {
  height: 52px !important;
  padding: 0 20px !important;
  border-radius: 18px !important;
  border: 1px solid #cfe0f8 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
#onepcheckout .totals-inner .cart-coupon .form-control::placeholder,
#onepcheckout .totals-inner .cart-voucher .form-control::placeholder,
#onepcheckout .totals-inner .cart-reward .form-control::placeholder {
  color: #9fb3cc !important;
}
#onepcheckout .totals-inner #button-coupon,
#onepcheckout .totals-inner #button-voucher,
#onepcheckout .totals-inner #button-reward {
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
@media (max-width: 767px) {
  #onepcheckout .totals-inner .checkout-cart-accordion .text-checkout-modules {
    padding: 8px 0 14px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
  }
  #onepcheckout .totals-inner .cart-coupon,
  #onepcheckout .totals-inner .cart-voucher,
  #onepcheckout .totals-inner .cart-reward {
    margin-bottom: 14px !important;
  }
  #onepcheckout .totals-inner .cart-coupon .input-group,
  #onepcheckout .totals-inner .cart-voucher .input-group,
  #onepcheckout .totals-inner .cart-reward .input-group {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #onepcheckout .totals-inner .cart-coupon .form-control,
  #onepcheckout .totals-inner .cart-voucher .form-control,
  #onepcheckout .totals-inner .cart-reward .form-control,
  #onepcheckout .totals-inner #button-coupon,
  #onepcheckout .totals-inner #button-voucher,
  #onepcheckout .totals-inner #button-reward {
    height: 48px !important;
    border-radius: 14px !important;
  }
}
/* end codex-checkout-totals-aux-forms-fix-2026-03-14 */


/* codex-product-payment-monobank-notice-2026-03-14 */
#product .product-payment__notice {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d9e6f8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
  color: #5f7ea4;
  font-size: 14px;
  line-height: 1.5;
}

#product .product-payment__notice strong {
  color: #183a68;
  font-weight: 700;
}

/* codex-monobank-legal-box-2026-03-15 */
.information-information .monobank-intro {
  margin: 0 0 14px;
  color: #5f7ea4;
}

.information-information .monobank-legal-box {
  margin: 0 0 26px;
  padding: 18px 20px;
  border: 1px solid #d9e6f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  color: #31506f;
}

.information-information .monobank-legal-box p {
  margin: 0 0 10px;
}

.information-information .monobank-legal-box ul {
  margin: 0 0 12px 18px;
  padding: 0;
}

.information-information .monobank-legal-box li {
  margin: 0 0 6px;
}

.information-information .monobank-legal-box p:last-child,
.information-information .monobank-legal-box ul:last-child {
  margin-bottom: 0;
}


/* codex-product-payment-installment-cards-2026-03-16 */
#product .product-payment__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
#product .product-payment__detail {
    padding: 16px 18px;
    border: 1px solid #d7e7fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    box-shadow: 0 4px 16px rgba(20, 61, 132, 0.05);
}
#product .product-payment__detail-title {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    color: #163b69;
}
#product .product-payment__detail-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: #58779a;
    font-size: 13px;
    line-height: 1.55;
}
#product .product-payment__detail-list li::marker {
    color: #3d79e0;
}
#product .product-payment__detail--mono .product-payment__detail-title {
    color: #14355c;
}
#product .product-payment__details-note {
    grid-column: 1 / -1;
    padding: 12px 16px;
    border: 1px solid #dbe9fb;
    border-radius: 16px;
    background: #f8fbff;
    font-size: 13px;
    line-height: 1.55;
    color: #6b88ae;
}
@media (max-width: 767px) {
    #product .product-payment__details {
        grid-template-columns: 1fr;
    }
    #product .product-payment__detail {
        padding: 14px 16px;
    }
}


/* codex-ukrcredits-popup-allo-refine-2026-03-17 */
#ukrcredit-popup{max-width:1080px!important;padding:26px 28px 24px!important}
#ukrcredit-popup .creditgrid-head{display:grid;grid-template-columns:minmax(320px,1.5fr) 170px 160px 150px;gap:16px;align-items:center;padding:0 8px 14px;margin:0 0 12px;border-bottom:1px solid #dbe8f8;color:#5d7da7;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
#ukrcredit-popup .proposition{position:relative;border:1px solid #d7e7fb!important;border-left:none!important;border-radius:18px!important;padding:18px 20px 16px 68px!important;background:#fff!important}
#ukrcredit-popup .proposition.is-active{border-color:#8eb7f7!important;box-shadow:0 8px 24px rgba(29,82,184,.08)!important;background:#fbfdff!important}
#ukrcredit-popup .proposition+.proposition{margin-top:14px!important}
#ukrcredit-popup .prop_choice{position:absolute;left:24px;top:26px;width:22px;height:22px;border:2px solid #d0dceb;border-radius:50%;background:#fff}
#ukrcredit-popup .proposition.is-active .prop_choice{border-color:#4b7de0}
#ukrcredit-popup .proposition.is-active .prop_choice:after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#4b7de0;transform:translate(-50%,-50%)}
#ukrcredit-popup .prop_name{display:grid!important;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:16px;width:100%!important;padding:0!important;margin:0 0 14px!important;text-align:left!important}
#ukrcredit-popup .prop_name img{width:58px!important;height:58px!important;max-width:58px!important;padding:10px;border:1px solid #d7e7fb;border-radius:14px;background:#fff}
#ukrcredit-popup .prop_name span{font-size:18px!important;font-weight:700!important;line-height:1.15!important;color:#1d2433!important}
#ukrcredit-popup .prop_info{width:100%!important;display:block!important}
#ukrcredit-popup .prop_calc{display:grid!important;grid-template-columns:minmax(320px,1.5fr) 170px 160px 150px;gap:16px;align-items:center;margin:0 0 14px!important}
#ukrcredit-popup .prop_paymentsCount{font-size:14px!important;font-weight:700!important;color:#596b85!important;order:2}
#ukrcredit-popup .prop_select{order:2}
#ukrcredit-popup .prop_select .form-control{height:48px!important;min-width:160px!important;border-radius:12px!important;font-size:15px!important;padding:8px 14px!important}
#ukrcredit-popup .prop_permounth,#ukrcredit-popup .prop_price{font-size:16px!important;color:#4a617f!important}
#ukrcredit-popup .prop_permounth span,#ukrcredit-popup .prop_price span{font-size:18px!important;color:#1d2433!important}
#ukrcredit-popup .prop_bankhelp{margin:0 0 14px;padding-top:4px}
#ukrcredit-popup .prop_bankhelp-head{font-size:13px;font-weight:700;color:#5d7da7;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
#ukrcredit-popup .prop_bankhelp-body ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:ucsteps}
#ukrcredit-popup .prop_bankhelp-body ol li{position:relative;margin:0!important;padding:14px 14px 14px 52px;border:1px solid #d7e7fb;border-radius:14px;background:#fff;color:#2f476a;font-size:14px;line-height:1.45;min-height:96px}
#ukrcredit-popup .prop_bankhelp-body ol li:before{counter-increment:ucsteps;content:counter(ucsteps);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:50%;border:2px solid #90aed8;color:#163b69;font-weight:700;display:flex;align-items:center;justify-content:center;background:#f7fbff}
#ukrcredit-popup .prop_bankhelp-more{margin-top:12px;padding:14px 16px;border-radius:14px;background:#f6faff;border:1px solid #d7e7fb;color:#5d7da7}
#ukrcredit-popup .prop_bankhelp-more strong{display:block;color:#163b69;font-size:14px;margin-bottom:4px}
#ukrcredit-popup .prop_bankhelp-more p{margin:0;font-size:14px;line-height:1.45}
#ukrcredit-popup .prop_total{text-align:right!important;margin-top:8px!important}
#ukrcredit-popup .prop_total button,#ukrcredit-popup .prop_total .btn-primary{min-width:220px;padding:12px 24px!important}
@media (max-width: 1024px){#ukrcredit-popup{max-width:92vw!important}#ukrcredit-popup .creditgrid-head{display:none}#ukrcredit-popup .prop_calc{grid-template-columns:1fr 1fr;align-items:start}#ukrcredit-popup .prop_bankhelp-body ol{grid-template-columns:1fr}#ukrcredit-popup .prop_bankhelp-body ol li{min-height:0}}
@media (max-width: 640px){#ukrcredit-popup{padding:20px 16px 18px!important}#ukrcredit-popup .proposition{padding:16px 14px 16px 52px!important}#ukrcredit-popup .prop_choice{left:16px;top:22px;width:18px;height:18px}#ukrcredit-popup .prop_choice:after{width:8px;height:8px}#ukrcredit-popup .prop_name{grid-template-columns:48px minmax(0,1fr);gap:12px;margin-bottom:12px!important}#ukrcredit-popup .prop_name img{width:48px!important;height:48px!important;max-width:48px!important;padding:8px}#ukrcredit-popup .prop_name span{font-size:17px!important}#ukrcredit-popup .prop_calc{grid-template-columns:1fr;gap:10px}#ukrcredit-popup .prop_select .form-control{width:100%;min-width:0!important}#ukrcredit-popup .prop_total{text-align:stretch!important}#ukrcredit-popup .prop_total button,#ukrcredit-popup .prop_total .btn-primary{width:100%;min-width:0}}
/* /codex-ukrcredits-popup-allo-refine-2026-03-17 */


/* codex-ukrcredits-popup-terms-toggle-2026-03-17 */
#ukrcredit-popup .prop_bankhelp{display:none}
#ukrcredit-popup .proposition.is-terms-open .prop_bankhelp{display:block}
#ukrcredit-popup .prop_terms_actions{margin:8px 0 0}
#ukrcredit-popup .prop_terms_toggle{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:#163b69;font-size:14px;font-weight:700;cursor:pointer}
#ukrcredit-popup .prop_terms_toggle:after{content:'▾';font-size:14px;line-height:1;transition:transform .18s ease}
#ukrcredit-popup .proposition.is-terms-open .prop_terms_toggle:after{transform:rotate(180deg)}
#ukrcredit-popup .proposition:not(.is-active) .prop_terms_toggle{opacity:.78}
#ukrcredit-popup .proposition.is-active .prop_name span{color:#163b69!important}
#ukrcredit-popup .proposition.is-active .prop_select .form-control{border-color:#8eb7f7!important;box-shadow:0 0 0 3px rgba(29,82,184,.08)!important}
@media (max-width:1024px){#ukrcredit-popup .prop_terms_toggle{font-size:13px}}
/* /codex-ukrcredits-popup-terms-toggle-2026-03-17 */


/* codex-ukrcredits-popup-responsive-polish-2026-03-17 */
#ukrcredit-popup .prop_terms_actions{display:flex;align-items:center;justify-content:flex-start;margin:2px 0 16px}
#ukrcredit-popup .prop_terms_toggle{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:#163b69;font-size:14px;font-weight:700;cursor:pointer}
#ukrcredit-popup .prop_terms_toggle:hover{color:#1d52b8}
#ukrcredit-popup .prop_terms_toggle:focus{outline:none;box-shadow:0 0 0 3px rgba(29,82,184,.08);border-radius:10px}
#ukrcredit-popup .prop_bankhelp-more{margin-top:12px;padding:14px 16px;border:1px dashed #d7e7fb;border-radius:14px;background:#fbfdff;color:#2f476a;font-size:14px;line-height:1.5}
#ukrcredit-popup .prop_bankhelp-more strong{display:block;margin-bottom:6px;color:#163b69}
#ukrcredit-popup .prop_total{display:flex!important;justify-content:flex-end;margin-top:4px}
#ukrcredit-popup .prop_total button,#ukrcredit-popup .prop_total .btn-primary{min-width:220px}
@media (max-width:1270px){#ukrcredit-popup{max-width:980px!important}#ukrcredit-popup .creditgrid-head,#ukrcredit-popup .prop_calc{grid-template-columns:minmax(260px,1.35fr) 150px 140px 130px}#ukrcredit-popup .prop_bankhelp-body ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){#ukrcredit-popup{max-width:94vw!important;padding:22px 18px 20px!important}#ukrcredit-popup .creditgrid-head{display:none}#ukrcredit-popup .proposition{padding:16px 16px 16px 60px!important}#ukrcredit-popup .prop_choice{left:18px;top:20px}#ukrcredit-popup .prop_name{grid-template-columns:52px minmax(0,1fr);gap:14px;margin-bottom:12px!important}#ukrcredit-popup .prop_name img{width:52px!important;height:52px!important;max-width:52px!important;padding:9px}#ukrcredit-popup .prop_name span{font-size:17px!important}#ukrcredit-popup .prop_calc{grid-template-columns:1fr 1fr;gap:10px 14px}#ukrcredit-popup .prop_paymentsCount{grid-column:1/-1;order:0}#ukrcredit-popup .prop_select{order:0}#ukrcredit-popup .prop_permounth,#ukrcredit-popup .prop_price{font-size:15px!important}#ukrcredit-popup .prop_permounth span,#ukrcredit-popup .prop_price span{font-size:17px!important}#ukrcredit-popup .prop_bankhelp-body ol{grid-template-columns:1fr}#ukrcredit-popup .prop_bankhelp-body ol li{min-height:0;padding:14px 14px 14px 50px}#ukrcredit-popup .prop_total{justify-content:stretch}#ukrcredit-popup .prop_total button,#ukrcredit-popup .prop_total .btn-primary{width:100%;min-width:0}}
@media (max-width:640px){#ukrcredit-popup{max-width:100vw!important;padding:18px 14px 18px!important}#ukrcredit-popup .credithead{font-size:24px!important;line-height:1.15!important}#ukrcredit-popup .proposition{padding:14px 14px 14px 52px!important;border-radius:16px!important}#ukrcredit-popup .prop_choice{left:14px;top:18px;width:20px;height:20px}#ukrcredit-popup .prop_name{grid-template-columns:46px minmax(0,1fr);gap:12px}#ukrcredit-popup .prop_name img{width:46px!important;height:46px!important;max-width:46px!important;padding:7px;border-radius:12px}#ukrcredit-popup .prop_name span{font-size:16px!important}#ukrcredit-popup .prop_calc{grid-template-columns:1fr;gap:10px}#ukrcredit-popup .prop_select .form-control{width:100%;min-width:0!important;height:46px!important;font-size:15px!important}#ukrcredit-popup .prop_permounth,#ukrcredit-popup .prop_price,#ukrcredit-popup .prop_paymentsCount{font-size:14px!important}#ukrcredit-popup .prop_permounth span,#ukrcredit-popup .prop_price span{font-size:16px!important}#ukrcredit-popup .prop_bankhelp-head{font-size:12px}#ukrcredit-popup .prop_terms_toggle{font-size:13px}}
/* /codex-ukrcredits-popup-responsive-polish-2026-03-17 */
/* codex-product-filter-panel-20260322 */
#pf-mobile-btn{display:none;position:fixed;bottom:72px;left:16px;z-index:1050;background:var(--up-bg-btn-primary);color:var(--up-color-btn-primary);border:none;border-radius:var(--up-border-radius-small);padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);align-items:center;gap:6px}
@media(max-width:991px){#pf-mobile-btn{display:flex}}
#pf-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1055}
#pf-overlay.pf-open{display:block}
.pf-panel{background:var(--up-bg-wd);border-radius:var(--up-border-radius-small);padding:16px;margin-bottom:16px;border:1px solid var(--up-border-color);box-shadow:var(--up-box-shadow-small)}
@media(max-width:991px){.pf-panel{position:fixed;top:0;left:-320px;width:300px;height:100vh;overflow-y:auto;z-index:1060;border-radius:0 var(--up-border-radius-small) var(--up-border-radius-small) 0;transition:left .25s ease;margin-bottom:0;box-shadow:4px 0 24px rgba(0,0,0,.15)}.pf-panel.pf-drawer-open{left:0}}
.pf-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--up-border-color)}
.pf-title{font-size:15px;font-weight:700;color:var(--up-text-wd-color)}
.pf-reset{background:none;border:none;color:var(--up-text-gray-color);font-size:12px;cursor:pointer;padding:0;text-decoration:underline;transition:color .15s}
.pf-reset:hover{color:var(--up-text-wd-color)}
.pf-section{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--up-border-color)}
.pf-section:last-child{border-bottom:none;margin-bottom:0}
.pf-section-title{font-size:11px;font-weight:700;color:var(--up-text-gray-color);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.pf-section-title::after{content:"▾";font-size:10px;transition:transform .2s;color:var(--up-text-gray-color)}
.pf-attr-group.pf-collapsed .pf-section-title::after{transform:rotate(-90deg)}
.pf-attr-options{overflow:hidden;transition:max-height .25s ease}
.pf-attr-group.pf-collapsed .pf-attr-options{max-height:0!important}
.pf-price-track{position:relative;height:4px;background:var(--up-border-color);border-radius:4px;margin:20px 0 14px}
.pf-price-fill{position:absolute;height:100%;background:var(--up-bg-btn-primary);border-radius:4px}
.pf-range{position:absolute;top:50%;transform:translateY(-50%);width:100%;left:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;height:4px;margin:0;outline:none}
.pf-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--up-bg-btn-primary);cursor:pointer;pointer-events:all;border:2px solid var(--up-bg-wd);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.pf-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--up-bg-btn-primary);cursor:pointer;pointer-events:all;border:2px solid var(--up-bg-wd);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.pf-price-inputs{display:flex;align-items:center;gap:8px}
.pf-price-input{flex:1;border:1px solid var(--form-field-border);border-radius:8px;padding:7px 8px;font-size:13px;background:var(--form-field-bg);color:var(--up-text-wd-color);text-align:center;width:0;outline:none;transition:border-color .15s}
.pf-price-input:focus{border-color:var(--up-bg-btn-primary)}
.pf-price-sep{color:var(--up-text-gray-color);font-size:14px;flex-shrink:0}
.pf-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 4px;font-size:13px;color:var(--up-text-wd-color);line-height:1.3;border-radius:8px;transition:background .1s}
.pf-check-label:hover{background:var(--up-bg-gray)}
.pf-check-label input[type=checkbox]{width:16px;height:16px;flex-shrink:0;cursor:pointer;accent-color:var(--up-bg-btn-primary);border-radius:3px}
.pf-check-count{margin-left:auto;font-size:11px;color:var(--up-text-gray-color);flex-shrink:0}
#pf-chips-bar{display:none;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;padding:10px 14px;background:var(--up-bg-gray);border-radius:var(--up-border-radius-small)}
#pf-chips-bar.pf-has-chips{display:flex}
.pf-chip{display:inline-flex;align-items:center;gap:4px;background:var(--up-bg-wd);border:1px solid var(--up-border-color);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--up-text-wd-color);cursor:pointer;transition:background .15s,border-color .15s}
.pf-chip:hover{background:var(--up-bg-gray-hover)}
.pf-chip-x{font-size:15px;line-height:1;color:var(--up-text-gray-color);margin-left:2px}
#pf-counter{font-size:12px;color:var(--up-text-gray-color);margin-right:4px}
.product-layout.pf-hidden{display:none!important}
.pf-no-results{text-align:center;padding:40px 20px;color:var(--up-text-gray-color);font-size:14px;display:none}
.pf-no-results.pf-visible{display:block}
/* Subcategory radio section */
.pf-subcat-group{border-bottom:1px solid var(--up-border-color);margin-bottom:14px;padding-bottom:14px}
.pf-subcat-group .pf-section-title{margin-bottom:8px}
.pf-subcat-label{padding:5px 4px}
.pf-subcat-label input[type=radio]{display:none}
.pf-subcat-label input[type=radio]+.pf-subcat-name{display:flex;align-items:center;gap:0}
.pf-subcat-label input[type=radio]+.pf-subcat-name::before{content:'';display:inline-flex;width:16px;height:16px;border-radius:50%;border:2px solid var(--up-border-color,#ccc);margin-right:8px;flex-shrink:0;transition:border-color .15s,background .15s,box-shadow .15s;background:var(--up-bg-wd)}
.pf-subcat-label input[type=radio]:checked+.pf-subcat-name::before{border-color:var(--up-bg-btn-primary);background:var(--up-bg-btn-primary);box-shadow:inset 0 0 0 3px var(--up-bg-wd)}
.pf-subcat-label input[type=radio]:checked+.pf-subcat-name{font-weight:600;color:var(--up-bg-btn-primary)}
/* end codex-product-filter-panel-20260322 */

/* === MSG — Rozetka-style toolbar ===*/
.category-toolbar-box,.view-box{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.category-toolbar-box>.row,.category-toolbar-box>.row>[class*=col-]{background:none!important;border:none!important;padding:0!important}
/* Main toolbar bar */
.category-toolbar-box .localstorage.dflex{
  background:var(--up-bg-gray,#f4f5f7)!important;
  border-radius:var(--up-border-radius-small,12px)!important;
  padding:0 4px 0 14px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  overflow:hidden!important;
  align-items:center!important;
  gap:0!important;
  box-sizing:border-box!important;
}
/* Hide original sort & limit — replaced by custom */
.ch-limit-sorts{display:none!important}
/* Count badge */
#msg-toolbar-count{font-size:13px;color:var(--up-text-gray-color);white-space:nowrap;padding-right:12px;border-right:1px solid var(--up-border-color,#e0e0e0);margin-right:4px;flex-shrink:0;line-height:44px}
/* Custom sort buttons */
#msg-sort-bar{display:flex;align-items:center;gap:0;height:44px;flex:1}
.msg-sort-btn{background:none!important;border:none!important;font-size:13px!important;color:var(--up-text-gray-color)!important;padding:0 12px!important;height:44px!important;line-height:44px!important;border-radius:0!important;cursor:pointer!important;font-weight:400!important;transition:color .15s!important;white-space:nowrap!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important}
.msg-sort-btn:hover{color:var(--up-text-wd-color)!important}
.msg-sort-btn.msg-sort-active{color:var(--up-text-wd-color)!important;font-weight:600!important;position:relative!important}
.msg-sort-btn.msg-sort-active::after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:2px;background:var(--up-bg-btn-primary,#457DE3);border-radius:2px 2px 0 0}
/* View switcher — right side */
.product_list_toolbar.btn-group{margin-left:auto!important;flex-shrink:0!important;display:flex!important;align-items:center!important;height:44px!important;gap:0!important;padding:0 4px!important}
.product_list_toolbar .btn-view{background:none!important;border:none!important;border-radius:8px!important;padding:0 8px!important;height:32px!important;color:var(--up-text-gray-color)!important;transition:color .15s,background .15s!important;line-height:1!important;display:inline-flex!important;align-items:center!important;cursor:pointer!important}
.product_list_toolbar .btn-view:hover{color:var(--up-text-wd-color)!important;background:rgba(0,0,0,.06)!important}
.product_list_toolbar .btn-view.active{color:var(--up-bg-btn-primary,#457DE3)!important;background:none!important}
.product_list_toolbar .btn-view{box-shadow:none!important}
.product_list_toolbar .btn-group,.product_list_toolbar.btn-group{box-shadow:none!important}
.product_list_toolbar .btn-view+.btn-view{border-left:none!important;margin-left:0!important}
/* === end MSG toolbar === */
/* === MSG — language button fix === */
.btn-language-top.dropdown-toggle{
  width:36px!important;height:36px!important;min-width:36px!important;
  border-radius:50%!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;font-size:12px!important;font-weight:600!important;
  box-sizing:border-box!important;line-height:1!important}
/* fix outer container: was 30px wide x 54px tall — clips the 36px circle */
.box-language-currency.only_one_block{
  width:auto!important;min-width:36px!important;
  height:auto!important;
  padding:0!important;
  margin-left:8px!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.box-language{
  width:36px!important;height:36px!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
/* === end language button fix === */

/* === MSG — category heading arrows alignment === */
/* Symmetric right margin to match h1 left padding, slight downward nudge for visual center */
.swiper-sub-category__navigation.type_arrow_bg_item{
  right:10px!important;
  margin-top:3px!important;
}
/* === end category heading arrows === */

/* === MSG — language dropdown z-index fix === */
/* Ensure language dropdown appears above other header elements (login btn, etc.) */
.box-language{
  position:relative!important;
  z-index:1050!important;
}
/* === end language dropdown fix === */


/* === MSG — category page FOUC prevention (opacity before JS runs) === */
html.is-category-page #column-left {
  opacity: 0;
  transition: opacity .15s ease;
}
html.is-category-page #column-left .mod-categories {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* === end FOUC prevention === */

/* ===== MSG GENERATORS — Category Page Improvements ===== */

/* --- Banner slot --- */
.msg-category-banner { display: none; width: 100%; margin-bottom: 20px; border-radius: 10px; overflow: hidden; }
.msg-category-banner:not(:empty) { display: block; }
.msg-category-banner a { display: block; }
.msg-category-banner img { width: 100%; height: auto; display: block; border-radius: 10px; }

/* --- Subcategory strip: uniform compact chips --- */
.category-showcase-strip { margin-bottom: 20px !important; }

/* Swiper: equal height slides via CSS (DO NOT set height on slides directly) */
.swiper-sub-category .swiper-wrapper {
    align-items: stretch !important;
}
.swiper-sub-category .swiper-slide {
    height: auto !important;
}

/* The card itself fills the slide height */
.category-showcase-strip .swiper-sub-category__item .subcategory,
.category-showcase-strip .item-subc .subcategory {
    border-radius: 10px !important;
    padding: 10px 8px !important;
    transition: box-shadow .2s, transform .15s, border-color .15s !important;
    border: 1px solid #e8eaed !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 115px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.category-showcase-strip .swiper-sub-category__item .subcategory:hover,
.category-showcase-strip .item-subc .subcategory:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.11) !important;
    transform: translateY(-2px) !important;
    border-color: #c0c5cc !important;
}

/* Image area — fixed 60px */
.category-showcase-strip .sc-image {
    height: 60px !important;
    min-height: 60px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin-bottom: 8px !important;
}
.category-showcase-strip .sc-image img {
    max-height: 60px !important;
    max-width: 85% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Name + count row */
.category-showcase-strip .sc-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    text-align: center !important;
    line-height: 1.35 !important;
    color: #333 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}
.category-showcase-strip .sc-name-label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
}
.category-showcase-strip .sc-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f2f5 !important;
    color: #777 !important;
    border-radius: 30px !important;
    padding: 1px 7px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
    line-height: 1.6 !important;
}

/* --- Product card: attribute table (Rozetka/Comfy style) --- */
.us-product-attributes {
    border-top: 1px solid #f0f4f7;
    margin-top: 10px;
    padding-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}
.us-product-attributes__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dashed #f0f4f7;
    gap: 6px;
}
.us-product-attributes__item:last-child { border-bottom: none; }
.us-product-attributes__name {
    color: #9aa5b0;
    flex-shrink: 0;
    max-width: 58%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.us-product-attributes__text {
    font-weight: 600;
    color: #222;
    text-align: right;
    flex-shrink: 0;
    max-width: 58%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* dotted separator between name and value */
.us-product-attributes__item::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    border-bottom: 1px dashed #d8dde3;
    margin: 0 4px;
    align-self: flex-end;
    margin-bottom: 4px;
}

/* --- Product card improvements --- */
.product-thumb {
    border-radius: 12px !important;
    transition: box-shadow .25s, transform .2s !important;
    border: 1px solid #edf0f3 !important;
}
.product-thumb:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.1) !important;
    transform: translateY(-3px) !important;
    border-color: #d0d5dc !important;
}

/* --- Toolbar: add price range display --- */
.category-toolbar-box .view-box { 
    background: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
}

/* --- Filter sidebar improvements --- */
#column-left .panel { border-radius: 10px !important; overflow: hidden; }
#column-left .panel-heading { font-weight: 700 !important; font-size: 13px !important; }
#column-left .list-group-item:first-child { border-radius: 6px 6px 0 0 !important; }
#column-left .list-group-item:last-child { border-radius: 0 0 6px 6px !important; }

/* --- Stock status badges --- */
.stock-status.instock { color: #27ae60; font-weight: 600; }
.stock-status.outofstock { color: #e74c3c; font-weight: 600; }

/* --- Filter sidebar (column_left) improvements --- */
#column-left .list-group-item { border-radius: 6px !important; margin-bottom: 2px; }
#column-left .panel-heading { font-weight: 700; font-size: 13px; letter-spacing: .3px; }

/* --- Toolbar spacing --- */
.category-toolbar-box { margin-bottom: 16px; }

/* ===== / MSG GENERATORS ===== */
</style>
/* === MSG — language button (all pages) === */
.box-language-currency.only_one_block{width:auto!important;min-width:40px!important;height:auto!important;padding:0!important;margin-left:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.box-language{width:36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
/* === end language button === */

/* codex-hero-slider-2026-03-28 */
.hslider{position:relative;overflow:hidden;border-radius:18px;margin-bottom:28px;background:#0e2346;height:var(--hsl-h-desktop,380px)}
.hslider__track{position:relative;height:100%}
.hslider__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hslider__slide.is-active{opacity:1;pointer-events:auto}
.hslider__img-wrap{position:absolute;inset:0}
.hslider__img{width:100%;height:100%;object-fit:cover;display:block}
.hslider__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:32px 48px 32px 72px;background:linear-gradient(90deg,rgba(10,25,58,.78) 0%,rgba(10,25,58,.45) 55%,transparent 100%);max-width:580px}
.hslider__title{font-size:clamp(22px,2.4vw,36px);font-weight:800;color:#fff;line-height:1.18;margin:0 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.22)}
.hslider__subtitle{font-size:clamp(13px,1.3vw,17px);color:rgba(255,255,255,.88);line-height:1.5;margin:0 0 20px}
.hslider__btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 26px;border-radius:12px;background:linear-gradient(180deg,#2f6fdb 0%,#285fb9 100%);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(47,111,219,.38);transition:background .18s,box-shadow .18s,transform .15s;align-self:flex-start}
.hslider__btn:hover{background:linear-gradient(180deg,#2a63c3 0%,#214f9e 100%);box-shadow:0 12px 24px rgba(47,111,219,.48);transform:translateY(-1px);color:#fff;text-decoration:none}
.hslider__btn--outline{background:transparent;border:2px solid rgba(255,255,255,.85);box-shadow:none}
.hslider__btn--outline:hover{background:rgba(255,255,255,.15);box-shadow:none}
.hslider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;padding:0}
.hslider__arrow:hover{background:rgba(255,255,255,.35)}
.hslider__arrow--prev{left:14px}
.hslider__arrow--next{right:14px}
.hslider__dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:10}
.hslider__dot{width:8px;height:8px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:transparent;cursor:pointer;padding:0;transition:background .2s,border-color .2s,transform .2s}
.hslider__dot.is-active{background:#fff;border-color:#fff;transform:scale(1.25)}
@media(max-width:991px){.hslider{height:var(--hsl-h-tablet,280px);border-radius:14px}.hslider__content{padding:22px 32px 22px 66px;max-width:420px}}
@media(max-width:767px){.hslider{height:var(--hsl-h-mobile,200px);border-radius:12px;margin-bottom:18px}.hslider__content{padding:16px 20px 16px 50px;max-width:260px;background:linear-gradient(90deg,rgba(10,25,58,.72) 0%,rgba(10,25,58,.40) 70%,transparent 100%)}.hslider__arrow{width:32px;height:32px}.hslider__arrow--prev{left:8px}.hslider__arrow--next{right:8px}}

/* hslider-logos-css-v2 */
.hslider__logos{position:absolute;top:18px;left:28px;display:flex;align-items:center;gap:0;z-index:6;background:rgba(255,255,255,.93);border-radius:12px;padding:8px 16px 8px 12px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.hslider__logos-msg{height:40px;width:auto;object-fit:contain;display:block}
.hslider__logos-sep{width:1px;height:32px;background:rgba(0,0,0,.15);margin:0 14px;display:block;flex-shrink:0}
.hslider__logos-partner{height:34px;width:auto;object-fit:contain;display:block}
.hslider__btn--green{background:linear-gradient(180deg,#27ae60 0%,#1e8449 100%);box-shadow:0 8px 20px rgba(39,174,96,.4)}
.hslider__btn--green:hover{background:linear-gradient(180deg,#219a52 0%,#196f3d 100%);box-shadow:0 12px 24px rgba(39,174,96,.5);transform:translateY(-1px);color:#fff;text-decoration:none}
.hslider__btn--orange{background:linear-gradient(180deg,#e67e22 0%,#ca6f1e 100%);box-shadow:0 8px 20px rgba(230,126,34,.4)}
.hslider__btn--orange:hover{background:linear-gradient(180deg,#d07219 0%,#b45e18 100%);box-shadow:0 12px 24px rgba(230,126,34,.5);transform:translateY(-1px);color:#fff;text-decoration:none}
@media(max-width:991px){.hslider__logos{top:14px;left:18px;padding:6px 12px 6px 10px}.hslider__logos-msg{height:32px}.hslider__logos-partner{height:26px}.hslider__logos-sep{height:24px;margin:0 10px}}
@media(max-width:767px){.hslider__logos{top:10px;left:12px;padding:5px 10px 5px 8px;border-radius:8px}.hslider__logos-msg{height:24px}.hslider__logos-partner{height:20px}.hslider__logos-sep{height:18px;margin:0 8px}}

/* hslider-split-logos-v1 */
.hslider__logo-left,.hslider__logo-right{position:absolute;top:20px;z-index:7;line-height:0}
.hslider__logo-left{left:24px}
.hslider__logo-left img{height:38px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.5));display:block}
.hslider__logo-right{right:24px}
.hslider__logo-right img{height:32px;width:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(0,0,0,.4));display:block}
@media(max-width:991px){.hslider__logo-left img{height:30px}.hslider__logo-right img{height:26px}.hslider__logo-left{left:16px;top:14px}.hslider__logo-right{right:14px;top:14px}}
@media(max-width:767px){.hslider__logo-left img{height:22px}.hslider__logo-right img{height:20px}.hslider__logo-left{left:10px;top:10px}.hslider__logo-right{right:10px;top:10px}}

/* hslider-partner-bar-v1 */
.hslider__partner-bar{position:absolute;top:0;left:0;right:0;z-index:7;display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:0 28px;height:58px;background:linear-gradient(90deg,rgba(10,25,58,.72) 0%,rgba(10,25,58,.55) 60%,rgba(10,25,58,.18) 100%);backdrop-filter:blur(2px)}
.hslider__partner-msg{height:34px;width:auto;object-fit:contain;display:block;flex-shrink:0}
.hslider__partner-x{color:rgba(255,255,255,.35);font-size:22px;font-weight:300;line-height:1;flex-shrink:0;letter-spacing:0}
.hslider__partner-pb{height:28px;width:auto;object-fit:contain;display:block;flex-shrink:0;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3))}
@media(max-width:991px){.hslider__partner-bar{height:46px;padding:0 18px;gap:12px}.hslider__partner-msg{height:26px}.hslider__partner-pb{height:22px}.hslider__partner-x{font-size:17px}}
@media(max-width:767px){.hslider__partner-bar{height:38px;padding:0 12px;gap:9px}.hslider__partner-msg{height:20px}.hslider__partner-pb{height:17px}.hslider__partner-x{font-size:14px}}

/* hslider-partners-in-content-v1 */
.hslider__partner-bar{display:none}
.hslider__partners{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hslider__partner-msg{height:26px;width:auto;object-fit:contain;display:block;flex-shrink:0;opacity:.92}
.hslider__partner-x{color:rgba(255,255,255,.4);font-size:18px;font-weight:300;line-height:1;flex-shrink:0}
.hslider__partner-pb{height:22px;width:auto;object-fit:contain;display:block;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
@media(max-width:991px){.hslider__partners{margin-bottom:12px;gap:10px}.hslider__partner-msg{height:22px}.hslider__partner-pb{height:18px}}
@media(max-width:767px){.hslider__partners{margin-bottom:8px;gap:8px}.hslider__partner-msg{height:18px}.hslider__partner-pb{height:15px}}

/* hslider-corners-v1 */
.hslider__corner-left,.hslider__corner-right{position:absolute;top:22px;z-index:8;display:block;object-fit:contain}
.hslider__corner-left{left:28px;height:46px;width:auto}
.hslider__corner-right{right:28px;height:40px;width:auto}
@media(max-width:991px){.hslider__corner-left{height:36px;left:18px;top:16px}.hslider__corner-right{height:30px;right:18px;top:16px}}
@media(max-width:767px){.hslider__corner-left{height:26px;left:12px;top:10px}.hslider__corner-right{height:22px;right:12px;top:10px}}

/* hslider-pb-center-v1 */
.hslider__corner-right{right:auto;top:50%;left:75%;transform:translate(-50%,-50%);height:70px}
@media(max-width:991px){.hslider__corner-right{height:50px;left:75%;top:50%}}
@media(max-width:767px){.hslider__corner-right{height:36px;left:72%;top:50%}}

/* hslider-pb-block-v2-2026-03-29 — badge + tagline as one positioned block */
.hslider__corner-right{display:none}

/* Container: positioned in the right column, vertically centered with content */
.hslider__pb-block{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* Badge: just the dark rounded box with logo */
.hslider__pb-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,15,40,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  padding:18px 32px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.hslider__pb-badge img{height:90px;width:auto;display:block;object-fit:contain}

/* Tagline: mini frosted pill — same material as badge but lighter */
.hslider__pb-tagline{
  display:block;
  font-size:15.5px;
  color:#ffffff;
  text-align:center;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.55;
  padding:12px 24px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  max-width:280px;
}

@media(max-width:991px){
  .hslider__pb-block{right:3%;gap:10px}
  .hslider__pb-badge{padding:13px 22px;border-radius:12px}
  .hslider__pb-badge img{height:62px}
  .hslider__pb-tagline{font-size:13px;padding:9px 16px;max-width:210px}
}
@media(max-width:767px){
  .hslider__pb-block{right:12px;top:auto;bottom:10px;transform:none;gap:6px}
  .hslider__pb-badge{padding:7px 14px;border-radius:9px}
  .hslider__pb-badge img{height:36px}
  .hslider__pb-tagline{font-size:10.5px;padding:7px 12px;border-radius:9px;max-width:160px}
}
/* kredit-modal-20260328 */
.km{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:16px}
.km.is-open .km__box{transform:translateY(0);opacity:1}
.km__overlay{position:absolute;inset:0;background:rgba(5,10,30,.82);backdrop-filter:blur(4px)}
.km__box{position:relative;z-index:1;background:#fff;border-radius:20px;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.45);transform:translateY(32px);opacity:0;transition:transform .3s ease,opacity .3s ease}
.km__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#444;z-index:2;transition:background .2s}
.km__close:hover{background:rgba(0,0,0,.16)}
.km__header{background:linear-gradient(135deg,#0a193a 0%,#0f2557 100%);border-radius:20px 20px 0 0;padding:28px 28px 22px;display:flex;align-items:center;gap:18px}
.km__logo-msg{height:32px;width:auto;object-fit:contain}
.km__logo-sep{color:rgba(255,255,255,.35);font-size:22px;font-weight:300;line-height:1}
.km__logo-pb{height:28px;width:auto;object-fit:contain}
.km__body{padding:24px 28px 28px}
.km__tabs{display:flex;gap:8px;margin-bottom:22px}
.km__tab{flex:1;padding:10px 12px;border-radius:10px;border:2px solid #e8eaf0;background:#f5f6fa;font-size:13.5px;font-weight:600;color:#555;cursor:pointer;transition:all .2s;text-align:center}
.km__tab.is-active{border-color:#27ae60;background:#27ae60;color:#fff}
.km__panel{display:none}
.km__panel.is-active{display:block}
.km__program-label{font-size:12.5px;color:#888;margin:0 0 6px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}
.km__title{font-size:24px;font-weight:800;color:#0a193a;margin:0 0 18px;line-height:1.2}
.km__accent{color:#27ae60}
.km__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.km__metric{background:#f5f8ff;border-radius:12px;padding:14px 10px;text-align:center}
.km__metric-val{font-size:22px;font-weight:800;color:#0a193a;line-height:1;display:block}
.km__metric-val.accent{color:#27ae60}
.km__metric-key{font-size:11px;color:#777;margin-top:5px;line-height:1.3;display:block}
.km__benefits{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.km__benefit{font-size:14px;color:#333;display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.km__benefit::before{content:'✓';color:#27ae60;font-weight:800;font-size:15px;flex-shrink:0;margin-top:1px}
.km__form{}
.km__form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.km__input{width:100%;padding:14px 16px;border:2px solid #e0e3eb;border-radius:12px;font-size:15px;outline:none;transition:border-color .2s;box-sizing:border-box;font-family:inherit}
.km__input:focus{border-color:#27ae60}
.km__submit{width:100%;padding:16px;background:linear-gradient(180deg,#27ae60 0%,#1e8449 100%);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:opacity .2s;box-shadow:0 8px 24px rgba(39,174,96,.35)}
.km__submit:hover{opacity:.92}
.km__submit:disabled{opacity:.6;cursor:default}
.km__note{text-align:center;font-size:12px;color:#999;margin:10px 0 0;line-height:1.5}
.km__success{display:none;text-align:center;padding:20px 0}
.km__success-icon{width:64px;height:64px;background:#27ae60;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;margin:0 auto 16px}
.km__success h3{font-size:22px;font-weight:800;color:#0a193a;margin:0 0 10px}
.km__success p{color:#666;font-size:15px;line-height:1.6;margin:0}
@media(max-width:560px){
.km__box{border-radius:16px 16px 0 0;max-height:95vh;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}
.km.is-open .km__box{transform:translateY(0)}
.km__metrics{grid-template-columns:repeat(2,1fr)}
.km__form-row{grid-template-columns:1fr}
.km__title{font-size:20px}
.km__header{padding:20px 20px 16px}
.km__body{padding:18px 20px 24px}
}


/* ===== codex-responsive-fixes-2026-03-29 ===== */

/* 1. Hide language circle toggle in mobile menu (pills already shown) */
.mh-left-b #language .btn-language-top.dropdown-toggle,
.mh-right-b #currency .btn-currency-top.dropdown-toggle {
  display: none !important;
}

/* 2. Mobile header: [≡ + Logo] left | [📞 🔍 👤 🛒] right */
@media (max-width: 767px) {
  /* Row: normal flex, left and right spread apart */
  .up-header > .container > .row.dflex.align-items-center {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* Left: hamburger + logo, in normal flow */
  .up-header__left {
    flex: 0 0 auto !important;
    position: static !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Logo: in flow (no absolute), sits right after hamburger */
  .up-header__left #logo.up-header__logo-top {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    z-index: auto !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
  }
  /* Logo inner wrappers — no shrinking, no overflow hidden */
  .up-header__left #logo.up-header__logo-top .up-header__logo-mobile,
  .up-header__left #logo.up-header__logo-top .up-header__logo-mobile.mr-auto,
  .up-header__left #logo.up-header__logo-top a {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  /* Logo image size — natural proportions, no squishing */
  .up-header__left #logo.up-header__logo-top img,
  .up-header__logo-mobile img {
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: unset !important;
    display: block !important;
    margin: 0 !important;
  }
  /* Reset the square logo container from old hotfix */
  .up-header__left > #logo.up-header__logo-top {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    z-index: 3 !important;
  }
  /* Right: all icons visible, pushed to right edge */
  .up-header__right {
    flex: 0 0 auto !important;
    position: static !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Show phone button */
  .up-header__right .phone-box { display: flex !important; }
  /* Hide language/currency block in header on mobile — it is in mobile menu */
  .up-header__right .box-language-currency { display: none !important; }
  /* Compact all icon buttons on mobile */
  .up-header__right .btn-open-search,
  .up-header__right .btn-open-contact,
  .up-header__right .btn-account,
  .up-header__right .btn-cart-top {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
}

/* 3. Hero slider — mobile: clean full-width layout, hide PB block */
@media (max-width: 767px) {
  /* Increase height for better visual impact */
  .hslider { height: 260px !important; border-radius: 14px; }
  /* Gradient: прозрачный вверху (логотипы на фото видны) → темный внизу (читаемость текста) */
  .hslider__content {
    max-width: 100% !important;
    padding: 20px 18px 28px 18px !important;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 30%,
      rgba(8,20,50,.50) 55%,
      rgba(8,20,50,.85) 100%
    ) !important;
    justify-content: center !important;
    text-align: center !important;
    align-items: center !important;
  }
  /* Сдвигаем изображение влево — логотипы в левом верхнем углу попадают в кадр */
  .hslider__img { object-position: left center !important; }
  .hslider__title { font-size: 16px !important; line-height: 1.3 !important; margin-bottom: 5px !important; }
  .hslider__subtitle {
    font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 10px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .hslider__btn { padding: 9px 18px !important; font-size: 12.5px !important; border-radius: 8px !important; align-self: center !important; }
  /* Logos already baked into banner images on mobile — hide overlays */
  .hslider__pb-block { display: none !important; }
  .hslider__corner-left { display: none !important; }
  /* Arrows: smaller, less intrusive */
  .hslider__arrow { width: 30px !important; height: 30px !important; background: rgba(255,255,255,.15) !important; }
  .hslider__arrow--prev { left: 8px !important; }
  .hslider__arrow--next { right: 8px !important; }
}

/* 4. Hero slider — tablet: tighter PB block */
@media (min-width: 768px) and (max-width: 991px) {
  .hslider__pb-block { right: 2% !important; gap: 8px; }
  .hslider__pb-badge { padding: 10px 20px; border-radius: 12px; }
  .hslider__pb-badge img { height: 52px; }
  .hslider__pb-tagline { font-size: 12px; padding: 8px 14px; max-width: 195px; line-height: 1.45; }
  .hslider__content { max-width: 410px; }
}

/* 5. Hits-sales mobile: compact image cards */
@media (max-width: 767px) {
  .home-hits-sales .product-thumb .image > a {
    min-height: 110px !important;
    max-height: 160px;
    overflow: hidden;
  }
  .home-hits-sales .product-thumb .image > a img {
    height: 145px !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .home-hits-sales .swiper.swiper-module.hits-mobile-scroll .swiper-slide {
    flex: 0 0 78% !important;
    max-width: 78% !important;
  }
}

/* 6. Hits-sales tablet: compact image cards */
@media (min-width: 768px) and (max-width: 991px) {
  .home-hits-sales .product-thumb .image > a {
    min-height: 120px;
    max-height: 190px;
    overflow: hidden;
  }
  .home-hits-sales .product-thumb .image > a img {
    height: 170px !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}


/* Hide mobile hero USP strip on mobile — redundant with slider */
@media (max-width: 767px) {
  .home-mobile-hero { display: none !important; }
}
/* ===== end codex-responsive-fixes-2026-03-29 ===== */
/* ===== codex-mobile-audit-fixes-2026-03-31 ===== */

/* 1. Відгуки магазину — стек замість горизонтальної стрічки */
@media (max-width: 767px) {
  .reviews-block.f-box.dflex {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .reviews-block .average-reviews,
  .reviews-block .rating-summary {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* 2. Категорії товарів — 2 колонки ОК, але картки не менше 140px */
@media (max-width: 767px) {
  .home-category-browser__grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }
  .home-category-browser__card {
    min-width: 0 !important;
  }
}

/* 4. Плаваючі кнопки (обране/порівняння) — прибрати з-під краю */
@media (max-width: 767px) {
  .fixed-goods-bar {
    right: 8px !important;
    bottom: 16px !important;
  }
}

/* ===== end codex-mobile-audit-fixes-2026-03-31 ===== */



/* ===== codex-mobile-search-category-fix-20260331 ===== */

/* =====================================================================
   FIX 1: Category toolbar — wrap to 2 rows on mobile
   Problem: count(78px) + sort(~263px) + view-toggle(240px) = ~581px
            overflows 390px viewport; overflow:hidden clips content
   Fix: 2-row layout — [count | view toggle] top, [sort bar] bottom
   ===================================================================== */
@media (max-width: 767px) {
  /* Unlock the clipping container */
  .category-toolbar-box .localstorage.dflex,
  .search-toolbar-box .localstorage.dflex,
  .col-xs-12.col-sm-12.localstorage.dflex.align-items-center.justify-content-between {
    overflow: visible !important;
    height: auto !important;
    min-height: 44px !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Row 1: count (left) + view toggle (right) */
  #msg-toolbar-count {
    order: 1 !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    line-height: 36px !important;
  }
  .ch-limit-sorts {
    display: none !important; /* hide per-page selector on mobile, not needed */
  }
  .category-toolbar-box .product_list_toolbar,
  .localstorage.dflex .product_list_toolbar {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  /* Compact view-toggle buttons (hide 3rd "detailed list" which is desktop-only) */
  .product_list_toolbar .btn-view.visible-lg {
    display: none !important;
  }
  .product_list_toolbar .btn-view {
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Row 2: sort bar — full width below count+view toggle */
  #msg-sort-bar {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }
  .msg-sort-btn {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 7px 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* =====================================================================
   FIX 2: Search page form — button before checkboxes on mobile
   Problem: DOM order = [legend] [inputs] [checkboxes] [button]
            on mobile the button appears BELOW checkboxes, looks odd
   Fix: visually reorder so button appears right after inputs
   ===================================================================== */
@media (max-width: 991px) {
  .chm-search-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .chm-search-block > .chm-legend {
    order: 1 !important;
  }
  .chm-search-block > .row {
    order: 2 !important;
    margin: 0 !important;
  }
  .chm-search-block > #button-search {
    order: 3 !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
  .chm-search-block > .group-checkbox {
    order: 4 !important;
    margin: 0 !important;
  }
  /* Stack inputs vertically */
  .chm-search-block .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .chm-search-block .xs-mb-20 {
    margin-bottom: 8px !important;
  }
}

/* Restore grid layout at desktop — override flex above */
@media (min-width: 992px) {
  .chm-search-block {
    display: grid !important;
    flex-direction: unset !important;
    gap: unset !important;
  }
}

/* ===== end codex-mobile-search-category-fix-20260331 ===== */


/* ===== codex-mobile-filter-drawer-fix-20260331 ===== */
/* ROOT CAUSE: #column-left { display:none } base rule hides #pf-panel (its child)
   even when pf-panel has position:fixed. A position:fixed element inside a
   display:none parent is never rendered in the browser.
   FIX: Make #column-left display:block but zero-sized on mobile so it takes no
   layout space yet allows the fixed-position #pf-panel child to render & slide in. */

@media (max-width: 991px) {
  #column-left {
    display: block !important;   /* allow fixed children to render */
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important; /* pf-panel fixed position needs to escape */
    border: none !important;
    flex: 0 0 0% !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Ensure pf-panel (fixed drawer) itself is visible on mobile */
  #pf-panel {
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* ===== end codex-mobile-filter-drawer-fix-20260331 ===== */


/* ===== codex-mobile-filter-clip-fix-20260331 ===== */
/* ROOT CAUSE: <main> has overflow:clip which clips ALL position:fixed children
   in modern browsers (CSS Overflow Level 4 spec). Unlike overflow:hidden,
   overflow:clip explicitly clips fixed-position descendants too.
   FIX: Override main overflow to visible on mobile so #pf-panel can escape. */

@media (max-width: 991px) {
  /* Allow fixed-position filter drawer to escape main clipping */
  main {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  /* Ensure the drawer slides in correctly */
  .pf-panel.pf-drawer-open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
  }
}
/* ===== end codex-mobile-filter-clip-fix-20260331 ===== */


/* ===== codex-mobile-filter-body-fix-20260331 ===== */
/* When filter drawer opens, JS sets body{overflow:hidden} to prevent bg scroll.
   On some iOS Safari this clips position:fixed elements.
   Force body overflow visible on mobile — the overlay handles scroll locking. */

@media (max-width: 991px) {
  /* Keep body scrollable so fixed drawer is visible */
  body {
    overflow-x: hidden !important; /* prevent horizontal scroll normally */
  }
  /* When drawer open: allow overflow so panel is visible */
  body[style*="overflow: hidden"] {
    overflow: visible !important;
  }
  /* Overlay covers full screen to block background scrolling instead */
  #pf-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1055 !important;
    touch-action: none !important; /* block scroll on overlay */
  }
  #pf-overlay.pf-open {
    display: block !important;
  }
  /* Panel must be above overlay */
  #pf-panel {
    z-index: 1060 !important;
  }
}
/* ===== end codex-mobile-filter-body-fix-20260331 ===== */


/* ===== codex-product-gifts-style-20260331 ===== */
/* Product gifts block — full design to match site style.
   Structure: .product-gifts > .product-gifts__title + .product-gifts__list
   > .product-gifts__item > label > [input checkbox] + .product-gifts__image > img */

/* ── Container ── */
.product-gifts {
  margin-top: 16px;
  padding: 14px 16px 16px;
  background: linear-gradient(135deg, #f0faf4 0%, #e8f6f0 100%);
  border: 1.5px solid #b2dfc5;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(39, 174, 96, .09);
}

/* ── Title ── */
.product-gifts__title {
  font-size: 14px;
  font-weight: 700;
  color: #1a6b3a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: .2px;
}
.product-gifts__title::before {
  content: "🎁";
  font-size: 16px;
  line-height: 1;
}

/* ── Gift list ── */
.product-gifts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Single gift item ── */
.product-gifts__item {
  flex: 0 0 auto;
}

/* ── Label = clickable gift card ── */
.product-gifts__item label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px;
  padding: 10px 8px;
  background: #fff;
  border: 2px solid #d0e8db;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  position: relative;
  text-align: center;
  margin: 0;
}
.product-gifts__item label:hover {
  border-color: #27ae60;
  box-shadow: 0 3px 12px rgba(39,174,96,.18);
  background: #f6fdf9;
}

/* ── Hidden checkbox ── */
.product-gifts__item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Checked state: green border + checkmark badge ── */
.product-gifts__item input[type="checkbox"]:checked + .product-gifts__image,
.product-gifts__item label:has(input:checked) {
  border-color: #27ae60;
  background: #edfaf3;
  box-shadow: 0 0 0 2px rgba(39,174,96,.25);
}
/* Checkmark overlay when selected */
.product-gifts__item label:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #27ae60;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(39,174,96,.4);
}

/* ── Disabled / unavailable state ── */
.product-gifts__item label.off-label-gift {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Gift image ── */
.product-gifts__image {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f8ff;
}
.product-gifts__image img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .product-gifts {
    padding: 12px 14px 14px;
    border-radius: 12px;
    margin-top: 12px;
  }
  .product-gifts__item label {
    width: 78px;
    padding: 8px 6px;
  }
  .product-gifts__image {
    width: 48px;
    height: 48px;
  }
  .product-gifts__image img {
    width: 44px;
    height: 44px;
  }
}
/* ===== end codex-product-gifts-style-20260331 ===== */


/* codex-mobile-breadcrumb-scroll-20260331 */
@media (max-width: 991px) {

  /* Убираем фон/рамку блока-обёртки — лишние слои на мобильном */
  .breadcrumbs-box,
  .breadcrumb-box {
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  /* Основной список — одна строка, горизонтальный скрол */
  .breadcrumbs-box > ul.breadcrumb,
  .breadcrumb-box > ul.breadcrumb,
  .container > .breadcrumbs-box > ul.breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    min-height: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    background: #f5f8ff !important;
    border: 1px solid #e2eaf8 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  /* Прячем полосу прокрутки в WebKit/Blink */
  .breadcrumbs-box > ul.breadcrumb::-webkit-scrollbar,
  .breadcrumb-box > ul.breadcrumb::-webkit-scrollbar,
  .container > .breadcrumbs-box > ul.breadcrumb::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Элементы — не сжимаются, не переносятся */
  .breadcrumbs-box > ul.breadcrumb > li,
  .breadcrumb-box > ul.breadcrumb > li,
  .container > .breadcrumbs-box > ul.breadcrumb > li {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Ссылки и текст */
  .breadcrumbs-box > ul.breadcrumb > li > a,
  .breadcrumbs-box > ul.breadcrumb > li > span,
  .breadcrumb-box > ul.breadcrumb > li > a,
  .breadcrumb-box > ul.breadcrumb > li > span,
  .container > .breadcrumbs-box > ul.breadcrumb > li > a,
  .container > .breadcrumbs-box > ul.breadcrumb > li > span {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Последний элемент (текущая страница) — чуть темнее */
  .breadcrumbs-box > ul.breadcrumb > li:last-child > span,
  .breadcrumb-box > ul.breadcrumb > li:last-child > span,
  .container > .breadcrumbs-box > ul.breadcrumb > li:last-child > span {
    color: #2c3e50 !important;
    font-weight: 600 !important;
  }

  /* Индикатор скрола справа — градиент-подсказка */
  .breadcrumbs-box,
  .breadcrumb-box {
    position: relative !important;
  }
}

/* codex-breadcrumb-minwidth-fix-20260331 */
@media (max-width: 991px) {
  /* Fix: flex item needs min-width:0 to allow overflow-x:auto to work */
  .breadcrumb-box,
  .breadcrumbs-box {
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }
  .breadcrumbs-box > ul.breadcrumb,
  .breadcrumb-box > ul.breadcrumb {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 0% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
  }
}

/* codex-breadcrumb-scroll-v3-20260331 */
/* Горизонтальний скрол хлібних крихт: скрол на батьківському div, ul — inline-flex */
@media (max-width: 991px) {

  /* Батько скролиться */
  .breadcrumb-box,
  .breadcrumbs-box,
  .container > .breadcrumbs-box {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
  }

  .breadcrumb-box::-webkit-scrollbar,
  .breadcrumbs-box::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  /* ul — не стискається, росте по контенту */
  .breadcrumb-box > ul.breadcrumb,
  .breadcrumbs-box > ul.breadcrumb,
  .container > .breadcrumbs-box > ul.breadcrumb {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 100% !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    background: #f5f8ff !important;
    border: 1px solid #e2eaf8 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  /* Елементи — не стискаються */
  .breadcrumb-box > ul.breadcrumb > li,
  .breadcrumbs-box > ul.breadcrumb > li,
  .container > .breadcrumbs-box > ul.breadcrumb > li {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .breadcrumb-box > ul.breadcrumb > li > a,
  .breadcrumb-box > ul.breadcrumb > li > span,
  .breadcrumbs-box > ul.breadcrumb > li > a,
  .breadcrumbs-box > ul.breadcrumb > li > span,
  .container > .breadcrumbs-box > ul.breadcrumb > li > a,
  .container > .breadcrumbs-box > ul.breadcrumb > li > span {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .breadcrumb-box > ul.breadcrumb > li:last-child > span,
  .breadcrumbs-box > ul.breadcrumb > li:last-child > span {
    color: #2c3e50 !important;
    font-weight: 600 !important;
  }
}

/* codex-breadcrumb-final-no-media-20260401 */
/* Горизонтальний скрол хлібних крихт — БЕЗ медіа-запиту, гарантовано на всіх пристроях */

.breadcrumb-box,
.breadcrumbs-box,
.container > .breadcrumbs-box {
  display: block !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  /* На десктопі контент влазить без скролу, на мобільному — скролиться */
}

.breadcrumb-box::-webkit-scrollbar,
.breadcrumbs-box::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.breadcrumb-box > ul.breadcrumb,
.breadcrumbs-box > ul.breadcrumb,
.container > .breadcrumbs-box > ul.breadcrumb {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 100% !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  background: #f5f8ff !important;
  border: 1px solid #e2eaf8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 0 !important;
  white-space: nowrap !important;
}

.breadcrumb-box > ul.breadcrumb > li,
.breadcrumbs-box > ul.breadcrumb > li,
.container > .breadcrumbs-box > ul.breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.breadcrumb-box > ul.breadcrumb > li > a,
.breadcrumb-box > ul.breadcrumb > li > span,
.breadcrumbs-box > ul.breadcrumb > li > a,
.breadcrumbs-box > ul.breadcrumb > li > span,
.container > .breadcrumbs-box > ul.breadcrumb > li > a,
.container > .breadcrumbs-box > ul.breadcrumb > li > span {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.breadcrumb-box > ul.breadcrumb > li:last-child > span,
.breadcrumbs-box > ul.breadcrumb > li:last-child > span {
  color: #2c3e50 !important;
  font-weight: 600 !important;
}

/* codex-mobile-menu-gaps-fix-20260401 */

/* === 1. Прибираємо пробіли від порожніх блоків у мобільному меню === */

/* Мовний і валютний блок — ховаємо поки порожній */
#mobm-left-content .mh-left-b.mob-language:empty,
#mobm-left-content .mh-right-b.mob-currency:empty {
  display: none !important;
}

/* Блок мова/валюта у шапці меню — не займає місце якщо порожній */
#mobm-left-content .mobm-header-block:has(.mob-language:empty):has(.mob-currency:empty) {
  padding: 0 !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
}

/* Блок категорій у меню — не займає місце якщо порожній */
#mob-catalog-left .mobm-body.mm-ss:empty {
  display: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* links-mob — не займає місце якщо порожній */
#mobm-left-content .links-mob:empty {
  display: none !important;
}

/* desc_info_mob — не займає місце якщо порожній */
#mobm-left-content .desc_info_mob:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === 2. Скелетон-лоадер для категорій поки AJAX не завантажив === */
#mob-catalog-left .mobm-body.mm-ss:not(:empty) {
  animation: none !important;
}

/* Показуємо скелетон коли контейнер порожній */
#mob-catalog-left .mobm-body.mm-ss:empty::after {
  content: '';
  display: block;
  height: 280px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: codex-skeleton 1.2s ease-in-out infinite;
  border-radius: 8px;
  margin: 12px 15px;
}

@keyframes codex-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === 3. Скелетон для links-mob === */
#mobm-left-content .links-mob:empty::after {
  content: '';
  display: block;
  height: 120px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: codex-skeleton 1.2s ease-in-out infinite;
  border-radius: 8px;
  margin: 8px 0;
}

/* === 4. Плавна поява контенту після AJAX === */
#mobm-left-content .mobm-body > *,
#mob-catalog-left .mobm-body > * {
  animation: codex-fade-in 0.25s ease forwards;
}

@keyframes codex-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === 5. Eager loading: header icons - prevent layout shift === */
.mob-menu-info-fixed-left {
  will-change: transform;
}

/* Фіксуємо висоту mobm-header-block щоб не стрибало після AJAX */
.mobm-header-block {
  min-height: 0 !important;
}

/* Якщо мова/валюта заповнилась — показуємо з анімацією */
#mobm-left-content .mh-left-b.mob-language:not(:empty),
#mobm-left-content .mh-right-b.mob-currency:not(:empty) {
  animation: codex-fade-in 0.2s ease forwards;
}

/* codex-mobile-menu-gaps-fix-v2-20260401 */

/* === Скелетон-анімація === */
@keyframes codex-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes codex-fadein {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Мовний/валютний блок — ховаємо якщо порожній (маленькі блоки, не помітно) === */
#mobm-left-content .mh-left-b.mob-language:empty,
#mobm-left-content .mh-right-b.mob-currency:empty {
  display: none !important;
}
/* Заголовок мова/валюта — прибираємо відступи якщо обидва порожні */
#mobm-left-content .mobm-header-block:has(> .mob-language:empty + .mob-currency:empty),
#mobm-left-content .mobm-header-block:has(> .mob-language:empty):has(> .mob-currency:empty) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
}

/* === Блок категорій — скелетон замість порожнього місця === */
#mob-catalog-left .mobm-body.mm-ss:empty {
  display: block !important;
  min-height: 220px !important;
  padding: 12px 15px !important;
  position: relative !important;
}
#mob-catalog-left .mobm-body.mm-ss:empty::before {
  content: '' !important;
  position: absolute !important;
  inset: 12px 15px !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e6ea 50%, #f0f2f5 75%) !important;
  background-size: 200% 100% !important;
  animation: codex-shimmer 1.4s ease-in-out infinite !important;
}

/* === links-mob — скелетон === */
#mobm-left-content .links-mob:empty {
  display: block !important;
  min-height: 100px !important;
  position: relative !important;
  margin: 8px 0 !important;
}
#mobm-left-content .links-mob:empty::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e6ea 50%, #f0f2f5 75%) !important;
  background-size: 200% 100% !important;
  animation: codex-shimmer 1.4s ease-in-out infinite !important;
}

/* === Плавна поява після AJAX (коли :empty знімається) === */
#mob-catalog-left .mobm-body.mm-ss:not(:empty) > *,
#mobm-left-content .links-mob:not(:empty) > *,
#mobm-left-content .mh-left-b.mob-language:not(:empty),
#mobm-left-content .mh-right-b.mob-currency:not(:empty) {
  animation: codex-fadein 0.2s ease forwards !important;
}

/* === Мобільне меню: will-change для плавного слайду === */
.mob-menu-info-fixed-left {
  will-change: transform !important;
}

/* codex-video-slide-height-fix-20260401 */
.swiper-slide.main-video,
.swiper-slide.additional-video {
  height: 100% !important;
  align-self: stretch !important;
}

.swiper-slide.main-video .video-link,
.swiper-slide.additional-video .video-link,
span.video-link, a.video-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

.swiper-slide.main-video .video-container,
.swiper-slide.additional-video .video-container {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  max-height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  position: relative !important;
}

.swiper-slide.main-video .video-container iframe,
.swiper-slide.main-video .video-container video,
.swiper-slide.additional-video .video-container iframe,
.swiper-slide.additional-video .video-container video {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

@media (max-width: 991px) {
  .swiper-slide.main-video, .swiper-slide.additional-video {
    height: 100% !important;
  }
  .swiper-slide.main-video .video-container, .swiper-slide.additional-video .video-container {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }
}


/* codex-video-preview-thumbnail-20260401 */
/* YouTube thumbnail image in video slide */
.swiper-slide.main-video .video-container img,
.swiper-slide.additional-video .video-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}
/* Position context for play button */
.swiper-slide.main-video .video-link,
.swiper-slide.additional-video .video-link {
  position: relative !important;
}
/* YouTube-style play button overlay */
.swiper-slide.main-video .video-link::after,
.swiper-slide.additional-video .video-link::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  width: 80px !important;
  height: 56px !important;
  background: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.05 13.05 0 24 0 24s.05 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.95 34.95 68 24 68 24s-.05-10.95-1.48-16.26z' fill='%23ff0000'/%3E%3Cpath d='M45 24 27 14v20z' fill='%23fff'/%3E%3C/svg%3E') no-repeat center !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 10 !important;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55)) !important;
  transition: transform 0.2s ease !important;
}
.swiper-slide.main-video .video-link:hover::after,
.swiper-slide.additional-video .video-link:hover::after {
  transform: translate(-50%,-50%) scale(1.12) !important;
}


/* codex-video-play-btn-dquote-fix-20260401 */
/* Fix: use %22-encoded double-quote attrs + no-quote url() to avoid CSS parse failure */
.swiper-slide.main-video .video-link::after,
.swiper-slide.additional-video .video-link::after {
  background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 68 48%22%3E%3Cpath d=%22M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.05 13.05 0 24 0 24s.05 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.95 34.95 68 24 68 24s-.05-10.95-1.48-16.26z%22 fill=%22%23ff0000%22/%3E%3Cpath d=%22M45 24 27 14v20z%22 fill=%22%23fff%22/%3E%3C/svg%3E) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}


/* codex-video-play-btn-b64-20260401 */
/* Fix: base64-encoded SVG avoids all CSS quoting issues */
.swiper-slide.main-video .video-link::after,
.swiper-slide.additional-video .video-link::after {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2OCA0OCI+PHBhdGggZD0iTTY2LjUyIDcuNzRjLS43OC0yLjkzLTIuNDktNS40MS01LjQyLTYuMTlDNTUuNzkuMTMgMzQgMCAzNCAwUzEyLjIxLjEzIDYuOSAxLjU1Yy0yLjkzLjc4LTQuNjMgMy4yNi01LjQyIDYuMTlDLjA1IDEzLjA1IDAgMjQgMCAyNHMuMDUgMTAuOTUgMS40OCAxNi4yNmMuNzggMi45MyAyLjQ5IDUuNDEgNS40MiA2LjE5QzEyLjIxIDQ3Ljg3IDM0IDQ4IDM0IDQ4czIxLjc5LS4xMyAyNy4xLTEuNTVjMi45My0uNzggNC42NC0zLjI2IDUuNDItNi4xOUM2Ny45NSAzNC45NSA2OCAyNCA2OCAyNHMtLjA1LTEwLjk1LTEuNDgtMTYuMjZ6IiBmaWxsPSIjZmYwMDAwIi8+PHBhdGggZD0iTTQ1IDI0IDI3IDE0djIweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}


/* codex-mobile-category-toolbar-fix-20260401 */
@media (max-width: 767px) {
  /* Hide desktop inline sort buttons — use mobile dropdown instead */
  .msg-sort-btn {
    display: none !important;
  }
  #msg-sort-bar {
    display: none !important;
  }
  /* Show the mobile dropdown sort selector */
  .ch-limit-sorts {
    display: flex !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }
  /* Toolbar container: allow wrap so dropdown row sits below count+toggle */
  .category-toolbar-box .localstorage.dflex,
  .search-toolbar-box .localstorage.dflex {
    flex-wrap: wrap !important;
    overflow: visible !important;
    height: auto !important;
  }
}

/* codex-mobile-addit-action-fix-20260401 */
@media (max-width: 991px) {
  /* Ensure addit-action icons are visible inside card bottom area */
  #content.ns-smv .row-flex.category-page .product-thumb {
    overflow: visible !important;
  }
  /* Keep image area overflow hidden (rounded corners) */
  #content.ns-smv .row-flex.category-page .product-thumb .image {
    overflow: hidden !important;
  }
  /* Reposition addit-action: bottom inside image, horizontal row */
  #content.ns-smv .row-flex.category-page .product-thumb .addit-action,
  .product-grid .product-thumb .addit-action,
  .container-module .product-thumb .addit-action {
    position: absolute !important;
    bottom: 8px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 6px !important;
    z-index: 3 !important;
    opacity: 1 !important;
    top: auto !important;
  }
  /* Buttons sized for touch */
  #content.ns-smv .row-flex.category-page .product-thumb .addit-action .btn,
  .product-grid .product-thumb .addit-action > div > button,
  .container-module .product-thumb .addit-action > div > button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* codex-gallery-swipe-fix-20260401 */
/* Ensure product gallery swiper is swipeable on mobile */
.product-gallery .swiper-container,
.product-gallery .swiper {
  touch-action: pan-y !important;
}
/* Non-video swiper slides must not block touch/swipe */
.swiper-slide:not(.main-video):not(.additional-video) span.video-link,
.swiper-slide:not(.main-video):not(.additional-video) a.video-link {
  pointer-events: auto !important;
  touch-action: auto !important;
}
/* Ensure swiper wrapper itself allows horizontal pan */
.product-gallery .swiper-wrapper {
  touch-action: pan-x !important;
}



/* ===== codex-mobile-toolbar-v2-20260401 ===== */
/*
 * Problem: On mobile (375px) the desktop sort tab buttons (.msg-sort-btn inside
 * #msg-sort-bar) overflow the toolbar width, causing sort dropdown to appear
 * outside/overlapping product cards.
 *
 * Fix:
 *  - Mobile: hide #msg-sort-bar (desktop-style sort tabs), show .ch-limit-sorts
 *    dropdown which is the correct mobile-friendly sort control.
 *  - Ensure the toolbar is a clean flex row: [count] [spacer] [ch-limit-sorts] [view-toggle]
 *  - Override the global .ch-limit-sorts { display:none!important } for mobile.
 */
@media (max-width: 767px) {
  /* Hide desktop sort tabs on mobile */
  #msg-sort-bar {
    display: none !important;
  }

  /* Show the mobile-friendly sort dropdown */
  .ch-limit-sorts {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Make the dropdown toggle button full-width inside its container */
  .ch-limit-sorts .btn-sort-limit {
    width: 100% !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--up-border-color, #e0e0e0) !important;
    border-radius: 8px !important;
    background: var(--up-bg-card-color, #fff) !important;
    color: var(--up-text-wd-color) !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  /* Toolbar row: [count] [ch-limit-sorts flex-grow] [view-toggle] */
  .category-toolbar-box .localstorage.dflex,
  .view-box .localstorage.dflex {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 4px 0 !important;
  }

  /* Count label — shrink, don't grow */
  #msg-toolbar-count {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 36px !important;
    padding-right: 0 !important;
    border-right: none !important;
    margin-right: 0 !important;
    color: var(--up-text-gray-color) !important;
  }

  /* View toggle — shrink, don't grow */
  .category-toolbar-box .product_list_toolbar,
  .localstorage.dflex .product_list_toolbar {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  /* Compact view-toggle buttons */
  .product_list_toolbar .btn-view {
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ensure the toolbar container itself doesn't clip */
  .category-toolbar-box,
  .view-box.category-toolbar-box {
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Dropdown menu positioning */
  .ch-limit-sorts .dropdown-menu {
    min-width: 180px !important;
    z-index: 1050 !important;
  }
}
/* ===== end codex-mobile-toolbar-v2-20260401 ===== */
/* ===== codex-mobile-toolbar-v3-20260401 ===== */
/*
 * Complete mobile toolbar fix. Root causes:
 *  1. max-height: 44px !important (base CSS) was never overridden → container clips wrapped rows
 *  2. Original theme @media(max-width:767px) rule:
 *     #content.ns-smv .category-toolbar-box .btn-group { width: 100% }
 *     caused view-toggle to want full width, breaking flex layout
 *  Fix: use same #content.ns-smv specificity prefix + !important on all overrides
 */
@media (max-width: 767px) {

  /* 1. Toolbar container — single row, auto height, no clipping */
  #content.ns-smv .category-toolbar-box .localstorage.dflex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 0 6px 0 12px !important;
    box-sizing: border-box !important;
  }

  /* 2. Count label — left, shrink if needed */
  #content.ns-smv .category-toolbar-box #msg-toolbar-count {
    flex: 0 1 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding-right: 8px !important;
    border-right: 1px solid var(--up-border-color, #e0e0e0) !important;
    margin-right: 0 !important;
  }

  /* 3. Desktop sort bar — hide completely */
  #content.ns-smv .category-toolbar-box #msg-sort-bar {
    display: none !important;
  }
  #content.ns-smv .category-toolbar-box .msg-sort-btn {
    display: none !important;
  }

  /* 4. Mobile sort dropdown — show, fill available space */
  #content.ns-smv .category-toolbar-box .ch-limit-sorts {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    order: 0 !important;
  }
  #content.ns-smv .category-toolbar-box .ch-limit-sorts .btn-sort-limit {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: 1px solid var(--up-border-color, #e0e0e0) !important;
    border-radius: 8px !important;
    background: var(--up-bg-card-color, #fff) !important;
    color: var(--up-text-wd-color) !important;
  }
  #content.ns-smv .category-toolbar-box .ch-limit-sorts .dropdown-menu {
    min-width: 180px !important;
    z-index: 1050 !important;
  }

  /* 5. View toggles — auto width (NOT 100%), right side */
  #content.ns-smv .category-toolbar-box .btn-group {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    height: 44px !important;
    align-items: center !important;
  }
  #content.ns-smv .category-toolbar-box .btn-group .btn-view {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  /* 6. Toolbar wrapper — proper spacing, no z-index overlap with products */
  #content.ns-smv .category-toolbar-box {
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 12px !important;
  }
}
/* ===== end codex-mobile-toolbar-v3-20260401 ===== */




/* ===== codex-catstrip-hscroll-20260402 ===== */
/* Horizontal scrollable pill strip — only for static mm_open_hp bar */

.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  gap: 6px !important;
  padding: 6px 2px !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list::-webkit-scrollbar { display: none !important; }

.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li {
  flex: 0 0 auto !important;
  display: block !important;
  position: relative !important;
}

/* Pill link — base state */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a.parent-link,
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a.dropdown-img {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  padding: 7px 14px !important;
  border: 1.5px solid #dde6f5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1a2d50 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s !important;
  width: auto !important;
}

/* Hover — light blue tint, dark text stays visible */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a.parent-link:hover,
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a.dropdown-img:hover {
  background: #e8f0fe !important;
  border-color: #1d52b8 !important;
  color: #1d52b8 !important;
  box-shadow: 0 2px 8px rgba(29,82,184,.15) !important;
}

/* Icon */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list .msg-menu-cat-icon {
  font-size: 13px !important;
  color: #1d52b8 !important;
  background: transparent !important;
  border: none !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important;
  position: static !important;
  display: inline !important;
  line-height: 1 !important;
}
/* Override theme hover on icon */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a.parent-link:hover .msg-menu-cat-icon,
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li.menu-open > a .msg-menu-cat-icon {
  background: transparent !important;
  border-color: transparent !important;
  color: #1d52b8 !important;
  width: auto !important; height: auto !important;
  padding: 0 !important;
}

/* item-name wrapper */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a .item-name {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  padding-right: 0 !important;
  white-space: nowrap !important;
}

/* Text span */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a .msg-menu-cat-text {
  display: inline !important;
  color: inherit !important;
  white-space: nowrap !important;
}

/* Hide dropdown arrow */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical-list > li > a > .up-icon-angle-right { display: none !important; }

/* Container: transparent, overflow visible */
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) #menu-vertical {
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative !important;
}
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) .menu-box {
  width: 100% !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important;
  overflow: visible !important; position: relative !important;
  right: auto !important; top: auto !important; height: auto !important; display: block !important;
}
.menu-header-box.mm_open_hp:not(.active-m):not(.m-sticky) .row.dflex { width: 100% !important; }

/* Scroll arrows */
.msg-catstrip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 1.5px solid #dde6f5;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  color: #1a2d50; font-size: 18px; line-height: 1; font-weight: 300;
}
.msg-catstrip-arrow-prev { left: -15px; }
.msg-catstrip-arrow-next { right: -15px; }
.msg-catstrip-arrow:hover { background: #1d52b8; color: #fff; border-color: #1d52b8; }
.menu-header-box.mm_open_hp:not(.active-m):hover .msg-catstrip-arrow { opacity: 1; pointer-events: auto; }
.msg-catstrip-arrow.is-hidden { opacity: 0 !important; pointer-events: none !important; }
/* ===== end codex-catstrip-hscroll-20260402 ===== */

/* ===== codex-pb-block-redesign-v3-20260402 ===== */
/*
 * Option C — premium dark card with green glow border.
 * Keeps original pb-block position/size intact.
 * Fixes word-wrap at all responsive breakpoints.
 */

/* Desktop tagline: dark glass + green glow */
.hslider__pb-tagline {
  background: rgba(4, 10, 24, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(83, 181, 83, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(83,181,83,0.12), 0 0 24px rgba(83,181,83,0.18), 0 12px 40px rgba(0,0,0,0.55) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.93) !important;
  line-height: 1.65 !important;
  text-align: center !important;
  max-width: 280px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* Tablet — slightly narrower but enough for full words */
@media (max-width: 991px) {
  .hslider__pb-tagline {
    font-size: 13px !important;
    padding: 10px 16px !important;
    max-width: 225px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
}

/* Mobile — fix the 160px clipping; 190px lets full words breathe */
@media (max-width: 767px) {
  .hslider__pb-tagline {
    font-size: 11px !important;
    padding: 8px 13px !important;
    max-width: 190px !important;
    border-radius: 9px !important;
    line-height: 1.55 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
}
/* ===== end codex-pb-block-redesign-v3-20260402 ===== */


/* ===== codex-lang-zindex-cart-fix-20260402 ===== */
/* Language switcher must sit BELOW the cart sidebar (z-index:1012) and backdrop (z-index:1011) when cart is open */
.cart-is-open .box-language {
  z-index: 1009 !important;
}
/* ===== end codex-lang-zindex-cart-fix-20260402 ===== */


/* ===== codex-search-open-filter-hide-20260402 ===== */
/* Mobile search overlay (z-index:1042) opens over the category toolbar.
   Toolbar stays visible through the overlay. Fix: hide toolbar while search is open. */
@media (max-width: 991px) {
  .mobile-sidebar-search.open-search ~ * .category-toolbar-box,
  body:has(.mobile-sidebar-search.open-search) .category-toolbar-box,
  body:has(.mobile-sidebar-search.open-search) #msg-mobile-sort-bar,
  body:has(.mobile-sidebar-search.open-search) .codex-mobile-toolbar {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ===== end codex-search-open-filter-hide-20260402 ===== */