/* 
 * 14. Single Product Page Overrides
 * Fixes for mobile layout, Variation Gallery arrows, and PhotoSwipe lightbox
 */

/* 1. Mobile squished layout fix - Stack images and summary on small screens */
@media screen and (max-width: 768px) {
    html body.single-product.woocommerce div.product div.images,
    html body.single-product.woocommerce #content div.product div.images,
    html body.single-product.woocommerce-page div.product div.images,
    html body.single-product.woocommerce-page #content div.product div.images,
    html body.single-product .elementor-widget-woocommerce-product-images,
    html body.single-product.woocommerce div.product div.woo-variation-product-gallery {
        width: 100% !important;
        float: none !important;
        margin-bottom: 2em !important;
    }
    html body.single-product.woocommerce div.product div.summary,
    html body.single-product.woocommerce #content div.product div.summary,
    html body.single-product.woocommerce-page div.product div.summary,
    html body.single-product.woocommerce-page #content div.product div.summary,
    html body.single-product .elementor-widget-woocommerce-product-data {
        width: 100% !important;
        float: none !important;
        margin-bottom: 2em !important;
    }
}

/* 2. Desktop image size - Increase to 55% to make the main image larger */
@media screen and (min-width: 769px) {
    html body.single-product.woocommerce div.product div.images,
    html body.single-product.woocommerce #content div.product div.images,
    html body.single-product.woocommerce-page div.product div.images,
    html body.single-product.woocommerce-page #content div.product div.images,
    html body.single-product .elementor-widget-woocommerce-product-images,
    html body.single-product.woocommerce div.product div.woo-variation-product-gallery {
        width: 55% !important;
        max-width: 55% !important;
        flex: 0 0 55% !important;
    }
    html body.single-product.woocommerce div.product div.summary,
    html body.single-product.woocommerce #content div.product div.summary,
    html body.single-product.woocommerce-page div.product div.summary,
    html body.single-product.woocommerce-page #content div.product div.summary,
    html body.single-product .elementor-widget-woocommerce-product-data {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
    }
}

/* 3. Make main image gallery arrows always visible (Variation Gallery plugin) */
html body.single-product .woo-variation-gallery-wrapper .wvg-gallery-image-wrapper .slick-arrow {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Ensure PhotoSwipe lightbox close button is visible and positioned properly */
html body .pswp {
    z-index: 9999999 !important; /* Force lightbox above Kinwi header */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* 4.5 Force X button to the absolute right edge (bypassing preloader gap) */
html body .pswp__top-bar {
    display: flex !important;
}
html body .pswp__button--zoom {
    order: 98 !important;
}
html body .pswp__button--close {
    order: 99 !important;
}

html body .pswp__button,
html body .pswp__button:hover,
html body .pswp__button:focus,
html body .pswp__button:active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html body .pswp__button--fs {
    display: none !important;
}

/* 5. Fix jumping magnifying glass icon on main image hover */
html body.single-product .woo-variation-gallery-wrapper .woo-variation-gallery-trigger,
html body.single-product .woo-variation-gallery-wrapper .woo-variation-gallery-trigger:hover,
html body.single-product .woo-variation-gallery-wrapper .woo-variation-gallery-trigger:focus,
html body.single-product .woo-variation-gallery-wrapper .woo-variation-gallery-trigger:active {
    font-size: 36px !important;
    line-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-family: inherit !important;
    font-style: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

html body.single-product .woo-variation-gallery-wrapper .woo-variation-gallery-trigger:hover .dashicons {
    color: #00967d !important;
}

/* 5. Refine arrow background so it acts as a snug border */
html body .pswp__button--arrow--left,
html body .pswp__button--arrow--right {
    background-color: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 4px !important;
    margin-top: -22px !important;
}

html body .pswp__button--arrow--left::before,
html body .pswp__button--arrow--right::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 32px !important;
    height: 30px !important;
}

/* 6. Move PhotoSwipe left/right arrows */
@media screen and (min-width: 769px) {
    /* 60px inward on desktop to clear the Superfly menu */
    html body .pswp__button--arrow--left {
        left: 60px !important;
        margin-left: 0 !important;
    }
    html body .pswp__button--arrow--right {
        right: 60px !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    /* Close to edge on mobile so they don't cover the image */
    html body .pswp__button--arrow--left {
        left: 10px !important;
        margin-left: 0 !important;
    }
    html body .pswp__button--arrow--right {
        right: 10px !important;
        margin-right: 0 !important;
    }
}

/* 7. Hide native HTML5 number input arrows on product quantity fields */
.woocommerce div.product form.cart div.quantity input[type="number"],
.woocommerce-page div.product form.cart div.quantity input[type="number"] {
    -moz-appearance: textfield !important; /* Firefox */
    appearance: textfield !important;
}

.woocommerce div.product form.cart div.quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce div.product form.cart div.quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce-page div.product form.cart div.quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce-page div.product form.cart div.quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Kinwi: Hide product rating under the product title on single product page */
.single-product div.product .summary .woocommerce-product-rating {
    display: none !important;
}

/* Kinwi: Set font for Questions and Answers tab */
#tab-product_qa,
#tab-product_qa *:not(svg):not(path) {
    font-family: 'Lora upload', serif !important;
    font-size: 16px !important;
}

/* Kinwi: Product add-on title / heading - non-italic, normal weight for Label format, bold for Heading format */
.wc-pao-addon-container .wc-pao-addon-name,
.wc-pao-addon-container legend.wc-pao-addon-name,
.wc-pao-addon-container label.wc-pao-addon-name {
    font-family: 'Lora upload', serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    color: #111111 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* When the vendor selects 'Heading' in 'Format title', render bold */
.wc-pao-addon-container h2.wc-pao-addon-name,
.wc-pao-addon-container h2.wc-pao-addon-heading,
.wc-pao-addon-container h3.wc-pao-addon-name,
.wc-pao-addon-container h3.wc-pao-addon-heading {
    font-family: 'Lora upload', serif !important;
    font-style: normal !important;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #111111 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Kinwi: Product add-on radio buttons and checkboxes aligned next to options */
.wc-pao-addon-container .wc-pao-addon-wrap > div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.wc-pao-addon-container .wc-pao-addon-wrap input[type="radio"],
.wc-pao-addon-container .wc-pao-addon-wrap input[type="checkbox"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    top: -2px !important;
}

/* Kinwi: Product variations and add-on choices font */
table.variations label {
    font-family: 'Lora upload', serif !important;
    font-style: italic !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

/* =====================================================================
   Kinwi: Product Add-ons Typography (Lora upload)
   Ensures all add-on dropdowns, radio button text, multiple choice,
   checkboxes, long text, short text, etc. use Lora upload font.
   ===================================================================== */

/* 1. Global add-on container & form controls */
.wc-pao-addons-container,
.wc-pao-addons-container *,
.wc-pao-addon-container,
.wc-pao-addon-container *,
.wc-pao-addon-wrap,
.wc-pao-addon-wrap *,
.wc-pao-addon-field {
    font-family: "Lora upload", "Lora", serif !important;
}

/* Kinwi: Protect icon fonts from add-on container typography rule */
.wc-pao-addons-container i.fa,
.wc-pao-addons-container i.fas,
.wc-pao-addons-container i.far,
.wc-pao-addons-container i.fab,
.wc-pao-addons-container i[class*="fa-"],
.wc-pao-addons-container span.fa,
.wc-pao-addons-container span.fas,
.wc-pao-addons-container span.far,
.wc-pao-addons-container span.fab,
.wc-pao-addons-container span[class*="fa-"],
.wc-pao-addon-container i.fa,
.wc-pao-addon-container i.fas,
.wc-pao-addon-container i.far,
.wc-pao-addon-container i.fab,
.wc-pao-addon-container i[class*="fa-"],
.wc-pao-addon-container span.fa,
.wc-pao-addon-container span.fas,
.wc-pao-addon-container span.far,
.wc-pao-addon-container span.fab,
.wc-pao-addon-container span[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}
.wc-pao-addons-container .dashicons,
.wc-pao-addon-container .dashicons {
    font-family: dashicons !important;
    font-style: normal !important;
    font-weight: normal !important;
}

/* 2. Add-on Dropdowns & Options */
.wc-pao-addon-container select,
select.wc-pao-addon-field,
select.wc-pao-addon-select,
.wc-pao-addon-image-swatch-select,
.wc-pao-addon-container select option,
.wc-pao-addons-container select option,
select.wc-pao-addon-field option,
select.wc-pao-addon-select option {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    color: #111111 !important;
}

/* 3. Short Text & Custom Price Inputs */
.wc-pao-addon-container input[type="text"],
.wc-pao-addon-container input[type="number"],
input.wc-pao-addon-field,
input.wc-pao-addon-custom-text,
input.wc-pao-addon-custom-price,
.wc-pao-addon-field.datepicker {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    color: #111111 !important;
}

/* 4. Long Text (Textareas) */
.wc-pao-addon-container textarea,
textarea.wc-pao-addon-field,
textarea.wc-pao-addon-custom-textarea {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    color: #111111 !important;
}

/* 5. Radio Buttons & Checkboxes text */
.wc-pao-addon-container .wc-pao-addon-wrap label,
.wc-pao-addon-container .wc-pao-addon-wrap label span,
.wc-pao-addon-container .wc-pao-addon-description {
    font-family: "Lora upload", "Lora", serif !important;
    font-style: italic !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #111111 !important;
}

/* 6. Multiple Choice / Image Swatches */
.wc-pao-addon-image-swatch-price,
.wc-pao-addon-image-swatch-selected-swatch,
.wc-pao-addon-image-swatch-selected-swatch * {
    font-family: "Lora upload", "Lora", serif !important;
    font-style: italic !important;
    font-size: 16px !important;
}

/* 7. Price suffix */
.wc-pao-addon-container .wc-pao-addon-price {
    font-family: "Lora upload", "Lora", serif !important;
    font-style: italic !important;
    font-size: 14px !important;
    font-weight: normal !important;
    display: inline !important;
    margin-left: 4px !important;
}

/* 8. Placeholders */
.wc-pao-addon-container input::placeholder,
.wc-pao-addon-container textarea::placeholder,
.wc-pao-addon-field::placeholder {
    font-family: "Lora upload", "Lora", serif !important;
    font-style: italic !important;
    color: #888888 !important;
}

/* 9. File upload helpers & dates */
.wc-pao-addon-container input[type="file"],
.wc-pao-addon-file-upload,
.wc-pao-addon-file-name,
.wc-pao-addon-file-name small,
.wc-pao-addon-file-name a,
.wc-pao-addon-container small,
.reset_file,
.reset_date {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 14px !important;
}

/* 10. Add-on totals, characters counter & validation */
#product-addons-total,
#product-addons-total *,
.wc-pao-subtotal-line,
.wc-pao-addon-characters-remaining,
.validation_message {
    font-family: "Lora upload", "Lora", serif !important;
}

/* Kinwi: Responsive adjustments for product options on smaller screens */
@media screen and (max-width: 880px) {
    table.variations label,
    .wc-pao-addon-container .wc-pao-addon-wrap label,
    .wc-pao-addon-container .wc-pao-addon-description {
        font-size: 15px !important;
    }

    .wc-pao-addon-container .wc-pao-addon-name,
    .wc-pao-addon-container legend.wc-pao-addon-name,
    .wc-pao-addon-container label.wc-pao-addon-name {
        font-size: 16px !important;
    }

    .wc-pao-addon-container h2.wc-pao-addon-name,
    .wc-pao-addon-container h2.wc-pao-addon-heading,
    .wc-pao-addon-container h3.wc-pao-addon-name,
    .wc-pao-addon-container h3.wc-pao-addon-heading {
        font-size: 17px !important;
    }

    table.variations select,
    .wc-pao-addon-container select,
    .wc-pao-addon-container select option,
    .wc-pao-addon-container input[type="file"],
    .wc-pao-addon-container input[type="text"],
    .wc-pao-addon-container input[type="number"],
    .wc-pao-addon-container textarea,
    .wc-pao-addon-container .wc-pao-addon-file-upload,
    .wc-pao-addon-field {
        font-size: 14px !important;
    }
}

/* Kinwi: Responsive videos in product description */
.woocommerce-product-details__short-description iframe,
.woocommerce-product-details__short-description video,
.woocommerce-Tabs-panel--description iframe,
.woocommerce-Tabs-panel--description video,
.elementor-widget-woocommerce-product-content iframe,
.elementor-widget-woocommerce-product-content video {
    max-width: 100% !important;
}

/* Kinwi: Hide quantity wrapper on sold-individually products (limit 1 per order) */
.woocommerce div.product form.cart div.quantity:has(input[type="hidden"]),
.woocommerce-page div.product form.cart div.quantity:has(input[type="hidden"]) {
    display: none !important;
}