/* ============================================================
   theme-kraft.css — 牛皮纸暖棕工业风主题
   纸盒/纸箱包装行业专属配色
   通过 [data-skin="kraft"] 激活
   ============================================================ */

/* ── Light (default) under kraft skin ───────────────────────── */
[data-skin="kraft"] {
  /* Brand — 深棕 + 暖橙 */
  --primary:      #8B5E3C;
  --primary-d:    #6B4226;
  --primary-l:    #B8865A;
  --accent:       #D4863A;
  --accent-d:     #B8692A;
  --success:      #4A7C59;

  /* Surface — 米白 / 羊皮纸 */
  --bg:           #FBF7F0;
  --bg-2:         #F5EFE3;
  --bg-3:         #EDE3D0;
  --surface:      #FFFDF8;
  --surface-2:    #F8F2E6;

  /* Text */
  --text:         #2C1A0E;
  --text-2:       #4A3020;
  --text-3:       #7A5C40;

  /* UI */
  --border:       #DDD0BC;
  --border-2:     #C8B89A;
  --topbar-bg:    #2C1A0E;
  --topbar-text:  #A8906C;
  --footer-bg:    #1E1008;

  /* Shadows — 暖棕色调 */
  --shadow-sm:    0 1px 4px rgba(44,26,14,.07);
  --shadow:       0 4px 16px rgba(44,26,14,.10);
  --shadow-lg:    0 12px 40px rgba(44,26,14,.16);
  --shadow-xl:    0 24px 64px rgba(44,26,14,.22);
  --glow:         0 0 32px rgba(139,94,60,.30);

  /* Geometry — 更直角，工业感 */
  --radius:       6px;
  --radius-lg:    12px;
  --radius-xl:    20px;

  /* Fonts */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
}

/* ── Dark under kraft skin ───────────────────────────────────── */
[data-skin="kraft"][data-theme="dark"] {
  --primary:      #C49A6C;
  --primary-d:    #A87A4E;
  --primary-l:    #D4B48A;
  --accent:       #E8A050;
  --accent-d:     #CC8030;

  --bg:           #140C04;
  --bg-2:         #1E1208;
  --bg-3:         #281A0E;
  --surface:      #1E1208;
  --surface-2:    #281A0E;

  --text:         #F0E8DC;
  --text-2:       #D4C4A8;
  --text-3:       #9A8060;

  --border:       #3A2818;
  --border-2:     #503C28;
  --topbar-bg:    #0A0602;
  --topbar-text:  #7A6040;
  --footer-bg:    #0A0602;

  --shadow-sm:    0 1px 4px rgba(0,0,0,.4);
  --shadow:       0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.6);
  --shadow-xl:    0 24px 64px rgba(0,0,0,.7);
  --glow:         0 0 40px rgba(196,154,108,.25);
}

/* ── Button shadows ──────────────────────────────────────────── */
[data-skin="kraft"] .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  box-shadow: 0 4px 20px rgba(139,94,60,.35);
}
[data-skin="kraft"] .btn-primary:hover {
  box-shadow: 0 8px 28px rgba(139,94,60,.50);
}
[data-skin="kraft"] .btn-outline {
  color: var(--primary);
  border-color: var(--primary);
}
[data-skin="kraft"] .btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* ── Logo ────────────────────────────────────────────────────── */
[data-skin="kraft"] .logo-mark {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  box-shadow: 0 4px 14px rgba(139,94,60,.40);
}
[data-skin="kraft"] .logo a:hover .logo-mark {
  box-shadow: 0 6px 20px rgba(139,94,60,.60);
}

/* ── Nav links ───────────────────────────────────────────────── */
[data-skin="kraft"] .nav-link:hover {
  color: var(--primary);
  background: rgba(139,94,60,.07);
}
[data-skin="kraft"] .nav-link::after,
[data-skin="kraft"] .nav-link.active::after {
  background: var(--primary);
}

/* ── Section sub label ───────────────────────────────────────── */
[data-skin="kraft"] .section-sub {
  color: var(--primary);
}
[data-skin="kraft"] .section-sub::before,
[data-skin="kraft"] .section-sub::after {
  background: var(--primary);
}

/* ── Stats bar ───────────────────────────────────────────────── */
[data-skin="kraft"] .stats-bar {
  background: linear-gradient(135deg, #4A2E14, #7A4A24);
}
[data-skin="kraft"] .stats-bar::before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Crect x='0' y='0' width='1' height='40'/%3E%3Crect x='0' y='0' width='40' height='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Features / Advantages ───────────────────────────────────── */
[data-skin="kraft"] .features::before {
  background: radial-gradient(circle, rgba(139,94,60,.06) 0%, transparent 70%);
}
[data-skin="kraft"] .feature-card::before {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-l) 100%);
}
[data-skin="kraft"] .feature-icon {
  background: linear-gradient(135deg, rgba(139,94,60,.12), rgba(139,94,60,.06));
}
[data-skin="kraft"] .feature-card:hover .feature-icon {
  background: rgba(255,255,255,.18);
}

/* ── Cat filter buttons ──────────────────────────────────────── */
[data-skin="kraft"] .cat-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(139,94,60,.06);
}
[data-skin="kraft"] .cat-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  box-shadow: 0 4px 14px rgba(139,94,60,.35);
}

/* ── Product card ────────────────────────────────────────────── */
[data-skin="kraft"] .product-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
}
[data-skin="kraft"] .product-card:hover { border-color: var(--border-2); }
[data-skin="kraft"] .product-card:hover .product-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
}

/* ── About section ───────────────────────────────────────────── */
[data-skin="kraft"] .about-badge {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  box-shadow: var(--glow);
}
[data-skin="kraft"] .check {
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  box-shadow: 0 2px 8px rgba(139,94,60,.30);
}
[data-skin="kraft"] .about::before {
  background: radial-gradient(circle, rgba(139,94,60,.05) 0%, transparent 70%);
}

/* ── Cert card ───────────────────────────────────────────────── */
[data-skin="kraft"] .cert-card::after {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
[data-skin="kraft"] .cert-card:hover { border-color: var(--primary); }

/* ── FAQ ─────────────────────────────────────────────────────── */
[data-skin="kraft"] .faq-item.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,94,60,.10);
}
[data-skin="kraft"] .faq-item.open .faq-q { color: var(--primary); }
[data-skin="kraft"] .faq-item.open .faq-q-icon {
  background: var(--primary);
  border-color: var(--primary);
}

/* ── Contact ─────────────────────────────────────────────────── */
[data-skin="kraft"] .contact::before {
  background: radial-gradient(circle, rgba(139,94,60,.04) 0%, transparent 70%);
}
[data-skin="kraft"] .contact-icon {
  background: linear-gradient(135deg, rgba(139,94,60,.10), rgba(139,94,60,.06));
}
[data-skin="kraft"] .contact-row:hover .contact-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  box-shadow: 0 4px 14px rgba(139,94,60,.35);
}
[data-skin="kraft"] .contact-form::before {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-l));
}
[data-skin="kraft"] .form-group input:focus,
[data-skin="kraft"] .form-group select:focus,
[data-skin="kraft"] .form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139,94,60,.12);
}

/* ── News ────────────────────────────────────────────────────── */
[data-skin="kraft"] .news-date::before { background: var(--primary); }
[data-skin="kraft"] .news-link { color: var(--primary); }

/* ── Footer ──────────────────────────────────────────────────── */
[data-skin="kraft"] .footer::before {
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--primary-l), transparent);
}
[data-skin="kraft"] .footer-socials a:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* ── Back to top ─────────────────────────────────────────────── */
[data-skin="kraft"] .back-top {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  box-shadow: 0 4px 20px rgba(139,94,60,.45);
}
[data-skin="kraft"] .back-top:hover {
  box-shadow: 0 8px 28px rgba(139,94,60,.60);
}

/* ── Dropdown / Mobile nav ───────────────────────────────────── */
[data-skin="kraft"] .dropdown li a:hover {
  color: var(--primary);
  background: rgba(139,94,60,.06);
}
@media (max-width: 768px) {
  [data-skin="kraft"] .dropdown li a {
    border-left-color: var(--primary);
  }
  [data-skin="kraft"] .dropdown li a:hover {
    background: rgba(139,94,60,.06);
  }
}

/* ── Grad text ───────────────────────────────────────────────── */
[data-skin="kraft"] .grad-text {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Modal cat tag ───────────────────────────────────────────── */
[data-skin="kraft"] .modal-content .modal-cat { color: var(--primary); }

/* ── Lang btn active ─────────────────────────────────────────── */
[data-skin="kraft"] .lang-btn.active,
[data-skin="kraft"] .lang-btn:hover {
  background: var(--primary);
}

/* ── Scrolled header ─────────────────────────────────────────── */
[data-skin="kraft"] .site-header-wrap.scrolled .header {
  background: rgba(251,247,240,.96);
}
[data-skin="kraft"][data-theme="dark"] .site-header-wrap.scrolled .header {
  background: rgba(30,18,8,.97);
}

/* ── Hero ────────────────────────────────────────────────────── */
[data-skin="kraft"] .hero-slide:nth-child(1) {
  background-image: linear-gradient(135deg, #1E0C04 0%, #5A3018 50%, #3A1E0A 100%);
}
[data-skin="kraft"] .hero-slide:nth-child(2) {
  background-image: linear-gradient(135deg, #160804 0%, #4A2810 50%, #2C1408 100%);
}
[data-skin="kraft"] .hero-slide:nth-child(3) {
  background-image: linear-gradient(135deg, #1A100A 0%, #503A20 50%, #2C1E10 100%);
}
[data-skin="kraft"] .hero-sub {
  color: var(--accent);
  border-color: rgba(212,134,58,.35);
  background: rgba(212,134,58,.08);
}
[data-skin="kraft"] .hero-title em { color: var(--accent); }
[data-skin="kraft"] .hero-badge-num { color: var(--accent); }
[data-skin="kraft"] .hero-actions .btn-outline:hover {
  color: var(--primary-d);
}

/* ── Texture overlay — 给 bg-light 区域添加细微纹理感 ─────────── */
[data-skin="kraft"] .bg-light {
  background-image:
    var(--bg-2),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23F5EFE3'/%3E%3Ccircle cx='1' cy='1' r='.4' fill='%23DDD0BC' fill-opacity='.18'/%3E%3Ccircle cx='3' cy='3' r='.4' fill='%23DDD0BC' fill-opacity='.18'/%3E%3C/svg%3E");
}

/* ── Dark mode icon filters for kraft ───────────────────────── */
[data-skin="kraft"][data-theme="dark"] .feature-icon img {
  filter: invert(.15) sepia(1) hue-rotate(10deg) brightness(1.3) saturate(.8);
}
[data-skin="kraft"][data-theme="dark"] .feature-card:hover .feature-icon img {
  filter: brightness(0) invert(1);
}
[data-skin="kraft"][data-theme="dark"] .cert-icon img {
  filter: invert(.1) sepia(.6) hue-rotate(10deg) brightness(1.2);
}
[data-skin="kraft"][data-theme="dark"] .contact-icon img {
  filter: invert(.4) sepia(.8) hue-rotate(10deg);
}
[data-skin="kraft"][data-theme="dark"] .contact-row:hover .contact-icon img {
  filter: brightness(0) invert(1);
}