/* ============================================================
   DRONES ARK v2.1 — LAYOUT OVERRIDES
   Loaded LAST so it wins against Astra.
   ============================================================ */

/* ============================================================
   1. FULL-WIDTH SECTIONS
   Astra wraps content in .ast-container (max 1280px) and adds
   padding. Our hero / features / testimonials / footer must
   break out and span the whole viewport.
   ============================================================ */

/* Strip Astra's content container on our pages */
.da-fullwidth-page #primary,
.da-fullwidth-page .site-content > .ast-container,
.da-fullwidth-page .entry-content,
.da-fullwidth-page .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.da-fullwidth-page .site-content,
.da-fullwidth-page #content,
.da-fullwidth-page article,
.da-fullwidth-page .entry-content > * { max-width: 100% !important; }

.da-fullwidth-page .site-main,
.da-fullwidth-page .ast-article-single,
.da-fullwidth-page .ast-article-post {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the entry header (page title) on full-width pages */
.da-fullwidth-page .entry-header,
.da-fullwidth-page .ast-single-post-order,
.da-fullwidth-page .page-title,
.da-fullwidth-page .entry-title { display: none !important; }

/* Break-out utility — used by hero, features, testimonials, footer */
.da-hero,
.da-features,
.da-categories,
.da-testimonials,
.da-footer,
.da-fbt {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Inner content of those sections stays centred at 1280 */
.da-hero-inner,
.da-features-grid,
.da-categories-grid,
.da-testimonials-grid,
.da-footer-grid,
.da-fbt-inner {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Products section keeps the normal container */
.da-products-section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Section title above testimonials needs the container too */
.da-testimonials > .da-section-title,
.da-testimonials > .da-title-underline,
.da-categories > div:first-child {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Hero must actually fill its height */
.da-hero { display: block; overflow: hidden; }
.da-hero-slide { width: 100%; }
.da-hero-inner { min-height: inherit; }

/* ============================================================
   2. SINGLE PRODUCT PAGE — fix the squeezed columns
   The old flex rule fought Astra's own layout. Use grid,
   and force the sections below into their own full-width rows.
   ============================================================ */

.woocommerce div.product,
.woocommerce-page div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1280px;
    margin: 40px auto !important;
    padding: 0 20px;
    float: none !important;
    width: auto !important;
}

.woocommerce div.product > div.images,
.woocommerce div.product > .woocommerce-product-gallery {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product > div.summary,
.woocommerce div.product > .entry-summary {
    grid-column: 2;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Everything below spans both columns */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .da-fbt,
.woocommerce div.product > .da-recently-viewed,
.woocommerce div.product > .woocommerce-product-gallery + .summary + * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Related products grid inside the product page */
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce div.product .related ul.products li.product,
.woocommerce div.product .upsells ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Gallery sizing */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { width: 100%; }
.woocommerce div.product div.images img {
    width: 100% !important;
    height: auto !important;
    max-height: 480px;
    object-fit: contain;
}

/* Summary text must not be cramped */
.woocommerce div.product div.summary .product_title { font-size: 26px !important; }
.woocommerce div.product div.summary p,
.woocommerce div.product div.summary li { max-width: 100%; }

/* Tabs full width */
.woocommerce div.product .woocommerce-tabs { padding: 0 !important; margin-top: 40px !important; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 100% !important; }

/* ============================================================
   3. PAGE TITLE — remove Astra's duplicate
   Our templates print .da-page-title-bar; Astra also prints one.
   ============================================================ */
.da-has-custom-title .entry-header,
.da-has-custom-title .ast-archive-description,
.da-has-custom-title header.entry-header,
.da-has-custom-title .page-header { display: none !important; }

/* Contact / About: our own title bar handles it */
.page-template-page-contact .entry-header,
.page-template-page-about .entry-header,
.page-template-page-wishlist .entry-header,
.page-template-page-home .entry-header { display: none !important; }

/* ============================================================
   4. SHOP / ARCHIVE
   ============================================================ */
.woocommerce.archive .site-content > .ast-container,
.woocommerce-page.archive .site-content > .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.woocommerce ul.products {
    display: grid !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Default column counts */
.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.woocommerce-page.archive ul.products,
.woocommerce.archive ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* ============================================================
   5. HEADER
   ============================================================ */
.ast-primary-header-bar,
.main-header-bar { padding-left: 0 !important; padding-right: 0 !important; }

.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container {
    max-width: 1280px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ============================================================
   6. LOAD MORE (AJAX)
   ============================================================ */
.da-load-more-wrap { text-align: center; margin-top: 36px; }

.da-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 240px;
    height: 48px;
    border: 2px solid var(--da-teal);
    color: var(--da-teal);
    background: transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    font-family: var(--da-font-body);
}
.da-load-more:hover:not(:disabled) { background: var(--da-teal); color: #fff; }
.da-load-more:disabled { opacity: .55; cursor: default; }

.da-load-more .da-spinner {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: daSpin .7s linear infinite;
    display: none;
}
.da-load-more.loading .da-spinner { display: inline-block; }
@keyframes daSpin { to { transform: rotate(360deg); } }

.da-load-more-count {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

/* Newly loaded cards fade in */
.da-product-card.da-new-item {
    animation: daFadeUp .45s ease both;
}
@keyframes daFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .woocommerce div.product .related ul.products,
    .woocommerce div.product .upsells ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .woocommerce div.product,
    .woocommerce-page div.product {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .woocommerce div.product > div.images,
    .woocommerce div.product > div.summary { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page.archive ul.products,
    .woocommerce.archive ul.products,
    .woocommerce div.product .related ul.products,
    .woocommerce div.product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .woocommerce div.product,
    .woocommerce-page div.product { padding: 0 16px; margin: 24px auto !important; }

    .da-hero-inner,
    .da-features-grid,
    .da-categories-grid,
    .da-testimonials-grid,
    .da-footer-grid,
    .da-fbt-inner { padding-left: 16px; padding-right: 16px; }

    .da-load-more { width: 100%; max-width: 320px; }
}


/* Breakout helper for one-off sections */
.da-breakout,
.da-about-hero,
.da-page-title-bar {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Contact & About body content needs the container back */
.da-about-content,
.da-contact-grid,
.da-stats-grid,
.da-inner-page-wrap {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* About page body typography */
.da-about-content { padding-top: 10px; padding-bottom: 40px; }
.da-about-content h2 { font-size: 24px; margin: 28px 0 12px; }
.da-about-content p,
.da-about-content li { font-size: 15px; color: #555; line-height: 1.85; }
.da-about-content ul { padding-left: 20px; }
.da-about-content li { margin-bottom: 6px; }