/*
Theme Name: PWA E-Commerce
Theme URI: https://example.com/pwa-ecommerce
Author: PWA Team
Author URI: https://example.com
Description: A bold, modern custom PHP e-commerce WordPress theme with hero banner, shop, product, cart, checkout, blog, wishlist, reviews, and mega menu support.
Version: 3.2.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pwa-ecommerce
Tags: e-commerce, bold, modern, custom-menu, featured-images, full-width-template, two-columns, wishlist, reviews
*/

/* =====================================================
   TABLE OF CONTENTS
   1. CSS Custom Properties
   2. Reset & Base
   3. Typography
   4. Layout Utilities
   5. Buttons
   6. Forms
   7. Badges & Tags
   ===================================================== */

/* 1. CSS Custom Properties */
:root {
    /* Brand — Bold Modern Red/Black */
    --clr-primary:     #0a0a0a;
    --clr-accent:      #e8192c;
    --clr-accent-hov:  #b80d1e;
    --clr-accent-dark: #c41425;
    --clr-accent-2:    #ff5252;
    --clr-bg:          #ffffff;
    --clr-bg-2:        #f9f9f9;
    --clr-surface:     #f3f3f3;
    --clr-surface-2:   #eaeaea;
    --clr-border:      #e2e2e2;
    --clr-text:        #111111;
    --clr-text-2:      #333333;
    --clr-muted:       #6b6b6b;
    --clr-white:       #ffffff;
    --clr-success:     #22c55e;
    --clr-warning:     #f59e0b;
    --clr-star:        #fbbf24;
    --clr-wishlist:    #e8192c;

    /* Typography */
    --ff-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --ff-serif: 'Playfair Display', Georgia, serif;
    --ff-mono:  'JetBrains Mono', 'Courier New', monospace;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;

    --fs-xs:   0.6875rem;
    --fs-sm:   0.8125rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  2rem;
    --fs-4xl:  2.75rem;
    --fs-5xl:  3.75rem;
    --fs-6xl:  5rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Border radius */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow-md: 0 6px 20px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.18);
    --shadow-accent: 0 8px 24px rgba(232,25,44,.25);

    /* Animation */
    --transition:      0.2s ease;
    --transition-slow: 0.4s ease;
    --ease-bounce:     cubic-bezier(.34,1.56,.64,1);

    /* Layout */
    --container-max: 1320px;
    --header-height: 72px;
    --sidebar-width: 280px;
}

/* 2. Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
table { border-collapse: collapse; width: 100%; }

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-serif);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--clr-primary);
}
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* 4. Layout Utilities */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.text-center { text-align: center; }
.text-muted { color: var(--clr-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-12); }
.section-title {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-2);
}
.section-subtitle {
    color: var(--clr-muted);
    margin-bottom: var(--space-10);
}
.divider { width: 48px; height: 3px; background: var(--clr-accent); margin-bottom: var(--space-4); }

/* 5. Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.btn-primary {
    background: var(--clr-accent);
    color: var(--clr-white);
    border-color: var(--clr-accent);
}
.btn-primary:hover {
    background: var(--clr-accent-hov);
    border-color: var(--clr-accent-hov);
    box-shadow: var(--shadow-md);
}
.btn-outline {
    background: transparent;
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}
.btn-outline:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
}
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--clr-primary);
}
.btn-ghost:hover { background: var(--clr-surface); }
.btn-sm { padding: 0.5rem 1rem; font-size: var(--fs-xs); }
.btn-lg { padding: 1rem 2.5rem; font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn-dark { background: var(--clr-primary); color: var(--clr-white); border-color: var(--clr-primary); }
.btn-dark:hover { background: #333; border-color: #333; }

/* 6. Forms */
.form-group { margin-bottom: var(--space-5); }
.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2);
    color: var(--clr-primary);
}
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--fs-sm);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--clr-white);
    color: var(--clr-text);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.form-control:focus {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}
.form-control.error { border-color: var(--clr-accent); }
.form-error { font-size: var(--fs-xs); color: var(--clr-accent); margin-top: var(--space-1); }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control { cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* 7. Badges & Tags */
.badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge-accent { background: var(--clr-accent); color: var(--clr-white); }
.badge-dark   { background: var(--clr-primary); color: var(--clr-white); }
.badge-muted  { background: var(--clr-surface); color: var(--clr-muted); }

/* Responsive base */
@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-2xl); }
    h3 { font-size: var(--fs-xl); }
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .container { padding-inline: var(--space-4); }
}