/*
 Theme Name:   Bfres Child
 Theme URI:    https://wordpress.com
 Description:  This is a child theme for Bfres
 Author:       Goalthemes
 Author URI:   #
 Template:     bfres
 Version:      1.0.0
 Text Domain:  bfres-child
*/

/* ========================================
   HOMEPAGE SECTION SPACING - PROFESSIONAL
   ======================================== */

/* USP Section */
.elementor-section[data-id="4abad17"] {
    background-color: #FCF6F5 !important;
}

/* Professional gap between USP section and next section (Banners) */
.elementor-section[data-id="4abad17"] + .elementor-top-section {
    margin-top: 30px !important;
}

/* Banners section padding for inner spacing */
.elementor-section[data-id="091a826"] {
    padding-top: 0 !important;
}

/* No CSS hacks - LiteSpeed CSS was causing column width issue */
/* The fix was to purge LiteSpeed CSS cache so it rebuilds correctly */

/* Google Reviews section - proper spacing around it */
.elementor-element[data-id="3ae761e"] {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

/* Tablet spacing */
@media (max-width: 1023px) {
    .elementor-section[data-id="4abad17"] + .elementor-top-section {
        margin-top: 20px !important;
    }
    .elementor-element[data-id="3ae761e"] {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}

/* ========================================
   SHOP PAGE - PRODUCT CARD FIXES
   ======================================== */

/* Fix product name - ensure full text visibility */
.product-block.grid .name a {
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
}

/* Fix Add to Cart button - show full button with text */
.product-block.grid .add-cart > .button,
.product-block.grid .add-cart > .added_to_cart {
    font-size: 12px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
    border: none !important;
}

/* Fix product card spacing */
.product-block.grid .grid-inner {
    padding: 15px !important;
}

/* Fix price display */
.product-block.grid .price {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ========================================
   HOMEPAGE BANNER IMAGE FIX
   ======================================== */

/* Fix banner images being cut off - center the background */
.elementor-section[data-id="091a826"] .content-banner {
    background-position: center center !important;
    background-size: cover !important;
}

/* ========================================
   FOOTER STYLING
   ======================================== */

/* Footer background - logo green color */
.elementor-section[data-id="caefaf6"] {
    background-color: #82AF50 !important;
}

/* Footer heading text - white instead of green */
.elementor-section[data-id="caefaf6"] h2,
.elementor-section[data-id="caefaf6"] h3,
.elementor-section[data-id="caefaf6"] h4 {
    color: #ffffff !important;
}

/* Footer paragraph and link text - white */
.elementor-section[data-id="caefaf6"] p,
.elementor-section[data-id="caefaf6"] a,
.elementor-section[data-id="caefaf6"] li,
.elementor-section[data-id="caefaf6"] span {
    color: #ffffff !important;
}

/* Footer logo - make white to be visible on green bg */
.elementor-section[data-id="caefaf6"] .elementor-image img {
    filter: brightness(0) invert(1) !important;
}

/* Mobile spacing */
@media (max-width: 639px) {
    .elementor-section[data-id="4abad17"] + .elementor-top-section {
        margin-top: 15px !important;
    }
    .elementor-element[data-id="3ae761e"] {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* ========================================
   USP FEATURES SECTION - CARD LAYOUT
   ======================================== */

.elementor-section[data-id="4abad17"] .elementor-widget-bfres_features_box {
    padding: 50px 0 !important;
}

.elementor-section[data-id="4abad17"] .elementor-widget-wrap {
    padding: 0 15px !important;
}

/* Feature Card */
.elementor-section[data-id="4abad17"] .item-inner-features.style3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 50px 30px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.08) !important;
    transition: all 0.4s ease !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.elementor-section[data-id="4abad17"] .item-inner-features.style3::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #20533B 0%, #2e7d5a 100%) !important;
}

.elementor-section[data-id="4abad17"] .item-inner-features.style3:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(32, 83, 59, 0.15) !important;
}

/* Icon/Image Circle - Big & Attractive */
.elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.icon,
.elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.img {
    float: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    width: 110px !important;
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #20533B 0%, #2e7d5a 50%, #3a9b6e 100%) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 48px !important;
    transition: all 0.4s ease !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 25px rgba(32, 83, 59, 0.2) !important;
}

.elementor-section[data-id="4abad17"] .item-inner-features.style3:hover .features-box-image.icon,
.elementor-section[data-id="4abad17"] .item-inner-features.style3:hover .features-box-image.img {
    transform: rotate(8deg) scale(1.12) !important;
    box-shadow: 0 8px 25px rgba(32, 83, 59, 0.35) !important;
}

/* Image inside circle */
.elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.img img {
    width: 65px !important;
    height: 65px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Title */
.elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-content .title {
    margin: 0 0 12px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #20533B !important;
    line-height: 1.3 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Description */
.elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-content .description {
    font-size: 15px !important;
    color: #666666 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    max-width: 300px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Tablet */
@media (max-width: 1023px) {
    .elementor-section[data-id="4abad17"] .elementor-widget-bfres_features_box {
        padding: 40px 0 !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 {
        padding: 35px 25px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.icon,
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.img {
        width: 90px !important;
        height: 90px !important;
        font-size: 38px !important;
        margin-bottom: 22px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.img img {
        width: 52px !important;
        height: 52px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-content .title {
        font-size: 20px !important;
    }
}

/* Mobile */
@media (max-width: 639px) {
    .elementor-section[data-id="4abad17"] .elementor-widget-bfres_features_box {
        padding: 30px 0 !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 {
        padding: 25px 20px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.icon,
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.img {
        width: 80px !important;
        height: 80px !important;
        font-size: 34px !important;
        margin-bottom: 18px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-image.img img {
        width: 46px !important;
        height: 46px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-content .title {
        font-size: 17px !important;
    }
    
    .elementor-section[data-id="4abad17"] .item-inner-features.style3 .features-box-content .description {
        font-size: 14px !important;
    }
}

/* ========================================
   FOOTER - MOBILE CENTER
   ======================================== */

/* Center footer columns on mobile */
@media (max-width: 639px) {
    .elementor-section[data-id="caefaf6"] .elementor-column .elementor-widget-wrap {
        text-align: center !important;
        justify-content: center !important;
    }
    
    .elementor-section[data-id="caefaf6"] .elementor-column .elementor-widget-wrap > div {
        text-align: center !important;
    }
    
    .elementor-section[data-id="caefaf6"] .logo {
        text-align: center !important;
    }
    
    .elementor-section[data-id="caefaf6"] .logo img {
        margin: 0 auto !important;
    }
    
    .elementor-section[data-id="caefaf6"] .wp-google-name,
    .elementor-section[data-id="caefaf6"] .elementor-widget-container,
    .elementor-section[data-id="caefaf6"] .elementor-widget-wrap .elementor-widget {
        text-align: center !important;
    }
    
    .elementor-section[data-id="caefaf6"] ul.menu {
        text-align: center !important;
    }
    
    .elementor-section[data-id="caefaf6"] ul.menu li {
        text-align: center !important;
    }
}

/* ========================================
   COPYRIGHT SECTION
   ======================================== */

/* Copyright background - logo green */
.elementor-section[data-id="acec464"] {
    background-color: #82AF50 !important;
}

/* Copyright text - white, single line fit */
.elementor-section[data-id="acec464"] h6,
.elementor-section[data-id="acec464"] p,
.elementor-section[data-id="acec464"] span,
.elementor-section[data-id="acec464"] a,
.elementor-section[data-id="acec464"] div {
    color: #ffffff !important;
    font-size: 13px !important;
}

/* Keep copyright in one line - flex row for inner section columns */
.elementor-element[data-id="2aaf874"] .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.elementor-element[data-id="2aaf874"] .elementor-column {
    width: auto !important;
    flex: 1 1 auto !important;
}

/* Hide all payment icons except Razorpay & Visa */
.elementor-section[data-id="acec464"] .elementor-widget-image {
    position: relative;
}

/* Hide the default payment image */
.elementor-section[data-id="acec464"] .elementor-widget-image img {
    display: none !important;
}

/* Add Razorpay & Visa as icon badges */

/* Hide the old payment image */
.elementor-section[data-id="acec464"] .elementor-widget-image {
    display: none !important;
}

/* Payment icons container - use flex to show both badges side by side */
.elementor-section[data-id="acec464"] .elementor-column.elementor-col-50:last-child .elementor-widget-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* Razorpay icon image */
.elementor-section[data-id="acec464"] .elementor-column.elementor-col-50:last-child .elementor-widget-wrap::before {
    content: "" !important;
    display: inline-block !important;
    width: 90px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='28' viewBox='0 0 90 28'%3E%3Crect width='90' height='28' rx='4' fill='%233392FF'/%3E%3Ctext x='45' y='19' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='13' font-weight='700'%3ERazorpay%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Visa icon image */
.elementor-section[data-id="acec464"] .elementor-column.elementor-col-50:last-child .elementor-widget-wrap::after {
    content: "" !important;
    display: inline-block !important;
    width: 65px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='28' viewBox='0 0 65 28'%3E%3Crect width='65' height='28' rx='4' fill='%231A1F71'/%3E%3Ctext x='32' y='19' text-anchor='middle' fill='white' font-family='Arial,sans-serif' font-size='14' font-weight='900' font-style='italic'%3EVISA%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* ========================================
   CART PAGE - PROCEED TO CHECKOUT BUTTON
   ======================================== */

.wc-block-cart__submit-button,
.wc-block-cart__submit-button.wc-block-components-button {
    background: linear-gradient(135deg, #20533B 0%, #2e7d5a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 6px 20px rgba(32, 83, 59, 0.25) !important;
    transition: all 0.3s ease !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover {
    background: linear-gradient(135deg, #1a4530 0%, #256b4c 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(32, 83, 59, 0.35) !important;
}

.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button.wc-block-components-button:focus {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #20533B !important;
}

/* ========================================
   CHECKOUT - PHONE FIELD REQUIRED ASTERISK
   ======================================== */

#billing_phone_field .required {
    visibility: visible !important;
    color: #ff0000 !important;
    font-weight: 700 !important;
}

/* ========================================
   BLOG ARCHIVE - MODERN GRID LAYOUT
   Inspired by goatlife.co.in - 2026 Design
   ======================================== */

.millezo-blog-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blog Header */
.millezo-blog-header {
    text-align: center;
    padding: 60px 20px 40px;
}

.millezo-blog-header-inner {
    max-width: 700px;
    margin: 0 auto;
}

.millezo-blog-title {
    font-size: 42px;
    font-weight: 800;
    color: #20533B;
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-family: 'Poppins', sans-serif;
}

.millezo-blog-subtitle {
    font-size: 18px;
    color: #666;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* Blog Grid */
.millezo-blog-container {
    max-width: 1140px;
    margin: 0 auto;
}

.millezo-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Blog Card */
.millezo-blog-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin: 0;
}

.millezo-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(32, 83, 59, 0.12);
    border-color: rgba(130, 175, 80, 0.2);
}

.millezo-blog-card-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.millezo-blog-card-link:hover {
    text-decoration: none !important;
}

/* Card Image */
.millezo-blog-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #f5f5f5;
}

.millezo-blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.millezo-blog-card:hover .millezo-blog-card-img {
    transform: scale(1.08);
}

.millezo-blog-card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.millezo-blog-card-placeholder-icon {
    font-size: 48px;
    opacity: 0.6;
}

/* Card Body */
.millezo-blog-card-body {
    padding: 24px;
}

.millezo-blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #888;
}

.millezo-blog-card-date {
    color: #999;
    font-size: 13px;
}

.millezo-blog-card-category {
    display: inline-block;
    background: rgba(130, 175, 80, 0.12);
    color: #82AF50;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.millezo-blog-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.35;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.millezo-blog-card:hover .millezo-blog-card-title {
    color: #82AF50;
}

.millezo-blog-card-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.millezo-blog-card-readmore {
    font-size: 14px;
    font-weight: 600;
    color: #82AF50;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.3s;
}

.millezo-blog-card:hover .millezo-blog-card-readmore {
    gap: 8px;
}

/* Pagination */
.millezo-blog-pagination {
    margin-top: 60px;
    text-align: center;
}

.millezo-blog-pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.millezo-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    background: #fff;
    border: 1px solid #e0e0e0;
    text-decoration: none !important;
    transition: all 0.3s;
}

.millezo-blog-pagination .page-numbers:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.millezo-blog-pagination .page-numbers.current {
    background: #82AF50;
    border-color: #82AF50;
    color: #fff;
}

.millezo-blog-pagination .page-numbers.prev,
.millezo-blog-pagination .page-numbers.next {
    font-size: 14px;
    padding: 0 16px;
}

/* Empty state */
.millezo-blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: #999;
    font-size: 18px;
}

/* ========================================
   BLOG SINGLE POST - MODERN LAYOUT
   ======================================== */

.millezo-single-post {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hero Image */
.millezo-single-hero {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    background: #f5f5f5;
}

.millezo-single-hero-image {
    max-width: 1200px;
    margin: 0 auto;
}

.millezo-single-featured-img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
}

/* Container */
.millezo-single-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* Article */
.millezo-single-article {
    margin-top: -40px;
    background: #ffffff;
    border-radius: 20px;
    padding: 50px;
    position: relative;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

/* Header */
.millezo-single-header {
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
}

.millezo-single-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 14px;
    color: #888;
}

.millezo-single-category {
    display: inline-block;
    background: rgba(130, 175, 80, 0.12);
    color: #82AF50;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.millezo-single-date,
.millezo-single-author {
    color: #999;
    font-size: 14px;
}

.millezo-single-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.3px;
}

/* Body */
.millezo-single-body {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}

.millezo-single-body p {
    margin-bottom: 24px;
}

.millezo-single-body h2,
.millezo-single-body h3,
.millezo-single-body h4 {
    font-family: 'Poppins', sans-serif;
    color: #20533B;
    margin-top: 40px;
    margin-bottom: 16px;
    font-weight: 700;
}

.millezo-single-body h2 { font-size: 28px; }
.millezo-single-body h3 { font-size: 22px; }
.millezo-single-body h4 { font-size: 18px; }

.millezo-single-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 30px 0;
}

.millezo-single-body blockquote {
    border-left: 4px solid #82AF50;
    padding: 20px 24px;
    margin: 30px 0;
    background: #f8faf5;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #555;
    font-size: 18px;
}

.millezo-single-body ul,
.millezo-single-body ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.millezo-single-body li {
    margin-bottom: 8px;
}

.millezo-single-body a {
    color: #82AF50;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.millezo-single-body a:hover {
    color: #6d9644;
}

/* Footer */
.millezo-single-footer {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

/* Tags */
.millezo-single-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.millezo-single-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.millezo-single-tag {
    display: inline-block;
    padding: 5px 14px;
    background: #f5f5f5;
    color: #555 !important;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.3s;
}

.millezo-single-tag:hover {
    background: #82AF50;
    color: #fff !important;
}

/* Share Buttons */
.millezo-single-share {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.millezo-single-share-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.millezo-single-share-buttons {
    display: flex;
    gap: 8px;
}

.millezo-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s;
}

.millezo-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.millezo-share-facebook { background: #1877F2; }
.millezo-share-twitter { background: #000000; }
.millezo-share-linkedin { background: #0A66C2; }
.millezo-share-whatsapp { background: #25D366; }

/* Post Navigation */
.millezo-single-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

.millezo-single-nav a {
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    transition: color 0.3s;
    max-width: 45%;
}

.millezo-single-nav a:hover {
    color: #82AF50;
}

.millezo-single-nav-prev a {
    text-align: left;
}

.millezo-single-nav-next a {
    text-align: right;
}

/* Related Posts */
.millezo-single-related {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

.millezo-single-related-title {
    font-size: 24px;
    font-weight: 700;
    color: #20533B;
    margin: 0 0 24px;
    font-family: 'Poppins', sans-serif;
}

.millezo-single-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.millezo-related-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}

.millezo-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.millezo-related-card a {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.millezo-related-card-image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.millezo-related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.millezo-related-card:hover .millezo-related-card-image img {
    transform: scale(1.06);
}

.millezo-related-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 14px 14px 6px;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.millezo-related-card-date {
    font-size: 12px;
    color: #999;
    margin: 0 14px 14px;
    display: block;
}

/* Comments */
.millezo-single-comments {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

/* ========================================
   BLOG - RESPONSIVE
   ======================================== */

/* Tablet Landscape (1024px) */
@media (max-width: 1024px) {
    .millezo-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .millezo-single-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .millezo-blog-title {
        font-size: 34px;
    }

    .millezo-single-title {
        font-size: 30px;
    }

    .millezo-single-article {
        padding: 35px;
        margin-top: -30px;
    }
}

/* Tablet Portrait (768px) */
@media (max-width: 768px) {
    .millezo-blog-header {
        padding: 40px 20px 30px;
    }

    .millezo-blog-title {
        font-size: 28px;
    }

    .millezo-blog-subtitle {
        font-size: 16px;
    }

    .millezo-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .millezo-blog-card-body {
        padding: 18px;
    }

    .millezo-blog-card-title {
        font-size: 17px;
    }

    .millezo-single-title {
        font-size: 26px;
    }

    .millezo-single-article {
        padding: 25px;
        margin-top: -20px;
        border-radius: 16px;
    }

    .millezo-single-body {
        font-size: 16px;
    }

    .millezo-single-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Mobile (639px) */
@media (max-width: 639px) {
    .millezo-blog-archive {
        padding: 0 16px 40px;
    }

    .millezo-blog-header {
        padding: 30px 10px 20px;
    }

    .millezo-blog-title {
        font-size: 24px;
    }

    .millezo-blog-subtitle {
        font-size: 15px;
    }

    .millezo-blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .millezo-blog-card-body {
        padding: 16px;
    }

    .millezo-blog-card-title {
        font-size: 18px;
    }

    .millezo-blog-pagination {
        margin-top: 40px;
    }

    .millezo-single-container {
        padding: 0 16px 60px;
    }

    .millezo-single-hero {
        max-height: 300px;
    }

    .millezo-single-featured-img {
        max-height: 300px;
    }

    .millezo-single-title {
        font-size: 22px;
    }

    .millezo-single-article {
        padding: 20px;
        margin-top: -15px;
        border-radius: 12px;
    }

    .millezo-single-body {
        font-size: 15px;
        line-height: 1.7;
    }

    .millezo-single-body h2 { font-size: 22px; }
    .millezo-single-body h3 { font-size: 18px; }

    .millezo-single-meta {
        font-size: 13px;
        gap: 10px;
    }

    .millezo-single-nav {
        flex-direction: column;
        gap: 12px;
    }

    .millezo-single-nav a {
        max-width: 100%;
    }

    .millezo-single-related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .millezo-related-card-title {
        font-size: 16px;
    }
}

/* Small Mobile (400px) */
@media (max-width: 400px) {
    .millezo-blog-title {
        font-size: 20px;
    }

    .millezo-single-article {
        padding: 16px;
    }

    .millezo-single-title {
        font-size: 20px;
    }
}

/* ========================================
   PRODUCT PAGE - FIX WHITE SPACE BELOW MAIN IMAGE
   ======================================== */
/* Root cause: product gallery photos have mixed aspect ratios (square, portrait,
   landscape). The slick slider track sizes itself to the tallest slide, so a
   shorter image leaves empty space below it inside the bordered image box.
   Locking every slide to one ratio removes the gap no matter which photo is active. */
.details-product .goal-woocommerce-product-gallery-wrapper .goal-woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
}

.details-product .goal-woocommerce-product-gallery-wrapper .goal-woocommerce-product-gallery .woocommerce-product-gallery__image a {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
}

.details-product .goal-woocommerce-product-gallery-wrapper .goal-woocommerce-product-gallery .woocommerce-product-gallery__image img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #fff;
}

/* ========================================
   PRODUCT PAGE - HIDE EMPTY BREADCRUMB BAR
   ======================================== */
/* Scoped to single product pages only (body.single-product) so the Shop /
   category page breadcrumb bar stays untouched. */
body.single-product #goal-breadscrumb {
    display: none !important;
}

/* ========================================
   PRODUCT PAGE - HIDE PREV/NEXT ARROW NAV NEXT TO TITLE
   ======================================== */
.details-product .product-navs {
    display: none !important;
}

/* ========================================
   PRODUCT PAGE - HIDE SKU / CATEGORY / TAGS
   ======================================== */
.details-product .product_meta {
    display: none !important;
}

/* ========================================
   PRODUCT PAGE - SHARE LINK NEXT TO PRICE
   ======================================== */
/* .goal-social-share is moved here via JS (functions.php); this lays it
   out to the right of the price. */
.details-product .price-rating-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}
.details-product .price-rating-wrapper .goal-social-share {
    margin: 0;
}
.details-product .price-rating-wrapper .goal-social-share .bo-social-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.details-product .price-rating-wrapper .goal-social-share .title {
    font-size: 13px;
    color: #656565;
}

/* ========================================
   PRODUCT PAGE - ALIGN LEFT THUMBNAIL COLUMN WITH MAIN IMAGE
   ======================================== */
/* This product's layout (layout-v5) has a built-in "margin-top" on
   .wrapper-thumbs meant for when thumbnails sit BELOW the image. Now that
   they're repositioned to the left (see functions.php), that top margin
   pushed the thumbnail column down out of alignment with the main image -
   reset it back to 0 so both columns start at the same top edge. */
.details-product.layout-v5 .image-mains.thumbnails-left .wrapper-thumbs {
    margin-top: 0 !important;
}

/* ========================================
   PRODUCT PAGE - USP SECTION (ABOVE RELATED PRODUCTS)
   ======================================== */
.millezo-product-usp {
    background-color: #FCF6F5;
    padding: 50px 0;
}
.millezo-product-usp-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 991px) {
    .millezo-product-usp {
        padding: 40px 0;
    }
}
@media (max-width: 767px) {
    .millezo-product-usp {
        padding: 30px 0;
    }
}