/*
Theme Name: A16A Mart (Walmart Style)
Theme URI: https://www.a16a.com
Author: A16A
Author URI: https://www.a16a.com
Description: Walmart-inspired high-density WooCommerce theme with Chinese Red & Black branding. Rounded pill search, department navigation, Rollback deal flags, superscript-cent pricing and horizontal product carousels.
Version: 2.2.4
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
*/

/* ============================================================
   DESIGN TOKENS
   Walmart layout language  ×  Chinese Red & Black brand
   ------------------------------------------------------------
   NOTE: every legacy variable name is preserved (templates that
   are not reskinned reference them inline), values are remapped
   to the Walmart-style system, and new tokens are appended.
   ============================================================ */
:root {
    /* ---- Brand: Red (was Walmart Blue #0071DC) ---- */
    --color-primary: #C8102E;
    --color-primary-dark: #A00D24;
    --color-primary-light: #E8384F;
    --color-primary-bg: #FDF0F2;
    --color-primary-soft: #FBDFE3;

    /* ---- Structural Black (was Walmart navy #041E42 / #004F9A) ---- */
    --color-black: #111111;
    --color-charcoal: #232323;
    --color-dark-gray: #37475A;
    --color-medium-gray: #565959;
    --color-light-gray: #888C8C;
    --color-ink: #2E2F32;

    /* ---- Deal accent: Walmart Yellow (Rollback signature) ---- */
    --color-deal: #FFC220;
    --color-deal-dark: #F0B000;
    --color-deal-text: #111111;

    /* ---- Background: Walmart is white-first ---- */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F6F7;
    --color-bg-tint: #FDF0F2;
    --color-card: #FFFFFF;
    --color-card-hover: #FAFAFA;

    /* ---- Text ---- */
    --color-text: #2E2F32;
    --color-text-secondary: #565959;
    --color-text-muted: #74767C;
    --color-text-inverse: #FFFFFF;

    /* ---- Accent / status ---- */
    --color-rating: #111111;
    --color-rating-bg: #F5F6F7;
    --color-success: #128A4B;
    --color-success-bg: #E9F7EF;
    --color-warning: #B12704;
    --color-info: #1B4E9B;

    /* ---- Borders ---- */
    --border-color: #C9CACD;
    --border-color-light: #E3E4E5;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 16px;

    /* ---- Radii (--radius-* used inline by untouched templates) ---- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Shadows: Walmart is very flat, hairline borders + soft lift ---- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    --shadow-hover: 0 6px 18px rgba(0,0,0,0.14);

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

    /* ---- Typography: Bogle-like humanist geometric sans ---- */
    --font-body: "Bogle", "Everyday Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-display: var(--font-body);
    --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: 1360px;
    --header-top-height: 34px;
    --header-main-height: 72px;
    --header-nav-height: 44px;
    --header-total: 150px;
}

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

html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-total); }

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-info); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-primary); }
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-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
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 {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.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 — Walmart pill geometry
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 20px; font-size: var(--font-size-base);
    font-weight: 700; border-radius: var(--radius-pill);
    cursor: pointer; transition: all 0.15s ease; text-decoration: none;
    border: 1px solid transparent; white-space: nowrap; line-height: 1.2;
}
.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(--color-text);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-deal {
    background: var(--color-deal); color: var(--color-deal-text);
    border-color: var(--color-deal);
}
.btn-deal:hover { background: var(--color-deal-dark); color: var(--color-deal-text); }
.btn-full { width: 100%; }
.btn-lg { padding: 14px 32px; font-size: var(--font-size-lg); }
.btn-sm { padding: 7px 16px; font-size: var(--font-size-sm); }

/* ============================================================
   BADGES & FLAGS
   ============================================================ */
.badge {
    display: inline-block; padding: 3px 10px; font-size: var(--font-size-xs);
    font-weight: 700; border-radius: var(--radius-pill);
    text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.4;
}
.badge-red { background: var(--color-primary); color: #fff; }
.badge-black { background: var(--color-black); color: #fff; }
.badge-gold { background: var(--color-deal); color: var(--color-deal-text); }
.badge-green { background: var(--color-success); color: #fff; }
.badge-outline-red { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }

/* Walmart "Rollback" flag — notched left edge */
.badge-rollback {
    position: relative;
    display: inline-block;
    background: var(--color-deal);
    color: var(--color-deal-text);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px 4px 14px;
    border-radius: 2px var(--radius-pill) var(--radius-pill) 2px;
}
.badge-rollback::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
    background: var(--color-deal-dark);
    border-radius: 2px 0 0 2px;
}

/* ============================================================
   PRICE — Walmart signature superscript cents
   ============================================================ */
.price { color: var(--color-text); font-weight: 700; }
.price .woocommerce-Price-amount { color: var(--color-text); }
.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; }

/* .w-price markup emitted by a16a_price_parts() */
.w-price { display: inline-flex; align-items: flex-start; font-weight: 700; color: var(--color-text); line-height: 1; white-space: nowrap; }
.w-price .w-cur { font-size: 0.62em; align-self: flex-start; margin-top: 0.12em; }
.w-price .w-int { font-size: 1em; }
.w-price .w-cents { font-size: 0.62em; align-self: flex-start; margin-top: 0.12em; margin-left: 1px; }
.w-price.lg { font-size: 26px; }
.w-price.md { font-size: 20px; }
.w-price.sm { font-size: 16px; }
.w-price.xl { font-size: 34px; }
.w-price.is-sale { color: var(--color-primary); }
.w-was { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.w-was s, .w-was del { color: var(--color-text-muted); }
.w-save { font-size: var(--font-size-sm); font-weight: 700; color: 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; }

/* ============================================================
   SECTION HEADERS — Walmart: heavy left-aligned title
   ============================================================ */
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); margin-bottom: var(--space-lg);
}
.section-header h2 {
    font-size: 22px; font-weight: 800; color: var(--color-black);
    display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em;
}
.section-header h2::before {
    content: ''; display: inline-block; width: 4px; height: 22px;
    background: var(--color-primary); border-radius: var(--radius-pill);
}
.section-header .see-all {
    font-size: var(--font-size-sm); color: var(--color-info);
    font-weight: 700; display: inline-flex; align-items: center; gap: 4px;
}
.section-header .see-all:hover { color: var(--color-primary); text-decoration: underline; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb { background: #C9CACD; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: #A9AAAE; }

/* ============================================================
   WOOCOMMERCE CORE OVERRIDES
   ============================================================ */
.woocommerce .products ul, .woocommerce ul.products { margin: 0; padding: 0; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
    background: var(--color-primary); color: #fff;
    border-radius: var(--radius-pill); font-weight: 700;
    padding: 12px 24px; border: 1px solid var(--color-primary);
    font-size: var(--font-size-base);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
    background: var(--color-primary-dark); color: #fff;
}
.woocommerce a.button.wc-backward, .woocommerce button.button.wc-backward {
    background: #fff; color: var(--color-text); border-color: var(--color-text);
}
.woocommerce a.button.wc-backward:hover { background: var(--color-bg-alt); color: var(--color-text); }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
    border-radius: var(--radius-sm); border-top: none;
    border-left: 4px solid var(--color-success);
    background: var(--color-success-bg); color: var(--color-text);
    padding: 14px 18px; margin-bottom: var(--space-md);
    font-size: var(--font-size-base);
}
.woocommerce-info { border-left-color: var(--color-info); background: #EEF4FD; }
.woocommerce-error { border-left-color: var(--color-primary); background: var(--color-primary-bg); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }

.woocommerce form .form-row label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
    border: 1px solid var(--color-text); border-radius: var(--radius-sm);
    padding: 12px 14px; height: auto; background: #fff;
    font-size: var(--font-size-base); color: var(--color-text);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--color-primary); }

/* Pagination — Walmart pill */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul { border: none; display: flex; gap: 6px; justify-content: center; margin: var(--space-xl) 0; }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill); border: 1px solid var(--border-color-light);
    background: #fff; color: var(--color-text); font-weight: 700; padding: 0 12px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--color-text); color: var(--color-text); background: var(--color-bg-alt); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--color-black); border-color: var(--color-black); color: #fff; }

/* Onsale / stock flashes */
.woocommerce span.onsale { display: none; }
.woocommerce .star-rating span { color: var(--color-deal); }