/* Unified breakpoint system */
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;
}

/* Unified z-index system */
:root {
  --z-dropdown: 1000;
  --z-sticky: 100;
  --z-modal: 2000;
  --z-overlay: 3000;
  --z-notification: 4000;
}

    .custom_fc_frame {right: 50px !important; bottom: 30px !important; }

    address, dl, fieldset, figure, ol, p, pre, ul{ margin:0; }

    /* 登录/注册侧边栏基本样式保持不变 */
    .auth-tabs-login-register { padding: 30px; padding-top: 2.9rem; }
    .auth-tabs-login-register .auth-tab-container { padding: 10px; display: flex; color: #000000; justify-content: center; background: #f2f2f2; border-radius: 50px; }
    .auth-tabs-login-register .auth-tab { flex: 1; padding: 15px; font-size: 18px; text-align: center; cursor: pointer; border: none; background: transparent; border-radius: 30px; }
    .auth-tabs-login-register .auth-tab.active { background: #000000; color: white; }
    #auth-offcanvas-login .auth-content { padding: 30px; padding-top: 0; }
    #auth-offcanvas-login .form-group { margin-bottom: 20px; }
    #auth-offcanvas-login .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; }
    #auth-offcanvas-login .form-control { width: 100%; padding: 12px 15px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 16px; transition: border-color 0.3s ease; background-color: #f3f3f3; }
    #auth-offcanvas-login .form-control:focus { outline: none; border-color: #68699a; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
    #auth-offcanvas-login .btn-primary { width: 100%; padding: 12px; background: #68699a; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease; }
    #auth-offcanvas-login .btn-primary .spinner-border { display: none; }
    #auth-offcanvas-login .social-login { text-align: center; }
    #auth-offcanvas-login .social-btn { width: 100%; padding: 12px; margin: 5px 0; border: 2px solid #68699a; border-radius: 8px; background: white; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; gap: 10px; }
    #auth-offcanvas-login .social-btn:hover { border-color: #68699a; background: #f8f9fa; }
    #auth-offcanvas-login .password-toggle { position: relative; }
    #auth-offcanvas-login .password-toggle .form-control { padding-right: 50px; }
    #auth-offcanvas-login .password-toggle-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #666; }
    #auth-offcanvas-login .form-footer { margin: 20px 0 40px; text-align: center; }
    #auth-offcanvas-login .form-footer-forgot-password { margin: 20px 0 40px; text-align: right; }
    #auth-offcanvas-login .form-footer a, #auth-offcanvas-login .form-footer-forgot-password a { color: #000000; text-decoration: underline; }
    #auth-offcanvas-login .form-footer-forgot-password .btn-forgot-header { background: transparent; border: 0; padding: 0; color: #000000; text-decoration: underline; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; }
    #auth-offcanvas-login .password-strength { display: none; margin-top: 10px; }
    #auth-offcanvas-login .strength-bar { height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
    #auth-offcanvas-login .strength-fill { height: 100%; transition: all 0.3s ease; }
    #auth-offcanvas-login .strength-text { font-size: 12px; color: #666; }
    #auth-offcanvas-login .checkbox-group { display: flex; align-items: top; gap: 10px; margin: 15px 0; }
    #auth-offcanvas-login .checkbox-group input[type='checkbox'] { width: 18px; height: 18px; position: relative; top: 2px; }
    #auth-offcanvas-login .checkbox-group label { font-size: 14px; max-width: calc(100% - 27px); color: #333; }
    #auth-offcanvas-login .uk-offcanvas-bar { background: white; padding: 0; }
    #auth-offcanvas-login .form-footer-description { margin-bottom: 1.3rem; color: #000000; }
    #auth-offcanvas-login .form-footer-description img { width: 23px; margin-right: 10px; padding: 0 4px 4px 0; vertical-align: top; position: relative; top: 4px; }
    #auth-offcanvas-login .form-footer-description span { display: inline-block; vertical-align: top; max-width: calc(100% - 38px); font-size: 18px; }
    @media (min-width: 768px) { #auth-offcanvas-login .uk-offcanvas-bar { width: 400px; } }
    @media (max-width: 767px) { #auth-offcanvas-login .uk-offcanvas-bar { width: 100%; } }
    #auth-offcanvas-login .offcanvas-close { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; z-index: 1000; }
    #auth-offcanvas-login .btn-primary[loading] { pointer-events: none; opacity: 0.6; }
    #auth-offcanvas-login .btn-primary[loading] .spinner-border { display: inline-block; width: 1rem; height: 1rem; vertical-align: text-bottom; border: 0.25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border 0.75s linear infinite; }
    @keyframes spinner-border { to { transform: rotate(360deg); } }

  #link_title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000 !important; /* 降低层级，确保模态框/lightbox遮罩能覆盖住 */
    min-height: 3rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .lv-link-title-span{ display:none; }
  @media screen and (max-width: 767px) {
    .lv-scroll-content { white-space: nowrap; display: flex; align-items: center; animation: scrollText 10s linear infinite; gap: 0.4rem; }
    .lv-link-title-span{ display:inline-block; }
    .scroll-item { display: inline-block; padding: 0 20px; }
    @keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } }
    .lv-scroll-container:hover .lv-scroll-content { animation-play-state: paused; }
  }

  :root { 
    --primary-color: #68699A; 
    --defalut-color: #0A0A0A; 
    --red-color: #DC1E29; 
    --disabled-color: #A4A4A4; 
    --white-color: #FFFFFF; 
    --gray-color: #767676;
    --topbar-h: 3rem;
    --nav-h: 5rem;
    --header-height: 8rem;
    --header-h: 50px;
    --safe-area-top: env(safe-area-inset-top, 0px);
  }
  
  /* Global: body padding-top 已移除，改由 header-height.js 动态设置 #header 的 margin-bottom */
  /* 避免多重补偿导致页面顶部出现空白 */
  /* body {
    padding-top: calc(var(--topbar-h) + var(--safe-area-top)) !important;
  } */
  
  /* Responsive header height adjustments */
  @media (max-width: 768px) {
    :root {
      --nav-h: 4.5rem;
      --header-height: 7.5rem;
    }
  }
  
  @media (max-width: 480px) {
    :root {
      --nav-h: 4rem;
      --header-height: 7rem;
    }
  }
  
  .header-nav { display: none; }
  #desktop-header .header{ background:var(--white-color)!important; }
  #mobile-header-sticky .wap-top{ background:var(--white-color); }
  .iqit-megamenu-container { display: none; }
  #main-page-content { background: #f4f6f8; }
  .top a { color: var(--white-color) !important; }
  .nav { justify-content: space-between; align-items: center; }
  .header { top: 0; }
  .header .nav>ul>li { padding-bottom: 0 !important; }
  .wap-top #cart-toogle { margin-right: 0.8rem; }
  .txt1 { margin: 0 !important; min-height: 3rem; font-weight: 700; }
  .header .user .account { display: none; }
  .f58 { display: block; line-height: 1.2; }
  .tit { line-height: 1.2; }
  .fitImg:hover img { transform: scale(1) !important; margin: auto 0; }
  .fitImg, .fitImg2, .fitImg3 { height: auto !important; }
  .main .card { border: 0; }
  .tabcont { min-height: 30rem; }
  .a1 { color: var(--white-color) !important; }
  .idx4 .a1 { background: rgba(255,255,255,0.8) !important; color: var(--defalut-color) !important; }
  .idx4 .a1:hover { background: #bcbcc4 !important; opacity: 0.8; }
  .idx4 .a2 { color: var(--white-color) !important; }
  /* unhide footer containers */
  #desktop-header-style-w-3 { display: none; }
  #footer-container-main, #footer-container-first { display: block !important; }

  .footer .ft1 a { color: #acacac !important; }
  #footer { background: #000 !important; }
  /* Footer main container styles (mimic Tailwind utilities used in markup) */
  #footer-container-main .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    justify-content: center;
    gap: 16px;
    align-items: center;
    border-bottom:1px solid rgba(255,255,255,.2);padding:1rem 0}
  #footer-container-main .footer-bottom img{display:inline-block;border-radius:.125rem}
  #footer-container-main .footer-bottom p.flex{display:inline-flex;align-items:center;gap:.25rem;margin:0}
  #footer-container-main .footer-bottom .mr-0\.5{margin-right:.125rem}
  #footer-container-main .footer-bottom .size-6{width:1.5rem;height:1.5rem}
  #footer-container-main .text-white{color:#fff}
  @media (max-width: 767px){
    #footer-container-main .footer-bottom{gap:.5rem;padding:.75rem 0}
    #footer-container-main .footer-bottom img{width:48px;height:auto}
  }
  .footer-support-payment { border: 0 !important; color: var(--white-color) !important; }
  .idx8 .fitImg { height: 34.88rem !important; display: block; }
  .idx8 .fitImg img { height: 100%; object-fit: cover; }
  .lv-home-video-storyblock { min-height: 10rem; }
  .lv-home-video-storyblock .home-video-list-container { position: relative; }
  .lv-home-video-storyblock .home-video-item > div { box-shadow: 0 10px 24px rgba(0,0,0,0.08); transition: transform .2s ease, box-shadow .2s ease; }
  .lv-home-video-storyblock .home-video-item:hover > div { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.16); }
  .lv-home-video-storyblock .home-video-item img { transition: transform .25s ease; }
  .lv-home-video-storyblock .home-video-item:hover img { transform: scale(1.03); }
  .lv-home-video-storyblock .home-video-caption{position:absolute;left:0;right:0;bottom:0;padding:.9rem .75rem;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.85) 100%);color:#fff;font-weight:600}
  .lv-home-video-storyblock .home-video-caption-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:1rem;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.35)}
  @media (max-width: 959px){.lv-home-video-storyblock .home-video-caption{padding:.75rem .65rem}.lv-home-video-storyblock .home-video-caption-text{font-size:.95rem}}
  .header .dropdown .firstNameEmail { display: none !important; }
  .header .user .dropdown { padding: 0 !important; }
  .header-user-btn { padding: 0 1rem; }
  .lv-fix-menu-right { display: flex; }
  .wap-top .col { padding: 0; }
  .wap-top #blockcart #cart-toogle { margin-right: 0; }
  body { line-height: 1.3; -webkit-overflow-scrolling: touch; }
  .mt-55rem { margin-top: 5.5rem; }
  .mt-19rem { margin-top: 1.9rem; }
  .mt-35rem { margin-top: 3.5rem; }
  @media (max-width: 959px) { .mt-55rem { margin-top: 4rem; } .mt-19rem { margin-top: 1.3rem; } #footer .Subscribe .col2 .share{ justify-content: flex-start; } /* 移除 .Subscribe .col1 的 padding 覆盖，让 style.css 的生效 */ }
  /* Mobile breadcrumb - single row with horizontal scroll */
  @media (max-width: 767px) {
    .breadcrumb .row {
      flex-wrap: nowrap !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .breadcrumb .row .col:first-child {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .breadcrumb .row .col:first-child ol {
      display: flex;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .breadcrumb .row .col:first-child ol li {
      flex-shrink: 0;
    }
    .breadcrumb .row .col.col-auto {
      flex-shrink: 0;
    }
  }
  .banner .lv-banner-1-num { padding-right: 0.56rem !important; }
  .wk-product-variants-item #wk_option_2 { display: none; }
  #mobile-header .m-nav-btn>#mobile-cart-products-count { display: block !important; }
  .banner .statistics .uk-slider .item { display: flex; justify-content: center; }
  .idx3 .idx-type { margin-bottom: 3.5rem !important; }
  .idx5 .desc { color: var(--gray-color); }
  #header .logo a svg { width: 9rem; margin: 1rem 0; }
  .idx5 .item { align-self: flex-start !important; }
  .header .user .d-inline-block { display: none !important; }
  .header .user #currency_selector, .header .user .currency-selector { display: block !important; }
  .uk-card-btn-pre-cut { line-height: 1.3 !important; }
  .wk_option_checkbox_parent { display: none; }
  .header .nav>ul { position: relative; min-height: 4rem; }
  #footer .st0, #footer .st1, #footer .st02, #footer .st2 { stroke: var(--white-color); fill: var(--white-color); }
  .st0 { fill: none; stroke: var(--defalut-color); stroke-width: 60; stroke-miterlimit: 10; }
  .st02 { fill: var(--defalut-color); stroke: var(--defalut-color); stroke-width: 30; stroke-miterlimit: 5; }
  .st3 { fill-rule: evenodd; clip-rule: evenodd; }
  .st2 { fill: var(--defalut-color); }
  .st1 { fill: none; stroke: var(--defalut-color); stroke-width: 60; stroke-miterlimit: 10; }
  .share a:hover{ background:none !important; }
  .swiper-container .swiper-pagination-bullet-active{ background:var(--defalut-color); }
  #back-to-top{ left:1rem; }
  
  /* Ensure sticky desktop header sits below top promo bar */
  #header.desktop-header-style-w-3 .header.fix{
    position: fixed !important;
    top:var(--topbar-h, 3rem) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
  }
  .wap-top,
  #mobile-header-sticky .wap-top,
  #mobile-header .wap-top {
    z-index: 999 !important;
  }
  .product-variants .uk-tab li.uk-active{ background-color:var(--primary-color); }
  .product-variants .discount-tag{ background-color:var(--primary-color); }
  .product-actions .product-variants .color-attributes label:has(.input-color:checked),.product-actions .product-variants .color-attributes label:has(.input-color:hover){ border-color:var(--primary-color); }
  #mobile-cart-wrapper #blockcart-content .product-image a img{ width:auto; }

  @media screen and (max-width: 960px) {
    /* Banner margin-top 已移除，改由 header-height.js 动态设置导航的 margin-bottom */
    /* 避免多重补偿导致页面顶部出现空白 */
    /* .banner,
    .banner-section,
    .category-single-banner,
    .category-slideshow {
        margin-top: 8rem !important;
    } */
    
    /* Product detail page - container needs padding-top to clear fixed header */
    /* Only apply to pages with breadcrumb (product detail pages) */
    /* .container:has(.breadcrumb) {
        padding-top: 5.7rem !important;
    } */
    
    /* Breadcrumb small margin for spacing */
    .breadcrumb {
        margin-top: 0.3rem !important;
        margin-bottom: 0.5rem !important;
    }
}

  /* CSS variables are defined at the top of this file */
  /* Banner and navigation alignment - use body padding-top for spacing */
  .banner, .banner-section { position: relative; margin: 0; }
  .statistics { margin-top: 0 !important; }
/* Fix statistics vertical centering - PC only */
@media (min-width: 960px) {
  .statistics.uk-visible\@m .-items {
    overflow: hidden;
    display: block;
    padding: 17px 0;
  }
}
  /* Make statistics sit flush under banner */
  .banner + .statistics,
  .banner-section + .statistics{ margin-top: 0 !important; padding-top: 0 !important; }
  .banner, .banner-section{ margin-bottom: 0 !important; }
  /* Home page fixed banner ratio - PC only */
  @media (min-width: 960px) {
    body.page-index .banner .uk-slideshow-items,
    body.page-index .banner-section .uk-slideshow-items{ aspect-ratio: 19 / 7 !important; }
  }
  /* Image full-width display */
  .banner img, .banner-section img { width: 100%; height: auto; display: block; object-fit: contain; background:#fff; }
  /* Slide items follow image natural height - desktop only */
  /* Mobile uses UIkit absolute positioning, handled by homepage.css */
  @media (min-width: 960px) {
    .banner .swiper-slide,
    .banner .uk-slider-items>li,
    .banner .uk-slideshow-items>li,
    .banner .slide,
    .banner-section .swiper-slide,
    .banner-section .uk-slideshow-items>li,
    .banner-section .uk-slider-items>li,
    .banner-section .slide { height: auto !important; overflow: hidden !important; }
  }
  @media (max-width: 959px) {
    :root {
      --nav-h: 4.5rem;
      --header-height: 7.5rem;
    }

    /* 移动端通过 #header 的 margin-bottom 推开内容，由 JS 动态设置 */
  }

  /* Remove fixed height/padding from banner carousel containers (UIkit / Swiper) */
  /* Desktop only: override height. Mobile keeps UIkit default absolute positioning */
  @media (min-width: 960px) {
    .banner [uk-slideshow],
    .banner .uk-slideshow,
    .banner .uk-slideshow-items,
    .banner .swiper,
    .banner .swiper-container,
    .banner .swiper-wrapper,
    .banner .swiper-slide{
      height: auto !important;
      min-height: 0 !important;
      padding-bottom: 0 !important;
    }
    .banner .uk-slideshow-items>li,
    .banner .swiper-slide{
      height: auto !important;
      min-height: 0 !important;
      padding-bottom: 0 !important;
    }
    .banner .uk-slideshow-items>li{ display: block; }
  }

  .banner .uk-dotnav{ margin-top: 0 !important; }
  .banner, .banner-section{ margin-bottom: 0 !important; }

  /* 桌面固定高度 870px；移动端默认按图片自然高度自适应 */
  @media (min-width: 960px){
    .banner [uk-slideshow],
    .banner .uk-slideshow,
    .banner .uk-slideshow-items,
    .banner .swiper,
    .banner .swiper-container,
    .banner .swiper-wrapper,
    .banner .swiper-slide{
      height: auto !important;
    }

    .banner img, .banner-section img{
      width: 100%;
      height: auto !important;
      object-fit: contain; /* 左右完整显示，不裁切 */
      display: block;
    }
  }

/* ============================================
   customerLink firecheckout-step Optimization
   Optimized for PC and Mobile responsive design
   ============================================ */

/* Base container styles */
.customerLink.firecheckout-step {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Title section - use flexbox */
.customerLink-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.customerLink-title_info {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.customerLink-title_optional {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #999 !important;
    opacity: 1 !important;
}

.customerLink-title_price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

/* Products container - Swiper horizontal layout for PC */
.customerLink-container.customerLink-con {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.customerLink-con .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* Product item card - fixed width for horizontal swiper */
.customerLink-con .customerLink-item {
    display: flex !important;
    flex-direction: column !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 12px !important;
    background: #fafafa !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    position: relative !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.2s ease !important;
    margin-right: 12px !important;
}

.customerLink-con .customerLink-item:hover {
    background: #f5f5f5 !important;
}

/* Checkbox styling - centered at top */
.customerLink-item_checkboxVal {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.customerLink-item_checkboxVal::before {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #0b0b0b !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
}

.customerLink-item_checkboxVal:checked::before {
    border: 6px solid #0b0b0b !important;
    background: #fff !important;
}

/* Product content wrapper - vertical layout for card */
.customerLink-product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
    text-align: center !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Product image - centered */
.customerLink-con .customerLink-product_imgItem {
    float: none !important;
    width: 100px !important;
    min-width: 100px !important;
    height: 100px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    margin: 0 auto !important;
}

.customerLink-con .customerLink-item .customerLink-product_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* Product info section - centered */
.customerLink-product_info {
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
}

/* Product name - centered with ellipsis */
.customerLink-product_name {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 0 !important;
    max-height: 2.8em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    text-align: center !important;
    width: 100% !important;
}

.customerLink-product_name:hover {
    text-decoration: underline !important;
    color: #000 !important;
}

/* Price box - centered */
.customerLink-product .price-box {
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.customerLink-special-price {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.customerLink-product .price-box .price,
.customerLink-special-price .price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.2 !important;
}

.customerLink-old-price .price {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Quantity selector - ensure all buttons visible */
.customerLink-product_qty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: visible !important;
    width: auto !important;
    min-width: 104px !important;
}

.customerLink-product_inc,
.customerLink-product_less {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    background: #f5f5f5 !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.customerLink-product_inc:hover,
.customerLink-product_less:hover {
    background: #e8e8e8 !important;
}

.customerLink-product_input {
    width: 40px !important;
    min-width: 40px !important;
    height: 32px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    background: #fff !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Add to cart button */
.customerLink-addAll {
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    padding: 12px 24px !important;
    margin: 16px auto 0 !important;
    background: #0b0b0b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.customerLink-addAll:hover {
    background: #333 !important;
    transform: translateY(-1px) !important;
}

/* Tablet Responsive (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .customerLink.firecheckout-step {
        padding: 20px !important;
    }
    .customerLink-title_info {
        font-size: 16px !important;
    }
    /* Smaller card width for tablet */
    .customerLink-con .customerLink-item {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
    .customerLink-con .customerLink-product_imgItem {
        width: 90px !important;
        min-width: 90px !important;
        height: 90px !important;
    }
}

/* Mobile Responsive (max-width: 768px) - vertical single column layout */
@media screen and (max-width: 768px) {
    .customerLink.firecheckout-step {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 10px !important;
    }
    .customerLink-title {
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        gap: 6px !important;
    }
    .customerLink-title_info {
        font-size: 15px !important;
        flex-wrap: wrap !important;
    }
    .customerLink-title_optional {
        font-size: 12px !important;
    }
    .customerLink-title_price {
        font-size: 15px !important;
    }
    /* Mobile: full width vertical cards */
    .customerLink-con .customerLink-item {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        margin-right: 0 !important;
        padding: 10px !important;
        gap: 10px !important;
    }
    /* Checkbox position for mobile horizontal layout */
    .customerLink-item_checkboxVal {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        margin-top: 25px !important;
    }
    .customerLink-item_checkboxVal::before {
        width: 20px !important;
        height: 20px !important;
    }
    /* Mobile: horizontal product layout */
    .customerLink-product {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .customerLink-con .customerLink-product_imgItem {
        width: 70px !important;
        min-width: 70px !important;
        height: 70px !important;
        margin: 0 !important;
    }
    .customerLink-product_info {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .customerLink-product_name {
        font-size: 13px !important;
        text-align: left !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
    .customerLink-product .price-box {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .customerLink-product .price-box .price,
    .customerLink-special-price .price {
        font-size: 15px !important;
    }
    .customerLink-old-price .price {
        font-size: 12px !important;
    }
    .customerLink-product_qty {
        margin-top: 6px !important;
    }
    .customerLink-product_inc,
    .customerLink-product_less {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    .customerLink-product_input {
        width: 36px !important;
        min-width: 36px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
    .customerLink-addAll {
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        margin-top: 14px !important;
    }
}

/* Small Mobile Responsive (max-width: 480px) */
@media screen and (max-width: 480px) {
    .customerLink.firecheckout-step {
        padding: 14px !important;
    }
    .customerLink-title {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .customerLink-title_info {
        font-size: 14px !important;
    }
    .customerLink-title_price {
        font-size: 14px !important;
        align-self: flex-end !important;
    }
    .customerLink-con .customerLink-product_imgItem {
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
    }
    .customerLink-product_name {
        font-size: 12px !important;
    }
    .customerLink-product .price-box .price,
    .customerLink-special-price .price {
        font-size: 14px !important;
    }
    .customerLink-product_inc,
    .customerLink-product_less {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        font-size: 13px !important;
    }
    .customerLink-product_input {
        width: 32px !important;
        min-width: 32px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
}

/* Extra Small Mobile (max-width: 375px) */
@media screen and (max-width: 375px) {
    .customerLink.firecheckout-step {
        padding: 12px !important;
    }
    .customerLink-con .customerLink-item {
        padding: 8px !important;
        gap: 8px !important;
    }
    .customerLink-con .customerLink-product_imgItem {
        width: 55px !important;
        min-width: 55px !important;
        height: 55px !important;
    }
    .customerLink-product_inc,
    .customerLink-product_less {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
    }
    .customerLink-product_input {
        width: 32px !important;
        height: 26px !important;
    }
}


/* Category banner z-index fix - ensure banner is below header */
/* Header uses z-index: 100 for #link_title and sticky header */
.category-single-banner,
.category-slideshow {
    position: relative;
    z-index: 1;
}

/* Ensure header stays above banner when scrolling */
#header.desktop-header-style-w-3 {
    position: relative;
    z-index: 99;
}

#header.desktop-header-style-w-3 .header.fix {
    z-index: 99;
}

/* Mobile header also needs higher z-index */
.wap-top,
#mobile-header-sticky .wap-top,
#mobile-header .wap-top {
    z-index: 99 !important;
}

/* Mobile header sticky fix - ensure position fixed when scrolling */
.wap-top.fix {
    position: fixed !important;
    left: 0;
    width: 100%;
    z-index: 99;
    background: var(--white-color);
}


/* ============================================
   UIkit Slider Navigation - Circular Buttons
   Mobile responsive circular arrow buttons
   统一使用透明背景 + 灰色描边样式（与PC端首页一致）
   ============================================ */
@media (max-width: 767px) {
    /* Override style.css .product-slider-uk rules */
    .product-slider-uk a.uk-slidenav,
    .product-slider-uk a.uk-slidenav-previous,
    .product-slider-uk a.uk-slidenav-next,
    .important-slider-uk a.uk-slidenav,
    .important-slider-uk a.uk-slidenav-previous,
    .important-slider-uk a.uk-slidenav-next,
    /* High specificity selectors */
    .uk-slider .uk-slidenav,
    .uk-slideshow .uk-slidenav,
    div .uk-slidenav,
    .uk-slidenav.uk-icon,
    a.uk-slidenav.uk-icon,
    .uk-position-center-left.uk-slidenav,
    .uk-position-center-right.uk-slidenav,
    a.uk-position-center-left.uk-slidenav,
    a.uk-position-center-right.uk-slidenav,
    .uk-slidenav,
    a.uk-slidenav,
    .uk-icon.uk-slidenav,
    a.uk-icon.uk-slidenav,
    .uk-slidenav-previous,
    .uk-slidenav-next,
    [uk-slidenav-previous],
    [uk-slidenav-next] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        /* 透明背景 + 灰色描边（与PC端首页一致） */
        background: transparent !important;
        border: 1.5px solid rgba(0, 0, 0, 0.3) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        color: rgba(0, 0, 0, 0.5) !important;
        padding: 0 !important;
        z-index: 10 !important;
        transition: all 0.3s ease !important;
    }

    .uk-slidenav:hover,
    a.uk-slidenav:hover,
    [uk-slidenav-previous]:hover,
    [uk-slidenav-next]:hover {
        background: rgba(255, 255, 255, 0.5) !important;
        color: rgba(0, 0, 0, 0.8) !important;
        border-color: rgba(0, 0, 0, 0.5) !important;
    }

    .uk-slidenav svg,
    [uk-slidenav-previous] svg,
    [uk-slidenav-next] svg {
        width: 14px !important;
        height: 24px !important;
    }
    
    .uk-slidenav svg polyline,
    [uk-slidenav-previous] svg polyline,
    [uk-slidenav-next] svg polyline {
        stroke: currentColor !important;
        stroke-width: 1.4 !important;
    }
}


/* ============================================
   Hair Beginners Fix - Remove gap between header and content
   Note: Main styles are in howto/index.html inline CSS
   This provides fallback/override for edge cases
   ============================================ */

/* PC: ensure no margin-top gap */
.hair-beginners-fix1.pd-30.mt-30,
.hair-beginners-fix1.mt-30,
.hair-beginners-fix1 {
    margin-top: 0 !important;
}

/* ============================================
   UIkit Slider Navigation z-index fix
   Prevent slider arrows from overlapping sticky header
   ============================================ */
.uk-slider .uk-slidenav,
.uk-slideshow .uk-slidenav,
a.uk-slidenav,
button.uk-slidenav,
.uk-slidenav {
    z-index: 10 !important;
}


/* ============================================
   All Overlays Default Hidden State
   确保所有遮罩元素在未激活时完全隐藏，防止页面切换闪烁
   添加日期: 2026-01-03
   ============================================ */

/* 搜索遮罩默认隐藏 - 只有当 dropdown-menu-custom 有 show 时才显示 */
.dropdown-content.modal-backdrop.fullscreen-search,
.dropdown-menu-custom .fullscreen-search,
.dropdown-menu-custom .dropdown-content.modal-backdrop {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: transparent;
}

/* 通用遮罩默认隐藏 */
.window-cover,
.confirm-dialog-overlay,
#loading {
    display: none;
    visibility: hidden;
    opacity: 0;
}

/* 弹窗默认隐藏 */
.window-con:not(.show),
.aftersale-wrap:not(.show),
.review-wrap:not(.show) {
    display: none;
    visibility: hidden;
}

/* 注意：不再强制隐藏 .dropdown-menu-custom，由 JS 控制 */

/* === 激活状态样式 === */

/* 只有当 dropdown-menu-custom 有 .show 类时才显示搜索遮罩 */
#header-search-btn-desktop.show .dropdown-menu-custom .fullscreen-search,
#header-search-btn-mobile.show .dropdown-menu-custom .fullscreen-search,
.dropdown-menu-custom.show .fullscreen-search,
.dropdown-menu-custom.show .dropdown-content.modal-backdrop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* window-cover 激活时显示 */
.window-cover.show,
body.has-overlay .window-cover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 下拉菜单激活时显示 - 确保覆盖默认隐藏 */
.dropdown-menu-custom.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 弹窗激活时显示 */
.window-con.show,
.aftersale-wrap.show,
.review-wrap.show {
    display: block !important;
    visibility: visible !important;
}


/* ============================================
   Desktop Search Dropdown Fix
   桌面端搜索框全屏遮罩样式 
   ============================================ */
@media (min-width: 961px) {
    /* 桌面端下拉菜单容器 */
    #header-search-btn-desktop.show .dropdown-menu-custom,
    #header-search-btn-desktop .dropdown-menu-custom.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 9999 !important;
        background: transparent !important;
        overflow: visible !important;
        display: block !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* 桌面端全屏搜索遮罩 */
    #header-search-btn-desktop.show .dropdown-menu-custom .fullscreen-search,
    #header-search-btn-desktop.show .dropdown-menu-custom .dropdown-content,
    #header-search-btn-desktop .dropdown-menu-custom.show .fullscreen-search,
    #header-search-btn-desktop .dropdown-menu-custom.show .dropdown-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 180px !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 桌面端搜索框容器 - 宽大横向样式 */
    #header-search-btn-desktop.show .dropdown-menu-custom #search_widget_desktop,
    #header-search-btn-desktop .dropdown-menu-custom.show #search_widget_desktop,
    #header-search-btn-desktop.show .dropdown-menu-custom #search_widget,
    #header-search-btn-desktop .dropdown-menu-custom.show #search_widget,
    #header-search-btn-desktop.show .dropdown-menu-custom .search-widget,
    #header-search-btn-desktop .dropdown-menu-custom.show .search-widget {
        position: relative !important;
        width: 900px !important;
        max-width: 90vw !important;
        background: #fff !important;
        border-radius: 4px !important;
        padding: 0 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        /* 提高 z-index 至 10000，确保在章节选择器 (z-index: 100) 之上 */
        z-index: 10000 !important;
    }

    /* 桌面端输入框组 - 横向布局 */
    #header-search-btn-desktop.show .dropdown-menu-custom .input-group,
    #header-search-btn-desktop .dropdown-menu-custom.show .input-group {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    /* 桌面端搜索输入框 - 大输入框 */
    #header-search-btn-desktop.show .dropdown-menu-custom .form-search-control,
    #header-search-btn-desktop .dropdown-menu-custom.show .form-search-control {
        flex: 1 !important;
        width: 100% !important;
        height: 60px !important;
        padding: 0 25px !important;
        border: none !important;
        border-radius: 4px 0 0 4px !important;
        font-size: 18px !important;
        outline: none !important;
        background: #fff !important;
        color: #333 !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    #header-search-btn-desktop.show .dropdown-menu-custom .form-search-control::placeholder,
    #header-search-btn-desktop .dropdown-menu-custom.show .form-search-control::placeholder {
        color: #999 !important;
        font-size: 18px !important;
    }

    #header-search-btn-desktop.show .dropdown-menu-custom .form-search-control:focus,
    #header-search-btn-desktop .dropdown-menu-custom.show .form-search-control:focus {
        border: none !important;
        outline: none !important;
    }

    /* 桌面端搜索按钮 - 图标按钮 */
    #header-search-btn-desktop.show .dropdown-menu-custom .search-btn,
    #header-search-btn-desktop .dropdown-menu-custom.show .search-btn {
        width: 60px !important;
        height: 60px !important;

        color: #333 !important;
        border: none !important;

        border-radius: 0 4px 4px 0 !important;
        cursor: pointer !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease !important;
        position: relative !important;
        z-index: 10001 !important;
    }


    /* 隐藏多余的背景层元素 */
    #header-search-btn-desktop.show .dropdown-menu-custom #fullscreen-search-backdrop-desktop,
    #header-search-btn-desktop .dropdown-menu-custom.show #fullscreen-search-backdrop-desktop {
        display: none !important;
    }

    /* 自动完成建议样式 */
    #header-search-btn-desktop.show .dropdown-menu-custom .autocomplete-suggestions,
    #header-search-btn-desktop .dropdown-menu-custom.show .autocomplete-suggestions {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        border-radius: 0 0 4px 4px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        max-height: 400px !important;
        overflow-y: auto !important;
        z-index: 100 !important;
    }
}

/* ============================================
   Mobile Search Dropdown Fix
   Override theme CSS that sets width:0 height:0
   Target both .show on menu AND when wrapper has .show
   ============================================ */
@media (max-width: 960px) {
    /* Fix dropdown-menu-custom when shown - target wrapper.show > menu */
    #header-search-btn.show .dropdown-menu-custom,
    #mobile-header .dropdown-menu-custom.show,
    #mobile-header-sticky .dropdown-menu-custom.show,
    #header-search-btn .dropdown-menu-custom.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 9999 !important;
        background: transparent !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Fullscreen search container - the dark backdrop itself */
    #header-search-btn.show .dropdown-menu-custom .fullscreen-search,
    #header-search-btn.show .dropdown-menu-custom .dropdown-content,
    #mobile-header .dropdown-menu-custom.show .fullscreen-search,
    #mobile-header-sticky .dropdown-menu-custom.show .fullscreen-search,
    #header-search-btn .dropdown-menu-custom.show .fullscreen-search,
    .dropdown-content.fullscreen-search.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 80px !important;
        z-index: 9999 !important;
    }

    /* Hidden backdrop element - not needed since parent has background */
    #header-search-btn.show #fullscreen-search-backdrop,
    #header-search-btn.show .fullscreen-search #fullscreen-search-backdrop,
    #mobile-header-sticky #header-search-btn.show #fullscreen-search-backdrop {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        z-index: 0 !important;
    }

    /* Search widget container - above backdrop */
    #header-search-btn.show .dropdown-menu-custom #search_widget,
    #mobile-header .dropdown-menu-custom.show #search_widget,
    #mobile-header-sticky .dropdown-menu-custom.show #search_widget,
    #header-search-btn .dropdown-menu-custom.show #search_widget {
        position: relative !important;
        width: 90% !important;
        max-width: 400px !important;
        background: #fff !important;
        border-radius: 8px !important;
        padding: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        z-index: 10 !important;
    }

    /* Search input styling */
    #header-search-btn.show .dropdown-menu-custom .form-search-control,
    #mobile-header .dropdown-menu-custom.show .form-search-control,
    #mobile-header-sticky .dropdown-menu-custom.show .form-search-control,
    #header-search-btn .dropdown-menu-custom.show .form-search-control {
        width: 100% !important;
        padding: 12px 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        outline: none !important;
    }

    /* Search button */
    #header-search-btn.show .dropdown-menu-custom .search-btn,
    #mobile-header .dropdown-menu-custom.show .search-btn,
    #mobile-header-sticky .dropdown-menu-custom.show .search-btn,
    #header-search-btn .dropdown-menu-custom.show .search-btn {
        background: #68699a !important;
        color: #fff !important;
        border: none !important;
        padding: 12px 20px !important;
        border-radius: 6px !important;
        cursor: pointer !important;
    }
}


/* ============================================
   Mobile Header Overlap Fix
   Dynamic header height solution for all mobile pages
   Uses CSS variables updated by header-height.js
   ============================================ */

/* ============================================
   Mobile Header Overlap Fix
   Dynamic header height solution for all mobile pages
   Navigation uses margin-bottom to push content down (global solution)
   JS (header-height.js) dynamically calculates and applies margin-bottom to .wap-top
   ============================================ */

@media (max-width: 959px) {
    /* #link_title: fixed at top */
    #link_title {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important; /* 降低层级，确保模态框/lightbox遮罩能覆盖住 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: var(--topbar-h, 3rem) !important;
    }

    /* .wap-top: fixed below #link_title */
    .wap-top,
    #mobile-header-sticky .wap-top,
    #mobile-header .wap-top {
        position: fixed !important;
        top: var(--topbar-h, 3rem) !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: #fff !important;
        /* margin-bottom 由 header-height.js 动态设置 */
        /* 这样所有页面都会自动获得正确的间距，无需单独设置 */
    }

    /* 不再需要给各个内容元素设置 margin-top */
    /* 因为导航的 margin-bottom 会自动推送所有内容向下 */
    /* 这是全局解决方案，适用于所有页面 */
}


/* ============================================
   Howto Page Content Padding Fix
   Prevent content from touching screen edges on tablets
   ============================================ */
@media (max-width: 1200px) {
    /* Main howto page sections need horizontal padding */
    .hair-beginners,
    .hair-beginners-fix1,
    .friendly-products-section,
    .important-container,
    .step-section,
    #step1, #step2, #step3, #step4, #step5, #step6,
    .howto-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    
    /* Product slider containers */
    .product-slider,
    .product-slider-uk,
    .important-slider-uk {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Ensure grid items don't overflow */
    .product-item,
    .important-item {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Medium tablets (768px - 959px) - Asus Zenbook Fold, etc */
/* Keep slider functional, only adjust padding and item widths */
@media (min-width: 768px) and (max-width: 959px) {
    /* Container padding */
    .hair-beginners,
    .hair-beginners-fix1,
    .friendly-products-section,
    .important-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    
    /* Step sections content - keep original layout, just add padding */
    #step1, #step2, #step3, #step4, #step5, #step6 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    /* Slider items - show 2 items with peek effect */
    .wave-pattern-slider .uk-slider-items li,
    .hair-type-slider .uk-slider-items li {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
    
    /* Keep slider navigation visible */
    .wave-pattern-slider .uk-slidenav,
    .hair-type-slider .uk-slidenav,
    #step5 .uk-slidenav,
    #step6 .uk-slidenav {
        display: flex !important;
    }
    
    /* Right base slider - show 3 items */
    .right-base-slider .uk-slider-items li {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
}

/* Tablet specific (iPad Pro landscape) */
@media (min-width: 960px) and (max-width: 1200px) {
    .hair-beginners,
    .hair-beginners-fix1,
    .friendly-products-section,
    .important-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Smaller tablets */
@media (max-width: 767px) {
    .hair-beginners,
    .hair-beginners-fix1,
    .friendly-products-section,
    .important-container,
    .step-section,
    #step1, #step2, #step3, #step4, #step5, #step6 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Mobile slider - show 1 item with peek */
    .friendly-products-section .product-slider,
    .important-container .important-content {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding-bottom: 16px !important;
    }
    
    .friendly-products-section .product-item,
    .important-container .important-item {
        flex: 0 0 80% !important;
        max-width: 80% !important;
        scroll-snap-align: start !important;
    }
}

/* Phone screens */
@media (max-width: 480px) {
    .hair-beginners,
    .hair-beginners-fix1,
    .friendly-products-section,
    .important-container,
    .step-section,
    #step1, #step2, #step3, #step4, #step5, #step6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Single column on phones */
    .friendly-products-section .product-item,
    .important-container .important-item {
        flex: 0 0 85% !important;
        max-width: 85% !important;
    }
}


/* ============================================
   Howto Page Responsive Fix - Maximum Width
   Maximize product card width with minimal padding
   ============================================ */

/* Product name ellipsis for overflow text */
.product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  min-height: 2.8em !important;
  word-wrap: break-word !important;
}

/* Ensure product items have proper flex layout */
.product-item {
  display: flex !important;
  flex-direction: column !important;
  min-height: 320px !important;
  justify-content: space-between !important;
}

/* Ensure price is fully visible */
.product-price {
  white-space: nowrap !important;
  overflow: visible !important;
  margin-bottom: 12px !important;
}

/* Ensure Shop Now button is fully visible */
.shop-now-btn,
.product-item a[href*="shop"] {
  width: 100% !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Chapter selector dropdown width fix */
.chapter-selector-wrapper {
  width: 90% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.chapter-selector {
  width: 100% !important;
  padding: 10px 40px 10px 15px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ============================================
   Maximum Product Card Width - All Devices
   Minimal padding for maximum card width
   ============================================ */

/* Mobile (< 768px): Maximum single card width */
@media (max-width: 767px) {
  .product-slider-uk .uk-slider-items li,
  .important-slider-uk .uk-slider-items li {
    flex: 0 0 90% !important;
    max-width: 90% !important;
  }
  
  .product-slider-uk,
  .important-slider-uk {
    padding: 0 20px !important;
  }
  
  .product-name {
    font-size: 14px !important;
    -webkit-line-clamp: 2 !important;
    min-height: 2.8em !important;
  }
  
  .product-item {
    min-height: 300px !important;
    padding: 16px !important;
  }
  
  .product-price {
    font-size: 18px !important;
  }
  
  .shop-now-btn,
  .product-item a[href*="shop"] {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}

/* Tablet (768px - 959px): Maximum 2-item slider width */
@media (min-width: 768px) and (max-width: 959px) {
  .product-slider-uk .uk-slider-items li,
  .important-slider-uk .uk-slider-items li {
    flex: 0 0 49% !important;
    max-width: 49% !important;
  }
  
  .friendly-products-section,
  .important-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .product-item {
    min-height: 320px !important;
  }
  
  .product-name {
    font-size: 15px !important;
  }
  
  .product-price {
    font-size: 18px !important;
  }
}

/* Desktop (960px - 1199px): Wider 3-column grid */
@media (min-width: 960px) and (max-width: 1199px) {
  .product-slider-uk .uk-slider-items,
  .important-slider-uk .uk-slider-items {
    gap: 1.2rem !important;
  }
  
  .product-item {
    min-height: 340px !important;
  }
}

/* Large Desktop (1200px+): Optimal 3-column grid */
@media (min-width: 1200px) {
  .product-slider-uk .uk-slider-items,
  .important-slider-uk .uk-slider-items {
    gap: 1.5rem !important;
  }
  
  .product-item {
    min-height: 360px !important;
  }
}


/* ============================================
   Header Spacing Optimization - All Devices
   Add proper spacing between top bar and navigation
   Fix z-index layering issues
   ============================================ */

/* Fix z-index layering - ensure header is above top bar */
/* 注释掉 position: relative，避免与页面布局冲突
#header,
#header .header,
#desktop-header,
.header-container {
  position: relative !important;
  z-index: 101 !important;
}
*/

/* Ensure top bar stays at very top */
#link_title {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important; /* 降低层级，确保模态框/lightbox遮罩能覆盖住 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem !important;
}

/* Desktop: Ensure header sits below top bar */
@media (min-width: 960px) {
  /* 注释掉 position: relative，避免与页面布局冲突
  #header.desktop-header-style-w-3 {
    position: relative;
    z-index: 999;
  }
  */
  
  #header.desktop-header-style-w-3 .header.fix {
    position: fixed;
    top: var(--topbar-h, 3rem) !important;
    z-index: 999 !important;
  }
}

/* Ensure social icons are visible above top bar */
.header .share,
#header .header .share {
  position: relative !important;
  z-index: 102 !important;
}

/* ============================================
   Z-Index Layer Management
   Ensure proper stacking order for header elements
   ============================================ */

/* Top bar - fixed position */
#link_title {
  position: fixed !important;
  z-index: 1000 !important; /* 降低层级，确保模态框/lightbox遮罩能覆盖住 */
}

/* Header container - below top bar */
/* 注释掉 position: relative，避免与页面布局冲突
#header,
#header .header,
#desktop-header,
.header-container {
  position: relative !important;
  z-index: 101 !important;
}
*/

/* Social icons - same level as header */
.header .share,
#header .header .share {
  position: relative !important;
  z-index: 102 !important;
}

/* Desktop header spacing */
@media (min-width: 960px) {
  #header .header {
    padding-top: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    background: #fff !important;
  }
  
  /* Add spacing between logo and navigation */
  .header .nav {
    margin-top: 0.5rem !important;
  }
  
  /* Ensure proper spacing for social icons row */
  .header .share {
    margin-bottom: 0.75rem !important;
    padding-top: 0.5rem !important;
  }
}

/* Tablet header spacing */
@media (min-width: 768px) and (max-width: 959px) {
  #header .header {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
    background: #fff !important;
  }
  
  .header .nav {
    margin-top: 0.5rem !important;
  }
  
  .header .share {
    padding-top: 0.5rem !important;
  }
}

/* Mobile header spacing */
@media (max-width: 767px) {
  .wap-top {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    background: #fff !important;
    z-index: 101 !important;
  }
  
  /* Add spacing between mobile header elements */
  .wap-top .logo {
    margin: 0.25rem 0 !important;
  }
}

/* Ensure top bar (link_title) has proper height */
#link_title {
  min-height: 3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
}

/* Desktop header - ensure proper spacing after top bar */
#desktop-header .header {
  margin-top: 0 !important;
  background: #fff !important;
}

/* Add breathing room between header sections */
.header .wrap {
  padding: 0.5rem 0 !important;
}


/* ============================================
   Header Navigation Vertical Centering Fix
   Fix uneven padding (22.5px top, 7.5px bottom)
   Make navigation vertically centered
   ============================================ */

/* PC Desktop: Fix header padding for vertical centering */
@media (min-width: 960px) {
  /* Normal state - equal padding top and bottom */
  #header .header,
  #header .header.uk-visible\@m {
    padding: 0.5rem 0 !important;
  }
  
  /* Fixed state - same padding for consistency */
  #header .header.fix,
  #header .header.uk-visible\@m.fix {
    padding: 0.5rem 0 !important;
  }
  
  /* Navigation container - use flexbox for vertical centering */
  .header .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    margin-top: 0 !important;
  }
  
  /* Navigation items - remove bottom padding */
  .header .nav > ul > li {
    padding-bottom: 0 !important;
  }
  
  /* Wrap1 (top row with social icons) - vertical centering */
  /* Note: Do NOT use display: flex !important here, it will override JS hide() */
  .header .wrap1 {
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
  }
  
  /* Wrap (main nav row) - vertical centering */
  .header .wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }
}