/* ============================================
   Teo's Craft - 响应式补充样式
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .story-grid { grid-template-columns: 1fr !important; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .nav-links { display: none !important; }
  .nav-mobile-toggle { display: flex !important; }
  .product-grid { grid-template-columns: 1fr !important; }
  .hero-title { font-size: 28px !important; }
  .section-title { font-size: 22px !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; }
  .hero-badge { font-size: 11px !important; padding: 6px 14px !important; }
  .product-card { padding: 12px !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .faq-answer { padding: 12px 16px !important; }
  .nav-container { padding: 0 16px !important; }
  .section { padding: 40px 16px !important; }
  .hero { padding: 40px 16px !important; }
  .footer { padding: 40px 16px !important; }
  .product-detail-grid { grid-template-columns: 1fr !important; }
  .checkout-grid { grid-template-columns: 1fr !important; }
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 8px;
}

.nav-mobile-toggle span {
  width: 22px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
}

.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  padding: 16px;
  z-index: 100;
}

.nav-mobile-menu.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-mobile-menu a {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border-light);
  text-decoration: none;
  color: var(--c-text);
}

.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn {
  transition: all 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--c-primary-light); border-radius: 4px; }

::selection { background: var(--c-accent-light); color: var(--c-text); }