/*
Theme Name: iPID Shop
Theme URI: https://www.qince.net
Author: iPID Shop
Author URI: https://www.qince.net
Description: 苹果ID商城主题 - 仿 ipid.shop
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ipid-shop
*/

/* ========== Reset & Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#0071e3;
  --primary-dark:#0058b0;
  --bg:#f5f5f7;
  --card-bg:#fff;
  --text:#1d1d1f;
  --text-secondary:#6e6e73;
  --border:#d2d2d7;
  --success:#34c759;
  --warning:#ff9500;
  --danger:#ff3b30;
  --radius:12px;
  --shadow:0 2px 12px rgba(0,0,0,0.08);
}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary-dark)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* ========== Container ========== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ========== Header ========== */
.site-header{
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:52px;
}
.site-logo{
  font-size:1.3rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.site-logo .logo-icon{
  width:32px;height:32px;background:var(--primary);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;
}
.main-nav{display:flex;gap:0;align-items:center}
.main-nav a{
  color:var(--text);font-size:0.9rem;padding:8px 14px;
  border-radius:8px;transition:all .2s;
}
.main-nav a:hover{background:rgba(0,113,227,0.08);color:var(--primary)}
.header-search{position:relative}
.header-search input{
  width:180px;padding:7px 14px 7px 34px;
  border:1px solid var(--border);border-radius:20px;
  font-size:0.85rem;background:var(--bg);
  transition:all .2s;
}
.header-search input:focus{outline:none;width:240px;border-color:var(--primary)}
.header-search::before{
  content:'🔍';position:absolute;left:10px;top:50%;
  transform:translateY(-50%);font-size:0.8rem;
}
.mobile-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text)}

/* ========== Breadcrumb ========== */
.breadcrumb{
  padding:16px 0;font-size:0.85rem;color:var(--text-secondary);
}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{margin:0 6px;color:var(--border)}

/* ========== Hero Section ========== */
.hero{
  background:linear-gradient(135deg,#0071e3 0%,#00a2e8 100%);
  color:#fff;padding:48px 0;text-align:center;
}
.hero h1{font-size:2.2rem;font-weight:700;margin-bottom:12px}
.hero p{font-size:1.05rem;opacity:0.9;max-width:600px;margin:0 auto}
.hero-tags{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.hero-tags span{
  background:rgba(255,255,255,0.2);padding:5px 14px;
  border-radius:20px;font-size:0.82rem;
}

/* ========== Section ========== */
.section{padding:40px 0}
.section-title{
  font-size:1.5rem;font-weight:700;margin-bottom:24px;
  display:flex;align-items:center;gap:8px;
}
.section-title::before{
  content:'';width:4px;height:24px;background:var(--primary);
  border-radius:2px;
}

/* ========== Category Grid ========== */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.cat-card{
  background:var(--card-bg);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
  display:block;color:var(--text);
}
.cat-card:hover{
  transform:translateY(-3px);box-shadow:0 4px 20px rgba(0,0,0,0.12);
  color:var(--text);
}
.cat-card h3{font-size:1.15rem;margin-bottom:8px;color:var(--primary)}
.cat-card p{font-size:0.88rem;color:var(--text-secondary)}
.cat-card .cat-count{
  display:inline-block;margin-top:10px;
  background:var(--bg);padding:3px 10px;border-radius:12px;
  font-size:0.8rem;color:var(--text-secondary);
}

/* ========== Product Grid ========== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.product-card{
  background:var(--card-bg);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.product-card:hover{
  transform:translateY(-3px);box-shadow:0 4px 20px rgba(0,0,0,0.12);
}
.product-card-body{padding:20px;flex:1}
.product-tag{
  display:inline-block;background:rgba(0,113,227,0.1);
  color:var(--primary);padding:2px 10px;border-radius:10px;
  font-size:0.75rem;margin-bottom:8px;
}
.product-no{font-size:0.78rem;color:var(--text-secondary);margin-bottom:4px}
.product-card h3{
  font-size:1.05rem;font-weight:600;margin-bottom:8px;
  line-height:1.4;
}
.product-card h3 a{color:var(--text)}
.product-card h3 a:hover{color:var(--primary)}
.product-desc{font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 20px;
}
.product-price{font-size:1.3rem;font-weight:700;color:var(--danger)}
.product-price small{font-size:0.75rem;font-weight:400;color:var(--text-secondary)}
.product-stock{font-size:0.8rem;color:var(--text-secondary)}
.product-stock .in-stock{color:var(--success)}
.btn{
  display:inline-block;padding:8px 20px;border-radius:8px;
  font-size:0.88rem;font-weight:600;cursor:pointer;
  transition:all .2s;border:none;text-align:center;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-block{display:block;width:100%}

/* ========== Single Product ========== */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.product-info-card{
  background:var(--card-bg);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow);
}
.product-info-card h1{font-size:1.6rem;margin-bottom:12px}
.product-meta{
  display:flex;gap:16px;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);margin:20px 0;
}
.product-meta-item{font-size:0.88rem}
.product-meta-item .label{color:var(--text-secondary);margin-right:6px}
.product-meta-item .value{font-weight:600}
.product-description{margin:20px 0;font-size:0.95rem;line-height:1.8;color:var(--text-secondary)}
.order-form{
  background:var(--card-bg);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow);
}
.order-form h2{font-size:1.25rem;margin-bottom:20px}
.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:0.88rem;font-weight:600;
  margin-bottom:6px;color:var(--text);
}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:10px 14px;border:1px solid var(--border);
  border-radius:8px;font-size:0.9rem;background:var(--bg);
  transition:border-color .2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--primary);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.order-summary{
  background:var(--bg);border-radius:8px;padding:16px;
  margin:20px 0;
}
.order-summary .total{
  display:flex;justify-content:space-between;
  font-size:1.1rem;font-weight:700;
}
.order-summary .total .price{color:var(--danger);font-size:1.3rem}

/* ========== Page ========== */
.page-content{
  background:var(--card-bg);border-radius:var(--radius);
  padding:40px;box-shadow:var(--shadow);
  max-width:900px;margin:0 auto;
}
.page-content h1{font-size:1.8rem;margin-bottom:24px}
.page-content h2{font-size:1.3rem;margin:24px 0 12px}
.page-content p{margin-bottom:14px;line-height:1.8;color:var(--text-secondary)}
.page-content ul{margin:12px 0;padding-left:20px}
.page-content ul li{margin-bottom:8px;list-style:disc;color:var(--text-secondary)}
.page-content table{width:100%;border-collapse:collapse;margin:16px 0}
.page-content table th,.page-content table td{
  border:1px solid var(--border);padding:10px 14px;
  text-align:left;font-size:0.9rem;
}
.page-content table th{background:var(--bg);font-weight:600}

/* ========== FAQ ========== */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{
  background:var(--card-bg);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow);
}
.faq-item details{padding:0}
.faq-item summary{
  padding:18px 24px;cursor:pointer;font-weight:600;
  font-size:0.95rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--primary);transition:transform .2s}
.faq-item details[open] summary::after{transform:rotate(45deg)}
.faq-answer{padding:0 24px 18px;font-size:0.9rem;color:var(--text-secondary);line-height:1.8}

/* ========== Use Cases ========== */
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
.usecase-card{
  background:var(--card-bg);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
  transition:transform .2s;
}
.usecase-card:hover{transform:translateY(-3px)}
.usecase-card .icon{font-size:2rem;margin-bottom:12px}
.usecase-card h3{font-size:1.1rem;margin-bottom:8px}
.usecase-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.6}

/* ========== Sidebar ========== */
.layout-with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:24px}
.sidebar-widget{
  background:var(--card-bg);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px;
}
.sidebar-widget h3{font-size:1rem;margin-bottom:14px;font-weight:700}
.sidebar-widget ul li{
  padding:8px 0;border-bottom:1px solid var(--border);
  font-size:0.88rem;
}
.sidebar-widget ul li:last-child{border-bottom:none}
.sidebar-widget ul li a{color:var(--text)}
.sidebar-widget ul li a:hover{color:var(--primary)}
.sidebar-widget .count{float:right;color:var(--text-secondary);font-size:0.82rem}

/* ========== Footer ========== */
.site-footer{
  background:#1d1d1f;color:#a0a0a5;
  padding:40px 0 20px;margin-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;margin-bottom:30px;
}
.footer-col h4{color:#fff;font-size:0.95rem;margin-bottom:12px}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:#a0a0a5;font-size:0.85rem}
.footer-col ul li a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid #333;padding-top:20px;
  text-align:center;font-size:0.82rem;color:#666;
}

/* ========== Pagination ========== */
.pagination{
  display:flex;justify-content:center;gap:6px;
  padding:30px 0;
}
.pagination a,.pagination span{
  padding:8px 14px;border-radius:8px;
  font-size:0.88rem;border:1px solid var(--border);
  background:var(--card-bg);color:var(--text);
}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}

/* ========== Search ========== */
.search-results-count{padding:16px 0;font-size:0.9rem;color:var(--text-secondary)}

/* ========== Alert ========== */
.alert{
  padding:12px 18px;border-radius:8px;margin-bottom:16px;
  font-size:0.88rem;
}
.alert-info{background:rgba(0,113,227,0.08);color:var(--primary)}
.alert-success{background:rgba(52,199,89,0.1);color:var(--success)}
.alert-warning{background:rgba(255,149,0,0.1);color:var(--warning)}

/* ========== Responsive ========== */
@media(max-width:768px){
  .main-nav{display:none;position:absolute;top:52px;left:0;right:0;
    background:#fff;flex-direction:column;padding:16px;
    border-bottom:1px solid var(--border);gap:0}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 16px;width:100%}
  .mobile-toggle{display:block}
  .header-search{display:none}
  .product-detail{grid-template-columns:1fr;gap:20px}
  .layout-with-sidebar{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
  .hero p{font-size:0.9rem}
  .form-row{grid-template-columns:1fr}
  .page-content{padding:24px}
}

/* ========== Utility ========== */
.text-center{text-align:center}
.mt-2{margin-top:16px}
.mt-4{margin-top:32px}
.mb-2{margin-bottom:16px}
.mb-4{margin-bottom:32px}
.d-none{display:none}
.badge{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:0.75rem;font-weight:600;
}
.badge-hot{background:#ff3b30;color:#fff}
.badge-new{background:#34c759;color:#fff}
.badge-sale{background:#ff9500;color:#fff}