/**
Theme Name: SK Laser Creations Child
Author: Steve M
Author URI: https://sklasercreations.com
Description: Child theme for SK Laser Creations. Custom styles for Astra + Elementor + WooCommerce.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sk-laser-creations-child
Template: astra
*/

/* ============================================================
   SK LASER CREATIONS — CHILD THEME STYLESHEET
   Last updated: April 2026
   Stack: Astra Pro + Elementor + WooCommerce
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (BRAND TOKENS)
   ============================================================ */

:root {
    --sk-blue-light:     #00DFFF;
    --sk-blue-dark:      #035AFC;
    --sk-gradient:       linear-gradient(180deg, #00DFFF 0%, #035AFC 127.78%);
    --sk-gradient-flip:  linear-gradient(180deg, #035AFC 0%, #00DFFF 127.78%);
    --sk-black:          #111111;
    --sk-white:          #ffffff;
    --sk-border:         #EBEBEB;
    --sk-shadow-sm:      0 0 9px 3px rgba(0, 0, 0, 0.09);
    --sk-shadow-md:      0 0 10px 1px rgba(0, 0, 0, 0.12);
    --sk-radius-sm:      6px;
    --sk-radius-md:      10px;
    --sk-radius-lg:      20px;
    --sk-radius-pill:    50px;
    --sk-font-primary:   'Poppins', sans-serif;
    --sk-transition:     0.3s ease all;
}


/* ============================================================
   2. GLOBAL RESETS & BASE STYLES
   ============================================================ */

/* Remove underlines globally except where readability matters */
a:where(:not(.wp-element-button)):not(.entry-content a):not(.woocommerce-privacy-policy-text a) {
    text-decoration: none;
}

/* Capitalize headings and image box titles */
.elementor-heading-title,
.elementor-image-box-title {
    text-transform: capitalize;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

#astra-footer-menu > .menu-item > .menu-link {
    letter-spacing: 2.4px;
}

.ast-footer-copyright p {
    letter-spacing: 1.2px;
}


/* ============================================================
   4. LAYOUT — PAGE CONTENT SPACING
   ============================================================ */

.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 70px;
    margin-bottom: 50px;
}

@media only screen and (max-width: 767px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-top: 40px;
        margin-bottom: 20px;
    }
}


/* ============================================================
   5. ABOVE HEADER BAR
   ============================================================ */

/* Desktop */
.ast-above-header-section .sk-above-header {
    font-size: 14px;
    gap: 20px;
    justify-content: flex-start;
}

/* Tablet */
@media (max-width: 1024px) {
    .ast-above-header-section .sk-above-header {
        font-size: 12px;
        gap: 12px;
        justify-content: center;
    }
}

/* Mobile — hide email, show phone only */
@media (max-width: 768px) {
    .ast-above-header-section .sk-above-header {
        font-size: 11px;
        gap: 8px;
        justify-content: center;
        padding: 0 12px;
        box-sizing: border-box;
        width: 100%;
    }

    .ast-above-header-section .sk-above-header a {
        font-size: clamp(10px, 2.5vw, 12px);
        white-space: nowrap;
    }

    /* Hide email on small screens to prevent overflow */
    .sk-hide-mobile {
        display: none !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .ast-above-header-section .sk-above-header {
        justify-content: center;
        text-align: center;
    }
}


/* ============================================================
   6. WOOCOMMERCE — SIDEBAR (HIDDEN SITEWIDE)
   Note: Remove if you add product filters later
   ============================================================ */

body.woocommerce #secondary,
body.tax-product_cat #secondary,
body.post-type-archive-product #secondary {
    display: none !important;
}

body.woocommerce #primary,
body.tax-product_cat #primary,
body.post-type-archive-product #primary {
    width: 100% !important;
    max-width: 100% !important;
}


/* ============================================================
   7. WOOCOMMERCE — PRODUCT GRID (CATEGORY PAGES)
   ============================================================ */

body.tax-product_cat ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
}

/* Desktop: 4 per row */
body.tax-product_cat ul.products li.product {
    width: 22% !important;
    margin-right: 2% !important;
    margin-bottom: 35px !important;
    box-sizing: border-box;
}

body.tax-product_cat ul.products li.product:nth-child(4n) {
    margin-right: 0 !important;
}

body.tax-product_cat ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
}

/* Tablet: 2 per row (769px–1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    body.tax-product_cat ul.products li.product {
        width: 48% !important;
        margin-right: 4% !important;
    }
    body.tax-product_cat ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
    body.tax-product_cat ul.products li.product:nth-child(4n) {
        margin-right: 4% !important;
    }
}

/* Large phone: 2 per row (481px–768px) */
@media (max-width: 768px) and (min-width: 481px) {
    body.tax-product_cat ul.products li.product {
        width: 48% !important;
        margin-right: 4% !important;
    }
    body.tax-product_cat ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
    body.tax-product_cat ul.products li.product:nth-child(4n) {
        margin-right: 4% !important;
    }
}

/* Small phone: 1 per row */
@media (max-width: 480px) {
    body.tax-product_cat ul.products li.product {
        width: 100% !important;
        margin-right: 0 !important;
    }
}


/* ============================================================
   8. WOOCOMMERCE — PRODUCT VARIATIONS (SWATCHES)
   ============================================================ */

.woocommerce-single-product .variations ul.variable-items-wrapper li img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin: 5px;
    border: 2px solid #ddd;
    border-radius: var(--sk-radius-sm);
    transition: var(--sk-transition);
}


/* ============================================================
   9. WOOCOMMERCE — PRODUCT META (CHIP BADGES)
   ============================================================ */

.chip_meta .detail-container:not(.posted_in) {
    display: none !important;
}

.chip_meta span.detail-label {
    display: none;
}

.chip_meta span.detail-content {
    font-size: 0;
}

.chip_meta .product_meta {
    border: none !important;
}

.posted_in a {
    background: linear-gradient(180deg, rgba(0, 223, 255, 0.2) 0%, rgba(3, 90, 252, 0.2) 127.78%);
    padding: 3px 13px;
    display: inline-block;
    border-radius: var(--sk-radius-pill);
    font-size: 12px;
    color: #0D56EE;
    margin-bottom: 0;
    margin-right: 4px;
    line-height: 22px;
}


/* ============================================================
   10. LOOP / PRODUCT CARDS (TOP SELLERS)
   ============================================================ */

.top_sellers .e-loop-item {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    transition: var(--sk-transition);
}

.top_sellers .e-loop-item:hover {
    box-shadow: var(--sk-shadow-md);
}

.top_sellers p.price {
    font-family: var(--sk-font-primary);
    font-size: 16px !important;
    line-height: 100%;
    color: var(--e-global-color-accent) !important;
}


/* ============================================================
   11. BUTTONS (GLOBAL)
   ============================================================ */

a.elementor-button:not(.elementor-menu-cart__toggle_button),
.single_add_to_cart_button {
    background: var(--sk-gradient) !important;
    font-family: var(--sk-font-primary);
    letter-spacing: 0 !important;
    text-transform: capitalize;
    transition: var(--sk-transition);
}

a.elementor-button:not(.elementor-menu-cart__toggle_button):hover,
.single_add_to_cart_button:hover {
    background: var(--sk-gradient-flip) !important;
}

a.elementor-button.elementor-button--view-cart.elementor-size-md {
    font-size: 14px !important;
}


/* ============================================================
   12. COLLECTION CARDS (HOMEPAGE)
   ============================================================ */

.collection:hover .elementor-heading-title {
    color: var(--e-global-color-accent) !important;
}

.collection:hover > a {
    background: linear-gradient(
        180deg,
        var(--e-global-color-4ee6046) 0%,
        var(--e-global-color-accent) 100%
    );
}


/* ============================================================
   13. REVIEWS WIDGET (TRUSTINDEX / GOOGLE)
   ============================================================ */

.ti-widget.ti-goog .ti-review-item > .ti-inner {
    background: var(--sk-white) !important;
}

.ti-widget.ti-goog .ti-col-4 .ti-review-item {
    flex: 0 0 33% !important;
    max-width: 33% !important;
}


/* ============================================================
   14. SINGLE PRODUCT PAGE
   ============================================================ */

.single_p_tabs ul.wc-tabs {
    background: var(--sk-white);
    border-radius: var(--sk-radius-md);
    box-shadow: var(--sk-shadow-sm);
    margin: 0 0 14px 0 !important;
}

.single_p_tabs ul.wc-tabs li a {
    padding: 17px 25px !important;
    font-size: 17px;
    color: var(--sk-black) !important;
    font-weight: 600 !important;
}

.single_p_tabs ul.wc-tabs li.active::before {
    display: none !important;
}

.single_p_tabs ul.wc-tabs li.active a,
.single_p_tabs ul.wc-tabs li:hover a {
    color: var(--sk-white) !important;
}

.single_p_tabs .wc-tabs > li.active,
.single_p_tabs .wc-tabs > li:hover {
    background: var(--sk-gradient) !important;
}

.single_p_tabs li:focus {
    outline: 0 !important;
}

.single_p_tabs .woocommerce-Tabs-panel {
    background: var(--sk-white);
}

.single_p_tabs .woocommerce-Tabs-panel h2,
.single_p_tabs .woocommerce-Tabs-panel h3,
.single_p_tabs .woocommerce-Tabs-panel h4,
.single_p_tabs .woocommerce-Tabs-panel h5 {
    margin: 20px 0;
    font-weight: 600 !important;
    font-size: 30px;
}

.wapf-product-totals span {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--sk-black) !important;
}

.wapf-wrapper select {
    outline: 0 !important;
    padding: 10px;
    height: unset;
    font-size: 16px;
}

.single_gallery_cust .flex-viewport {
    box-shadow: var(--sk-shadow-md);
    border-radius: var(--sk-radius-lg);
}


/* ============================================================
   15. SEARCH OVERLAY
   ============================================================ */

#sk-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.93);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: skFadeIn 0.25s ease;
}

#sk-search-overlay.active {
    display: flex;
}

@keyframes skFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#sk-search-overlay form {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--sk-blue-light);
    padding: 10px 0;
    width: 60%;
    max-width: 700px;
}

#sk-search-overlay input[type="search"] {
    background: transparent;
    border: none;
    outline: none;
    color: var(--sk-white);
    font-family: var(--sk-font-primary);
    font-size: 28px;
    width: 100%;
    padding: 10px;
}

#sk-search-overlay input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#sk-search-overlay button[type="submit"] {
    background: transparent;
    border: none;
    color: var(--sk-blue-light);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s ease;
}

#sk-search-overlay button[type="submit"]:hover {
    color: var(--sk-blue-dark);
}

#sk-search-close {
    position: absolute;
    top: 28px;
    right: 38px;
    color: var(--sk-white);
    font-size: 38px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    font-weight: 300;
}

#sk-search-close:hover {
    opacity: 1;
}

#sk-search-overlay .sk-search-hint {
    color: rgba(255, 255, 255, 0.35);
    margin-top: 18px;
    font-size: 13px;
    font-family: var(--sk-font-primary);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    #sk-search-overlay form {
        width: 88%;
    }
    #sk-search-overlay input[type="search"] {
        font-size: 20px;
    }
    #sk-search-close {
        top: 20px;
        right: 24px;
        font-size: 30px;
    }
}


/* ============================================================
   16. COOKIE CONSENT — MOBILE FIX
   ============================================================ */

@media (max-width: 768px) {
    .cmplz-header {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px;
    }
}


/* ============================================================
   17. EXTRA LARGE SCREENS (1900px+)
   NOTE: .elementor-6920 is a hardcoded page ID.
   If you rebuild that template, update this class name.
   ============================================================ */

@media (min-width: 1900px) {
    .elementor-6920 .elementor-element.elementor-element-e159005 a {
        font-size: 0.8vw;
        padding: 0.3vw 0.6vw;
    }

    a.elementor-button:not(.elementor-menu-cart__toggle_button),
    .single_add_to_cart_button {
        font-size: 1vw;
        padding: 1.2vw 3vw;
    }

    .top_sellers p.price {
        font-size: 1.2vw !important;
    }
}