/* Deadhead Chemist — homepage tokens & components (from source storefront) */
/* ============================================================
   Deadhead Chemist Main Stylesheet
   Variables are overridden by Customizer via inline <style>
   ============================================================ */

/* --------------------------------------------------------
 * 1. CSS VARIABLES (Design Tokens)
 * ------------------------------------------------------ */
:root {
    /* Colors */
    --color-accent:        #7f47dc;
    --color-accent-hover:  #6a34c4;
    --color-accent-dim:    rgba(127, 71, 220, 0.12);
    --color-accent-glow:   0 0 24px rgba(127, 71, 220, 0.4);

    --color-bg:            #0b1c22;
    --color-bg-alt:        #0e252c;
    --color-bg-card:       #123039;
    --color-bg-card-hover: #173b46;
    --color-border:        rgba(127, 71, 220, 0.1);
    --color-border-subtle: rgba(255,255,255,0.06);

    --color-text:          #eef6f6;
    --color-text-muted:    #9db4b8;
    --color-heading:       #eef6f6;
    --color-white:         #ffffff;

    --color-success:       #7f47dc;
    --color-warning:       #4cffd6;
    --color-danger:        #ff4e4e;
    --color-info:          #4ecbff;

    /* Typography */
    --font-heading: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-body:    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;
    --text-7xl:  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;

    /* Layout */
    --container-max:  1280px;
    --container-pad:  clamp(1rem, 4vw, 2rem);
    --header-height:  72px;
    --radius-sm:      4px;
    --radius:         8px;
    --radius-lg:      16px;
    --radius-xl:      24px;
    --radius-full:    9999px;

    /* Transitions */
    --transition:       0.2s ease;
    --transition-slow:  0.4s ease;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow:     0 4px 16px rgba(0,0,0,0.6);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.8);
    --shadow-accent: 0 0 20px rgba(127,71,220,0.25);
}
.section-title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    margin-bottom: var(--space-3);
}
/* --------------------------------------------------------
 * 9. PRODUCT GRID & CARDS
 * ------------------------------------------------------ */
.products-grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
}
/* WooCommerce product card */
li.product,
.product-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}
li.product:hover,
.product-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-accent);
    transform: translateY(-4px);
    background: var(--color-bg-card-hover);
}
/* Product image */
li.product .woocommerce-loop-product__link,
li.product > a:first-child {
    display: block;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--color-bg);
}
li.product .woocommerce-loop-product__link img,
li.product > a:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
li.product:hover .woocommerce-loop-product__link img,
li.product:hover > a:first-child img {
    transform: scale(1.06);
}
/* Product body */
li.product .product-body,
li.product .woocommerce-loop-product__title + * {
    padding: var(--space-4);
}
li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-heading);
    letter-spacing: 0.03em;
    padding: var(--space-4) var(--space-4) 0;
    line-height: 1.2;
}
li.product .price {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent);
    padding: var(--space-2) var(--space-4);
}
li.product .price del { color: var(--color-text-muted); font-size: var(--text-base); font-weight: 400; }
li.product .price ins { text-decoration: none; }
li.product .product-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: 0 var(--space-4);
    margin: 0;
    line-height: 1.5;
}
/* Add to cart */
/* ── Add to Cart button (product cards + global WC override) ── */
li.product .button,
li.product .add_to_cart_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 #payment #place_order,
.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
    background: var(--color-accent) !important;
    color: #081418 !important;
    border-color: var(--color-accent) !important;
    font-weight: 700;
    border-radius: var(--radius-full);
    transition: all var(--transition);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: var(--text-sm);
    cursor: pointer;
}
li.product .button,
li.product .add_to_cart_button {
    display: block;
    width: calc(100% - var(--space-8));
    margin: var(--space-4);
    padding: 0.65rem 1rem;
    text-align: center;
    border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
li.product .button:hover,
li.product .add_to_cart_button:hover {
    background: var(--color-accent-hover) !important;
    color: #081418 !important;
    box-shadow: var(--shadow-accent);
    transform: translateY(-1px);
}
li.product .button.loading { opacity: 0.7; pointer-events: none; }
li.product .button.added,
li.product .add_to_cart_button.added { background: var(--color-success) !important; }
/* Sale flash */
li.product .onsale {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--color-danger);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 2;
}
/* Out of stock */
li.product.outofstock::after {
    content: 'OUT OF STOCK';
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(0,0,0,0.8);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.05em;
    z-index: 2;
}
/* --------------------------------------------------------
 * 10. PRODUCT TABS
 * ------------------------------------------------------ */
.product-tabs__nav {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}
.tab-btn {
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all var(--transition);
    cursor: pointer;
}
.tab-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tab-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #081418;
    box-shadow: var(--shadow-accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.product-tabs__footer {
    text-align: center;
    margin-top: var(--space-10);
}
.no-products {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-10) 0;
}
/* --------------------------------------------------------
 * 13. FAQ
 * ------------------------------------------------------ */
.faq-grid {
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
}
.faq-item.is-open { border-color: var(--color-accent); }
.faq-item__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    color: var(--color-heading);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: left;
    transition: color var(--transition);
    background: none;
}
.faq-item__q:hover, .faq-item.is-open .faq-item__q { color: var(--color-accent); }
.faq-item__icon {
    flex-shrink: 0;
    font-size: var(--text-2xl);
    color: var(--color-accent);
    font-weight: 300;
    transition: transform var(--transition);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); background: var(--color-accent-dim); }
.faq-item__a { padding: 0 var(--space-6) var(--space-5); }
.faq-item__a p { color: var(--color-text); margin: 0; line-height: 1.7; }
.faq-more {
    text-align: center;
    margin-top: var(--space-8);
    color: var(--color-text-muted);
}
.faq-more a { color: var(--color-accent); font-weight: 600; }
.single-product .price {
    font-size: var(--text-3xl);
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: var(--space-5);
}
/* --------------------------------------------------------
 * 24. RESPONSIVE
 * ------------------------------------------------------ */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .why-order__grid { grid-template-columns: 1fr; }
    .why-order__media { max-height: 340px; }
}
@media (max-width: 768px) {
    :root { --header-height: 60px; }

    .site-nav {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        background: var(--color-bg-card);
        border-right: 1px solid var(--color-border);
        z-index: 90;
        padding: var(--space-20) var(--space-6) var(--space-6);
        overflow-y: auto;
        transition: left var(--transition-slow);
    }
    .site-nav.is-open { left: 0; }
    .site-nav__menu { flex-direction: column; align-items: stretch; gap: var(--space-1); }
    .site-nav__menu > li > a { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-base); }
    .site-nav__menu .sub-menu {
        position: static; opacity: 1; visibility: visible;
        transform: none; box-shadow: none; border: none;
        background: var(--color-bg); margin-top: var(--space-1);
        border-radius: var(--radius-lg); display: none;
    }
    .site-nav__menu li.is-open > .sub-menu { display: block; }

    .hamburger { display: flex; }

    .products-grid, ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-newsletter__inner { flex-direction: column; }
    .footer-newsletter__form { width: 100%; max-width: 100%; }
    .hero__actions { flex-direction: column; align-items: flex-start; }
    .features-strip__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .products-grid, ul.products { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: 1fr; }
    .hero { min-height: 70vh; }
    .hero__title { font-size: var(--text-4xl); }
}
/* On tablet and below — stack into single column */
@media (max-width: 860px) {
    .entry-content > section > div[style*="grid-template-columns: 1fr 1fr"],
    .entry-content > div[style*="grid-template-columns: 1fr 1fr"],
    .page-content .entry-content [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}