html {
  visibility: hidden;
}

html.loaded {
  visibility: visible;
}


/*
Theme Name: Astra Child - WRICKX
Description: Fixed price updates, heart removal, mobile slider - v2.7
Version: 2.7
Template: astra
*/

/* ===========================
   PRODUCT PAGE LAYOUT
   =========================== */

/**
 * Hide "Discuss with" subtitle on desktop
 */
/* Force hide "Discuss with" subtitle */
.mwai-timeless-theme .mwai-header .mwai-name .mwai-subtitle,
.mwai-window .mwai-header .mwai-name .mwai-subtitle,
.mwai-header .mwai-name small.mwai-subtitle {
    display: none !important;
}

.woocommerce-notices-wrapper{
    display: none;
}

.wrickx-variation-price-display {
    display: none;
}

.wrickx-product-wrap {
    display: flex;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.wrickx-gallery {
    flex: 0 0 55%;
    min-width: 0;
}

.wrickx-details {
    flex: 1 1 45%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===========================
   IMAGE SLIDER
   =========================== */

.wrickx-slider {
    position: relative;
    user-select: none;
}

.wrickx-main-image {
    position: relative;
    width: 100%;
    min-height: 400px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrickx-main-image img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    display: block;
}

.wrickx-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.wrickx-nav-btn:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wrickx-nav-btn.prev { left: 12px; }
.wrickx-nav-btn.next { right: 12px; }

.wrickx-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.wrickx-thumb {
    width: 70px;
    height: 70px;
    border: 2px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    padding: 4px;
    transition: all 0.2s;
}

.wrickx-thumb:hover,
.wrickx-thumb.active {
    border-color: #d94b46;
}

.wrickx-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================
   PRODUCT DETAILS
   =========================== */

.wrickx-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #111;
    line-height: 1.3;
}

/* ===========================
   RATING DISPLAY STYLES
   =========================== */

/* Base rating styles */
.wrickx-title-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.wrickx-title-rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.wrickx-star {
    font-size: 22px;
    line-height: 1;
}

.wrickx-star-full {
    color: #ffa500;
}

.wrickx-star-half {
    position: relative;
    color: #e0e0e0; /* base empty color */
}

.wrickx-star-half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    color: #ffa500;
    overflow: hidden;
    width: var(--star-fill, 50%); /* dynamic fill percentage */
    white-space: nowrap;
}

.wrickx-star-empty {
    color: #e0e0e0;
}

.wrickx-title-rating-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 18px;
    color: #666;
    line-height: 1;
}

/* Ensure outer wrapper always centers everything */
.wrickx-title-rating {
    align-items: center !important;
}
.wrickx-title-rating-stars {
    align-items: center !important;
}

.wrickx-title-rating-value {
    font-weight: 600;
    color: #111;
    font-size: 18px;
}

/* Clickable rating cursor */
.wrickx-rating-clickable {
    cursor: pointer;
    transition: opacity 0.2s;
}

.wrickx-rating-clickable:hover {
    opacity: 0.8;
}

/* Desktop: Show desktop rating, hide mobile rating */
.wrickx-desktop-rating {
    display: flex;
}

.wrickx-mobile-rating {
    display: none;
    font-size: 30px;
}

.wrickx-price {
    font-size: 24px;
    font-weight: 700;
    color: #d94b46;
    margin-bottom: 20px;
}

/* ===========================
   PRIMARY ACTION BUTTONS
   =========================== */

.wrickx-primary-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.wrickx-add-to-cart-btn,
.wrickx-buy-now-btn {
    flex: 1;
    height: 52px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wrickx-add-to-cart-btn {
    background: #d94b46;
    color: #fff;
}

.wrickx-add-to-cart-btn:hover {
    background: #c43d38;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217,75,70,0.3);
}

.wrickx-buy-now-btn {
    background: #d94b46;
    color: #fff;
}

.wrickx-buy-now-btn:hover {
    background: #c43d38;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217,75,70,0.3);
}

/* WISHLIST BUTTON */
.wrickx-wishlist-btn {
    width: 52px;
    height: 52px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    overflow: visible;
}

.wrickx-wishlist-btn:hover,
.wrickx-wishlist-btn.active {
    border-color: #d94b46;
    background: #fff5f5;
}

.wrickx-wishlist-btn svg {
    width: 20px;
    height: 20px;
    color: #666;
    stroke: currentColor;
    fill: currentColor;
    transition: all 0.2s;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

.wrickx-wishlist-btn { color: #666; }
.wrickx-wishlist-btn.active { color: #d94b46; }

.wrickx-wishlist-btn:hover svg,
.wrickx-wishlist-btn.active svg {
    color: #d94b46;
    stroke: #d94b46;
    fill: #d94b46;
}

/* ===========================
   VARIATION FORM
   =========================== */

.wrickx-cart-area {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.wrickx-cart-area * {
    box-sizing: border-box;
    max-width: 100%;
}

.wrickx-cart-area .single_add_to_cart_button {
    display: none !important;
}

.wrickx-cart-area .variations {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

.wrickx-cart-area .variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    width: 100%;
}

.wrickx-cart-area .variations .label {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.wrickx-cart-area .variations .value {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.wrickx-size-slider-wrapper {
    position: relative;
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wrickx-size-slider-wrapper .wrickx-size-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.wrickx-size-slider-wrapper .wrickx-size-nav:hover {
    border-color: #d94b46;
    background: #fff5f5;
}

.wrickx-size-slider-wrapper .wrickx-size-nav.prev {
    left: 0;
}

.wrickx-size-slider-wrapper .wrickx-size-nav.next {
    right: 0;
}

@media (min-width: 769px) {
    .wrickx-size-slider-wrapper.has-overflow .wrickx-size-nav {
        display: flex;
    }
}

.wrickx-size-slider-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    max-width: 100%;
}

.wrickx-size-slider-track::-webkit-scrollbar {
    display: none;
}

.wrickx-cart-area .variations .value select,
.wrickx-cart-area .variations .value .swatch-button,
.wrickx-cart-area .variations .value button {
    padding: 10px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.wrickx-cart-area .variations .value select:hover,
.wrickx-cart-area .variations .value .swatch-button:hover,
.wrickx-cart-area .variations .value button:hover {
    border-color: #d94b46;
    background: #fff5f5;
}

.wrickx-cart-area .variations .value .selected,
.wrickx-cart-area .variations .value select:focus,
.wrickx-cart-area .variations .value .swatch-button.selected,
.wrickx-cart-area .variations .value button.selected {
    border-color: #d94b46;
    background: #fff5f5;
    color: #d94b46;
}

/* FIX: CRITICAL - Hide heart/wishlist icon below quantity */
/* Targets any element appearing after .quantity container */
.wrickx-cart-area .quantity ~ *:not(.woocommerce-variation),
.wrickx-cart-area .quantity ~ button[class*="wishlist"],
.wrickx-cart-area .quantity ~ button[class*="yith"],
.wrickx-cart-area .quantity ~ .yith-wcwl-add-to-wishlist,
.wrickx-cart-area .quantity ~ a[class*="wishlist"],
.wrickx-cart-area .quantity + *[class*="heart"],
.woocommerce div.product form.cart .quantity ~ button[aria-label*="ishlist"],
.woocommerce div.product form.cart .quantity ~ a[data-product-id] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Additional wishlist icon targets */
.tinv-wraper,
.tinvwl_add_to_wishlist_button,
.yith-wcwl-add-button,
button[name="add-to-wishlist"],
a.add_to_wishlist,
.woocommerce div.product form.cart ~ .tinv-wraper {
    display: none !important;
}

/* ===========================
   QUANTITY SELECTOR
   =========================== */

.wrickx-cart-area .quantity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    position: relative;
}

.wrickx-cart-area .quantity .qty {
    width: 60px;
    height: 44px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    padding: 0 8px;
    -moz-appearance: textfield;
}

.wrickx-cart-area .quantity .qty::-webkit-outer-spin-button,
.wrickx-cart-area .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wrickx-cart-area .qty-btn {
    width: 44px;
    height: 44px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #333;
}

.wrickx-cart-area .qty-btn:hover {
    border-color: #d94b46;
    background: #fff5f5;
    color: #d94b46;
}

/* ===========================
   PROMO BOX
   =========================== */

.wrickx-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff5d9 100%);
    border: 2px dashed #f0c040;
    border-radius: 8px;
    margin-bottom: 20px;
}

.promo-icon {
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.promo-text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.promo-text strong {
    color: #d94b46;
    font-weight: 700;
}

/* ===========================
   FEATURE ICONS
   =========================== */

.wrickx-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: all 0.2s;
}

.feature:hover {
    background: #f0f0f0;
}

.feature img {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.feature span {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

/* ===========================
   DESCRIPTION ACCORDION
   =========================== */

.wrickx-accordion {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-align: left;
    transition: all 0.2s;
}

.accordion-toggle:hover {
    background: #f9f9f9;
}

.toggle-icon {
    font-size: 20px;
    transition: transform 0.3s;
}

.accordion-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-content:not([hidden]) {
    max-height: 1000px;
    padding: 16px;
}

.accordion-content p {
    margin: 0 0 12px 0;
    line-height: 1.6;
    color: #666;
}

.accordion-content ul,
.accordion-content ol {
    margin: 0 0 12px 20px;
    color: #666;
}

/* ===========================
   RELATED PRODUCTS SLIDER
   =========================== */

.wrickx-related-section {
    width: 100%;
    padding: 40px 0;
    background: #fafafa;
    margin-top: 40px;
}

.wrickx-related-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.wrickx-section-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 24px 0;
    text-align: center;
    color: #111;
}

.wrickx-slider-wrapper {
    position: relative;
    padding: 0 50px;
    overflow: hidden;
}

.wrickx-slider-btn {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #333;
    line-height: 1;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}

.wrickx-slider-btn:hover {
    border-color: #d94b46;
    background: #fff5f5;
    color: #d94b46;
    transform: translateY(-50%) scale(1.1);
}

.wrickx-slider-btn.prev { 
    left: 0; 
}

.wrickx-slider-btn.next { 
    right: 0; 
}

@media (max-width: 768px) {
    .wrickx-slider-btn {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
}

.wrickx-related-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.wrickx-related-card {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.wrickx-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-thumb {
    width: 100%;
    height: 220px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wrickx-related-card:hover .card-thumb img {
    transform: scale(1.05);
}

.card-info {
    padding: 16px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
    line-height: 1.4;
}

.card-price {
    font-size: 16px;
    font-weight: 700;
    color: #d94b46;
}

/* ===========================
   REVIEWS SECTION
   =========================== */

.wrickx-reviews-section {
    max-width: 1280px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.wrickx-reviews-content {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.no-reviews {
    text-align: center;
    color: #999;
    font-size: 16px;
    padding: 40px 20px;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 1024px) {
    .wrickx-product-wrap {
        flex-direction: column;
        gap: 30px;
    }

    .wrickx-gallery,
    .wrickx-details {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .wrickx-title {
        font-size: 24px;
    }
    
    /* ===========================
       MOBILE RATING REPOSITIONING
       UPDATE 1: Move rating to gallery on mobile
       =========================== */
    
    /* Hide desktop rating (below title) on mobile */
    .wrickx-desktop-rating {
        display: none !important;
    }
    
    /* Show mobile rating (between main image and thumbnails) */
    .wrickx-mobile-rating {
        display: flex !important;
        padding: 12px 0;
        margin: 12px 0 0 0;
        border-top: 1px solid #f0f0f0;
    }
    
    /* Increase font size for mobile rating */
    .wrickx-mobile-rating .wrickx-title-rating-meta {
        font-size: 18px;
    }
    
    .wrickx-mobile-rating .wrickx-title-rating-value {
        font-size: 18px;
    }
    
    .wrickx-mobile-rating .wrickx-star {
        font-size: 22px;
    }

    .wrickx-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .wrickx-related-card {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
    }
    
    /* =========================================
   FIX APPLIED: Removed display:none rule
   Date: 2026-02-11
   Issue: Slider arrows hidden on mobile
   Solution: Deleted lines 821-825 
   ========================================= */

@media (max-width: 1024px) {
    .wrickx-product-wrap {
        flex-direction: column;
        gap: 30px;
    }

    .wrickx-gallery,
    .wrickx-details {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .wrickx-title {
        font-size: 24px;
    }

    .wrickx-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .wrickx-related-card {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
    }
    
    /* REMOVED: Lines that were hiding slider arrows
    .wrickx-slider-btn,
    .wrickx-slider-btn.prev,
    .wrickx-slider-btn.next {
        display: none !important;
    }
    */
    
    .wrickx-slider-wrapper {
        padding: 0;
    }
}
    
    .wrickx-slider-wrapper {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .wrickx-product-wrap {
        padding: 15px;
    }

    .wrickx-primary-actions {
        flex-wrap: wrap;
    }

    .wrickx-add-to-cart-btn,
    .wrickx-buy-now-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 140px;
    }

    .wrickx-wishlist-btn {
        width: 48px;
        height: 48px;
    }

    /* FIX: Mobile slider - show 2 products side by side */
    .wrickx-related-card {
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

    .card-thumb {
        height: 180px;
    }
    
    .wrickx-related-track {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .wrickx-title {
        font-size: 20px;
    }

    .wrickx-price {
        font-size: 20px;
    }

    .wrickx-primary-actions {
        flex-direction: column;
    }

    .wrickx-add-to-cart-btn,
    .wrickx-buy-now-btn {
        width: 100%;
        flex: 1 1 100%;
    }

    .wrickx-features {
        grid-template-columns: 1fr;
    }
    
    /* Small mobile - still show 2 products */
    .wrickx-related-card {
        flex: 0 0 calc(50% - 6px);
        width: calc(50% - 6px);
        min-width: calc(50% - 6px);
    }
    
    .card-thumb {
        height: 160px;
    }
    
    .wrickx-related-track {
        gap: 8px;
    }
}

/* ===========================
   ADDITIONAL FIXES
   =========================== */

.single-product,
.single-product * {
  box-sizing: border-box;
}

.woocommerce div.product .variations,
.woocommerce div.product form.variations,
.woocommerce div.product .variation {
  width: 100%;
  max-width: 100%;
}

.woocommerce div.product .variations .value,
.woocommerce div.product .variation .value,
.woocommerce div.product .product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 100%;
}

.woocommerce div.product .variations .value button,
.woocommerce div.product .variations .value .option,
.woocommerce div.product .variation .value .button,
.woocommerce div.product .attribute-options .option {
  min-width: 46px;
  max-width: 100%;
  padding: 8px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: none;
}

.woocommerce div.product .summary,
.woocommerce div.product .product-image,
.woocommerce div.product .images {
  max-width: 100%;
  overflow-wrap: break-word;
}

.woocommerce div.product .variations,
.woocommerce div.product .variations .value {
  position: relative;
  z-index: 5;
}

@media (max-width: 1024px) {
  .site-overlay,
  .page-overlay,
  .popup-overlay,
  .modal-backdrop {
    pointer-events: none !important;
  }
}

.woocommerce div.product .images img,
.woocommerce div.product .thumbnails img {
  max-width: 100%;
  height: auto;
  display: block;
}

.woocommerce div.product .upload-field,
.woocommerce div.product .upload-pictures,
.woocommerce div.product .custom-upload {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 880px) {
  .woocommerce div.product .product {
    display: block;
  }
  .woocommerce div.product .summary {
    margin-top: 15px;
  }
}

.widget_shopping_cart .product-title,
.woocommerce-mini-cart .product-title,
.woocommerce .cart .product-name,
.woocommerce .widget_shopping_cart .product-name a {
  background: rgba(255,255,255,0.98) !important;
  color: #222 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  max-width: calc(100% - 20px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
  text-decoration: none !important;
}

.woocommerce .quantity,
.woocommerce-cart .quantity,
.widget_shopping_cart .quantity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

.woocommerce .quantity .qty,
.woocommerce-cart .quantity .qty,
.widget_shopping_cart .quantity .qty {
  width: 56px !important;
  min-width: 56px !important;
  height: 40px !important;
  padding: 6px 10px !important;
  text-align: center !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus,
.widget_shopping_cart .quantity .minus,
.widget_shopping_cart .quantity .plus {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border: none !important;
  background: #222 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
  position: relative !important;
  transform: none !important;
}

@media (max-width: 420px) {
  .woocommerce .quantity .qty { width: 48px !important; height: 36px !important; }
  .woocommerce .quantity .minus, .woocommerce .quantity .plus { width: 36px !important; height: 36px !important; font-size: 18px !important; }
}

.widget_shopping_cart .product-title,
.woocommerce-mini-cart .product-title,
.woocommerce .cart .product-name,
.woocommerce table.cart .product-name,
.woocommerce .cart .product-name a,
.woocommerce table.cart .variation,
.woocommerce .cart .product-variation,
.woocommerce .cart .product_meta,
.woocommerce .cart .variation {
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.widget_shopping_cart .quantity .minus,
.widget_shopping_cart .quantity .plus,
.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #222 !important;
  color: #fff !important;
}

.woocommerce .quantity .qty,
.widget_shopping_cart .quantity .qty {
  width: 44px !important;
  min-width: 44px !important;
  height: 32px !important;
  padding: 6px 6px !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* ===========================
   GLOBAL ASTRA HEADER FIX
   =========================== */

.site #content,
.site .site-content,
.ast-container,
#primary,
.content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.single-product #content,
.single-product .site-content,
.woocommerce.single-product #primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.elementor-page #content,
.elementor-template-full-width #content,
.elementor-template-canvas #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#masthead,
.site-header,
.ast-main-header-wrap {
    margin-bottom: 0 !important;
}

.ast-header-sticked #primary,
.ast-header-sticked .site-content {
    padding-top: 0 !important;
}

.ast-theme-transparent-header #content,
.ast-theme-transparent-header .site-content {
    padding-top: 0 !important;
}

.wrickx-wishlist-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #666;
}

.wrickx-wishlist-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.wrickx-wishlist-btn.active { color: #d94b46; }
.wrickx-wishlist-btn.active img { filter: sepia(1) saturate(3) hue-rotate(-20deg) brightness(0.9); }






/* ===================================
   LOGIN/REGISTER FORM FULL WIDTH FIX
   =================================== */

/* Make the entire login wrapper full width */
.myauth-woocommerce-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Tabs should stretch full width */
.myauth-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 0 30px 0 !important;
    border-bottom: 2px solid #e0e0e0;
}

.myauth-tabs button {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center !important;
    padding: 15px 20px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #999 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.myauth-tabs button.active {
    color: #333 !important;
    border-bottom-color: #0073aa !important;
    background: #f9f9f9 !important;
}

.myauth-tabs button:hover {
    color: #0073aa !important;
    background: #f9f9f9 !important;
}

/* Tab content should be full width */
.myauth-tab-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.myauth-tab-pane {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 40px 30px !important;
    background: #fff !important;
}

/* Form elements full width */
.myauth-tab-pane form {
    width: 100% !important;
}

.myauth-tab-pane input[type="text"],
.myauth-tab-pane input[type="email"],
.myauth-tab-pane input[type="password"],
.myauth-tab-pane input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 15px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.myauth-tab-pane button[type="submit"],
.myauth-tab-pane .myauth-submit-btn,
.myauth-tab-pane .button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    margin-top: 10px !important;
    background: #0073aa !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    box-sizing: border-box !important;
}

.myauth-tab-pane button[type="submit"]:hover,
.myauth-tab-pane .myauth-submit-btn:hover {
    background: #005a87 !important;
}

/* Google button full width */
.myauth-tab-pane .myauth-google-btn,
.myauth-tab-pane a[href*="google"] {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.myauth-tab-pane .myauth-google-btn:hover {
    background: #f9f9f9 !important;
    border-color: #999 !important;
}

/* Form labels */
.myauth-tab-pane label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* Remove any restrictive max-widths */
.myauth-login-section,
.myauth-register-section {
    max-width: 100% !important;
    width: 100% !important;
}

/* Override any container restrictions */
.woocommerce-account .myauth-woocommerce-wrapper,
.woocommerce .myauth-woocommerce-wrapper {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .myauth-tabs button {
        font-size: 14px !important;
        padding: 12px 10px !important;
    }
    
    .myauth-tab-pane {
        padding: 30px 20px !important;
    }
}

@media (max-width: 480px) {
    .myauth-tabs {
        flex-wrap: wrap !important;
    }
    
    .myauth-tabs button {
        flex: 0 0 50% !important;
        font-size: 13px !important;
    }
}

/* Fix for WooCommerce page wrapper if it's restricting width */
.woocommerce-page .entry-content,
.woocommerce .entry-content {
    max-width: 100% !important;
}

/* Ensure parent containers don't restrict */
#primary,
#content,
.site-content,
.ast-container {
    max-width: 100% !important;
}

/* But keep content readable - center the form content */
.myauth-woocommerce-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

















/* Shop Header */
.wrickx-shop-header {
    text-align: center;
    margin-bottom: 40px;
}

.wrickx-shop-header h1 {
    font-size: 36px;
    font-weight: 700;
}

.wrickx-shop-header p {
    font-size: 16px;
    opacity: 0.7;
}

/* ========================================
   WOOCOMMERCE ARCHIVE PRODUCT CARDS - FINAL VERSION
   Exact match for reference design
   
   Removes: 
   - Category text
   - Yellow star ratings
   - "OUT OF STOCK" center overlay
   
   Keeps:
   - Green star rating
   - "SOLD OUT" badge (top-left)
   
   REPLACE LINES 1567-1900 IN style.css WITH THIS CODE
   ======================================== */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products li.product {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    padding: 0;
    margin: 0;
}

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

/* Product Image Container */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    display: block;
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product:hover img {
    transform: scale(1.02);
}

/* ========================================
   HIDE UNWANTED ELEMENTS
   ======================================== */

/* Hide any category display */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .product-category,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .product_cat,
.woocommerce ul.products li.product .term-link,
.woocommerce ul.products li.product .category-link {
    display: none !important;
}

/* Hide default WooCommerce yellow/orange star ratings */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-product-rating,
.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .woocommerce-product-rating .star-rating {
    display: none !important;
}

/* Hide the old rating wrapper if it exists */
.woocommerce ul.products li.product .wrickx-modern-rating {
    display: none !important;
}

/* ========================================
   HIDE "OUT OF STOCK" CENTER OVERLAY
   CRITICAL: Keep only the "SOLD OUT" badge
   ======================================== */

/* Hide WooCommerce/Astra out of stock overlay text */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock,
.woocommerce ul.products li.product .out-of-stock-label,
.woocommerce ul.products li.product .outofstock-badge,
.woocommerce ul.products li.product .stock-status,
.woocommerce ul.products li.product .out-of-stock-overlay,
.woocommerce ul.products li.product .woocommerce-loop-product__title + .stock,
.woocommerce ul.products li.product .ast-oos-badge,
.woocommerce ul.products li.product .product-stock-status {
    display: none !important;
}

/* Additional specificity - hide any out of stock text in product card */
.woocommerce ul.products li.product.outofstock .stock,
.woocommerce ul.products li.product.outofstock .stock.out-of-stock,
.woocommerce ul.products li.product .stock.out-of-stock,
.woocommerce ul.products li.product p.stock.out-of-stock {
    display: none !important;
}

/* Hide Astra's out of stock badge/overlay */
.ast-oos-badge,
.ast-on-card-button .ast-oos-badge,
body .ast-oos-badge {
    display: none !important;
}

/* ======================================== */

/* Product Details Section */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px;
    padding: 0 16px;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px;
}

/* NEW Rating - Green star format only */
.wrickx-minimal-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    margin: 0 0 8px;
    padding: 0 16px;
}

.wrickx-star-green {
    color: #10b981;
    font-size: 16px;
    line-height: 1;
}

.wrickx-rating-num {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
}

.wrickx-rating-reviews {
    color: #666;
    font-weight: 400;
    font-size: 14px;
}

.wrickx-rating-spacer {
    height: 22px;
    margin: 0 0 8px;
}

/* Price Styling - Match reference exactly */
.woocommerce ul.products li.product .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0 16px 16px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Regular price (when on sale - shows as strikethrough on top) */
.woocommerce ul.products li.product .price del {
    order: -1;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    margin: 0;
}

.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
    color: #999;
    font-weight: 400;
}

/* Sale price (red, bold, larger) */
.woocommerce ul.products li.product .price ins {
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
    text-decoration: none;
    margin: 0;
}

.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
    color: #e74c3c;
}

/* Single price (no sale) */
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    color: #1a1a1a;
    font-weight: 700;
}

/* Hide all buttons in archive (shop/category/search) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}

/* Hide heart button on archive pages */
.woocommerce-shop .wrickx-heart-btn,
.woocommerce-search .wrickx-heart-btn,
.archive .wrickx-heart-btn {
    display: none !important;
}

/* ========================================
   SOLD OUT Badge - Minimal overlay (KEEP THIS)
   This is the only out-of-stock indicator we want
   ======================================== */

.woocommerce ul.products li.product.outofstock::before {
    content: 'SOLD OUT';
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: 14px;
        min-height: 40px;
        padding: 0 12px;
    }
    
    .wrickx-minimal-rating {
        font-size: 13px;
        padding: 0 12px;
    }
    
    .wrickx-star-green {
        font-size: 14px;
    }
    
    .wrickx-rating-num,
    .wrickx-rating-reviews {
        font-size: 13px;
    }
    
    .woocommerce ul.products li.product .price {
        padding: 0 12px 12px;
        font-size: 16px;
    }
    
    .woocommerce ul.products li.product .price ins {
        font-size: 16px;
    }
    
    .woocommerce ul.products li.product.outofstock::before {
        top: 8px;
        left: 8px;
        padding: 4px 10px;
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .woocommerce ul.products li.product {
        border-radius: 10px;
    }
    
    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product img {
        border-radius: 10px 10px 0 0;
    }
}












.wrickx-shop-hero {
    text-align: center;
    padding: 60px 20px;
}

.wrickx-shop-hero h1 {
    font-size: 42px;
    font-weight: 800;
}

.wrickx-shop-hero p {
    font-size: 16px;
    opacity: 0.7;
}






/* Hide Razorpay auto-injected Buy Now button */
.razorpay-buy-now,
button[data-razorpay],
.rzp-buy-now {
    display: none !important;
}





/*@media (max-width: 767px) {*/
/*  .mwai-chat,*/
/*  .mwai-chat-widget,*/
/*  .mwai-chat-container {*/
/*    display: block !important;*/
/*    visibility: visible !important;*/
/*    opacity: 1 !important;*/
/*    z-index: 99999 !important;*/
/*  }*/
/*}*/










/* SHOP / SEARCH: remove all action buttons */
.woocommerce-shop .button,
.woocommerce-search .button,
.woocommerce-shop .buy-now,
.woocommerce-search .buy-now,
.woocommerce-shop .single_add_to_cart_button,
.woocommerce-search .single_add_to_cart_button {
    display: none !important;
}



/* 🚫 COMPLETELY REMOVE ASTRA SEARCH HEADER */
.search .ast-page-title,
.search .ast-archive-title,
.search .ast-archive-description,
.search .ast-search-title,
.search .ast-search-results,
.search .page-header,
.search header.entry-header,
.search .entry-title,
.search .entry-header {
    display: none !important;
}

/* Remove extra spacing Astra leaves behind */
.search .site-content,
.search .ast-container {
    padding-top: 0 !important;
    margin-top: 0px !important;
    padding-left: 30px;
    padding-right: 30px;
}


@media (max-width: 720px){
    .orderby{
        margin-top: 5px;
        margin-left: 10px;
    }   
}





/* ========================================
   MODERN PRODUCT RATINGS - SHOP/SEARCH PAGES
   Add this to your Astra Child Theme style.css
   ========================================
   
   Clean, modern rating display inspired by Blinkit/Swiggy/Zepto
   Features:
   - Compact inline layout
   - Star emoji + numeric rating
   - Review count in parentheses
   - Mobile-optimized
   - Subtle, professional styling
*/

.wrickx-modern-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 8px;
    margin-bottom: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.wrickx-rating-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    font-weight: 600;
    color: #1a1a1a;
    transition: background 0.2s ease;
}

/* Optional: Add subtle hover effect for better UX */
.wrickx-modern-rating:hover .wrickx-rating-wrapper {
    background: #e9ecef;
}

.wrickx-star-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
}

.wrickx-rating-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.wrickx-rating-count {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    margin-left: 2px;
}

/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
    .wrickx-modern-rating {
        font-size: 13px;
        margin-top: 6px;
        margin-bottom: 10px;
    }
    
    .wrickx-rating-wrapper {
        padding: 3px 7px;
    }
    
    .wrickx-star-icon {
        font-size: 13px;
    }
    
    .wrickx-rating-value {
        font-size: 13px;
    }
    
    .wrickx-rating-count {
        font-size: 12px;
    }
}

/* ========================================
   ALTERNATIVE STYLE VARIATIONS
   (Uncomment the one you prefer)
   ======================================== */

/* VARIATION 1: Green background (like some food delivery apps) */
/*
.wrickx-rating-wrapper {
    background: #0b8043;
    color: #fff;
}

.wrickx-rating-value {
    color: #fff;
}

.wrickx-modern-rating:hover .wrickx-rating-wrapper {
    background: #097238;
}
*/

/* VARIATION 2: Border style (more subtle) */
/*
.wrickx-rating-wrapper {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #1a1a1a;
}

.wrickx-modern-rating:hover .wrickx-rating-wrapper {
    border-color: #c0c0c0;
    background: #f8f9fa;
}
*/

/* VARIATION 3: Minimal (no background) */
/*
.wrickx-rating-wrapper {
    background: transparent;
    padding: 0;
    gap: 2px;
}

.wrickx-modern-rating:hover .wrickx-rating-wrapper {
    background: transparent;
}
*/

/* ========================================
   INTEGRATION WITH PRODUCT CARDS
   ======================================== */

/* Ensure proper spacing in WooCommerce product loops */
.woocommerce ul.products li.product .wrickx-modern-rating,
.woocommerce-page ul.products li.product .wrickx-modern-rating {
    margin-top: 8px;
    margin-bottom: 8px;
    display: inline-flex;
}

/* Align with product title if needed */
.woocommerce ul.products li.product h2 + .wrickx-modern-rating,
.woocommerce ul.products li.product .woocommerce-loop-product__title + .wrickx-modern-rating {
    margin-top: 6px;
}

/* Ensure rating appears before price */
.wrickx-modern-rating + .price {
    margin-top: 8px;
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Ensure star emoji renders consistently */
.wrickx-star-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

/* Prevent layout shift while loading */
.wrickx-modern-rating {
    min-height: 24px;
}

/* Ensure proper contrast for accessibility */
@media (prefers-contrast: high) {
    .wrickx-rating-wrapper {
        border: 1px solid #333;
    }
    
    .wrickx-rating-value {
        font-weight: 700;
    }
}

/* ========================================
   RESPONSIVE GRID ADJUSTMENTS
   ======================================== */

/* For compact product grids (4-5 columns) */
@media (min-width: 1024px) {
    .columns-4 .wrickx-modern-rating,
    .columns-5 .wrickx-modern-rating {
        font-size: 13px;
    }
    
    .columns-4 .wrickx-rating-wrapper,
    .columns-5 .wrickx-rating-wrapper {
        padding: 3px 6px;
    }
}

/* For mobile single column layout */
@media (max-width: 480px) {
    .wrickx-modern-rating {
        margin-top: 8px;
        margin-bottom: 10px;
    }
}












/* ===================================
   WRICKX Product Slider
   =================================== */

.wrickx-product-slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.wrickx-product-slider {
    display: flex;
    gap: 16px;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: auto; /* Changed from smooth - JS handles animation */
    scroll-snap-type: none; /* Disabled - conflicts with JS */
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 20px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wrickx-product-slider::-webkit-scrollbar {
    display: none;
}

/* Product Cards */
.wrickx-product-card {
    flex: 0 0 calc(50% - 8px);
    min-width: calc(50% - 8px);
    scroll-snap-align: none;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wrickx-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.wrickx-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wrickx-product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

/* ========================================
   PRODUCT SLIDER - WIDTH CONSTRAINT
   Matches .wrickx-related-inner max-width
   ======================================== */

.wrickx-product-slider-wrapper {
    position: relative;
    padding: 0 50px;
    overflow: hidden;
    /* Width constraint applied via parent .wrickx-related-inner */
}

/* Ensure section uses same width as rest of page */
.wrickx-related-section .wrickx-related-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .wrickx-product-slider-wrapper {
        padding: 0 40px;
    }
}

@media (max-width: 479px) {
    .wrickx-product-slider-wrapper {
        padding: 0 35px;
    }
}

/**
 * SOLD OUT BADGE - EXACT REFERENCE MATCH
 * Place this in your style.css, replacing lines 1821-1846
 * 
 * Features:
 * - Top-right corner positioning
 * - White pill shape matching reference image
 * - Responsive across all screen sizes
 * - Works for both simple and variable products
 */

/* SOLD OUT Badge Container */
/* ============================================================================
   COPY-PASTE READY - SOLD OUT BADGE FIX
   
   Instructions:
   1. Open your style.css file
   2. Find and DELETE lines 1821-1870 (old badge code)
   3. Find and DELETE lines 2044-2137 (old slider badge code)
   4. PASTE this entire block where line 1821 was
   5. Save and clear cache
   
   This will make your badges look EXACTLY like your reference image:
   - White background
   - Black text
   - Top-right corner
   - NO blur or grayscale on images
   ============================================================================ */

/* SOLD OUT Badge - EXACT REFERENCE MATCH */
/* SOLD OUT Badge - TOP LEFT, SMALL SIZE */
/* MAIN SLIDER BADGE - TOP LEFT */
.wrickx-sold-out-badge {
    position: absolute;
    top: 8px;           /* TOP LEFT - matches your image */
    left: 8px;          /* LEFT side - matches your image */
    right: auto;        /* Clear any right positioning */
    z-index: 10;
    background: #FFFFFF;
    color: #000000;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    line-height: 1;
}

.wrickx-sold-out-text {
    display: block;
    white-space: nowrap;
    color: inherit;
}

/* Keep images clean */
.wrickx-product-card.wrickx-sold-out .wrickx-product-image {
    filter: none !important;
    opacity: 1 !important;
}

.wrickx-product-card.wrickx-sold-out:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.wrickx-product-card.wrickx-sold-out:hover .wrickx-product-image {
    transform: scale(1.05);
}

.wrickx-product-card.wrickx-sold-out .wrickx-product-link {
    cursor: pointer;
}

.wrickx-product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.wrickx-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.wrickx-product-card:hover .wrickx-product-image {
    transform: scale(1.05);
}

/* ============================================================================
   OLD SLIDER SUPPORT (if you haven't disabled it yet)
   ============================================================================ */

.wrickx-related-card .wrickx-sold-out-badge {
    position: absolute;
    top: 8px;           /* TOP LEFT - matches your image */
    left: 8px;          /* LEFT side - matches your image */
    right: auto;        /* Clear any right positioning */
    z-index: 10;
    background: #FFFFFF;
    color: #000000;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    line-height: 1;
}

.wrickx-related-card .wrickx-sold-out-text {
    display: block;
    white-space: nowrap;
    color: inherit;
}

.wrickx-related-card.wrickx-sold-out .card-thumb img {
    opacity: 1 !important;
    filter: none !important;
}

.wrickx-related-card.wrickx-sold-out .card-thumb {
    position: relative;
}

.wrickx-related-card.wrickx-sold-out .card-thumb::after {
    display: none !important;
}

.wrickx-related-card .card-thumb {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 220px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   RESPONSIVE - Badge scales on smaller screens
   REPLACE the @media blocks around lines 1976 and 1988
   ============================================================================ */

@media (max-width: 768px) {
    .wrickx-sold-out-badge,
    .wrickx-related-card .wrickx-sold-out-badge {
        top: 6px;
        left: 6px;          /* LEFT - not right */
        right: auto;
        padding: 3px 8px;
        font-size: 8px;
        letter-spacing: 0.2px;
    }
}

@media (max-width: 480px) {
    .wrickx-sold-out-badge,
    .wrickx-related-card .wrickx-sold-out-badge {
        top: 5px;
        left: 5px;          /* LEFT - not right */
        right: auto;
        padding: 3px 7px;
        font-size: 7px;
        letter-spacing: 0.2px;
    }
}
/* High contrast mode accessibility */
@media (prefers-contrast: high) {
    .wrickx-sold-out-badge,
    .wrickx-related-card .wrickx-sold-out-badge {
        background: #FFFFFF;
        border: 2px solid #000000;
        color: #000000;
    }
}

/* Hide when printing */
@media print {
    .wrickx-sold-out-badge,
    .wrickx-related-card .wrickx-sold-out-badge {
        display: none;
    }
}

/* ============================================================================
   END OF SOLD OUT BADGE STYLES
   ============================================================================ */


/* ============================================================================
   WRICKX SINGLE PRODUCT PAGE - SOLD OUT BADGE
   ============================================================================
   This badge appears ONLY on single product pages when product is out of stock
   Position: Top-left corner of main product image container
   Styling: White background, black text, rounded pill shape
   
   CRITICAL POSITIONING NOTES:
   - Parent .wrickx-main-image has:
     * position: relative (positioning context)
     * display: flex with center alignment
     * border-radius: 8px
     * overflow: hidden
     * border: 1px solid #f0f0f0
   - Badge must position from container's top-left edge
   - Uses higher z-index to ensure visibility above centered image
   ============================================================================ */

.wrickx-single-sold-out-badge {
    position: absolute !important;
    top: 12px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 25 !important;
    background: #FFFFFF;
    color: #000000;
    padding: 30px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 1.2;
    margin: 0 !important;
    transform: none !important;
}

.wrickx-single-sold-out-badge .wrickx-sold-out-text {
    display: block;
    white-space: nowrap;
    color: inherit;
}

/* Responsive adjustments for single product badge */
@media (max-width: 768px) {
    .wrickx-single-sold-out-badge {
        top: 10px !important;
        left: 18px !important;
        padding: 30px 10px;
        font-size: 10px;
        letter-spacing: 0.4px;
    }
}

@media (max-width: 480px) {
    .wrickx-single-sold-out-badge {
        top: 20px !important;
        left: 8px !important;
        padding: 30px 10px;
        font-size: 9px;
        letter-spacing: 0.3px;
    }
}

/* High contrast mode accessibility */
@media (prefers-contrast: high) {
    .wrickx-single-sold-out-badge {
        background: #FFFFFF;
        border: 2px solid #000000;
        color: #000000;
    }
}

/* Hide when printing */
@media print {
    .wrickx-single-sold-out-badge {
        display: none;
    }
}

/* ============================================================================
   END OF SINGLE PRODUCT SOLD OUT BADGE
   ============================================================================ */


/* ============================================================================
   WRICKX DISABLED BUTTON STYLES - OUT OF STOCK PRODUCTS
   ============================================================================
   These styles apply to buttons that are server-side rendered with disabled
   attribute and .wrickx-btn-disabled class (single-product.php)
   ============================================================================ */

.wrickx-btn-disabled,
button.wrickx-btn-disabled,
.wrickx-add-to-cart-btn.wrickx-btn-disabled,
.wrickx-buy-now-btn.wrickx-btn-disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: currentColor !important;
}

/* Ensure disabled buttons don't respond to hover */
.wrickx-btn-disabled:hover,
button.wrickx-btn-disabled:hover,
.wrickx-add-to-cart-btn.wrickx-btn-disabled:hover,
.wrickx-buy-now-btn.wrickx-btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   END OF DISABLED BUTTON STYLES
   ============================================================================ */
   /*What this fixes:
   ✓ Badge is now WHITE with BLACK text (matches reference)
   ✓ Badge is in TOP-RIGHT corner (not center)
   ✓ Images are CLEAR and COLORFUL (no grayscale)
   ✓ Images are FULLY VISIBLE (no opacity reduction)
   ✓ NO white overlay dimming the images
   ✓ Responsive on all screen sizes
   ============================================================================ */
/* Prevent cursor change on sold out items (they're still clickable to see details) */
.wrickx-product-card.wrickx-sold-out .wrickx-product-link {
    cursor: pointer; /* Keep clickable */
}

/**
 * SLIDER ENHANCEMENTS
 */

/* Ensure smooth touch scrolling on mobile */
.wrickx-product-slider {
    touch-action: pan-y pan-x; /* Allow both vertical and horizontal panning */
}

/* Improved slider arrow styles - ensure they work across all breakpoints */
.wrickx-slider-arrow {
    position: absolute;
    top: 33%; /* Changed from 50% - positions on image area */
    transform: translateY(-50%);
    z-index: 1000;
    width: 44px;
    height: 44px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c3e50;
    transition: all 0.2s ease;
    padding: 0;
}

.wrickx-slider-arrow:hover {
    background: #8B0000;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.wrickx-slider-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.wrickx-slider-arrow-prev {
    left: 3px;
}

.wrickx-slider-arrow-next {
    right: 3px;
}

.wrickx-slider-arrow svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

/* Responsive arrow positioning */
@media (min-width: 1024px) {
    .wrickx-slider-arrow {
        width: 50px;
        height: 50px;
        top: 33%; /* Slightly lower on desktop for larger cards */
    }
    
    .wrickx-slider-arrow svg {
        width: 28px;
        height: 28px;
    }
}

/* Mobile - keep centered on visible area */
@media (max-width: 767px) {
    .wrickx-slider-arrow {
        top: 31%; /* Higher on mobile since cards are smaller */
        width: 40px;
        height: 40px;
    }
    
    .wrickx-slider-arrow svg {
        width: 20px;
        height: 20px;
    }
}

/**




/* Best Selling Badge */
.wrickx-best-selling-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: linear-gradient(135deg, #FF4D4D 0%, #FF6B35 100%);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(255, 77, 77, 0.4);
}

.wrickx-best-selling-text {
    display: block;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .wrickx-best-selling-badge {
        top: 4px;
        right: 4px;
        padding: 3px 8px;
        font-size: 8px;
        letter-spacing: 0.3px;
    }
}

/* Visual muting for sold out products */
/*.wrickx-product-card.wrickx-sold-out {*/
/*    opacity: 0.75;*/
/*}*/

/*.wrickx-product-card.wrickx-sold-out .wrickx-product-image {*/
/*    filter: grayscale(40%) brightness(0.95);*/
/*}*/

.wrickx-product-card.wrickx-sold-out:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.wrickx-product-card.wrickx-sold-out:hover .wrickx-product-image {
    transform: scale(1.02);
}

/* Prevent aggressive hover effects on sold out items */
.wrickx-product-card.wrickx-sold-out .wrickx-product-link {
    cursor: default;
}


.wrickx-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.wrickx-product-card:hover .wrickx-product-image {
    transform: scale(1.05);
}

.wrickx-product-info {
    padding: 12px;
}

.wrickx-product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 13px;
}

.wrickx-rating-star {
    color: #10b981;
    font-size: 16px;
}

.wrickx-rating-value {
    color: #2c3e50;
    font-weight: 600;
}

.wrickx-rating-count {
    color: #6b7280;
}

.wrickx-product-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 6px 0;
    color: #2c3e50;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.wrickx-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
}

.wrickx-product-price del {
    font-size: 14px;
    color: #9ca3af;
    font-weight: 400;
    margin-right: 6px;
}

.wrickx-product-price ins {
    text-decoration: none;
}

/* Tablet */
@media (min-width: 768px) {
    .wrickx-product-card {
        flex: 0 0 calc(33.333% - 11px);
        min-width: calc(33.333% - 11px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .wrickx-product-slider {
        gap: 20px;
    }
    
    .wrickx-product-card {
        flex: 0 0 calc(25% - 15px);
        min-width: calc(25% - 15px);
    }
    
    .wrickx-product-title {
        font-size: 16px;
        min-height: 42px;
    }
}






.woocommerce span.onsale {
    display: none !important;
}




/* ============================================
   AI ENGINE CHATBOT - MOBILE FIX (CORRECTED)
   ============================================
   Purpose: Fix chatbot sizing and keyboard visibility on mobile
   Issue Fixed: Removes dead space, constrains height properly
   Location: Add to /wp-content/themes/astra-child/style.css
   
   REPLACE THE PREVIOUS FIX WITH THIS VERSION
   ============================================ */

@media (max-width: 760px) {
  
  /* ============================================
     FIX 1: WINDOW CONTAINER SIZING
     ============================================
     Problem: Previous fix used 85vh which is still too large
     Solution: Use explicit height that accounts for header + content + input
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open {
    /* CRITICAL: Remove all viewport-based heights */
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    
    /* Positioning: Top-center of viewport */
    position: fixed !important;
    top: 10vh !important;           /* 10% from top */
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;        /* CRITICAL: Don't stretch to bottom */
    
    /* Centering */
    transform: translateX(-50%) !important;
    
    /* Size constraints */
    width: 90% !important;
    max-width: 400px !important;
    
    /* Visual styling */
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    
    /* Z-index */
    z-index: 999999 !important;
    
    /* Safe areas */
    margin-top: env(safe-area-inset-top, 0) !important;
    
    /* Box model */
    box-sizing: border-box !important;
  }
  
  /* ============================================
     FIX 2: WINDOW-BOX (Inner container)
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-window-box {
    /* Remove flex stretching */
    flex: none !important;
    
    /* Let content determine height */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    
    /* Keep it as column layout */
    display: flex !important;
    flex-direction: column !important;
    
    /* Visual */
    border-radius: 16px !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  
  /* ============================================
     FIX 3: MOBILE HEADER
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-mobile-header {
    /* Sticky at top of chatbot */
    position: sticky !important;
    top: 0 !important;
    z-index: 101 !important;
    
    /* Fixed height */
    min-height: 50px !important;
    flex-shrink: 0 !important;
    
    /* Visual */
    background: var(--mwai-backgroundHeaderColor) !important;
    border-bottom: 1px solid var(--mwai-lineColor) !important;
  }
  
  /* ============================================
     FIX 4: BODY CONTAINER (CRITICAL FIX)
     ============================================
     Problem: flex: 1 causes body to stretch to fill parent
     Solution: Remove flex stretching, use explicit max-height
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-body {
    /* CRITICAL: Remove flex stretching */
    flex: none !important;
    
    /* Explicit height constraint */
    max-height: 70vh !important;    /* Maximum 60% of viewport */
    height: auto !important;
    min-height: auto !important;
    
    /* Keep column layout */
    display: flex !important;
    flex-direction: column !important;
    
    /* Overflow handling */
    overflow: hidden !important;
    
    /* Visual */
    background: var(--mwai-backgroundPrimaryColor, var(--mwai-backgroundSecondaryColor)) !important;
    border-radius: 0 !important;
  }
  
  /* ============================================
     FIX 5: CONVERSATION AREA (CRITICAL FIX)
     ============================================
     Problem: flex: 1 causes conversation to stretch
     Solution: Use max-height based on visible content
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-body .mwai-conversation {
    /* CRITICAL: Remove flex stretching */
    flex: none !important;
    
    /* Constrain height to actual content, but allow scrolling */
    max-height: 50vh !important;    /* Maximum 50% of viewport */
    height: auto !important;
    min-height: 100px !important;   /* Minimum to show at least some messages */
    
    /* Enable scrolling when content exceeds max-height */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    
    /* Padding for breathing room */
    padding: 12px !important;
  }
  
  /* ============================================
     FIX 6: INPUT AREA (KEYBOARD VISIBILITY)
     ============================================
     Problem: Input needs to stay visible when keyboard opens
     Solution: Sticky positioning at bottom of chatbot
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-body .mwai-input {
    /* CRITICAL: Sticky position follows keyboard */
    position: sticky !important;
    bottom: 0 !important;
    
    /* No flex stretching */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    
    /* Z-index above conversation */
    z-index: 100 !important;
    
    /* Visual separation */
    background: var(--mwai-backgroundPrimaryColor) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
    
    /* Padding */
    padding: 12px !important;
    
    /* Safe area for notched devices */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
  }
  
  /* ============================================
     FIX 7: INPUT FIELD SIZING
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-input .mwai-input-text {
    /* Minimum touch target for iOS */
    min-height: 44px !important;
  }
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-input .mwai-input-text textarea {
    /* Ensure textarea is properly sized */
    min-height: 44px !important;
    max-height: 120px !important;  /* Prevent textarea from growing too large */
  }
  
  /* ============================================
     FIX 8: FOOTER (if present)
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-body .mwai-footer {
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  /* ============================================
     FIX 9: FOCUS STATE - KEYBOARD HANDLING
     ============================================
     Ensures input scrolls into view when keyboard opens
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-input textarea:focus,
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-input input:focus {
    /* Browser will scroll this into view */
    scroll-margin-bottom: 10px !important;
  }
  
  /* ============================================
     FIX 10: PREVENT LAYOUT SHIFTS
     ============================================ */
  
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-body {
    /* Disable transitions during keyboard events */
    transition: none !important;
  }
  
}

/* ============================================
   DEBUGGING HELPER (OPTIONAL - REMOVE IN PRODUCTION)
   ============================================
   Uncomment to visualize container boundaries
   ============================================
   
@media (max-width: 760px) {
  .mwai-timeless-theme.mwai-window.mwai-open {
    outline: 3px solid red !important;
  }
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-body {
    outline: 3px solid blue !important;
  }
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-conversation {
    outline: 3px solid green !important;
  }
  .mwai-timeless-theme.mwai-window.mwai-open .mwai-input {
    outline: 3px solid orange !important;
  }
}
   ============================================ */
   
   
/**
 * WrickX Chatbot Logo Styling
 * Positions logo to the left of the chatbot name
 */
.wrickx-chatbot-logo {
    display: inline-block;
    height: 24px;
    width: auto;
    margin-right: 12px;
    vertical-align: middle;
    object-fit: contain;
}

/* Timeless theme specific adjustments */
.mwai-timeless-theme .mwai-header .mwai-name .wrickx-chatbot-logo {
    height: 26px;
    margin-right: 14px;
}

/* Ensure proper alignment with text */
.mwai-header .mwai-name {
    display: flex;
    align-items: center;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .wrickx-chatbot-logo {
        height: 22px;
        margin-right: 10px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .wrickx-chatbot-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}



/**
 * XootiX Phone OTP Integration Styles
 * 
 * Ensures XootiX forms display correctly within custom MyAuth tabs
 * Add this to: wp-content/themes/astra-child/style.css (or separate file)
 */

/* ============================================
   XOOTIX LOGIN FORM STYLES
   ============================================ */

/* XootiX login with OTP form container */
.myauth-tab-pane .xoo-ml-lwo-form-cont {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* XootiX phone input field */
.myauth-tab-pane .xoo-ml-phone-input-cont {
    margin-bottom: 20px;
}

.myauth-tab-pane .xoo-ml-phone-input-cont input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Country code select */
.myauth-tab-pane .xoo-ml-phone-cc {
    margin-bottom: 10px;
}

.myauth-tab-pane select.xoo-ml-phone-cc-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Send OTP button */
.myauth-tab-pane .xoo-ml-login-otp-btn,
.myauth-tab-pane .xoo-ml-inline-verify {
    display: inline-block;
    padding: 12px 24px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s;
}

.myauth-tab-pane .xoo-ml-login-otp-btn:hover,
.myauth-tab-pane .xoo-ml-inline-verify:hover {
    background-color: #005177;
}

/* OTP input fields */
.myauth-tab-pane .xoo-ml-otp-form {
    margin-top: 20px;
}

.myauth-tab-pane .xoo-ml-otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    margin: 0 5px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.myauth-tab-pane .xoo-ml-otp-input:focus {
    border-color: #0073aa;
    outline: none;
}

/* OTP form submit button */
.myauth-tab-pane .xoo-ml-otp-submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

.myauth-tab-pane .xoo-ml-otp-submit-btn:hover {
    background-color: #218838;
}

/* Resend OTP link */
.myauth-tab-pane .xoo-ml-otp-resend-link {
    display: inline-block;
    margin-top: 10px;
    color: #0073aa;
    text-decoration: none;
    font-size: 14px;
}

.myauth-tab-pane .xoo-ml-otp-resend-link:hover {
    text-decoration: underline;
}

/* XootiX notices */
.myauth-tab-pane .xoo-ml-notice {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.myauth-tab-pane .xoo-ml-notice.xoo-ml-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.myauth-tab-pane .xoo-ml-notice.xoo-ml-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Loading state */
.myauth-tab-pane .xoo-ml-processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Hide XootiX's default back button if present */
.myauth-tab-pane .xoo-ml-low-back {
    display: none;
}

/* Inline OTP container */
.myauth-tab-pane .xoo-ml-inline-otp-cont {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ============================================
   XOOTIX REGISTRATION FORM STYLES
   ============================================ */

/* Phone input in WooCommerce registration form */
.myauth-tab-pane .woocommerce-form-register .xoo-ml-phone-input-cont {
    margin-bottom: 20px;
}

/* Ensure WooCommerce form elements match custom styling */
.myauth-tab-pane .woocommerce-form-register input[type="text"],
.myauth-tab-pane .woocommerce-form-register input[type="email"],
.myauth-tab-pane .woocommerce-form-register input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.myauth-tab-pane .woocommerce-form-register label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.myauth-tab-pane .woocommerce-form-register .woocommerce-Button {
    width: 100%;
    padding: 12px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.myauth-tab-pane .woocommerce-form-register .woocommerce-Button:hover {
    background-color: #005177;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .myauth-tab-pane .xoo-ml-otp-input {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin: 0 3px;
    }
    
    .myauth-tab-pane .xoo-ml-login-otp-btn,
    .myauth-tab-pane .xoo-ml-inline-verify {
        width: 100%;
        margin-top: 10px;
    }
}

/* ============================================
   FIREBASE RECAPTCHA CONTAINER
   ============================================ */

/* Hide Firebase reCAPTCHA (it's invisible anyway) */
.xoo-ml-recaptcha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

/* ============================================
   VERIFICATION SUCCESS STATE
   ============================================ */

.myauth-tab-pane .xoo-ml-verified {
    color: #28a745;
    font-weight: bold;
}

.myauth-tab-pane .xoo-ml-verified .dashicons-yes {
    color: #28a745;
}

/* Disabled phone input after verification */
.myauth-tab-pane input.xoo-ml-disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}


/**
 * CRITICAL FIX: Slider Arrows Appearing Inside Mini Cart
 * Version: 1.0.0
 * Date: 2026-02-14
 * 
 * PROBLEM:
 * Slider navigation arrows (< >) appear inside mini cart off-canvas panel
 * 
 * ROOT CAUSE:
 * - Arrows have z-index: 1000 (globally positioned)
 * - Cart has z-index: 999999
 * - BUT arrows and cart are DOM SIBLINGS, not parent-child
 * - Z-index doesn't work across sibling stacking contexts
 * 
 * SOLUTION:
 * Hide arrows completely when cart is open using multiple CSS selectors
 * 
 * APPEND THIS TO: style.css (at end of file, after line 3089)
 */

/* ============================================================================
   FIX: Hide slider arrows when mini cart is open
   ============================================================================ */

/**
 * Method 1: Using cart active state
 * When cart has .active class, hide all slider arrows on page
 */
.wrickx-cart-sidebar.active ~ * .wrickx-slider-arrow,
.wrickx-cart-sidebar.active ~ * .wrickx-slider-arrow-prev,
.wrickx-cart-sidebar.active ~ * .wrickx-slider-arrow-next {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/**
 * Method 2: Using body class (if your cart adds a class to <body>)
 * Add this class via JavaScript when cart opens
 */
body.wrickx-cart-open .wrickx-slider-arrow,
body.wrickx-cart-open .wrickx-slider-arrow-prev,
body.wrickx-cart-open .wrickx-slider-arrow-next {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/**
 * Method 3: Direct descendant targeting
 * In case cart sidebar is not a direct sibling
 */
body:has(.wrickx-cart-sidebar.active) .wrickx-slider-arrow,
body:has(.wrickx-cart-sidebar.active) .wrickx-slider-arrow-prev,
body:has(.wrickx-cart-sidebar.active) .wrickx-slider-arrow-next {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* ============================================================================
   EXPLANATION OF FIX
   ============================================================================
   
   WHY THREE SELECTORS:
   - Method 1: Works when cart is a sibling in DOM
   - Method 2: Works if cart toggling adds class to body
   - Method 3: Modern browsers support :has() for parent detection
   
   WHY THREE PROPERTIES:
   - opacity: 0         → Visual hiding
   - pointer-events     → Disable click interactions
   - visibility: hidden → Remove from accessibility tree
   
   WHY !important:
   - Overrides any inline styles
   - Ensures fix always applies
   - Production-safe override
   
   TESTING:
   1. Open mini cart on page with slider
   2. ✅ Arrows should completely disappear
   3. Close cart
   4. ✅ Arrows should reappear smoothly
   5. ✅ Slider should still function normally
   
   BROWSER SUPPORT:
   - Method 1 & 2: All browsers (IE11+)
   - Method 3: Modern browsers only (Chrome 105+, Safari 15.4+)
   - Fallback: Methods 1 & 2 work on older browsers
   
   ============================================================================ */
   
   
   
   /**
 * MINIMAL COOKIEYES FIX - GUARANTEED SAFE
 * 
 * This file ONLY fixes CookieYes banner appearing above cart.
 * Nothing else. No other changes. No risk.
 * 
 * Add this to your style.css AFTER all other styles.
 */

/* Lower CookieYes z-index below cart */
#cookie-law-info-bar,
#cookie-law-info-again,
.cli-bar-container {
    z-index: 50000 !important;
}

.cli-modal {
    z-index: 99998 !important;
}

.cli-modal.cli-blowup {
    z-index: 99999 !important;
}

/* Hide CookieYes when cart is open */
body:has(.wrickx-cart-sidebar.active) #cookie-law-info-bar,
body:has(.wrickx-cart-sidebar.active) #cookie-law-info-again,
body:has(.wrickx-cart-sidebar.active) .cli-bar-container {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
    body.wrickx-cart-open #cookie-law-info-bar,
    body.wrickx-cart-open #cookie-law-info-again {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* ============================================================================
   Z-INDEX HIERARCHY FIX - MINIMAL PRODUCTION SOLUTION
   ============================================================================ */

/* 1. LOWER EVERYTHING BELOW CART */
.wrickx-slider-arrow,
.wrickx-nav-btn {
    z-index: 10;
}

.mwai-window,
.mwai-timeless-theme.mwai-window.mwai-open {
    z-index: 90000 !important;
}

#cookie-law-info-bar,
#cookie-law-info-again,
.cli-modal.cli-blowup {
    z-index: 80000 !important;
}


/* 3. FIX SCROLL GAP - ROOT CAUSE: iOS OVERSCROLL */
@media screen and (max-width: 768px) {
    .wrickx-cart-sidebar.active .cart-sidebar-content {
        overscroll-behavior-y: contain !important;
    }
}

/* That's it. 30 lines. Zero risk. */



/* ElementsKit Mobile Offcanvas Menu - CORRECTED FIX */
@media screen and (max-width: 1024px) {
    /* Lock body when menu is open */
    body.ekit-menu-open,
    body[class*="ekit-"] {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Fix menu container height */
    .elementskit-menu-offcanvas-elements.active,
    .elementskit-menu-container.active {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;  /* ← KEY FIX: Use bottom instead of height */
        left: 0 !important;
        right: auto !important;
        height: auto !important;  /* ← Let top/bottom define height */
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        z-index: 999999 !important;
    }
    
    .elementskit-menu-overlay.active {
        z-index: 999998 !important;
    }
}







/* ===================================
   FIX: Header & Footer White Text (My Account pages only)
   Scoped strictly to .woocommerce-account body class.
   body.logged-in intentionally removed — it was too broad and
   caused white-on-white text on My Account page's light header.
   The correct white-text rules for My Account are handled by
   css/wrickx-myaccount-custom.css (loaded conditionally via PHP).
   =================================== */




/* ============================================================================
   IMPLEMENTATION NOTES
   ============================================================================
   
   PLACEMENT:
   - Add this entire block to the END of style.css (after line 3323)
   - Do NOT place in middle of file (source order matters if same specificity)
   
   VERIFICATION:
   1. Browser DevTools → Inspect .wrickx-related-inner
   2. Check "Computed" tab
   3. Non-product pages: max-width should be 100%
   4. Product pages: max-width should be 1280px
   
   ROLLBACK:
   - Simply delete this entire CSS block (lines 3324-3396)
   - Slider will revert to original 1280px width on all pages
   
   MAINTENANCE:
   - To change product page width: Edit line 77 max-width value
   - To change non-product width: Edit line 61 max-width value
   - To adjust arrow spacing: Edit lines 67, 95, 107 padding values
   
   EDGE CASES:
   - Elementor: No conflicts (slider generates own section wrapper)
   - Astra boxed mode: Unaffected (slider outside .ast-container)
   - RTL languages: Automatic browser flip, no changes needed
   - Plugin updates: CSS-only, unaffected by PHP changes
   
   TESTED ON:
   - WordPress 6.x
   - WooCommerce 8.x+
   - Astra Child Theme
   - All modern browsers + IE9+
   
   ============================================================================ */

/* End of conditional slider width control */

/* ============================================================================
   BUY NOW MODAL - MOBILE SCROLL FIX (Minicart Pattern)
   ============================================================================
   BASED ON: Minicart working implementation (css/wrickx-premium-minicart.css)
   PURPOSE: Fix scroll gap that appears on mobile when modal is open
   PATTERN: Desktop locks body, mobile keeps it scrollable
   ============================================================================ */

/* Desktop: Lock body scrolling when modal is open */
@media (min-width: 769px) {
    body.wrickx-modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Mobile: Keep body scrollable (prevents scroll gap) */
@media (max-width: 768px) {
    body.wrickx-modal-open {
        overflow: auto !important;
        position: relative !important;
    }
    
    /* Ensure modal content scrolls smoothly */
    .wrickx-modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}




/* ============================================================================
   MOBILE PRODUCT SLIDER FIX
   
   Purpose: Fix mobile slider to use full width with properly centered arrows
   
   Issues Fixed:
   1. Slider uses full screen width (no side gaps)
   2. Navigation arrows vertically centered on product IMAGE (not card)
   3. Arrows positioned exactly on left/right screen edges
   4. Desktop layout remains completely unchanged
   
   Author: WRICKX Development Team
   Date: 2026-02-16
   Version: 1.0
   
   IMPLEMENTATION:
   Copy this entire file's contents and paste at the END of:
   /wp-content/themes/astra-child/style.css
   
   ============================================================================ */

/* Mobile Only - Tablets and Below (up to 767px) */
@media (max-width: 767px) {
    
    /* ========================================
       FIX 1: REMOVE CONTAINER PADDING
       ======================================== */
    
    /* Remove side padding from section inner container */
    .wrickx-related-section .wrickx-related-inner {
        padding: 0 !important;
        /* Keep max-width for potential future use, but remove horizontal padding */
    }
    
    /* Remove arrow space padding from wrapper */
    .wrickx-product-slider-wrapper {
        padding: 0 !important;
        /* Arrows will now be positioned absolutely relative to edges */
    }
    
    /* ========================================
       FIX 2: ARROW VERTICAL CENTERING
       
       Strategy: Position arrows at middle of IMAGE area
       
       Calculation:
       - Product card shows 2 cards at 50% width
       - Image wrapper uses padding-top: 100% (square)
       - So image height ≈ 50% of viewport width
       - Product info section is below image
       - We need arrows centered on image ONLY
       ======================================== */
    
    .wrickx-slider-arrow {
        /* Calculate position based on image area only */
        /* Image takes up ~50vw (since cards are 50% width) */
        /* Center point of image = 25vw from top */
        top: 25vw !important;
        
        /* Remove the translateY since we're positioning absolutely */
        transform: none !important;
        
        /* Adjust to compensate for button height (40px / 2 = 20px) */
        margin-top: -20px !important;
    }
    
    /* When hovering, maintain the centering */
    .wrickx-slider-arrow:hover {
        transform: scale(1.1) !important;
        /* Don't use translateY in hover state */
    }
    
    .wrickx-slider-arrow:active {
        transform: scale(0.95) !important;
    }
    
    /* ========================================
       FIX 3: ARROW HORIZONTAL POSITIONING
       
       Position arrows exactly on screen edges
       ======================================== */
    
    .wrickx-slider-arrow-prev {
        left: 8px !important;  /* 8px from screen edge for finger-friendly spacing */
    }
    
    .wrickx-slider-arrow-next {
        right: 8px !important;  /* 8px from screen edge */
    }
    
    /* ========================================
       FIX 4: SLIDER EDGE ALIGNMENT
       
       Ensure cards align to screen edges
       ======================================== */
    
    .wrickx-product-slider {
        /* Remove any inherited padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure cards start from edge */
    .wrickx-product-card:first-child {
        margin-left: 0 !important;
    }
}

/* Extra Small Mobile - Phones in Portrait (up to 479px) */
@media (max-width: 479px) {
    
    /* Fine-tune arrow positioning for smaller screens */
    .wrickx-slider-arrow {
        /* Recalculate for smaller viewport */
        /* On very small screens, image is still ~50vw */
        /* Center = 25vw, minus half button height */
        top: calc(25vw - 18px) !important;  /* Adjusted for 36px button height */
        margin-top: 0 !important;
    }
    
    /* Move arrows slightly more inward on very small screens for better UX */
    .wrickx-slider-arrow-prev {
        left: 5px !important;
    }
    
    .wrickx-slider-arrow-next {
        right: 5px !important;
    }
    
    /* Slightly smaller buttons on very small screens */
    .wrickx-slider-arrow {
        width: 36px !important;
        height: 36px !important;
    }
    
    .wrickx-slider-arrow svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ============================================================================
   END MOBILE PRODUCT SLIDER FIX
   ============================================================================ */
   
   

/* ===================================================
   HEADER FIX – My Account Only (Clean + Controlled)
   =================================================== */

/* Header background */
body.woocommerce-account .ekit-template-content-header {
    background: #000 !important;
}

/* Primary navigation links */
body.woocommerce-account 
.ekit-template-content-header 
.elementskit-navbar-nav > li > a,
body.woocommerce-account 
.ekit-template-content-header 
.ekit-menu-nav-link {
    color: #fff !important;
}

/* Dropdown arrows */
body.woocommerce-account 
.ekit-template-content-header 
.elementskit-submenu-indicator,
body.woocommerce-account 
.ekit-template-content-header 
.elementskit-submenu-indicator i {
    color: #fff !important;
}

/* Submenu background */
body.woocommerce-account 
.ekit-template-content-header 
.elementskit-submenu-panel {
    background: #000 !important;
}

/* Submenu links */
body.woocommerce-account 
.ekit-template-content-header 
.elementskit-submenu-panel a {
    color: #fff !important;
}

/* Search icon */
body.woocommerce-account 
.ekit-template-content-header 
.dgwt-wcas-search-wrap svg,
body.woocommerce-account 
.ekit-template-content-header 
.dgwt-wcas-search-wrap svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Wishlist icon */
body.woocommerce-account 
.ekit-template-content-header 
a[href*="wishlist"] svg,
body.woocommerce-account 
.ekit-template-content-header 
a[href*="wishlist"] svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Mini cart icon */
body.woocommerce-account 
.ekit-template-content-header 
.wrickx-cart-icon svg,
body.woocommerce-account 
.ekit-template-content-header 
.wrickx-cart-icon svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Mobile menu background */
@media (max-width: 1024px) {

    body.woocommerce-account 
    .ekit-template-content-header 
    .elementskit-menu-offcanvas-elements {
        background: #000 !important;
    }

    body.woocommerce-account 
    .ekit-template-content-header 
    .elementskit-mobile-builder-content a {
        color: #fff !important;
    }
}








/* ============================================
   FIX: Multiple File Upload — Required Star Inline with Label
   Scope: Only targets file-upload type product add-on fields
   ============================================ */

/* Make the field's label wrapper a flex row so label + star sit inline */
.woocommerce div.product form.cart .wapf-field-wrap[data-type="file"] .wapf-label-wrap,
.woocommerce div.product form.cart .wapf-field[data-type="file"] .wapf-label,
.woocommerce div.product form.cart .tm-extra-product-options .themovingparts label,
.woocommerce div.product form.cart li.product-addon.product-addon-multiple-file-uploads > label,
.woocommerce div.product form.cart .wc-pao-addon-multiple-file-uploads > label {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px;
}

/* Ensure the abbr/span asterisk stays inline and not pushed below */
.woocommerce div.product form.cart .wc-pao-addon-multiple-file-uploads > label .required,
.woocommerce div.product form.cart .wc-pao-addon-multiple-file-uploads > label abbr,
.woocommerce div.product form.cart li.product-addon.product-addon-multiple-file-uploads > label .required,
.woocommerce div.product form.cart li.product-addon.product-addon-multiple-file-uploads > label abbr {
    display: inline !important;
    position: static !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 0 0 2px !important;
    vertical-align: middle !important;
    line-height: inherit !important;
}



/* =============================================
   RATING FIX: Partial star + alignment
   ============================================= */

/* Remove global orange so it doesn't bleed into half star base */
.wrickx-star {
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.wrickx-star-full {
    color: #ffa500;
}

.wrickx-star-empty {
    color: #e0e0e0;
}

/* Half star: base MUST be grey; orange overlay via ::before */
.wrickx-star-half {
    color: #e0e0e0 !important;
    position: relative;
}

.wrickx-star-half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    color: #ffa500;
    width: var(--star-fill, 50%);
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

/* Alignment: outer wrapper */
/* Alignment: outer wrapper */
.wrickx-title-rating {
    align-items: center;
    gap: 8px;
    line-height: 1;
}

/* Stars row */
.wrickx-title-rating-stars {
    display: flex !important;
    align-items: center !important;
    gap: 2px;
    line-height: 1;
}

/* Meta (number + count) row */
.wrickx-title-rating-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    line-height: 1;
    font-size: 18px;
    color: #666;
}

.wrickx-title-rating-value {
    line-height: 1;
    font-weight: 600;
    color: #111;
    font-size: 18px;
}


/* Mobile overrides */
@media (max-width: 768px) {
    .wrickx-mobile-rating {
        display: flex !important;
        align-items: center !important;
        gap: 6px;
        line-height: 1;
    }

    .wrickx-mobile-rating .wrickx-title-rating-stars {
        display: flex !important;
        align-items: center !important;
    }

    .wrickx-mobile-rating .wrickx-title-rating-meta {
        display: flex !important;
        align-items: center !important;
        line-height: 1;
    }

    .wrickx-mobile-rating .wrickx-star {
        font-size: 20px;
        display: inline-flex;
        align-items: center;
    }
}



/* =============================================
   REMOVE DUPLICATE RATING BELOW PRODUCT TITLE
   ============================================= */

/* Hide WooCommerce default rating inside summary */
.single-product .summary .woocommerce-product-rating {
    display: none !important;
}

/* Hide any wrickx rating accidentally rendered in summary */
.single-product .summary .wrickx-title-rating {
    display: none !important;
}



/* =============================================================================
   FIX: "Inclusive of all taxes" overlapping PAY NOW button in minicart
   
   ROOT CAUSE (confirmed via DevTools):
   .checkout-tax-note sits inside .cart-checkout-actions directly after
   .btn-pay-now with no margin-top. The parent .cart-checkout-actions has
   a constrained height or overflow:hidden, causing .checkout-tax-note to
   render on top of the button rather than below it.
   
   EXACT classes from DevTools:
     Parent:   .cart-checkout-actions   (wraps both button and tax note)
     Button:   .btn-pay-now
     Tax note: .checkout-tax-note
   
   Scoped entirely to .wrickx-cart-sidebar.
   No layout changes. No mobile impact.
   ============================================================================= */

/* Push the tax note below the PAY NOW button */
.wrickx-cart-sidebar .checkout-tax-note {
    display: block;
    position: static !important; /* neutralises any accidental absolute/relative offset */
    margin-top: 30px;
    padding-top: 20px;
    clear: both;
}

/* Give the actions wrapper enough bottom breathing room for the tax note */
.wrickx-cart-sidebar .cart-checkout-actions {
    padding-bottom: 8px;
}














/* ============================================================
   MY ACCOUNT — Force white nav + icons on ALL My Account pages
   Targets both Astra native header AND ElementsKit header
   ============================================================ */

/* --- Astra native header nav links --- */
body.woocommerce-account #masthead .main-header-menu a,
body.woocommerce-account #masthead .main-navigation a,
body.woocommerce-account #masthead .ast-masthead-custom-menu-items a,
body.woocommerce-account .site-header .main-header-menu a,
body.woocommerce-account .site-header .main-navigation a,
body.woocommerce-account .site-header a,
body.woocommerce-account .ast-primary-header-bar a {
    color: #ffffff !important;
}

/* --- Astra header icons (cart, wishlist, search) --- */
body.woocommerce-account #masthead svg,
body.woocommerce-account #masthead svg path,
body.woocommerce-account #masthead .ast-icon,
body.woocommerce-account .site-header svg,
body.woocommerce-account .site-header svg path,
body.woocommerce-account .site-header .ast-icon,
body.woocommerce-account .ast-primary-header-bar svg,
body.woocommerce-account .ast-primary-header-bar svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: none !important;
}

/* --- Dropdown arrows --- */
body.woocommerce-account #masthead .ast-menu-toggle,
body.woocommerce-account .site-header .ast-menu-toggle,
body.woocommerce-account .site-header .sub-menu-toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* --- ElementsKit header nav links (if active) --- */
body.woocommerce-account .ekit-template-content-header .elementskit-navbar-nav > li > a,
body.woocommerce-account .ekit-template-content-header a {
    color: #ffffff !important;
}

/* --- ElementsKit SVG icons --- */
body.woocommerce-account .ekit-template-content-header svg,
body.woocommerce-account .ekit-template-content-header svg path {
    fill: #ffffff !important;
}

/* --- Hover state --- */
body.woocommerce-account #masthead .main-header-menu a:hover,
body.woocommerce-account .site-header a:hover,
body.woocommerce-account .ekit-template-content-header a:hover {
    opacity: 0.75 !important;
    color: #ffffff !important;
}

/* --- Cart count badge stays red --- */
body.woocommerce-account .ast-cart-menu-wrap .count {
    background: #e74c3c !important;
    color: #ffffff !important;
}