/* =================================
PRODUCT PAGE WRAPPER
================================= */

.rayon-product-page {
    max-width: 1280px;
    margin: auto;
}


/* =================================
PRODUCT TITLE
================================= */

.rayon-product-page .product_title {
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
}


/* =================================
PRODUCT ATTRIBUTES
================================= */

.rayon-product-page .rayon-attributes {
    margin-top: 20px;
}

.rayon-product-page .rayon-attribute-row {
    display: flex;
    gap: 6px;
}

.rayon-attribute-label::after {
    content: ":";
}


/* =================================
BACK BUTTON
================================= */

.rayon-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
}

.rayon-back-button:hover {
    opacity: 0.7;
}


/* =================================
ADD TO CART BUTTON
================================= */

.single_add_to_cart_button {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rayon-cart-icon {
    width: 18px;
    height: 18px;
}

div#wc-stripe-express-checkout-element {
    display: none!important;
}


/* =================================
STACKED PRODUCT GALLERY
================================= */

.woocommerce-product-gallery {
    display: block;
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
}

/* Override flexslider JS inline height — must be !important */
.flex-viewport {
    height: auto !important;
    overflow: visible !important;
}

/* Force vertical stack — override flexslider JS transform/translate */
.woocommerce-product-gallery__wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    transform: none !important;
    width: 100% !important;
}

/* Each slide — override flexslider float and inline width */
.woocommerce-product-gallery__image {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* image scaling */
.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* hide thumbnail slider */
.flex-control-thumbs {
    display: none !important;
}

/* hide navigation arrows */
.flex-direction-nav {
    display: none !important;
}

/* hide the zoom icon */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

.rayon-vendor {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

a.rayon-vendor-logo-link,
a.rayon-vendor-name-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    vertical-align: middle;
}

a.rayon-vendor-logo-link:hover,
a.rayon-vendor-name-link:hover {
    text-decoration: none !important;
}

img.rayon-vendor-logo,
.elementor-widget-text-editor img.rayon-vendor-logo,
.elementor-widget-shortcode img.rayon-vendor-logo,
.woocommerce img.rayon-vendor-logo,
p img.rayon-vendor-logo,
span img.rayon-vendor-logo,
a img.rayon-vendor-logo {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
}

.rayon-vendor-text {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #111111;
}

.rayon-vendor-text strong {
    font-weight: 600;
}


/* =================================
OUTER COLUMN ALIGNMENT
Keep right column pinned to top regardless of image count
================================= */

/* The Elementor container wrapping images-left + details-right */
.woocommerce.single-product .elementor-widget-woocommerce-product-images {
    align-self: flex-start;
}

/* Right details column — stay at top, never stretch */
.woocommerce.single-product .elementor-widget-woocommerce-product-images ~ .e-con,
.woocommerce.single-product .elementor-widget-woocommerce-product-images ~ .elementor-column {
    align-self: flex-start !important;
}

/* Reduce gap between stacked images to match Figma */
.woocommerce-product-gallery__wrapper {
    gap: 16px;
}


/* ── Make-an-Offer Popup ───────────────────────────── */

.elementor-popup-modal .dialog-widget-content {
    border-radius: 8px !important;
    padding: 40px 36px 36px !important;
    max-width: 520px !important;
    width: 100% !important;
}

/* Popup title */
.elementor-popup-modal .elementor-heading-title {
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    text-align: center !important;
    color: #111111 !important;
    margin-bottom: 20px !important;
}

/* Product info row (image + name + price) */
.elementor-popup-modal .elementor-widget-woocommerce-product-images,
.elementor-popup-modal .elementor-widget-image {
    flex-shrink: 0;
}

/* Hide vendor email text if it's a separate text widget inside popup */
.elementor-popup-modal .elementor-widget-text-editor a[href^="mailto"],
.elementor-popup-modal .elementor-widget-text-editor .vendor-email {
    display: none !important;
}

/* All form inputs inside the popup */
.elementor-popup-modal .elementor-field-group input[type="text"],
.elementor-popup-modal .elementor-field-group input[type="email"],
.elementor-popup-modal .elementor-field-group textarea {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 14px !important;
    color: #111111 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: none !important;
}

.elementor-popup-modal .elementor-field-group input:focus,
.elementor-popup-modal .elementor-field-group textarea:focus {
    border-color: #111111 !important;
}

/* Textarea height */
.elementor-popup-modal .elementor-field-group textarea {
    min-height: 100px !important;
}

/* Form field labels */
.elementor-popup-modal .elementor-field-label {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    margin-bottom: 6px !important;
}

/* Submit button */
.elementor-popup-modal .elementor-button[type="submit"],
.elementor-popup-modal .e-form__buttons .elementor-button {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: #111111 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    cursor: pointer !important;
    letter-spacing: 0.02em !important;
}

.elementor-popup-modal .elementor-button[type="submit"]:hover {
    background: #333333 !important;
}

/* Success / error messages */
.elementor-popup-modal .elementor-message {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* Close button */
.elementor-popup-modal .dialog-close-button {
    color: #999 !important;
    font-size: 18px !important;
}
.elementor-popup-modal .dialog-close-button:hover {
    color: #111 !important;
}

/* Product price inside popup */
.elementor-popup-modal .woocommerce-Price-amount {
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #111111 !important;
}

/* Product title inside popup */
.elementor-popup-modal .product_title,
.elementor-popup-modal .elementor-widget-woocommerce-product-title .elementor-heading-title {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    text-transform: none !important;
}

@media (max-width: 600px) {
    .elementor-popup-modal .dialog-widget-content {
        padding: 24px 20px !important;
        border-radius: 8px !important;
    }
}


/* =================================
   MOBILE PRODUCT IMAGE CAROUSEL
   (max-width: 768px only)
================================= */

/* =================================
   DESKTOP — reduce gap between image and details columns
================================= */
@media (min-width: 769px) {

    /* Force the product images widget to fill 100% of its column container.
       Without this, the widget may be narrower than the column, creating
       dead space between the image and the details column.                  */
    .woocommerce.single-product .elementor-widget-woocommerce-product-images {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    .woocommerce.single-product .elementor-widget-woocommerce-product-images > .elementor-widget-container {
        width: 100% !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    /* Row container: use exact Elementor element IDs discovered via DevTools.
       c80ba02 = the flex-row that holds image col + details col.
       Its column-gap is already 10px — we just ensure nothing overrides it upward. */
    .elementor-880 .elementor-element-c80ba02 {
        --column-gap: 10px !important;
        --row-gap: 10px !important;
    }
}

@media (max-width: 768px) {

    /* Carousel wrapper — relative so arrows position inside it */
    .rayon-gallery-carousel {
        position: relative;
        width: 100%;
    }

    /* On mobile: reset the desktop stacked layout */
    .rayon-gallery-carousel .woocommerce-product-gallery__wrapper {
        display: block !important;
        flex-direction: unset !important;
        gap: 0 !important;
        transform: none !important;
    }

    /* Each slide takes full width, hidden by default */
    .rayon-gallery-carousel .woocommerce-product-gallery__image {
        display: none !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Active slide — higher specificity than hide rule, so it wins */
    .rayon-gallery-carousel .woocommerce-product-gallery__image.rayon-slide--active {
        display: block !important;
    }

    /* Arrow buttons */
    .rayon-gallery-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        color: #ffffff;
        border: none;
        font-size: 24px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .rayon-gallery-arrow--prev {
        left: 10px;
    }

    .rayon-gallery-arrow--next {
        right: 10px;
    }

    /* Active/pressed state — black instead of theme pink */
    .rayon-gallery-arrow:hover,
    .rayon-gallery-arrow:focus,
    .rayon-gallery-arrow:active {
        background: #111111 !important;
        color: #ffffff !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Dot indicators */
    .rayon-gallery-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 10px 0 4px;
    }

    .rayon-gallery-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #cccccc;
        cursor: pointer;
        transition: background 0.2s;
    }

    .rayon-gallery-dot--active {
        background: #111111;
    }
}