/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* =========================================================
   GALLERY OVERRIDES
   ---------------------------------------------------------
   1. Lightbox / popup backdrop opacity lowered to 0.1 across
      every gallery system on the site (Webpigment Product
      Gallery, Elementor lightbox, WooCommerce PhotoSwipe).
   2. Circular navy prev/next navigation buttons (40x40,
      white bg, #0b3954 primary, #1e5377 hover) added to
      every gallery that exposes navigation arrows.
   ========================================================= */

/* --- 1. Lightbox overlay opacity ~0.1 ------------------- */

/* Elementor lightbox (image widget, gallery widget, etc.) */
.elementor-lightbox,
.elementor-lightbox .dialog-widget-content,
.elementor-lightbox .dialog-message,
.elementor-lightbox .dialog-lightbox-message {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* WooCommerce PhotoSwipe (default WC product gallery) */
.pswp__bg {
    background: rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
}
.pswp,
.pswp--open {
    background: transparent !important;
}

/* Webpigment Product Gallery — covered by inline plugin CSS,
   re-declared here as belt-and-braces in case the inline
   stylesheet loads before this one. */
.wpg-lightbox-overlay {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* --- 2. Circular navy prev/next buttons ----------------- */

/* Shared button surface across every gallery */
.wpg-lightbox-arrow,
.elementor-lightbox .elementor-swiper-button,
.elementor-image-carousel-wrapper .elementor-swiper-button,
.elementor-main-swiper .elementor-swiper-button,
.elementor-widget-image-carousel .elementor-swiper-button,
.elementor-widget-image-gallery .elementor-swiper-button,
.elementor-widget-media-carousel .elementor-swiper-button,
.elementor-widget-loop-carousel .elementor-swiper-button,
.elementor-widget-nested-carousel .elementor-swiper-button,
.elementor-widget-testimonial-carousel .elementor-swiper-button,
.swiper-button-prev,
.swiper-button-next,
.pswp__button--arrow--left,
.pswp__button--arrow--right,
.woocommerce-product-gallery .flex-direction-nav a,
.woocommerce div.product .flex-control-thumbs ~ .flex-direction-nav a {
    width: 40px !important;
    height: 40px !important;
    background: #fff !important;
    color: #0b3954 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    z-index: 5;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
}

.wpg-lightbox-arrow:hover,
.elementor-lightbox .elementor-swiper-button:hover,
.elementor-image-carousel-wrapper .elementor-swiper-button:hover,
.elementor-main-swiper .elementor-swiper-button:hover,
.elementor-widget-image-carousel .elementor-swiper-button:hover,
.elementor-widget-image-gallery .elementor-swiper-button:hover,
.elementor-widget-media-carousel .elementor-swiper-button:hover,
.elementor-widget-loop-carousel .elementor-swiper-button:hover,
.elementor-widget-nested-carousel .elementor-swiper-button:hover,
.elementor-widget-testimonial-carousel .elementor-swiper-button:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover,
.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover,
.woocommerce-product-gallery .flex-direction-nav a:hover {
    background: #1e5377 !important;
    color: #fff !important;
}

/* Stroke / SVG arrows inherit color */
.elementor-lightbox .elementor-swiper-button svg,
.elementor-image-carousel-wrapper .elementor-swiper-button svg,
.swiper-button-prev svg,
.swiper-button-next svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Swiper default uses :after pseudo glyph — re-color it */
.swiper-button-prev:after,
.swiper-button-next:after,
.elementor-swiper-button-prev:after,
.elementor-swiper-button-next:after {
    color: #0b3954 !important;
    font-size: 16px !important;
    font-weight: 700;
}
.swiper-button-prev:hover:after,
.swiper-button-next:hover:after,
.elementor-swiper-button-prev:hover:after,
.elementor-swiper-button-next:hover:after {
    color: #fff !important;
}

/* Position: vertical center, slight inset */
.elementor-swiper-button-prev,
.swiper-button-prev,
.pswp__button--arrow--left,
.woocommerce-product-gallery .flex-direction-nav .flex-prev {
    left: 12px !important;
    right: auto !important;
}
.elementor-swiper-button-next,
.swiper-button-next,
.pswp__button--arrow--right,
.woocommerce-product-gallery .flex-direction-nav .flex-next {
    right: 12px !important;
    left: auto !important;
}

/* --- WooCommerce flex-direction-nav: force visible ------ */

/* WC default product gallery (FlexSlider) hides the arrows
   visually using text-indent; restore them with simple
   triangles via pseudo-elements so users always see them. */
.woocommerce-product-gallery .flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-product-gallery .flex-direction-nav li {
    position: static;
    margin: 0;
}
.woocommerce-product-gallery .flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-indent: 0 !important;
    overflow: visible !important;
    font-size: 0;
    line-height: 0;
}
.woocommerce-product-gallery .flex-direction-nav a:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(-135deg);
}
.woocommerce-product-gallery .flex-direction-nav a.flex-next:before {
    transform: rotate(45deg);
}

/* Make sure WC gallery wrapper has positioning context */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport {
    position: relative;
}

/* --- Portrait main image: fixed 500x800 box, no page jump ----
   Cap the whole gallery to 500px and lock every main image to a
   5:8 box with object-fit:cover, so switching photos never shifts
   the layout (works even before old images are regenerated). */
.woocommerce div.product .woocommerce-product-gallery {
    max-width: 500px;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img {
    aspect-ratio: 5 / 5;
    object-fit: cover;
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* --- WC gallery thumbnails: show only 4 at a time -------
   FlexSlider builds .flex-control-thumbs as the thumbnail nav and
   WooCommerce floats them into a wrapping grid. Force a single
   horizontal row, size each thumb to a quarter of the strip so
   exactly 4 are visible, and let the rest scroll into view.
   !important is needed to beat WooCommerce/Elementor gallery CSS. */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    margin: 10px 0 0 !important;
    padding: 0 0 6px !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #0b3954 transparent;
}
.woocommerce-product-gallery .flex-control-thumbs::after {
    content: none !important;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    height: 6px;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
    background: #0b3954;
    border-radius: 999px;
}
.woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 calc((100% - 24px) / 4) !important; /* 4 visible, 3 x 8px gaps */
    width: calc((100% - 24px) / 4) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
    scroll-snap-align: start;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* --- Thumbnail strip arrows (added by child theme JS) -------
   The script wraps .flex-control-thumbs in .ntb-thumbs-carousel and
   injects round navy prev/next buttons that page through the strip. */
.ntb-thumbs-carousel {
    position: relative;
}
.ntb-thumbs-carousel .ntb-thumb-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    color: #0b3954 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}
.ntb-thumbs-carousel.ntb-has-nav .ntb-thumb-nav {
    display: flex;
}
.ntb-thumbs-carousel .ntb-thumb-nav:hover {
    background: #1e5377 !important;
    color: #fff !important;
}
.ntb-thumbs-carousel .ntb-thumb-nav[disabled] {
    opacity: 0.35 !important;
    cursor: default !important;
}
.ntb-thumbs-carousel .ntb-thumb-prev { left: -4px !important; }
.ntb-thumbs-carousel .ntb-thumb-next { right: -4px !important; }
.ntb-thumbs-carousel .ntb-thumb-nav svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    /* keep 4 visible on mobile, tighter gap for the narrower strip */
    .woocommerce-product-gallery .flex-control-thumbs {
        gap: 6px;
    }
    .woocommerce-product-gallery .flex-control-thumbs li {
        flex-basis: calc((100% - 18px) / 4) !important;
        width: calc((100% - 18px) / 4) !important;
    }
}

/* PhotoSwipe arrows: hide default sprite, show simple glyph */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    margin-top: 0 !important;
}
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    content: '' !important;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    background: none !important;
    position: static !important;
    margin: 0 auto;
}
.pswp__button--arrow--left:before {
    transform: rotate(-135deg);
}
.pswp__button--arrow--right:before {
    transform: rotate(45deg);
}

/* --- Mobile tweaks for nav buttons ---------------------- */
@media (max-width: 767px) {
    .wpg-lightbox-arrow,
    .elementor-lightbox .elementor-swiper-button,
    .swiper-button-prev,
    .swiper-button-next,
    .pswp__button--arrow--left,
    .pswp__button--arrow--right,
    .woocommerce-product-gallery .flex-direction-nav a {
        width: 36px !important;
        height: 36px !important;
    }
}