/*
 Theme Name:   American Blackheart
 Theme URI:    https://americanblackheart.com
 Description:  Dark, gritty Storefront child theme for American Blackheart print-on-demand.
 Author:       American Blackheart
 Version:      1.0.0
 Template:     storefront
 Text Domain:  americanblackheart
*/


/* ==========================================================================
   0.  DESIGN TOKENS
   ========================================================================== */

:root {
    /* --- Palette --- */
    --abh-crimson:       #8B1A1A;
    --abh-crimson-light: #A62525;
    --abh-crimson-dark:  #6E1414;
    --abh-black:         #000000;
    --abh-body-bg:       #111111;
    --abh-surface:       #1A1A1A;
    --abh-surface-alt:   #222222;
    --abh-border:        #2A2A2A;
    --abh-text:          #E0DADA;
    --abh-text-muted:    #8A8585;
    --abh-white:         #F0EDED;

    /* --- Type --- */
    --abh-font-display:  'Oswald', sans-serif;
    --abh-font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- Spacing --- */
    --abh-space-xs:  0.5rem;
    --abh-space-sm:  1rem;
    --abh-space-md:  2rem;
    --abh-space-lg:  4rem;
    --abh-space-xl:  6rem;
}


/* ==========================================================================
   1.  GLOBAL RESETS & BASE
   ========================================================================== */

body,
.site-content,
#content {
    background-color: var(--abh-body-bg);
    color: var(--abh-text);
}

body {
    font-family: var(--abh-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--abh-crimson);
    color: var(--abh-white);
}


/* ==========================================================================
   2.  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.alpha, .beta, .gamma, .delta {
    font-family: var(--abh-font-display);
    font-weight: 700;
    color: var(--abh-white);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
}

h1, .alpha { font-size: 2.8rem; }
h2, .beta  { font-size: 2rem; }
h3, .gamma { font-size: 1.5rem; }
h4, .delta { font-size: 1.15rem; }

p {
    color: var(--abh-text);
    max-width: 65ch;
}

a {
    color: var(--abh-crimson-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--abh-white);
}


/* ==========================================================================
   3.  HEADER & NAVIGATION
   ========================================================================== */

.site-header,
.main-navigation {
    background-color: var(--abh-black);
    border-bottom: 3px solid var(--abh-crimson);
}

.site-header {
    padding: var(--abh-space-sm) 0;
}

/* Logo / branding */
.site-branding .site-title a,
.site-branding .beta a {
    font-family: var(--abh-font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--abh-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.site-branding .site-title a:hover {
    color: var(--abh-crimson-light);
}

.site-description {
    color: var(--abh-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Primary nav links */
.main-navigation ul li a,
.main-navigation ul.menu > li > a,
.site-header-cart .cart-contents {
    color: var(--abh-text);
    font-family: var(--abh-font-display);
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6em 1em;
    transition: color 0.2s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul.menu > li > a:hover,
.site-header-cart .cart-contents:hover {
    color: var(--abh-crimson-light);
}

/* Active / current page */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
    color: var(--abh-crimson);
    border-bottom: 2px solid var(--abh-crimson);
}

/* Dropdown menus */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
}

.main-navigation ul.menu ul li a {
    color: var(--abh-text);
    font-size: 0.85rem;
}

.main-navigation ul.menu ul li a:hover {
    background-color: var(--abh-surface-alt);
    color: var(--abh-crimson-light);
}

/* Cart count badge */
.site-header-cart .cart-contents .count,
.site-header-cart .cart-contents .amount {
    color: var(--abh-crimson);
    font-weight: 600;
}


/* ==========================================================================
   4.  BUTTONS
   ========================================================================== */

button,
input[type="submit"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.added_to_cart {
    background-color: var(--abh-crimson);
    color: var(--abh-white);
    font-family: var(--abh-font-display);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 2px;
    padding: 0.85em 2em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.added_to_cart:hover {
    background-color: var(--abh-crimson-light);
    color: var(--abh-white);
    transform: translateY(-1px);
}

button:active,
.button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
    transform: translateY(0);
    background-color: var(--abh-crimson-dark);
}

/* Outline / secondary button */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled {
    background-color: var(--abh-surface-alt);
    color: var(--abh-text-muted);
    cursor: not-allowed;
}


/* ==========================================================================
   5.  FORMS & INPUTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
.input-text {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    color: var(--abh-text);
    font-family: var(--abh-font-body);
    font-size: 0.95rem;
    border-radius: 2px;
    padding: 0.7em 1em;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.input-text:focus {
    border-color: var(--abh-crimson);
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.25);
}

label {
    color: var(--abh-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}


/* ==========================================================================
   6.  PRODUCT GRID (SHOP / ARCHIVE)
   ========================================================================== */

.site-main ul.products li.product,
ul.products li.product {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-main ul.products li.product:hover,
ul.products li.product:hover {
    border-color: var(--abh-crimson);
    box-shadow: 0 4px 20px rgba(139, 26, 26, 0.15);
}

/* Product images */
ul.products li.product a img,
ul.products li.product img {
    border-radius: 0;
    margin-bottom: 0;
    transition: opacity 0.3s ease;
}

ul.products li.product:hover a img {
    opacity: 0.9;
}

/* Product title in grid */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
    font-family: var(--abh-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--abh-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.8em 1em 0.2em;
}

/* Product price in grid */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
    color: var(--abh-crimson-light);
    font-family: var(--abh-font-display);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 0 1em 1em;
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: var(--abh-crimson);
    color: var(--abh-white);
    font-family: var(--abh-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 2px;
    padding: 0.4em 0.8em;
    min-width: auto;
    min-height: auto;
    line-height: 1.4;
}

/* Star ratings */
.star-rating span::before,
.star-rating::before {
    color: var(--abh-crimson-light);
}


/* ==========================================================================
   7.  SINGLE PRODUCT PAGE
   ========================================================================== */

.single-product div.product .product_title {
    font-size: 2.2rem;
    color: var(--abh-white);
    border-bottom: 2px solid var(--abh-crimson);
    padding-bottom: 0.4em;
    margin-bottom: 0.6em;
}

.single-product div.product .price,
.single-product div.product p.price {
    color: var(--abh-crimson-light);
    font-family: var(--abh-font-display);
    font-size: 1.6rem;
    font-weight: 600;
}

.single-product div.product .woocommerce-product-details__short-description {
    color: var(--abh-text);
    font-size: 1rem;
    line-height: 1.75;
    border-left: 3px solid var(--abh-crimson);
    padding-left: 1.2em;
    margin: 1.5em 0;
}

/* Tabs */
.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--abh-border);
}

.woocommerce-tabs ul.tabs li {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.woocommerce-tabs ul.tabs li a {
    font-family: var(--abh-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--abh-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--abh-crimson);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--abh-white);
}

.woocommerce-tabs .panel {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    border-top: none;
    padding: var(--abh-space-md);
    color: var(--abh-text);
}

/* Related / upsell headings */
.related.products h2,
.upsells.products h2,
.cross-sells h2 {
    font-size: 1.4rem;
    border-bottom: 2px solid var(--abh-crimson);
    padding-bottom: 0.4em;
    margin-bottom: 1.5em;
}

/* Quantity input */
.woocommerce .quantity .qty {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    color: var(--abh-white);
    font-family: var(--abh-font-display);
    font-size: 1rem;
}


/* ==========================================================================
   8.  CART & CHECKOUT
   ========================================================================== */

.woocommerce-cart table.cart,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
    background-color: var(--abh-surface);
    border-color: var(--abh-border);
    color: var(--abh-text);
}

.woocommerce-cart table.cart th {
    font-family: var(--abh-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--abh-text-muted);
    font-size: 0.85rem;
}

.woocommerce table.cart .product-name a {
    color: var(--abh-white);
    font-weight: 500;
}

.woocommerce table.cart .product-name a:hover {
    color: var(--abh-crimson-light);
}

.cart_totals,
.woocommerce-checkout #order_review {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    padding: var(--abh-space-md);
    border-radius: 2px;
}

.cart_totals h2,
.woocommerce-checkout h3 {
    font-size: 1.2rem;
    border-bottom: 2px solid var(--abh-crimson);
    padding-bottom: 0.4em;
}

/* Checkout form */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    border-radius: 2px;
}


/* ==========================================================================
   9.  WIDGETS & SIDEBAR
   ========================================================================== */

.widget {
    background-color: var(--abh-surface);
    border: 1px solid var(--abh-border);
    border-radius: 2px;
    padding: var(--abh-space-sm) var(--abh-space-md);
    margin-bottom: var(--abh-space-md);
}

.widget-title,
.widgettitle {
    font-family: var(--abh-font-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--abh-white);
    border-bottom: 2px solid var(--abh-crimson);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

.widget ul li a {
    color: var(--abh-text);
}

.widget ul li a:hover {
    color: var(--abh-crimson-light);
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--abh-black);
    border-top: 3px solid var(--abh-crimson);
    color: var(--abh-text-muted);
    padding: var(--abh-space-lg) 0 var(--abh-space-md);
}

.site-footer h4,
.site-footer .widget-title {
    color: var(--abh-white);
    border-bottom-color: var(--abh-crimson);
}

.site-footer a {
    color: var(--abh-text-muted);
}

.site-footer a:hover {
    color: var(--abh-crimson-light);
}

.abh-footer-credit {
    text-align: center;
    font-family: var(--abh-font-display);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--abh-text-muted);
    padding-top: var(--abh-space-md);
    margin-top: var(--abh-space-md);
    border-top: 1px solid var(--abh-border);
}


/* ==========================================================================
   11. HOMEPAGE SECTIONS
   ========================================================================== */

/* Hero / banner area */
.storefront-hero-content,
.page-template-template-homepage .site-main > .type-page .entry-content {
    background-color: var(--abh-black);
    padding: var(--abh-space-xl) var(--abh-space-md);
    text-align: center;
}

.storefront-hero-content h1 {
    font-size: 3.2rem;
    color: var(--abh-white);
    margin-bottom: 0.3em;
}

.storefront-hero-content p {
    color: var(--abh-text-muted);
    font-size: 1.1rem;
    max-width: 50ch;
    margin: 0 auto 1.5em;
}

/* Featured / recent products sections on homepage */
.storefront-product-section {
    padding: var(--abh-space-lg) 0;
}

.storefront-product-section .section-title {
    font-size: 1.6rem;
    border-bottom: 2px solid var(--abh-crimson);
    padding-bottom: 0.3em;
    display: inline-block;
    margin-bottom: var(--abh-space-md);
}


/* ==========================================================================
   12. BREADCRUMBS & NOTICES
   ========================================================================== */

.woocommerce-breadcrumb {
    color: var(--abh-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.woocommerce-breadcrumb a {
    color: var(--abh-text-muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--abh-crimson-light);
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
    background-color: var(--abh-surface);
    border-top-color: var(--abh-crimson);
    color: var(--abh-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--abh-crimson);
}

.woocommerce-error {
    background-color: var(--abh-surface);
    border-top-color: #C0392B;
    color: var(--abh-text);
}


/* ==========================================================================
   13. SEARCH & 404
   ========================================================================== */

.no-results,
.error-404 {
    background-color: var(--abh-surface);
    padding: var(--abh-space-lg);
    text-align: center;
    border: 1px solid var(--abh-border);
    border-radius: 2px;
}

.error-404 .page-title {
    font-size: 4rem;
    color: var(--abh-crimson);
}


/* ==========================================================================
   14. PAGINATION
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background-color: var(--abh-surface);
    border-color: var(--abh-border);
    color: var(--abh-text);
    font-family: var(--abh-font-display);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--abh-crimson);
    border-color: var(--abh-crimson);
    color: var(--abh-white);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--abh-crimson);
    border-color: var(--abh-crimson);
    color: var(--abh-white);
}


/* ==========================================================================
   15. SCROLLBAR (WebKit)
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--abh-body-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--abh-crimson-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--abh-crimson);
}


/* ==========================================================================
   16. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media screen and (max-width: 768px) {

    h1, .alpha {
        font-size: 2rem;
    }

    .storefront-hero-content h1 {
        font-size: 2.2rem;
    }

    .storefront-hero-content {
        padding: var(--abh-space-lg) var(--abh-space-sm);
    }

    .single-product div.product .product_title {
        font-size: 1.6rem;
    }

    .site-header {
        padding: var(--abh-space-xs) 0;
    }

    .widget {
        padding: var(--abh-space-sm);
    }
}

@media screen and (max-width: 480px) {

    h1, .alpha {
        font-size: 1.6rem;
    }

    .storefront-hero-content h1 {
        font-size: 1.8rem;
    }

    ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.9rem;
    }
}