/* ==========================================================
   PART 1: CORE LAYOUT (Base Structure, Gallery, Share)
   Filename: assets/css/ql-core.css
   ========================================================== */

/* 1. LANDING PAGE MODE RESET */
body.ql-landing-page-mode {
    background-color: #f4f6f8;
    overflow-x: hidden;
}

/* Hide Theme Elements */
body.ql-landing-page-mode .woocommerce-breadcrumb,
body.ql-landing-page-mode .storefront-breadcrumb,
body.ql-landing-page-mode nav.woocommerce-breadcrumb,
body.ql-landing-page-mode .entry-header,
body.ql-landing-page-mode .page-title {
    display: none !important;
}

body.ql-landing-page-mode .site-content,
body.ql-landing-page-mode .content-area,
body.ql-landing-page-mode #content,
body.ql-landing-page-mode #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. PRODUCT CARD CONTAINER */
body.ql-landing-page-mode .product {
    background: #ffffff;
    max-width: 1280px; /* INCREASED: Wider card on PC */
    box-sizing: border-box;
    position: relative;
    border-top: none !important;
}
body.ql-landing-page-mode .product::after { content: ""; display: table; clear: both; }

/* PC: Increased Top Gap (50px) for clear separation */
@media (min-width: 768px) {
    body.ql-landing-page-mode .site-content {
        padding-top: 50px !important;
    }
    body.ql-landing-page-mode .product {
        margin: 0 auto 30px auto !important;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }
    body.ql-landing-page-mode .woocommerce-product-gallery {
        width: 48% !important; float: left !important; margin-right: 4% !important;
    }
    body.ql-landing-page-mode .summary.entry-summary {
        width: 48% !important; float: right !important;
    }

    /* === HIDE STICKY BAR ON PC === */
    .quickland-sticky-bar {
        display: none !important;
    }
}

/* Mobile: 10px Top Gap, 0px Side Gap (UPDATED: Zero Gap & Full Width) */
@media (max-width: 767px) {
    body.ql-landing-page-mode .site-header { margin-bottom: 0 !important; }
    
    /* Force Theme Containers to Full Width (Zero Padding) */
    body.ql-landing-page-mode .container,
    body.ql-landing-page-mode .ast-container, 
    body.ql-landing-page-mode .col-full,      
    body.ql-landing-page-mode .site-content,
    body.ql-landing-page-mode #content,
    body.ql-landing-page-mode .content-area {
        width: 100% !important; 
        max-width: 100% !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    body.ql-landing-page-mode .product {
        margin: 10px 0 !important; /* UPDATED: Zero side margin */
        width: 100% !important;    
        border-radius: 0 !important; /* Squared edges for smooth full-width look */
        box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
        padding: 20px 15px !important;
    }
    
    body.ql-landing-page-mode .woocommerce-product-gallery,
    body.ql-landing-page-mode .summary.entry-summary {
        width: 100% !important; float: none !important; margin-right: 0 !important;
    }
    body.ql-landing-page-mode .summary.entry-summary { margin-top: 15px; }

    /* === STICKY BAR FULL WIDTH MOBILE STYLING === */
    .quickland-sticky-bar { 
        padding: 0 !important; /* Zero out ALL padding on the main wrapper */
        margin: 0 !important; /* Zero out ALL margin on the main wrapper */
        display: flex !important; /* Ensure it stays visible on mobile */
    }
    .ql-sticky-inner-full { 
        width: 100% !important; 
        max-width: 100% !important;
        border-radius: 0 !important; /* Square off corners for full screen edge alignment */
        box-shadow: 0 0 15px rgba(0,0,0,0.2); 
    }
    .ql-sticky-btn.ql-full-width-btn {
        border-radius: 0 !important; /* Match inner container */
        padding: 18px 20px !important; 
    }
}

/* 3. GALLERY & THUMBS */
body.ql-landing-page-mode .woocommerce-product-gallery__image img {
    border-radius: 10px; border: 1px solid #f0f0f0; width: 100%; height: auto;
}
body.ql-landing-page-mode .flex-control-thumbs {
    margin-top: 15px; display: flex; gap: 10px; overflow-x: auto;
}
body.ql-landing-page-mode .flex-control-thumbs li { width: 22%; flex-shrink: 0; list-style: none; }
body.ql-landing-page-mode .flex-control-thumbs img { border-radius: 6px; opacity: 0.7; }
body.ql-landing-page-mode .flex-control-thumbs img.flex-active { opacity: 1; border: 1px solid #333; }

/* 4. PRIMARY CARD TEXT */
.quickland-primary-card { display: flex; flex-direction: column; gap: 15px; width: 100%; }

.ql-card-title h1, .ql-card-title .product_title {
    margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.2; color: #111;
}

.ql-card-price .price {
    font-size: 22px; font-weight: 700; color: var(--ql-btn-buy-bg, #e65100);
    display: flex; align-items: center; gap: 10px;
}
.ql-card-price del { color: #999; font-size: 15px; opacity: 0.6; text-decoration: line-through; }

/* 5. SMART SHARE */
.ql-smart-share-row {
    margin-top: 10px; border-top: 1px dashed #eee; padding-top: 12px;
    display: flex; align-items: center; gap: 12px;
}
.ql-share-label { font-size: 14px; font-weight: 600; color: #333; }
.ql-share-actions { display: flex; align-items: center; gap: 8px; }

.ql-share-btn {
    width: 40px; height: 40px;
    border: 1px solid #e0e0e0; border-radius: 6px; /* Rounded Square */
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: #555; text-decoration: none; cursor: pointer;
    transition: all 0.2s ease;
}
.ql-share-btn:hover {
    background: #f4f4f4; color: #000; border-color: #ccc;
}
.ql-share-btn .dashicons { font-size: 18px; width: 18px; height: 18px; margin: 0; }

/* Hide Native share on Desktop */
@media (min-width: 768px) { .ql-share-native { display: none !important; } }
/* Show Native share on Mobile */
@media (max-width: 767px) { .ql-share-native { display: inline-flex !important; } }

/* Meta */
.quickland-primary-card .ql-card-meta {
    margin-top: 20px; font-size: 13px; color: #888;
    border-top: 1px solid #eee; padding-top: 15px; width: 100%;
}
.ql-meta-label { font-weight: 600; color: #333; }

body.ql-landing-page-mode .product .woocommerce-tabs,
body.ql-landing-page-mode .product .woocommerce-Tabs-panel { margin-top: 35px; clear: both; }