:root {
  --yellow: #fff100;
  --black: #181818;
  --red: #f83606;
  --gray: #a7a7a7;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--black);
  font-family: Poppins;
  font-weight: 400;
  font-size: 0.16rem;
  color: #333;
}

span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins-Regular.otf);
  font-weight: 400;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins-Medium.otf);
  font-weight: 500;
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins-Bold.otf);
  font-weight: 700;
}

html {
  scroll-behavior: smooth;
}

a {
  display: block;
  outline: 0;
  text-decoration: none;
}

ul,
ol {
  padding-left: 2em;
}

input,
textarea,
button,
select {
  border: 0;
  resize: none;
  outline: 0;
  background: transparent;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  object-fit: contain;
}

/*多行溢出*/
.ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ellipsis3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* hover-图片放大1.1 */
.scale-box,
.imgBox {
  overflow: hidden;
}

.scale-box .scale-img,
.imgBox .scale-img {
  width: 100%;
  height: 100%;
  transition: all 0.3s linear;
  cursor: pointer;
  object-fit: cover;
}

.scale-box:hover .scale-img,
.imgBox:hover .scale-img {
  transform: scale(1.1);
}

/* 常用盒子阴影 */
.shadow_box {
  box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
}

/* 水波纹效果 */
.btn-ripple {
  vertical-align: bottom;
}

.btn-ripple:not(:disabled):hover {
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.btn-ripple:not(:disabled):hover::before {
  animation: ani_ripple 0.75s;
  z-index: 1;
  content: "";
  position: absolute;
  display: block;
  transition: all 0.6s;
  width: 100%;
  height: 0;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  padding-top: 100%;
  transform: translateX(-50%) translateY(-50%);
}

@keyframes ani_ripple {
  0% {
    background: rgba(0, 0, 0, 0.25);
    transform: translateX(-50%) translateY(-50%) scale(0);
  }

  to {
    background: transparent;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}

.headerWrap,
header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

.main {
  width: 94%;
  max-width: 16rem;
  margin: 0 auto;
}

.back {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.swiper-slide>img,
.swiper-slide>video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article img {
  width: revert-layer;
  height: auto;
}

/* 单选框颜色 */
input[type='checkbox'] {
  cursor: pointer;
  position: relative;
  width: .18rem;
  height: .18rem;
  font-size: clamp(10px, .12rem, 12px);
}

input[type='checkbox']::after {
  position: absolute;
  top: 0;
  color: #000;
  width: .18rem;
  height: .18rem;
  display: inline-block;
  visibility: visible;
  padding-left: 0rem;
  text-align: center;
  content: ' ';
  border-radius: .03rem
}

input[type='checkbox']:checked::after {
  content: "✓";
  color: #fff;
  font-size: clamp(10px, .12rem, 12px);
  font-weight: bold;
  background-color: #B35622;
  border: .01rem solid #fff;
}

/* Shared PyroBuy header, footer and contact tools */
.siteHeader {
  position: relative;
  z-index: 20;
  width: 100%;
  background: rgba(24, 24, 24, .98);
}
.siteHeader::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: .5rem;
  background: var(--yellow);
  z-index: -1;
}
.headerBox{
  max-width: 19.2rem;
  margin: 0 auto;
}
.headerTop {
  height: .5rem;
  background: var(--yellow);
  color: #111;
}

.headerTopInner {
  max-width: 17.6rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 3.86rem;
  margin-left: 0;
}

.headerTop span {
  font-size: clamp(12px, .16rem, 16px);
  font-weight: 500;
}

.headerMail {
  display: flex;
  align-items: center;
  gap: .11rem;
  text-transform: uppercase;
  color: #111;
}

.headerMail img {
  width: .24rem;
  height: .17rem;
  object-fit: contain;
}

.socials,
.footerSocials {
  display: flex;
  gap: .1rem;
}

.socials a,
.footerSocials a {
  width: .22rem;
  height: .22rem;
}

.socials img,
.footerSocials img {
  width: .22rem;
  height: .22rem;
  object-fit: contain;
}

.headerNav {
  height: .96rem;
  background: rgba(24, 24, 24, .98);
  position: relative;
}

.siteLogo {
  width: 3.54rem;
  height: 1.46rem;
  position: absolute;
  top: -.5rem;
  left: 0;
  z-index: 2;
  display: block;
  transform-origin: left top;
  transition: transform .3s;
}

.siteLogo:hover {
  transform: translateY(-.05rem) scale(1.04);
}

.siteLogoShape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.siteLogoImg {
  position: absolute;
  top: .32rem;
  left: .43rem;
  width: 2.71rem;
  height: .8rem;
  object-fit: contain;
}

.navMain {
  height: 100%;
  padding-left: 3.86rem;
  margin-left: 0;
  max-width: 17.6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.navMain>a,
.navProductToggle {
  color: #fff;
  font-size: clamp(12px, .18rem, 18px);
  font-weight: 700;
  white-space: nowrap;
  transition: color .25s;
  position: relative;
}

.navMain>a::after,
.navMain>a::after,
.navProductToggle::after,
.navProductToggle::after {
  content: "";
  position: absolute;
  top: calc(100% + .3rem);
  left: 50%;
  transform: translateX(-50%);
  width: 0rem;
  height: .05rem;
  background: var(--yellow);
  border-radius: .05rem;
  transition: width .25s;
}

.navMain>a:hover,
.navMain>a.active,
.navProductToggle:hover,
.navProductToggle.active {
  color: var(--yellow);
}

.navMain>a:hover::after,
.navMain>a.active::after,
.navProductToggle:hover::after,
.navProductToggle.active::after {
  width: .6rem;
}

.navDropdown {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.navProductToggle {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.navDropdown b {
  width: .12rem;
  height: .12rem;
  display: inline-block;
  margin-left: .04rem;
}

.navDropdown b img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.productMenu {
  display: none;
  position: fixed;
  z-index: 30;
  top: 1.46rem;
  left: 50%;
  width: 100%;
  min-height: 5.59rem;
  grid-template-columns: 3.91rem 1fr 5.69rem;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 0 0 .22rem .22rem;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 .14rem .3rem rgba(0, 0, 0, .16);
}

.navDropdown:hover .productMenu,
.navDropdown:focus-within .productMenu,
.navDropdown.is-open .productMenu {
  display: grid;
}

.productTabs {
  background: #fff;
  padding: .48rem .2rem .48rem .3rem;
  border-right: .01rem solid rgba(0, 0, 0, .1);
}

.productTab {
  display: block;
  width: 100%;
  min-height: .46rem;
  padding: 0 .15rem;
  border: 0;
  border-radius: .05rem;
  background: transparent;
  color: #111;
  font-size: clamp(14px, .2rem, 20px);
  line-height: .46rem;
  text-align: left;
  cursor: pointer;
  margin-bottom: .2rem;
}

.productTab:hover,
.productTab.active {
  background: var(--yellow);
  color: #111;
  font-weight: 700;
}

.productPanels {
  padding: .52rem .34rem;
}

.productPanel {
  display: none;
  grid-template-columns: repeat(4, auto);
  gap: .28rem;
}

.productPanel.active {
  display: grid;
}

.productPanel ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .04rem;
}

.productPanel li {
  min-height: .36rem;
  border-radius: .05rem;
  padding-left: .25rem;
  display: flex;
  align-items: center;
  position: relative;
}

.productPanel li:hover {
  background: var(--yellow);
}

.productPanel li:hover::before {
  content: "•";
  position: absolute;
  top: 50%;
  left: .13rem;
  transform: translateY(-50%);
  color: #000;
}

.productPanel li a {
  color: #000;
  font-size: clamp(12px, .16rem, 16px);
  line-height: .24rem;
}

.productBrands {
  padding: .48rem .55rem;
  border-left: .01rem solid rgba(0, 0, 0, .1);
}

.productBrands h3 {
  margin-bottom: .2rem;
  color: #111;
  font-size: clamp(16px, .24rem, 24px);
  font-weight: 700;
}

.productBrands>div {
  display: inline-flex;
  width: 49%;
  flex-direction: column;
  vertical-align: top;
}

.productBrands a {
  margin-bottom: .14rem;
  color: #111;
  font-size: clamp(12px, .16rem, 16px);
  line-height: 1.1;
}

.navRight {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}

.navSearch,
.navWish {
  width: .5rem;
  height: .5rem;
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
}

.navWish {
  color: var(--yellow);
}

.navSearch img,
.navWish img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navWish em {
  position: absolute;
  top: -.08rem;
  right: -.08rem;
  min-width: .2rem;
  height: .2rem;
  border-radius: .1rem;
  background: var(--red);
  color: #fff;
  font-style: normal;
  font-size: clamp(10px, .11rem, 11px);
  display: grid;
  place-items: center;
}

.loginBtn {
  min-width: 1.42rem;
  height: .5rem;
  padding: 0 .27rem;
  border-radius: .5rem;
  background: var(--yellow);
  color: #111 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .1rem;
}

.loginBtn b {
  width: .24rem;
  height: .24rem;
}

.loginBtn b img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.memberCenterBtn {
  display: grid !important;
  width: .5rem;
  height: .5rem;
  place-items: center;
  border: .01rem solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow) !important;
  transition: background .2s ease, color .2s ease;
}

.memberCenterBtn svg {
  width: .34rem;
  height: .34rem;
  fill: currentColor;
}

.memberCenterBtn:hover,
.memberCenterBtn:focus-visible {
  background: var(--yellow);
  color: #111 !important;
}

/* 库存按钮：仅登录后显示，位于会员中心图标右侧，只显示一个仓库图标 */
.navStock {
  display: grid !important;
  width: .5rem;
  height: .5rem;
  place-items: center;
  border: .01rem solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow) !important;
  transition: background .2s ease, color .2s ease;
}

.navStock svg {
  width: .3rem;
  height: .3rem;
  fill: currentColor;
}

.navStock:hover,
.navStock:focus-visible {
  background: var(--yellow);
  color: #111 !important;
}

.quickTools {
  position: fixed;
  right: .39rem;
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  bottom: 1rem;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.quickTools a {
  width: .46rem;
  height: .46rem;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: .08rem;
  color: #111;
  font-size: clamp(16px, .23rem, 23px);
  position: relative;
}

.quickTools a img {
  width: .28rem;
  height: .28rem;
  object-fit: contain;
}

.quickTools .backTop {
  background: var(--yellow);
}

.quickTools a:not(.backTop):hover::before,
.quickTools a:not(.backTop):focus-visible::before {
  content: attr(data-tooltip);
  position: absolute;
  right: .56rem;
  padding: .11rem .2rem;
  color: #111;
  background: #fff;
  font-size: clamp(14px, .18rem, 18px);
  white-space: nowrap;
  border-radius: .1rem;
}

.quickTools a:not(.backTop):hover::after,
.quickTools a:not(.backTop):focus-visible::after {
  position: absolute;
  top: 50%;
  right: .46rem;
  width: 0;
  height: 0;
  border-top: .11rem solid transparent;
  border-bottom: .11rem solid transparent;
  border-left: .16rem solid #fff;
  content: '';
  transform: translateY(-50%);
}

.siteFooter {
  min-height: 6.38rem;
  padding: .47rem 0 0;
  background-image: linear-gradient(rgba(10, 10, 10, .28), rgba(10, 10, 10, .28)), url('/images/footer-background.png');
}

.footerMain {
  padding: 0;
}

.footerTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.siteLogoFooter {
  display: grid;
  width: 2.71rem;
  height: .8rem;
  place-items: center start;
}

.siteLogoFooter img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footerSocials {
  gap: .1rem;
  padding-top: .05rem;
}

.footerSocials a,
.footerSocials img {
  width: .4rem;
  height: .4rem;
}

.footerSocials a {
  position: relative;
}

.footerSocials img {
  position: absolute;
  inset: 0;
  transition: opacity .2s ease;
}

.footerSocialHover {
  opacity: 0;
}

.footerSocials a:hover .footerSocialDefault,
.footerSocials a:focus-visible .footerSocialDefault {
  opacity: 0;
}

.footerSocials a:hover .footerSocialHover,
.footerSocials a:focus-visible .footerSocialHover {
  opacity: 1;
}

.footerDivider {
  height: .01rem;
  margin-top: .38rem;
  background: rgba(255, 255, 255, .15);
}

.footerContent {
  display: grid;
  grid-template-columns: 4.52rem 4.16rem 4.16rem 1fr;
  margin-top: .53rem;
}

.footerCol h3,
.footerContact h3 {
  margin-bottom: .2rem;
  color: #fff;
  font-size: clamp(14px, .2rem, 20px);
  font-weight: 700;
}
.footerCol a,
.footerContact a {
  margin-bottom: .13rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(12px, .16rem, 16px);
  line-height: 1.5;
  transition: color .25s;
}

.footerCol a {
  position: relative;
  padding-left: .16rem;
}

.footerCol a::before {
  position: absolute;
  /* top: .06rem; */
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: .06rem;
  height: .06rem;
  border-radius: 50%;
  content: '';
  background: currentColor;
}

.footerEmail {
  display: flex;
  align-items: center;
  gap: .14rem;
  margin-top: 0.3rem;
}

.footerEmail img {
  width: .5rem;
  height: .5rem;
  object-fit: contain;
}

.footerEmail span,
.footerEmail b {
  display: block;
  font-weight: 400;
}

.footerEmail span {
  line-height: 1.3;
  color: #ebebeb;
  font-size: clamp(12px, .16rem, 16px);
}

.footerEmail b {
  /* margin-top: .05rem; */
  color: #ebebeb;
  font-size: clamp(14px, .2rem, 20px);
}

.footerCol a:hover,
.footerContact a:hover {
  color: var(--yellow);
}

.footerCopy {
  margin-top: .77rem;
  padding: .42rem 0 .58rem;
  border-top: .01rem solid rgba(255, 255, 255, .12);
  text-align: center;
  color: #a5a5a5;
  font-size: clamp(10px, .12rem, 12px);
}

.productBreadcrumb {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: clamp(12px, .16rem, 16px);
}

.productBreadcrumb a,
.productBreadcrumb span {
  margin: 0 .04rem;
  color: inherit;
}

.productBreadcrumb a {
  display: flex;
  align-items: center;
  gap: .08rem;
}

.productBreadcrumb a img {
  width: .18rem;
  height: .18rem;
  filter: brightness(0) invert(1);
}




/* banner */
.brandBanner {
  position: relative;
  height: 6.5rem;
  padding-top: 1.46rem;
  overflow: hidden;
  background: #080808;
}
.brandBanner .swiper-pagination{
  bottom: 0.3rem !important;
}
.brandBanner .swiper-pagination span{
  width: 0.15rem;
  height: 0.15rem;
  opacity: 0.38;
  background: #fff;
  margin: 0 0.06rem !important;
}
.brandBanner .swiper-pagination span.swiper-pagination-bullet-active{
  opacity: 1;
  background: #fff100;
}
.brandBanner .swiper-button-next,
.brandBanner .swiper-button-prev{
  top: calc(50% + 0.73rem);
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
}
.brandBanner .swiper-button-next::after,
.brandBanner .swiper-button-prev::after{
  font-size: 0.26rem;
  color: #000;
}
.brandBanner .swiper-button-prev{
  left: 0.92rem;
}
.brandBanner .swiper-button-next{
  right: 0.92rem;
}
.brandBanner .swiper-button-next:hover,
.brandBanner .swiper-button-prev:hover{
  background: #fff100;
}
.brandBannerBg {
  position: absolute;
  width: 100%;
  height: calc(100% - 1.46rem);
  object-fit: cover;
}

.brandBannerShade {
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .36));
  pointer-events: none;
}

.brandBannerInner {
  position: relative;
  height: 100%;
}

.brandBannerLogo {
  position: absolute;
  top: 1.38rem;
  left: 50%;
  width: 3.35rem;
  transform: translateX(-50%);
}

.brandBannerLogo img {
  display: block;
  width: 100%;
}

.brandBannerMarks {
  position: absolute;
  inset: .72rem 0 .35rem;
}

.brandBannerMark {
  position: absolute;
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  filter: drop-shadow(0 .08rem .18rem rgba(0, 0, 0, .42));
}

.brandBannerMark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.markOne {
  left: 1.72rem;
  top: 1.03rem;
}

.markTwo {
  left: 3.95rem;
  top: 2.62rem;
}

.markThree {
  right: 3.4rem;
  top: 1.08rem;
}

.markFour {
  right: 1.18rem;
  top: 2.56rem;
}

.markFive {
  left: 5.58rem;
  top: 1.36rem;
  width: .92rem;
  height: .92rem;
}

.markSix {
  right: 5.18rem;
  top: 2.8rem;
  width: 2rem;
  height: .75rem;
}




/* 分页 */

.merchPager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .13rem;
  width: 3.85rem;
  height: .44rem;
  margin: .9rem auto 0;
}

.merchPager a,
.merchPager span{
  position: relative;
  display: grid;
  width: .44rem;
  height: .44rem;
  place-items: center;
  border: .01rem solid #737373;
  background: #000;
  border-radius: .04rem;
  color: #FFF;

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #737373;
  font-size: .16rem;
  line-height: .24rem;
}
.merchPager .page_pre img,
.merchPager .page_next img{
    height: 0.15rem;
    width: 0.1rem;
    object-fit: contain;
}

.merchPager span.page_pre,
.merchPager span.page_next{
    opacity: 0.5;
}

.merchPager a:hover,
.merchPager a.page_active,
.merchPager span.page_active{
  border-color: var(--yellow);
  background: var(--yellow);
  color: #111;
}

.mobileHeaderActions,
.mobileDrawer {
  display: none;
}


@media (max-width: 768px) {
  body.mobileMenuOpen {
    overflow: hidden;
  }

  .headerTop {
    display: none;
  }

  .headerNav {
    height: 1.08rem;
  }

  .siteLogo {
    top: 0;
    /* left: .16rem; */
    width: 2.25rem;
    height: 1.08rem;
  }

  .siteLogo:hover {
    transform: none;
  }

  .siteLogoImg {
    top: .22rem;
    left: .28rem;
    width: 1.72rem;
    height: .56rem;
  }

  .navMain {
    display: none;
  }

  .mobileHeaderActions {
    position: absolute;
    top: 0;
    right: .16rem;
    display: flex;
    align-items: center;
    gap: .24rem;
    height: 1.08rem;
  }

  .mobileSearch,
  .mobileMenuToggle {
    display: grid;
    width: .5rem;
    height: .5rem;
    place-items: center;
  }

  .mobileSearch img {
    width: .54rem;
    height: .54rem;
    object-fit: contain;
  }

  .mobileMenuToggle {
    gap: .06rem;
    padding: .08rem;
    border: .01rem solid rgba(255, 255, 255, .55);
    border-radius: .04rem;
  }

  .mobileMenuToggle span {
    display: block;
    width: .24rem;
    height: .02rem;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
  }

  .mobileMenuToggle[aria-expanded="true"] span:first-child {
    transform: translateY(.08rem) rotate(45deg);
  }

  .mobileMenuToggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .mobileMenuToggle[aria-expanded="true"] span:last-child {
    transform: translateY(-.08rem) rotate(-45deg);
  }

  .mobileDrawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
  }

  .mobileDrawer.is-open {
    display: block;
    pointer-events: auto;
  }

  .mobileDrawerShade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .62);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .mobileDrawerPanel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(84vw, 5.8rem);
    height: 100%;
    padding: .28rem .28rem .34rem;
    flex-direction: column;
    overflow-y: auto;
    background: #181818;
    box-shadow: -.12rem 0 .32rem rgba(0, 0, 0, .3);
    transform: translateX(100%);
    transition: transform .28s ease;
  }

  .mobileDrawer.is-open .mobileDrawerShade {
    opacity: 1;
  }

  .mobileDrawer.is-open .mobileDrawerPanel {
    transform: translateX(0);
  }

  .mobileDrawerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .22rem;
    border-bottom: .01rem solid rgba(255, 255, 255, .24);
  }

  .mobileDrawerHeader strong {
    color: var(--yellow);
    font-size: clamp(24px, .24rem, 24px);
    font-weight: 700;
    line-height: 1.5;
  }

  .mobileDrawerClose {
    width: .48rem;
    height: .48rem;
    color: #fff;
    line-height: 1;
    font-size: clamp(28px, .34rem, 34px);
  }

  .mobileNav {
    display: flex;
    padding-top: .18rem;
    flex-direction: column;
  }

  .mobileNav > a,
  .mobileProductsToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: .56rem;
    padding: .16rem .02rem;
    border-bottom: .01rem solid rgba(255, 255, 255, .13);
    color: #fff;
    font-size: clamp(16px, .2rem, 20px);
    line-height: 1.35;
    text-align: left;
  }

  .mobileNav > a:hover,
  .mobileNav > a:focus-visible,
  .mobileProductsToggle:hover,
  .mobileProductsToggle:focus-visible {
    color: var(--yellow);
  }

  .mobileProductsToggle b {
    width: .12rem;
    height: .12rem;
    margin-right: .06rem;
    border-right: .02rem solid currentColor;
    border-bottom: .02rem solid currentColor;
    transform: rotate(45deg) translateY(-.03rem);
    transition: transform .2s ease;
  }

  .mobileProductsToggle[aria-expanded="true"] b {
    transform: rotate(225deg) translate(-.03rem, -.03rem);
  }

  .mobileProductLinks {
    display: none;
    padding: .08rem 0 .12rem .2rem;
    border-bottom: .01rem solid rgba(255, 255, 255, .13);
    grid-template-columns: 1fr;
  }

  .mobileProductLinks.is-open {
    display: grid;
  }

  .mobileProductLinks a {
    padding: .11rem .02rem;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(14px, .17rem, 17px);
    line-height: 1.35;
  }

  .mobileProductLinks a:hover,
  .mobileProductLinks a:focus-visible {
    color: var(--yellow);
  }

  .mobileDrawerFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .12rem;
    margin-top: auto;
    padding-top: .3rem;
  }

  .mobileDrawerFooter a {
    min-height: .48rem;
    padding: .12rem .1rem;
    border: .01rem solid rgba(255, 255, 255, .5);
    border-radius: .04rem;
    color: #fff;
    font-size: clamp(14px, .17rem, 17px);
    line-height: .24rem;
    text-align: center;
  }

  .mobileDrawerFooter a:last-child {
    border-color: var(--yellow);
    background: var(--yellow);
    color: #111;
  }

  /*.quickTools {*/
  /*  right: .12rem;*/
  /*  top: 5.2rem;*/
  /*}*/

  .footerTop {
    align-items: center;
  }

  .footerContent {
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem .18rem;
    margin-top: .4rem;
  }

  .footerContact {
    grid-column: span 2;
  }
}



@media (max-width: 768px) {
  body{
    font-size: 14px;
  }


  .headerTopInner {
    padding-left: 0;
  }

  .siteLogo {
    width: 2.5rem;
  }

  .siteLogoImg {
    top: .28rem;
    left: .3rem;
    width: 1.95rem;
    height: .58rem;
  }

  .navMain {
    width: 100%;
    padding-left: 2.65rem;
    gap: .17rem;
    overflow-x: auto;
  }

  .navMain>a:nth-of-type(n+5),
  .navDropdown+a:nth-of-type(n+4),
  .navSearch,
  .navWish,
  .loginBtn {
    display: none !important;
  }

  /*.quickTools {*/
  /*  right: .12rem;*/
  /*  top: 5.2rem;*/
  /*}*/

  .footerTop {
    align-items: center;
  }

  .footerContent {
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem .18rem;
    margin-top: .4rem;
  }

  .footerContact {
    grid-column: span 2;
  }



    .merchPager {
    gap: .08rem;
    width: auto;
    margin-top: .5rem;
  }

  .merchPager a {
    width: .38rem;
    height: .38rem;
  }
}