/**
 * Home & Chrome dimension polish — header/marquee/hero/why/packed/reviews/FAQ/warehouse/footer
 * Overrides main.css Join white-force to match HTML geek_theme (--sub-btn-bg / --sub-btn-color).
 */

/* --- Marquee (HTML .app_bartool-wrap.app_bt_roll) continuous strip --- */
#card-header .announcement-bar,
#card-header .app_bartool-wrap.app_bt_roll {
  min-height: 48px;
  height: 48px;
  padding: 0 40px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 48px;
  font-size: 13px;
}
#card-header .announcement-viewport,
#card-header .cd-announcement__viewport {
  height: 48px;
}
#card-header .announcement-track,
#card-header .roll-text-wrap {
  align-items: center;
  gap: 0;
  padding: 0;
  animation-duration: 32s;
}
#card-header .announcement-group,
#card-header .cd-announcement__group {
  gap: 80px;
  padding-right: 80px;
}
#card-header .announcement-item,
#card-header .cd-announcement__item {
  line-height: 1.35;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Sticky scroll clear so section titles aren’t clipped under chrome */
.home .block_slides,
.home .block_slogan,
.home .block_collection_list,
.home .block_gallery,
.home .block_comment_image,
.home .block_faq,
.home .cd-affiliate-home,
.home .block_video_image_text {
  scroll-margin-top: 148px;
}

/* --- Hero Swiper (must not stack slides vertically) --- */
.block_slides.cd-hero,
#block_slides-12353985 {
  overflow: hidden;
}
.block_slides.cd-hero .swiper,
#block_slides-12353985 .swiper,
.block_slides .swiper.cd-swiper-live {
  position: relative;
  overflow: hidden !important;
  width: 100%;
}
.block_slides.cd-hero .swiper-wrapper,
#block_slides-12353985 .swiper-wrapper,
.block_slides .swiper.cd-swiper-live .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: stretch;
  box-sizing: content-box;
}
.block_slides.cd-hero .swiper-slide,
#block_slides-12353985 .swiper-slide,
.block_slides .swiper.cd-swiper-live .swiper-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  display: block !important;
}
.block_slides.cd-hero .bg_img_box,
#block_slides-12353985 .bg_img_box {
  line-height: 0;
}
.block_slides.cd-hero .slide-item-auto,
#block_slides-12353985 .slide-item-auto {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.block_slides.cd-hero .img-mobile,
#block_slides-12353985 .img-mobile {
  display: none;
}
@media (max-width: 767px) {
  .block_slides.cd-hero .img-pc,
  #block_slides-12353985 .img-pc {
    display: none;
  }
  .block_slides.cd-hero .img-mobile,
  #block_slides-12353985 .img-mobile {
    display: block;
  }
}
.block_slides .swiper-pagination {
  bottom: 18px;
  gap: 10px;
  pointer-events: none;
}
.block_slides .swiper-pagination-bullet {
  pointer-events: auto;
  width: 56px;
  height: 3px;
  border-radius: 1px;
  background: #fff;
  opacity: 0.45;
}
.block_slides .swiper-pagination-bullet-active {
  opacity: 1;
}
/* Mid banner single slide — no empty chrome */
#block_slides-12353992 .swiper-button-next,
#block_slides-12353992 .swiper-button-prev,
#block_slides-12353992 .swiper-pagination {
  display: none !important;
}
#block_slides-12353992 .slide-item-center {
  height: min(600px, 56vw);
  object-fit: cover;
}

/* --- Why Shop --- */
.block_slogan .block_title_custom {
  --algin: left;
}
.block_slogan .block_title_custom h2 {
  text-align: var(--algin, left);
  margin-bottom: 24px;
}
.block_slogan .list {
  gap: 20px;
  align-items: stretch;
}
.block_slogan .list_item {
  display: flex;
  height: 100%;
  padding: 40px 24px;
  background: #fff;
}
.block_slogan .list_item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.block_slogan .img_wrap {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  flex-shrink: 0;
}
.block_slogan .img_wrap svg {
  display: block;
  margin: 0 auto;
}
.block_slogan .text_wrap {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
.block_slogan .item-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.block_slogan .item-title span {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 0.1s linear;
}
.block_slogan .list_item:hover .item-title span,
.block_slogan .list_item a:hover .item-title span {
  background-size: 100% 2px;
}
.block_slogan .item-des {
  font-size: 14px;
  line-height: 1.5;
  color: #444;
  text-align: center;
}
.block_slogan .item-des p {
  margin: 0;
  text-align: center;
}

/* --- Packed gallery --- */
.block_gallery .block_title {
  margin-bottom: 28px;
}
.block_gallery .block_title h2 {
  margin-bottom: 8px;
}
.home .cd-packed-swiper .swiper-slide img,
.home .block_gallery .img_box img {
  border-radius: 0;
}

/* --- Reviews --- */
.block_comment_image .block_title {
  margin-bottom: 32px;
}
.block_comment_list {
  gap: 16px;
}

/* --- FAQ --- */
.block_faq .block_title {
  margin-bottom: 24px;
}
.block_faq .email-notice {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

/* --- Warehouse video --- */
.block_video_image_text .video_text_content .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  margin-top: 16px;
  letter-spacing: 0.04em;
}

/* --- Footer Join (HTML geek_theme) --- */
.block_footer {
  --sub-btn-bg: #2c676a;
  --sub-btn-color: #fff;
  --place-color: rgba(255, 255, 255, 0.7);
}
.block_footer .footer_input {
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 3px 4px;
  background: transparent;
}
.block_footer .footer_input input {
  color: #fff;
  padding: 9px 8px;
  width: 100%;
}
.block_footer .footer_input input::placeholder {
  color: var(--place-color);
  opacity: 0.85;
}
.block_footer .footer_top .footer_input .submit_box,
.block_footer .footer_top .footer_input .public_btn,
.block_footer .footer_input .submit_box,
.block_footer .footer_input .public_btn,
.block_footer .footer_input #newsletter_btn {
  position: absolute;
  right: 4px;
  top: 3px;
  bottom: 3px;
  height: calc(100% - 6px);
  background-color: var(--sub-btn-bg, #2c676a) !important;
  color: var(--sub-btn-color, #fff) !important;
  border: 0 !important;
  border-radius: 6px;
  padding: 0 23px;
  font-size: calc(1em * 1.05);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.block_footer .footer_newsletter {
  width: var(--email-width, 25%);
}
.block_footer .zuui-share-link {
  gap: 14px;
  margin-top: 18px;
}
.block_footer .copyright {
  font-size: 13px;
  opacity: 0.9;
}

@media (max-width: 767px) {
  .home .block_slides,
  .home .block_slogan,
  .home .block_collection_list,
  .home .block_gallery,
  .home .block_comment_image,
  .home .block_faq,
  .home .block_video_image_text {
    scroll-margin-top: 210px;
  }

  #card-header .announcement-bar {
    font-size: 12px;
  }

  /* Mobile search row ~66px (HTML dump); keep header stack ~204 */
  .header_bottom.mobile_search_wrap {
    min-height: 66px;
    box-sizing: border-box;
  }
  .mobile_search {
    padding: 8px 0 12px;
  }
  .mobile_search_txt {
    min-height: 38px;
  }
  #card-header {
    min-height: 204px;
  }

  .block_slogan .block_title_custom h2 {
    text-align: center;
  }
  .block_slogan .list_item {
    padding: 16px 12px;
  }
  .block_slogan .img_wrap {
    width: 72px;
    height: 72px;
  }

  #block_slides-12353992 .slide-item-center {
    height: 70vh;
  }

  .block_footer .footer_newsletter {
    width: 100%;
  }
  .block_footer .footer_input {
    margin: 8px 0 12px;
  }
}