/* Centering and layout block isolation */
.flip-showcase-center-wrapper {
    display: block;
    width: 100%;
    margin: 40px auto;
    padding-bottom: 40px;
    clear: both;
    box-sizing: border-box;
}

/* Base slider container spacing */
.flip-showcase-slider-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    
    /* 
     * ==========================================
     * ADJUST LANDING PAGE CONTAINER HEIGHT (DESKTOP)
     * ==========================================
     * Force a minimum height on your home page slider to prevent footer overlaps.
     * Configured for a 528px card height (528 x 1.5 = 792px height + padding).
     */
    min-height: 820px !important; 
}

.flip-showcase-single-product-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    min-height: 560px; 
}

/* Responsive slide dimensions */
.flip-showcase-slider-container .swiper-slide {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;

    /* 
     * ==========================================
     * ADJUST LANDING PAGE CARD SIZE (DESKTOP)
     * ==========================================
     * Change this max-width value to adjust the card size on your home page.
     * Increased to 528px (exactly 10% larger than 480px).
     */
    max-width: 528px !important; 
}

.flip-showcase-single-product-container {
    padding: 0 15px 30px 15px;
    box-sizing: border-box;
    max-width: 340px; 
}

/* Force standard WooCommerce product images to scale natively inside the theme column */
.woocommerce div.product div.images .flip-showcase-single-product-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Mobile screen size scaling overrides */
@media (max-width: 768px) {
    .flip-showcase-center-wrapper {
        margin: 20px auto;
        padding-bottom: 60px;
    }

    .flip-showcase-slider-container,
    .flip-showcase-single-product-container {
        /* 
         * ==========================================
         * ADJUST CONTAINER HEIGHT - MOBILE SCREEN
         * ==========================================
         * Force a minimum height on mobile screens to push the footer down.
         */
        min-height: 480px !important; 
    }

    .flip-showcase-slider-container .swiper-slide {
        padding: 10px;

        /* 
         * ==========================================
         * ADJUST CARD SIZE - MOBILE SCREEN (SLIDER)
         * ==========================================
         * Set to 100% to let the card expand and fill the mobile screen width.
         */
        max-width: 100% !important; 
    }
    
    .flip-showcase-single-product-container {
        padding: 0 10px 20px 10px;
        max-width: 100% !important; 
    }

    /* Edge-to-edge white container layout for mobile product page */
    body.single-product #content,
    body.single-product .site-content,
    body.single-product .site-main,
    body.single-product .ast-woocommerce-container,
    body.single-product div.product {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    /* Specifically reset padding on all except content wrapper to enable top breathing space */
    body.single-product .site-main,
    body.single-product .ast-woocommerce-container,
    body.single-product div.product {
        padding: 0 !important;
    }

    /* Safe edge-to-edge product featured image container for mobile */
    .woocommerce div.product div.images,
    .woocommerce div.product div.images .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Allow the main image wrapper to scale while preserving dynamic transition dimensions */
    .woocommerce div.product div.images .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Comfortable padding for the text column details */
    .woocommerce div.product div.summary {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        flex-basis: auto !important;
        float: none !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Comfortable padding for tabs */
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related.products,
    .woocommerce div.product .up-sells.products {
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    /* Mobile-only style for swipe helper text */
    .flip-showcase-swipe-hint {
        display: block !important;
        color: #ffffff !important;
        font-size: 13px !important;
        text-align: center !important;
        
        /* Change this to a negative margin to pull the text up closer to the card */
        margin-top: -20px !important; 
        
        position: relative !important;
        z-index: 10 !important;
        opacity: 0.75 !important;
        font-weight: normal !important;
        letter-spacing: 0.5px !important;
    }
}


/* Card perspective wrapper */
.flip-card-wrapper {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 850 / 1275;
    margin: 0 auto;
    perspective: 1200px;
    cursor: pointer;
    box-sizing: border-box;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card-wrapper[data-current-panel="1"] .flip-card-inner {
    transform: rotateY(0deg);
}

.flip-card-wrapper[data-current-panel="2"] .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.side-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.side-back {
    z-index: 1;
    transform: rotateY(180deg);
    overflow: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.panel-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.flip-hotspot-button {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.01) !important;
    cursor: pointer !important;
    
    transform: none !important;
    -webkit-transform: none !important;

    /* 
     * ==========================================
     * ADJUST HOTSPOT BUTTON HEIGHT
     * ==========================================
     * Gold banner (85px) + 100px buffer = 185px.
     * 185px / 1275px card height = 14.51%.
     */
    height: 14.51%;
}

.flip-panel,
.flip-panel-img,
.flip-card-wrapper,
.flip-side,
.flip-card-inner {
    border-radius: 0 !important;
}

/* 
 * ==========================================
 * SINGLE PRODUCT PAGE WHITE THEME OVERRIDE
 * ==========================================
 * Forces the WooCommerce sales card and details container to be white,
 * while completely preserving your global header and body dark background.
 */

/* Force container backgrounds to be white across both desktop and mobile */
body.single-product #content,
body.single-product .site-content,
body.single-product div.product,
body.single-product .site-main,
body.single-product .ast-woocommerce-container {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Force all text inside the white product details container to be dark */
body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb *,
body.single-product .entry-summary,
body.single-product .entry-summary *,
body.single-product div.summary,
body.single-product div.summary *,
body.single-product .product_title,
body.single-product .price,
body.single-product .price * {
    color: #222222 !important;
}

/* Ensure metadata, tags, and category links are dark and readable */
body.single-product .product_meta,
body.single-product .product_meta *,
body.single-product .posted_in,
body.single-product .posted_in a,
body.single-product .tagged_as,
body.single-product .tagged_as a {
    color: #555555 !important;
}

/* Ensure form labels and product metadata are visible */
body.single-product .quantity input.qty,
body.single-product .variations select,
body.single-product .variations label {
    color: #222222 !important;
    border-color: #cccccc !important;
}

/* Add a subtle dark border around quantity input fields for readability */
body.single-product .quantity input.qty {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
}

/* Force breadcrumbs to be small, dark, readable, and perfectly aligned */
body.single-product .woocommerce-breadcrumb {
    font-size: 10pt !important;
    line-height: 14pt !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}

body.single-product .woocommerce-breadcrumb *,
body.single-product .woocommerce-breadcrumb a {
    font-size: 10pt !important;
    line-height: 14pt !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: inline !important;
}

/* Add a white padding-top to the main content container globally for top breathing space */
body.single-product #content,
body.single-product .site-content {
    padding-top: 25px !important;
}

/* Desktop-only single product page layout overrides */
@media (min-width: 769px) {
    /* 
     * ==========================================
     * ADJUST TOP GAP BETWEEN HEADER AND CONTENT
     * ==========================================
     * Removes the gap below your dark red menu bar and pulls the white container
     * up to touch the bottom edge of the header.
     * Changed to -65px to pull it completely flush (with the global 25px top padding).
     */
    body.single-product #content,
    body.single-product .site-content {
        margin-top: -65px !important; /* Pulls the white container completely flush with the header */
    }

    body.single-product div.product {
        margin-top: 0 !important;
    }

    /* Target only the actual product details block, keeping the header completely dark */
    body.single-product div.product,
    body.single-product .site-main,
    body.single-product .ast-woocommerce-container {
        padding: 30px !important;
        box-sizing: border-box;

        /* 
         * ==========================================
         * FIX PARENT HEIGHT COLLAPSE (FLOAT CLEARANCE)
         * ==========================================
         * Since .images and .summary are floated columns, the parent container
         * collapses to 0 height. Using flow-root forces the white background
         * to stretch completely to the bottom to enclose both columns.
         */
        display: flow-root !important;
        clear: both !important;
    }

    /* 
     * ==========================================
     * ADJUST IMAGE - SIZE
     * ==========================================
     * Increased to 462px (exactly 10% larger than 420px).
     */
    .woocommerce div.product div.images {
        width: 462px !important; 
        max-width: 462px !important; 
        flex: 0 0 462px !important; 
        flex-basis: 462px !important; 
        float: left !important;
        margin: 0 !important;
    }

    /* 
     * ==========================================
     * ADJUST IMAGE - DETAILS CONTAINER
     * ==========================================
     * If you increase the image size above, you must update this calculation.
     * Subtract your image width + 40px (for the gap) from 100%.
     * 
     * Formula: calc(100% - (Image Width + 40px))
     * Configured for 462px: calc(100% - 502px)
     */
    .woocommerce div.product div.summary {
        width: calc(100% - 502px) !important; 
        max-width: calc(100% - 502px) !important; 
        flex: 1 1 auto !important;
        float: right !important;
        margin: 0 !important;
    }
}

/* Dynamic stacking and pointer behavior for active panels */
.flip-card-wrapper[data-current-panel="1"] .side-front {
    z-index: 2 !important;
    pointer-events: auto !important;
}

.flip-card-wrapper[data-current-panel="1"] .side-back {
    z-index: 1 !important;
    pointer-events: none !important;
}

.flip-card-wrapper[data-current-panel="2"] .side-front {
    z-index: 1 !important;
    pointer-events: none !important;
}

.flip-card-wrapper[data-current-panel="2"] .side-back {
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Mobile product-page typography and alignment */
@media (max-width: 768px) {
    /* Use the same column edge for breadcrumbs and the product details. */
    body.single-product .woocommerce-breadcrumb {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 10px 0 8px !important;
        font-size: 9pt !important;
        line-height: 12pt !important;
        text-align: left !important;
    }

    body.single-product .woocommerce-breadcrumb *,
    body.single-product .woocommerce-breadcrumb a {
        font-size: 9pt !important;
        line-height: 12pt !important;
    }

    /* Let all product copy use more of the available mobile column width. */
    .woocommerce div.product div.summary {
        padding: 20px 0 !important;
    }

    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related.products,
    .woocommerce div.product .up-sells.products {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.single-product .woocommerce-product-details__short-description,
    body.single-product .woocommerce-product-details__short-description p,
    body.single-product .woocommerce-Tabs-panel--description,
    body.single-product .woocommerce-Tabs-panel--description p,
    body.single-product #tab-description,
    body.single-product #tab-description p {
        font-size: 13pt !important;
        line-height: 19pt !important;
    }

    /* Hide only the standalone category heading above the product title. */
    body.single-product .entry-summary .product-category,
    body.single-product div.summary .product-category,
    body.single-product .entry-summary .ast-woo-product-category,
    body.single-product div.summary .ast-woo-product-category {
        display: none !important;
    }
}

/* Product titles and description headings use the site's gold accent. */
body.single-product .product_title,
body.single-product .woocommerce-product-details__short-description h1,
body.single-product .woocommerce-product-details__short-description h2,
body.single-product .woocommerce-product-details__short-description h3,
body.single-product .woocommerce-product-details__short-description h4,
body.single-product .woocommerce-product-details__short-description h5,
body.single-product .woocommerce-product-details__short-description h6,
body.single-product .woocommerce-Tabs-panel--description h1,
body.single-product .woocommerce-Tabs-panel--description h2,
body.single-product .woocommerce-Tabs-panel--description h3,
body.single-product .woocommerce-Tabs-panel--description h4,
body.single-product .woocommerce-Tabs-panel--description h5,
body.single-product .woocommerce-Tabs-panel--description h6,
body.single-product #tab-description h1,
body.single-product #tab-description h2,
body.single-product #tab-description h3,
body.single-product #tab-description h4,
body.single-product #tab-description h5,
body.single-product #tab-description h6 {
    color: #b08c00 !important;
}

/* Keep the breadcrumb flush with the product copy on desktop and mobile. */
body.single-product .woocommerce-breadcrumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Support the theme's product title and the title at the start of the full description. */
body.single-product .entry-title,
body.single-product #tab-description > p:first-of-type strong,
body.single-product #tab-description > p:first-of-type b {
    color: #b08c00 !important;
}

/* Adjust vertical line spacing and color specifically for the main product title */
body.single-product .product_title.entry-title {
    line-height: 1.45 !important;
    color: #a57c01 !important;
}

/* 
 * ==========================================
 * CHECKOUT PAGE DISPLAY REPAIRS (UPDATED)
 * ==========================================
 */

/* 1. Remove Surrounding Grey Container & Expand Fields (Wildcard Match) */
.woocommerce-checkout [class*="payment_method_square"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove padding/borders on the inner card containers */
.woocommerce-checkout [class*="payment_method_square"] .wc-square-credit-card-container,
.woocommerce-checkout [class*="payment_method_square"] .wc-square-credit-card-container * {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Specifically target any iframe generated by the Square SDK */
.woocommerce-checkout [class*="payment_method_square"] iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: block !important;
}

/* 2. Inviting Brand-Gold Button Style */
#add_payment_method #place_order, 
.woocommerce-cart #place_order, 
.woocommerce-checkout #place_order {
    background-color: #a57c01 !important; /* Brand Gold (Change to #28a745 if you prefer Green) */
    color: #ffffff !important;            /* White text */
    opacity: 1 !important;                 /* Force visibility */
    border: 1px solid #a57c01 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

#add_payment_method #place_order:hover, 
.woocommerce-cart #place_order:hover, 
.woocommerce-checkout #place_order:hover {
    background-color: #b08c00 !important; /* Slightly brighter gold on hover */
    border-color: #b08c00 !important;
    color: #ffffff !important;
}

/* 3. Hide "Credit Card" Text and Keep Payment Logos Only */
.woocommerce-checkout label[for*="payment_method_square"] {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
}

/* Ensure the payment brand logos inside that label remain visible and aligned */
.woocommerce-checkout label[for*="payment_method_square"] img {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 2px !important;
}

/* 
 * ==========================================
 * CART PAGE WHITE THEME OVERRIDE
 * ==========================================
 */

/* 1. Force main backgrounds to be white on the Cart page */
body.woocommerce-cart #content,
body.woocommerce-cart .site-content,
body.woocommerce-cart .site-main,
body.woocommerce-cart .ast-woocommerce-container,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 2. Style the Page Title to be dark grey */
body.woocommerce-cart h1.entry-title {
    color: #222222 !important;
}

/* 3. Force Cart Table content and text to be dark grey */
body.woocommerce-cart table.cart td,
body.woocommerce-cart table.cart td *,
body.woocommerce-cart table.cart th,
body.woocommerce-cart table.cart th *,
body.woocommerce-cart table.cart a {
    color: #222222 !important;
}

/* Style the remove product "X" icon to be red */
body.woocommerce-cart table.cart td.product-remove a.remove {
    color: #cc0000 !important;
    border-color: #cc0000 !important;
}

/* 4. Force Cart Totals section text and labels to be dark grey */
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td,
body.woocommerce-cart .cart_totals td *,
body.woocommerce-cart .cart_totals a {
    color: #222222 !important;
}

/* Ensure coupon and update inputs remain readable */
body.woocommerce-cart .coupon input[type="text"] {
    background-color: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #cccccc !important;
}

/* 5. Style the Proceed to Checkout button to match the Gold brand color */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #a57c01 !important; /* Brand Gold */
    color: #ffffff !important;            /* White text */
    border: 1px solid #a57c01 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #b08c00 !important; /* Brighter gold on hover */
    border-color: #b08c00 !important;
    color: #ffffff !important;
}

/* 
 * ==========================================
 * SHOP / ARCHIVE PAGES WHITE THEME OVERRIDE
 * ==========================================
 */

/* 1. Force container backgrounds to be white across Shop and Category Archive pages */
body.archive #content,
body.archive .site-content,
body.archive .site-main,
body.archive .ast-woocommerce-container,
body.archive .woocommerce {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 2. Force text, breadcrumbs, and sorting controls to be dark grey */
body.archive h1.page-title,
body.archive .woocommerce-breadcrumb,
body.archive .woocommerce-breadcrumb *,
body.archive .woocommerce-result-count,
body.archive .woocommerce-ordering select {
    color: #222222 !important;
}

/* Ensure the sorting dropdown has a white background with a border */
body.archive .woocommerce-ordering select {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    padding: 5px !important;
}

/* 3. Force product metadata (title, category, price) to be dark grey */
body.archive ul.products li.product .woocommerce-loop-product__title,
body.archive ul.products li.product .ast-woo-product-category,
body.archive ul.products li.product .price,
body.archive ul.products li.product .price span,
body.archive ul.products li.product .price del,
body.archive ul.products li.product .price ins {
    color: #222222 !important;
}

/* 4. Style Shop loop buttons ("Select Options" / "Add to Cart") to match the brand Gold style */
body.archive ul.products li.product .button {
    background-color: #a57c01 !important; /* Brand Gold */
    color: #ffffff !important;            /* White text */
    border: 1px solid #a57c01 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease;
    padding: 10px 20px !important;
    display: inline-block !important;
}

body.archive ul.products li.product .button:hover {
    background-color: #b08c00 !important; /* Brighter gold on hover */
    border-color: #b08c00 !important;
    color: #ffffff !important;
}
/* 
 * ==========================================
 * CLEANUP: HIDE BREADCRUMBS & SORTING
 * ==========================================
 */

/* Hide the breadcrumbs and default sorting dropdown on the main Events/Shop page */
body.archive .woocommerce-breadcrumb,
body.archive .woocommerce-ordering {
    display: none !important;
}

/* 
 * ==========================================
 * CLEANUP: HIDE BREADCRUMBS & SORTING
 * ==========================================
 */

/* Hide the breadcrumbs and default sorting dropdown on the main Events/Shop page */
body.archive .woocommerce-breadcrumb,
body.archive .woocommerce-ordering {
    display: none !important;
}

/* Hide the "Showing single result" text on the Events/Shop page */
body.archive .woocommerce-result-count {
    display: none !important;
}

/* Hide mobile swipe hint on desktop screens */
.flip-showcase-swipe-hint {
    display: none;
}

/* 
 * ==========================================
 * CHECKOUT CLEANUP: HIDE SHIPPING & NOTES
 * ==========================================
 */

/* Hide the "Ship to a different address" checkbox and form */
body.woocommerce-checkout .woocommerce-shipping-fields {
    display: none !important;
}

/* Hide the "Order notes" text field and heading */
body.woocommerce-checkout .woocommerce-additional-fields {
    display: none !important;
}

/* 
 * ==========================================
 * GLOBAL LOOP BUTTONS (GOLD ACTIVE STYLE)
 * ==========================================
 * Applies the gold styling to all loop buttons (including "Read More" and "Select Options")
 * on both the Shop page and the Related Products sections.
 */
ul.products li.product .button,
.woocommerce ul.products li.product .button {
    background-color: #a57c01 !important; /* Amber Gold active background */
    color: #ffffff !important;            /* White text */
    border: 1px solid #a57c01 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    display: inline-block !important;
}

/* 
 * Force the hover state of the loop buttons to turn blue
 */
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: #0056b3 !important; /* Change this hex code to match your exact blue */
    border-color: #0056b3 !important;     /* Optional: matches the border to the blue */
    color: #ffffff !important;            /* Ensures text remains white on hover */
}