/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Custom Child Theme for Drk Beauté - Modern Clean Grooming & Accessories
 Author:       Drk Beauté
 Author URI:   https://drkbeaute.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
    --drk-bg: #FAFAFA;
    --drk-surface: #FFFFFF;
    --drk-text-heading: #1A1D20;
    --drk-text-body: #374151;
    --drk-text-muted: #6B7280;
    
    /* Brand Accents */
    --drk-accent: #2E5A44;          /* Deep Forest Sage */
    --drk-accent-hover: #224333;
    --drk-flipkart: #2874F0;        /* Flipkart Official Blue */
    --drk-flipkart-hover: #1A5BC4;
    
    /* Borders & Shadows */
    --drk-border: #E5E7EB;
    --drk-border-subtle: #F3F4F6;
    --drk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --drk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --drk-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.09);
    
    /* Radii */
    --drk-radius-card: 12px;
    --drk-radius-btn: 6px;
    --drk-radius-pill: 9999px;
    
    /* Transitions */
    --drk-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. ANTI-AI TYPOGRAPHY & SMOOTH SCROLLING
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--drk-bg);
    color: var(--drk-text-body);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--drk-text-heading);
    letter-spacing: -0.025em;
    font-weight: 700;
}

/* ==========================================================================
   3. CLEAN-BEAUTY PRODUCT CARD UI
   ========================================================================== */
.drk-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.drk-product-card {
    background: var(--drk-surface);
    border: 1px solid var(--drk-border);
    border-radius: var(--drk-radius-card);
    padding: 1.5rem;
    transition: var(--drk-transition);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.drk-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--drk-shadow-hover);
    border-color: #D1D5DB;
}

.drk-product-card .product-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.drk-product-card .product-image-wrapper img {
    max-width: 85%;
    height: auto;
    object-fit: contain;
    transition: var(--drk-transition);
}

.drk-product-card:hover .product-image-wrapper img {
    transform: scale(1.05);
}

.drk-product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--drk-border);
    color: var(--drk-accent);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--drk-radius-pill);
    box-shadow: var(--drk-shadow-sm);
    z-index: 2;
}

.drk-product-card .product-title {
    font-size: 1.15rem;
    margin: 0 0 0.35rem 0;
    line-height: 1.35;
    color: var(--drk-text-heading);
}

.drk-product-price {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--drk-accent);
    margin-bottom: 0.65rem;
}

.drk-product-card .product-desc {
    font-size: 0.9rem;
    color: var(--drk-text-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.drk-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #9CA3AF;
}

.drk-image-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

.drk-no-products {
    text-align: center;
    padding: 3rem 1rem;
    background: #FFFFFF;
    border: 1px dashed var(--drk-border);
    border-radius: var(--drk-radius-card);
    color: var(--drk-text-muted);
    font-size: 1.05rem;
}


/* ==========================================================================
   4. HIGH-CONVERTING "BUY ON FLIPKART" BUTTON
   ========================================================================== */
.drk-btn-flipkart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--drk-accent);
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.25rem;
    border-radius: var(--drk-radius-btn);
    transition: var(--drk-transition);
    border: none;
    cursor: pointer;
    text-align: center;
}

.drk-btn-flipkart:hover {
    background-color: var(--drk-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 90, 68, 0.25);
}

.drk-btn-flipkart svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.drk-btn-flipkart:hover svg {
    transform: translate(2px, -2px);
}

/* Alternate Flipkart Branded Variant */
.drk-btn-flipkart.variant-blue {
    background-color: var(--drk-flipkart);
}

.drk-btn-flipkart.variant-blue:hover {
    background-color: var(--drk-flipkart-hover);
    box-shadow: 0 4px 12px rgba(40, 116, 240, 0.3);
}

/* ==========================================================================
   5. FOOTER & COPYRIGHT STYLING
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--drk-border);
}

.ast-footer-copyright {
    color: var(--drk-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}