/*
 Theme Name: Astra Child
 Template: astra
 Version: 2.0.1 - 4-column grid with correct specificity (2026-07-19)
*/

/* ================================================================
   1. HOMEPAGE / PAGE CONTENT - FULL WIDTH
   ================================================================ */
body.page-id-794 .entry-content,
body.page-id-794 .page-content,
body.page-id-794 #main,
body.page-id-794 .site-content,
body.page-id-794 .ast-container,
body.page-id-794 .site-content .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   2. HERO BANNER - Make sure any cover/cover-image block is full width
   ================================================================ */
body.home .wp-block-cover,
body.page-id-794 .wp-block-cover {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 400px !important;
}

/* If hero image is empty white, add a fallback gradient */
body.home .wp-block-cover:not(:has(img)):not(:has(.wp-block-cover__image-background)),
body.page-id-794 .wp-block-cover:empty {
    background: linear-gradient(135deg, #f8f5f0 0%, #e8e0d5 100%) !important;
    min-height: 420px !important;
}

/* ================================================================
   3. PRODUCT GRID - 4 COLUMNS DESKTOP / 3 TABLET / 2 MOBILE
   NOTE: Using high-specificity selectors to beat WooCommerce's own CSS
   which uses .wc-block-grid.has-6-columns .wc-block-grid__products
   ================================================================ */

/* ── MAIN GRID OVERRIDE ── */
/* Matches WooCommerce's own selector exactly, but forces 4 columns */
body.page-id-794 .wc-block-grid__products,
body.home .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Override the .has-N-columns variants WooCommerce adds */
body.page-id-794 .wc-block-grid.has-3-columns .wc-block-grid__products,
body.page-id-794 .wc-block-grid.has-4-columns .wc-block-grid__products,
body.page-id-794 .wc-block-grid.has-5-columns .wc-block-grid__products,
body.page-id-794 .wc-block-grid.has-6-columns .wc-block-grid__products,
body.home .wc-block-grid.has-3-columns .wc-block-grid__products,
body.home .wc-block-grid.has-4-columns .wc-block-grid__products,
body.home .wc-block-grid.has-5-columns .wc-block-grid__products,
body.home .wc-block-grid.has-6-columns .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Global grid container */
body.page-id-794 .wc-block-grid,
body.home .wc-block-grid,
.wc-block-grid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── CLASSIC PHP PRODUCT LOOP - 4 columns ── */
body.archive.tax-product_cat ul.products,
body.tax-product_cat.woocommerce ul.products,
body.tax-product_cat.woocommerce-page ul.products,
body.woocommerce.archive.tax-product_cat ul.products,
body.woocommerce-page.archive.tax-product_cat ul.products,
body.woocommerce.archive ul.products,
body.woocommerce ul.products[class],
body.woocommerce-page ul.products,
body.columns-4 ul.products,
body.columns-6 ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    float: none !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    align-content: unset !important;
    columns: unset !important;
    column-count: unset !important;
}

/* Kill any old flex/column layouts */
body.archive.tax-product_cat ul.products li,
body.woocommerce ul.products li,
body.woocommerce-page ul.products li {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    flex: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    min-width: 0 !important;
}

/* ================================================================
   4. PRODUCT CARD STYLING - CLEAN & PROFESSIONAL
   ================================================================ */

.wc-block-grid__product {
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: #fff !important;
    width: auto !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.wc-block-grid__product:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-3px) !important;
    border-color: #d0d0d0 !important;
}

/* Product image - square aspect ratio */
.wc-block-grid__product-image,
.wc-block-grid__product-image a {
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

.wc-block-grid__product-image img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
    transform: scale(1.05) !important;
}

/* Image overlay on hover (optional sale badge) */
.wc-block-grid__product-on-sale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: #b87333 !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    z-index: 2 !important;
}

/* Product info section */
.wc-block-grid__product-info {
    padding: 12px 14px 14px !important;
    text-align: center !important;
}

.wc-block-grid__product-title {
    font-size: 14px !important;
    color: #222 !important;
    margin: 0 0 6px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

.wc-block-grid__product-price {
    color: #b87333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 0 0 10px !important;
}

.wc-block-grid__product-price del {
    color: #999 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    margin-right: 4px !important;
}

.wc-block-grid__product-price ins {
    text-decoration: none !important;
}

/* Add to Cart button */
.wc-block-grid__product-add-to-cart {
    margin-top: auto !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a {
    background-color: #b87333 !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart a:hover {
    background-color: #9a6029 !important;
}

/* Star rating */
.wc-block-grid__product-rating .star-rating {
    color: #f0c040 !important;
    font-size: 12px !important;
    margin: 0 auto 6px !important;
    display: block !important;
}

/* Classic PHP loop product cards */
.woocommerce ul.products li.product {
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-3px) !important;
}

.woocommerce ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    color: #222 !important;
    padding: 12px 12px 4px !important;
}

.woocommerce ul.products li.product .price {
    color: #b87333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
}

.woocommerce ul.products li.product a.button {
    background-color: #b87333 !important;
    color: #fff !important;
    border-radius: 4px !important;
    margin: 10px 12px 12px !important;
}

/* ================================================================
   5. RESPONSIVE - 3 TABLET / 2 MOBILE
   ================================================================ */

@media (max-width: 1024px) {
    body.page-id-794 .wc-block-grid__products,
    body.home .wc-block-grid__products,
    body.archive.tax-product_cat ul.products,
    body.woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 0 16px !important;
        gap: 14px !important;
    }

    body.page-id-794 .wc-block-grid.has-3-columns .wc-block-grid__products,
    body.page-id-794 .wc-block-grid.has-4-columns .wc-block-grid__products,
    body.page-id-794 .wc-block-grid.has-5-columns .wc-block-grid__products,
    body.page-id-794 .wc-block-grid.has-6-columns .wc-block-grid__products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    body.page-id-794 .wc-block-grid__products,
    body.home .wc-block-grid__products,
    body.archive.tax-product_cat ul.products,
    body.woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }

    body.page-id-794 .wc-block-grid.has-3-columns .wc-block-grid__products,
    body.page-id-794 .wc-block-grid.has-4-columns .wc-block-grid__products,
    body.page-id-794 .wc-block-grid.has-5-columns .wc-block-grid__products,
    body.page-id-794 .wc-block-grid.has-6-columns .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .wc-block-grid__product-title {
        font-size: 13px !important;
    }

    .wc-block-grid__product-price {
        font-size: 13px !important;
    }
}

/* ================================================================
   6. SECTION SPACING & POLISH
   ================================================================ */

body.home .wp-block-group.alignwide {
    padding: 32px 0 !important;
}

body.home .wp-block-heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #222 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

/* Astra container override for full-width sections */
.ast-plain-container .ast-container,
.ast-separate-container .ast-woocommerce-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ================================================================
   7. ARCHIVE / CATEGORY PAGE POLISH
   ================================================================ */

.woocommerce.archive .site-content {
    padding-top: 0 !important;
}

.woocommerce-products-header__title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #222 !important;
}

/* ── ULTRA HIGH-SPECIFICITY: Beat WooCommerce block CSS ── */
/* These selectors match WooCommerce's exact class chain + page context */
html body.page-id-794 .wc-block-grid.has-3-columns .wc-block-grid__products,
html body.page-id-794 .wc-block-grid.has-4-columns .wc-block-grid__products,
html body.page-id-794 .wc-block-grid.has-5-columns .wc-block-grid__products,
html body.page-id-794 .wc-block-grid.has-6-columns .wc-block-grid__products,
html body.home .wc-block-grid.has-3-columns .wc-block-grid__products,
html body.home .wc-block-grid.has-4-columns .wc-block-grid__products,
html body.home .wc-block-grid.has-5-columns .wc-block-grid__products,
html body.home .wc-block-grid.has-6-columns .wc-block-grid__products,
html body.archive.tax-product_cat .wc-block-grid.has-3-columns .wc-block-grid__products,
html body.archive.tax-product_cat .wc-block-grid.has-4-columns .wc-block-grid__products,
html body.archive.tax-product_cat .wc-block-grid.has-5-columns .wc-block-grid__products,
html body.archive.tax-product_cat .wc-block-grid.has-6-columns .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
}

/* ============================================================
   XY FASHION DESKTOP VISIBILITY FIX
   Date: 2026-07-20
   Problem: Desktop browser shows header but blank white body area below.
   Root cause: Astra HFB fixed/sticky header + transparent header setting
              causes content to render behind/under the fixed header,
              and some CSS rules may hide entry-content on desktop viewport.
   ============================================================ */

/* ---- FORCE ALL CONTENT VISIBLE ON DESKTOP ---- */
.ast-desktop .site-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.ast-desktop #primary.content-area,
.ast-desktop main.site-main,
.ast-desktop .entry-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    min-height: 1px !important;
}

.ast-desktop .ast-article-single {
    display: block !important;
    visibility: visible !important;
}

/* Push content below fixed header */
.ast-desktop.ast-hfb-header .site-content {
    padding-top: 80px !important;
}

/* Ensure blocks render */
.ast-desktop .wp-block-group,
.ast-desktop .wp-block-columns,
.ast-desktop .wp-block-column,
.ast-desktop .wp-block-cover,
.ast-desktop .wc-block-grid__products {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.ast-desktop .wp-block-columns.is-layout-flex {
    display: flex !important;
    visibility: visible !important;
}

.ast-desktop .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Hero cover block minimum height */
.ast-desktop body.home .wp-block-cover,
.ast-desktop body.page-id-794 .wp-block-cover {
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
}

/* Body background */
.ast-desktop body.home,
.ast-desktop body.page-id-794 {
    background-color: #ffffff !important;
}

/* ============================================================
   XY FASHION DESKTOP VISIBILITY FIX
   Date: 2026-07-20
   Problem: Desktop browser shows header but blank white body area below.
   Root cause: Astra HFB fixed/sticky header + transparent header setting
              causes content to render behind/under the fixed header,
              and some CSS rules may hide entry-content on desktop viewport.
   ============================================================ */

/* ---- FORCE ALL CONTENT VISIBLE ON DESKTOP ---- */
.ast-desktop .site-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.ast-desktop #primary.content-area,
.ast-desktop main.site-main,
.ast-desktop .entry-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    min-height: 1px !important;
}

.ast-desktop .ast-article-single {
    display: block !important;
    visibility: visible !important;
}

/* Push content below fixed header */
.ast-desktop.ast-hfb-header .site-content {
    padding-top: 80px !important;
}

/* Ensure blocks render */
.ast-desktop .wp-block-group,
.ast-desktop .wp-block-columns,
.ast-desktop .wp-block-column,
.ast-desktop .wp-block-cover,
.ast-desktop .wc-block-grid__products {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.ast-desktop .wp-block-columns.is-layout-flex {
    display: flex !important;
    visibility: visible !important;
}

.ast-desktop .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Hero cover block minimum height */
.ast-desktop body.home .wp-block-cover,
.ast-desktop body.page-id-794 .wp-block-cover {
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
}

/* Body background */
.ast-desktop body.home,
.ast-desktop body.page-id-794 {
    background-color: #ffffff !important;
}