/**
 * responsive.css — Memento19 全局响应式
 * 通过 functions.php wp_enqueue_style 加载
 * 覆盖：front-page / page-products / single-product / search / footer
 */

/* ═══════════════════════════════════════
   通用工具
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .container,
  .container-product,
  .container-products {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ═══════════════════════════════════════
   front-page.php — Hero Slider
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .slider {
    margin-top: 70px !important;
    height: 56vw !important;
    min-height: 240px !important;
    max-height: 420px !important;
  }
  .slide-content {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    width: 88vw !important;
    max-width: 88vw !important;
    padding: 0 !important;
  }
  .slide-eyebrow {
    font-size: 8px !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
  }
  .slide-headline {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  .slide-sub {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 0 !important;
  }
  .btn-slide {
    display: none !important;
  }
  .slider-arrow {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  .slider-prev { left: 8px !important; }
  .slider-next { right: 8px !important; }
}

/* ═══════════════════════════════════════
   front-page.php — Product Categories
═══════════════════════════════════════ */
@media (max-width: 900px) {
  #products .container > div[style*="grid-template-columns:1fr 1fr"],
  #products .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  #products {
    padding: 64px 0 !important;
  }
  .cat-image-area {
    height: 220px !important;
  }
  .cat-body {
    padding: 24px 24px 28px !important;
  }
  .cat-title {
    font-size: 18px !important;
  }
  .cat-sub-list li {
    font-size: 11px !important;
    padding: 7px 0 !important;
  }
}

/* ═══════════════════════════════════════
   front-page.php — Hot Products 轮播
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .hp-card {
    flex: 0 0 240px !important;
  }
  .hp-img-wrap {
    height: 200px !important;
  }
}

/* ── 手机端：Hot Products 改为2列网格 ── */
@media (max-width: 768px) {
  #hot-products .hp-outer {
    overflow: visible !important;
    cursor: default !important;
  }
  #hot-products .hp-track {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    transform: none !important;
    gap: 14px !important;
    padding: 0 20px 12px !important;
  }
  #hot-products .hp-card {
    flex: none !important;
    width: 100% !important;
  }
  #hot-products .hp-img-wrap {
    height: 180px !important;
  }
  #hot-products .hp-arrow {
    display: none !important;
  }
}

/* ═══════════════════════════════════════
   front-page.php — 通用 Section 标题
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  .section-label {
    font-size: 9px !important;
    letter-spacing: 4px !important;
  }
}

/* ═══════════════════════════════════════
   front-page.php — 询盘表单
═══════════════════════════════════════ */
@media (max-width: 768px) {
  #inquiry {
    padding: 64px 0 !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .form-group.full {
    grid-column: 1 !important;
  }
  .btn-submit {
    padding: 14px 40px !important;
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════
   page-products.php
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .products-wrap {
    padding-top: 70px !important;
  }
  .products-banner {
    height: 200px !important;
  }
  .products-banner-title {
    font-size: clamp(26px, 7vw, 40px) !important;
    letter-spacing: 2px !important;
  }
  .products-body {
    padding: 0 0 64px !important;
  }
  /* 侧边栏折叠到顶部 */
  .products-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-top: 28px !important;
  }
  .products-sidebar {
    position: static !important;
  }
  /* 侧边栏子类横向滚动 */
  .cat-children {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px 0 4px !important;
  }
  .cat-children.open {
    max-height: none !important;
  }
  .cat-child-btn {
    border: 1px solid rgba(184,150,62,0.25) !important;
    border-bottom: 1px solid rgba(184,150,62,0.25) !important;
    padding: 8px 14px !important;
    font-size: 10px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    width: auto !important;
  }
  .cat-child-btn::before { display: none !important; }
  /* 产品网格 2列 */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .product-card-body {
    padding: 14px 16px 10px !important;
  }
  .product-card-title {
    font-size: 15px !important;
  }
  .product-card-footer {
    padding: 8px 16px 16px !important;
  }
}
@media (max-width: 400px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════
   single-product.php
═══════════════════════════════════════ */
@media (max-width: 992px) {
  .product-wrap {
    padding-top: 70px !important;
  }
  .product-main {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin: 40px 0 60px !important;
  }
  .product-gallery {
    position: static !important;
  }
}
@media (max-width: 768px) {
  .product-banner {
    height: 200px !important;
  }
  .product-banner-title {
    font-size: clamp(26px, 7vw, 42px) !important;
    letter-spacing: 2px !important;
  }
  .product-title {
    font-size: 26px !important;
  }
  .product-info {
    padding: 0 !important;
  }
  .thumb-item {
    width: 64px !important;
    height: 64px !important;
  }
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .packaging-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .product-navigation {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .nav-prev, .nav-next {
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .other-specs-item {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* ═══════════════════════════════════════
   search.php
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .search-page {
    margin-top: 70px !important;
    padding: 0 0 80px !important;
  }
  .search-hero {
    padding: 36px 20px 32px !important;
    margin-bottom: 40px !important;
  }
  .search-hero h1 {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
  .search-results-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .search-result-thumb {
    height: 160px !important;
  }
  .search-result-body {
    padding: 16px 18px 20px !important;
  }
  .search-result-title {
    font-size: 16px !important;
  }
}
@media (max-width: 480px) {
  .search-results-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════
   footer.php
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 600px) {
  footer {
    padding-top: 56px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 40px !important;
  }
  .footer-brand {
    grid-column: 1 !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
}

/* ═══════════════════════════════════════
   Banner 通用（products / single）
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .products-banner-label,
  .product-banner-label {
    font-size: 9px !important;
    letter-spacing: 4px !important;
  }
  .products-breadcrumb,
  .breadcrumb {
    font-size: 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
  }
}