/*
Theme Name: Sockmader
Theme URI: https://www.sockmader.com
Author: Sockmader
Description: Custom socks wholesale manufacturer WordPress theme
Version: 1.0
License: GPL v2 or later
Text Domain: sockmader
*/

/* ========== RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Toe Seam Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Rib Cuff Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Pattern Styles Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Logo Styles Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Extra Options Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@keyframes crewFloat {
}

/* Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 1200px) {
}
@media (max-width: 768px) {
}

/* Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Toe Seam Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Rib Cuff Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Pattern Styles Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Logo Styles Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Extra Options Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@keyframes crewFloat {
}

/* Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 1200px) {
}
@media (max-width: 768px) {
}

/* Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

    /* Responsive */
    @media (max-width: 1024px) {
    }
    @media (max-width: 768px) {
    }

    /* Responsive */
    @media (max-width: 768px) {
    }

    /* Responsive */
    @media (max-width: 1100px) {
    }
    @media (max-width: 768px) {
    }
    @media (max-width: 900px) { }
    @media (max-width: 768px) { }
    @media (max-width: 768px) { }
        @media (max-width: 768px) { }
    @keyframes pulse { }
    @media (max-width: 768px) { }


/* ========== HOME BRAND PACKAGING ========== */
.brand-packaging {
  background: #f9fafb;
}
.brand-packaging .section-header p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}
.brand-packaging-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.brand-packaging-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.brand-packaging-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.brand-packaging-img {
  background: #f5f6f8;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.brand-packaging-img img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}
.brand-packaging-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
}

@media (max-width: 992px) {
  .brand-packaging-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .brand-packaging-grid { grid-template-columns: 1fr; }
  .brand-packaging-img { min-height: 150px; }
}
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Toe Seam Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Rib Cuff Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Pattern Styles Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Logo Styles Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Extra Options Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@keyframes crewFloat {
}

/* Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

@media (max-width: 1200px) {
}
@media (max-width: 768px) {
}

/* ========== FACTORY PAGE ========== */
.factory-hero {
  background: #fff;
  padding: 120px 0 70px;
}
.factory-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.factory-tag {
  display: inline-block;
  color: #ff6b35;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.factory-hero-text h1 {
  font-size: 44px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 20px;
}
.factory-hero-text p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 28px;
}
.factory-hero-buttons {
  display: flex;
  gap: 15px;
}
.factory-hero-buttons .btn-outline {
  padding: 12px 28px;
  border: 2px solid #2d5da1;
  color: #2d5da1;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s;
}
.factory-hero-buttons .btn-outline:hover {
  background: #2d5da1;
  color: #fff;
}
.factory-hero-image {
  background: #f5f6f8;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.factory-hero-image img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* Stats */
.factory-stats {
  background: #1a1a2e;
  padding: 70px 0;
}
.factory-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}
.factory-stat-card {
  text-align: center;
  color: #fff;
}
.factory-stat-num {
  font-size: 42px;
  font-weight: 800;
  color: #ff6b35;
  line-height: 1;
}
.factory-stat-unit {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-left: 4px;
}
.factory-stat-card p {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}

/* Equipment */
.factory-equipment { background: #f9fafb; }
.factory-equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.factory-equipment-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.factory-equipment-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.factory-equipment-img {
  background: #f5f6f8;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
}
.factory-equipment-img img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
}
.factory-equipment-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.factory-equipment-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Process */
.factory-process { background: #fff; }
.factory-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.factory-process-card {
  background: #f9fafb;
  border-radius: 16px;
  padding: 32px;
  position: relative;
  padding-top: 55px;
}
.factory-process-num {
  position: absolute;
  top: -16px;
  left: 32px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  background: #ff6b35;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}
.factory-process-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.factory-process-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Quality */
.factory-quality {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
  color: #fff;
}
.factory-quality-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.factory-quality-text h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 18px;
}
.factory-quality-text p {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  margin-bottom: 24px;
}
.factory-quality-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.factory-quality-text li {
  font-size: 15px;
  color: rgba(255,255,255,.9);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.factory-quality-text li i {
  color: #00b894;
  font-size: 18px;
}
.factory-quality-image {
  background: rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.factory-quality-image img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
}

/* Certifications */
.factory-certifications { background: #f9fafb; }
.factory-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.factory-cert-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s;
}
.factory-cert-card:hover {
}
.factory-cert-card i {
  font-size: 40px;
  color: #ff6b35;
  margin-bottom: 16px;
}
.factory-cert-card h4 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.factory-cert-card p {
  font-size: 13px;
  color: #888;
}

/* CTA */
.factory-cta {
  background: #fff;
  text-align: center;
}
.factory-cta h2 {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 16px;
}
.factory-cta p {
  font-size: 16px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 1200px) {
  .factory-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .factory-hero-inner,
  .factory-quality-inner { grid-template-columns: 1fr; text-align: center; }
  .factory-hero-buttons { justify-content: center; }
  .factory-equipment-grid,
  .factory-process-grid { grid-template-columns: repeat(2, 1fr); }
  .factory-cert-grid { grid-template-columns: repeat(2, 1fr); }
  .factory-quality-text ul { display: inline-block; text-align: left; }
}
@media (max-width: 768px) {
  .factory-hero-text h1 { font-size: 32px; }
  .factory-stats-grid,
  .factory-equipment-grid,
  .factory-process-grid,
  .factory-cert-grid { grid-template-columns: 1fr; }
  .factory-hero-buttons { flex-direction: column; }
  .factory-hero-buttons .btn,
  .factory-hero-buttons .btn-outline { width: 100%; text-align: center; }
}
@media (max-width: 992px) { }
@media (max-width: 576px) { }
@media (max-width: 992px) {
}
@media (max-width: 576px) {
}
@media (max-width: 576px) {
}
@media (max-width: 992px) {
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 768px) {
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}

/* ========== TOE SEAM STYLES PAGE ========== */
.seam-banner {
  background: linear-gradient(135deg, #f0f5ff 0%, #fff8f3 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.seam-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.seam-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Seam Intro */
.seam-intro { background: #fff; }
.seam-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.seam-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.seam-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.seam-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.seam-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.seam-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.seam-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Seam Types */
.seam-types { background: #f9fafb; }
.seam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.seam-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.seam-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.seam-card-header {
  padding: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.seam-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.seam-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 auto;
}
.seam-icon i { font-size: 30px; }
.seam-card-body { padding: 28px; }
.seam-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.seam-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.seam-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.seam-pros {
  margin-bottom: 16px;
}
.seam-pros li {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.seam-pros li i {
  color: #00b894;
  font-size: 12px;
}
.seam-best {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.seam-best strong { color: #1a1a2e; }

/* Seam Comparison */
.seam-comparison { background: #fff; }
.seam-table .seam-name {
  font-weight: 700;
  color: #1a1a2e;
  text-align: left;
}

/* Seam Guide */
.seam-guide { background: #f9fafb; }

/* Seam Detail */
.seam-detail { background: #fff; }
.seam-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.seam-detail-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.seam-detail-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 24px;
}
.seam-detail-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Toe Seam Responsive */
@media (max-width: 1200px) {
  .seam-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .seam-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .seam-detail-inner { grid-template-columns: 1fr; }
  .seam-detail-image { order: -1; }
  .seam-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .seam-banner { padding: 120px 0 80px; }
  .seam-banner h1 { font-size: 32px; }
  .seam-grid,
  .seam-benefits-grid { grid-template-columns: 1fr; }
  .seam-detail-text h2 { font-size: 28px; }
}
/*
Theme Name: Sockmader
Theme URI: https://www.sockmader.com
Author: Sockmader
Description: Custom socks wholesale manufacturer WordPress theme
Version: 1.0
License: GPL v2 or later
Text Domain: sockmader
*/

/* ========== RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #333; line-height: 1.6; background: #fff; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color .3s; }
ul { list-style: none; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 30px; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 8px; font-weight: 600;
  font-size: 15px; cursor: pointer; transition: all .3s; border: 2px solid transparent;
}
.btn-primary { background: #ff6b35; color: #fff; border-color: #ff6b35; }
.btn-primary:hover { background: #e55a28; border-color: #e55a28; box-shadow: 0 4px 15px rgba(255,107,53,.35); }
.btn-outline { background: transparent; color: #333; border-color: #333; }
.btn-outline:hover { background: #333; color: #fff; }
.btn-outline-dark { background: transparent; color: #333; border-color: #555; }
.btn-outline-dark:hover { background: #333; color: #fff; }
.btn-secondary { background: #2d5da1; color: #fff; border-color: #2d5da1; }
.btn-secondary:hover { background: #1e4d8a; }
.btn-video { background: transparent; color: #2d5da1; border: none; padding: 14px 10px; }
.btn-video:hover { color: #1e4d8a; }
.btn-lg { padding: 18px 40px; font-size: 17px; }
.btn-sm { padding: 8px 18px; font-size: 13px; }

/* Step Card Button */
.step-card { display: flex; flex-direction: column; align-items: center; }
.step-card .btn { margin-top: auto; }
.step-card:hover .btn-outline { background: #333; color: #fff; }
.btn-link { color: #2d5da1; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn-link:hover { color: #1e4d8a; gap: 10px; }

/* ========== HEADER ========== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .3s;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo-text { font-size: 30px; font-weight: 800; color: #ff6b35; letter-spacing: -1px; }
.nav-list { display: flex; align-items: center; gap: 36px; }
.nav-list > li > a { font-size: 16px; font-weight: 500; color: #444; transition: color .3s; }
.nav-list > li > a:hover { color: #ff6b35; }
.nav-list > li > a i { font-size: 10px; margin-left: 4px; }

/* Dropdown */
.dropdown, .menu-item-has-children { position: relative; }
.dropdown-menu, .nav-list .sub-menu {
  position: absolute; top: 100%; left: -15px; min-width: 220px;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.12);
  padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s; z-index: 1000;
}
.dropdown:hover .dropdown-menu,
.menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a, .nav-list .sub-menu li a { display: block; padding: 10px 20px; font-size: 14px; color: #555; white-space: nowrap; }
.dropdown-menu li a:hover, .nav-list .sub-menu li a:hover { background: #f8f8f8; color: #ff6b35; }
.nav-list .sub-menu .sub-menu { top: 0; left: 100%; }

.nav-list .menu-item-has-children > a::after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  margin-left: 4px;
  display: inline-block;
}

/* Mobile Menu */
.mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: #333; cursor: pointer; }
.mobile-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,.1); padding: 20px; }
.mobile-menu.active { display: block; }
.mobile-nav-list li { padding: 12px 0; border-bottom: 1px solid #f0f0f0; position: relative; }
.mobile-nav-list li a { font-size: 16px; color: #444; display: block; padding-right: 40px; }
.mobile-nav-list li a:hover { color: #ff6b35; }
.mobile-nav-list .sub-menu { display: none; padding-left: 15px; margin-top: 8px; border-left: 2px solid #ff6b35; }
.mobile-nav-list .menu-item-has-children.active > .sub-menu { display: block; }
/* 独立的子菜单展开/收起箭头按钮（由 JS 注入 .submenu-toggle） */
/* 点箭头=展开收起，点文字=跳转，二者互不干扰，任意层级通用 */
.mobile-nav-list .submenu-toggle {
  position: absolute;
  right: 0;
  top: 10px;
  width: 40px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
}
.mobile-nav-list .submenu-toggle::before {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 12px;
  transition: transform .3s;
}
.mobile-nav-list .menu-item-has-children.active > a .submenu-toggle::before { transform: rotate(180deg); }

/* ========== HERO ========== */
.hero {
  padding: 140px 0 80px; background: linear-gradient(135deg, #fff8f3 0%, #fff 50%, #f0f5ff 100%);
  min-height: 600px; display: flex; align-items: center;
}
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.badge {
  background: #fff3ed; color: #ff6b35; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 20px; letter-spacing: .5px;
  border: 1px solid rgba(255,107,53,.2);
}
.hero h1 { font-size: 52px; font-weight: 800; line-height: 1.15; color: #1a1a2e; margin-bottom: 20px; }
.hero-desc { font-size: 19px; color: #666; margin-bottom: 35px; max-width: 600px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-image {
  position: relative;
  display: inline-block;
  padding: 0;
  background: none;
  border-radius: 20px;
  backdrop-filter: none;
  box-shadow: none;
  overflow: hidden;
  line-height: 0;
}
/* hero decorative circle removed per request */
.hero-image::before { content: none; }
.hero-image img { width: 500px; height: 400px; object-fit: cover; border-radius: 20px; box-shadow: none; }

/* ========== PAGE BANNER (for inner pages) ========== */
.page-banner {
  padding: 120px 0 50px; background: linear-gradient(135deg, #fff8f3 0%, #f0f5ff 100%);
  text-align: center;
}
.breadcrumb { display: flex; justify-content: center; gap: 8px; font-size: 14px; color: #999; margin-bottom: 18px; }
.breadcrumb a { color: #2d5da1; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #ccc; }
.page-banner h1 { font-size: 38px; font-weight: 800; color: #1a1a2e; margin-bottom: 12px; }
.page-banner p { font-size: 16px; color: #777; max-width: 600px; margin: 0 auto; }

/* ========== SECTIONS ========== */
.section { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 70px; }
.section-header h2 { font-size: 40px; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; }
.section-header p { font-size: 18px; color: #777; max-width: 700px; margin: 0 auto; }
.section-tag {
  display: inline-block; font-size: 13px; font-weight: 700; color: #ff6b35;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px;
}
.section-footer { text-align: center; margin-top: 40px; }

/* ========== HOW IT WORKS ========== */
.how-it-works { background: #f9fafb; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step-card {
  background: #fff; padding: 48px 36px; border-radius: 16px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); position: relative; transition: transform .3s, box-shadow .3s;
  text-decoration: none; color: inherit; display: block;
}
.step-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.step-card:hover h3 { color: #2d5da1; }
.step-number {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; background: #ff6b35; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.step-icon { font-size: 40px; margin-bottom: 20px; margin-top: 10px; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; margin-left: auto; margin-right: auto; }
.steps-grid .step-card:nth-child(1) .step-icon { color: #ff6b35; background: rgba(255,107,53,.1); }
.steps-grid .step-card:nth-child(2) .step-icon { color: #00b894; background: rgba(0,184,148,.1); }
.steps-grid .step-card:nth-child(3) .step-icon { color: #6c5ce7; background: rgba(108,92,231,.1); }
.steps-grid .step-card:nth-child(4) .step-icon { color: #e17055; background: rgba(225,112,85,.1); }
.step-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: #1a1a2e; }
.step-card p { font-size: 15px; color: #666; line-height: 1.7; }

/* ========== PRODUCTS ========== */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.product-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; position: relative;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.product-tag {
  position: absolute; top: 15px; left: 15px; z-index: 2;
  background: #ff6b35; color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
}
.product-img { height: 360px; min-height: 360px; aspect-ratio: 1 / 1; overflow: hidden; background: #f8f8f8; display: flex; align-items: center; justify-content: center; padding: 0; }
.product-img a { display: flex; width: 100%; height: 100%; }
.product-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-info { padding: 26px; }
.product-info h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #1a1a2e; }
.product-price { color: #ff6b35; font-size: 15px; margin-bottom: 10px; }
.product-info p { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }

/* ========== CTA BANNER ========== */
.cta-banner {
  background: linear-gradient(135deg, #2d5da1, #1a3a6a); color: #fff;
  padding: 60px 0; text-align: center;
}
.cta-banner h2 { font-size: 30px; font-weight: 800; margin-bottom: 25px; }
.cta-banner .btn-primary { background: #ff6b35; border-color: #ff6b35; }

/* ========== 4-COLUMN GRID OVERRIDE ========== */
.steps-grid-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 40px; }
@media (max-width: 992px) { .steps-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 576px) { .steps-grid-4 { grid-template-columns: 1fr !important; } }

/* ========== CUSTOM OPTIONS ========== */
.custom-options { background: #f9fafb; }
.options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.option-card {
  display: flex; align-items: flex-start; gap: 18px; background: #fff;
  padding: 32px; border-radius: 16px; box-shadow: 0 3px 15px rgba(0,0,0,.05);
  transition: transform .3s, box-shadow .3s;
}
.option-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.08); }
.option-icon {
  flex-shrink: 0; width: 50px; height: 50px; line-height: 50px; text-align: center;
  border-radius: 50%; font-size: 20px;
  background: rgba(255,107,53,.1); color: #ff6b35;
}
.options-grid .option-card:nth-child(4n+1) .option-icon { color: #ff6b35; background: rgba(255,107,53,.1); }
.options-grid .option-card:nth-child(4n+2) .option-icon { color: #00b894; background: rgba(0,184,148,.1); }
.options-grid .option-card:nth-child(4n+3) .option-icon { color: #6c5ce7; background: rgba(108,92,231,.1); }
.options-grid .option-card:nth-child(4n+4) .option-icon { color: #e17055; background: rgba(225,112,85,.1); }
.option-content h3 { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.option-content p { font-size: 15px; color: #666; line-height: 1.7; }
.option-content a { color: #2d5da1; text-decoration: underline; }
.option-content a:hover { color: #ff6b35; }
@media (max-width: 992px) {
  .options-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .options-grid { grid-template-columns: 1fr; }
}

/* ========== WHY SOCKMADER ========== */
.why-sockmader { background: #f9fafb; }
.why-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 50px; }
.why-text p { font-size: 15px; color: #555; margin-bottom: 16px; line-height: 1.8; }
.why-image img { border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.feature-card {
  background: #fff; padding: 36px 30px; border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0,0,0,.05); transition: transform .3s;
}
.feature-card:hover { }
.feature-icon { font-size: 28px; color: #ff6b35; margin-bottom: 15px; }
.feature-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #1a1a2e; }
.feature-card p { font-size: 14px; color: #777; line-height: 1.7; }

/* ========== START CUSTOM ========== */
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.start-card {
  background: #fff; padding: 48px 36px; border-radius: 16px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); border: 1px solid #f0f0f0; transition: all .3s;
}
.start-card:hover { border-color: #ff6b35; box-shadow: 0 8px 30px rgba(255,107,53,.1); }
.start-icon { font-size: 40px; color: #2d5da1; margin-bottom: 20px; }
.start-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 14px; color: #1a1a2e; }
.start-card p { font-size: 15px; color: #666; line-height: 1.7; margin-bottom: 25px; }

/* ========== CUSTOMIZATION OPTIONS ========== */
.customization { background: #f9fafb; }
.options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.option-item {
  background: #fff; padding: 32px 28px; border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04); transition: transform .3s;
}
.option-item:hover { }
.option-icon { font-size: 24px; color: #2d5da1; margin-bottom: 12px; }
.option-item h5 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; }
.option-item p { font-size: 13px; color: #777; line-height: 1.6; }

/* ========== EASY WORK ========== */
.easy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.easy-card {
  background: #fff; padding: 45px 36px; border-radius: 16px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: all .3s;
}
.easy-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.easy-icon { font-size: 36px; color: #ff6b35; margin-bottom: 18px; }
.easy-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: #1a1a2e; }
.easy-card p { font-size: 15px; color: #666; line-height: 1.7; }

/* ========== ANY SIZES / PACKAGING / MATERIAL ========== */
.any-sizes-inner, .packaging-inner, .material-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.any-sizes-text h2, .packaging-text h2, .material-text h2 { font-size: 30px; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; }
.any-sizes-text p, .packaging-text p, .material-text p { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 14px; }
.any-sizes-img img, .packaging-img img, .material-img img { border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.packaging, .any-sizes { background: #f9fafb; }

/* ========== WHY CUSTOM ========== */
.why-custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.why-custom-card {
  background: #fff; padding: 45px 36px; border-radius: 16px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: transform .3s;
}
.why-custom-card:hover { }
.why-custom-icon { font-size: 36px; color: #2d5da1; margin-bottom: 18px; }
.why-custom-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: #1a1a2e; }
.why-custom-card p { font-size: 15px; color: #666; line-height: 1.7; }

/* ========== FAQ ========== */
.faq { background: #f9fafb; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e8e8e8; }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; background: none; border: none; cursor: pointer;
  font-size: 16px; font-weight: 600; color: #1a1a2e; text-align: left;
}
.faq-question i { font-size: 12px; color: #999; transition: transform .3s; flex-shrink: 0; margin-left: 15px; }
.faq-question.active i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-answer.open { max-height: 200px; }
.faq-answer p { padding: 0 0 22px; font-size: 14px; color: #666; line-height: 1.8; }
.faq-footer { text-align: center; margin-top: 40px; }
.faq-footer p { font-size: 16px; color: #555; margin-bottom: 15px; }

/* ========== FINAL CTA ========== */
.final-cta {
  background: linear-gradient(135deg, #1a1a2e, #2d2d5e); color: #fff;
  text-align: center; padding: 100px 0;
}
.final-cta h2 { font-size: 42px; font-weight: 800; margin-bottom: 18px; }
.final-cta p { font-size: 18px; color: rgba(255,255,255,.7); margin-bottom: 35px; }

/* ========== FOOTER ========== */
.footer { background: #1a1a2e; color: #ccc; padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; margin-bottom: 50px; }
.footer-col h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: #aaa; transition: color .3s; }
.footer-col ul li a:hover { color: #ff6b35; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 25px; text-align: center; }
.footer-bottom p { font-size: 13px; color: #777; margin-bottom: 4px; }

/* ========== PRODUCT DETAIL PAGE ========== */
.product-hero { padding: 120px 0 60px; }
.product-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.product-hero-gallery { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.1); }
.product-hero-gallery img { width: 100%; height: 450px; object-fit: cover; }
.product-hero-info h1 { font-size: 38px; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; }
.product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.product-rating .stars { color: #fbbf24; font-size: 16px; }
.product-rating span { font-size: 14px; color: #777; }
.product-type-desc { font-size: 15px; line-height: 1.7; color: #555; margin-bottom: 20px; }
.product-specs { margin-bottom: 25px; }
.product-specs li { padding: 8px 0; font-size: 14px; color: #555; display: flex; align-items: flex-start; gap: 10px; }
.product-specs li strong { color: #1a1a2e; min-width: 100px; }
.product-specs li i { color: #ff6b35; margin-top: 3px; }
.product-cta-buttons { display: flex; gap: 12px; margin-top: 25px; }

/* Process Steps */
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 40px; }
.process-step { text-align: center; padding: 35px; background: #f9fafb; border-radius: 12px; }
.process-step .step-num { width: 32px; height: 32px; background: #ff6b35; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; }
.process-step h4 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.process-step p { font-size: 13px; color: #777; }

/* Related Products */
.related-products .products-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 576px) {
  .related-products .products-grid { grid-template-columns: 1fr; }
}

/* Product Features */
.product-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.product-feature-item { text-align: center; padding: 36px 28px; background: #fff; border-radius: 12px; box-shadow: 0 3px 15px rgba(0,0,0,.05); }
.product-feature-item i { font-size: 32px; color: #2d5da1; margin-bottom: 15px; }
.product-feature-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; }
.product-feature-item p { font-size: 13px; color: #777; }

/* Customize Options */
.customize-options-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.customize-options-list { list-style: none; padding: 0; margin: 0; }
.customize-options-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.option-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; background: #ff6b35; color: white; border-radius: 50%; font-weight: 700; font-size: 14px; margin-top: 0; flex-shrink: 0; }
.customize-option-text { font-size: 15px; line-height: 1.6; color: #444; }
.customize-option-text strong { color: #1a1a2e; font-weight: 700; margin-right: 4px; }
.customize-options-image img { width: 100%; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.1); }

/* Why Customize */
.why-customize { background: #f8f9fa; }
.why-customize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.why-customize-card { background: #fff; padding: 28px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.06); text-align: center; transition: transform .3s, box-shadow .3s; }
.why-customize-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.why-customize-img { height: 200px; margin-bottom: 20px; border-radius: 12px; overflow: hidden; }
.why-customize-img img { width: 100%; height: 100%; object-fit: cover; }
.why-customize-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #1a1a2e; }
.why-customize-card p { font-size: 14px; color: #666; line-height: 1.7; }
@media (max-width: 992px) {
  .customize-options-inner { grid-template-columns: 1fr; gap: 40px; }
  .why-customize-grid { grid-template-columns: 1fr; }
}

/* Use Cases */
.use-case { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 50px; }
.use-case:nth-child(even) { direction: rtl; }
.use-case:nth-child(even) > * { direction: ltr; }
.use-case img { border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.use-case-text h3 { font-size: 22px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.use-case-text p { font-size: 14px; color: #666; line-height: 1.8; }

/* ========== BLOG LISTING ========== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s;
}
.blog-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.blog-card-img { height: 200px; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 22px; }
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; color: #999; }
.blog-card-meta .category { color: #2d5da1; font-weight: 600; }
.blog-card-body h3 { font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; line-height: 1.4; }
.blog-card-body h3 a:hover { color: #ff6b35; }
.blog-card-body p { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; }
.pagination a, .pagination span {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px; font-weight: 600; transition: all .3s;
}
.pagination a { background: #f0f0f0; color: #555; }
.pagination a:hover { background: #ff6b35; color: #fff; }
.pagination .current { background: #ff6b35; color: #fff; }

/* ========== BLOG DETAIL ========== */
.article-header { padding: 120px 0 40px; }
.article-header h1 { font-size: 36px; font-weight: 800; color: #1a1a2e; margin-bottom: 15px; line-height: 1.3; }
.article-meta { display: flex; align-items: center; gap: 15px; font-size: 14px; color: #999; margin-bottom: 20px; }
.article-meta .author { color: #333; font-weight: 600; }
.share-buttons { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.share-buttons span { font-size: 14px; font-weight: 600; color: #333; }
.share-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all .3s; }
.share-btn.fb { background: #1877f2; color: #fff; }
.share-btn.tw { background: #1da1f2; color: #fff; }
.share-btn.li { background: #0a66c2; color: #fff; }
.share-btn.wa { background: #25d366; color: #fff; }
.share-btn.pi { background: #e60023; color: #fff; }
.share-btn:hover { opacity: .85; transform: scale(1.1); }

/* Article Content */
.article-content { max-width: 800px; margin: 0 auto; }
.article-content h2 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin: 40px 0 15px; }
.article-content h3 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 30px 0 12px; }
.article-content p { font-size: 15px; color: #555; line-height: 1.9; margin-bottom: 18px; }
.article-content img { border-radius: 12px; margin: 25px 0; box-shadow: 0 5px 20px rgba(0,0,0,.08); }
.article-content ul, .article-content ol { padding-left: 24px; margin-bottom: 18px; }
.article-content li { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 6px; list-style: disc; }
.article-content a { color: #2d5da1; text-decoration: underline; }
.article-content blockquote {
  border-left: 4px solid #ff6b35; padding: 15px 25px; margin: 25px 0;
  background: #fff8f3; border-radius: 0 8px 8px 0;
}

/* Table of Contents */
.toc {
  background: #f9fafb; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 25px 30px; margin-bottom: 35px;
}
.toc h4 { font-size: 16px; font-weight: 700; margin-bottom: 15px; color: #1a1a2e; }
.toc ol { padding-left: 20px; }
.toc li { font-size: 14px; color: #2d5da1; margin-bottom: 8px; list-style: decimal; }
.toc li a:hover { text-decoration: underline; }

/* Related Posts */
.related-posts { margin-top: 60px; }
.related-posts h2 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin-bottom: 25px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }

/* ========== COOKIE BANNER ========== */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cookie-banner.hidden { display: none; }
.cookie-banner p { font-size: 13px; color: #555; }
.cookie-banner a { color: #2d5da1; text-decoration: underline; }
.cookie-buttons { display: flex; gap: 10px; flex-shrink: 0; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-image { display: none; }
  .hero h1 { font-size: 34px; }
  .hero-badges { justify-content: center; }
  .hero-buttons { justify-content: center; }
  .products-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid, .start-grid, .easy-grid, .options-grid, .why-custom-grid, .product-features-grid, .process-steps, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .why-content, .any-sizes-inner, .packaging-inner, .material-inner, .product-hero-inner, .use-case { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .nav-desktop { display: none; }
  .mobile-menu-btn { display: block; }
  .hero h1 { font-size: 28px; }
  .section-header h2 { font-size: 26px; }
  .page-banner h1 { font-size: 28px; }
  .steps-grid, .products-grid, .features-grid, .start-grid, .easy-grid, .options-grid, .why-custom-grid, .product-features-grid, .process-steps, .blog-grid, .related-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-banner h2 { font-size: 24px; }
  .final-cta h2 { font-size: 28px; }
  .cookie-banner { flex-direction: column; text-align: center; }
  .article-header h1 { font-size: 26px; }
  .use-case:nth-child(even) { direction: ltr; }
}

/* ========== PRODUCT FAQ ========== */
.product-faq { background: #f8f9fa; }
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item { background: #fff; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; font-size: 17px; font-weight: 600; color: #1a1a2e; text-align: left; cursor: pointer; transition: color .3s; }
.faq-question:hover { color: #ff6b35; }
.faq-question i { font-size: 14px; color: #ff6b35; transition: transform .3s; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 24px; color: #555; line-height: 1.7; }
.faq-item.active .faq-answer { max-height: 500px; padding: 0 24px 20px; }
.faq-empty { text-align: center; color: #888; padding: 40px 0; }
@media (max-width: 768px) {
  .faq-question { font-size: 15px; padding: 16px 20px; }
  .faq-answer { padding: 0 20px; }
  .faq-item.active .faq-answer { padding: 0 20px 16px; }
}

/* ========== SOCK FABRICS PAGE ========== */
.fabric-banner {
  background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.fabric-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.fabric-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Fabric Intro */
.fabric-intro { background: #fff; }
.fabric-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.fabric-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.fabric-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.fabric-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.fabric-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.fabric-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.fabric-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Fabric Types */
.fabric-types { background: #f9fafb; }
.fabric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.fabric-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.fabric-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.fabric-card-header {
  padding: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.fabric-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.fabric-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 auto;
}
.fabric-icon i { font-size: 30px; }
.fabric-card-body { padding: 28px; }
.fabric-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.fabric-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.fabric-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.fabric-pros {
  margin-bottom: 16px;
}
.fabric-pros li {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fabric-pros li i {
  color: #00b894;
  font-size: 12px;
}
.fabric-best {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.fabric-best strong { color: #1a1a2e; }

/* Comparison Table */
.fabric-comparison { background: #fff; }
.comparison-table-wrapper {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.comparison-table th,
.comparison-table td {
  padding: 18px 24px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.comparison-table th {
  background: #1a1a2e;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.comparison-table td {
  font-size: 14px;
  color: #555;
}
.comparison-table .fabric-name {
  font-weight: 700;
  color: #1a1a2e;
  text-align: left;
}
.comparison-table tbody tr:hover { background: #f9fafb; }
.comparison-table tbody tr:last-child td { border-bottom: none; }

/* Selection Guide */
.fabric-guide { background: #f9fafb; }
.guide-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.guide-card {
  background: #fff;
  padding: 30px 24px;
  border-radius: 16px;
  box-shadow: 0 3px 15px rgba(0,0,0,.05);
  text-align: center;
  transition: transform .3s;
}
.guide-card:hover { }
.guide-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}
.guide-blend {
  display: inline-block;
  background: #fff3ed;
  color: #ff6b35;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.guide-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Quality Section */
.fabric-quality { background: #fff; }
.quality-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.quality-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.quality-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 24px;
}
.quality-list { margin-bottom: 30px; }
.quality-list li {
  font-size: 16px;
  color: #555;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.quality-list li i {
  color: #ff6b35;
}
.quality-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Fabric Page Responsive */
@media (max-width: 1200px) {
  .fabric-grid { grid-template-columns: repeat(3, 1fr); }
  .guide-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .fabric-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .fabric-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-inner { grid-template-columns: 1fr; }
  .fabric-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .fabric-banner { padding: 120px 0 80px; }
  .fabric-banner h1 { font-size: 32px; }
  .fabric-grid,
  .fabric-benefits-grid,
  .guide-grid { grid-template-columns: 1fr; }
  .comparison-table th,
  .comparison-table td { padding: 14px 16px; font-size: 13px; }
  .quality-text h2 { font-size: 28px; }
}

/* ========== SOCK SIZES & LENGTHS PAGE ========== */
.size-banner {
  background: linear-gradient(135deg, #f0f5ff 0%, #fff8f3 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.size-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.size-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Sock Lengths */
.sock-lengths { background: #fff; }
.length-visual {
  position: relative;
  padding-left: 40px;
}
.length-bar {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #a29bfe 0%, #74b9ff 20%, #00b894 40%, #ff6b35 60%, #e17055 75%, #6c5ce7 90%, #fd79a8 100%);
  border-radius: 2px;
}
.length-cards {
  display: grid;
  gap: 30px;
}
.length-card {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 30px;
  align-items: start;
  position: relative;
}
.length-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: -34px;
  margin-top: 6px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.length-info {
  background: #f9fafb;
  padding: 28px 32px;
  border-radius: 16px;
  transition: transform .3s, box-shadow .3s;
}
.length-info:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
.length-height {
  display: inline-block;
  background: #fff;
  color: #ff6b35;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.length-info h3 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.length-info h3 small {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}
.length-info p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 10px;
}
.length-best {
  font-size: 14px;
  color: #555;
}
.length-best strong { color: #1a1a2e; }

/* Size Charts */
.size-chart-section { background: #f9fafb; }
.size-chart-section.kids-size { background: #fff; }
.chart-wrapper {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.size-chart-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.size-chart-table th,
.size-chart-table td {
  padding: 18px 24px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.size-chart-table th {
  background: #1a1a2e;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.size-chart-table td {
  font-size: 15px;
  color: #555;
  font-weight: 500;
}
.size-chart-table tbody tr:hover { background: #f9fafb; }
.size-chart-table tbody tr:last-child td { border-bottom: none; }
.size-chart-table.kids th { background: #ff6b35; }

/* Measuring Tips */
.measuring-tips { background: #fff; }
.tips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.tip-card {
  background: #f9fafb;
  padding: 36px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.tip-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.tip-icon {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.tip-icon i {
  font-size: 26px;
  color: #ff6b35;
}
.tip-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.tip-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Custom Size Service */
.custom-size-service { background: #f9fafb; }
.custom-size-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.custom-size-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.custom-size-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 30px;
}
.custom-size-features { margin-bottom: 30px; }
.custom-size-feature {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
}
.custom-size-feature i {
  font-size: 24px;
  color: #ff6b35;
  margin-top: 2px;
}
.custom-size-feature h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.custom-size-feature p {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
  margin: 0;
}
.custom-size-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Sock Sizes Responsive */
@media (max-width: 1200px) {
  .tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .custom-size-inner { grid-template-columns: 1fr; }
  .custom-size-image { order: -1; }
  .size-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .size-banner { padding: 120px 0 80px; }
  .size-banner h1 { font-size: 32px; }
  .tips-grid { grid-template-columns: 1fr; }
  .length-info { padding: 22px 24px; }
  .length-info h3 { font-size: 18px; }
  .size-chart-table th,
  .size-chart-table td { padding: 14px 16px; font-size: 13px; }
  .custom-size-text h2 { font-size: 28px; }
}

/* ========== SOLE STRUCTURES PAGE ========== */
.sole-banner {
  background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.sole-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.sole-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Sole Intro */
.sole-intro { background: #fff; }
.sole-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.sole-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.sole-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.sole-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.sole-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.sole-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.sole-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Sole Types */
.sole-types { background: #f9fafb; }
.sole-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.sole-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.sole-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.sole-card-header {
  padding: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.sole-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.sole-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 auto;
}
.sole-icon i { font-size: 30px; }
.sole-card-body { padding: 28px; }
.sole-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.sole-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.sole-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.sole-pros {
  margin-bottom: 16px;
}
.sole-pros li {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sole-pros li i {
  color: #00b894;
  font-size: 12px;
}
.sole-best {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.sole-best strong { color: #1a1a2e; }

/* Sole Comparison */
.sole-comparison { background: #fff; }
.sole-table .sole-name {
  font-weight: 700;
  color: #1a1a2e;
  text-align: left;
}

/* Sole Guide */
.sole-guide { background: #f9fafb; }

/* Sole Design */
.sole-design { background: #fff; }
.sole-design-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.sole-design-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.sole-design-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 24px;
}
.sole-design-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Sole Page Responsive */
@media (max-width: 1200px) {
  .sole-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .sole-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .sole-grid { grid-template-columns: repeat(2, 1fr); }
  .sole-design-inner { grid-template-columns: 1fr; }
  .sole-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .sole-banner { padding: 120px 0 80px; }
  .sole-banner h1 { font-size: 32px; }
  .sole-grid,
  .sole-benefits-grid { grid-template-columns: 1fr; }
  .sole-design-text h2 { font-size: 28px; }
}

/* ========== RIB CUFF STYLES PAGE ========== */
.cuff-banner {
  background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.cuff-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.cuff-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Cuff Intro */
.cuff-intro { background: #fff; }
.cuff-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.cuff-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.cuff-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.cuff-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.cuff-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.cuff-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.cuff-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Cuff Types */
.cuff-types { background: #f9fafb; }
.cuff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.cuff-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.cuff-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.cuff-card-header {
  padding: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.cuff-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.cuff-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 auto;
}
.cuff-icon i { font-size: 30px; }
.cuff-card-body { padding: 28px; }
.cuff-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.cuff-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.cuff-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.cuff-pros {
  margin-bottom: 16px;
}
.cuff-pros li {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cuff-pros li i {
  color: #00b894;
  font-size: 12px;
}
.cuff-best {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.cuff-best strong { color: #1a1a2e; }

/* Cuff Comparison */
.cuff-comparison { background: #fff; }
.cuff-table .cuff-name {
  font-weight: 700;
  color: #1a1a2e;
  text-align: left;
}

/* Cuff Guide */
.cuff-guide { background: #f9fafb; }

/* Cuff Detail */
.cuff-detail { background: #fff; }
.cuff-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.cuff-detail-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.cuff-detail-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 24px;
}
.cuff-detail-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Rib Cuff Responsive */
@media (max-width: 1200px) {
  .cuff-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .cuff-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .cuff-grid { grid-template-columns: repeat(2, 1fr); }
  .cuff-detail-inner { grid-template-columns: 1fr; }
  .cuff-detail-image { order: -1; }
  .cuff-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .cuff-banner { padding: 120px 0 80px; }
  .cuff-banner h1 { font-size: 32px; }
  .cuff-grid,
  .cuff-benefits-grid { grid-template-columns: 1fr; }
  .cuff-detail-text h2 { font-size: 28px; }
}

/* ========== PATTERN STYLES PAGE ========== */
.pattern-banner {
  background: linear-gradient(135deg, #f0f5ff 0%, #fff8f3 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.pattern-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.pattern-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Pattern Intro */
.pattern-intro { background: #fff; }
.pattern-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.pattern-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.pattern-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.pattern-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.pattern-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.pattern-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.pattern-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Pattern Types */
.pattern-types { background: #f9fafb; }
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.pattern-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.pattern-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.pattern-card-header {
  padding: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.pattern-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.pattern-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 auto;
}
.pattern-icon i { font-size: 30px; }
.pattern-card-body { padding: 28px; }
.pattern-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.pattern-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.pattern-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.pattern-pros {
  margin-bottom: 16px;
}
.pattern-pros li {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pattern-pros li i {
  color: #00b894;
  font-size: 12px;
}
.pattern-best {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.pattern-best strong { color: #1a1a2e; }

/* Knitting Techniques */
.pattern-techniques { background: #fff; }
.techniques-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.technique-card {
  background: #f9fafb;
  padding: 36px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.technique-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.technique-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 18px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.technique-icon i {
  font-size: 24px;
  color: #2d5da1;
}
.technique-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.technique-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Pattern Guide */
.pattern-guide { background: #f9fafb; }

/* Pattern Process */
.pattern-process { background: #fff; }
.pattern-process-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.pattern-process-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.pattern-process-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 30px;
}
.process-steps-list { margin-bottom: 30px; }
.process-step-item {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  align-items: flex-start;
}
.process-step-item .step-num {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: #ff6b35;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}
.process-step-item h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.process-step-item p {
  font-size: 14px;
  color: #777;
  margin: 0;
}
.pattern-process-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Pattern Styles Responsive */
@media (max-width: 1200px) {
  .pattern-grid { grid-template-columns: repeat(3, 1fr); }
  .techniques-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .pattern-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .pattern-grid { grid-template-columns: repeat(2, 1fr); }
  .pattern-process-inner { grid-template-columns: 1fr; }
  .pattern-process-image { order: -1; }
  .pattern-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .pattern-banner { padding: 120px 0 80px; }
  .pattern-banner h1 { font-size: 32px; }
  .pattern-grid,
  .pattern-benefits-grid,
  .techniques-grid { grid-template-columns: 1fr; }
  .pattern-process-text h2 { font-size: 28px; }
}

/* ========== LOGO STYLES PAGE ========== */
.logo-banner {
  background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.logo-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.logo-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Logo Intro */
.logo-intro { background: #fff; }
.logo-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.logo-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.logo-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.logo-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.logo-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.logo-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.logo-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Logo Styles */
.logo-styles { background: #f9fafb; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.logo-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.logo-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.logo-card-header {
  padding: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.logo-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.logo-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 auto;
}
.logo-icon i { font-size: 30px; }
.logo-card-body { padding: 28px; }
.logo-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.logo-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.logo-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.logo-pros {
  margin-bottom: 12px;
}
.logo-pros li {
  font-size: 13px;
  color: #555;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-pros li i {
  color: #00b894;
  font-size: 12px;
}
.logo-note {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  padding: 10px 12px;
  background: #fff8f3;
  border-radius: 8px;
  margin-bottom: 12px;
}
.logo-note strong { color: #ff6b35; }
.logo-best {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}
.logo-best strong { color: #1a1a2e; }

/* Logo Placements */
.logo-placements { background: #fff; }
.placements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.placement-card {
  background: #f9fafb;
  padding: 28px 24px;
  border-radius: 12px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.placement-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
.placement-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.placement-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
}

/* Logo Guide */
.logo-guide { background: #f9fafb; }

/* Logo Tips */
.logo-tips { background: #fff; }
.logo-tips-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.logo-tips-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.logo-tips-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 24px;
}
.logo-tips-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Logo Styles Responsive */
@media (max-width: 1200px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .placements-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .logo-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-tips-inner { grid-template-columns: 1fr; }
  .logo-tips-image { order: -1; }
  .logo-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .logo-banner { padding: 120px 0 80px; }
  .logo-banner h1 { font-size: 32px; }
  .logo-grid,
  .logo-benefits-grid,
  .placements-grid { grid-template-columns: 1fr; }
  .logo-tips-text h2 { font-size: 28px; }
}

/* ========== EXTRA CUSTOM OPTIONS PAGE ========== */
.extra-banner {
  background: linear-gradient(135deg, #f0f5ff 0%, #fff8f3 100%);
  padding: 140px 0 100px;
  text-align: center;
}
.extra-banner h1 {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.extra-banner p {
  font-size: 19px;
  color: #666;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 1.7;
}

/* Extra Intro */
.extra-intro { background: #fff; }
.extra-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.extra-benefit-card {
  background: #f9fafb;
  padding: 40px 28px;
  border-radius: 16px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.extra-benefit-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.extra-benefit-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.extra-benefit-icon i {
  font-size: 24px;
  color: #ff6b35;
}
.extra-benefit-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.extra-benefit-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Extra Categories */
.extra-category { background: #fff; }
.extra-category.alt-bg { background: #f9fafb; }
.extra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.extra-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.extra-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.extra-card-icon {
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.extra-card-icon i {
  font-size: 26px;
  color: #fff;
}
.extra-card-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.extra-card-body h3 small {
  display: block;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.extra-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Extra Guide */
.extra-guide { background: #fff; }

/* Extra MOQ */
.extra-moq { background: #f9fafb; }
.extra-moq-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.extra-moq-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.extra-moq-text p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 24px;
}
.extra-moq-image img {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

/* Extra Options Responsive */
@media (max-width: 1200px) {
  .extra-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .extra-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .extra-grid { grid-template-columns: repeat(2, 1fr); }
  .extra-moq-inner { grid-template-columns: 1fr; }
  .extra-moq-image { order: -1; }
  .extra-banner h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .extra-banner { padding: 120px 0 80px; }
  .extra-banner h1 { font-size: 32px; }
  .extra-grid,
  .extra-benefits-grid { grid-template-columns: 1fr; }
  .extra-card { padding: 26px; }
  .extra-moq-text h2 { font-size: 28px; }
}

/* ========== CUSTOM CREW SOCKS PAGE ========== */

/* Hero */
.crew-hero {
  background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
  padding: 100px 0 60px;
}
.crew-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.crew-hero-tag {
  display: inline-block;
  background: #ff6b35;
  color: #fff;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.crew-hero-text h1 {
  font-size: 40px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.15;
  margin-bottom: 22px;
}
.crew-hero-text p {
  font-size: 16px;
  color: #555;
  line-height: 2;
  margin-bottom: 28px;
  max-width: 560px;
}
.crew-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.crew-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1a1a2e;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.crew-badge i {
  color: #00b894;
}
.crew-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.crew-hero-buttons .btn-outline {
  border: 2px solid #1a1a2e;
  color: #1a1a2e;
  background: transparent;
}
.crew-hero-buttons .btn-outline:hover {
  background: #1a1a2e;
  color: #fff;
}
.crew-hero-image img {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(255,107,53,.15);
}
@keyframes crewFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Trust */
.crew-trust {
  background: #fff;
  padding: 50px 0;
  border-bottom: 1px solid #f0f0f0;
}
.crew-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.crew-trust-card {
  text-align: center;
  padding: 20px;
}
.crew-trust-card i {
  font-size: 32px;
  color: #ff6b35;
  margin-bottom: 14px;
  display: inline-block;
}
.crew-trust-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.crew-trust-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
}

/* Why Crew */
.crew-why { background: #fff; }
.crew-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.crew-why-card {
  background: #fff;
  padding: 36px 28px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
  border-bottom: 4px solid #ff6b35;
}
.crew-why-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.crew-why-card i {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #fff8f3;
  color: #ff6b35;
  border-radius: 50%;
  font-size: 24px;
  margin-bottom: 18px;
}
.crew-why-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.crew-why-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* Options */
.crew-options { background: #fff; }
.crew-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.crew-option-card {
  background: #f9fafb;
  padding: 28px 24px;
  border-radius: 12px;
  border-left: none;
  border-bottom: 4px solid #ff6b35;
  transition: transform .3s, box-shadow .3s;
}
.crew-option-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
.crew-option-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.crew-option-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Markets */
.crew-markets { background: #fff8f3; }
.crew-markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.crew-market-card {
  background: #fff;
  padding: 36px 28px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
  border-bottom: 4px solid #ff6b35;
}
.crew-market-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.crew-market-card i {
  width: 54px;
  height: 54px;
  line-height: 54px;
  background: #eef4ff;
  color: #2d5da1;
  border-radius: 10px;
  font-size: 22px;
  text-align: center;
  margin-bottom: 18px;
}
.crew-market-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.crew-market-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Process */
.crew-process { background: #fff8f3; }
.crew-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.crew-process-card {
  background: #f9fafb;
  padding: 36px 28px;
  border-radius: 16px;
  text-align: center;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}
.crew-process-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.crew-step-num {
  width: 48px;
  height: 48px;
  line-height: 48px;
  background: #ff6b35;
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 18px;
}
.crew-process-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.crew-process-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Testimonials */
.crew-testimonials { background: #fff8f3; }
.crew-testimonials .section-header h2,
.crew-testimonials .section-header p {
  color: #1a1a2e;
}
.crew-testimonials .section-tag {
  color: #ff6b35;
}
.crew-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.crew-testimonial-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  border-bottom: 4px solid #ff6b35;
}
.crew-stars {
  color: #fdcb6e;
  margin-bottom: 16px;
  font-size: 14px;
}
.crew-testimonial-card p {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 18px;
  font-style: italic;
}
.crew-testimonial-card span {
  font-size: 13px;
  color: #777;
  font-weight: 600;
}

/* FAQ（一问一答平铺形式，答案直接可见，无折叠） */
.crew-faq { background: #f8f9fa; }
.crew-faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crew-faq-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 18px 22px 16px;
  margin-bottom: 0;
  border-bottom: none;
}
.crew-faq-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  line-height: 1.5;
  margin: 0 0 8px;
  padding: 0;
  cursor: default;
}
.crew-faq-question::before {
  content: 'Q';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c8102e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.crew-faq-answer {
  max-height: none;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
  padding-bottom: 0;
}
.crew-faq-answer::before {
  content: 'A';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #c8102e;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.crew-faq-answer p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Final CTA */
.crew-final-cta {
  background: #ff6b35;
}
.crew-final-cta h2,
.crew-final-cta p {
  color: #fff;
}
.crew-final-cta .btn-primary {
  background: #fff;
  color: #ff6b35;
  border: 2px solid #fff;
}
.crew-final-cta .btn-primary:hover {
  background: transparent;
  color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
  .crew-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .crew-hero-text { order: 1; }
  .crew-hero-image { order: 0; }
  .crew-hero-text p { margin-left: auto; margin-right: auto; }
  .crew-hero-buttons { justify-content: center; }
  .crew-hero-badges { justify-content: center; }
  .crew-hero-text h1 { font-size: 44px; }
}
@media (max-width: 992px) {
  .crew-trust-grid,
  .crew-why-grid,
  .crew-options-grid,
  .crew-process-grid { grid-template-columns: repeat(2, 1fr); }
  .crew-markets-grid,
  .crew-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .crew-hero-text h1 { font-size: 38px; }
}
@media (max-width: 768px) {
  .crew-hero { padding: 130px 0 60px; }
  .crew-hero-text h1 { font-size: 32px; }
  .crew-trust-grid,
  .crew-why-grid,
  .crew-options-grid,
  .crew-process-grid,
  .crew-markets-grid,
  .crew-testimonials-grid { grid-template-columns: 1fr; }
  .crew-hero-buttons { flex-direction: column; }
  .crew-hero-buttons .btn { width: 100%; }
}

/* ========== CUSTOM CREW SOCKS PRODUCT HERO OVERRIDE ========== */
.crew-product-hero {
  background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
  padding: 100px 0 60px;
}
.crew-product-hero .crew-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.crew-product-hero .crew-hero-image {
  background: transparent;
  border-radius: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.crew-product-hero .crew-hero-image img {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(255,107,53,.15);
  filter: none;
  animation: none;
}
.crew-product-hero .crew-hero-text {
  text-align: left;
}
.crew-product-hero .crew-hero-text h1 {
  font-size: 40px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 16px;
  line-height: 1.2;
}
.crew-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.crew-stars-row {
  color: #fdcb6e;
  font-size: 16px;
  letter-spacing: 2px;
}
.crew-rating-label {
  font-size: 14px;
  color: #888;
}
.crew-hero-desc {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 24px;
}
.crew-specs {
  margin-bottom: 30px;
}
.crew-specs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: #444;
}
.crew-specs li i {
  color: #ff6b35;
  font-size: 14px;
  width: 18px;
}
.crew-specs li strong {
  min-width: 110px;
  color: #1a1a2e;
  font-weight: 700;
}
.crew-specs li span {
  color: #666;
}
.crew-product-hero .crew-hero-buttons {
  display: flex;
  gap: 14px;
}
.crew-product-hero .crew-hero-buttons .btn {
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
}
.crew-product-hero .crew-hero-buttons .btn:hover {
}
.btn-customize {
  background: #ff6b35;
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,107,53,.35);
}
.btn-customize:hover {
  background: #e55a2b;
}
.btn-free-design {
  background: #2d5da1;
  color: #fff;
  box-shadow: 0 6px 18px rgba(45,93,161,.3);
}
.btn-free-design:hover {
  background: #244a82;
}

@media (max-width: 992px) {
  .crew-product-hero .crew-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .crew-product-hero .crew-hero-text { order: 1; }
  .crew-product-hero .crew-hero-image { order: 0; }
  .crew-product-hero .crew-hero-text h1 { font-size: 32px; }
}
@media (max-width: 768px) {
  .crew-product-hero { padding: 100px 0 50px; }
  .crew-product-hero .crew-hero-image { padding: 30px; }
  .crew-product-hero .crew-hero-text h1 { font-size: 28px; }
  .crew-product-hero .crew-hero-buttons { flex-direction: column; }
  .crew-product-hero .crew-hero-buttons .btn { width: 100%; text-align: center; }
  .crew-specs li strong { min-width: 90px; }
}

/* ========== CREW SOCKS OPTIONS DETAIL ========== */
.crew-options-detail {
  background: #f5f6f8;
}
.crew-options-detail-header {
  text-align: center;
  margin-bottom: 50px;
}
.crew-options-detail-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.25;
}
.crew-options-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.crew-options-detail .crew-options-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.crew-options-detail .crew-option-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.crew-options-detail .crew-option-num {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #ff6b35;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.crew-options-detail .crew-option-content {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}
.crew-options-detail .crew-option-content strong {
  color: #1a1a2e;
  font-weight: 700;
  margin-right: 4px;
}
.crew-options-detail .crew-option-content span {
  color: #666;
}
.crew-options-detail .crew-options-image {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.crew-options-detail .crew-options-image img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 992px) {
  .crew-options-detail-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .crew-options-detail .crew-options-image { order: -1; padding: 30px; }
  .crew-options-detail-header h2 { font-size: 30px; }
}
@media (max-width: 768px) {
  .crew-options-detail-header h2 { font-size: 26px; }
  .crew-options-detail .crew-options-image { padding: 24px; }
  .crew-options-detail .crew-option-content { font-size: 14px; }
}

/* ========== CREW WHY CARDS (IMAGE TOP) ========== */
.crew-why-cards {
  background: #fff;
}
.crew-why-cards-header {
  text-align: center;
  margin-bottom: 50px;
}
.crew-why-cards-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a2e;
}
.crew-why-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.crew-why-card-img {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
  border-bottom: 4px solid #ff6b35;
}
.crew-why-card-img:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.crew-why-img {
  background: #f5f6f8;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
}
.crew-why-img img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}
.crew-why-card-img h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}
.crew-why-card-img p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

@media (max-width: 992px) {
  .crew-why-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .crew-why-cards-header h2 { font-size: 32px; }
}
@media (max-width: 768px) {
  .crew-why-cards-grid { grid-template-columns: 1fr; }
  .crew-why-cards-header h2 { font-size: 28px; }
  .crew-why-img { min-height: 160px; }
  .crew-why-img img { min-height: 160px; }
}

/* ========== CREW PROCESS BILINGUAL ========== */
.crew-process-bilingual {
  background: #fff;
}
.crew-process-bilingual-header {
  text-align: center;
  margin-bottom: 50px;
}
.crew-process-bilingual-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
}
.crew-process-bilingual-header h2 span {
  font-weight: 700;
}
.crew-process-bilingual-header p {
  font-size: 16px;
  color: #666;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto 8px;
}
.crew-process-bilingual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.crew-process-bilingual-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: left;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  position: relative;
  transition: none;
  border-bottom: 4px solid #ff6b35;
}
.crew-process-bilingual-card:hover {
  transform: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.crew-process-num {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: #ff6b35;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
  margin-bottom: 16px;
}
.crew-process-icon {
  display: none;
}
.crew-process-icon i {
  font-size: 28px;
}
.crew-process-bilingual-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 14px;
  line-height: 1.4;
}
.crew-process-bilingual-card h4 span {
  display: block;
  font-weight: 700;
  color: #1a1a2e;
}
.crew-process-bilingual-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 8px;
}
.crew-process-bilingual-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .crew-process-bilingual-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .crew-process-bilingual-header h2 { font-size: 28px; }
  .crew-process-bilingual-grid { grid-template-columns: 1fr; }
  .crew-process-bilingual-card { padding: 36px 24px 28px; }
}

/* ========== CASE STUDIES PAGE ========== */
.case-hero {
  background: #fff;
  padding: 120px 0 70px;
}
.case-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.case-tag {
  display: inline-block;
  color: #ff6b35;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.case-hero-text h1 {
  font-size: 44px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 20px;
}
.case-hero-text p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 28px;
}
.case-hero-image {
  background: #f5f6f8;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-hero-image img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* Case Grid */
.case-studies { background: #f9fafb; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.case-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.case-card-img {
  background: #f5f6f8;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.case-card-img img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}
.case-card-body {
  padding: 28px;
}
.case-industry {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #ff6b35;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.case-card-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
  line-height: 1.4;
}
.case-card-body > p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 18px;
}
.case-results {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 18px;
}
.case-result {
  text-align: center;
}
.case-result strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
}
.case-result span {
  font-size: 12px;
  color: #888;
}
.case-link {
  font-size: 14px;
  font-weight: 700;
  color: #2d5da1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .3s;
}
.case-link:hover {
  color: #ff6b35;
}

/* Testimonials */
.case-testimonials { background: #fff; }
.case-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.case-testimonial-card {
  background: #f9fafb;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
}
.case-stars {
  color: #fdcb6e;
  margin-bottom: 16px;
  font-size: 14px;
}
.case-testimonial-card p {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 18px;
  font-style: italic;
}
.case-testimonial-card span {
  font-size: 13px;
  color: #777;
  font-weight: 600;
}

/* CTA */
.case-cta {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
  color: #fff;
  text-align: center;
}
.case-cta h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
}
.case-cta p {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  max-width: 700px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 1200px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .case-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .case-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .case-hero-text h1 { font-size: 32px; }
  .case-grid,
  .case-testimonial-grid { grid-template-columns: 1fr; }
}

/* ========== SERVICE PAGES (OEM / ODM / WHITE LABEL / LABEL PACKAGING) ========== */
.service-hero {
  background: #fff;
  padding: 120px 0 70px;
}
.service-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.service-tag {
  display: inline-block;
  color: #ff6b35;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.service-hero-text h1 {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 20px;
}
.service-hero-text p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 28px;
}
.service-hero-image {
  background: #f5f6f8;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-hero-image img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}

/* Intro */
.service-intro { background: #f9fafb; }
.service-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-intro-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s;
}
.service-intro-card:hover {
  transform: translateY(-5px);
}
.service-intro-card i {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #eef4ff;
  color: #2d5da1;
  border-radius: 12px;
  font-size: 24px;
  margin-bottom: 18px;
}
.service-intro-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.service-intro-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Benefits */
.service-benefits { background: #fff; }
.service-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-benefit-card {
  background: #f9fafb;
  border-radius: 16px;
  padding: 28px;
  transition: background .3s;
}
.service-benefit-card:hover {
  background: #f0f5ff;
}
.service-benefit-card i {
  font-size: 26px;
  color: #ff6b35;
  margin-bottom: 14px;
}
.service-benefit-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.service-benefit-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Audience */
.service-audience { background: #fff; }
.odm-products { background: #fff; }
.odm-products-more { text-align: center; margin-top: 40px; }
.odm-products-more .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #ff6b35;
  border: 2px solid #ff6b35;
  border-radius: 50px;
  transition: background .3s, border-color .3s, transform .3s;
}
.odm-products-more .btn:hover {
  background: #e55a28;
  border-color: #e55a28;
  transform: translateY(-2px);
}
.service-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-audience-card {
  background: #f9fafb;
  border-radius: 16px;
  padding: 28px;
  transition: background .3s;
}
.service-audience-card:hover {
  background: #f0f5ff;
}
.service-audience-card i {
  font-size: 26px;
  color: #ff6b35;
  margin-bottom: 14px;
}
.service-audience-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.service-audience-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Process */
.service-process { background: #f9fafb; }
.service-process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.service-process-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  position: relative;
  padding-top: 55px;
}
.service-process-card span {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #ff6b35;
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
}
.service-process-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.service-process-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* CTA */
.service-cta {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
  color: #fff;
  text-align: center;
}
.service-cta h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
}
.service-cta p {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  max-width: 700px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 1200px) {
  .service-process-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .service-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .service-intro-grid,
  .service-benefits-grid,
  .service-audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .service-hero-text h1 { font-size: 32px; }
  .service-intro-grid,
  .service-benefits-grid,
  .service-audience-grid,
  .service-process-grid { grid-template-columns: 1fr; }
  .service-cta h2 { font-size: 28px; }
}


/* =====================================================
   PAGE-SPECIFIC STYLES MIGRATED FROM TEMPLATE FILES
   ===================================================== */


/* front-page.php CSS */
/* Hero */
.home .hero{ padding: 140px 0 90px; background: linear-gradient(135deg, #fff8f3 0%, #fff 55%, #fff0e6 100%); min-height: 620px; display: flex; align-items: center; }
.home .hero h1,
.home .hero-title h1,
.home .hero-title span{ font-size: 54px; font-weight: 800; line-height: 1.12; color: #1a1a2e; }
.home .hero h1,
.home .hero-title h1{ margin: 0 0 22px; }
.home .hero-title span{ display: block; margin: 0 0 4px; }
.home .hero-title h1{ display: block; }
.home .hero-desc{ font-size: 19px; color: #666; margin-bottom: 38px; max-width: 600px; line-height: 1.8; }
.home .hero-image{ border-radius: 20px; overflow: hidden; box-shadow: none; }
.home .hero-image img{ border-radius: 20px; box-shadow: none; }
.home .hero-image::before{ content: none; }
.home .hero .btn-primary{ background: #ff6b35; border-color: #ff6b35; }
.home .hero .btn-primary:hover{ background: #e55a28; border-color: #e55a28; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,107,53,.35); }
.home .hero .btn-outline{ border-color: #ff6b35; color: #ff6b35; }
.home .hero .btn-outline:hover{ background: #ff6b35; color: #fff; }

    /* Section common */
.home .section{ padding: 100px 0; }
.home .section-header{ margin-bottom: 70px; }
.home .section-header h2{ font-size: 40px; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; }
.home .section-header p{ font-size: 18px; color: #777; max-width: 700px; margin: 0 auto; line-height: 1.8; }

    /* Layered backgrounds */
.home .how-it-works{ background: #fff8f3; }
.home .products{ background: #fff; }
.home .why-sockmader{ background: #fff8f3; padding-top: 60px; }
.home .custom-options{ background: #fff; }
.home .faq{ background: #fff8f3; }

    /* Step / option cards */
.home .step-card{ background: #fff; border-radius: 20px; padding: 36px 34px; box-shadow: 0 6px 28px rgba(0,0,0,.06); border-bottom: 4px solid transparent; transition: none; text-align: left; }
.home .step-card:hover{ transform: none; box-shadow: 0 6px 28px rgba(0,0,0,.06); }
.home a.step-card{ text-decoration: none; color: inherit; display: flex; }
.home a.step-card:hover{ transform: none; box-shadow: 0 6px 28px rgba(0,0,0,.06); border-bottom-color: transparent; }
.home .step-number{ position: static; transform: none; width: 36px; height: 36px; font-size: 15px; font-weight: 800; background: #ff6b35; color: #fff; box-shadow: none; border-radius: 8px; margin-bottom: 16px; }
.home .step-icon{ display: none; }
.home .step-card h3{ font-size: 22px; font-weight: 700; margin-bottom: 14px; color: #1a1a2e; }
.home .step-card p{ font-size: 15px; color: #666; line-height: 1.8; }
.home .step-card .btn-outline{ border-color: #ff6b35; color: #ff6b35; margin-top: auto; }
.home a.step-card:hover .btn-outline{ background: #ff6b35; color: #fff; }

    /* Products */
.home .product-card{ background: #fff; border-radius: 18px; border: 1px solid #f5f5f5; box-shadow: 0 5px 22px rgba(0,0,0,.06); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.home .product-card:hover{ transform: translateY(-7px); box-shadow: 0 14px 40px rgba(0,0,0,.1); }
.home .product-img{ height: 360px; min-height: 360px; aspect-ratio: 1 / 1; overflow: hidden; background: #f8f8f8; display: flex; align-items: center; justify-content: center; padding: 0; }
.home .product-img a{ display: flex; width: 100%; height: 100%; }
.home .product-img img{ width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.home .product-card:hover .product-img img{ transform: scale(1.05); }
.home .product-info{ padding: 26px; }
.home .product-info h3{ font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #1a1a2e; }
.home .product-info h3 a{ color: #1a1a2e; }
.home .product-info h3 a:hover{ color: #ff6b35; }
.home .product-price{ color: #ff6b35; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.home .product-info p{ font-size: 14px; color: #777; line-height: 1.7; }
.home .btn-link{ color: #ff6b35; font-weight: 600; }
.home .btn-link:hover{ color: #e55a28; }
.home .btn-secondary{ background: #ff6b35; color: #fff; border-color: #ff6b35; }
.home .btn-secondary:hover{ background: #e55a28; border-color: #e55a28; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,107,53,.35); }

    /* CTA Banner */
.home .cta-banner{ background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%); padding: 75px 0; }
.home .cta-banner h2{ font-size: 34px; font-weight: 800; margin-bottom: 25px; color: #fff; }
.home .cta-banner .btn-primary{ background: #fff; color: #ff6b35; border-color: #fff; }
.home .cta-banner .btn-primary:hover{ background: rgba(255,255,255,.95); transform: translateY(-2px); }

    /* Why Sockmader */
.home .why-content{ gap: 55px; margin-bottom: 65px; }
.home .why-text p{ font-size: 16px; color: #555; line-height: 2; margin-bottom: 18px; }
.home .why-text b{ color: #1a1a2e; font-size: 18px; }
.home .why-image img{ border-radius: 20px; box-shadow: 0 18px 55px rgba(0,0,0,.1); }
.home .feature-card{ background: #fff; border-radius: 18px; padding: 38px 30px; box-shadow: 0 5px 22px rgba(0,0,0,.05); border-bottom: 3px solid #ff6b35; }
.home .feature-icon{ font-size: 34px; color: #ff6b35; margin-bottom: 16px; }
.home .feature-card h4{ font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #1a1a2e; }
.home .feature-card p{ font-size: 14px; color: #666; line-height: 1.8; }

    /* Custom options */
.home .option-card{ background: #fff; border-radius: 18px; padding: 34px 28px; box-shadow: 0 5px 22px rgba(0,0,0,.05); border-bottom: 3px solid #ff6b35; }
.home .option-icon{ width: 56px; height: 56px; line-height: 56px; font-size: 24px; border-radius: 14px; background: rgba(255,107,53,.1); color: #ff6b35; }
.home .option-content h3{ font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; }
.home .option-content p{ font-size: 15px; color: #666; line-height: 1.8; }
.home .option-content a{ color: #ff6b35; font-weight: 600; }

    /* FAQ - static Q&A */
.home .faq-list{ max-width: 900px; margin: 0 auto; }
.home .faq-item{ background: #fff; border-radius: 16px; margin-bottom: 16px; box-shadow: 0 3px 15px rgba(0,0,0,.04); border: 1px solid #f0f0f0; padding: 24px 24px 24px 72px; position: relative; border-left: 4px solid #ff6b35; }
.home .faq-num{ position: absolute; left: 24px; top: 24px; width: 36px; height: 36px; background: #ff6b35; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.home .faq-q{ font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.home .faq-a{ font-size: 15px; color: #666; line-height: 1.8; }

    /* Final CTA */
.home .final-cta{ background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%); padding: 95px 0; }
.home .final-cta h2{ font-size: 40px; font-weight: 800; margin-bottom: 16px; color: #fff; }
.home .final-cta p{ font-size: 18px; color: rgba(255,255,255,.9); margin-bottom: 35px; }
.home .final-cta .btn-primary{ background: #fff; color: #ff6b35; border-color: #fff; }
.home .final-cta .btn-primary:hover{ background: rgba(255,255,255,.95); transform: translateY(-3px); }

    /* Responsive */
    @media (max-width: 1024px) {
.home .hero h1,
.home .hero-title h1,
.home .hero-title span{ font-size: 44px; }
.home .section-header h2{ font-size: 34px; }
    }
    @media (max-width: 768px) {
.home .hero{ padding: 120px 0 70px; min-height: auto; }
.home .hero h1,
.home .hero-title h1,
.home .hero-title span{ font-size: 34px; }
.home .section{ padding: 70px 0; }
.home .section-header{ margin-bottom: 50px; }
.home .section-header h2{ font-size: 28px; }
.home .step-card{ padding: 36px 24px; }
.home .why-sockmader{ padding-top: 60px; }
    }



/* page-about.php CSS */
/* Hero */
.page-template-page-about .about-hero{ padding: 100px 0 60px; background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%); }
.page-template-page-about .about-hero-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.page-template-page-about .about-hero-img{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.page-template-page-about .about-hero-img img{ width: 80%; height: calc(100% - 90px); object-fit: cover; object-position: top; border-radius: 20px; box-shadow: 0 10px 40px rgba(255,107,53,.15); display: block; }
.page-template-page-about .founder-caption{ text-align: center; margin-top: 16px; font-size: 14px; color: #555; line-height: 1.6; }
.page-template-page-about .founder-caption strong{ font-size: 18px; font-weight: 700; color: #1a1a2e; }
.page-template-page-about .founder-caption strong,
.page-template-page-about .founder-caption span{ display: inline; }
.page-template-page-about .founder-caption strong::after,
.page-template-page-about .founder-caption span + span::before{ content: " · "; }
.page-template-page-about .about-hero h1,
.page-template-page-about .about-hero .hero-title h1,
.page-template-page-about .about-hero .hero-title span{ font-size: 40px; font-weight: 800; color: #1a1a2e; line-height: 1.3; }
.page-template-page-about .about-hero h1,
.page-template-page-about .about-hero .hero-title h1{ margin: 0 0 20px; }
.page-template-page-about .about-hero .hero-title span{ display: block; margin: 0 0 4px; }
.page-template-page-about .about-hero .hero-title h1{ display: block; }
.page-template-page-about .about-hero .tagline{ font-size: 22px; color: #ff6b35; font-weight: 700; margin-bottom: 20px; }
.page-template-page-about .about-hero p{ font-size: 16px; color: #555; line-height: 2; margin-bottom: 16px; }

    /* Shared */
.page-template-page-about .section-title{ font-size: 32px; font-weight: 800; color: #1a1a2e; margin-bottom: 12px; text-align: center; }
.page-template-page-about .section-subtitle{ font-size: 16px; color: #888; text-align: center; margin-bottom: 45px; line-height: 1.8; }
.page-template-page-about .content-block{ max-width: 960px; margin: 0 auto; }
.page-template-page-about .content-block p{ font-size: 16px; color: #555; line-height: 2; margin-bottom: 16px; }

    /* Photo placeholders */
.page-template-page-about .photo-placeholder{
      width: 100%; border-radius: 16px;
      background: linear-gradient(135deg, #fff0e6 0%, #ffe0cc 50%, #ffd4b8 100%);
      display: flex; align-items: center; justify-content: center; color: #cc5522; font-size: 15px;
      font-weight: 600; border: 2px dashed #ffcba4; min-height: 280px;
      position: relative; overflow: hidden;
    }
.page-template-page-about .photo-placeholder img{
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: 16px; display: block;
    }
.page-template-page-about .photo-placeholder-sm{ min-height: 200px; font-size: 14px; }

    /* Team photo */
.page-template-page-about .team-photo-section{ padding: 60px 0; background: #fff; }
.page-template-page-about .team-photo-section .photo-placeholder{ max-width: 900px; margin: 0 auto; min-height: 400px; }

    /* Service principles */
.page-template-page-about .principles-section{ padding: 80px 0; background: #fff8f3; }
.page-template-page-about .principles-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1100px; margin: 0 auto; }
.page-template-page-about .principles-text p{ font-size: 16px; color: #555; line-height: 2; margin-bottom: 16px; }
.page-template-page-about .principles-list{ list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-template-page-about .principles-list li{ display: flex; align-items: center; gap: 10px; font-size: 15px; color: #333; font-weight: 600; }
.page-template-page-about .principles-list li i{ color: #ff6b35; font-size: 18px; }
.page-template-page-about .principles-img .photo-placeholder{ min-height: 360px; }

    /* Factory section */
.page-template-page-about .factory-section{ padding: 80px 0; background: #fff; }
.page-template-page-about .factory-intro-text{ max-width: 960px; margin: 0 auto 45px; }
.page-template-page-about .factory-intro-text p{ font-size: 16px; color: #555; line-height: 2; margin-bottom: 16px; }
.page-template-page-about .factory-showcase{ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 24px; overflow: hidden; margin-bottom: 50px; box-shadow: 0 15px 50px rgba(26,26,46,.2); }
.page-template-page-about .factory-showcase-img{ width: 100%; min-height: 400px; background-color: #2a2a4a; position: relative; overflow: hidden; }
.page-template-page-about .factory-showcase-img .photo-placeholder{ width: 100%; height: 100%; min-height: 400px; border: none; border-radius: 0; background: transparent; position: absolute; top: 0; left: 0; }
.page-template-page-about .factory-showcase-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.page-template-page-about .factory-stats-bar{ display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.page-template-page-about .factory-stat{ text-align: center; padding: 32px 20px; position: relative; }
.page-template-page-about .factory-stat:not(:last-child)::after{ content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,.1); }
.page-template-page-about .factory-stat .stat-icon{ font-size: 30px; color: #ff6b35; margin-bottom: 14px; }
.page-template-page-about .factory-stat .num{ font-size: 38px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 6px; }
.page-template-page-about .factory-stat .num span{ font-size: 20px; font-weight: 600; color: #ff6b35; }
.page-template-page-about .factory-stat .label{ font-size: 14px; color: rgba(255,255,255,.55); letter-spacing: 1px; text-transform: uppercase; }

    /* Equipment */
.page-template-page-about .equipment-section{ padding: 80px 0; background: #fff8f3; }
.page-template-page-about .equipment-gallery{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1200px; margin: 35px auto 0; }
.page-template-page-about .equipment-gallery .photo-placeholder{ min-height: 220px; overflow: hidden; }
.page-template-page-about .equipment-item, .page-template-page-about .packaging-item{ text-align: center; }
.page-template-page-about .equipment-item h4, .page-template-page-about .packaging-item h4{ margin-top: 14px; font-size: 15px; font-weight: 600; color: #333; }

    /* Certifications */
.page-template-page-about .certs-section{ padding: 80px 0; background: #fff; }
.page-template-page-about .certs-gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 35px auto 0; }
.page-template-page-about .certs-gallery .photo-placeholder{ min-height: 220px; }

    /* Packaging */
.page-template-page-about .packaging-section{ padding: 80px 0; background: #fff8f3; }
.page-template-page-about .packaging-intro{ max-width: 960px; margin: 0 auto 35px; }
.page-template-page-about .packaging-intro p{ font-size: 16px; color: #555; line-height: 2; margin-bottom: 14px; }
.page-template-page-about .packaging-gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.page-template-page-about .packaging-gallery .photo-placeholder{ min-height: 220px; }

    /* Warehouse */
.page-template-page-about .warehouse-section{ padding: 80px 0; background: #fff; }
.page-template-page-about .warehouse-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1100px; margin: 0 auto; }
.page-template-page-about .warehouse-grid p{ font-size: 16px; color: #555; line-height: 2; }

    /* Quality Management */
.page-template-page-about .quality-section{ padding: 80px 0; background: #fff8f3; }
.page-template-page-about .pdca-cycle{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1100px; margin: 45px auto; }
.page-template-page-about .pdca-item{ background: #fff; border-radius: 18px; padding: 36px 24px; text-align: center; box-shadow: 0 5px 25px rgba(0,0,0,.06); border-bottom: 4px solid #ff6b35; transition: transform .3s, box-shadow .3s; }
.page-template-page-about .pdca-item:hover{ transform: translateY(-6px); box-shadow: 0 10px 35px rgba(255,107,53,.12); }
.page-template-page-about .pdca-item .pdca-letter{ font-size: 42px; font-weight: 800; color: #ff6b35; margin-bottom: 10px; }
.page-template-page-about .pdca-item h4{ font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.page-template-page-about .pdca-item p{ font-size: 14px; color: #888; line-height: 1.7; }

.page-template-page-about .qc-process{ max-width: 1100px; margin: 60px auto 0; padding: 48px 44px; background: #fff; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.page-template-page-about .qc-process-title{ font-size: 24px; font-weight: 700; color: #1a1a2e; text-align: center; margin-bottom: 40px; }
.page-template-page-about .qc-flow-v2{ display: flex; flex-direction: column; gap: 10px; }
.page-template-page-about .qc-flow-v2-row{ display: flex; align-items: flex-start; gap: 16px; }
.page-template-page-about .qc-flow-v2-step{ flex: 1; text-align: center; padding: 26px 14px; background: #fffaf7; border-radius: 16px; min-width: 0; transition: transform .3s, box-shadow .3s; }
.page-template-page-about .qc-flow-v2-step:hover{ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(255,107,53,.12); }
.page-template-page-about .qc-flow-v2-num{ display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #ff6b35; color: #fff; border-radius: 50%; font-size: 18px; font-weight: 800; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(255,107,53,.3); }
.page-template-page-about .qc-flow-v2-step p{ font-size: 14px; color: #333; font-weight: 600; line-height: 1.5; margin: 0; }
.page-template-page-about .qc-flow-v2-arrow-h{ width: 40px; height: 8px; background: #ff6b35; position: relative; flex-shrink: 0; margin-top: 26px; border-radius: 4px; box-shadow: 0 2px 6px rgba(255,107,53,.25); }
.page-template-page-about .qc-flow-v2-arrow-h::after{ content: ''; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #ff6b35; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.page-template-page-about .qc-flow-v2-turn{ display: flex; justify-content: flex-end; padding-right: calc(12.5% - 8px); }
.page-template-page-about .qc-flow-v2-arrow-v{ width: 8px; height: 50px; background: #ff6b35; position: relative; border-radius: 4px; box-shadow: 0 2px 6px rgba(255,107,53,.25); }
.page-template-page-about .qc-flow-v2-arrow-v::after{ content: ''; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background: #ff6b35; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* 蛇形排版：第二行视觉上反转为 7-6-5，第4步向下指向第5步，箭头向左，路径为 4↓5→6→7 */
.page-template-page-about .qc-flow-v2-row:last-of-type{ flex-direction: row-reverse; }
.page-template-page-about .qc-flow-v2-row:last-of-type .qc-flow-v2-arrow-h::after{ right: auto; left: -13px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }

.page-template-page-about .quality-step{ display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1100px; margin: 50px auto; }
.page-template-page-about .quality-step:nth-child(even){ direction: rtl; }
.page-template-page-about .quality-step:nth-child(even) > *{ direction: ltr; }
.page-template-page-about .quality-step h3{ font-size: 22px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.page-template-page-about .quality-step p{ font-size: 16px; color: #555; line-height: 2; }
.page-template-page-about .quality-step .photo-placeholder{ min-height: 280px; }

    /* CTA */
.page-template-page-about .about-cta{ padding: 80px 0; background: #ff6b35; text-align: center; }
.page-template-page-about .about-cta h2{ font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.page-template-page-about .about-cta p{ font-size: 17px; color: rgba(255,255,255,.9); margin-bottom: 30px; }
.page-template-page-about .about-cta .btn{ background: #fff; color: #ff6b35; font-weight: 700; padding: 16px 44px; border-radius: 12px; font-size: 16px; transition: transform .3s; }
.page-template-page-about .about-cta .btn:hover{ transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }

    /* Responsive */
    @media (max-width: 768px) {
.page-template-page-about .about-hero-inner, .page-template-page-about .principles-grid, .page-template-page-about .factory-intro, .page-template-page-about .warehouse-grid, .page-template-page-about .quality-step{ grid-template-columns: 1fr; }
.page-template-page-about .quality-step:nth-child(even){ direction: ltr; }
.page-template-page-about .equipment-gallery, .page-template-page-about .certs-gallery, .page-template-page-about .packaging-gallery{ grid-template-columns: 1fr 1fr; }
.page-template-page-about .pdca-cycle{ grid-template-columns: 1fr 1fr; }
.page-template-page-about .factory-stats{ grid-template-columns: repeat(3, 1fr); }
.page-template-page-about .principles-list{ grid-template-columns: 1fr; }
.page-template-page-about .factory-stats-bar{ grid-template-columns: repeat(2, 1fr); }
.page-template-page-about .factory-stat:not(:last-child)::after{ display: none; }
.page-template-page-about .factory-stat .num{ font-size: 30px; }
.page-template-page-about .factory-showcase-img{ min-height: 260px; }
.page-template-page-about .qc-flow-v2-row{ flex-direction: column; gap: 20px; }
.page-template-page-about .qc-flow-v2-row:last-of-type{ flex-direction: column; }
.page-template-page-about .qc-flow-v2-arrow-h,
.page-template-page-about .qc-flow-v2-turn{ display: none; }
.page-template-page-about .factory-showcase-img .photo-placeholder{ min-height: 260px; }
    }



/* page-faqs.php CSS */
.page-template-page-faqs .faq-intro{ text-align: center; max-width: 800px; margin: 0 auto 40px; }
.page-template-page-faqs .faq-intro h1{ font-size: 42px; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; }
.page-template-page-faqs .faq-intro p{ font-size: 17px; color: #555; line-height: 2; }
.page-template-page-faqs .faq-intro p a{ color: #ff6b35; text-decoration: underline; }
.page-template-page-faqs .faq-group{ margin-bottom: 60px; }
.page-template-page-faqs .faq-group-title{ font-size: 26px; font-weight: 800; color: #1a1a2e; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 3px solid #ff6b35; }
.page-template-page-faqs .faq-item{ background: #fff; border-radius: 14px; margin-bottom: 20px; box-shadow: 0 3px 15px rgba(0,0,0,.05); border: 1px solid #f0f0f0; overflow: hidden; padding: 28px 28px 28px 80px; position: relative; }
.page-template-page-faqs .faq-item .faq-num{ position: absolute; left: 24px; top: 28px; width: 42px; height: 42px; background: #ff6b35; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.page-template-page-faqs .faq-item .faq-q{ font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; line-height: 1.6; }
.page-template-page-faqs .faq-item .faq-a{ font-size: 16px; color: #555; line-height: 2; }
.page-template-page-faqs .faq-item .faq-a a{ color: #ff6b35; text-decoration: underline; }
.page-template-page-faqs .still-questions{ text-align: center; padding: 60px 30px; background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%); border-radius: 18px; margin: 50px 0; border: 1px solid #ffe0cc; }
.page-template-page-faqs .still-questions h3{ font-size: 26px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.page-template-page-faqs .still-questions p{ font-size: 17px; color: #555; margin-bottom: 24px; }



/* page-news.php CSS */
/* Banner */
.page-template-page-news .news-banner{ padding: 110px 0 50px; background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%); }
.page-template-page-news .news-banner-inner{ text-align: center; max-width: 750px; margin: 0 auto; }
.page-template-page-news .news-banner h1{ font-size: 42px; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; }
.page-template-page-news .news-banner p{ font-size: 17px; color: #555; line-height: 1.9; }

    /* Section Header */
.page-template-page-news .news-section-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.page-template-page-news .news-section-header h2{ font-size: 24px; font-weight: 800; color: #1a1a2e; display: flex; align-items: center; gap: 10px; }
.page-template-page-news .news-section-header h2 i{ color: #ff6b35; font-size: 22px; }
.page-template-page-news .news-section-header .view-all{ font-size: 14px; font-weight: 600; color: #ff6b35; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: gap .3s; }
.page-template-page-news .news-section-header .view-all:hover{ gap: 9px; }

    /* Featured Hero Article (full width big image) */
.page-template-page-news .news-hero-article{ margin-bottom: 60px; }
.page-template-page-news .hero-article-card{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 35px rgba(0,0,0,.08); border: 1px solid #f0f0f0; }
.page-template-page-news .hero-article-img{ height: 100%; min-height: 420px; overflow: hidden; }
.page-template-page-news .hero-article-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.page-template-page-news .hero-article-card:hover .hero-article-img img{ transform: scale(1.05); }
.page-template-page-news .hero-article-body{ padding: 45px; display: flex; flex-direction: column; justify-content: center; }
.page-template-page-news .hero-article-tag{ display: inline-block; background: #fff0e6; color: #ff6b35; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px; margin-bottom: 18px; width: fit-content; }
.page-template-page-news .hero-article-body h2{ font-size: 28px; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; line-height: 1.4; }
.page-template-page-news .hero-article-body h2 a{ color: inherit; text-decoration: none; }
.page-template-page-news .hero-article-body h2 a:hover{ color: #ff6b35; }
.page-template-page-news .hero-article-body p{ font-size: 16px; color: #666; line-height: 1.9; margin-bottom: 22px; }
.page-template-page-news .hero-article-meta{ font-size: 14px; color: #999; margin-bottom: 28px; }
.page-template-page-news .hero-article-body .btn-primary{ background: #ff6b35; color: #fff; border-color: #ff6b35; }

    /* Category Columns */
.page-template-page-news .news-main{ padding: 0 0 80px; background: #f8f9fb; }
.page-template-page-news .news-columns{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

    /* Column */
.page-template-page-news .news-column{ background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.page-template-page-news .news-column-header{ padding: 22px 24px; border-bottom: 3px solid #ff6b35; }
.page-template-page-news .news-column-header h3 a{ color: inherit; text-decoration: none; }
.page-template-page-news .news-column-header h3 a:hover{ color: #ff6b35; }

/* Content Cluster Pillar Pages */
.page-template-page-cluster-crew-socks .cluster-pillar{ display: grid; grid-template-columns: 1fr 320px; gap: 50px; }
.page-template-page-cluster-crew-socks .cluster-main{ background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 5px 25px rgba(0,0,0,.06); }
.page-template-page-cluster-crew-socks .cluster-intro h2{ font-size: 28px; font-weight: 700; color: #1a1a2e; margin-bottom: 18px; }
.page-template-page-cluster-crew-socks .cluster-intro p,
.page-template-page-cluster-crew-socks .cluster-content-block p{ font-size: 16px; color: #555; line-height: 1.9; margin-bottom: 16px; }
.page-template-page-cluster-crew-socks .cluster-toc{ background: #fff8f3; border-radius: 14px; padding: 24px 28px; margin: 32px 0; }
.page-template-page-cluster-crew-socks .cluster-toc h3{ font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.page-template-page-cluster-crew-socks .cluster-toc ul{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.page-template-page-cluster-crew-socks .cluster-toc a{ color: #ff6b35; font-weight: 600; text-decoration: none; }
.page-template-page-cluster-crew-socks .cluster-toc a:hover{ text-decoration: underline; }
.page-template-page-cluster-crew-socks .cluster-content-block{ margin-bottom: 36px; }
.page-template-page-cluster-crew-socks .cluster-content-block h2{ font-size: 24px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.page-template-page-cluster-crew-socks .cluster-content-block ul{ padding-left: 20px; margin-bottom: 16px; }
.page-template-page-cluster-crew-socks .cluster-content-block li{ font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 8px; }
.page-template-page-cluster-crew-socks .cluster-grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.page-template-page-cluster-crew-socks .cluster-card{ background: #f9fafb; border-radius: 12px; padding: 20px; }
.page-template-page-cluster-crew-socks .cluster-card h4{ font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.page-template-page-cluster-crew-socks .cluster-card p{ font-size: 14px; color: #666; line-height: 1.6; margin: 0; }
.page-template-page-cluster-crew-socks .cluster-faq{ display: flex; flex-direction: column; gap: 16px; }
.page-template-page-cluster-crew-socks .cluster-faq-item{ background: #f9fafb; border-radius: 12px; padding: 18px 20px; }
.page-template-page-cluster-crew-socks .cluster-faq-item h4{ font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.page-template-page-cluster-crew-socks .cluster-faq-item p{ font-size: 14px; color: #666; line-height: 1.6; margin: 0; }
.page-template-page-cluster-crew-socks .cluster-sidebar{ display: flex; flex-direction: column; gap: 24px; }
.page-template-page-cluster-crew-socks .cluster-widget{ background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.page-template-page-cluster-crew-socks .cluster-widget h4{ font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; }
.page-template-page-cluster-crew-socks .cluster-widget ul{ list-style: none; padding: 0; margin: 0; }
.page-template-page-cluster-crew-socks .cluster-widget li{ margin-bottom: 10px; }
.page-template-page-cluster-crew-socks .cluster-widget a{ color: #555; text-decoration: none; font-size: 14px; }
.page-template-page-cluster-crew-socks .cluster-widget a:hover{ color: #ff6b35; }
.page-template-page-cluster-crew-socks .cluster-cta{ background: #1a1a2e; color: #fff; text-align: center; }
.page-template-page-cluster-crew-socks .cluster-cta h4{ color: #fff; }
.page-template-page-cluster-crew-socks .cluster-cta p{ font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 16px; }
@media (max-width: 992px) {
  .page-template-page-cluster-crew-socks .cluster-pillar{ grid-template-columns: 1fr; }
  .page-template-page-cluster-crew-socks .cluster-toc ul{ grid-template-columns: 1fr; }
  .page-template-page-cluster-crew-socks .cluster-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .page-template-page-cluster-crew-socks .cluster-main{ padding: 24px; }
  .page-template-page-cluster-crew-socks .cluster-grid-3{ grid-template-columns: 1fr; }
}

/* Category Archive - Content Cluster Hub */
.category-hero{ background: linear-gradient(135deg, #1a1a2e 0%, #252540 100%); color: #fff; padding: 70px 0 80px; text-align: center; }
.category-hero .category-breadcrumb{ display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 22px; flex-wrap: wrap; }
.category-hero .category-breadcrumb a{ color: rgba(255,255,255,.85); text-decoration: none; }
.category-hero .category-breadcrumb a:hover{ color: #ff6b35; }
.category-hero h1{ font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 18px; }
.category-hero-desc{ font-size: 18px; color: rgba(255,255,255,.8); max-width: 760px; margin: 0 auto 28px; line-height: 1.7; }
.category-hero-desc p{ margin: 0; }
.category-hero-actions{ display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.category-hero-actions .btn-secondary{ background: transparent; border: 2px solid rgba(255,255,255,.4); color: #fff; }
.category-hero-actions .btn-secondary:hover{ background: #fff; color: #1a1a2e; border-color: #fff; }
.category-hub-layout{ display: grid; grid-template-columns: 1fr 340px; gap: 50px; }
.category-main .category-intro{ background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,.06); margin-bottom: 36px; }
.category-main .category-intro h2{ font-size: 26px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.category-main .category-intro p{ font-size: 15px; color: #555; line-height: 1.8; margin: 0; }
.category-posts-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; }
.category-post-card{ background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; }
.category-post-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.category-post-img{ height: 200px; overflow: hidden; background: #f5f5f5; }
.category-post-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.category-post-card:hover .category-post-img img{ transform: scale(1.05); }
.category-post-body{ padding: 22px; }
.category-post-body h3{ font-size: 17px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; }
.category-post-body h3 a{ color: #1a1a2e; text-decoration: none; }
.category-post-body h3 a:hover{ color: #ff6b35; }
.category-post-body p{ font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 14px; }
.category-post-body .read-more{ color: #ff6b35; font-weight: 600; font-size: 14px; text-decoration: none; }
.category-post-body .read-more:hover{ text-decoration: underline; }
.category-sidebar{ display: flex; flex-direction: column; gap: 24px; }
.category-widget{ background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.category-widget h4{ font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 18px; }
.category-widget-cta{ background: #fff8f3; border: 1px solid #ffe3d6; text-align: center; }
.category-widget-cta p{ font-size: 14px; color: #555; margin-bottom: 18px; line-height: 1.6; }
.category-widget ul{ list-style: none; padding: 0; margin: 0; }
.category-widget li{ margin-bottom: 10px; }
.category-widget li a{ color: #555; text-decoration: none; font-size: 14px; }
.category-widget li a:hover{ color: #ff6b35; }
.category-checklist li{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: #444; }
.category-checklist li i{ color: #ff6b35; }
.category-hub .pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.category-hub .pagination a,
.category-hub .pagination span{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; color: #1a1a2e; text-decoration: none; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.category-hub .pagination a:hover{ background: #ff6b35; color: #fff; }
.category-hub .pagination .current{ background: #1a1a2e; color: #fff; }
@media (max-width: 992px) {
  .category-hub-layout{ grid-template-columns: 1fr; }
  .category-hero h1{ font-size: 32px; }
}
@media (max-width: 576px) {
  .category-posts-grid{ grid-template-columns: 1fr; }
  .category-hero{ padding: 50px 0 60px; }
}

    /* Featured in column (medium image) */
.page-template-page-news .column-featured{ border-bottom: 1px solid #f0f0f0; }
.page-template-page-news .column-featured-img{ height: 220px; overflow: hidden; }
.page-template-page-news .column-featured-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.page-template-page-news .column-featured:hover .column-featured-img img{ transform: scale(1.05); }
.page-template-page-news .column-featured-body{ padding: 22px 24px; }
.page-template-page-news .column-featured-body h3{ font-size: 18px; font-weight: 700; color: #1a1a2e; line-height: 1.5; margin-bottom: 10px; }
.page-template-page-news .column-featured-body h3 a{ color: inherit; text-decoration: none; }
.page-template-page-news .column-featured-body h3 a:hover{ color: #ff6b35; }
.page-template-page-news .column-featured-body p{ font-size: 14px; color: #888; line-height: 1.7; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-template-page-news .column-featured-body .feat-date{ font-size: 12px; color: #bbb; }

    /* Small list with thumbnails */
.page-template-page-news .news-thumb-list{ padding: 12px 22px 22px; }
.page-template-page-news .thumb-list-item{ display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f5f5f5; }
.page-template-page-news .thumb-list-item:last-child{ border-bottom: none; }
.page-template-page-news .thumb-list-img{ width: 80px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; }
.page-template-page-news .thumb-list-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.page-template-page-news .thumb-list-item:hover .thumb-list-img img{ transform: scale(1.1); }
.page-template-page-news .thumb-list-content{ flex: 1; min-width: 0; }
.page-template-page-news .thumb-list-title{ font-size: 14px; font-weight: 600; color: #333; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-template-page-news .thumb-list-title a{ color: inherit; text-decoration: none; }
.page-template-page-news .thumb-list-title a:hover{ color: #ff6b35; }
.page-template-page-news .thumb-list-date{ font-size: 12px; color: #bbb; margin-top: 4px; }

    /* CTA */
.page-template-page-news .news-cta{ padding: 75px 0; background: #ff6b35; text-align: center; }
.page-template-page-news .news-cta h2{ font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.page-template-page-news .news-cta p{ font-size: 17px; color: rgba(255,255,255,.85); margin-bottom: 28px; }
.page-template-page-news .news-cta .btn{ background: #fff; color: #ff6b35; font-weight: 700; padding: 16px 40px; border-radius: 10px; font-size: 16px; }

    /* Responsive */
    @media (max-width: 1100px) {
.page-template-page-news .hero-article-card{ grid-template-columns: 1fr; }
.page-template-page-news .hero-article-img{ min-height: 280px; }
.page-template-page-news .news-columns{ grid-template-columns: 1fr 1fr; }
.page-template-page-news .news-columns .news-column:last-child{ grid-column: 1 / -1; }
    }
    @media (max-width: 768px) {
.page-template-page-news .news-columns{ grid-template-columns: 1fr; }
.page-template-page-news .news-columns .news-column:last-child{ grid-column: auto; }
.page-template-page-news .hero-article-body{ padding: 28px; }
.page-template-page-news .hero-article-body h2{ font-size: 22px; }
.page-template-page-news .news-banner h1{ font-size: 32px; }
    }



/* page-resources.php CSS */
.page-template-page-resources .resources-section{ padding: 60px 0 90px; background: #f8f9fb; }
.page-template-page-resources .resources-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.page-template-page-resources .resource-card{ background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.06); text-decoration: none; transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
.page-template-page-resources .resource-card:hover{ box-shadow: 0 12px 35px rgba(0,0,0,.1); }
.page-template-page-resources .resource-img{ height: 180px; background: #fff0e6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-template-page-resources .resource-img img{ width: 100%; height: 100%; object-fit: cover; }
.page-template-page-resources .resource-icon{ font-size: 48px; color: #ff6b35; }
.page-template-page-resources .resource-body{ padding: 24px; flex: 1; display: flex; flex-direction: column; }
.page-template-page-resources .resource-body h3{ font-size: 18px; font-weight: 800; color: #1a1a2e; margin-bottom: 10px; }
.page-template-page-resources .resource-body p{ font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 16px; flex: 1; }
.page-template-page-resources .resource-link{ font-size: 14px; font-weight: 700; color: #ff6b35; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 992px) {
.page-template-page-resources .resources-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-template-page-resources .resources-grid{ grid-template-columns: 1fr; }
}



/* category.php CSS */
.category .news-banner h1{ text-align: center; }
.category .news-breadcrumb{ display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: #888; margin-bottom: 18px; flex-wrap: wrap; }
.category .news-breadcrumb a{ color: #555; text-decoration: none; }
.category .news-breadcrumb a:hover{ color: #ff6b35; }
.category .news-breadcrumb .sep{ font-size: 11px; color: #bbb; }
.category .news-cat-stats{ display: flex; justify-content: center; gap: 24px; margin-top: 18px; font-size: 14px; color: #666; }
.category .news-cat-stats span{ display: flex; align-items: center; gap: 6px; }
.category .news-sub-cats{ padding: 25px 0; background: #fff; border-bottom: 1px solid #f0f0f0; }
.category .news-sub-cats-list{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.category .news-sub-cat{ display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: #f8f9fb; border-radius: 30px; color: #333; text-decoration: none; font-size: 14px; font-weight: 600; transition: all .3s; }
.category .news-sub-cat:hover{ background: #ff6b35; color: #fff; }
.category .news-sub-cat small{ background: rgba(0,0,0,.06); color: inherit; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.category .news-archive-layout{ display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.category .news-archive-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.category .news-archive-header h2{ font-size: 22px; font-weight: 800; color: #1a1a2e; }
.category .news-archive-header span{ font-size: 13px; color: #999; }
.category .blog-grid-two{ grid-template-columns: repeat(2, 1fr); }
.category .news-sidebar{ position: sticky; top: 100px; }
.category .news-widget{ background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.category .news-widget h4{ font-size: 16px; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; }
.category .news-search-form{ display: flex; gap: 8px; }
.category .news-search-form input{ flex: 1; padding: 12px 14px; border: 1px solid #e5e5e5; border-radius: 10px; font-size: 14px; outline: none; }
.category .news-search-form button{ width: 42px; height: 42px; background: #ff6b35; color: #fff; border: none; border-radius: 10px; cursor: pointer; }
.category .news-cat-list{ list-style: none; padding: 0; margin: 0; }
.category .news-cat-list li{ margin-bottom: 10px; }
.category .news-cat-list li:last-child{ margin-bottom: 0; }
.category .news-cat-list a{ display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; background: #f8f9fb; color: #333; text-decoration: none; font-size: 14px; font-weight: 600; transition: all .3s; }
.category .news-cat-list a:hover{ background: #ff6b35; color: #fff; }
.category .news-cat-list li.active a{ background: #ff6b35; color: #fff; }
.category .news-cat-list span{ background: rgba(0,0,0,.06); padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.category .news-cat-list li.active span{ background: rgba(255,255,255,.2); }
.category .news-recent-list{ list-style: none; padding: 0; margin: 0; }
.category .news-recent-list li{ margin-bottom: 14px; }
.category .news-recent-list a{ display: flex; gap: 12px; text-decoration: none; }
.category .news-recent-thumb{ width: 60px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; }
.category .news-recent-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.category .news-recent-info{ flex: 1; min-width: 0; }
.category .news-recent-info span{ display: block; font-size: 14px; font-weight: 600; color: #333; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.category .news-recent-info small{ display: block; font-size: 12px; color: #999; margin-top: 4px; }
.category .news-tag-cloud{ display: flex; flex-wrap: wrap; gap: 8px; }
.category .news-tag{ padding: 7px 14px; background: #f5f6f8; border-radius: 20px; font-size: 13px; color: #555; text-decoration: none; transition: all .3s; }
.category .news-tag:hover{ background: #ff6b35; color: #fff; }
.category .news-widget-cta{ text-align: center; background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%); }
.category .news-widget-cta p{ font-size: 14px; color: #666; margin-bottom: 16px; }
.category .btn-block{ display: block; width: 100%; text-align: center; }

@media (max-width: 1100px) {
.category .news-archive-layout{ grid-template-columns: 1fr; }
.category .news-sidebar{ position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.category .news-widget{ margin-bottom: 0; }
.category .blog-grid-two{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.category .news-sidebar{ grid-template-columns: 1fr; }
.category .blog-grid-two{ grid-template-columns: 1fr; }
.category .news-cat-stats{ flex-direction: column; gap: 8px; }
}



/* page-contact.php CSS */
.page-template-page-contact .contact-section{ padding: 100px 0 60px; background: #fff8f3; }
.page-template-page-contact .contact-wrapper{ max-width: 1100px; margin: 0 auto; display: flex; gap: 35px; align-items: flex-start; }
    /* Left - Contact Info */
.page-template-page-contact .contact-info-side{ flex: 0 0 360px; }
.page-template-page-contact .contact-info-box{ background: #fff; padding: 38px 32px; border-radius: 20px; box-shadow: 0 6px 28px rgba(0,0,0,.06); border-bottom: 4px solid #ff6b35; }
.page-template-page-contact .contact-info-box h2{ font-size: 24px; font-weight: 800; color: #1a1a2e; margin-bottom: 24px; }
.page-template-page-contact .contact-info-item{ display: flex; gap: 16px; margin-bottom: 24px; }
.page-template-page-contact .contact-info-item:last-child{ margin-bottom: 0; }
.page-template-page-contact .contact-info-item i{ font-size: 22px; color: #ff6b35; margin-top: 3px; flex-shrink: 0; }
.page-template-page-contact .contact-info-item h4{ font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 5px; }
.page-template-page-contact .contact-info-item p{ font-size: 14px; color: #666; line-height: 1.7; margin: 0; }
.page-template-page-contact .contact-info-item a{ font-size: 14px; color: #ff6b35; text-decoration: none; font-weight: 500; }
.page-template-page-contact .contact-info-item a:hover{ text-decoration: underline; }
.page-template-page-contact .contact-social{ margin-top: 28px; padding-top: 22px; border-top: 1px solid #f0f0f0; }
.page-template-page-contact .contact-social h4{ font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }
.page-template-page-contact .contact-social a{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff0e6; color: #ff6b35; margin-right: 10px; font-size: 16px; transition: background .3s, color .3s, transform .3s; }
.page-template-page-contact .contact-social a:hover{ background: #ff6b35; color: #fff; transform: translateY(-2px); }
    /* Right - Form */
.page-template-page-contact .contact-form-side{ flex: 1; min-width: 0; }
.page-template-page-contact .contact-form-side h1{ font-size: 30px; font-weight: 800; color: #1a1a2e; margin-bottom: 14px; line-height: 1.3; }
.page-template-page-contact .contact-form-side > p{ font-size: 15px; color: #666; line-height: 1.8; margin-bottom: 28px; }
.page-template-page-contact .contact-form{ background: #fff; padding: 38px; border-radius: 20px; box-shadow: 0 6px 28px rgba(0,0,0,.06); border-bottom: 4px solid #ff6b35; }
.page-template-page-contact .form-group{ margin-bottom: 20px; }
.page-template-page-contact .form-group label{ display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; }
.page-template-page-contact .form-group label .req{ color: #ff6b35; }
.page-template-page-contact .form-group input, .page-template-page-contact .form-group textarea, .page-template-page-contact .form-group select{
      width: 100%; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 12px;
      font-size: 14px; color: #333; background: #fafafa; transition: border-color .3s, box-shadow .3s;
      font-family: 'Inter', sans-serif;
    }
.page-template-page-contact .form-group input:focus, .page-template-page-contact .form-group textarea:focus, .page-template-page-contact .form-group select:focus{ border-color: #ff6b35; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(255,107,53,.1); }
.page-template-page-contact .form-group textarea{ min-height: 130px; resize: vertical; }
.page-template-page-contact .phone-group{ display: flex; gap: 12px; }
.page-template-page-contact .country-select-wrapper{ position: relative; width: 180px; flex-shrink: 0; }
.page-template-page-contact .country-search{
  width: 100%; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 12px;
  font-size: 14px; color: #333; background: #fafafa; transition: border-color .3s, box-shadow .3s;
  font-family: 'Inter', sans-serif;
}
.page-template-page-contact .country-search:focus{ border-color: #ff6b35; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(255,107,53,.1); }
.page-template-page-contact .country-select-wrapper select{
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; min-width: 220px;
  max-height: 260px; padding: 6px; border: 1px solid #e0e0e0; border-radius: 12px;
  font-size: 14px; color: #333; background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.12);
  z-index: 100; display: none;
}
.page-template-page-contact .country-select-wrapper select option{ padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.page-template-page-contact .country-select-wrapper select option:hover{ background: #fff0e8; }
.page-template-page-contact .phone-group input{ flex: 1; }
.page-template-page-contact .checkbox-group{ display: flex; align-items: center; gap: 8px; margin-top: -8px; margin-bottom: 20px; }
.page-template-page-contact .checkbox-group input{ width: auto; }
.page-template-page-contact .checkbox-group label{ font-size: 14px; color: #666; margin-bottom: 0; }
.page-template-page-contact .form-submit{ width: 100%; padding: 15px; background: #ff6b35; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .3s, transform .3s, box-shadow .3s; font-family: 'Inter', sans-serif; }
.page-template-page-contact .form-submit:hover{ background: #e55a28; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,107,53,.35); }
.page-template-page-contact .contact-info-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 45px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.page-template-page-contact .contact-info-card{ background: #fff; padding: 28px; border-radius: 16px; text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,.05); border-bottom: 3px solid #ff6b35; transition: transform .3s, box-shadow .3s; }
.page-template-page-contact .contact-info-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(255,107,53,.1); }
.page-template-page-contact .contact-info-card i{ font-size: 30px; color: #ff6b35; margin-bottom: 14px; }
.page-template-page-contact .contact-info-card h4{ font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.page-template-page-contact .contact-info-card p{ font-size: 14px; color: #666; line-height: 1.6; }
.page-template-page-contact .contact-notice{ padding: 16px 20px; border-radius: 10px; margin-bottom: 25px; font-size: 14px; font-weight: 600; }
.page-template-page-contact .contact-notice-success{ background: #e8f8f5; color: #00b894; border: 1px solid #b8e6da; }
.page-template-page-contact .contact-notice-error{ background: #ffeaea; color: #e74c3c; border: 1px solid #f5c6cb; }
    @media (max-width: 900px) {.page-template-page-contact .contact-wrapper{ flex-direction: column; }.page-template-page-contact .contact-info-side{ flex: none; width: 100%; }.page-template-page-contact .contact-info-cards{ grid-template-columns: 1fr; } }
    @media (max-width: 768px) {.page-template-page-contact .contact-form{ padding: 28px; }.page-template-page-contact .phone-group{ flex-direction: column; }.page-template-page-contact .phone-group select{ width: 100%; } }



/* page-sock-size.php CSS */
.page-template-page-sock-size .size-content{ max-width: 800px; margin: 0 auto; padding: 50px 0 60px; }
.page-template-page-sock-size .size-block{ margin-bottom: 50px; }
.page-template-page-sock-size .size-block h3{ font-size: 22px; font-weight: 800; color: #1a1a2e; margin-bottom: 15px; }
.page-template-page-sock-size .size-block p{ font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 15px; }
.page-template-page-sock-size .size-block p:last-child{ margin-bottom: 0; }
.page-template-page-sock-size .size-table{ width: 100%; border-collapse: collapse; margin: 20px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.page-template-page-sock-size .size-table thead{ background: #1a1a2e; }
.page-template-page-sock-size .size-table th{ color: #fff; font-size: 14px; font-weight: 600; padding: 14px 20px; text-align: center; }
.page-template-page-sock-size .size-table td{ padding: 14px 20px; text-align: center; font-size: 14px; color: #444; border-bottom: 1px solid #f0f0f0; }
.page-template-page-sock-size .size-table tbody tr{ background: #fff; transition: background .2s; }
.page-template-page-sock-size .size-table tbody tr:hover{ background: #f8faff; }
.page-template-page-sock-size .size-table tbody tr:last-child td{ border-bottom: none; }
.page-template-page-sock-size .size-table td:first-child{ font-weight: 700; color: #1a1a2e; }
.page-template-page-sock-size .contact-link{ color: #2d5da1; text-decoration: underline; font-weight: 500; }
.page-template-page-sock-size .contact-link:hover{ color: #1a4a8a; }



/* page-options-styles.php CSS */
.page-template-page-options-styles .tags-list{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.page-template-page-options-styles .tag-pill{ background: #f0f5ff; color: #2d5da1; padding: 8px 18px; border-radius: 25px; font-size: 14px; font-weight: 500; border: 1px solid rgba(45,93,161,.15); transition: all .3s; }
.page-template-page-options-styles .tag-pill:hover{ background: #2d5da1; color: #fff; }
.page-template-page-options-styles .option-section{ padding: 60px 0; }
.page-template-page-options-styles .option-section:nth-child(even){ background: #f9fafb; }
.page-template-page-options-styles .option-block{ margin-bottom: 50px; }
.page-template-page-options-styles .option-block h3{ font-size: 24px; font-weight: 800; color: #1a1a2e; margin-bottom: 10px; }
.page-template-page-options-styles .option-block > p{ font-size: 15px; color: #666; line-height: 1.8; margin-bottom: 15px; }
.page-template-page-options-styles .style-features{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 25px; }
.page-template-page-options-styles .style-feature{ background: #fff; padding: 25px 20px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.page-template-page-options-styles .style-feature h4{ font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.page-template-page-options-styles .style-feature p{ font-size: 13px; color: #777; line-height: 1.6; }
.page-template-page-options-styles .packaging-types{ display: flex; gap: 15px; flex-wrap: wrap; margin: 20px 0; }
.page-template-page-options-styles .packaging-type{ background: #fff; border: 1px solid #e8e8e8; padding: 15px 25px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #444; }
.page-template-page-options-styles .not-found-box{ text-align: center; padding: 50px 20px; background: #f9fafb; border-radius: 16px; margin: 40px 0; }
.page-template-page-options-styles .not-found-box h3{ font-size: 22px; font-weight: 700; color: #1a1a2e; margin-bottom: 20px; }
.page-template-page-options-styles .not-found-box .btn{ margin: 0 8px; }
    @media (max-width: 768px) {.page-template-page-options-styles .style-features{ grid-template-columns: 1fr; } }



/* page-mockup-tools.php CSS */
.page-template-page-mockup-tools .mockup-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.page-template-page-mockup-tools .mockup-card{
          background: #fff; border-radius: 16px; overflow: hidden;
          box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s;
        }
.page-template-page-mockup-tools .mockup-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.page-template-page-mockup-tools .mockup-card-img{ height: 240px; overflow: hidden; background: #f5f5f5; }
.page-template-page-mockup-tools .mockup-card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.page-template-page-mockup-tools .mockup-card:hover .mockup-card-img img{ transform: scale(1.05); }
.page-template-page-mockup-tools .mockup-card-body{ padding: 25px; }
.page-template-page-mockup-tools .mockup-card-body h3{ font-size: 19px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.page-template-page-mockup-tools .mockup-card-body p{ font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 20px; }
.page-template-page-mockup-tools .mockup-card-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
        @media (max-width: 768px) {.page-template-page-mockup-tools .mockup-grid{ grid-template-columns: 1fr; } }



/* page-yarn-colors.php CSS */
.page-template-page-yarn-colors .yarn-hero{ padding: 100px 0 50px; text-align: center; background: #f8faff; }
.page-template-page-yarn-colors .yarn-hero h1{ font-size: 36px; font-weight: 800; color: #1a1a2e; margin-bottom: 15px; }
.page-template-page-yarn-colors .yarn-hero p{ font-size: 16px; color: #666; max-width: 600px; margin: 0 auto 12px; line-height: 1.7; }
.page-template-page-yarn-colors .yarn-hero .how-to{ font-size: 13px; color: #888; background: #eef3ff; display: inline-block; padding: 8px 20px; border-radius: 25px; margin-top: 10px; }
.page-template-page-yarn-colors .color-section{ padding: 40px 0; }
.page-template-page-yarn-colors .color-section:nth-child(even){ background: #fafbfd; }
.page-template-page-yarn-colors .color-section-title{ font-size: 20px; font-weight: 700; color: #1a1a2e; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
.page-template-page-yarn-colors .color-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }
.page-template-page-yarn-colors .color-card{
      background: #fff; border-radius: 10px; overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,.05); cursor: pointer;
      transition: transform .2s, box-shadow .2s; border: 1px solid #f0f0f0;
    }
.page-template-page-yarn-colors .color-card:hover{ transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.page-template-page-yarn-colors .color-card.copied{ animation: pulse .4s; }
    @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(.96)} }
.page-template-page-yarn-colors .color-swatch{ height: 80px; }
.page-template-page-yarn-colors .color-info{ padding: 10px 12px; text-align: center; }
.page-template-page-yarn-colors .color-code{ font-size: 13px; font-weight: 700; color: #333; }
.page-template-page-yarn-colors .color-name{ font-size: 11px; color: #999; margin-top: 2px; }
.page-template-page-yarn-colors .color-hex{ font-size: 11px; color: #aaa; font-family: monospace; }
.page-template-page-yarn-colors .copy-toast{
      position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
      background: #1a1a2e; color: #fff; padding: 12px 25px; border-radius: 8px;
      font-size: 14px; z-index: 9999; opacity: 0; transition: opacity .3s; pointer-events: none;
    }
.page-template-page-yarn-colors .copy-toast.show{ opacity: 1; }
    @media (max-width: 768px) {.page-template-page-yarn-colors .color-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }.page-template-page-yarn-colors .color-swatch{ height: 60px; } }



/* Inline style attributes migrated from template files */
.page-template-page-yarn-colors .yarn-breadcrumb { justify-content: center; margin-bottom: 20px; }
.page-template-page-options-styles .support-link { color: #2d5da1; text-decoration: underline; }
.page-template-page-options-styles .style-feature-icon { color: #2d5da1; margin-right: 8px; }
.page-template-page-options-styles .package-title { font-size: 20px; }
.page-template-page-options-styles .package-section { margin-top: 40px; }


.page-template-page-news .news-main-top { padding-top: 50px; }
.page-template-page-faqs .faqs-container { max-width: 1000px; }


/* Inline style attributes migrated from index.php / single.php / taxonomy-product_category.php */
.narrow-container { max-width: 800px; }
.entry-title { font-size: 28px; font-weight: 800; margin-bottom: 20px; }
.featured-image { border-radius: 16px; margin-bottom: 30px; width: 100%; }
.section-top-sm { padding-top: 20px; }
.tags-wrap { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e8e8e8; }
.tag-link { display: inline-block; background: #f0f0f0; padding: 4px 12px; border-radius: 20px; font-size: 13px; margin: 4px; color: #555; }
.related-posts-bg { background: #f9fafb; }
.no-products { grid-column: 1/-1; text-align: center; font-size: 18px; color: #999; }


/* Inline style attributes migrated from product pages */
.crew-process-icon { background: #fff5f0; color: #ff6b35; }


/* Inline style attributes migrated from page-steps.php */
.steps-hero-desc { font-size: 15px; color: #555; margin-bottom: 18px; }
.section-light { background: #f9fafb; }
.section-subtitle { font-size: 20px; font-weight: 700; color: #1a1a2e; margin-bottom: 15px; }
.features-grid-top { margin-top: 40px; }
.feature-card-center { display: flex; align-items: center; justify-content: center; }
.packaging-inner-bottom { margin-bottom: 50px; }


/* Inline style attributes migrated from single-product.php */
.customize-options-bg { background: #f2f4f6; }

/* single-product.php step card overrides */
.single-product .step-card{ background: #fff; border-radius: 20px; padding: 36px 34px; box-shadow: 0 6px 28px rgba(0,0,0,.06); transition: none; text-align: left; }
.single-product .step-card:hover{ transform: none; box-shadow: 0 6px 28px rgba(0,0,0,.06); }
.single-product .step-number{ position: static; transform: none; width: 36px; height: 36px; font-size: 15px; font-weight: 800; background: #ff6b35; color: #fff; box-shadow: none; border-radius: 8px; margin-bottom: 16px; }
.single-product .step-icon{ display: none; }





/* ========== SIMPLE SOCK SIZES & LENGTHS ========== */
.sock-length-options { background: #fff; }
.length-diagram {
  text-align: center;
  margin-bottom: 40px;
}
.length-diagram img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
.one-size-section { background: #f9fafb; }
.one-size-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.one-size-content p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 12px;
}
.one-size-content p:last-child { margin-bottom: 0; }

.custom-size-cta {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d55 100%);
  padding: 100px 0;
  text-align: center;
}
.custom-size-cta h2 {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
}
.custom-size-cta p {
  font-size: 17px;
  color: rgba(255,255,255,.85);
  line-height: 1.8;
  max-width: 760px;
  margin: 0 auto 28px;
}
.custom-size-cta .btn-primary {
  background: #ff6b35;
  border-color: #ff6b35;
  color: #fff;
  padding: 16px 36px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
}
.custom-size-cta .btn-primary:hover {
  background: #ff5722;
  border-color: #ff5722;
}

@media (max-width: 768px) {
  .length-diagram { margin-bottom: 28px; }
  .length-one-size h3 { font-size: 20px; }
}

/* ========== HOME PAGE ALTERNATING BACKGROUNDS ========== */
.bg-yellow { background: #fff8f3; }
.how-it-works:not(.bg-yellow) { background: #f9fafb; }
.products:not(.bg-yellow) { background: #fff; }
.custom-options:not(.bg-yellow) { background: #f9fafb; }

/* ========== WHATSAPP FLOAT BUTTON ========== */
.whatsapp-float {
  position: fixed;
  top: 100px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #1da851;
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

.whatsapp-float i {
  font-size: 32px;
  color: #fff;
  line-height: 1;
}

/* Pulse badge (notification dot) */
.whatsapp-float-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #ff3b30;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* Tooltip on hover (desktop only) */
.whatsapp-float-tooltip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #333;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.whatsapp-float-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #333;
}

.whatsapp-float:hover .whatsapp-float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 54px;
    height: 54px;
    top: 90px;
    right: 18px;
  }
  .whatsapp-float i { font-size: 28px; }
  .whatsapp-float-tooltip { display: none; }
}

/* ========== TAWK.TO POSITION OVERRIDE (middle-right) ========== */
#tawkchat-container,
#tawkchat-container > iframe[id*="chat-bubble"] {
  bottom: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Tawk.to chat window opens upward from middle */
#tawkchat-container > iframe[id*="chat-window"] {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* ========== 404 ERROR PAGE ========== */
.error-404 {
  padding: 100px 0 120px;
  background: #fff;
  text-align: center;
}
.error-404-inner {
  max-width: 700px;
  margin: 0 auto;
}
.error-code {
  font-size: 140px;
  font-weight: 800;
  line-height: 1;
  color: #ff6b35;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}
.error-404 h1 {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 16px;
}
.error-404 p {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 35px;
}
.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 50px;
}
.error-actions .btn {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all .3s;
}
.error-suggestions h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.error-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.error-suggestions li a {
  display: inline-block;
  padding: 10px 20px;
  background: #f5f6f8;
  color: #333;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
}
.error-suggestions li a:hover {
  background: #ff6b35;
  color: #fff;
}

@media (max-width: 576px) {
  .error-404 { padding: 70px 0 90px; }
  .error-code { font-size: 100px; }
  .error-404 h1 { font-size: 26px; }
  .error-actions { flex-direction: column; }
  .error-actions .btn { width: 100%; max-width: 260px; }
}

/* ========== Product card title links (products archive & featured grid) ========== */
.product-info h3 a { color: #1a1a2e; text-decoration: none; transition: color .2s ease; }
.product-info h3 a:hover { color: #ff6b35; }
.product-img a { display: block; }

/* ========== Simple Q&A FAQ (single product & products archive) ========== */
.faq-qa-list { max-width: 900px; margin: 0 auto; }
.faq-qa { background: #fff; border-radius: 12px; margin-bottom: 16px; padding: 24px 28px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid #f0f0f0; border-left: 4px solid #ff6b35; }
.faq-q { font-size: 17px; font-weight: 700; color: #1a1a2e; line-height: 1.6; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.faq-q i { color: #ff6b35; font-size: 18px; flex-shrink: 0; margin-top: 3px; }
.faq-a { font-size: 15px; color: #555; line-height: 1.9; }
.faq-a p { margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-more { text-align: center; margin-top: 32px; }
@media (max-width: 768px) {
  .faq-qa { padding: 18px 20px; }
  .faq-q { font-size: 15px; }
  .faq-a { font-size: 14px; }
}

/* ========== News empty state (news page & blog archive) ========== */
.news-empty { text-align: center; padding: 70px 20px; }
.news-empty i { font-size: 48px; color: #d8d8d8; margin-bottom: 20px; display: block; }
.news-empty h2 { font-size: 24px; color: #1a1a2e; margin-bottom: 10px; }
.news-empty p { font-size: 15px; color: #888; }


/* ================================================================
   SINGLE POST v3 — clean editorial layout
   Narrow centered content + floating minimal TOC
   ================================================================ */

/* ---------- Reading progress bar ---------- */
.progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: #ff6b35; z-index: 2000; transition: width .1s linear; }

/* ---------- Article hero ---------- */
.article-hero-v3 { padding: 130px 0 40px; background: #fff; }
.article-hero-v3 .narrow-container { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.article-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #aaa; margin-bottom: 28px; flex-wrap: wrap; }
.article-breadcrumb a { color: #888; }
.article-breadcrumb a:hover { color: #ff6b35; }
.article-breadcrumb span:last-child { color: #555; }
.article-cat { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ff6b35; margin-bottom: 14px; }
.article-title-v3 { font-size: 40px; font-weight: 800; color: #1a1a2e; line-height: 1.2; margin-bottom: 22px; letter-spacing: -0.8px; }
.article-meta-v3 { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #888; margin-bottom: 40px; flex-wrap: wrap; }
.meta-by { color: #555; font-weight: 500; }
.meta-dot { color: #ccc; }
.featured-image-v3 { width: 100%; max-height: 460px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; }

/* ---------- Article body ---------- */
.article-body-v3 { padding: 30px 0 90px; background: #fff; }
.article-body-inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: center; }

/* ---------- Floating TOC ---------- */
.article-toc-v3 { display: none; }
@media (min-width: 1200px) {
  .article-toc-v3 {
    position: absolute;
    left: 24px;
    top: 0;
    width: 220px;
    padding-top: 6px;
  }
  .article-toc-v3.has-items { display: block; }
  .toc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #bbb; margin-bottom: 14px; }
  .toc-list-v3 { list-style: none; border-left: 1px solid #eee; }
  .toc-list-v3 li { position: relative; }
  .toc-list-v3 a {
    display: block;
    padding: 7px 0 7px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #888;
    border-left: 1px solid transparent;
    margin-left: -1px;
    transition: all .2s;
  }
  .toc-list-v3 a:hover { color: #ff6b35; }
  .toc-list-v3 a.active { color: #ff6b35; border-left-color: #ff6b35; }
}

/* ---------- Article content ---------- */
.article-content-v3 { width: 100%; max-width: 680px; font-size: 17px; line-height: 1.85; color: #444; }
.article-content-v3 > p:first-of-type { font-size: 19px; line-height: 1.75; color: #555; }
.article-content-v3 h2 { font-size: 26px; font-weight: 800; color: #1a1a2e; margin: 54px 0 18px; line-height: 1.3; letter-spacing: -0.4px; }
.article-content-v3 h3 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 32px 0 12px; }
.article-content-v3 p { margin-bottom: 22px; }
.article-content-v3 img { border-radius: 10px; margin: 28px 0; width: 100%; height: auto; }
.article-content-v3 ul, .article-content-v3 ol { padding-left: 26px; margin-bottom: 22px; }
.article-content-v3 li { margin-bottom: 8px; }
.article-content-v3 li::marker { color: #ff6b35; }
.article-content-v3 a { color: #2d5da1; text-decoration: underline; text-underline-offset: 3px; }
.article-content-v3 a:hover { color: #ff6b35; }
.article-content-v3 strong { color: #222; font-weight: 600; }
.article-content-v3 blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid #ff6b35; color: #666; font-style: italic; }
.article-content-v3 table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; }
.article-content-v3 thead { border-bottom: 2px solid #1a1a2e; }
.article-content-v3 th { text-align: left; padding: 12px 14px; font-weight: 700; color: #1a1a2e; }
.article-content-v3 td { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.article-content-v3 tbody tr:hover { background: #fafafa; }

/* ---------- Mid-article CTA ---------- */
.mid-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 26px; margin: 36px 0;
  border: 1px solid #f0e6de; border-radius: 10px;
  background: #fffaf7;
}
.mid-cta-text strong { display: block; font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.mid-cta-text span { font-size: 14px; color: #777; }
.mid-cta .btn { white-space: nowrap; font-size: 14px; padding: 10px 20px; }

/* ---------- Article footer ---------- */
.article-footer-v3 { margin-top: 50px; padding-top: 28px; border-top: 1px solid #f0f0f0; }
.tags-wrap-v3 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tag-link-v3 { font-size: 13px; color: #777; padding: 5px 13px; border: 1px solid #eee; border-radius: 20px; transition: all .2s; }
.tag-link-v3:hover { border-color: #ff6b35; color: #ff6b35; }
.share-row-v3 { display: flex; align-items: center; gap: 10px; }
.share-label-v3 { font-size: 13px; color: #999; margin-right: 4px; }
.share-btn-v3 {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f5f5f5; color: #666; font-size: 13px;
  transition: all .2s;
}
.share-btn-v3:hover { background: #ff6b35; color: #fff; }

/* ---------- Related posts ---------- */
.single-post .related-posts { background: #f9fafb; margin-top: 0; padding: 80px 0; }
.single-post .related-posts .section-header { text-align: center; margin-bottom: 44px; }
.single-post .related-posts .section-header h2 { font-size: 30px; font-weight: 800; color: #1a1a2e; margin-bottom: 10px; letter-spacing: -0.4px; }
.single-post .related-posts .section-header p { font-size: 15px; color: #888; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .article-hero-v3 { padding: 110px 0 30px; }
  .article-title-v3 { font-size: 29px; }
  .article-meta-v3 { font-size: 13px; }
  .article-content-v3 { font-size: 16px; }
  .article-content-v3 h2 { font-size: 22px; }
  .mid-cta { flex-direction: column; text-align: center; gap: 16px; }
}