/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* ========================================
   FIX: Elementor Image Carousel Responsive

   ROOT CAUSE: Porto theme's .container and .column1.boxed have
   fixed widths that don't respond to mobile viewport.

   Using max-width with vw units to cap size without triggering
   resize observer loops.
   ======================================== */

/* Page-level overflow protection */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Fix for very small screens (below ~321px) */
@media (max-width: 321px) {
  .column1.boxed,
  .column1.boxed .container,
  .boxed .container,
  body .container,
  .main-content-wrap,
  .main-content,
  .page-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-widget-image-carousel,
  .elementor-image-carousel-wrapper.swiper,
  .swiper-slide {
    max-width: 100% !important;
    width: 100% !important;
  }
}



/* Fix Porto's fixed-width containers on mobile/tablet */
@media (max-width: 991px) {
  /* Cap containers at full viewport width */
  .column1.boxed {
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .column1.boxed .container,
  .boxed .container,
  body .container {
    max-width: 100vw !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Main wrappers - cap at viewport */
  .main-content-wrap,
  .main-content,
  .page-content,
  .main-content-wrap .row {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Elementor containers */
  .elementor,
  .elementor > .e-con,
  .e-con-inner,
  .elementor-widget-image-carousel {
    max-width: 100% !important;
  }
}

/* ========================================
   OPTIONAL: Side margins on mobile/tablet

   Uncomment this block to add 36px margins on each side.
   Comment it out for full-width (edge-to-edge) layout.
   ======================================== */

@media (max-width: 991px) {
  #main {
    max-width: calc(100vw - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ======================================== */


/* Constrain the swiper container */
.elementor-image-carousel-wrapper.swiper {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Force slides and images to fit */
@media (max-width: 991px) {
  .elementor-widget-image-carousel .swiper-slide {
    max-width: 100% !important;
  }

  .elementor-widget-image-carousel .swiper-slide-image {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}

.main-content {
  padding-top: 24px;
  padding-bottom: 24px;
}

header .logo {
    height: 120px;
    width:  120px;
}

header .sticky .logo {
    height: 80px;
    width:  80px;
}

.main-menu li a {
    border-radius: 9px !important;
}

.bottom-border {
    border-bottom: 3px solid var(--e-global-color-primary);
}

.page-top .breadcrumbs-wrap {
  color: #773232;
}

/******* Alert Container styling *******/
#mpa-alert-container {
    /* padding: 9px; */
    text-align: center;
    background-color: var( --e-global-color-secondary );
    color: var( --e-global-color-primary );
    border-radius: 13px;
    font-size: 17px;
}

#mpa-alert-container .highlight {
    font-weight: bold;
    font-size: 20px;
}

div.ct-mpac-min-amount-notice {
  border: none !important;
  padding: 9px !important;
}
/***********************************************/

/******* Stores - Layout Fix for Zoom/4K *******/

/* Main container - fill available viewport space */
#wpsl-wrap {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 120px - 150px); /* viewport - page-top - footer approx */
    /* NO max-height - allows natural expansion when zoomed in or content overflows */
}

/* Search form - auto height */
#wpsl-search-btn {
    padding: 0;
    border: none;
    margin: 0;
    flex: 0 0 auto;
}

#wpsl-search-btn input {
    border-width: 3px;
}

/* Map - fixed proportion of container */
#wpsl-gmap,
.wpsl-gmap-wrap {
    flex: 0 0 400px; /* Fixed 400px height for map */
    min-height: 380px;
    max-height: 500px;
}

/* Stores list - fills remaining space */
#wpsl-result-list {
    flex: 1 1 auto; /* Grows to fill space */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#wpsl-stores {
    flex: 1 1 auto;
    overflow-y: auto; /* Scrollable if too many stores */
    min-height: 200px; /* Minimum height */
}

#wpsl-stores .wpsl-store-thumb {
  float: right;
  border-radius: 3px;
  margin: 0px 0 0 10px;
  padding: 0;
  border: none;
}

/* Highlighted listing item */
#wpsl-stores li.wpsl-store {
    transition: background-color .15s ease, box-shadow .15s ease;
    border: none;
    border-left: 4px solid rgba(0, 0, 0, 0.125);
}

.wpsl-store-active {
    background-color: #f8f9fa;
    border-left: 4px solid var(--porto-primary-color) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Mobile: Allow natural height */
@media (max-width: 767px) {
    #wpsl-wrap {
        min-height: auto;
        max-height: none;
    }
    
    #wpsl-stores {
        height: auto !important;
        overflow: initial;
        min-height: auto;
    }
    
    #wpsl-gmap,
    .wpsl-gmap-wrap {
        flex: 0 0 380px;
    }
}

@media (max-width: 675px) {
  #wpsl-gmap {
    margin-top: 0px;
  }
}


/******************************/

/******* Make Footer stick to the bottom *******/
html, body {
    margin: 0;
}

/* Use CSS custom property for stable viewport height on mobile */
:root {
    --vh: 1vh; /* Fallback, will be set by JS for mobile */
}

.page-wrapper {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100); /* Uses stable height on mobile */
    display: grid;                 /* grid avoids breaking bootstrap flex/grid */
    grid-template-rows: auto 1fr auto;
}

#main {
    width: 100%;                   /* ensure Bootstrap grid keeps full width */
}

#footer {
    width: 100%;
}
/***********************************************/

/******* Page Top Bubbles Background *******/
.page-top {
  position: relative;
  overflow: hidden;
  /* background-image: linear-gradient(to right, #ff7e5f, #feb47b); */
  background-image: radial-gradient( #feb47b, #cb4827);
  height: 120px !important;
}

#floatingbubbles {
  pointer-events: none; /* ensures it doesn't block clicks */
}

.page-top > *:not(#floatingbubbles) {
  position: relative;
  z-index: 1; /* keep your content above the bubbles */
}
/***********************************************/

/* ========================================
   ISSUE 3: Hide View Cart Button & Notices
   ======================================== */

/* Hide "View Cart" button that appears after add to cart */
.added_to_cart,
a.added_to_cart {
    display: none !important;
}

/* Hide all WooCommerce success notices */
.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
    display: none !important;
}

/* Hide notice wrapper if empty */
.woocommerce-notices-wrapper:empty {
    display: none !important;
}

/* Specifically hide add-to-cart notices */
.woocommerce-message[role="alert"] {
    display: none !important;
}

/* ========================================
   ISSUE 2: Inline Variation Price Display
   ======================================== */

/* Price column in variations table */
.single-product .variations_form .variations .variation-price-cell {
    padding-left: 1rem;
    vertical-align: middle;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--porto-heading-color, #222);
}

/* Hide the original price location (below table) */
.single-product .variations_form .single_variation_wrap .woocommerce-variation-price {
    display: none !important;
}

/* Ensure table layout stays intact */
.single-product .variations_form .variations tbody tr {
    display: table-row;
}

.single-product .variations_form .variations tbody tr th,
.single-product .variations_form .variations tbody tr td {
    display: table-cell;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .single-product .e-con-inner > div:first-child {
        order: 2;
    }

    .single-product .e-con-inner > div:nth-child(2) {
        order: 1;
    }
}

/* ========================================
   FIX: Tablet breakpoint overflow (768px-991px)
   
   PROBLEM: At this range, the header switches to mobile mode but
   Elementor's .e-con-inner stays at desktop width (1000px).
   This overflow propagates up and pushes header elements off-screen.
   
   SOLUTION: Contain the overflow at the main content level so it
   can't affect the header layout. The content will clip at edges
   but the 50/50 gallery layout should still display correctly.
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    body.single-product {
        overflow-x: hidden;
    }
    
    .single-product #main,
    .single-product .main-content {
        overflow-x: hidden;
    }
}

/* ========================================
   MOBILE SCROLLING FIX
   Prevents viewport snap-back when mobile
   browser address bar hides/shows (iOS Safari, Chrome)
   ======================================== */

/* 
 * Problem: 100vh on mobile includes the area behind the URL bar.
 * When the user "throws" the page to scroll, the URL bar hides,
 * changing viewport height and causing layout jumps/scroll lock.
 * 
 * Solution: Use CSS custom property --vh set by JavaScript once on load.
 * This creates a stable height that doesn't change when URL bar hides.
 * See shaya-script.js for the JS that sets --vh.
 */