/**
 * Theme Name:     SK RECORDS CHILD THEME
 * Author:         SIBUSISO KETILE
 * Template:       astra
 * Text Domain:	   sk-records-child-theme
 * Description:    SK Records SA Child Theme
 */

/* SK Records SA - Full Dark Background */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #16130f !important;
}

#page, .site, .ast-container, .ast-container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #16130f !important;
}

.ast-page-builder-template .site-content {
    padding: 0 !important;
    background: #16130f !important;
}

.ast-page-builder-template .site-content > .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #16130f !important;
}

/* All content should have dark background */
.entry-content,
.site-content,
.content-area {
    background: #16130f !important;
}

/* Product pages */
.woocommerce-page,
.woocommerce-products-header,
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag,
.single-product {
    background: #16130f !important;
}

/* ============================================================
   HIDE PREVIOUS/NEXT POST BUTTONS
   ============================================================ */
.post-navigation,
.navigation,
.nav-links,
.prev-post,
.next-post,
.single .nav-links,
.ast-single-post-pagination,
.site-main .post-navigation,
.ast-post-navigation,
.ast-single-post-navigation,
.page .post-navigation {
    display: none !important;
}

/* ============================================================
   REMOVE ALL ASTRA FOOTER SPACING
   ============================================================ */
.site-footer,
.ast-footer-overlay,
.ast-footer-copyright,
.site-primary-footer-wrap,
.site-footer-primary-section-1 {
    padding: 0 !important;
    margin: 0 !important;
    background: #1a1714 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Full width footer */
.sk-complete-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1a1714 !important;
}

.sk-complete-footer .sk-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 20px;
    width: 100%;
}

/* Fix Elementor */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-row {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.sk-hero2-scope {
    background: #16130f !important;
    padding: 120px 12px 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .sk-hero2-scope {
        padding: 100px 10px 20px !important;
    }
    .sk-hero2-title {
        font-size: 22px !important;
    }
    .sk-hero2-art {
        max-width: 180px !important;
    }
}

@media (max-width: 480px) {
    .sk-hero2-scope {
        padding: 80px 8px 20px !important;
    }
    .sk-hero2-title {
        font-size: 18px !important;
    }
    .sk-hero2-art {
        max-width: 140px !important;
        padding: 6px !important;
    }
    .sk-hero2-desc {
        font-size: 12px !important;
    }
    .sk-hero2-btn {
        font-size: 12px !important;
        padding: 10px 20px !important;
        width: 100% !important;
        text-align: center !important;
    }
}

.logged-in .sk-hero2-scope {
    padding-top: 160px !important;
}

@media (max-width: 782px) {
    .logged-in .sk-hero2-scope {
        padding-top: 180px !important;
    }
}

@media (max-width: 480px) {
    .logged-in .sk-hero2-scope {
        padding-top: 140px !important;
    }
}

/* ============================================================
   BOXY DESIGN - LATEST SINGLES & ALBUMS
   Matches "Releases of the Month" style
   ============================================================ */

.sk-singles-scope .products,
.sk-albums-scope .products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sk-singles-scope .products .product,
.sk-albums-scope .products .product {
    background: #241d15 !important;
    border: 1px solid rgba(242, 236, 225, 0.08) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    transition: transform 0.3s, border-color 0.3s !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.sk-singles-scope .products .product:hover,
.sk-albums-scope .products .product:hover {
    transform: translateY(-4px) !important;
    border-color: #e3a35c !important;
}

.sk-singles-scope .products .product img,
.sk-albums-scope .products .product img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
    margin: 0 0 10px 0 !important;
}

.sk-singles-scope .products .product .woocommerce-loop-product__title,
.sk-albums-scope .products .product .woocommerce-loop-product__title {
    font-family: 'Fraunces', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f2ece1 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.sk-singles-scope .products .product .price,
.sk-albums-scope .products .product .price {
    font-size: 14px !important;
    color: #e3a35c !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.sk-singles-scope .products .product .add_to_cart_button,
.sk-albums-scope .products .product .add_to_cart_button {
    display: inline-block !important;
    background: #c97a2b !important;
    color: #241407 !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.3s, transform 0.2s !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: 4px !important;
}

.sk-singles-scope .products .product .add_to_cart_button:hover,
.sk-albums-scope .products .product .add_to_cart_button:hover {
    background: #e3a35c !important;
    transform: scale(1.02) !important;
}

/* Hide star ratings */
.sk-singles-scope .products .product .star-rating,
.sk-albums-scope .products .product .star-rating {
    display: none !important;
}

/* Hide sale badge if not needed */
.sk-singles-scope .products .product .onsale,
.sk-albums-scope .products .product .onsale {
    background: #c97a2b !important;
    color: #241407 !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 10px !important;
}

/* Tablet */
@media (min-width: 600px) {
    .sk-singles-scope .products,
    .sk-albums-scope .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .sk-singles-scope .products .product,
    .sk-albums-scope .products .product {
        padding: 16px !important;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .sk-singles-scope .products,
    .sk-albums-scope .products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }
    .sk-singles-scope .products .product,
    .sk-albums-scope .products .product {
        padding: 20px !important;
    }
}

/* ============================================================
   FOOTER NOTICE
   ============================================================ */
#sk-footer-notice {
    background: #241d15;
    border: 1px solid #c97a2b;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 100%;
    color: #f2ece1;
    box-sizing: border-box;
}

#sk-footer-notice .notice-icon {
    font-size: 18px;
    flex-shrink: 0;
}

#sk-footer-notice .notice-text {
    flex: 1;
    min-width: 0;
}

#sk-footer-notice .notice-text p {
    margin: 0;
    font-size: 12px;
    color: #a89b87;
    line-height: 1.4;
    word-wrap: break-word;
}

#sk-footer-notice .notice-text strong {
    color: #f2ece1;
}

#sk-footer-notice .notice-text .highlight {
    color: #e3a35c;
    font-weight: 600;
}

#sk-footer-notice .notice-time {
    font-size: 10px;
    color: #a89b87;
    opacity: 0.6;
    display: block;
    margin-top: 2px;
}

#sk-footer-notice .notice-close {
    background: none;
    border: none;
    color: #a89b87;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

#sk-footer-notice .notice-close:hover {
    color: #e3a35c;
}

/* ============================================================
   FOOTER GRID
   ============================================================ */
.sk-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 30px;
    text-align: center;
}

.sk-footer-grid .sk-brand h3 {
    font-family: 'Fraunces', serif;
    color: #f2ece1;
    font-size: 22px;
    margin: 0 0 8px;
}

.sk-footer-grid .sk-brand p {
    color: #a89b87;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.sk-footer-grid .sk-brand .sk-tagline {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #e3a35c;
    margin-top: 6px;
    opacity: 0.6;
    display: block;
}

.sk-footer-grid h4 {
    font-family: 'Space Mono', monospace;
    color: #e3a35c;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.sk-footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sk-footer-grid ul li a {
    color: #a89b87;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s;
}

.sk-footer-grid ul li a:hover {
    color: #e3a35c;
}

/* ============================================================
   FOOTER PAYMENTS
   ============================================================ */
.sk-footer-payments {
    border-top: 1px solid rgba(242, 236, 225, 0.08);
    border-bottom: 1px solid rgba(242, 236, 225, 0.08);
    padding: 16px 0;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sk-footer-payments .sk-payment-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a89b87;
    margin: 0;
}

.sk-footer-payments .sk-payment-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sk-footer-payments .sk-payment-icons span {
    background: #16130f;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 500;
    color: #f2ece1;
    border: 1px solid rgba(242, 236, 225, 0.08);
    white-space: nowrap;
}

.sk-footer-payments .sk-payment-icons span i {
    color: #e3a35c;
    margin-right: 4px;
}

/* ============================================================
   FOOTER BOTTOM
   ============================================================ */
.sk-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #a89b87;
    opacity: 0.6;
    text-align: center;
}

.sk-footer-bottom .sk-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
}

.sk-footer-bottom .sk-footer-links a {
    color: #a89b87;
    text-decoration: none;
    transition: color 0.3s;
}

.sk-footer-bottom .sk-footer-links a:hover {
    color: #e3a35c;
}

/* ============================================================
   RESPONSIVE - FOOTER
   ============================================================ */
@media (min-width: 600px) {
    .sk-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 30px;
        text-align: left;
    }
    .sk-footer-payments {
        flex-direction: row;
        justify-content: space-between;
    }
    .sk-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    #sk-footer-notice {
        max-width: 450px;
    }
}

@media (max-width: 400px) {
    .sk-footer-payments .sk-payment-icons span {
        font-size: 10px;
        padding: 4px 10px;
    }
}

/* ============================================================
   3D BADGES - Promo & Out Now for Release Grid
   ============================================================ */

.sk-release-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 24px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: perspective(400px) rotateX(2deg) rotateY(-2deg);
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 0 rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.4);
}

.sk-release-badge::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 20px 20px 50% 50%;
    pointer-events: none;
}

.sk-badge-promo {
    background: linear-gradient(135deg, #c97a2b, #e3a35c, #c97a2b);
    background-size: 200% 200%;
    color: #241407;
    animation: shimmer 3s ease infinite;
    box-shadow: 
        0 4px 0 #8a5a1a,
        0 8px 20px rgba(201, 122, 43, 0.5);
}

.sk-badge-outnow {
    background: linear-gradient(135deg, #2f8f5b, #4fbf82, #2f8f5b);
    background-size: 200% 200%;
    color: #06301b;
    animation: shimmer 3s ease infinite;
    box-shadow: 
        0 4px 0 #1a5a33,
        0 8px 20px rgba(47, 143, 91, 0.5);
}

.sk-release-card:hover .sk-release-badge {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg) translateY(-4px);
    box-shadow: 
        0 6px 0 rgba(0, 0, 0, 0.3),
        0 12px 30px rgba(0, 0, 0, 0.5);
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}