/** Shopify CDN: Minification failed

Line 3831:0 All "@import" rules must come first
Line 4188:0 All "@import" rules must come first
Line 4521:0 All "@import" rules must come first
Line 4804:0 All "@import" rules must come first
Line 5240:0 All "@import" rules must come first
Line 5609:0 All "@import" rules must come first

**/


/* CSS from section stylesheet tags */
.feature-icons-section {
    padding: 60px 0;
    background: #fff;
  }
  .feature-icon-item {
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
  }
  .feature-icon-item:hover {
    transform: translateY(-5px);
    text-decoration: none;
  }
  .feature-icon-image {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: 0 auto 15px;
    display: block;
  }
  .feature-icon-title {
    margin: 0;
    line-height: 1.4;
  }
/* Footer Light Theme - Color & Spacing Only (No Layout Changes) */
  .footer {
    background-color: #f9fafb !important;
  }
  
  /* Text colors for light background - override only when needed */
  .footer {
    color: #1d1d1f !important;
  }
  
  .footer .footer-title,
  .footer .footer-title * {
    color: #1d1d1f !important;
  }
  
  .footer .footer-panel .nav-link {
    color: #4a4a4a !important;
  }
  
  .footer .footer-panel .nav-link:hover {
    color: #1d1d1f !important;
  }
  
  .footer .footer-panel p,
  .footer .footer-panel .text,
  .footer .footer-panel div:not(.nav):not(.newsletter-form):not(.input-group):not(.input-group-text) {
    color: #4a4a4a !important;
  }
  
  .footer .footer-panel strong,
  .footer .footer-panel .fw-bold,
  .footer .footer-panel b {
    color: #1d1d1f !important;
  }
  
  .footer .footer-panel h1,
  .footer .footer-panel h2,
  .footer .footer-panel h3,
  .footer .footer-panel h4,
  .footer .footer-panel h5,
  .footer .footer-panel h6 {
    color: #1d1d1f !important;
  }
  
  /* Ensure newsletter and nav can be in same row if needed */
  .footer .footer-panel > .nav + .newsletter-form,
  .footer .footer-panel > .newsletter-form + .nav {
    margin-top: 0;
  }
  
  /* Newsletter form styling - ensure visible on light background */
  .footer .newsletter-form .form-control {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1d1d1f !important;
  }
  
  .footer .newsletter-form .form-control:focus {
    border-color: rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
  }
  
  .footer .newsletter-form .form-control::placeholder {
    color: #86868b !important;
    opacity: 1 !important;
  }
  
  .footer .newsletter-form .input-group-text {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-left: none !important;
  }
  
  .footer .newsletter-form .btn {
    color: #1d1d1f !important;
  }
  
  .footer .newsletter-form .btn:hover {
    color: #0071e3 !important;
  }
  
  
  /* Copyright section */
  .copyright {
    background-color: #f9fafb !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  
  .copyright .copyright-text,
  .copyright .copyright-text * {
    color: #86868b !important;
  }
  
  .copyright a {
    color: #86868b !important;
  }
  
  .copyright a:hover {
    color: #1d1d1f !important;
  }
.hot-sales-section {
    background: #ececec;
    padding: 100px 0;
  }
  .line {
    border-top: 1px solid #878787;
    margin: 20px 0;
    width: 100%;
    display: block !important;
  }
  .left h2 {
    font-size: 150px;
    line-height: 1.1;
    margin: 0;
    font-weight: 100;
    color: #0070f3;
    text-align: center;
  }
  .left h2 span {
    display: block;
    font-weight: 700;
    color: #000;
    font-size: 80px;
  }
  .swiper-wrapper{padding:20px;}
  .product-card {
    position: relative;
    border-radius: 16px;
    color: #fff;
    height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  }
  .product-content {
    position: relative;
    z-index: 2;
  }
  .product-card h3 {
    font-size: 18px;
    margin: 0 0 5px;
  }
  .product-card p {
    font-size: 14px;
    margin: 0 0 10px;
    color: #414141;
  }
  .price {
    font-size: 34px;
    font-weight: 100;
    color: #fe0000;
  }
  .old-price {
    font-size: 14px;
    color: #666666;
    text-decoration: line-through;
    margin-left: 8px;
  }
  .ribbons {
    position: absolute;
    z-index: 3;
    width: 160px;
    background: #00000000;
    box-shadow: none;
  }
  .ribbons.hot {
    top: 10px;
    left: -24px;
  }
  .ribbons.new {
    top: -19px;
    right: -16px;
  }
  .cart-box svg {
    width: 30px;
    height: 30px;
  }
.banner-img-video-section1 .hero {
    background: linear-gradient(to right, black, #112a60);
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
  }

 .banner-img-video-section1 .product-image {
    position: absolute;
    top: 10%;
    right: 0%;
    max-width: 75%;
    z-index: 1;
  }
  .txt-fs-1{font-size: 35px;font-weight: 100;color: white;}
  .txt-fs-2{font-size: 50px;font-weight: 600;color: white;}
 .banner-img-video-section1 .price {
    font-size: 32px;
    font-weight: bold;
  }

 .banner-img-video-section1 .price del {
    font-size: 16px;
    color: #838383;
  }

 .banner-img-video-section1 .shop-btn {
    color: rgb(194, 194, 194);
    border: 1px solid rgb(170, 170, 170);
    cursor: pointer;
    font-size: 12px;
    margin-top: 20px;
    background: #f0f8ff00;
  }

 .banner-img-video-section1 .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(128, 128, 128, 0.5); 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
  }

 .banner-img-video-section1 .play-btn:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid black;
    transform: rotate(270deg);
  }


 .banner-img-video-section1 .video-container {
    display: none; 
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 80%;
    max-width: 800px;
    background: rgba(0, 0, 0, 0.8); 
    border-radius: 10px;
  }

 .banner-img-video-section1 video {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

 .banner-img-video-section1 .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    color: white;
    font-size: 24px;
    border: none;
    cursor: pointer;
    z-index: 4;
  }
 .banner-img-video-section1 .price>*{vertical-align: bottom;}
  @media (max-width: 768px) {
   .banner-img-video-section1 .hero {
        height: 80vh; 
      }
     .banner-img-video-section1 .product-image {
        max-width: 100%; 
        top: 63%;
        right: 5%;
      }
  }
.banner-img-video-section2 .hero {
    background: linear-gradient(to right, #ffffff, #b7b7b7);
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
  }

 .banner-img-video-section2 .product-image {
    position: absolute;
    top: 0%;
    left: 0%;
    max-width: 50%;
    z-index: 1;
  }
 .banner-img-video-section2 .txt-fs-1{font-size: 35px;font-weight: 100;color: black;}
 .banner-img-video-section2 .txt-fs-2{font-size: 50px;font-weight: 600;color: black;}
 .banner-img-video-section2 .price {
    font-size: 32px;
    font-weight: bold;
  }

 .banner-img-video-section2 .price del {
    font-size: 16px;
    color: #838383;
  }

 .banner-img-video-section2 .shop-btn {
    color: rgb(194, 194, 194);
    border: 1px solid rgb(170, 170, 170);
    cursor: pointer;
    font-size: 12px;
    margin-top: 20px;
    background: #f0f8ff00;
  }

 .banner-img-video-section2 .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(128, 128, 128, 0.5); 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
  }

 .banner-img-video-section2 .play-btn:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid black;
    transform: rotate(270deg);
  }


 .banner-img-video-section2 .video-container {
    display: none; 
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 80%;
    max-width: 800px;
    background: rgba(0, 0, 0, 0.8); 
    border-radius: 10px;
  }

 .banner-img-video-section2 video {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

 .banner-img-video-section2 .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    color: white;
    font-size: 24px;
    border: none;
    cursor: pointer;
    z-index: 4;
  }
 .banner-img-video-section2 .price>*{vertical-align: bottom;}
  @media (max-width: 768px) {
   .banner-img-video-section2 .hero {
        height: 80vh; 
      }
     .banner-img-video-section2 .product-image {
        max-width: 100%; 
        top: 63%;
        right: 5%;
      }
  }
.section-three-cards {
  padding: 5rem 0;
}

.section-three-cards .top-info {
  margin-bottom: 2rem;
}

.section-three-cards .top-info .info-title p {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: #000;
}

.section-three-cards .top-info .more a {
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.section-three-cards .top-info .more a:hover {
  color: #000;
}

.section-three-cards .card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  height: 600px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 2rem;
  text-align: center;
}

.section-three-cards .card .card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  display: block;
}

.section-three-cards .card .gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: 2;
  display: block;
}

.section-three-cards .card .card-text {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 3;
  padding: 0 1rem;
}

.section-three-cards .card h2 {
  margin: 0;
  font-size: 2.5rem;
  color: white;
}

.section-three-cards .card p {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 100;
  color: white;
  line-height: 1;
}

@media (max-width: 768px) {
  .section-three-cards .top-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  .section-three-cards .card {
    height: 300px;
  }
}
/* Cart Page - Apple Style Enhancements - Scoped to cart page only */
  .cart-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Add top margin to avoid header overlap */
  .cart-section .container {
    padding-top: 80px;
    padding-bottom: 60px;
  }
  
  @media (max-width: 767.98px) {
    .cart-section .container {
      padding-top: 60px;
      padding-bottom: 40px;
    }
  }
  
  /* Page Title - Inside Card, Top Left, Smaller */
  .cart-section .page-header {
    margin: 0;
    padding: 0;
    margin-bottom: 24px;
  }
  
  .cart-section .page-header h1,
  .cart-section .page-header h2,
  .cart-section .page-header h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    line-height: 1.3;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  
  /* Cart Title Icon */
  .cart-section .cart-title-icon {
    width: 20px;
    height: 20px;
    color: #1d1d1f;
    fill: currentColor;
    flex-shrink: 0;
  }
  
  @media (min-width: 768px) {
    .cart-section .page-header h1,
    .cart-section .page-header h2,
    .cart-section .page-header h3 {
      font-size: 22px;
    }
    
    .cart-section .cart-title-icon {
      width: 22px;
      height: 22px;
    }
  }
  
  @media (max-width: 767.98px) {
    .cart-section .page-header {
      margin-bottom: 20px;
    }
    
    .cart-section .page-header h1,
    .cart-section .page-header h2,
    .cart-section .page-header h3 {
      font-size: 18px;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.4;
    }
    
    .cart-section .cart-title-icon {
      width: 20px;
      height: 20px;
    }
  }
  
  /* Empty Cart - Enhanced Style */
  .cart-section .empty-text {
    font-size: 17px;
    color: #86868b;
    margin: 16px 0 32px;
    line-height: 1.6;
  }
  
  /* Empty Cart Container */
  .cart-section .row:first-child {
    padding: 60px 20px;
    text-align: center;
  }
  
  .cart-section .row:first-child .icon {
    color: #86868b;
    margin-bottom: 24px;
  }
  
  /* Cart Form Container */
  .cart-section .cart-form {
    background: transparent;
  }
  
  /* Cart Items List - Minimal Clean Style */
  .cart-section .cart-items-list {
    background: #fff;
    border-radius: 20px;
    padding: 28px 32px 32px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: none;
  }
  
  /* Page title inside cart-items-list - top left */
  .cart-section .cart-items-list .page-header {
    margin-bottom: 24px;
    padding: 0;
  }
  
  .cart-section .cart-items-list .page-header:first-child {
    margin-top: 0;
  }
  
  /* Remove all borders */
  .cart-section .cart-items-list .border-bottom,
  .cart-section .cart-items-list .border-top,
  .cart-section .cart-items-list .border {
    display: none !important;
    border: none !important;
  }
  
  /* Cart Item Headers - Align with content columns */
  @media (min-width: 768px) {
    /* Headers row - Desktop - Match content padding */
    .cart-section .cart-items-list > .col-md-6:first-child.fw-bold {
      padding: 12px calc(var(--bs-gutter-x) * 0.5) !important;
      font-size: 13px;
      font-weight: 600;
      color: #86868b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: none;
      text-align: left !important;
      margin: 0;
    }
    
    .cart-section .cart-items-list > .col-md-1.fw-bold {
      padding: 12px calc(var(--bs-gutter-x) * 0.5) !important;
      font-size: 13px;
      font-weight: 600;
      color: #86868b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: none;
      text-align: center !important;
      margin: 0;
    }
    
    .cart-section .cart-items-list > .col-md-3.fw-bold {
      padding: 12px calc(var(--bs-gutter-x) * 0.5) !important;
      font-size: 13px;
      font-weight: 600;
      color: #86868b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: none;
      text-align: center !important;
      margin: 0;
    }
    
    .cart-section .cart-items-list > .col-md-2.fw-bold:not(.cart-item-subtotal) {
      padding: 12px calc(var(--bs-gutter-x) * 0.5) !important;
      font-size: 13px;
      font-weight: 600;
      color: #86868b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: none;
      text-align: center !important;
      margin: 0;
    }
  }
  
  /* Desktop: Cart Item Row Spacing - Clean Layout - MUST override mobile */
  @media (min-width: 768px) {
    /* Cart Items List - Desktop Layout */
    .cart-section .cart-items-list.row {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
    }
    
    /* Desktop: Common cart item column styles */
    .cart-section .cart-items-list [class*="cart-item-image"],
    .cart-section .cart-items-list [class*="cart-item-info"],
    .cart-section .cart-items-list [class*="cart-item-price"],
    .cart-section .cart-items-list [class*="cart-item-quantity"],
    .cart-section .cart-items-list [class*="cart-item-subtotal"] {
      padding: 32px calc(var(--bs-gutter-x) * 0.5) !important;
      border: none !important;
      display: flex !important;
      align-items: center !important;
      order: 0 !important;
      margin-bottom: 0 !important;
      border-top: none !important;
    }
    
    .cart-section .cart-items-list [class*="cart-item-image"] {
      justify-content: flex-start !important;
      text-align: left !important;
    }
    
    .cart-section .cart-items-list [class*="cart-item-info"] {
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      text-align: left !important;
    }
    
    .cart-section .cart-items-list .cart-item-info > *:not(.badge):not(.d-inline-block):not([class*="inventory"]) {
      text-align: left !important;
      align-self: flex-start !important;
      width: 100% !important;
    }
    
    .cart-section .cart-items-list .cart-item-info .badge,
    .cart-section .cart-items-list .cart-item-info .d-inline-block,
    .cart-section .cart-items-list .cart-item-info [class*="inventory"] {
      text-align: left !important;
      align-self: flex-start !important;
      width: auto !important;
      display: inline-block !important;
    }
    
    .cart-section .cart-items-list [class*="cart-item-price"],
    .cart-section .cart-items-list [class*="cart-item-quantity"],
    .cart-section .cart-items-list [class*="cart-item-subtotal"] {
      justify-content: center !important;
      text-align: center !important;
    }
    
  }
  
  /* Cart Item Image - Clean Style */
  .cart-section .cart-item-image {
    padding: 0;
  }
  
  .cart-section .cart-item-image img {
    border-radius: 16px;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 120px;
  }
  
  .cart-section .cart-item-image:hover img {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  /* Cart Item Title - Clean Typography */
  .cart-section .cart-item-title {
    margin-bottom: 8px;
  }
  
  .cart-section .cart-item-title a {
    font-size: 19px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .cart-section .cart-item-title a:hover {
    color: #0071e3;
  }
  
  /* Cart Item Info - Minimal */
  .cart-section .cart-item-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  /* Cart Item Variant Info - Subtle */
  .cart-section .cart-item-variant,
  .cart-section .line-item-property {
    font-size: 15px;
    color: #86868b;
    margin-top: 6px;
    line-height: 1.5;
  }
  
  .cart-section .cart-item-variant-label,
  .cart-section .line-item-property-label {
    font-weight: 400;
  }
  
  /* Price Typography - Clean */
  .cart-section .cart-item-price {
    text-align: center;
  }
  
  .cart-section .cart-item-price .text-danger {
    font-size: 19px;
    font-weight: 600;
    color: #1d1d1f !important;
    letter-spacing: -0.02em;
  }
  
  .cart-section .cart-item-price .text-muted {
    font-size: 15px;
    color: #86868b;
    margin-top: 4px;
  }
  
  .cart-section .cart-item-subtotal {
    text-align: center;
  }
  
  .cart-section .cart-item-subtotal .text-danger {
    font-size: 19px;
    font-weight: 600;
    color: #1d1d1f !important;
    letter-spacing: -0.02em;
  }
  
  /* Quantity Input - Elliptical Card Style */
  .cart-section .cart-item-quantity {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    flex-wrap: nowrap;
    position: relative;
  }
  
  /* Quantity Input - Clean Elliptical Card Style (minus, input, plus only) */
  .cart-section .quantity-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    vertical-align: middle;
    flex-wrap: nowrap;
    background: #f5f5f7;
    border-radius: 50px !important;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
  }
  
  /* Ensure input group displays correctly */
  .cart-section .quantity-input.input-group {
    display: inline-flex !important;
    width: auto;
    align-items: center;
    background: #f5f5f7;
    border-radius: 50px !important;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-wrap: nowrap;
  }
  
  .cart-section .quantity-input.input-group-flat {
    display: inline-flex !important;
    background: #f5f5f7;
    border-radius: 50px !important;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-wrap: nowrap;
  }
  
  /* Remove button - Position it outside the elliptical card visually */
  .cart-section .quantity-input .qty-remove {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10;
  }
  
  /* Ensure elliptical card doesn't extend to remove button */
  .cart-section .quantity-input {
    overflow: visible;
  }
  
  .cart-section .qty-minus,
  .cart-section .qty-plus {
    border-radius: 50% !important;
    border: none !important;
    background: transparent;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 !important;
    color: #1d1d1f;
    vertical-align: middle;
    flex-shrink: 0;
  }
  
  /* Remove all borders from buttons */
  .cart-section .qty-minus.border-end-0,
  .cart-section .qty-plus.border-start-0 {
    border: none !important;
    border-radius: 50% !important;
  }
  
  /* Ensure icons are visible */
  .cart-section .qty-minus svg,
  .cart-section .qty-plus svg,
  .cart-section .qty-minus .icon,
  .cart-section .qty-plus .icon {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #1d1d1f !important;
    fill: none !important;
    stroke: #1d1d1f !important;
    stroke-width: 2 !important;
    pointer-events: none;
  }
  
  .cart-section .qty-minus:hover,
  .cart-section .qty-plus:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.08);
  }
  
  .cart-section .quantity {
    border-radius: 0 !important;
    border: none !important;
    width: 50px;
    height: 32px;
    min-height: 32px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    margin: 0 2px;
    vertical-align: middle;
    flex-shrink: 0;
    padding: 0 !important;
    color: #1d1d1f;
  }
  
  /* Remove all borders from quantity input */
  .cart-section .quantity.border-start-0,
  .cart-section .quantity.border-end-0 {
    border: none !important;
  }
  
  /* Focus state for quantity input */
  .cart-section .quantity:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.5);
  }
  
  /* Remove button - Separate from quantity input elliptical card */
  .cart-section .qty-remove {
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #86868b;
    width: 36px;
    height: 36px;
    margin-left: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  
  /* Ensure quantity input card doesn't include remove button visually */
  .cart-section .quantity-input:has(.qty-remove) {
    margin-right: 0;
  }
  
  /* Cart item quantity container */
  .cart-section .cart-item-quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
  }
  
  /* Ensure remove icon is visible */
  .cart-section .qty-remove svg,
  .cart-section .qty-remove .icon {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }
  
  .cart-section .qty-remove:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    transform: scale(1.1);
  }
  
  .cart-section .qty-remove:hover svg,
  .cart-section .qty-remove:hover .icon {
    color: #ff3b30 !important;
  }
  
  /* Modern Loading Overlay - Blur White Effect */
  .cart-section .ccloading {
    position: relative;
  }
  
  .cart-section .ccloading::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: absolute;
    z-index: 2000;
    border-radius: 16px;
  }
  
  .cart-section .ccloading::after {
    content: "";
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: text-bottom;
    border: 3px solid #0071e3 !important;
    border-right-color: transparent !important;
    border-radius: 50%;
    -webkit-animation: 0.75s linear infinite spinner-border;
    animation: 0.75s linear infinite spinner-border;
    z-index: 2001;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.5rem;
    margin-top: -1.5rem;
  }
  
  @keyframes spinner-border {
    to { transform: rotate(360deg); }
  }
  
  @-webkit-keyframes spinner-border {
    to { transform: rotate(360deg); }
  }
  
  /* Loading overlay for cart items list specifically */
  .cart-section .cart-items-list.ccloading::before {
    border-radius: 20px;
  }
  
  /* Checkout Subtotal Layout - Redesigned */
  .cart-section .checkout-subtotal {
    margin-top: 32px;
  }
  
  /* Remove Bootstrap row gap and override */
  .cart-section .checkout-subtotal.row {
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Unified Checkout Card Container */
  .cart-section .checkout-subtotal > .col-md-7,
  .cart-section .checkout-subtotal > .col-md-4 {
    padding-left: 0;
    padding-right: 0;
    position: relative;
    width: 100%;
  }
  
  /* Shipping Calculator - Clean Minimal */
  .cart-section .shipping-calculator {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .cart-section .disclosure {
    border: none;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .cart-section .disclosure summary {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    border: none;
    list-style: none;
  }
  
  .cart-section .disclosure summary::-webkit-details-marker {
    display: none;
  }
  
  .cart-section .disclosure summary:hover {
    color: #0071e3;
  }
  
  .cart-section .disclosure[open] summary {
    margin-bottom: 20px;
  }
  
  .cart-section .disclosure .border-top {
    border: none !important;
    padding-top: 0;
    margin-top: 0;
  }
  
  /* Cart Checkout Block - Clean Style with Proper Spacing */
  .cart-section .cart-checkout {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  /* Cart Subtotal Section - Better Spacing */
  .cart-section .cart-subtotal {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .cart-section .cart-subtotal .d-flex {
    align-items: center;
    margin-bottom: 0;
  }
  
  .cart-section .price-label {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
  }
  
  .cart-section .price-current {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  
  /* Cart Policies - Tax and Shipping Text */
  .cart-section .cart-policies {
    margin: 0 !important;
    padding: 0;
    font-size: 13px;
    color: #86868b;
    line-height: 1.6;
  }
  
  /* Order Note Section */
  .cart-section .cart-sidebar-note {
    margin: 0 !important;
  }
  
  .cart-section .cart-sidebar-note summary {
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    cursor: pointer;
  }
  
  .cart-section .cart-sidebar-note .details-panel {
    padding-top: 12px;
  }
  
  /* Terms Agreement Section */
  .cart-section .terms-agreement {
    margin: 0 !important;
    padding: 0;
  }
  
  .cart-section .terms-agreement .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  
  .cart-section .terms-agreement .form-check-label {
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1f;
  }
  
  /* Checkout Buttons Section */
  .cart-section .checkout-buttons {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .cart-section .checkout-buttons .checkout-button,
  .cart-section .checkout-buttons button[type="submit"] {
    margin: 0;
    width: 100%;
    display: block;
  }
  
  .cart-section .checkout-buttons .continue-shopping {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #0071e3;
    text-decoration: none;
    padding: 8px 0;
    transition: opacity 0.2s ease;
  }
  
  .cart-section .checkout-buttons .continue-shopping:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
  
  /* Additional Checkout Buttons */
  .cart-section .additional-checkout-buttons {
    margin: 0 !important;
  }
  
  /* Remove borders from checkout block */
  .cart-section .cart-checkout .border,
  .cart-section .cart-checkout .border-top,
  .cart-section .cart-checkout .border-bottom {
    border: none !important;
  }
  
  /* Discount disclosure */
  .cart-section .cart-checkout .disclosure {
    margin: 0;
  }
  
  /* Unified checkout card - merge both sections into one beautiful card */
  @media (min-width: 768px) {
    .cart-section .checkout-subtotal {
      background: #fff;
      border-radius: 20px;
      padding: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      border: none;
      margin-top: 32px;
      display: flex;
      overflow: hidden;
    }
    
    .cart-section .checkout-subtotal > .col-md-7 {
      width: 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    
    .cart-section .checkout-subtotal > .col-md-4 {
      width: 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
      border-left: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    .cart-section .checkout-subtotal > .col-md-7,
    .cart-section .checkout-subtotal > .col-md-4 {
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      border-top: none;
      border-bottom: none;
      border-right: none;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    
    .cart-section .shipping-calculator {
      background: transparent;
      border-radius: 0;
      padding: 32px;
      box-shadow: none;
      border: none;
      margin-bottom: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .cart-section .cart-checkout {
      background: transparent;
      border-radius: 0;
      padding: 32px;
      box-shadow: none;
      border: none;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
  }
  
  /* Free Shipping Bar */
  .cart-section .free-shipping-bar {
    margin-bottom: 32px;
  }
  
  /* Empty Cart Button */
  .cart-section .btn {
    border-radius: 25px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px 32px;
    min-height: 44px;
  }
  
  .cart-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Responsive Adjustments - Clean Mobile */
  @media (max-width: 767.98px) {
    /* Prevent horizontal overflow */
    .cart-section .container {
      overflow-x: hidden !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
    }
    
    .cart-section .cart-items-list {
      padding: 20px 15px 24px 15px !important;
      border-radius: 16px;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .cart-section .cart-items-list.row {
      --bs-gutter-x: 0 !important;
      --bs-gutter-y: 0 !important;
      margin: 0 !important;
    }
    
    /* Common mobile full-width reset */
    .cart-section .cart-items-list [class*="col-"] {
      width: 100% !important;
      flex: 0 0 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box !important;
    }
    
    /* Mobile: Title inside cart-items-list */
    .cart-section .cart-items-list .page-header {
      margin-bottom: 20px;
    }
    
    /* Mobile: Ensure title column layout doesn't break */
    .cart-section .cart-items-list .page-header h1,
    .cart-section .cart-items-list .page-header h2,
    .cart-section .cart-items-list .page-header h3 {
      width: 100%;
      max-width: 100%;
    }
    
    .cart-section .cart-item-image {
      padding: 0;
      margin-bottom: 16px;
    }
    
    .cart-section .cart-item-image img {
      max-width: 100px;
    }
    
    .cart-section .cart-item-title a {
      font-size: 17px;
    }
    
    /* Mobile: Force reorder cart items - Override ALL Bootstrap classes */
    .cart-section .cart-items-list.row {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
    }
    
    /* Mobile: Reorder elements */
    .cart-section .cart-items-list [class*="cart-item-image"] {
      order: 1 !important;
      margin-bottom: 24px !important;
      text-align: center !important;
      display: block !important;
    }
    
    .cart-section .cart-items-list [class*="cart-item-info"] {
      order: 2 !important;
      margin-bottom: 24px !important;
      text-align: left !important;
      display: block !important;
    }
    
    .cart-section .cart-items-list .cart-item-info * {
      text-align: left !important;
      align-self: flex-start !important;
    }
    
    .cart-section .cart-items-list [class*="cart-item-quantity"] {
      order: 3 !important;
      margin-bottom: 24px !important;
      justify-content: flex-end !important;
      text-align: right !important;
      display: block !important;
    }
    
    .cart-section .cart-items-list .cart-item-quantity .quantity-input {
      justify-content: flex-end !important;
      margin-left: auto !important;
    }
    
    .cart-section .cart-items-list .offset-3,
    .cart-section .cart-items-list [class*="offset-"] {
      margin-left: 0 !important;
    }
    
    .cart-section .cart-items-list > .col-md-1.fw-bold {
      order: 4 !important;
      text-align: right !important;
      padding: 8px 0 4px 0 !important;
      margin-bottom: 4px !important;
    }
    
    .cart-section .cart-items-list [class*="cart-item-price"] {
      order: 4 !important;
      text-align: right !important;
      justify-content: flex-end !important;
      padding-bottom: 20px !important;
      border-top: none !important;
    }
    
    .cart-section .cart-items-list .cart-item-price .text-danger {
      font-size: 22px !important;
      font-weight: 700 !important;
      color: #1d1d1f !important;
      display: block !important;
      margin-bottom: 4px !important;
      text-align: right !important;
    }
    
    .cart-section .cart-items-list .cart-item-price .text-muted {
      font-size: 15px !important;
      color: #86868b !important;
      display: block !important;
    }
    
    .cart-section .quantity-input {
      justify-content: flex-start;
      margin: 0;
      padding: 5px 10px;
    }
    
    .cart-section .qty-minus,
    .cart-section .qty-plus {
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
    }
    
    .cart-section .qty-minus svg,
    .cart-section .qty-plus svg {
      width: 14px !important;
      height: 14px !important;
    }
    
    .cart-section .quantity {
      width: 40px;
      height: 28px;
      min-height: 28px;
      font-size: 14px;
      margin: 0 2px;
    }
    
    .cart-section .qty-remove {
      width: 28px;
      height: 28px;
    }
    
    .cart-section .qty-remove svg {
      width: 14px !important;
      height: 14px !important;
    }
    
    /* Mobile: Ensure proper spacing between cart item elements */
    .cart-section .cart-items-list .cart-item-image img {
      max-width: 200px !important;
      margin: 0 auto !important;
      display: block !important;
    }
    
    /* Mobile: Better spacing for product info */
    .cart-section .cart-items-list .cart-item-info .cart-item-title {
      margin-bottom: 12px !important;
    }
    
    .cart-section .cart-items-list .cart-item-info .text-muted {
      margin-bottom: 12px !important;
    }
    
    /* Mobile: Unified card for checkout sections */
    .cart-section .checkout-subtotal {
      background: #fff;
      border-radius: 16px;
      padding: 24px 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      border: none;
      margin-top: 24px;
    }
    
    .cart-section .checkout-subtotal > [class*="col-"] {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      background: transparent !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    .cart-section .shipping-calculator {
      padding: 0;
      border-radius: 0;
      box-shadow: none;
      border: none;
      margin-bottom: 0;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    .cart-section .cart-checkout {
      padding: 0;
      padding-top: 24px;
      border-radius: 0;
      box-shadow: none;
      border: none;
      gap: 20px;
    }
    
    /* Mobile: Adjust spacing for checkout sections */
    .cart-section .cart-checkout .cart-subtotal {
      padding-bottom: 20px;
      margin-bottom: 0;
      gap: 6px;
    }
    
    .cart-section .cart-checkout .cart-policies {
      font-size: 12px;
      margin: 0;
      line-height: 1.5;
    }
    
    .cart-section .cart-checkout .cart-sidebar-note {
      margin: 0;
    }
    
    .cart-section .cart-checkout .terms-agreement {
      margin: 0;
    }
    
    .cart-section .cart-checkout .checkout-buttons {
      gap: 12px;
    }
    
    /* Mobile: Headers */
    .cart-section .cart-items-list > .col-md-6.fw-bold {
      text-align: left !important;
      padding: 8px 0 !important;
      margin-bottom: 8px !important;
      order: 0 !important;
    }
    
    .cart-section .cart-items-list > .col-md-3.fw-bold,
    .cart-section .cart-items-list > .col-md-2.fw-bold:not(.cart-item-subtotal) {
      display: none !important;
    }
  }
  
  /* Remove borders and optimize spacing */
  .cart-section .border-bottom,
  .cart-section .border-top,
  .cart-section [class*="border"] {
    border-width: 0 !important;
  }
  
  .cart-section .cart-items-list {
    gap: 0;
  }
  
  .cart-section .cart-items-list > div[class*="col-"] + div[class*="col-"],
  .cart-section .cart-items-list > div:not(:last-child) {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .cart-section .cart-items-list > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }
/* Collection Page - Apple Style Enhancements - Scoped to collection page only */
  .section-collection .filters-container {
    position: relative;
  }
  
  /* Add margin-top when banner is hidden to prevent header overlap */
  .section-collection .filters-container.mt-header-offset {
    margin-top: calc(var(--theme-header-height, 80px) + 20px);
  }
  @media (max-width: 767.98px) {
    .section-collection .filters-container.mt-header-offset {
      margin-top: calc(var(--theme-header-height, 80px) + 20px);
    }
  }
  
  /* Filter Heading Sticky - Scoped */
  .section-collection .filter-heading-desktop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    margin: 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: none !important;
  }
  .section-collection .filter-heading-desktop h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    padding-left: 0 !important;
  }
  
  /* Unified Filter Section Titles - Aligned */
  .section-collection .filter-heading-desktop h2,
  .section-collection .filter-group-availability .hr-text,
  .section-collection .disclosure-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
  }
  
  .section-collection .filter-group-availability .hr-text {
    margin-bottom: 16px !important;
    text-align: left !important;
    text-transform: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    border: none !important;
    padding: 0 !important;
  }
  
  .section-collection .disclosure-title {
    padding: 0 !important;
    margin-bottom: 16px !important;
    border: none !important;
    background: transparent !important;
  }
  
  .section-collection .disclosure-title:hover {
    background: transparent !important;
  }
  
  /* Remove hr-text decorative lines */
  .section-collection .hr-text::before,
  .section-collection .hr-text::after {
    display: none !important;
  }
  
  /* Modern Button Styles - Scoped */
  .section-collection .filterbtn {
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .section-collection .filterbtn:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .section-collection .filterbtn.open {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
  }
  
  /* Product Count Typography - Scoped */
  .section-collection .filters-count {
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
  }
  
  /* View Toggle Buttons - Scoped */
  .section-collection .btn-group .btn {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px 10px;
  }
  .section-collection .btn-group .btn:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.15);
  }
  .section-collection .btn-group .btn.active {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
  }
  
  /* Sort Dropdown - Scoped */
  .section-collection .dropdown-toggle {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .section-collection .dropdown-toggle:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.15);
  }
  .section-collection .dropdown-menu {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 8px;
    margin-top: 8px;
  }
  .section-collection .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.15s ease;
  }
  .section-collection .dropdown-item:hover {
    background: #f5f5f7;
  }
  .section-collection .dropdown-item.active {
    background: #0071e3;
    color: #fff;
  }
  
  /* Filter Sidebar Enhancements - Scoped */
  .section-collection .filters.desktop-show {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  .section-collection .filters .disclosure-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: none !important;
    margin: 0 0 16px 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .section-collection .filters .disclosure-title:hover {
    background: transparent !important;
  }
  .section-collection .filters .disclosure-panel {
    padding: 12px 16px 16px;
  }
  
  /* Filter Group - Stock Options - Enhanced */
  .section-collection .filter-group-availability {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
  }
  .section-collection .filter-group-availability .form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    margin: 0;
    background: #f5f5f7;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .section-collection .filter-group-availability .form-switch:hover {
    background: #e8e8ed;
    border-color: rgba(0, 0, 0, 0.1);
  }
  .section-collection .filter-group-availability .form-check-label {
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    flex: 1;
    margin: 0;
  }
  .section-collection .filter-group-availability .form-check-input {
    flex-shrink: 0;
    margin-left: 12px;
    order: 2;
  }
  
  /* Filter Buttons - Apple Style - Scoped */
  .section-collection .form-selectgroup-item {
    margin-bottom: 8px;
  }
  .section-collection .form-selectgroup-label {
    border-radius: 8px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
  }
  .section-collection .form-selectgroup-input:checked + .form-selectgroup-label {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2);
  }
  .section-collection .form-selectgroup-label:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: #f5f5f7;
  }
  
  /* Checkbox Style - Scoped */
  .section-collection .form-check-input {
    border-radius: 4px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    width: 18px;
    height: 18px;
    transition: all 0.2s ease;
  }
  .section-collection .form-check-input:checked {
    background-color: #0071e3;
    border-color: #0071e3;
  }
  .section-collection .form-check-label {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 400;
  }
  
  /* Switch Style - Scoped and Enhanced */
  .section-collection .form-switch .form-check-input {
    border-radius: 20px !important;
    width: 52px !important;
    height: 32px !important;
    background-color: rgba(0, 0, 0, 0.12) !important;
    border: 2px solid transparent !important;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .section-collection .form-switch .form-check-input::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .section-collection .form-switch .form-check-input:hover {
    background-color: rgba(0, 0, 0, 0.18) !important;
  }
  .section-collection .form-switch .form-check-input:checked {
    background-color: #0071e3 !important;
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .section-collection .form-switch .form-check-input:checked::before {
    left: 22px;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.4), 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .section-collection .form-switch .form-check-input:checked:hover {
    background-color: #0077ed !important;
    border-color: #0077ed !important;
  }
  
  /* Product Card Stamp/Badge - Small Light Blue Rounded Box */
  .card-stamp{width: auto !important;height: 20px !important;max-width:80px;}
  .card-stamp-icon{left: 0;
    bottom: 0;
    transform: rotate(0deg);
    width: auto;
    height: 10px;
    background: #f0f8ff00;
    font-size:10px !important;}
  .section-collection .card-stamp {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.15) 0%, rgba(90, 200, 250, 0.2) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #0071e3;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.15);
    border: 1px solid rgba(0, 113, 227, 0.2);
    z-index: 10;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    min-width: auto;
    width: auto;
    height: auto;
  }
  
  .section-collection .card-stamp-icon {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #0071e3;
    text-align: center;
    position: static;
    top: auto;
    right: auto;
  }
  
  .section-collection .card-stamp .card-stamp-icon {
    background: transparent;
    color: #0071e3;
    text-align: center;
    transform: none;
  }
  
  .section-collection .card-stamp.label-sale .card-stamp-icon {
    color: #0071e3;
  }
  
  .section-collection .card-stamp.label-new .card-stamp-icon {
    color: #34c759;
  }
  
  .section-collection .card-stamp.label-soldout .card-stamp-icon {
    color: #8e8e93;
  }
  
  /* Ribbon Style - Modern (for reduction/new labels) */
  .ribbon {
    border-radius: 10px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
  }
  .ribbon.bg-red,
  .ribbon[class*="bg-red"] {
    background: linear-gradient(135deg, #ff3b30 0%, #ff2d55 100%) !important;
    color: #fff !important;
  }
  .ribbon.bg-teal,
  .ribbon[class*="bg-teal"] {
    background: linear-gradient(135deg, #0071e3 0%, #5ac8fa 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0, 113, 227, 0.3) !important;
  }
  
  /* Product Cards Grid - Equal Height */
  .section-collection .ajax-data.row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  .section-collection .ajax-data.row > .col,
  .section-collection .ajax-data.row > [class*="col-"],
  .section-collection .ajax-data.row > .shopify-block {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .section-collection .ajax-data.row > .col > .card-product,
  .section-collection .ajax-data.row > .col > .card,
  .section-collection .ajax-data.row > [class*="col-"] > .card-product,
  .section-collection .ajax-data.row > [class*="col-"] > .card,
  .section-collection .ajax-data.row > .shopify-block > .card-product,
  .section-collection .ajax-data.row > .shopify-block > .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Product Cards - Enhanced - Scoped */
  .section-collection .card {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
  .section-collection .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }
  
  /* Card Image Container - Scoped */
  .section-collection .card-img-top,
  .section-collection .card .media-ratio {
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Card Body - Flex Grow to Fill Space */
  .section-collection .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
  }
  
  /* Quick Buy Button - Push to Bottom */
  .section-collection .card-body .quickbuy-btn {
    margin-top: auto !important;
  }
  
  /* Typography Hierarchy - Scoped */
  .section-collection .card-title {
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.4;
  }
  .section-collection .card-vendor {
    font-size: 13px;
    color: #86868b;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  
  /* Price Typography - Scoped */
  .section-collection .card-price {
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
  }
  .section-collection .card-compare-price {
    color: #86868b;
    font-weight: 400;
  }
  
  /* Quick Buy Button - Enhanced Elliptical Style - Scoped */
  .section-collection .quickbuy-btn {
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 12px 24px !important;
    background: #0071e3 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 6px !important;
  }
  .section-collection .quickbuy-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.35) !important;
    background: #0077ed !important;
    color: #fff !important;
  }
  .section-collection .quickbuy-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.3) !important;
  }
  
  /* View Details Button - Scoped */
  .section-collection .view-details-btn {
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 12px 24px !important;
    background: #fff !important;
    color: #1d1d1f !important;
    border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 6px !important;
  }
  .section-collection .view-details-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #1d1d1f !important;
  }
  .section-collection .view-details-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Card Buttons Container - Scoped */
  .section-collection .card-btn {
    display: flex !important;
    flex-direction: column !important;
  }
  .section-collection .card-btn .d-flex {
    width: 100% !important;
    gap: 8px !important;
  }
  
  /* Navigation Bar Enhancements - Scoped */
  .section-collection .navbar-nav {
    gap: 8px;
    flex-wrap: wrap;
  }
  .section-collection .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  /* Flex-fill items should align to start, not center - Override vendor styles with higher specificity */
  .section-collection ul.navbar-nav.flex-row li.nav-item.flex-fill,
  .section-collection .navbar-nav.flex-row .nav-item.flex-fill,
  .section-collection .navbar-nav .nav-item.flex-fill {
    justify-content: flex-start !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  /* Override vendor-ltr.css .navbar-nav .nav-item justify-content: center */
  .section-collection ul.navbar-nav.flex-row li.nav-item,
  .section-collection .navbar-nav.flex-row .nav-item {
    justify-content: flex-start !important;
    flex-direction: row !important;
  }
  
  /* Ensure filter button container aligns to start */
  .section-collection ul.navbar-nav.flex-row li.nav-item.flex-fill > div.d-inline-flex,
  .section-collection .navbar-nav .nav-item.flex-fill > .d-inline-flex,
  .section-collection .navbar-nav .nav-item.flex-fill > .d-flex,
  .section-collection .navbar-nav.flex-row .nav-item.flex-fill > .d-inline-flex,
  .section-collection .navbar-nav.flex-row .nav-item.flex-fill > .d-flex {
    justify-content: flex-start !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }
  
  /* Dropdown Mobile Responsive */
  .section-collection .nav-item.dropdown {
    position: relative;
  }
  
  .section-collection .dropdown-menu {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
  }
  
  /* Filter Sidebar - Desktop - Scoped */
  .section-collection .filters.desktop-show .offcanvas-body {
    padding: 0 !important;
  }
  .section-collection .filters.desktop-show {
    padding: 0;
    max-height: calc(100vh - var(--theme-header-height, 80px) - 40px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .section-collection .filters.desktop-show::-webkit-scrollbar {
    width: 6px;
  }
  .section-collection .filters.desktop-show::-webkit-scrollbar-track {
    background: transparent;
  }
  .section-collection .filters.desktop-show::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  .section-collection .filters.desktop-show::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
  
  /* Filter Group Spacing - Scoped */
  .section-collection .filter-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  .section-collection .filter-group:not(:empty) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .section-collection .filter-group:last-child,
  .section-collection .filter-group:empty {
    border-bottom: none;
  }
  .section-collection .filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .section-collection .filter-group:empty {
    margin-bottom: 0;
    padding-bottom: 0;
    display: none;
  }
  
  /* Applied Filters - Scoped - Unified Button Style */
  .section-collection .filter-group-applied .btn-group {
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-flex !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
  .section-collection .filter-group-applied .btn-group .btn {
    border-radius: 0 !important;
    border: none !important;
    font-size: 12px !important;
    padding: 6px 12px 6px 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  .section-collection .filter-group-applied .btn-group .filter-remove {
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 6px 10px !important;
    background: transparent !important;
    color: #86868b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
  }
  .section-collection .filter-group-applied .btn-group .filter-remove:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1d1d1f !important;
  }
  .section-collection .filter-group-applied .btn-group .filter-remove svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Clear All Button */
  .section-collection .filter-group-applied .btn-danger {
    border-radius: 20px !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
  }
  
  /* Loading Overlay - Enhanced Style */
  .section-collection .ajax-product.ccloading::before {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .section-collection .ajax-product.ccloading::after {
    border-color: #0071e3 !important;
    border-right-color: transparent !important;
    width: 3rem !important;
    height: 3rem !important;
    margin-left: -1.5rem !important;
    margin-top: -1.5rem !important;
    border-width: 4px !important;
  }
  
  /* Price Range Input - Scoped */
  .section-collection .price-range {
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
  }
  .section-collection .price-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0071e3;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .section-collection .input-group-flat .form-control {
    border-radius: 8px;
    font-size: 14px;
  }
  
  /* Responsive Adjustments - Scoped */
  @media (max-width: 767.98px) {
    .section-collection .filter-heading-desktop {
      display: none !important;
    }
    .section-collection .filterbtn {
      font-size: 13px;
      padding: 6px 12px;
    }
    .section-collection .filters-count {
      font-size: 14px;
    }
    .section-collection .card-stamp {
      padding: 3px 6px !important;
      font-size: 8px !important;
      top: 6px !important;
      right: 6px !important;
    }
    .section-collection .card {
      border-radius: 12px !important;
    }
    .section-collection .quickbuy-btn,
    .section-collection .view-details-btn {
      padding: 10px 16px !important;
      font-size: 13px !important;
      min-height: 40px !important;
      gap: 4px !important;
    }
    .section-collection .card-btn .d-flex {
      gap: 6px !important;
    }
    
    /* Mobile Navigation Bar - Prevent Overflow */
    .section-collection .navbar-nav {
      gap: 4px;
      flex-wrap: wrap;
      width: 100%;
      align-items: center;
    }
    .section-collection .navbar-nav .nav-item {
      flex: 0 0 auto;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    .section-collection .navbar-nav .nav-item.flex-fill {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: flex-start !important;
    }
    
    /* Ensure filter button container doesn't center */
    .section-collection .nav-item.flex-fill .d-inline-flex {
      justify-content: flex-start !important;
      width: 100%;
    }
    .section-collection .filters.desktop-show{background:white !important;}
    /* Buttons Alignment - Mobile */
    .section-collection .filterbtn,
    .section-collection .dropdown-toggle {
      height: 36px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 13px !important;
      padding: 6px 12px !important;
      line-height: 1.2 !important;
    }
    
    /* Dropdown Mobile Fix */
    .section-collection .nav-item.dropdown {
      flex: 0 0 auto;
      max-width: 100%;
      position: relative;
    }
    .section-collection .dropdown-toggle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
    /* Ensure dropdown doesn't overflow on left */
    .section-collection .nav-item.dropdown {
      position: relative;
    }
    
    .section-collection .dropdown-menu {
      max-width: calc(100vw - 32px) !important;
      min-width: 200px !important;
      width: auto !important;
      right: 0 !important;
      left: 1px !important;
      transform: none !important;
      font-size: 13px;
      position: absolute !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 4px !important;
    }
    
    /* Prevent left overflow */
    .section-collection .nav-item.dropdown .dropdown-menu {
      right: 0 !important;
      left: 1px !important;
    }
    
    /* If dropdown is too wide, adjust */
    @media (max-width: 480px) {
      .section-collection .dropdown-menu {
        max-width: calc(100vw - 16px) !important;
        right: 0 !important;
        left: auto !important;
      }
    }
    .section-collection .dropdown-item {
      padding: 8px 12px;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* View Toggle Buttons Mobile */
    .section-collection .btn-group .btn {
      padding: 4px 8px !important;
      font-size: 12px;
    }
    
    /* Filters Count Mobile */
    .section-collection .filters-count {
      font-size: 12px;
      white-space: nowrap;
    }
  }
  
  @media (min-width: 768px) {
    .section-collection .filters-container .row {
      align-items: flex-start;
    }
  }
  
  /* Hide thumbnails in Quick Buy Modal */
  .modal[id^="quickbuy-"] .swiper-thumbs,
  .modal[id^="quickbuy-"] .gallery-thumbs,
  .modal[id^="quickbuy-"] .swiper-thumbs .swiper-wrapper,
  .modal[id^="quickbuy-"] .product-gallery .swiper-thumbs,
  .modal[id^="quickbuy-"] .product-gallery .swiper.swiper-thumbs,
  .modal[id^="quickbuy-"] .product-gallery [class*="swiper-thumbs"],
  .modal[id^="quickbuy-"] .product-gallery .order-2.swiper-thumbs,
  .modal[id^="quickbuy-"] .product-gallery .order-md-2.swiper-thumbs {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide modal header */
  .modal[id^="quickbuy-"] .modal-header {
    display: none !important;
  }
  
  /* Custom close button - Blue circular X icon in top right */
  .modal[id^="quickbuy-"] .modal-content {
    position: relative;
  }
  .modal[id^="quickbuy-"] .modal-close-custom {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0071e3;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1060;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
  }
  .modal[id^="quickbuy-"] .modal-close-custom:hover {
    background: #0077ed;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
  }
  .modal[id^="quickbuy-"] .modal-close-custom:active {
    transform: scale(0.95);
  }
  .modal[id^="quickbuy-"] .modal-close-custom svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: currentColor;
    stroke-width: 2;
  }
/* Fix thumbnail size - Make thumbnails small, side-by-side, and centered */
  .product-gallery .swiper-thumbs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .product-gallery .swiper-thumbs .swiper-slide {
    width: var(--thumb-image-width, 80px) !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  .product-gallery .swiper-thumbs .swiper-slide img,
  .product-gallery .swiper-thumbs .swiper-slide .media-ratio,
  .product-gallery .swiper-thumbs .swiper-slide .media-ratio img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  .product-gallery .swiper-thumbs .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-gallery .swiper-thumbs.swiper-horizontal .swiper-slide {
    width: var(--thumb-image-width, 80px) !important;
    height: auto !important;
  }
  .product-gallery .swiper-thumbs.swiper-vertical .swiper-slide {
    width: var(--thumb-image-width, 80px) !important;
    height: auto !important;
  }
  
  /* Hide breadcrumbs */
  .product-section .container .breadcrumb,
  .product-section .breadcrumb {
    display: none !important;
  }
  
  /* Hide "Double click" zoom hint */
  .swiper-zoom .swiper-zoom-slide:after {
    display: none !important;
    content: none !important;
  }
/* Search Page - Apple Style Enhancements - Scoped to search page only */
  .section-search .filters-container {
    position: relative;
    padding-top: 40px;
  }
  
  /* Search bar container - add top margin to avoid header overlap */
  .section-search .filters-container > .row:first-child {
    margin-top: 60px;
    margin-bottom: 40px;
  }
  
  @media (max-width: 767.98px) {
    .section-search .filters-container {
      padding-top: 20px;
    }
    .section-search .filters-container > .row:first-child {
      margin-top: 40px;
      margin-bottom: 30px;
    }
  }
  
  /* Filter Heading Sticky - Scoped */
  .section-search .filter-heading-desktop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    margin: 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: none !important;
  }
  .section-search .filter-heading-desktop h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    padding-left: 0 !important;
  }
  
  /* Unified Filter Section Titles - Aligned */
  .section-search .filter-heading-desktop h2,
  .section-search .filter-group-availability .hr-text,
  .section-search .disclosure-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
  }
  
  .section-search .filter-group-availability .hr-text {
    margin-bottom: 16px !important;
    text-align: left !important;
    text-transform: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    border: none !important;
    padding: 0 !important;
  }
  
  .section-search .disclosure-title {
    padding: 0 !important;
    margin-bottom: 16px !important;
    border: none !important;
    background: transparent !important;
  }
  
  .section-search .disclosure-title:hover {
    background: transparent !important;
  }
  
  /* Remove hr-text decorative lines */
  .section-search .hr-text::before,
  .section-search .hr-text::after {
    display: none !important;
  }
  
  /* Modern Button Styles - Scoped */
  .section-search .filterbtn {
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .section-search .filterbtn:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .section-search .filterbtn.open {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
  }
  
  /* Product Count Typography - Scoped */
  .section-search .filters-count {
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
  }
  
  /* View Toggle Buttons - Scoped */
  .section-search .btn-group .btn {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px 10px;
  }
  .section-search .btn-group .btn:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.15);
  }
  .section-search .btn-group .btn.active {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
  }
  
  /* Sort Dropdown - Scoped */
  .section-search .dropdown-toggle {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .section-search .dropdown-toggle:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.15);
  }
  .section-search .dropdown-menu {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 8px;
    margin-top: 8px;
  }
  .section-search .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.15s ease;
  }
  .section-search .dropdown-item:hover {
    background: #f5f5f7;
  }
  .section-search .dropdown-item.active {
    background: #0071e3;
    color: #fff;
  }
  
  /* Filter Sidebar Enhancements - Scoped */
  .section-search .filters.desktop-show {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  .section-search .filters .disclosure-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: none !important;
    margin: 0 0 16px 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .section-search .filters .disclosure-title:hover {
    background: transparent !important;
  }
  .section-search .filters .disclosure-panel {
    padding: 12px 16px 16px;
  }
  
  /* Filter Group - Stock Options - Enhanced */
  .section-search .filter-group-availability {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
  }
  .section-search .filter-group-availability .form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    margin: 0;
    background: #f5f5f7;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .section-search .filter-group-availability .form-switch:hover {
    background: #e8e8ed;
    border-color: rgba(0, 0, 0, 0.1);
  }
  .section-search .filter-group-availability .form-check-label {
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    flex: 1;
    margin: 0;
  }
  .section-search .filter-group-availability .form-check-input {
    flex-shrink: 0;
    margin-left: 12px;
    order: 2;
  }
  
  /* Filter Buttons - Apple Style - Scoped */
  .section-search .form-selectgroup-item {
    margin-bottom: 8px;
  }
  .section-search .form-selectgroup-label {
    border-radius: 8px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
  }
  .section-search .form-selectgroup-input:checked + .form-selectgroup-label {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2);
  }
  .section-search .form-selectgroup-label:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: #f5f5f7;
  }
  
  /* Checkbox Style - Scoped */
  .section-search .form-check-input {
    border-radius: 4px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    width: 18px;
    height: 18px;
    transition: all 0.2s ease;
  }
  .section-search .form-check-input:checked {
    background-color: #0071e3;
    border-color: #0071e3;
  }
  .section-search .form-check-label {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 400;
  }
  
  /* Switch Style - Scoped and Enhanced */
  .section-search .form-switch .form-check-input {
    border-radius: 20px !important;
    width: 52px !important;
    height: 32px !important;
    background-color: rgba(0, 0, 0, 0.12) !important;
    border: 2px solid transparent !important;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .section-search .form-switch .form-check-input::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .section-search .form-switch .form-check-input:hover {
    background-color: rgba(0, 0, 0, 0.18) !important;
  }
  .section-search .form-switch .form-check-input:checked {
    background-color: #0071e3 !important;
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .section-search .form-switch .form-check-input:checked::before {
    left: 22px;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.4), 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .section-search .form-switch .form-check-input:checked:hover {
    background-color: #0077ed !important;
    border-color: #0077ed !important;
  }
  
  /* Product Card Stamp/Badge - Small Light Blue Rounded Box */
  .section-search .card-stamp {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.15) 0%, rgba(90, 200, 250, 0.2) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #0071e3;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.15);
    border: 1px solid rgba(0, 113, 227, 0.2);
    z-index: 10;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    min-width: auto;
    width: auto;
    height: auto;
  }
  
  .section-search .card-stamp-icon {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #0071e3;
    text-align: center;
    position: static;
    top: auto;
    right: auto;
  }
  
  .section-search .card-stamp .card-stamp-icon {
    background: transparent;
    color: #0071e3;
    text-align: center;
    transform: none;
  }
  
  .section-search .card-stamp.label-sale .card-stamp-icon {
    color: #0071e3;
  }
  
  .section-search .card-stamp.label-new .card-stamp-icon {
    color: #34c759;
  }
  
  .section-search .card-stamp.label-soldout .card-stamp-icon {
    color: #8e8e93;
  }
  
  /* Product Cards Grid - Equal Height */
  .section-search .ajax-data.row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  .section-search .ajax-data.row > .col,
  .section-search .ajax-data.row > [class*="col-"],
  .section-search .ajax-data.row > .shopify-block {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .section-search .ajax-data.row > .col > .card-product,
  .section-search .ajax-data.row > .col > .card,
  .section-search .ajax-data.row > [class*="col-"] > .card-product,
  .section-search .ajax-data.row > [class*="col-"] > .card,
  .section-search .ajax-data.row > .shopify-block > .card-product,
  .section-search .ajax-data.row > .shopify-block > .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Product Cards - Enhanced - Scoped */
  .section-search .card {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
  .section-search .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }
  
  /* Card Image Container - Scoped */
  .section-search .card-img-top,
  .section-search .card .media-ratio {
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Card Body - Flex Grow to Fill Space */
  .section-search .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
  }
  
  /* Quick Buy Button - Push to Bottom */
  .section-search .card-body .quickbuy-btn {
    margin-top: auto !important;
  }
  
  /* Typography Hierarchy - Scoped */
  .section-search .card-title {
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.4;
  }
  .section-search .card-vendor {
    font-size: 13px;
    color: #86868b;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  
  /* Price Typography - Scoped */
  .section-search .card-price {
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
  }
  .section-search .card-compare-price {
    color: #86868b;
    font-weight: 400;
  }
  
  /* Quick Buy Button - Enhanced Elliptical Style - Scoped */
  .section-search .quickbuy-btn {
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 12px 24px !important;
    background: #0071e3 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 6px !important;
  }
  .section-search .quickbuy-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.35) !important;
    background: #0077ed !important;
    color: #fff !important;
  }
  .section-search .quickbuy-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 113, 227, 0.3) !important;
  }
  
  /* View Details Button - Scoped */
  .section-search .view-details-btn {
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 12px 24px !important;
    background: #fff !important;
    color: #1d1d1f !important;
    border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 6px !important;
  }
  .section-search .view-details-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #1d1d1f !important;
  }
  .section-search .view-details-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Card Buttons Container - Scoped */
  .section-search .card-btn {
    display: flex !important;
    flex-direction: column !important;
  }
  .section-search .card-btn .d-flex {
    width: 100% !important;
    gap: 8px !important;
  }
  
  /* Navigation Bar Enhancements - Scoped */
  .section-search .navbar-nav {
    gap: 8px;
    flex-wrap: wrap;
  }
  .section-search .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  /* Flex-fill items should align to start, not center - Override vendor styles with higher specificity */
  .section-search ul.navbar-nav.flex-row li.nav-item.flex-fill,
  .section-search .navbar-nav.flex-row .nav-item.flex-fill,
  .section-search .navbar-nav .nav-item.flex-fill {
    justify-content: flex-start !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  /* Override vendor-ltr.css .navbar-nav .nav-item justify-content: center */
  .section-search ul.navbar-nav.flex-row li.nav-item,
  .section-search .navbar-nav.flex-row .nav-item {
    justify-content: flex-start !important;
    flex-direction: row !important;
  }
  
  /* Ensure filter button container aligns to start */
  .section-search ul.navbar-nav.flex-row li.nav-item.flex-fill > div.d-inline-flex,
  .section-search .navbar-nav .nav-item.flex-fill > .d-inline-flex,
  .section-search .navbar-nav .nav-item.flex-fill > .d-flex,
  .section-search .navbar-nav.flex-row .nav-item.flex-fill > .d-inline-flex,
  .section-search .navbar-nav.flex-row .nav-item.flex-fill > .d-flex {
    justify-content: flex-start !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }
  
  /* Dropdown Mobile Responsive */
  .section-search .nav-item.dropdown {
    position: relative;
  }
  
  .section-search .dropdown-menu {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
  }
  
  /* Filter Sidebar - Desktop - Scoped */
  .section-search .filters.desktop-show .offcanvas-body {
    padding: 0 !important;
  }
  .section-search .filters.desktop-show {
    padding: 0;
    max-height: calc(100vh - var(--theme-header-height, 80px) - 40px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .section-search .filters.desktop-show::-webkit-scrollbar {
    width: 6px;
  }
  .section-search .filters.desktop-show::-webkit-scrollbar-track {
    background: transparent;
  }
  .section-search .filters.desktop-show::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  .section-search .filters.desktop-show::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
  
  /* Filter Group Spacing - Scoped */
  .section-search .filter-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  .section-search .filter-group:not(:empty) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .section-search .filter-group:last-child,
  .section-search .filter-group:empty {
    border-bottom: none;
  }
  .section-search .filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .section-search .filter-group:empty {
    margin-bottom: 0;
    padding-bottom: 0;
    display: none;
  }
  
  /* Applied Filters - Scoped - Unified Button Style */
  .section-search .filter-group-applied .btn-group {
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-flex !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
  .section-search .filter-group-applied .btn-group .btn {
    border-radius: 0 !important;
    border: none !important;
    font-size: 12px !important;
    padding: 6px 12px 6px 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  .section-search .filter-group-applied .btn-group .filter-remove {
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 6px 10px !important;
    background: transparent !important;
    color: #86868b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
  }
  .section-search .filter-group-applied .btn-group .filter-remove:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1d1d1f !important;
  }
  .section-search .filter-group-applied .btn-group .filter-remove svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Clear All Button */
  .section-search .filter-group-applied .btn-danger {
    border-radius: 20px !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
  }
  
  /* Loading Overlay - Enhanced Style */
  .section-search .ajax-product.ccloading::before {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .section-search .ajax-product.ccloading::after {
    border-color: #0071e3 !important;
    border-right-color: transparent !important;
    width: 3rem !important;
    height: 3rem !important;
    margin-left: -1.5rem !important;
    margin-top: -1.5rem !important;
    border-width: 4px !important;
  }
  
  /* Price Range Input - Scoped */
  .section-search .price-range {
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
  }
  .section-search .price-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0071e3;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .section-search .input-group-flat .form-control {
    border-radius: 8px;
    font-size: 14px;
  }
  
  /* --- Search Bar Styles (from page-support.liquid) --- */
  .section-search .form-search {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
  }
  
  .section-search .form-search .input-group {
    position: relative;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  
  /* 覆盖主题默认的搜索框样式 */
  .section-search .form-search .input-group {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  
  .section-search .search-input,
  .section-search .searchbox,
  .section-search .form-search input[type="text"],
  .section-search .form-search input[type="search"] {
    width: 100% !important; 
    padding: 22px 24px 22px 64px !important;
    font-size: 17px !important; 
    border: 1px solid rgba(0,0,0,0.08) !important; 
    border-radius: 20px !important;
    background: white !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
  }
  
  /* 确保边框在所有状态下都显示 */
  .section-search .searchbox:not(:focus),
  .section-search .search-input:not(:focus),
  .section-search .form-search input[type="text"]:not(:focus),
  .section-search .form-search input[type="search"]:not(:focus) {
    border: 1px solid rgba(0,0,0,0.08) !important;
  }
  
  /* 搜索图标样式 - 显示按钮中的图标 */
  .section-search .form-search .input-group .btn {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    overflow: visible !important;
  }
  
  /* 移除按钮的所有伪元素边框 */
  .section-search .form-search .input-group .btn::before,
  .section-search .form-search .input-group .btn::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 移除按钮的焦点状态边框 */
  .section-search .form-search .input-group .btn:focus,
  .section-search .form-search .input-group .btn:focus-visible,
  .section-search .form-search .input-group .btn:active,
  .section-search .form-search .input-group .btn:hover,
  .section-search .form-search .input-group .btn:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }
  
  /* 覆盖所有可能的边框样式 */
  .section-search .form-search .input-group .btn.btn-transparent,
  .section-search .form-search .input-group .btn[type="submit"] {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  .section-search .form-search .input-group .btn svg,
  .section-search .form-search .input-group .btn .icon {
    width: 22px !important;
    height: 22px !important;
    color: #999 !important;
    fill: none !important;
    stroke: #999 !important;
    stroke-width: 2 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .section-search .form-search .input-group .btn svg path,
  .section-search .form-search .input-group .btn .icon path {
    fill: none !important;
    stroke: #999 !important;
    stroke-width: 2 !important;
  }
  
  /* 确保 SVG 元素本身没有边框 */
  .section-search .form-search .input-group .btn svg {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* 确保按钮在 input-group-text 中也能显示 */
  .section-search .form-search .input-group-text {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 10 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .section-search .form-search .input-group-text .btn {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin-left: 20px !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
  
  .section-search .form-search .input-group-text .btn:focus,
  .section-search .form-search .input-group-text .btn:hover,
  .section-search .form-search .input-group-text .btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  
  /* 搜索激活态 */
  .section-search .search-input:focus,
  .section-search .searchbox:focus,
  .section-search .form-search input[type="text"]:focus,
  .section-search .form-search input[type="search"]:focus {
    outline: none; 
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important; 
    border-color: transparent !important;
  }
  
  /* 聚焦时图标颜色变化 */
  .section-search .form-search:focus-within .input-group .btn svg,
  .section-search .form-search:focus-within .input-group .btn .icon,
  .section-search .form-search.active .input-group .btn svg,
  .section-search .form-search.active .input-group .btn .icon {
    color: #0071e3 !important;
    stroke: #0071e3 !important;
  }
  
  .section-search .form-search:focus-within .input-group .btn svg path,
  .section-search .form-search:focus-within .input-group .btn .icon path,
  .section-search .form-search.active .input-group .btn svg path,
  .section-search .form-search.active .input-group .btn .icon path {
    stroke: #0071e3 !important;
  }
  
  /* 搜索建议框样式 */
  .section-search .form-search .search-suggestions,
  .section-search .form-search .predictive-search {
    margin-top: 8px; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(0,0,0,0.08) !important; 
    background: white !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 12px;
    min-height: 0;
  }
  
  /* 如果预测搜索为空，隐藏整个建议框 */
  .section-search .form-search .predictive-search:empty {
    display: none;
  }
  
  .section-search .form-search .list-group-item {
    border: none !important; 
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 12px 16px; 
    transition: 0.2s;
    background: transparent;
  }
  
  .section-search .form-search .list-group-item:hover {
    background: #f5f5f7 !important; 
    color: #0071e3 !important;
  }
  
  .section-search .form-search .list-group-item:last-child {
    border-bottom: none !important;
  }
  
  /* Responsive Adjustments - Scoped */
  @media (max-width: 767.98px) {
    .section-search .filter-heading-desktop {
      display: none !important;
    }
    .section-search .filterbtn {
      font-size: 13px;
      padding: 6px 12px;
    }
    .section-search .filters-count {
      font-size: 14px;
    }
    .section-search .card-stamp {
      padding: 3px 6px !important;
      font-size: 8px !important;
      top: 6px !important;
      right: 6px !important;
    }
    .section-search .card {
      border-radius: 12px !important;
    }
    .section-search .quickbuy-btn,
    .section-search .view-details-btn {
      padding: 10px 16px !important;
      font-size: 13px !important;
      min-height: 40px !important;
      gap: 4px !important;
    }
    .section-search .card-btn .d-flex {
      gap: 6px !important;
    }
    
    /* Mobile Navigation Bar - Prevent Overflow */
    .section-search .navbar-nav {
      gap: 4px;
      flex-wrap: wrap;
      width: 100%;
      align-items: center;
    }
    .section-search .navbar-nav .nav-item {
      flex: 0 0 auto;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    .section-search .navbar-nav .nav-item.flex-fill {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: flex-start !important;
    }
    
    /* Ensure filter button container doesn't center */
    .section-search .nav-item.flex-fill .d-inline-flex {
      justify-content: flex-start !important;
      width: 100%;
    }
    .section-search .filters.desktop-show{background:white !important;}
    /* Buttons Alignment - Mobile */
    .section-search .filterbtn,
    .section-search .dropdown-toggle {
      height: 36px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 13px !important;
      padding: 6px 12px !important;
      line-height: 1.2 !important;
    }
    
    /* Dropdown Mobile Fix */
    .section-search .nav-item.dropdown {
      flex: 0 0 auto;
      max-width: 100%;
      position: relative;
    }
    .section-search .dropdown-toggle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
    /* Ensure dropdown doesn't overflow on left */
    .section-search .nav-item.dropdown {
      position: relative;
    }
    
    .section-search .dropdown-menu {
      max-width: calc(100vw - 32px) !important;
      min-width: 200px !important;
      width: auto !important;
      right: 0 !important;
      left: 1px !important;
      transform: none !important;
      font-size: 13px;
      position: absolute !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 4px !important;
    }
    
    /* Prevent left overflow */
    .section-search .nav-item.dropdown .dropdown-menu {
      right: 0 !important;
      left: 1px !important;
    }
    
    /* If dropdown is too wide, adjust */
    @media (max-width: 480px) {
      .section-search .dropdown-menu {
        max-width: calc(100vw - 16px) !important;
        right: 0 !important;
        left: auto !important;
      }
    }
    .section-search .dropdown-item {
      padding: 8px 12px;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* View Toggle Buttons Mobile */
    .section-search .btn-group .btn {
      padding: 4px 8px !important;
      font-size: 12px;
    }
    
    /* Filters Count Mobile */
    .section-search .filters-count {
      font-size: 12px;
      white-space: nowrap;
    }
    
    /* Search bar mobile adjustments */
    .section-search .search-input,
    .section-search .searchbox,
    .section-search .form-search input[type="text"],
    .section-search .form-search input[type="search"] {
      padding: 18px 20px 18px 52px !important;
      font-size: 16px !important;
    }
    
    .section-search .form-search .input-group .btn {
      left: 18px !important;
      width: 20px !important;
      height: 20px !important;
    }
    
    .section-search .form-search .input-group .btn svg,
    .section-search .form-search .input-group .btn .icon {
      width: 20px !important;
      height: 20px !important;
    }
  }
  
  @media (min-width: 768px) {
    .section-search .filters-container .row {
      align-items: flex-start;
    }
  }
/* Remixicon Icons */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* --- 1. DESIGN SYSTEM --- */
:root {
    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --accent: #0066cc; /* Deep Tech Blue */
    
    --shadow-card: 0 4px 24px rgba(0,0,0,0.04);
    --shadow-hover: 0 20px 48px rgba(0,0,0,0.08);
    
    --ease-apple: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-about-section .noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
    pointer-events: none; z-index: 9999;
}

.page-about-section * { margin: 0; padding: 0; box-sizing: border-box; }

.page-about-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.page-about-section .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.page-about-section .label {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 16px; display: block; opacity: 0; transform: translateY(10px);
    animation: fadeIn var(--ease-apple) forwards;
}

/* --- SECTIONS --- */

/* 1. HERO (视频背景 + 视差) */
.page-about-section .hero {
    height: 95vh; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #000; color: white;
}
.page-about-section .hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.6;
}
.page-about-section .hero-content { position: relative; z-index: 10; text-align: center; max-width: 800px; }
.page-about-section .hero h1 {
    font-size: clamp(48px, 6vw, 90px); margin-bottom: 20px;
    background: linear-gradient(180deg, #fff 0%, #aaa 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    line-height:1;
}
.page-about-section .scroll-hint {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    animation: bounce 2s infinite; opacity: 0.7;
}

/* 2. BENTO GRID (数据与介绍) */
.page-about-section .bento-section { padding: 120px 0; }
.page-about-section .bento-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 360px 240px; gap: 20px; margin-top: 60px;
}
.page-about-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.page-about-section .b-card {
    background: var(--bg-card); border-radius: 24px; padding: 40px;
    box-shadow: var(--shadow-card); transition: all 0.4s var(--ease-apple);
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
}
.page-about-section .b-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.page-about-section .b-card.large { grid-column: span 2; grid-row: span 2; padding: 0; }
.page-about-section .b-card.large img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; }
.page-about-section .b-card.large:hover img { transform: scale(1.05); }

.page-about-section .stat-num { font-size: 48px; font-weight: 700; letter-spacing: -2px; }
.page-about-section .stat-txt { font-size: 14px; color: var(--text-sub); font-weight: 500; }

/* SVG 图标样式 - 用于 bento-grid 中的统计卡片 */
.page-about-section .b-card svg {
    width: 40px;
    height: 40px;
    color: var(--accent);
    fill: currentColor;
    flex-shrink: 0;
    margin-bottom: auto;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-about-section .b-card svg path {
    fill: currentColor !important;
}
.page-about-section .black svg{color: white !important;
    fill: white !important;}
/* 黑色背景卡片中的 SVG 图标使用白色 */
.page-about-section .b-card[style*="background: #111"] svg,
.page-about-section .b-card[style*="background:#111"] svg,
.page-about-section .b-card[style*="background: #111;"] svg,
.page-about-section .b-card[style*="background:#111;"] svg {
    color: white !important;
}

.page-about-section .b-card[style*="background: #111"] svg path,
.page-about-section .b-card[style*="background:#111"] svg path,
.page-about-section .b-card[style*="background: #111;"] svg path,
.page-about-section .b-card[style*="background:#111;"] svg path {
    fill: white !important;
}

/* 3. GLOBAL STRATEGY (共享 tabs 风格) */
.page-about-section .global-section { background: #fff; padding: 120px 0; border-top: 1px solid #eee; }
.page-about-section .global-header { text-align: center; margin-bottom: 40px; }
.page-about-section .global-tabs { margin-top: 40px; }
.page-about-section .tabs {
    display: flex;
    justify-content: center;
    gap: 28px;
    border-bottom: 1px solid #e0e0e3;
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.page-about-section .tab-button {
    padding: 8px 0;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.page-about-section .tab-button:hover {
    color: var(--text-main);
}
.page-about-section .tab-button.active {
    color: var(--accent);
}
.page-about-section .tab-button.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 3px;
    background: var(--accent);
    border-radius: 999px;
}
.page-about-section .office-content-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 40px;
}
.page-about-section .office-content-grid.active { display: grid; }

.page-about-section .office-card {
    background: #fff; border: 1px solid #eaeaea; border-radius: 16px;
    padding: 32px; transition: all 0.3s var(--ease-apple);
    position: relative;
}
.page-about-section .office-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 16px;
    box-shadow: 0 0 0 2px var(--accent); opacity: 0; transition: 0.3s; pointer-events: none;
}
.page-about-section .office-card:hover {
    transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: transparent;
}
.page-about-section .office-card:hover::before { opacity: 1; }

.page-about-section .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-about-section .flag-icon, .page-about-section .office-flag { font-size: 32px; }
.page-about-section .country-name { font-size: 18px; font-weight: 700; }

.page-about-section .contact-row {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
    font-size: 14px; color: #555;
}
.page-about-section .contact-row i { color: var(--accent); margin-top: 3px; }
/* SVG 图标样式已移至 assets/styles.css.liquid */

/* 4. SERVICE (毛玻璃) */
.page-about-section .service-section {
    padding: 140px 0; background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop') center/cover fixed;
    position: relative;
}
.page-about-section .glass-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 32px; padding: 80px; max-width: 1000px; margin: 0 auto;
    box-shadow: 0 40px 100px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.4);
}
.page-about-section .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.page-about-section .check-item { display: flex; gap: 16px; }
.page-about-section .check-circle { 
    width: 24px; height: 24px; background: var(--accent); border-radius: 50%;
    color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}

/* SVG 图标样式 - 用于 check-circle 中的对勾图标 */
.page-about-section .check-circle svg {
    width: 14px;
    height: 14px;
    color: white;
    fill: currentColor;
    flex-shrink: 0;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-about-section .check-circle svg path {
    fill: currentColor !important;
}

/* 5. FACTORY (画廊) */
.page-about-section .factory-section { padding: 100px 0; }
.page-about-section .gallery { display: flex; gap: 20px; height: 400px; }
.page-about-section .g-item { flex: 1; border-radius: 16px; overflow: hidden; position: relative; transition: 0.5s; cursor: crosshair; }
.page-about-section .g-item img { width: 100%; height: 100%; object-fit: cover; }
.page-about-section .g-item:hover { flex: 2; } /* 悬停时变宽 */

/* 6. CERTIFICATES (无限轮播 - 重点优化) */
.page-about-section .cert-section {
    padding: 80px 0; background: #fff; overflow: hidden;
    border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
}
.page-about-section .marquee-wrapper {
    width: 100%; overflow: hidden; white-space: nowrap; position: relative;
}
.page-about-section .marquee-wrapper::before, .page-about-section .marquee-wrapper::after {
    content: ""; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2;
}
.page-about-section .marquee-wrapper::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.page-about-section .marquee-wrapper::after { right: 0; background: linear-gradient(to left, #fff, transparent); }

.page-about-section .marquee-content { display: inline-block; animation: scroll 20s linear infinite; }
.page-about-section .cert-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 160px; height: 100px; border: 1px solid #eee; border-radius: 12px;
    margin: 0 15px; font-weight: 700; color: #ccc; font-size: 18px;
    transition: 0.3s; vertical-align: middle;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}
.page-about-section .cert-box:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }

/* 证书图片样式 - 确保图片不会超出容器 */
.page-about-section .cert-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* CTA Section */
.page-about-section .cta-section {
    background: #000;
    color: #555;
    padding: 100px 0;
    text-align: center;
}

.page-about-section .cta-title {
    color: white;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 20px;
}

.page-about-section .cta-desc {
    color: #999;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.page-about-section .cta-button {
    display: inline-block;
    padding: 16px 40px;
    background: var(--accent, #0071e3);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 113, 227, 0.3);
}

.page-about-section .cta-button:hover {
    background: var(--accent-dark, #005bb5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.4);
}

.page-about-section .cta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 113, 227, 0.3);
}

/* 响应式 */
@media (max-width: 767.98px) {
    .page-about-section .cta-section {
        padding: 60px 0;
    }
    
    .page-about-section .cta-title {
        font-size: 32px;
    }
    
    .page-about-section .cta-desc {
        font-size: 15px;
        padding: 0 20px;
    }
    
    .page-about-section .cta-button {
        padding: 14px 32px;
        font-size: 15px;
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-about-section .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .page-about-section .b-card.large { grid-column: span 1; height: 300px; }
    .page-about-section .gallery { flex-direction: column; height: auto; }
    .page-about-section .g-item { height: 200px; }
    .page-about-section .glass-container { padding: 40px 24px; }
    .page-about-section .check-grid { grid-template-columns: 1fr; }
}

/* 响应式样式已移至 assets/styles.css.liquid */
/* Remixicon Icons */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* --- 继承自 Support 页面和 Global 的 UI Tokens --- */
.page-after-sales-section {
    --bg-body: #f9fafb;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-card: #ffffff;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --accent: #0071e3; /* Apple Blue */
    --border-light: rgba(0,0,0,0.08);
    
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.02);
    --shadow-lg: 0 25px 50px rgba(0,0,0,0.08);
    
    --ease-elastic: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 噪点纹理 */
.page-after-sales-section .noise-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
    pointer-events: none; z-index: 999; opacity: 0.6;
}

.page-after-sales-section * { margin: 0; padding: 0; box-sizing: border-box; }

/* 通用 SVG 样式 */
.page-after-sales-section svg {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* SVG 尺寸重置 */
.page-after-sales-section svg[width]:not(.card-icon-box svg):not(.action-link svg):not(.btn-action svg):not(.icon-plus svg),
.page-after-sales-section svg[height]:not(.card-icon-box svg):not(.action-link svg):not(.btn-action svg):not(.icon-plus svg) {
    width: auto;
    height: auto;
}

.page-after-sales-section {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.page-after-sales-section .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* 通用样式已移至 assets/styles.css.liquid */

/* 通用动画 - 使用 AOS，无需自定义 CSS */

/* --- 1. HERO BANNER (信任感和数据) --- */
.page-after-sales-section .after-sales-hero {
    padding: 140px 0 100px 0;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9fa 100%);
    border-bottom: 1px solid #eee;
}

.page-after-sales-section .trust-stat-grid {
    display: flex; justify-content: center; gap: 60px;
    margin-top: 50px;
}
.page-after-sales-section .stat-item {
    display: flex; flex-direction: column; align-items: center;
}
.page-after-sales-section .stat-num { font-size: 52px; font-weight: 700; color: var(--accent); letter-spacing: -2px; }
.page-after-sales-section .stat-label { font-size: 15px; color: var(--text-sub); font-weight: 500; }

/* --- 2. CORE SERVICES (三核服务) --- */
.page-after-sales-section .core-services { padding: 120px 0; }

.page-after-sales-section .service-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px;
}

/* 核心服务卡片 */
.page-after-sales-section .service-card {
    background: var(--bg-card); padding: 36px; border-radius: 24px;
    border: 1px solid var(--border-light);
    display: flex; flex-direction: column; justify-content: space-between; height: 320px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.5s var(--ease-elastic);
}

.page-after-sales-section .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.page-after-sales-section .service-card:hover::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent);
    transform: skewX(-25deg); transition: 1s;
    opacity: 1; pointer-events: none;
}

.page-after-sales-section .card-icon-box {
    width: 60px; height: 60px; background: #f5f5f7; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--text-main); margin-bottom: 24px;
    transition: 0.4s;
}

/* 服务卡片图标 SVG 样式 */
.page-after-sales-section .card-icon-box svg {
    width: 30px !important;
    height: 30px !important;
    color: var(--text-main);
    fill: var(--text-main);
    flex-shrink: 0;
    transition: all 0.4s ease;
    display: block;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-after-sales-section .card-icon-box svg path {
    fill: currentColor !important;
    transition: fill 0.4s ease;
}

/* Hover 状态：图标变白色 */
.page-after-sales-section .service-card:hover .card-icon-box { 
    background: var(--accent); 
    color: white; 
    transform: scale(1.1); 
}

.page-after-sales-section .service-card:hover .card-icon-box svg {
    color: white !important;
    fill: white !important;
}

.page-after-sales-section .service-card:hover .card-icon-box svg path {
    fill: white !important;
}

.page-after-sales-section .service-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.page-after-sales-section .service-card p { font-size: 15px; color: var(--text-sub); line-height: 1.6; }

.page-after-sales-section .action-link { 
    font-weight: 600; 
    color: var(--accent); 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-after-sales-section .action-link:hover {
    color: var(--accent-dark, #005bb5);
    text-decoration: none;
}

/* 操作链接中的箭头 SVG 样式 */
.page-after-sales-section .action-link svg {
    width: 18px !important;
    height: 18px !important;
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.3s ease, fill 0.3s ease;
    display: block;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-after-sales-section .action-link svg path {
    fill: currentColor !important;
    transition: fill 0.3s ease;
}

/* Hover 时箭头向右移动 */
.page-after-sales-section .action-link:hover svg {
    transform: translateX(3px);
}

/* --- 3. REPAIR PROCESS (流程可视化) --- */
.page-after-sales-section .process-section { padding: 100px 0; background: #fff; }

.page-after-sales-section .process-flow {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-top: 60px; position: relative;
}

/* 流程连接线 */
.page-after-sales-section .process-flow::before {
    content: ''; position: absolute; top: 30px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(to right, #ddd, #ddd 10px, transparent 10px, transparent 20px);
    z-index: 1;
}

.page-after-sales-section .step-item {
    width: 20%; text-align: center; position: relative; z-index: 2;
}

.page-after-sales-section .step-number {
    width: 60px; height: 60px; background: var(--accent); color: white;
    border-radius: 50%; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--accent); transition: 0.4s;
}
.page-after-sales-section .step-item:hover .step-number { transform: scale(1.1); box-shadow: 0 0 0 4px var(--accent); }

.page-after-sales-section .step-item h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.page-after-sales-section .step-item p { font-size: 14px; color: var(--text-sub); }

/* --- 4. REPAIR/SPARE PARTS CTA (毛玻璃卡片) --- */
.page-after-sales-section .rma-cta-section { padding: 120px 0; background: url('https://images.unsplash.com/photo-1587391807248-23214736fdf5?q=80&w=2070&auto=format&fit=crop') center/cover fixed; }
.page-after-sales-section .glass-cta {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px); border-radius: 32px; padding: 60px;
    text-align: center; max-width: 800px; margin: 0 auto;
    box-shadow: 0 40px 100px rgba(0,0,0,0.1);
}

.page-after-sales-section .cta-buttons { display: flex; justify-content: center; gap: 24px; margin-top: 30px; }
.page-after-sales-section .btn-action {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 36px; border-radius: 50px; font-weight: 600;
    font-size: 16px; cursor: pointer; transition: 0.4s var(--ease-elastic);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-decoration: none;
}

.page-after-sales-section .btn-action:hover { 
    transform: translateY(-3px); 
    text-decoration: none;
}

/* CTA 按钮中的 SVG 图标样式 */
.page-after-sales-section .btn-action svg {
    width: 20px !important;
    height: 20px !important;
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.4s var(--ease-elastic), fill 0.4s ease;
    display: block;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-after-sales-section .btn-action svg path {
    fill: currentColor !important;
    transition: fill 0.4s ease;
}

/* Hover 时图标轻微放大 */
.page-after-sales-section .btn-action:hover svg {
    transform: scale(1.1);
}

.page-after-sales-section .btn-rma { background: var(--accent); color: white; border: none; }
.page-after-sales-section .btn-rma:hover { box-shadow: 0 10px 25px rgba(0, 113, 227, 0.4); }

.page-after-sales-section .btn-parts { background: #1d1d1f; color: white; border: none; }
.page-after-sales-section .btn-parts:hover { background: #333; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); }

/* --- 5. FAQ (手风琴) --- */
.page-after-sales-section .faq-wrapper { max-width: 900px; margin: 0 auto 120px; padding: 0 32px; }

.page-after-sales-section .faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.page-after-sales-section .faq-trigger {
    width: 100%; padding: 28px 0; background: none; border: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 18px; font-weight: 500; color: var(--text-main); cursor: pointer;
    text-align: left; transition: 0.3s;
}
.page-after-sales-section .faq-trigger:hover { color: var(--accent); }
.page-after-sales-section .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.page-after-sales-section .faq-content p { padding-bottom: 28px; font-size: 16px; line-height: 1.7; color: var(--text-sub); }

/* FAQ 展开/收起图标 SVG 样式 */
.page-after-sales-section svg.icon-plus {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    color: #ccc;
    fill: #ccc;
    flex-shrink: 0;
    transition: transform 0.3s ease, fill 0.3s ease;
    display: block;
    box-sizing: border-box;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-after-sales-section svg.icon-plus path {
    fill: #ccc !important;
    transition: fill 0.3s ease;
}

/* FAQ 展开时 SVG 图标样式 - 变成 X 号（旋转45度） */
.page-after-sales-section .faq-trigger.is-open svg.icon-plus {
    transform: rotate(45deg);
    color: var(--text-main);
    fill: var(--text-main);
}

.page-after-sales-section .faq-trigger.is-open svg.icon-plus path {
    fill: var(--text-main) !important;
}

/* 响应式优化 */
@media (max-width: 992px) {
    .page-after-sales-section .service-grid { grid-template-columns: 1fr; }
    .page-after-sales-section .process-flow { flex-direction: column; }
    .page-after-sales-section .process-flow::before { display: none; }
    
    .page-after-sales-section .step-item { 
        width: 100%; margin-bottom: 30px; 
        padding-top: 0; padding-left: 50px;
        border-left: 2px dashed #ddd; 
        text-align: left;
    }
    .page-after-sales-section .step-number { 
        margin: 0; position: absolute; top: 0; left: -30px;
        transform: none;
    }
    .page-after-sales-section .step-item:hover .step-number { transform: scale(1.05); }
    .page-after-sales-section .step-item h4, .page-after-sales-section .step-item p { text-align: left; }
}
@media (max-width: 576px) {
     .page-after-sales-section .cta-buttons { flex-direction: column; }
     .page-after-sales-section .trust-stat-grid { flex-wrap: wrap; gap: 30px; }
     .page-after-sales-section .stat-num { font-size: 40px; }
     /* .h2-title 响应式样式已移至 assets/styles.css.liquid */
}
/* Remixicon Icons */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* --- 核心 UI Tokens (精细润色版) --- */
.page-contact-section {
    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --bg-hover: #e6e6e8;
    --text-main: #141416;
    --text-sub: #7a7a82;
    --accent: #0071e3; 
    --accent-dark: #005bb5;
    --border-light: rgba(0,0,0,0.06);
    
    --shadow-sm: 0 4px 10px rgba(0,0,0,0.02);
    --shadow-lg: 0 15px 35px rgba(0,0,0,0.05);
    
    --ease-elastic: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 噪点纹理 */
.page-contact-section .noise-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
    pointer-events: none; z-index: 999; opacity: 0.6;
}

.page-contact-section * { margin: 0; padding: 0; box-sizing: border-box; }

.page-contact-section {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

.page-contact-section .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* 通用动画 */
.page-contact-section .scroll-reveal {
    opacity: 0; transform: translateY(20px);
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- 1. HERO & Form Layout --- */
.page-contact-section .contact-hero { padding: 80px 0 60px 0; text-align: center; }

.page-contact-section .form-info-layout {
    display: grid; grid-template-columns: 2fr 1fr;
    gap: 40px; margin-bottom: 100px;
}

/* --- 2. Contact Form (交互核心) --- */
.page-contact-section .contact-form-card {
    background: var(--bg-card); padding: 40px; border-radius: 24px;
    border: 1px solid var(--border-light); box-shadow: var(--shadow-lg);
}
.page-contact-section .form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-bottom: 20px;
}
.page-contact-section .form-group { margin-bottom: 18px; }
.page-contact-section label { 
    display: block; font-size: 14px; font-weight: 500; 
    color: var(--text-main); margin-bottom: 8px; 
}

/* 输入框焦点精修 */
.page-contact-section .form-input, .page-contact-section textarea, .page-contact-section select {
    width: 100%; 
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.15); 
    font-size: 16px;
    transition: all 0.3s ease-out;
    background: var(--bg-card);
}
.page-contact-section .form-input:focus, .page-contact-section textarea:focus, .page-contact-section select:focus {
    outline: none; 
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.25); 
}
.page-contact-section textarea { resize: vertical; min-height: 150px; }

/* 按钮精修 */
.page-contact-section .submit-btn {
    width: 100%; padding: 16px 30px; 
    background: var(--accent); 
    color: white; border: none; 
    border-radius: 100px;
    font-size: 17px; font-weight: 600; 
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.4s var(--ease-elastic);
    box-shadow: 0 5px 20px rgba(0, 113, 227, 0.2);
}
.page-contact-section .submit-btn:hover { 
    background: var(--accent-dark); 
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 113, 227, 0.4); 
}

/* --- 3. Departmental Contacts (信息栏) --- */
.page-contact-section .info-card {
    background: var(--bg-card); padding: 30px; border-radius: 20px;
    border: 1px solid var(--border-light); margin-bottom: 20px;
    display: flex; gap: 15px; align-items: flex-start;
    transition: all 0.4s var(--ease-smooth);
}
.page-contact-section .info-card:hover { 
    transform: translateX(5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    background: var(--bg-hover);
}

.page-contact-section .info-icon { font-size: 30px; color: var(--accent-dark); }
/* SVG 图标样式 - 替换 <i> 标签后使用 */
.page-contact-section .info-icon svg {
    width: 30px;
    height: 30px;
    color: var(--accent-dark);
    fill: currentColor;
    flex-shrink: 0;
}
.page-contact-section .info-details h4 { font-size: 19px; font-weight: 600; margin-bottom: 5px; }
.page-contact-section .info-details p, .page-contact-section .info-details a { font-size: 15px; color: var(--text-sub); text-decoration: none; }
.page-contact-section .info-details a:hover { color: var(--accent); text-decoration: underline; }

/* --- 4. Headquarters & Map --- */
.page-contact-section .hq-map-section { margin-bottom: 100px; }
.page-contact-section .hq-map-layout {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px;
    align-items: stretch;
}
.page-contact-section .hq-info-card {
    background: var(--bg-card); padding: 40px; border-radius: 24px;
    border: 1px solid var(--border-light); 
}
.page-contact-section .hq-info-card h3 { font-size: 26px; font-weight: 700; margin-bottom: 25px; }
.page-contact-section .hq-detail { margin-bottom: 20px; font-size: 16px; line-height: 1.8; display: flex; align-items: flex-start; }
.page-contact-section .hq-detail i { 
    color: var(--accent-dark); 
    margin-right: 15px; 
    font-size: 20px; 
    width: 20px; 
    flex-shrink: 0;
    padding-top: 2px;
}
/* SVG 图标样式 - 替换 <i> 标签后使用 */
.page-contact-section .hq-detail svg {
    color: var(--accent-dark);
    margin-right: 15px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    padding-top: 2px;
    fill: currentColor;
}

.page-contact-section .map-placeholder {
    height: 450px; background: #e0e0e3; border-radius: 24px;
    overflow: hidden; position: relative;
    box-shadow: var(--shadow-sm);
}
.page-contact-section .map-placeholder iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 24px;
}

/* --- 5. Global Offices (Tabbed Navigation) --- */
.page-contact-section .global-office-section { margin-bottom: 100px; }
.page-contact-section .tabs { 
    display: flex; justify-content: center; margin-bottom: 40px; 
    border-bottom: 1px solid var(--border-light);
}
.page-contact-section .tab-button {
    padding: 15px 30px; border: none; background: none;
    font-size: 16px; font-weight: 500; color: var(--text-sub);
    cursor: pointer; transition: 0.3s;
    position: relative;
}
.page-contact-section .tab-button:hover:not(.active) {
     color: var(--text-main);
     background: var(--bg-hover);
}
.page-contact-section .tab-button.active {
    color: var(--accent-dark);
    font-weight: 600;
}
.page-contact-section .tab-button.active::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 4px;
    background: var(--accent-dark); 
    border-radius: 2px 2px 0 0;
}

.page-contact-section .office-content-grid {
    display: none;
    grid-template-columns: repeat(3, 1fr); gap: 30px;
    animation: fadeIn 0.5s var(--ease-smooth);
}
.page-contact-section .office-content-grid.active { display: grid; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-contact-section .office-card {
    background: #fff; border: 1px solid #eaeaea; border-radius: 16px;
    padding: 32px; transition: all 0.3s var(--ease-smooth);
    position: relative;
}
.page-contact-section .office-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 16px;
    box-shadow: 0 0 0 2px var(--accent); opacity: 0; transition: 0.3s; pointer-events: none;
}
.page-contact-section .office-card:hover {
    transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent;
}
.page-contact-section .office-card:hover::before { opacity: 1; }

.page-contact-section .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-contact-section .office-flag { font-size: 32px; }
.page-contact-section .country-name { font-size: 18px; font-weight: 700; }

.page-contact-section .contact-row {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
    font-size: 14px; color: #555;
}
.page-contact-section .contact-row i { color: var(--accent); margin-top: 3px; }
/* SVG 图标样式已移至 assets/styles.css.liquid */

.page-contact-section .office-card h4 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.page-contact-section .office-card address { font-style: normal; font-size: 15px; color: var(--text-sub); line-height: 1.6; }

/* --- 6. Company Gallery (形象照片) --- */
.page-contact-section .gallery-section { padding-bottom: 100px; }
.page-contact-section .photo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 40px;
}
.page-contact-section .photo-item {
    aspect-ratio: 4/3; 
    background: #e0e0e3; border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-elastic);
}
.page-contact-section .photo-item:hover { 
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.page-contact-section .photo-item img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(10%); 
    transition: filter 0.4s;
}
.page-contact-section .photo-item:hover img { filter: grayscale(0%); }

/* 响应式 */
@media (max-width: 992px) {
    .page-contact-section .form-info-layout { grid-template-columns: 1fr; }
    .page-contact-section .hq-map-layout { grid-template-columns: 1fr; }
    .page-contact-section .office-content-grid { grid-template-columns: repeat(2, 1fr); }
    .page-contact-section .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .page-contact-section .map-placeholder { height: 350px; }
    .page-contact-section .hq-info-card { padding: 30px; }
}
@media (max-width: 576px) {
    /* .h2-title 响应式样式已移至 assets/styles.css.liquid */
    .page-contact-section .form-grid { grid-template-columns: 1fr; }
    .page-contact-section .office-content-grid { grid-template-columns: 1fr; }
    .page-contact-section .photo-grid { grid-template-columns: 1fr; }
    .page-contact-section .tabs { flex-wrap: wrap; }
    .page-contact-section .tab-button { width: 48%; margin-bottom: 10px; padding: 12px 20px; }
}
/* Remixicon Icons */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* --- 核心 UI Tokens --- */
.page-download-section {
    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --accent: #0071e3; 
    --border-light: rgba(0,0,0,0.08);
    
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.02);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.06);
    
    --ease-elastic: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 噪点纹理 */
.page-download-section .noise-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
    pointer-events: none; z-index: 999; opacity: 0.6;
}

.page-download-section * { margin: 0; padding: 0; box-sizing: border-box; }

/* 通用 SVG 样式 */
.page-download-section svg {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* SVG 尺寸重置 */
.page-download-section svg[width]:not(.search-icon svg):not(.file-icon-box svg):not(.search-result-icon svg),
.page-download-section svg[height]:not(.search-icon svg):not(.file-icon-box svg):not(.search-result-icon svg) {
    width: auto;
    height: auto;
}

/* 高亮标记样式 */
.page-download-section mark {
    background: rgba(0, 113, 227, 0.15);
    color: var(--accent);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.page-download-section {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.page-download-section .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* 通用动画 */
/* 通用动画 - 使用 AOS，无需自定义 CSS */

/* --- 1. HERO & Search --- */
.page-download-section .download-hero {
    padding: 80px 0 60px 0; text-align: center;
}
/* 通用样式已移至 assets/styles.css.liquid */
.page-download-section .search-container {
    width: 100%; 
    max-width: 700px; 
    position: relative !important; 
    margin: 30px auto 0;
}

.page-download-section .search-input {
    width: 100% !important; 
    padding: 22px 24px 22px 64px !important;
    font-size: 17px !important; 
    border: 1px solid rgba(0,0,0,0.08) !important; 
    border-radius: 20px !important;
    background: white !important; 
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.4s var(--ease-elastic) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
}

/* 确保边框在所有状态下都显示 */
.page-download-section .search-input:not(:focus) {
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* 搜索图标 - 完全复制 support 模板 */
.page-download-section .search-icon {
    position: absolute !important; 
    left: 24px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    font-size: 22px; 
    color: #999; 
    transition: 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 100 !important;
    pointer-events: none;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* 搜索图标 SVG 样式 - SVG 使用 stroke，不是 fill */
.page-download-section .search-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #999;
    flex-shrink: 0;
    transition: 0.3s;
    display: block !important;
    max-width: 22px !important;
    max-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 覆盖 SVG 内部 path 的内联 fill 和 stroke 属性 - SVG 使用 stroke */
.page-download-section .search-icon svg path {
    fill: none !important;
    stroke: #999 !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 确保 SVG 本身可见 - 使用最高优先级，合并所有样式 */
.page-download-section .search-icon svg {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 确保搜索图标容器始终可见 */
.page-download-section .search-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* 搜索激活态 */
.page-download-section .search-input:focus {
    outline: none; transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12); border-color: transparent;
}

/* 确保聚焦时搜索图标也显示 */
.page-download-section .search-container:focus-within .search-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 11 !important;
}

.page-download-section .search-container:focus-within .search-icon svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.is-searching .page-download-section .search-input { z-index: 102; }

body.is-searching .page-download-section .search-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 103 !important;
}

/* 搜索建议框样式 - 完全复制 support 模板 */
.page-download-section .search-suggestions {
    margin-top: 8px; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(0,0,0,0.08) !important; 
    background: white !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 999; /* 降低z-index，确保不会挡住sort-dropdown的下拉框 */
}

.page-download-section .search-suggestions.has-results {
    display: block;
}

.page-download-section .search-suggestions:not(.has-results) {
    display: none !important;
}

.page-download-section .search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: 0.2s;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.page-download-section .search-result-item:hover {
    background: #f5f5f7 !important; 
}

.page-download-section .search-result-item:last-child {
    border-bottom: none !important;
}

.page-download-section .search-result-content {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.page-download-section .search-result-content:hover {
    color: var(--accent) !important;
}

/* 搜索结果中的下载按钮 - 使用和正常列表相同的样式 */
.page-download-section .search-result-download {
    flex-shrink: 0;
    padding: 10px 24px;
    background: #edeff2;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: 0.4s var(--ease-elastic);
    white-space: nowrap;
    display: inline-block;
}

.page-download-section .search-result-download:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.page-download-section .search-result-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-sub);
}

.page-download-section .search-result-icon svg {
    width: 24px;
    height: 24px;
    color: currentColor;
    fill: currentColor;
}

.page-download-section .search-result-icon svg path {
    fill: currentColor !important;
}

.page-download-section .search-result-content {
    flex: 1;
    min-width: 0;
}

.page-download-section .search-result-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    margin-bottom: 4px;
}

.page-download-section .search-result-meta {
    font-size: 13px;
    color: var(--text-sub);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- 2. Main Layout (Filter + List) --- */
.page-download-section .download-layout {
    display: grid; 
    grid-template-columns: 250px 1fr;
    gap: 50px;
    margin-bottom: 120px;
}

/* --- Sidebar Filter (左侧筛选) --- */
.page-download-section .filter-sidebar {
    padding-right: 20px; 
}
.page-download-section .filter-group {
    margin-bottom: 35px;
}
.page-download-section .filter-title {
    font-size: 17px;
    font-weight: 600; margin-bottom: 15px; color: var(--text-main);
    padding-bottom: 8px; border-bottom: 1px solid #e0e0e0;
}

.page-download-section .filter-button {
    display: block; width: 100%; padding: 12px 15px;
    margin-bottom: 6px;
    background: none; border: none; border-radius: 8px;
    text-align: left; font-size: 15px; color: var(--text-sub);
    cursor: pointer; transition: 0.2s;
}
.page-download-section .filter-button:hover {
    background: #ebebeb; color: var(--text-main);
}
.page-download-section .filter-button.active {
    background: var(--accent); color: white;
    font-weight: 600;
}
.page-download-section .filter-button.active:hover {
    background: #005bb5;
}

/* --- Download List (右侧列表) --- */
.page-download-section .download-list {
    padding-top: 10px;
}
.page-download-section .list-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 20px; border-bottom: 1px solid var(--border-light);
    margin-bottom: 20px;
}
.page-download-section .sort-dropdown {
    padding: 8px 15px; border-radius: 8px; border: 1px solid #ccc;
    background: var(--bg-card); color: var(--text-sub);
    position: relative;
    z-index: 1; /* 确保下拉框在搜索建议框之上 */
}

.page-download-section .dl-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; 
    border-bottom: 1px solid #e9e9e9;
    transition: all 0.3s var(--ease-smooth);
    opacity: 0; transform: translateY(20px); 
}

.page-download-section .dl-item:hover { 
    background: #f9f9fa; 
    border-radius: 8px; 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.page-download-section .dl-item:last-child { border-bottom: none; }

.page-download-section .file-info-main { display: flex; align-items: center; gap: 20px; }
.page-download-section .file-icon-box {
    font-size: 30px; 
    width: 40px; 
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 文件图标 SVG 样式 */
.page-download-section .file-icon-box svg {
    width: 30px !important;
    height: 30px !important;
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
    display: block;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-download-section .file-icon-box svg path {
    fill: currentColor !important;
}
.page-download-section .file-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.page-download-section .file-meta { font-size: 13px; color: var(--text-sub); display: flex; gap: 15px; }

.page-download-section .dl-btn {
    padding: 10px 24px; background: #edeff2; border-radius: 100px;
    font-size: 14px; font-weight: 600; color: var(--text-main); border: none;
    cursor: pointer; 
    transition: 0.4s var(--ease-elastic);
}
.page-download-section .dl-btn:hover { background: var(--accent); color: white; transform: scale(1.05); }

/* --- 响应式 --- */
@media (max-width: 992px) {
    .page-download-section .download-layout { 
        grid-template-columns: 1fr; 
        gap: 50px;
    }
    .page-download-section .filter-sidebar {
        border-right: none;
        padding-right: 0;
    }
    .page-download-section .list-header { margin-top: 30px; }
}
@media (max-width: 576px) {
    /* .h2-title 响应式样式已移至 assets/styles.css.liquid */
    .page-download-section .dl-item { flex-direction: column; align-items: flex-start; gap: 15px; }
    .page-download-section .file-info-main { margin-bottom: 10px; }
    .page-download-section .dl-btn { width: 100%; text-align: center; }
    .page-download-section .file-meta { flex-wrap: wrap; }
}
/* Remixicon Icons */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* --- 核心 UI Tokens --- */
.page-faq-section {
    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --accent: #0071e3; 
    --border-light: rgba(0,0,0,0.08);
    
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.02);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.06);
    
    --ease-elastic: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 噪点纹理 */
.page-faq-section .noise-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
    pointer-events: none; z-index: 999; opacity: 0.6;
}

.page-faq-section * { margin: 0; padding: 0; box-sizing: border-box; }

/* 通用 SVG 样式 */
.page-faq-section svg {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* 高亮标记样式 */
.page-faq-section mark {
    background: rgba(0, 113, 227, 0.15);
    color: var(--accent);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.page-faq-section {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.page-faq-section .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* 通用动画 - 使用 AOS，无需自定义 CSS */

/* --- 1. HERO & Search --- */
.page-faq-section .faq-hero {
    padding: 80px 0 60px 0; text-align: center;
}
/* 通用样式已移至 assets/styles.css.liquid */
/* 搜索容器 - 使用 flexbox 布局 */
.page-faq-section .search-container {
    width: 100%; 
    max-width: 700px; 
    position: relative !important; 
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
}

/* 搜索输入框包装器 - 用于定位搜索图标 */
.page-faq-section .search-input-wrapper {
    position: relative;
    order: 1;
    width: 100%;
}

.page-faq-section .search-input {
    width: 100% !important; 
    padding: 22px 24px 22px 64px !important;
    font-size: 17px !important; 
    border: 1px solid rgba(0,0,0,0.08) !important; 
    border-radius: 20px !important;
    background: white !important; 
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.4s var(--ease-elastic) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    order: 1; /* 确保搜索输入框在第一位 */
}

/* 确保边框在所有状态下都显示 */
.page-faq-section .search-input:not(:focus) {
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* 搜索图标 - 绝对定位在输入框包装器内，固定在输入框左侧 */
.page-faq-section .search-icon {
    position: absolute !important; 
    left: 24px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    font-size: 22px; 
    color: #999; 
    transition: 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 100 !important;
    pointer-events: none;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* 搜索图标 SVG 样式 - SVG 使用 stroke，不是 fill */
.page-faq-section .search-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #999;
    flex-shrink: 0;
    transition: 0.3s;
    display: block !important;
    max-width: 22px !important;
    max-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 覆盖 SVG 内部 path 的内联 fill 和 stroke 属性 - SVG 使用 stroke */
.page-faq-section .search-icon svg path {
    fill: none !important;
    stroke: #999 !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 确保 SVG 本身可见 - 使用最高优先级，合并所有样式 */
.page-faq-section .search-icon svg {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 确保搜索图标容器始终可见 */
.page-faq-section .search-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* 搜索激活态 */
.page-faq-section .search-input:focus {
    outline: none; transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12); border-color: transparent;
}

/* 确保聚焦时搜索图标也显示 */
.page-faq-section .search-container:focus-within .search-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 11 !important;
}

.page-faq-section .search-container:focus-within .search-icon svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.is-searching .page-faq-section .search-input { z-index: 102; }

body.is-searching .page-faq-section .search-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 103 !important;
}

/* 搜索建议框样式 - 使用正常文档流，推动下方内容 */
.page-faq-section .search-suggestions {
    margin-top: 8px; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(0,0,0,0.08) !important; 
    background: white !important;
    position: relative;
    width: 100%;
    order: 2; /* 确保在搜索输入框下方 */
}

.page-faq-section .search-suggestions.has-results {
    display: block;
    min-height: 0; /* 允许内容决定高度 */
}

.page-faq-section .search-suggestions:not(.has-results) {
    display: none !important;
    margin-top: 0; /* 隐藏时不占用空间 */
}

.page-faq-section .search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
}

.page-faq-section .search-result-item:hover {
    background: #f5f5f7 !important; 
}

.page-faq-section .search-result-item:last-child {
    border-bottom: none !important;
}

.page-faq-section .search-result-item:hover .search-result-question {
    color: var(--accent) !important;
}

.page-faq-section .search-result-question {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    margin-bottom: 6px;
}

.page-faq-section .search-result-answer {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 2. Anchor Navigation (吸顶导航) --- */
.page-faq-section .faq-nav-wrapper {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    padding: 15px 0;
    transition: all 0.3s ease-in-out;
}
.page-faq-section .faq-nav {
    display: flex; justify-content: center; gap: 20px;
}
.page-faq-section .nav-link {
    padding: 8px 20px; border-radius: 50px;
    text-decoration: none; color: var(--text-sub);
    font-size: 15px; font-weight: 500;
    transition: 0.3s;
}
.page-faq-section .nav-link:hover {
    color: var(--text-main);
    background: #e0e0e3;
}
.page-faq-section .nav-link.active {
    background: var(--accent);
    color: white;
}

/* --- 3. FAQ Content (核心手风琴区域) --- */
.page-faq-section .faq-content-wrapper {
    max-width: 900px; 
    margin: 60px auto 120px; 
    padding: 0 32px;
}
.page-faq-section .faq-section {
    margin-bottom: 60px;
    padding-top: 40px;
}
.page-faq-section .section-title {
    font-size: 32px; font-weight: 700; margin-bottom: 30px;
    letter-spacing: -0.01em;
}

/* 手风琴样式 */
.page-faq-section .faq-item { 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    padding-left: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-faq-section .faq-trigger {
    width: 100%; padding: 28px 0; background: none; border: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 18px; font-weight: 500; color: var(--text-main); cursor: pointer;
    text-align: left; transition: 0.3s;
    padding-left: 0;
}
.page-faq-section .faq-trigger:hover { color: var(--accent); }
.page-faq-section .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.page-faq-section .faq-content p { padding-bottom: 28px; font-size: 16px; line-height: 1.7; color: var(--text-sub); }
/* FAQ 展开/收起图标 SVG 样式 */
.page-faq-section svg.icon-plus {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    color: #ccc;
    fill: #ccc;
    flex-shrink: 0;
    transition: transform 0.3s ease, fill 0.3s ease;
    display: block;
    box-sizing: border-box;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-faq-section svg.icon-plus path {
    fill: #ccc !important;
    transition: fill 0.3s ease;
}

/* FAQ 展开时 SVG 图标样式 - 变成 X 号（旋转45度） */
.page-faq-section .faq-trigger.is-open svg.icon-plus {
    transform: rotate(45deg);
    color: var(--text-main);
    fill: var(--text-main);
}

.page-faq-section .faq-trigger.is-open svg.icon-plus path {
    fill: var(--text-main) !important;
}

/* 响应式 */
@media (max-width: 768px) {
    .page-faq-section .faq-nav {
        justify-content: flex-start;
        overflow-x: scroll;
        padding: 0 10px;
        white-space: nowrap;
    }
    .page-faq-section .faq-nav::-webkit-scrollbar {
        display: none;
    }
    .page-faq-section .faq-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}
@media (max-width: 576px) {
    /* .h2-title 响应式样式已移至 assets/styles.css.liquid */
    .page-faq-section .section-title { font-size: 28px; }
    .page-faq-section .faq-trigger { font-size: 16px; padding: 20px 0; }
}
/* Remixicon Icons */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* --- DESIGN TOKENS --- */
.page-support-section {
    --bg-body: #f9fafb;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-card: #ffffff;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --accent: #0071e3;
    --border-light: rgba(0,0,0,0.05);
    
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.02);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.06);
    --shadow-glow: 0 0 0 4px rgba(0, 113, 227, 0.15);
    
    --ease-elastic: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 噪点纹理 - 已禁用，避免性能问题 */
.page-support-section .noise-layer {
    display: none !important;
}

/* 聚焦模式遮罩 */
.page-support-section .focus-mask {
    position: fixed; inset: 0; background: rgba(255,255,255,0.8);
    backdrop-filter: blur(20px); z-index: 100;
    opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-smooth);
    will-change: opacity;
    overflow: hidden;
}
body.is-searching .page-support-section .focus-mask { 
    opacity: 1; 
    pointer-events: auto; 
}
/* 确保搜索时 body 可以滚动 */
body.is-searching {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    height: auto !important;
}

.page-support-section * { margin: 0; padding: 0; box-sizing: border-box; }

/* 通用 SVG 样式 */
.page-support-section svg {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* 搜索图标 SVG */
.page-support-section .search-icon svg {
    max-width: 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    vertical-align: middle;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 移除内联 width/height 属性的影响 - 但不覆盖特定图标的大小 */
.page-support-section svg[width]:not(.hover-arrow svg):not(.icon-plus svg):not(.search-icon svg),
.page-support-section svg[height]:not(.hover-arrow svg):not(.icon-plus svg):not(.search-icon svg) {
    width: auto;
    height: auto;
}

.page-support-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    position: relative;
    width: 100%;
}
/* 确保 body 和 html 可以正常滚动 */
body:has(.page-support-section),
html:has(.page-support-section) {
    height: auto !important;
    max-height: none !important;
}

.page-support-section .container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 32px; 
    position: relative; 
    z-index: 1; 
    width: 100%;
    box-sizing: border-box;
}

/* --- 1. HERO SEARCH (交互核心) --- */
.page-support-section .hero-section {
    height: 55vh; min-height: 400px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; position: relative; z-index: 101;
}

.page-support-section .hero-title {
    font-size: clamp(36px, 4vw, 56px); font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: 32px; color: var(--text-main);
    transform: translateY(0); transition: 0.5s var(--ease-elastic);
}

/* 搜索框容器 */
.page-support-section .search-container {
    width: 100%; max-width: 640px; position: relative;
}

/* 确保 input-group 也是相对定位，作为搜索图标的定位上下文 */
.page-support-section .search-container.input-group {
    position: relative !important;
}

.page-support-section .form-search {
    width: 100%; max-width: 640px; margin: 0 auto;
}

.page-support-section .form-search .input-group {
    position: relative;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* 覆盖主题默认的搜索框样式 - 但保留我们需要的样式 */
.page-support-section .form-search .input-group {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.page-support-section .search-input,
.page-support-section .searchbox {
    width: 100% !important; 
    padding: 22px 24px 22px 64px !important;
    font-size: 17px !important; 
    border: 1px solid rgba(0,0,0,0.08) !important; 
    border-radius: 20px !important;
    background: white !important; 
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.4s var(--ease-elastic) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
}

/* 确保边框在所有状态下都显示 */
.page-support-section .searchbox:not(:focus),
.page-support-section .search-input:not(:focus) {
    border: 1px solid rgba(0,0,0,0.08) !important;
}

.page-support-section .search-icon {
    position: absolute !important; 
    left: 24px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    font-size: 22px; 
    color: #999; 
    transition: 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 100 !important;
    pointer-events: none;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* 搜索图标 SVG 样式 - SVG 使用 stroke，不是 fill */
.page-support-section .search-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #999;
    flex-shrink: 0;
    transition: 0.3s;
    display: block !important;
    max-width: 22px !important;
    max-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 覆盖 SVG 内部 path 的内联 fill 和 stroke 属性 - SVG 使用 stroke */
.page-support-section .search-icon svg path {
    fill: none !important;
    stroke: #999 !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 确保 SVG 本身可见 - 使用最高优先级，合并所有样式 */
.page-support-section .search-icon svg {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 确保搜索图标容器始终可见 */
.page-support-section .search-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* 搜索激活态 */
.page-support-section .search-input:focus,
.page-support-section .searchbox:focus {
    outline: none; transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12); border-color: transparent;
}

/* 确保聚焦时搜索图标也显示 - 搜索图标在输入框之前，使用 :focus-within */
.page-support-section .form-search:focus-within .search-icon,
.page-support-section .form-search.active .search-icon,
.page-support-section .input-group:focus-within .search-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 11 !important;
}

.page-support-section .form-search:focus-within .search-icon svg,
.page-support-section .form-search.active .search-icon svg,
.page-support-section .input-group:focus-within .search-icon svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.is-searching .page-support-section .search-input,
body.is-searching .page-support-section .searchbox { z-index: 102; }

body.is-searching .page-support-section .search-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 103 !important;
}

/* 隐藏主题默认的搜索按钮 */
.page-support-section .form-search .input-group > .btn {
    display: none !important;
}

/* 搜索建议框样式 - 使用主题的 active 类控制显示 */
.page-support-section .form-search .search-suggestions {
    margin-top: 8px; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(0,0,0,0.08) !important; 
    background: white !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* 主题默认会在 .active 时显示，我们确保样式正确 */
.page-support-section .form-search .predictive-search {
    padding: 12px;
    min-height: 0;
}

/* 如果预测搜索为空，隐藏整个建议框 */
.page-support-section .form-search .predictive-search:empty {
    display: none;
}

/* 当预测搜索为空且没有列表项时，隐藏整个建议框容器 */
.page-support-section .form-search.active .search-suggestions:has(.predictive-search:empty:not(:has(.list-group-item))) {
    display: none !important;
}

.page-support-section .form-search .list-group-item {
    border: none !important; 
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 12px 16px; 
    transition: 0.2s;
    background: transparent;
}

.page-support-section .form-search .list-group-item:hover {
    background: #f5f5f7 !important; 
    color: var(--accent) !important;
}

.page-support-section .form-search .list-group-item:last-child {
    border-bottom: none !important;
}

.page-support-section .hero-tags {
    margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    opacity: 1; transition: 0.3s;
}
.page-support-section .tag-pill {
    font-size: 13px; padding: 6px 14px; background: rgba(0,0,0,0.04);
    border-radius: 100px; color: var(--text-sub); cursor: pointer; transition: 0.2s;
    text-decoration: none;
    display: inline-block;
}
.page-support-section .tag-pill:hover { 
    background: #e8e8ed; 
    color: var(--text-main); 
    text-decoration: none;
}

/* 搜索时隐藏标题和标签 */
body.is-searching .page-support-section .hero-title, 
body.is-searching .page-support-section .hero-tags { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* --- 2. BENTO GRID (功能入口) --- */
.page-support-section .nav-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-bottom: 100px;
}

.page-support-section .nav-card {
    background: var(--bg-card); padding: 36px; border-radius: 24px;
    border: 1px solid var(--border-light);
    display: flex; flex-direction: column; justify-content: space-between; height: 260px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.5s var(--ease-elastic);
}

.page-support-section .nav-card::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-25deg); transition: 0.5s; opacity: 0; pointer-events: none;
}

.page-support-section .nav-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.page-support-section .nav-card:hover::after { left: 150%; opacity: 1; transition: 0.8s; }

.page-support-section .card-icon-box {
    width: 56px; height: 56px; background: #f5f5f7; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--text-main); margin-bottom: 24px;
    transition: 0.4s;
}
.page-support-section .nav-card:hover .card-icon-box { background: var(--accent); color: white; transform: scale(1.1) rotate(-5deg); }

/* SVG 图标样式 */
.page-support-section .card-icon-box svg {
    width: 26px;
    height: 26px;
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-support-section .card-icon-box svg path {
    fill: currentColor !important;
}

/* Hover 时 SVG 图标颜色变为白色 */
.page-support-section .nav-card:hover .card-icon-box svg {
    color: white;
}

.page-support-section .nav-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.page-support-section .nav-card p { font-size: 14px; color: var(--text-sub); line-height: 1.5; }

.page-support-section .hover-arrow {
    position: absolute; bottom: 36px; right: 36px;
    opacity: 0; transform: translateX(-10px); transition: 0.4s var(--ease-elastic); color: var(--accent);
}

/* hover-arrow SVG 图标样式 - 使用更高优先级 */
.page-support-section svg.hover-arrow {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    color: var(--accent);
    fill: var(--accent);
    flex-shrink: 0;
    display: block;
    box-sizing: border-box;
}

.page-support-section svg.hover-arrow path {
    fill: var(--accent) !important;
}

.page-support-section .nav-card:hover .hover-arrow { 
    opacity: 1; 
    transform: translateX(0); 
}

.page-support-section .nav-card:hover svg.hover-arrow {
    color: var(--accent);
    fill: var(--accent);
}

.page-support-section .nav-card:hover svg.hover-arrow path {
    fill: var(--accent) !important;
}

/* --- 3. DOWNLOADS (瀑布流列表) --- */
/* 通用样式已移至 assets/styles.css.liquid */

.page-support-section .download-list { background: var(--bg-card); border-radius: 24px; padding: 8px; box-shadow: var(--shadow-sm); }

.page-support-section .dl-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-radius: 16px; transition: 0.3s;
    border-bottom: 1px solid var(--border-light);
    opacity: 0; transform: translateY(20px);
}
.page-support-section .dl-item:last-child { border-bottom: none; }
.page-support-section .dl-item:hover { background: #f9f9fa; }

.page-support-section .file-meta { display: flex; align-items: center; gap: 18px; }
.page-support-section .file-type-icon {
    font-size: 24px; color: var(--text-sub); width: 40px; text-align: center;
    display: flex; align-items: center; justify-content: center;
}

/* Download Item SVG 图标样式 */
.page-support-section .file-type-icon svg {
    width: 24px;
    height: 24px;
    color: var(--text-sub);
    fill: currentColor;
    flex-shrink: 0;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-support-section .file-type-icon svg path {
    fill: currentColor !important;
}
.page-support-section .file-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; display: block; }
.page-support-section .file-desc { font-size: 13px; color: var(--text-sub); }

.page-support-section .dl-btn {
    padding: 8px 20px; background: #edeff2; border-radius: 100px;
    font-size: 13px; font-weight: 600; color: var(--text-main); border: none;
    cursor: pointer; transition: 0.3s;
}
.page-support-section .dl-item:hover .dl-btn { background: var(--text-main); color: white; }

/* --- 4. FAQ (简约手风琴) --- */
.page-support-section .faq-wrapper { max-width: 800px; margin: 100px auto; }

.page-support-section .faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.page-support-section .faq-trigger {
    width: 100%; padding: 28px 0; background: none; border: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 18px; font-weight: 500; color: var(--text-main); cursor: pointer;
    text-align: left; transition: 0.3s;
}
.page-support-section .faq-trigger:hover { color: var(--accent); }
.page-support-section .faq-content {
    max-height: 0; overflow: hidden; transition: max-height 0.5s ease;
    font-size: 16px; line-height: 1.7; color: var(--text-sub);
}
.page-support-section .faq-content p { padding-bottom: 28px; }

.page-support-section .icon-plus { 
    transition: 0.3s; 
    font-size: 20px; 
    color: #ccc; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.page-support-section .faq-trigger.is-open .icon-plus { 
    transform: rotate(45deg); 
    color: var(--text-main, #1d1d1f); 
}

/* FAQ 展开/收起图标 SVG 样式 - 使用更高优先级 */
.page-support-section svg.icon-plus {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    color: #ccc;
    fill: #ccc;
    flex-shrink: 0;
    transition: transform 0.3s ease, fill 0.3s ease;
    display: block;
    box-sizing: border-box;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-support-section svg.icon-plus path {
    fill: #ccc !important;
    transition: fill 0.3s ease;
}

/* FAQ 展开时 SVG 图标样式 - 变成 X 号（旋转45度） */
.page-support-section .faq-trigger.is-open svg.icon-plus {
    transform: rotate(45deg);
    color: var(--text-main, #1d1d1f);
    fill: var(--text-main, #1d1d1f);
}

.page-support-section .faq-trigger.is-open svg.icon-plus path {
    fill: var(--text-main, #1d1d1f) !important;
}

/* --- 5. FOOTER CTA (精美CTA) --- */
.page-support-section .support-footer { padding-bottom: 80px; }
.page-support-section .cta-card {
    background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3e 100%);
    border-radius: 32px; padding: 80px 40px; text-align: center; color: white;
    position: relative; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* 动态背景装饰 */
.page-support-section .cta-bg-glow {
    position: absolute; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,113,227,0.3) 0%, transparent 70%);
    top: -50%; left: 50%; transform: translateX(-50%); pointer-events: none;
    overflow: hidden;
    max-width: 100%;
}

.page-support-section .btn-chat {
    margin-top: 30px; display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 40px; background: white; color: black; border-radius: 100px;
    font-weight: 600; font-size: 16px; border: none; cursor: pointer;
    transition: 0.4s var(--ease-elastic);
}
.page-support-section .btn-chat:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,255,255,0.3); }

/* CTA 按钮中的消息图标 SVG 样式 */
.page-support-section .btn-chat svg {
    width: 20px !important;
    height: 20px !important;
    color: black;
    fill: black;
    flex-shrink: 0;
    display: block;
    max-width: 20px;
    max-height: 20px;
}

/* 覆盖 SVG 内部 path 的内联 fill 属性 */
.page-support-section .btn-chat svg path {
    fill: black !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .page-support-section .nav-grid { grid-template-columns: 1fr; }
    .page-support-section .nav-card { height: 200px; }
    .page-support-section .hero-section { height: auto; padding: 100px 0 60px; }
    .page-support-section .dl-item { flex-direction: column; align-items: flex-start; gap: 16px; }
    .page-support-section .dl-btn { width: 100%; text-align: center; }
}

/* 响应式样式已移至 assets/styles.css.liquid */
.section-series-list-card {
  background-color: #ececec;
}
.section-series-list-card .cart svg {
  width: 30px;
  height: 30px;
}
.section-series-list-card .price del {
  font-size: 14px;
  color: #818181;
}
.section-series-list-card a {
  text-decoration: none;
}
.why-choose-section {
    padding: 80px 0;
    background-color: #f9fafb;
  }
  
  .why-choose-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  .why-choose-section .section-title {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .why-choose-section .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  
  .why-choose-section .feature-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .why-choose-section .feature-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color, #0071e3);
  }
  
  .why-choose-section .feature-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
  
  .why-choose-section .feature-text {
    line-height: 1.6;
    max-width: 280px;
  }
  
  @media (max-width: 991.98px) {
    .why-choose-section .features-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
    }
  }
  
  @media (max-width: 575.98px) {
    .why-choose-section {
      padding: 60px 0;
    }
    
    .why-choose-section .section-title {
      margin-bottom: 40px;
    }
    
    .why-choose-section .features-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    
    .why-choose-section .feature-icon {
      width: 64px;
      height: 64px;
      margin-bottom: 20px;
    }
  }