/*
Theme Name: A16A Amazon Store
Theme URI: https://www.a16a.com
Author: A16A
Author URI: https://www.a16a.com
Description: Amazon-style high-density e-commerce theme with Chinese Red & Black branding. Search-driven, conversion-optimized WooCommerce theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: a16a-store
Tags: e-commerce, woocommerce, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   CSS VARIABLES - Chinese Red & Black System
   ============================================ */
:root {
    /* Brand Colors */
    --color-primary: #C8102E;
    --color-primary-dark: #A00D24;
    --color-primary-light: #E8384F;
    --color-primary-bg: #FDF0F2;

    /* Black System */
    --color-black: #111111;
    --color-charcoal: #232323;
    --color-dark-gray: #37475A;
    --color-medium-gray: #565959;
    --color-light-gray: #888C8C;

    /* Background */
    --color-bg: #EAEDED;
    --color-bg-alt: #F3F3F3;
    --color-card: #FFFFFF;
    --color-card-hover: #FAFAFA;

    /* Text */
    --color-text: #0F1111;
    --color-text-secondary: #565959;
    --color-text-muted: #888C8C;
    --color-text-inverse: #FFFFFF;

    /* Accent */
    --color-rating: #C9A227;
    --color-rating-bg: #FEF9E7;
    --color-success: #067D62;
    --color-success-bg: #E6F4F1;
    --color-warning: #B12704;
    --color-info: #007185;

    /* Borders */
    --border-color: #D5D9D9;
    --border-color-light: #E7E7E7;
    --border-radius: 4px;
    --border-radius-sm: 2px;
    --border-radius-lg: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 21px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;

    /* Layout */
    --container-max: 1400px;
    --header-top-height: 36px;
    --header-main-height: 64px;
    --header-nav-height: 40px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-weight: 700; line-height: 1.3; }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Screen reader */
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px 20px; font-size: var(--font-size-sm);
    font-weight: 600; border-radius: var(--border-radius);
    cursor: pointer; transition: all 0.15s ease; text-decoration: none;
    border: 1px solid transparent; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--color-primary); color: #fff;
    border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn-black {
    background: var(--color-black); color: #fff;
    border-color: var(--color-black);
}
.btn-black:hover { background: var(--color-charcoal); color: #fff; }
.btn-outline {
    background: #fff; color: var(--color-text);
    border-color: var(--border-color);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-full { width: 100%; }
.btn-lg { padding: 12px 28px; font-size: var(--font-size-base); }
.btn-sm { padding: 5px 12px; font-size: var(--font-size-xs); }

/* ============================================
   BADGES & LABELS
   ============================================ */
.badge {
    display: inline-block; padding: 2px 8px; font-size: var(--font-size-xs);
    font-weight: 700; border-radius: var(--border-radius-sm);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.badge-red { background: var(--color-primary); color: #fff; }
.badge-black { background: var(--color-black); color: #fff; }
.badge-gold { background: var(--color-rating); color: #fff; }
.badge-green { background: var(--color-success); color: #fff; }
.badge-outline-red { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }

/* ============================================
   STAR RATING
   ============================================ */
.stars {
    display: inline-flex; align-items: center; gap: 1px;
    color: var(--color-rating); font-size: var(--font-size-sm);
}
.stars .star-empty { color: #DDD; }
.rating-count { color: var(--color-info); font-size: var(--font-size-sm); margin-left: 4px; }
.rating-count:hover { color: var(--color-primary); cursor: pointer; }

/* ============================================
   PRICE
   ============================================ */
.price { color: var(--color-primary); font-weight: 700; }
.price .woocommerce-Price-amount { color: var(--color-primary); }
.price del { color: var(--color-text-muted); font-weight: 400; font-size: 0.85em; margin-right: 6px; }
.price ins { text-decoration: none; }
.price-large { font-size: var(--font-size-2xl); }
.price-symbol { font-size: 0.7em; vertical-align: super; }

/* ============================================
   SECTION TITLES
   ============================================ */
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-black);
}
.section-header h2 {
    font-size: var(--font-size-xl); font-weight: 700;
    color: var(--color-black); display: flex; align-items: center; gap: 8px;
}
.section-header h2::before {
    content: ''; display: inline-block; width: 4px; height: 20px;
    background: var(--color-primary); border-radius: 2px;
}
.section-header .see-all {
    font-size: var(--font-size-sm); color: var(--color-info);
    font-weight: 600;
}
.section-header .see-all:hover { color: var(--color-primary); }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: #BBB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* WooCommerce default overrides */
.woocommerce .products ul, .woocommerce ul.products { margin: 0; padding: 0; }
.woocommerce a.button, .woocommerce button.button {
    background: var(--color-primary); color: #fff;
    border-radius: var(--border-radius); font-weight: 600;
    padding: 8px 16px; border: 1px solid var(--color-primary);
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
    background: var(--color-primary-dark); color: #fff;
}