/* ============================================================
   TABLE OF CONTENTS
   1.  Design Tokens
   2.  Base Product Layout
   3.  Product Gallery Image
   4.  Tabs — Navigation
   5.  Tabs — Panel Card
   6.  Product Title & Price
   7.  Stock Status Pill
   8.  Quantity + Add to Cart
   9.  Payment Method Overrides
   10. Reviews — Header & Empty State
   11. Reviews — List / Card Layout
   12. Star Rating (Font Awesome, filled-mask technique)
   13. Reviews — Comment Form
   14. Accessibility — Focus States
   15. Responsive — Mobile (≤768px)
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    --fa-font-family: "Font Awesome 7 Free";

    /* Brand */
    --fexhda-blue: #85A2BF;
    --fexhda-blue-dark: #324256;
    --fexhda-pink: #DA70D6;
    --fexhda-pink-hover: #C85CC4;
    --fexhda-pink-soft: rgba(218, 112, 214, 0.1);

    /* Surface & Text */
    --fexhda-bg: #F8FAFC;
    --surface: #FFFFFF;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --border: #E2E8F0;

    /* Status */
    --success: #4CAF50;
    --success-bg: rgba(76, 175, 80, 0.1);
    --danger: #E53935;
    --danger-bg: rgba(229, 57, 53, 0.1);
    --star-empty: #B0B0B0;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 100px;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.06);
    --shadow-cta: 0 6px 16px rgba(218, 112, 214, 0.35);
    --shadow-cta-hover: 0 8px 20px rgba(218, 112, 214, 0.45);

    --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   2. BASE PRODUCT LAYOUT
   ============================================================ */
.single-product div.product {
    padding-top: 24px;
}

.single-product div.product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    float: none !important;
    margin: 40px 0 0 0 !important;
    padding: 0 !important;
    order: unset !important;
}


/* ============================================================
   3. PRODUCT GALLERY IMAGE
   ============================================================ */
.single-product div.product img.wp-post-image {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}


/* ============================================================
   4. TABS — NAVIGATION (segmented pill control)
   ============================================================ */
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 5px !important;
    margin: 0 0 10px 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
    list-style-type: none !important;
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after,
.single-product .woocommerce-tabs ul.tabs li a::before,
.single-product .woocommerce-tabs ul.tabs li a::after {
    display: none !important;
    content: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    display: block !important;
    flex: 0 0 auto !important;
    list-style: none !important;
    list-style-type: none !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    transition: var(--transition) !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 8px 18px !important;
    border-radius: var(--radius-lg) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0 !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    outline: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.single-product .woocommerce-tabs ul.tabs li.active {
    background: var(--fexhda-blue) !important;
    box-shadow: var(--shadow-sm) !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--surface) !important;
    font-weight: 700 !important;
}

.single-product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
    color: var(--text-main) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
}


/* ============================================================
   5. TABS — PANEL CARD
   ============================================================ */
.single-product .woocommerce-tabs .panel {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 20px 0 !important;
    padding: 32px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}


/* ============================================================
   6. PRODUCT TITLE & PRICE
   ============================================================ */
.single-product div.product .product_title {
    display: block !important;
    margin: 0 0 8px 0 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--text-main) !important;
}

.single-product div.product p.price {
    display: block !important;
    margin: 0 0 18px 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--fexhda-pink) !important;
}

.single-product div.product p.price del {
    margin-right: 8px !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
}


/* ============================================================
   7. STOCK STATUS PILL
   ============================================================ */
.single-product div.product p.stock {
    display: inline-block !important;
    margin: 0 0 14px 0 !important;
    padding: 4px 14px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.single-product div.product p.in-stock {
    color: var(--success) !important;
    background: var(--success-bg) !important;
}

.single-product div.product p.out-of-stock {
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
}


/* ============================================================
   8. QUANTITY + ADD TO CART
   ============================================================ */
.single-product div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 440px !important;
    margin: 0 0 16px 0 !important;
}

.single-product div.product .quantity input.qty {
    width: 60px !important;
    height: 50px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.single-product div.product .quantity input.qty:focus {
    border-color: var(--fexhda-blue) !important;
    box-shadow: 0 0 0 3px rgba(133, 162, 191, 0.25) !important;
}

.single-product div.product .quantity input.qty::-webkit-inner-spin-button,
.single-product div.product .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

.single-product div.product button.single_add_to_cart_button {
    display: inline-flex !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    border: none !important;
    /* Fixed: Uses 25px (50px / 2) to fix the lag when morphing to 20px on hover */
    border-radius: calc(50px / 2) !important; 
    background-color: var(--fexhda-pink) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    will-change: transform, border-radius;
}

.single-product div.product button.single_add_to_cart_button::before {
    content: "\f290" !important;
    font-family: var(--fa-font-family) !important;
    font-weight: 900 !important;
    font-size: 0.95rem !important;
}

.single-product div.product button.single_add_to_cart_button:hover {
    border-radius: var(--radius-lg) !important;
    background-color: var(--fexhda-blue-dark) !important;
    transform: scale(1.045) !important;
}

.single-product div.product button.single_add_to_cart_button:active {
    transform: scale(0.98) !important;
}

/* Specific selector to override the existing theme style */
.single-product div.product button.single_add_to_cart_button:focus,
.single-product div.product button.single_add_to_cart_button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   9. PAYMENT METHOD OVERRIDES
   Hide PayPal — checkout handles payment
   ============================================================ */
.single-product .ppcp-button-apm-wrapper,
.single-product .ppc-button-wrapper,
.single-product .wc-paypal {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════
   REVIEWS — default WooCommerce markup, restyled.
   This is the ONLY reviews block. No duplicate, no JS swap.
   ════════════════════════════════════════════════════════════ */

/* ============================================================
   10. REVIEWS — HEADER & EMPTY STATE
   ============================================================ */
.single-product #reviews .woocommerce-Reviews-title {
    margin: 0 0 16px 0 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

.single-product #reviews .woocommerce-noreviews,
.single-product #reviews p.woocommerce-noreviews {
    margin: 0 0 20px 0 !important;
    padding: 12px 18px !important;
    background: var(--fexhda-bg) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    text-align: center !important;
    color: var(--text-muted) !important;
}

.single-product #reviews .woocommerce-noreviews::before,
.single-product #reviews p.woocommerce-noreviews::before {
    display: none !important;
    content: none !important;
}


/* ============================================================
   11. REVIEWS — LIST / CARD LAYOUT
   ============================================================ */
.single-product #reviews #comments ol.commentlist {
    list-style: none !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
}

.single-product #reviews #comments ol.commentlist li.review {
    margin: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--border) !important;
}

.single-product #reviews #comments ol.commentlist li.review:last-child {
    border-bottom: none !important;
}

.single-product #reviews #comments .comment_container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

.single-product #reviews #comments .avatar,
.single-product #reviews #comments img.avatar {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    position: static !important;
    float: none !important;
}

.single-product #reviews #comments .comment-text {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.single-product #reviews .woocommerce-review-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.single-product #reviews .woocommerce-review__author {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--text-main) !important;
}

.single-product #reviews .woocommerce-review__published-date {
    display: block !important;
    width: 100% !important;
    margin-top: 2px !important;
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
}

.single-product #reviews .description {
    margin-top: 10px !important;
}

.single-product #reviews .description p {
    margin: 0 0 8px 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: var(--text-main) !important;
}


/* ============================================================
   12. STAR RATING
   Font Awesome, filled-mask technique — used for both the
   product summary rating and the reviews list.
   ============================================================ */
.single-product .star-rating,
.single-product .woocommerce-product-rating .star-rating {
    position: relative !important;
    display: inline-block !important;
    width: 6.4em !important;
    height: 1.7em !important;
    margin: 0 !important;
    vertical-align: middle !important;
    font-family: var(--fa-font-family) !important;
    font-weight: 900 !important;
    float: none !important;
}

.woocommerce-product-rating {
    margin: 0 !important;
    line-height: 1 !important;
}

.woocommerce-review-link {
    display: inline-block !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
}

/* Empty background stars */
.single-product .star-rating::before,
.single-product .woocommerce-product-rating .star-rating::before {
    content: "\f005\f005\f005\f005\f005" !important;
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--fa-font-family) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2em !important;
    color: var(--star-empty) !important;
}

/* Filled mask span */
.single-product .star-rating span {
    position: relative !important;
    display: block !important;
    height: 100% !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
}

/* Filled pink stars */
.single-product .star-rating span::before,
.single-product .woocommerce-product-rating .star-rating span::before {
    content: "\f005\f005\f005\f005\f005" !important;
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--fa-font-family) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2em !important;
    text-indent: 0 !important;
    color: var(--fexhda-pink) !important;
}


/* ============================================================
   13. REVIEWS — COMMENT FORM
   ============================================================ */
.single-product #reviews #review_form_wrapper #respond {
    padding: 0 !important;
    background: none !important;
}

.single-product #reviews #reply-title {
    margin: 0 0 6px 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

.single-product #reviews .comment-notes,
.single-product #reviews .comment-form-rating,
.single-product #reviews .comment-form-comment {
    margin: 0 0 16px 0 !important;
}

.single-product #reviews .comment-notes {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
}

/* Star selector */
.single-product #reviews p.stars {
    margin-left: 4px !important;
    padding-left: 4px !important;
    overflow: visible !important;
}

.single-product #reviews p.stars a {
    display: inline-block !important;
    position: relative !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 0 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.single-product #reviews p.stars a::before {
    content: "\f005" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    font-family: var(--fa-font-family) !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--star-empty) !important;
    transition: color 0.15s ease !important;
}

.single-product #reviews p.stars:hover a::before {
    color: var(--fexhda-pink) !important;
}

.single-product #reviews p.stars a:hover ~ a::before {
    color: var(--star-empty) !important;
}

.single-product #reviews p.stars.selected a.active ~ a::before {
    color: var(--star-empty) !important;
}

.single-product #reviews p.stars.selected a::before {
    color: var(--fexhda-pink) !important;
}

/* Text inputs */
.single-product #reviews input[type="text"],
.single-product #reviews input[type="email"],
.single-product #reviews textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.88rem !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.single-product #reviews input:focus,
.single-product #reviews textarea:focus {
    border-color: var(--fexhda-blue) !important;
    box-shadow: 0 0 0 3px rgba(133, 162, 191, 0.2) !important;
}

.single-product #reviews textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Name / Email row */
.single-product #reviews .comment-form-author,
.single-product #reviews .comment-form-email {
    display: inline-block !important;
    width: 48% !important;
    margin: 0 0 16px 0 !important;
    vertical-align: top !important;
}

.single-product #reviews .comment-form-author {
    margin-right: 4% !important;
}

/* Save info checkbox */
p.comment-form-cookies-consent {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
}

p.comment-form-cookies-consent input#wp-comment-cookies-consent {
    flex-shrink: 0 !important;
    margin: 0 !important;
    vertical-align: unset !important;
}

.single-product #reviews label,
p.comment-form-cookies-consent label {
    display: inline !important;
    margin: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
    vertical-align: unset !important;
}

/* Submit button */
.single-product #reviews input#submit,
.single-product #reviews .form-submit input {
    width: auto !important;
    padding: 11px 28px !important;
    background: var(--fexhda-blue) !important;
    color: #FFFFFF !important;
    border: none !important;
    /* Fixed: Set fixed pixel radius so hover transitions calculate smoothly */
    border-radius: 20px !important; 
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.single-product #reviews input#submit:hover {
    background: #7995b0 !important;
    transform: scale(1.045) !important;
}


/* ============================================================
   14. ACCESSIBILITY — FOCUS STATES
   ============================================================ */
.single-product .woocommerce-tabs ul.tabs li a:focus-visible,
.single-product div.product button.single_add_to_cart_button:focus-visible,
.single-product #reviews input#submit:focus-visible,
.single-product #reviews .form-submit input:focus-visible,
.single-product #reviews p.stars a:focus-visible {
    outline: 2px solid var(--fexhda-blue) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .single-product * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --------DESKTOP POPUP HEADER FOR ADD TO CART WHEN PAGE IS SCROLLED DOWN-------- */
.storefront-sticky-add-to-cart {
    background-color: #fff !important;
}

.storefront-sticky-add-to-cart a {
    border-radius: 25px;
	background-color: var(--fexhda-pink) !important;
}

.storefront-sticky-add-to-cart a:hover {
	border-radius: var(--radius-md);
	background-color: var(--fexhda-blue-dark) !important;
}


/* ============================================================
   15. RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    .single-product div.product {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 16px 0 0 !important;
    }

    .single-product div.product .woocommerce-product-gallery {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
    }

    .single-product div.product .summary {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .single-product div.product .woocommerce-tabs {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .single-product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap !important;
    }

    .single-product .woosb-products .woosb-product {
        flex-wrap: wrap !important;
    }

    .single-product #reviews .comment-form-author,
    .single-product #reviews .comment-form-email {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .single-product #reviews input#submit,
    .single-product #reviews .form-submit input {
        width: 100% !important;
    }

    .single-product #reviews .comment-text .star-rating {
        display: block !important;
        margin: 6px 0 8px 0 !important;
        float: none !important;
    }
}