/*
Theme Name: Silk Plus Toys
Version: 1.0.0
Description: Custom B2B directory theme for silkplushtoys.com - Chinese plush toy factory directory for Central Asian buyers.
Author: Cheng Yuan
Tags: translation-ready, wide-blocks, custom-logo
*/

/* ─── Brand Color Palette (LOCKED v1) ─── */
:root {
    --brand-primary:   #DAB855;   /* 🟡 Main     */
    --brand-secondary: #6FAFBF;   /* 🔵 Accent   */
    --brand-accent:    #C43835;   /* 🔴 Warning  */
    --brand-text:      #2C1318;   /* ⚫ Heading  */
    --brand-bg:        #FFFFFF;   /* ⚪ White    */
}

/* ─── Reset & Base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; color: #555; line-height: 1.6; background: #f9f7f2; }
a { color: var(--brand-primary); text-decoration: none; transition: color .2s; }
a:hover { color: #c4a44d; }
img { max-width: 100%; height: auto; }

/* ─── Container ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-pad { padding: 80px 0; }
.section-title { font-size: 2em; font-weight: 700; text-align: center; margin-bottom: 12px; color: var(--brand-text); }
.section-subtitle { text-align: center; color: #666; max-width: 600px; margin: 0 auto 48px; font-size: 1.05em; }

/* ─── Buttons ─── */
.btn { display: inline-block; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all .25s; border: 2px solid transparent; text-align: center; }
.btn-primary { background: var(--brand-primary); color: var(--brand-text); }
.btn-primary:hover { background: #c4a44d; color: var(--brand-text); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(218,184,85,.4); }
.btn-outline { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline:hover { background: var(--brand-primary); color: var(--brand-text); }
.btn-sm { padding: 8px 18px; font-size: .85rem; background: #fdf8ea; color: var(--brand-primary); border-radius: 6px; }
.btn-sm:hover { background: #f5edcc; }
.btn-lg { padding: 18px 40px; font-size: 1.1rem; }

/* ─── Trust Bar ─── */
.spt-trust-bar { background: var(--brand-text); color: rgba(255,255,255,.85); padding: 14px 0; font-size: .9rem; }
.spt-trust-bar .container { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.trust-item { white-space: nowrap; }
.trust-divider { opacity: .4; margin: 0 4px; }

/* ─── Hero ─── */
.spt-hero { position: relative; background: linear-gradient(135deg, var(--brand-text) 0%, #3d1f25 50%, #1f0f12 100%); min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 520"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="%23DAB855" stop-opacity=".12"/><stop offset="100%" stop-color="%236FAFBF" stop-opacity=".08"/></linearGradient></defs><rect fill="url(%23g)" width="1440" height="520"/><circle cx="200" cy="300" r="180" fill="%23DAB855" opacity=".05"/><circle cx="1200" cy="150" r="220" fill="%236FAFBF" opacity=".04"/><circle cx="700" cy="400" r="140" fill="%23C43835" opacity=".03"/></svg>') center/cover no-repeat; }
.hero-content { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 0 auto; padding: 60px 20px; }
.hero-title { color: #fff; font-size: 2.8em; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
.hero-subtitle { color: rgba(255,255,255,.8); font-size: 1.2em; margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ─── Categories ─── */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.cat-card { background: #fff; border-radius: 12px; padding: 36px 24px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .25s, box-shadow .25s; border: 1px solid #f0ede5; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.cat-icon { font-size: 3em; display: block; margin-bottom: 16px; }
.cat-card h3 { font-size: 1.15em; font-weight: 700; margin-bottom: 8px; color: var(--brand-text); }
.cat-card p { color: #666; font-size: .92em; }

/* ─── Enterprise Showcase ─── */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.showcase-item { border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; transition: transform .25s; }
.showcase-item:hover { transform: scale(1.02); }
.showcase-item img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Factory Cards ─── */
.factory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.factory-card { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .25s, box-shadow .25s; border: 1px solid #f0ede5; }
.factory-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.factory-logo-placeholder { text-align: center; margin-bottom: 16px; }
.factory-card h3 { font-size: 1.05em; font-weight: 700; margin-bottom: 8px; color: var(--brand-text); line-height: 1.4; }
.factory-location { color: #666; font-size: .88em; margin-bottom: 10px; }
.factory-desc { color: #555; font-size: .9em; margin-bottom: 12px; }
.factory-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.factory-certs span { background: #ecf7fb; color: var(--brand-secondary); font-size: .75em; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.factory-actions { display: flex; gap: 10px; align-items: center; }

/* ─── Features ─── */
.spt-features { background: #fdf8ea; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.feature-item { text-align: center; }
.feature-icon { font-size: 2.5em; display: block; margin-bottom: 16px; }
.feature-item h3 { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; color: var(--brand-text); }
.feature-item p { color: #666; font-size: .92em; }

/* ─── CTA ─── */
.spt-cta { background: linear-gradient(135deg, var(--brand-primary), #b8923f); padding: 80px 0; text-align: center; color: var(--brand-text); }
.cta-content h2 { font-size: 2em; margin-bottom: 16px; }
.cta-content p { max-width: 560px; margin: 0 auto 32px; font-size: 1.1em; opacity: .9; }

/* ─── Footer ─── */
.site-footer { background: var(--brand-text); color: rgba(255,255,255,.6); padding: 40px 0; text-align: center; font-size: .88em; }
.site-footer a { color: var(--brand-primary); }
.site-footer a:hover { color: #fff; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .hero-title { font-size: 1.8em; }
    .hero-subtitle { font-size: 1em; }
    .section-pad { padding: 48px 0; }
    .section-title { font-size: 1.5em; }
    .category-grid, .factory-grid { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr 1fr; }
}

/* ===================================================
   Silk Plus Toys 全局配色方案 - 顾一凡定稿版
   主色: #DAB855 (金色) | 辅色: #6FAFBF (蓝)
   点缀: #C43835 (红) | 深色: #2C1318 (深棕)
   =================================================== */

/* ===== 全局 CSS 变量 ===== */
:root {
    --color-primary:   #DAB855; /* 金色 */
    --color-secondary: #6FAFBF; /* 蓝色 */
    --color-accent:    #C43835; /* 红色 CTA */
    --color-dark:      #2C1318; /* 深棕 */
}

/* ===== 通用颜色覆盖 ===== */
h1, h2, h3, h4, h5, h6,
.site-title a, .entry-title,
.main-navigation a, .nav-menu a {
    color: var(--color-dark) !important;
}

a:not(.button):not(.btn):not(.wp-block-button__link):not(.cta-btn):not(.cta-button) {
    color: var(--color-secondary);
    transition: color 0.3s ease;
}
a:hover:not(.button):not(.btn):not(.wp-block-button__link):not(.cta-btn):not(.cta-button) {
    color: var(--color-primary);
}

/* 边框和分割线用辅色 */
hr, .separator, .divider,
footer, .site-footer, .footer-area {
    border-color: var(--color-secondary);
    background-color: var(--color-dark);
    color: #ffffff;
}

footer *, .site-footer * {
    color: #cccccc !important;
}
footer a, .site-footer a {
    color: var(--color-primary) !important;
}
footer a:hover, .site-footer a:hover {
    color: var(--color-accent) !important;
}

/* ===== 按钮统一改为红色 CTA + 金色 hover ===== */
button, input[type=submit],
.button, .btn, .cta-btn, .cta-button,
.cta-button-wrap .btn, .enquiry-btn, .contact-btn,
.wp-block-button__link, .elementor-button, .elementor-button a,
.form-submit input, .wpcf7-submit,
.menu-item a:hover,
.nav-menu .menu-item:hover > a,
#main-nav .item.active a,
.top-bar a, .headertop a,
.header-main .logo h1 a, .header-main .logo h2 a,
.nav-right .search-toggle i, .cart-icon span,
.price, .onsale, .sale-badge,
.quantity-input .qty, .product-rating,
.single-product .star-rating, .woocommerce-page .star-rating,
.tab-active li a, .accordion-tab .acc-heading.active h3 span,
.bread-current,
.slider-prev, .slider-next,
.product-thumb, .shop-grid-item .price,
.wt-filter-title, .wt-filter-title i,
.sidebar-left .widget-title span.icon {
    background: linear-gradient(180deg, var(--color-accent), #B03030) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

button:hover, input[type=submit]:hover,
.button:hover, .btn:hover, .cta-btn:hover, .cta-button:hover,
.elementor-button:hover, .wp-block-button__link:hover,
.form-submit input:hover, .wpcf7-submit:hover {
    background: linear-gradient(180deg, var(--color-primary), #C4A040) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(218,184,85,.3);
}

/* 特殊高亮按钮保持红色 */
.top-header-top .right-box ul li:last-child button.btn,
.header-main .right-menu .add-to-cart-button.added {
    background: linear-gradient(180deg, var(--color-accent), #B03030) !important;
}

/* ===== 导航栏金/深棕强调 ===== */
.main-navigation, #main-nav,
.headertop, .top-bar, .header-bottom,
.secondary-menu .menu, .secondary-nav ul li {
    background-color: var(--color-primary);
}

.secondary-menu .menu li a,
.secondary-nav ul li a,
.top-bar, .headertop {
    background-color: var(--color-dark);
}
.secondary-menu .menu li a:hover,
.secondary-nav ul li a:hover,
.top-bar a:hover, .headertop a:hover {
    background-color: var(--color-secondary);
    color: #fff !important;
}

/* 菜单激活项标金 */
.main-nav-menu .current-menu-item > a,
.main-nav-menu .current_page_item > a,
.submenu-item.has-child .sub-menu .current-menu-item > a,
.menu-item-has-children:hover > a,
.primary-menu-list > li:hover > a {
    color: var(--color-dark) !important;
    background-color: var(--color-primary) !important;
    font-weight: bold;
}

/* 下拉菜单白底+金色下划线 */
.main-nav-menu .menu .sub-menu,
.submenu-item .sub-menu,
.secondary-menu .menu .sub-menu {
    background-color: #fff !important;
    border-top: 3px solid var(--color-primary);
}

/* ===== 表单聚焦用金色 ===== */
input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(218,184,85,.2) !important;
}

/* ===== WooCommerce 商店页面配色 ===== */
.woocommerce-page .products li.product,
.woocommerce ul.products li.product,
.shop-grid-item, .catalog-item, .product-card {
    border: 1px solid #eee;
    border-bottom: 3px solid var(--color-primary);
}
.woocommerce-page .products li.product .button,
.woocommerce ul.products li.product .button,
.woocommerce-page .products li.product .button.added,
.woocommerce ul.products li.product .button.added {
    background: var(--color-accent) !important;
    color: #fff;
}
.woocommerce-page .products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
    background: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(218,184,85,.3);
}
.woocommerce .price ins, .woocommerce-page .price ins,
.product-meta .price .ins,
.woocommerce-page div.product .price ins,
.woocommerce-page span.sale-price, .sale-price,
.woocommerce-page span.old-price,
.cart_totals tr td, .shopping-cart td,
span.discount-value, span.shipping-calculate,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-page table.cart td.actions .coupon .button,
.woocommerce-page .checkout .form-row .button.alt {
    background: linear-gradient(180deg, var(--color-accent), #B03030) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

/* ===== Elementor 兼容 ===== */
.elementor-widget-heading h1,h2,h3,h4,h5,h6,
.elementor-element .eael-toc-title,
.elementor-counter .elementor-counter-number-wrapper .elementor-counter-number,
.elementor-testimonial .elementor-testimonial-name,
.elementor-testimonial .elementor-testimonial-designation,
.elementor-widget-divider,
[data-settings*=accent-1] {
    color: var(--color-dark);
}

.elementor-button-wrapper .elementor-button,
.elementor-element .elementor-button,
[data-settings*=accent-3] .elementor-button {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

.elementor-widget-button .elementor-button:hover {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(218,184,85,.4);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-column-wrap {
    color: var(--color-dark);
}

/* Elementor Footer */
.elementor-footer-section, footer.elementor-section,
[data-section*=footer] {
    background-color: var(--color-dark) !important;
}
.elementor-footer-section a, footer.elementor-section a,
[data-section*=footer] a {
    color: var(--color-primary) !important;
}
.elementor-footer-section a:hover, footer.elementor-section a:hover,
[data-section*=footer] a:hover {
    color: #fff !important;
}

/* ===== 进度条/滑块/标签 ===== */
.progress-bar .bar-fill, .progress-meter-bg .progress-meter-fill {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.tag-cloud a, .post-tag a, .tags a, .label-tag a {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: #fff;
    border-radius: 3px;
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-dark); }
::selection { background: var(--color-primary); color: var(--color-dark); }

/* ===== 响应式适配 ===== */
@media (max-width: 768px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .factory-grid { grid-template-columns: 1fr; }
    .main-navigation { background-color: var(--color-primary); }
    .secondary-menu .menu li a,
    .secondary-nav ul li a,
    .top-bar, .headertop { background-color: var(--color-dark); }
}