/* ===== Limite de altura para o logo do topo ===== */
.elementor-location-header img, .site-header img, header img, .custom-logo {
    max-height: 90px;
    height: auto;
    width: auto;
}

/**
 * Sapataria Crispal - Custom Styles
 * Optimized CSS for WooCommerce variation swatches and cart layout
 * 

 * @package HelloElementor
 * @version 1.0.0-optimized
 * @author Sapataria Crispal Development Team
 * @since 1.0.0
 */

/* ==========================================
   CRISPAL VARIATION SWATCHES OPTIMIZATION
   ========================================== */
   
/* Hide unnecessary elements */
.wcboost-variation-swatches__selected-label,
.reset_variations,
a.reset_variations,
.woocommerce-variation-availability,
.woocommerce-variation-availability .stock {
    display: none !important;
}

/* Table layout optimization */
table.variations tr {
    display: block !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

table.variations tr .label,
table.variations tr .value {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

table.variations tr .label {
    margin-bottom: 10px !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-align: left !important;
}

/* Optimized container */
.wcboost-variation-swatches__wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start;
    overflow-x: auto !important;
    background: none !important;
    border: none !important;
}

/* Clean button styles */
.wcboost-variation-swatches__item {
    width: var(--crispal-button-size, 45px) !important;
    height: var(--crispal-button-size, 45px) !important;
    min-width: var(--crispal-button-size, 45px) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    border: 1px solid #333333 !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all var(--crispal-animation-duration, 0.2s) ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Hover effects */
.wcboost-variation-swatches__item:not(.disabled):not(.unavailable):hover {
    background-color: var(--crispal-hover-color, #F5AC95) !important;
    border-color: var(--crispal-hover-color, #F5AC95) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Disabled states */
.wcboost-variation-swatches__item.disabled,
.wcboost-variation-swatches__item.unavailable,
.wcboost-variation-swatches__item[aria-disabled='true'] {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #999 !important;
    cursor: default !important;
    opacity: 0.6 !important;
}

.wcboost-variation-swatches__item.disabled:hover,
.wcboost-variation-swatches__item.unavailable:hover,
.wcboost-variation-swatches__item[aria-disabled='true']:hover {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #999 !important;
    transform: none !important;
    cursor: default !important;
}

/* Selected states */
.wcboost-variation-swatches__item.selected,
.wcboost-variation-swatches__item[aria-checked='true'] {
    background-color: var(--crispal-selected-color, #000000) !important;
    border-color: var(--crispal-selected-color, #000000) !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--crispal-selected-color, #000000) !important;
}

.wcboost-variation-swatches__item.selected:hover,
.wcboost-variation-swatches__item[aria-checked='true']:hover {
    background-color: var(--crispal-selected-color, #000000) !important;
    border-color: var(--crispal-selected-color, #000000) !important;
    color: #ffffff !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--crispal-selected-color, #000000) !important;
}

/* Focus states for accessibility */
.wcboost-variation-swatches__item:focus {
    outline: 2px solid var(--crispal-hover-color, #F5AC95) !important;
    outline-offset: 2px !important;
}

.wcboost-variation-swatches__item.selected:focus,
.wcboost-variation-swatches__item[aria-checked='true']:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--crispal-selected-color, #000000) !important;
}

/* Table border cleanup */
/* table.variations,
table.variations tbody {
    border: none !important;
    background: none !important;
} */

/* ==========================================
   CRISPAL CART LAYOUT OPTIMIZATION
   ========================================== */

.single-product div.product form.cart {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.single-product div.product form.cart .quantity {
    margin: 0;
    margin-right: 10px;
    flex: 0 0 auto;
}

.single-product div.product form.cart .quantity .qty {
    height: 48px;
    box-sizing: border-box;
    width: 60px;
}

.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1;
    min-width: 200px;
    height: 48px;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

.single-product div.product form.cart .single_add_to_cart_button:focus,
.single-product div.product form.cart .single_add_to_cart_button:active {
    outline: none !important;
    box-shadow: none !important;
}

.single-product div.product form.cart .single_add_to_cart_button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ==========================================
   TOOLTIP HELPER STYLES
   ========================================== */

.size-selection-highlight {
    border: 2px solid #000000 !important;
    border-radius: 4px !important;
    padding: 8px !important;
    background: transparent !important;
    position: relative !important;
    box-sizing: content-box !important;
    display: block !important;
}

/* Garantir espaçamento interno correto */
.size-selection-highlight * {
    margin: 0 !important;
}

.size-selection-highlight .wcboost-variation-swatches__wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.size-selection-tooltip {
    position: absolute !important;
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #333 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.size-selection-tooltip:after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -5px !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: #333 transparent transparent transparent !important;
}

/* Size selection helper messages - matching production behavior */
.size-selection-helper {
    color: #e74c3c;
    font-size: 14px;
    font-weight: 500;
    /* margin: 10px 0; */
    padding: 8px 12px;
    background-color: #fdf2f2;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    animation: slideInDown 0.3s ease-out;
}

.size-selection-highlight {
    border: 2px solid #e74c3c !important;
    border-radius: 8px !important;
    background-color: rgba(231, 76, 60, 0.05) !important;
    box-shadow: 0 0 15px 6px rgba(231, 76, 60, 0.8) !important;
}

.size-selection-tooltip {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    animation: slideInDown 0.3s ease-out;
}

.size-selection-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.size-selection-fallback {
    background-color: #fdf2f2;
    color: #e74c3c;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   MOBILE HORIZONTAL SCROLL PREVENTION
   ========================================== */

/* Global overflow prevention */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.elementor-container {
    max-width: 100vw !important;
    
    /* overflow-x: hidden !important;
    box-sizing: border-box !important; */
}


/*


.elementor-section:not(#header_pop) .elementor-container {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


#header_pop .elementor-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}


.elementor-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
*/

/* Specific mobile viewport fixes */
@media (max-width: 414px) {
    /* Force all containers to respect mobile viewport */
    /* .elementor-container {
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
    } */
    
    /* Main content area specific */
    /* .elementor-section:not(#header_pop) .elementor-container {
        max-width: 100% !important;
        width: 100% !important;
    } */
    
    /* Header sticky container */
    /* #header_pop .elementor-container {
        max-width: 100vw !important;
        width: 100vw !important;
    } */
    
    /* Ensure no element can cause overflow */
    /* * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
     */
/* 
    .woocommerce-product-gallery,
    .woocommerce-product-gallery__wrapper,
    .woocommerce-product-gallery__image {
        max-width: 100% !important;
        overflow: hidden !important;
    } */
    

    /* .woocommerce-product-gallery img,
    .zoomImg {
        max-width: 100% !important;
        height: auto !important;
    } */
}

/* ==========================================
   PRODUCT META LAYOUT FIX
   ========================================== */

/* Fix for SKU, Categories, and Tags to appear on separate lines */
.product_meta {
    display: block !important;
}

.product_meta .detail-container,
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.product_meta .detail-container:last-child,
.product_meta .sku_wrapper:last-child,
.product_meta .posted_in:last-child,
.product_meta .tagged_as:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Mobile responsive */
/* @media (max-width: 768px) {
    :root {
        --crispal-button-size: 40px;
    }
    
    .wcboost-variation-swatches__item {
        font-size: 12px !important;
    }
    
    .wcboost-variation-swatches__wrapper {
        gap: 6px !important;
    }
    
    .single-product div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }
    
    .single-product div.product form.cart .quantity {
        margin-right: 0;
        margin-bottom: 10px;
        align-self: flex-start;
    }
    
    .single-product div.product form.cart .single_add_to_cart_button {
        min-width: auto;
    }
}

 */
/* 

 @media (min-width: 1024px) {
  .woocommerce-product-gallery {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-height: 480px;
  }
  .woocommerce-product-gallery__thumbnails {
    order: 1;
    flex-direction: column;
    min-width: 90px;
    max-width: 120px;
    margin: 0 16px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    gap: 8px;
  }
  .woocommerce-product-gallery__image {
    order: 2;
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 100%;
  }
  .woocommerce-product-gallery__thumbnails img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0;
  }
} */

.woocommerce-product-gallery__trigger {
    z-index: 1 !important;
}


/* Left-thumbnail layout for desktop using flexbox so the DOM order and event bindings remain intact.
   This keeps ol.flex-control-thumbs / .woocommerce-product-gallery__thumbnails in-place (no absolute positioning)
   so the theme/gallery JS continues to detect and handle thumbnail clicks. */
@media (min-width:1024px) {
    .single-product .woocommerce-product-gallery {
        display: flex !important;
        align-items: flex-start !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }ß

    /* Keep both possible thumbnail containers (server-rendered and FlexSlider) visible and stacked vertically */
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__thumbnails,
    .single-product .woocommerce-product-gallery ol.flex-control-thumbs {
        /* put thumbnails on the left: make them order 1 and reserve fixed width */
        order: 1;
        flex: 0 0 120px !important;
        width: 120px !important;
        max-width: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        /* spacing to separate thumbs and main image when thumbs are on the left */
        margin: 0 16px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Make the main gallery area take remaining space */
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
        /* main gallery after thumbs when thumbs are on the left */
        order: 2;
        flex: 1 1 auto !important;
        min-width: 0 !important; /* allow flex child to shrink properly */
    }

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__thumbnails img,
    .single-product .woocommerce-product-gallery ol.flex-control-thumbs img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Stronger overrides to neutralize theme/plugin floats and ensure left-column thumbs */
@media (min-width:1024px) {
    /* Target common breadcrumb of selectors used by themes/plugins (higher specificity) */
    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__thumbnails,
    .single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs,
    .single-product div.product div.images .flex-control-thumbs,
    .single-product div.product div.images .woocommerce-product-gallery__thumbnails {
        /* cancel floats and force a vertical column */
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 120px !important;
        width: 120px !important;
        max-width: 120px !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
        list-style: none !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Ensure each thumb list item doesn't float and fills the column */
    .single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li,
    .single-product div.product div.images .flex-control-thumbs li {
        float: none !important;
        width: 100% !important;
        display: block !important;
        margin: 0 0 12px 0 !important;
    }

    /* Thumb images should fill their container */
    .single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li img,
    .single-product div.product div.images .flex-control-thumbs li img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
    }
}



/* Strong force: ensure thumbs render on the left regardless of FlexSlider DOM order
   Targets the FlexSlider viewport and the OL thumbs container and uses a negative
   order so thumbnails appear first in the flex row. This complements the earlier
   left-column rules and defeats cases where the slider's viewport has order:0. */
@media (min-width:1024px) {
/* ===== Fix: ensure main product image shows fully (not zoomed/cropped) ===== */
/* This disables the JS-generated zoom overlay and forces the main image to fit inside
   its container so users see the whole photo. If you want zoom-on-hover later,
   we can re-enable a lightbox approach instead. */
.single-product div.product .woocommerce-product-gallery__wrapper {
    overflow: visible !important; /* allow the full image to be visible */
}

.single-product div.product .woocommerce-product-gallery__image,
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery__image img.wp-post-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* ensure full image is visible */
    transform: none !important; /* cancel any scaling transforms */
}

/* Hide/neutralize the zoom overlay (plugins like elevateZoom insert .zoomImg) */
.single-product div.product .woocommerce-product-gallery__wrapper .zoomImg,
.woocommerce-product-gallery .zoomImg,
.zoomImg {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Also ensure any container that previously clipped the image does not hide it */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image {
    max-width: 100% !important;
}

    .single-product div.product .woocommerce-product-gallery {
        flex-direction: row !important;
        align-items: flex-start !important;
        direction: ltr !important;
    }

    /* Put any thumbnail container before the main viewport */
    .single-product div.product .woocommerce-product-gallery > ol.flex-control-thumbs,
    .single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__thumbnails,
    .single-product div.product .woocommerce-product-gallery > .flex-control-thumbs,
    .single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__thumbnails {
        order: -1 !important; /* negative puts thumbs first */
        flex: 0 0 120px !important;
        width: 120px !important;
        max-width: 120px !important;
        margin: 0 16px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        list-style: none !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Ensure the slider viewport / wrapper come after thumbs */
    .single-product div.product .woocommerce-product-gallery > .flex-viewport,
    .single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
    .single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__image {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* Fix: ensure gallery viewport/wrapper don't collapse and slides are not floated */
@media (min-width: 1024px) {
  .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    min-height: 320px !important; 
    overflow: visible !important;
  }

  /* make sure slider slides don't use float which can collapse containers */
  .woocommerce-product-gallery .flex-viewport ul,
    .woocommerce-product-gallery .flex-viewport ul,
    .woocommerce-product-gallery .flex-viewport ul li,
    .woocommerce-product-gallery .flexslider .slides > li {
        /* Ensure slides are laid out horizontally so FlexSlider translate3d moves them correctly */
        float: left !important;
        display: block !important;
    }

  /* ensure images inside slides scale correctly */
  .woocommerce-product-gallery .flex-viewport img,
  .woocommerce-product-gallery__image img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Layout: constrain gallery wrapper and thumbnail column so main image remains visible */
@media (min-width: 1024px) {
  .woocommerce-product-gallery {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .woocommerce-product-gallery__thumbnails,
  .woocommerce-product-gallery ol.flex-control-thumbs {
    order: -1 !important;
    flex: 0 0 120px !important;
    width: 120px !important;
  }

  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery .flex-viewport {
    order: 1 !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 140px) !important;
    box-sizing: border-box !important;
  }
.woocommerce-product-gallery__image { display: none !important; }  
.woocommerce-product-gallery .crispal-gallery-visible { display: block !important; }

.elementor-widget-woocommerce-product-images img {
    max-height: 75vh !important;
}
.elementor-element-63b4b327 {
    max-width: 810px !important;
}





/* 
.elementor-widget-woocommerce-product-images {
    max-height: 75vh !important;
}

.wp-post-image {
    max-height: 75vh !important;
}

.crispal-gallery-visible {
max-height: 75vh !important;
}
.woocommerce-product-gallery--with-images .flex-viewport {
    max-height: 200px !important;

} */

}


/* 
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
  position: relative !important;
}
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__wrapper {
  position: relative !important;
}


.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__trigger {
  z-index: 30 !important;
}

.woocommerce-product-gallery .zoomImg {
  pointer-events: none !important;
  max-width: none !important;
  max-height: none !important;
}

[data-crispal-clone] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
 */

/* Fix: remove default underline from <ins> and <del> inside product content
     Some editors/templating insert <ins>/<del> which default to underlined/struck text.
     Scope to single-product pages so we don't change global semantics. */
.single-product ins,
/* .single-product del, */
.single-product .entry-content ins,
.single-product .entry-content del {
    text-decoration: none !important;
    text-decoration-line: none !important;
    /* font-weight: 700 !important; */
}

.single-product del {
    font-weight: normal;
    /* font-size: 20px; */
}

.single-product ins {
    /* font-size: 20px; */
    font-weight: 700;    
}


/* Defensive: ensure product loop links don't underline price text (redundant but harmless) */
/* .woocommerce-LoopProduct-link .woocommerce-Price-amount,
.woocommerce-loop-product__link .woocommerce-Price-amount,
a .woocommerce-Price-amount {
    text-decoration: none !important;
    text-decoration-line: none !important;
} */

.woocommerce-Price-amount {
    font-weight: 700;
    color: #333333 !important;
    /* text-decoration: none !important;
    text-decoration-line: none !important; */
}

.elementor-element-7a93cc9b {
    text-align: center !important;
    margin: 0px auto;
    max-width: 800px;
}

.woocommerce-loop-product__title {
    font-weight: normal !important;
    color: #333333 !important;
}

/* ==========================================
   MOBILE HAMBURGER MENU BACKGROUND FIX
   ========================================== */

/* Fix transparência do menu hamburger em mobile - aplicar fundo branco sólido */
@media (max-width: 768px) {
    .elementor-menu-toggle {
        background-color: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        padding: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Garantir que as barras (spans ou pseudo-elementos) sejam visíveis */
    .elementor-menu-toggle::before,
    .elementor-menu-toggle::after,
    .elementor-menu-toggle span {
        background-color: #333333 !important;
        display: block !important;
        height: 2px !important;
        width: 20px !important;
        margin: 2px 0 !important;
    }
    
    /* Se usa um ícone diferente, garantir visibilidade */
    .elementor-menu-toggle i,
    .elementor-menu-toggle svg {
        color: #333333 !important;
        fill: #333333 !important;
    }
}