/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra with custom WooCommerce reviews
Author: Your Name
Author URI: https://wpastra.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Add your custom styles below this line */

/* ===================================
   FOOTER LINK STYLES - OVERRIDE PINK
   =================================== */

/* Override Astra's global color variable for footer */
.site-footer,
footer {
    --ast-global-color-0: #000;
}

/* Footer links - make them black instead of pink - all states */
footer a,
footer a:link,
footer a:visited,
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.footer-widget-area a,
.footer-widget-area a:link,
.footer-widget-area a:visited,
.ast-footer-overlay a,
.site-footer .widget a,
.site-footer-primary-section a,
.site-footer-section a,
.footer-adv a,
.footer-adv-overlay a,
.ast-small-footer a,
.ast-small-footer a:link,
.ast-small-footer a:visited,
.site-footer p a,
.site-footer li a,
.site-footer span a,
.site-footer div a {
    color: #000 !important;
    text-decoration: none !important;
}

/* Footer links on hover - slight gray for better UX */
footer a:hover,
footer a:active,
footer a:focus,
.site-footer a:hover,
.site-footer a:active,
.site-footer a:focus,
.footer-widget-area a:hover,
.ast-footer-overlay a:hover,
.site-footer .widget a:hover,
.site-footer-primary-section a:hover,
.site-footer-section a:hover,
.footer-adv a:hover,
.ast-small-footer a:hover,
.site-footer p a:hover,
.site-footer li a:hover {
    color: #333 !important;
    text-decoration: underline !important;
}

/* ===================================
   HEADER/MENU FIX FOR ZOOM LEVELS
   =================================== */

/* Prevent header items from wrapping at zoom levels */
.site-header,
.main-header-bar,
.ast-main-header-wrap {
    min-width: 100% !important;
}

/* Keep header container flexible */
.main-header-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Prevent menu items from breaking */
.main-header-menu,
.ast-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Keep menu items inline */
.main-header-menu > .menu-item,
.ast-nav-menu > .menu-item {
    display: inline-flex !important;
    white-space: nowrap !important;
}

/* Reduce menu item spacing at zoom - MORE AGGRESSIVE */
@media (min-width: 922px) {
    .main-header-menu .menu-item,
    .ast-nav-menu .menu-item {
        margin-right: 10px !important;
    }
    
    .main-header-menu .menu-item:last-child {
        margin-right: 0 !important;
    }
}

/* Header right section - cart and search */
.ast-header-button-1,
.ast-header-woo-cart,
.header-main-layout-1 .ast-header-woo-cart,
.ast-site-header-cart {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Prevent search and cart from wrapping */
.ast-builder-layout-element {
    flex-shrink: 0 !important;
}

/* Keep header widgets inline */
.site-header-section,
.ast-header-section-left,
.ast-header-section-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Adjust for all desktop sizes - catch 110% zoom */
@media (min-width: 922px) {
    .main-header-menu a,
    .ast-nav-menu a {
        font-size: 14px !important;
        padding: 10px 10px !important;
    }
    
    /* Make header more compact */
    .site-header .site-branding img,
    .site-logo-img img {
        max-height: 50px !important;
    }
}

/* Even tighter for 110% zoom range (roughly 1500px-1700px effective width) */
@media (min-width: 922px) and (max-width: 1800px) {
    .main-header-menu a,
    .ast-nav-menu a {
        font-size: 13px !important;
        padding: 8px 8px !important;
    }
    
    .main-header-menu .menu-item,
    .ast-nav-menu .menu-item {
        margin-right: 8px !important;
    }
}

/* Very compact for smaller effective widths */
@media (min-width: 922px) and (max-width: 1400px) {
    .main-header-menu a,
    .ast-nav-menu a {
        font-size: 12px !important;
        padding: 8px 6px !important;
    }
    
    .main-header-menu .menu-item,
    .ast-nav-menu .menu-item {
        margin-right: 6px !important;
    }
}

/* Switch to hamburger menu earlier to prevent wrapping */
@media (max-width: 1600px) {
    /* Hide desktop menu */
    .main-header-bar .main-header-menu,
    .main-header-bar-navigation .main-header-menu {
        display: none !important;
    }
    
    /* Show mobile toggle button */
    .ast-mobile-menu-buttons,
    .ast-button-wrap {
        display: flex !important;
    }
    
    /* Keep cart and search visible */
    .ast-header-woo-cart,
    .ast-search-menu-icon {
        display: inline-flex !important;
    }
}

/* Desktop menu for large screens only */
@media (min-width: 1601px) {
    .main-header-bar .main-header-menu {
        display: flex !important;
    }
    
    .ast-mobile-menu-buttons .menu-toggle {
        display: none !important;
    }
}

/* ===================================
   MOBILE VIEW RESPONSIVE FIXES
   =================================== */

/* Mobile - All devices under 768px */
@media (max-width: 768px) {
    
    /* Fix container overflow */
    body,
    .site,
    .site-content,
    .ast-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Fix header on mobile */
    .site-header,
    .main-header-bar {
        padding: 10px 15px !important;
    }
    
    /* Logo size on mobile */
    .site-branding img,
    .custom-logo,
    .site-logo-img img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* Header cart and search on mobile */
    .ast-header-woo-cart,
    .ast-search-menu-icon {
        font-size: 18px !important;
        padding: 8px !important;
    }
    
    /* Content padding */
    .site-content,
    .ast-container {
        padding: 15px !important;
    }
    
    /* Page titles */
    h1, .entry-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    /* Fix images overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix elementor sections */
    .elementor-section,
    .elementor-column,
    .elementor-widget-wrap {
        padding: 15px 10px !important;
    }
    
    /* Fix sliders/carousels */
    .slider,
    .carousel,
    .swiper-container {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Product grids on mobile */
    .products,
    .woocommerce ul.products,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Product items */
    .product,
    .woocommerce ul.products li.product,
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }
    
    /* Product images */
    .woocommerce ul.products li.product img,
    .product img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Buttons full width on mobile */
    .button,
    .wp-block-button__link,
    .elementor-button,
    .ast-button {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    /* Forms on mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
    
    /* Footer on mobile */
    .site-footer,
    .footer-widget-area {
        padding: 20px 15px !important;
        text-align: center !important;
    }
    
    .footer-widget {
        margin-bottom: 20px !important;
    }
    
    /* Fix tables overflow */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    /* Cart on mobile */
    .woocommerce-cart table.cart,
    .woocommerce table.shop_table {
        font-size: 12px !important;
    }
    
    .woocommerce-cart .cart-collaterals,
    .cart-collaterals {
        width: 100% !important;
    }
    
    /* Checkout on mobile */
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
    }
}

/* Small mobile devices - under 480px */
@media (max-width: 480px) {
    
    /* Single column products on very small screens */
    .products,
    .woocommerce ul.products,
    ul.products {
        grid-template-columns: 1fr !important;
    }
    
    /* Smaller text */
    body {
        font-size: 14px !important;
    }
    
    h1, .entry-title {
        font-size: 20px !important;
    }
    
    h2 {
        font-size: 18px !important;
    }
    
    /* Tighter padding */
    .site-content,
    .ast-container {
        padding: 10px !important;
    }
    
    .elementor-section,
    .elementor-column {
        padding: 10px 5px !important;
    }
}

/* Fix specific mobile issues */
@media (max-width: 768px) {
    
    /* Fix horizontal scroll */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }
    
    /* Shop by categories on mobile */
    .shop-by-categories-section {
        padding: 20px 10px !important;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .category-item {
        margin-bottom: 0 !important;
    }
    
    /* Mobile menu improvements */
    .ast-mobile-menu-buttons {
        margin-left: auto !important;
    }
    
    /* Search on mobile */
    .ast-search-menu-icon .search-field {
        width: 200px !important;
    }
    
    /* Fix Elementor section margin on mobile */
    .elementor-1490 .elementor-element.elementor-element-40757f8 {
        margin-left: 0 !important;
    }
}

/* ===================================
   SLIDER FIXES
   =================================== */

/* Prevent slider from being cropped by header */
.slider,
.swiper-container,
.carousel,
.elementor-widget-slider,
.elementor-slides-wrapper,
[class*="slider"],
[class*="swiper"] {
    margin-top: 10px !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 1;
}

/* Add spacing for slider section/container */
.elementor-section:has(.elementor-widget-slider),
.slider-section,
.swiper-section,
section:has(.slider),
section:has(.swiper-container) {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

/* Ensure slider is not hidden behind header */
.site-content {
    position: relative;
    z-index: 1;
    padding-top: 5px !important;
}

/* Push first section down slightly */
.site-content > .ast-container:first-child,
.site-content > .elementor:first-child,
.site-content > .elementor-section:first-child {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

.site-header {
    position: relative;
    z-index: 999;
}

/* Fix slider height - make it bigger */
.slider,
.swiper-container,
.elementor-slides-wrapper,
.elementor-widget-slider {
    min-height: 400px !important;
    height: auto !important;
}

/* Slider images should be full size */
.slider img,
.swiper-slide img,
.elementor-slide-image img,
.carousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 400px !important;
}

/* Slider wrapper height */
.swiper-wrapper,
.elementor-slides,
.slider-wrapper {
    min-height: 400px !important;
}

/* Individual slide height */
.swiper-slide,
.elementor-slide,
.slide,
.carousel-item {
    min-height: 400px !important;
    height: auto !important;
}

/* Mobile slider adjustments */
@media (max-width: 768px) {
    .slider,
    .swiper-container,
    .elementor-slides-wrapper,
    .elementor-widget-slider {
        min-height: 250px !important;
    }
    
    .slider img,
    .swiper-slide img,
    .elementor-slide-image img {
        min-height: 250px !important;
    }
    
    .swiper-wrapper,
    .elementor-slides {
        min-height: 250px !important;
    }
    
    .swiper-slide,
    .elementor-slide {
        min-height: 250px !important;
    }
}

/* Tablet slider size */
@media (min-width: 769px) and (max-width: 1024px) {
    .slider,
    .swiper-container,
    .elementor-slides-wrapper {
        min-height: 350px !important;
    }
    
    .slider img,
    .swiper-slide img,
    .elementor-slide-image img {
        min-height: 350px !important;
    }
}

/* Desktop slider - full height */
@media (min-width: 1025px) {
    .slider,
    .swiper-container,
    .elementor-slides-wrapper {
        min-height: 500px !important;
    }
    
    .slider img,
    .swiper-slide img,
    .elementor-slide-image img {
        min-height: 500px !important;
    }
}

/* ===================================
   WOOCOMMERCE CHECKOUT PAGE LAYOUT
   =================================== */

/* Add padding to checkout page */
.woocommerce-checkout .site-content,
.woocommerce-checkout .ast-container,
.woocommerce-checkout #primary,
.woocommerce-checkout .entry-content {
    padding-top: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Checkout form padding */
.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce {
    padding-top: 20px !important;
    padding-left: 15px !important;
}

/* Checkout columns spacing */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    padding-left: 15px !important;
    margin-top: 20px !important;
}

/* Mobile checkout padding */
@media (max-width: 768px) {
    .woocommerce-checkout .site-content,
    .woocommerce-checkout .ast-container {
        padding-top: 30px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .woocommerce-checkout form.checkout {
        padding-left: 10px !important;
    }
}

/* ===================================
   WOOCOMMERCE CART/CHECKOUT BUTTONS
   =================================== */

/* Proceed to Checkout button - make it black */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button,
.checkout-button,
a.checkout-button,
.wc-proceed-to-checkout .button,
.wc-proceed-to-checkout a.button,
.wc-proceed-to-checkout .alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* Checkout button hover state */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button:hover,
.checkout-button:hover,
a.checkout-button:hover,
.wc-proceed-to-checkout .button:hover,
.wc-proceed-to-checkout a.button:hover,
.wc-proceed-to-checkout .alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* ===================================
   WOOCOMMERCE PRODUCT PAGE FIXES
   =================================== */

/* Fix product page layout - prevent oversized images */
.single-product .product,
.woocommerce-page.single-product #content,
.woocommerce div.product {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Product images - limit size */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page div.product div.images {
    width: 48% !important;
    max-width: 600px !important;
    float: left !important;
}

/* Product image itself */
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Product summary/details section */
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce-page div.product div.summary {
    width: 48% !important;
    float: right !important;
    margin: 0 !important;
    padding-left: 30px !important;
}

/* Product title */
.woocommerce div.product .product_title {
    font-size: 32px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
}

/* Product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 28px !important;
    margin-bottom: 20px !important;
}

/* Add to cart button */
.woocommerce div.product form.cart {
    margin-bottom: 30px !important;
}

.woocommerce div.product form.cart .button {
    padding: 15px 30px !important;
    font-size: 16px !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs {
    clear: both !important;
    margin-top: 50px !important;
}

/* Product gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 15px !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 23% !important;
    margin-right: 2% !important;
}

.woocommerce div.product div.images .flex-control-thumbs img {
    width: 100% !important;
    height: auto !important;
}

/* Mobile product page fixes */
@media (max-width: 768px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }
    
    .woocommerce div.product .product_title {
        font-size: 24px !important;
    }
    
    .woocommerce div.product p.price {
        font-size: 22px !important;
    }
}

/* Fix product container */
.single-product .site-content,
.single-product .ast-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
}

/* ===================================
   WOOCOMMERCE SHOP PAGE PRODUCT CARDS
   =================================== */

/* Product card styling */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    padding: 15px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    background: #fff !important;
    transition: box-shadow 0.3s ease !important;
    transform: none !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: none !important;
}

/* Product image */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    margin-bottom: 15px !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease !important;
}

/* Only image zooms on hover */
.woocommerce ul.products li.product:hover img {
    transform: scale(1.05) !important;
}

/* Image container to prevent overflow */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    overflow: hidden !important;
    display: block !important;
    border-radius: 4px !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    padding: 0 10px !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Product links - prevent color change */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a:hover,
.woocommerce ul.products li.product a:visited,
.woocommerce ul.products li.product a:focus {
    color: inherit !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
    color: inherit !important;
}

/* Product rating - center and make golden */
.woocommerce ul.products li.product .star-rating {
    margin: 0 auto 10px auto !important;
    float: none !important;
    display: block !important;
}

/* Rating wrapper */
.woocommerce ul.products li.product .woocommerce-loop-product__rating {
    text-align: center !important;
    display: block !important;
}

/* Star rating color - golden */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: #ffa500 !important;
}

.woocommerce .star-rating::before {
    color: #ddd !important;
}

.woocommerce .star-rating span::before {
    color: #ffa500 !important;
}

/* Product price */
.woocommerce ul.products li.product .price {
    padding: 0 10px 10px 10px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    display: block !important;
    font-size: 18px !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button {
    margin: 10px 10px 5px 10px !important;
    width: calc(100% - 20px) !important;
    text-align: center !important;
}

/* Product meta information */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    padding: 0 !important;
}

/* Product card inner content padding */
.woocommerce ul.products li.product a {
    display: block !important;
}

/* Product card action buttons - view, link, cart icons */
.woocommerce ul.products li.product .product-action-buttons,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product .ast-shop-product-actions {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Action button icons centering */
.woocommerce ul.products li.product .ast-shop-product-actions a,
.woocommerce ul.products li.product .product-action-buttons a,
.ast-shop-product-out-of-stock {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 5px !important;
    line-height: 40px !important;
}

/* Icon inside the button */
.woocommerce ul.products li.product .ast-shop-product-actions a i,
.woocommerce ul.products li.product .ast-shop-product-actions a svg,
.woocommerce ul.products li.product .product-action-buttons a i,
.woocommerce ul.products li.product .product-action-buttons a svg {
    display: block !important;
    margin: auto !important;
    text-align: center !important;
}

/* ===================================
   WOOCOMMERCE CATEGORIES PAGE
   =================================== */

/* Fix categories page heading visibility */
.woo-categories-page .categories-header,
.woo-categories-page .page-title {
    margin-top: 90px !important;
}

/* ===================================
   WOOCOMMERCE SALE BADGE
   =================================== */

/* Change sale badge from red to black */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce .onsale,
.woocommerce-page span.onsale,
.product span.onsale,
span.onsale,
.onsale,
.ast-onsale-card,
.woocommerce div.product .onsale {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    background: #000 !important;
}

/* Sale badge hover state */
.woocommerce span.onsale:hover,
.woocommerce .onsale:hover {
    background-color: #333 !important;
    background: #333 !important;
}