/*

Theme Name: Chribbe
Author: Chribbe
Author URI: https://acecom-group.com
Description: Default theme for all our stores.
Version: 9.9
Text Domain: cr_chribbe
*/



/* Site */



/* Ensure full-height layout */

html, body {

    height: 100%;

    margin: 0;

    padding: 0;

}



/* Main container to push footer down */

#page-wrapper {

    display: flex;

    flex-direction: column;

    min-height: 100vh; /* Full height */

}



/* Main content should take available space */

main {

    flex: 1; /* Pushes footer down */

}






/* ── Layout: Boxed ───────────────────────── */
body.layout-boxed {
    background-color: var(--ace-body-bg, #f0f0f0);
}

body.layout-boxed #page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}



.centered-logo .navbar-brand {
  margin-left: auto;
  margin-right: auto;
}







/* Header - Offcanvas */



.offcanvas-body .list-group-item {

    /* border: none; */

    padding: 10px 15px;

}



.offcanvas-body .list-group-item a {

    color: #333;

    font-weight: 500;

}



.offcanvas-body .list-group-item a:hover {

    color: #1f4c44;

}







/* Footer */















#page {

    min-height: 100%;

    display: flex;

    flex-direction: column;

}











/* Adjust offcanvas position when the WordPress admin bar is active */



.admin-bar .offcanvas {

    margin-top: 32px; /* Move the offcanvas down to clear the admin bar */

}

.admin-bar header {

    top: 32px; /* Move the header down to clear the admin bar */

}



 







/* Category page - Description */



.term-description {

    /* p-4 woocommerce-archive-description small text-muted */

    padding: 1rem;

    color: #6c757d;

    font-size: 0.8rem;

    text-align:center;

}







/* Category page - Breadcrumb */



/* .woocommerce-breadcrumb {

    border

} */







/* Category page - Subcategories */



 .wc-subcategories-pagination {

    list-style: none;

    padding: 0;

    margin: 0;

    text-align: center

}





ul.wc-subcategories-pagination li {

    display: inline-block;

    margin-right: 10px;

    margin-bottom: 10px

}

/*

ul.wc-subcategories-pagination li a {

    display: inline-block;

    padding: 8px 15px;

    border: 0px solid #000;

    border-radius: 20px;

    background-color: #f2f2f2;

    color: #000;

    font-weight:600;

    text-decoration: none

}



ul.wc-subcategories-pagination li a:hover {

    background-color: #c9c9c9

} */



.toggle-subcategories {

    cursor: pointer;

    font-size: 0.8rem;

}

.list-group .collapse {

    display: none;

}



.list-group .collapse.show {

    display: block;

}











/* Category page - Product Card Hover Effects */







  











/* Thumbnail Hover Effect */

.thumbnail-img {

    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;

    cursor: pointer;

    border: 1px solid #eee;

    padding: 10px;

}



.thumbnail-img:hover {

    transform: scale(1.1);

    /* border: 1px solid #ddd; Blue border on hover */

}



.active-thumbnail {

    border: 2px solid #bbb;  

    border-radius: 15px; 

   /* opacity: 0.5; */

}



/* Custom Close Button */

.lg-custom-close {

    position: absolute;

    top: 15px;

    right: 20px;

    font-size: 32px;

    color: white;

    background: none;

    border: none;

    cursor: pointer;

    z-index: 9999;

    opacity: 0.8;

    transition: opacity 0.3s ease-in-out;

}



.lg-custom-close:hover {

    opacity: 1;

}



/* Adjust LightGallery overlay opacity */

.lg-backdrop {

    background-color: rgba(0, 0, 0, 0.8) !important; 

}







/* Center LightGallery thumbnails at the bottom */

.lg-thumb-outer {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    width: 100% !important;

}



/* Ensure thumbnails remain aligned properly */

.lg-thumb {

    display: flex;

    justify-content: center;

    gap: 5px; /* Add spacing between thumbnails */

}



/* Make thumbnails smaller for a cleaner look */

.lg-thumb-item {

    max-width: 60px !important;

    max-height: 60px !important;

    opacity: 0.6;

    transition: opacity 0.3s ease;

}



/* Highlight active thumbnail */

.lg-thumb-item.active {

    opacity: 1;

    border: 2px solid white;

    border-radius: 4px;

}









/* Smooth fade & slide transition */

#main-gallery-image img {

    transition: opacity 0.3s ease, transform 0.3s ease;

}



/* Hide the image while changing */

.main-image-hidden {

    opacity: 0;

    transform: translateX(-20px); /* Slide left */

}

/* Category loop image styles */
.max-h-100 {
    max-height: 100%;
}









/* Product page */



@media (min-width: 576px) 

{

    .quantity-container 

    {

      max-width: 140px;      

    }

    .quantity-input 

    {

        width: 50px;

    }

  }





/* Hide number input arrows (Chrome, Safari, Edge, Opera) */

.quantity-input::-webkit-outer-spin-button,

.quantity-input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



/* Hide number input arrows (Firefox) */

.quantity-input {

    -moz-appearance: textfield;

}











.product-card {

    border: 1px solid transparent; /* ✅ Invisible border initially */

    border-radius: 15px;

    transition: border-color 0.1s ease-in-out, box-shadow 0.3s ease-in-out; /* ✅ Smooth transition */

}



.product-card:hover {

    border-color: #ccc !important; /* ✅ Adds visible border without resizing */

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* ✅ Optional: Add soft shadow */

}







/* carousel */



.carousel-inner {

    padding: 1em;

  }

  .product-card {

    margin: 0 0.5em;

    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);

    

  }

   /* Style the carousel control buttons */

.carousel-control-prev,

.carousel-control-next 

{

    /* background-color: #e1e1e1 !important;  */

    width: 50px; /* Set a fixed size */

    height: 50px;

    color: #000 !important; /* Force black icon */

    border-radius: 50%; /* Make it round */

    top: 50%;

    transform: translateY(-50%);

    opacity: 1 !important; /* Ensure visibility */

}



/* Make sure the icon inside is also dark */

.carousel-control-prev-icon,

.carousel-control-next-icon {

    filter: invert(1) !important; /* This turns the default white Bootstrap icon to black */

}



/* Optional: Add hover effect */

.carousel-control-prev:hover,

.carousel-control-next:hover {

    background-color: #c7c7c7 !important;

}





  

  .product-card .img-wrapper {

      max-width: 100%;

      height: 13em;

      display: flex;

      justify-content: center;

      align-items: center;

  }

  .product-card img {

      max-height: 100%;

  }



  @media (min-width: 768px) {

    .carousel-inner {

    --items-per-slide: 3; /* Number of items per slide */

    }

    }

    @media (min-width: 1024px) {

        .carousel-inner {

        --items-per-slide: 4; /* Number of items per slide */

        }

    }

    @media (min-width: 1280px) {

        .carousel-inner {

        --items-per-slide: 5; /* Number of items per slide */

        }

    }



  @media (min-width: 768px) {

    .carousel-item {

      margin-right: 0;

      flex: 0 0 calc(100% / var(--items-per-slide)); /* Dynamically controlled */

      display: block;

    }

    .carousel-inner {

      display: flex;

    }

  }



  @media (max-width: 767px) {

    .product-card .img-wrapper {

      height: 17em;      

    }

  }



    









  /* Home page Banners */


 /* .banner-img{
    height:260px;
    width:100%;
    object-fit:cover;
} */

  







 











/* #place_order {

    width: 100%;

    padding: 0.75rem 1.5rem;

    font-size: 1.2rem;

    background-color: #0d6efd;

    border: none;

    color: white;

    border-radius: 0.3rem;

  } */



  #woocommerce-info

  {

    border-top:3px solid #0d6efd;

  }



/* CTA button text adjustments */

  .cta-mobile { display: none; }
@media (max-width: 430px) {
    .cta-desktop { display: none; }
    .cta-mobile  { display: inline; }
}




/* =====================================
   Homepage banners – layout v3
===================================== */

.cr-hp-banners-v3 .cr-banner-square {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;   /* magin */
    overflow: hidden;
}

.cr-hp-banners-v3 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional hover */
.cr-hp-banners-v3 a:hover img {
    transform: scale(1.03);
    transition: transform .25s ease;
}




/* MOBILE: se till att loggan alltid får plats mellan knapparna */

@media (max-width: 991.98px) {

  #site-header .navbar-brand {
    /* så den kan krympa i flex */
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  #site-header .navbar-brand img {
    height: 40px;
    width: auto;

    /* viktigaste raden: loggan får aldrig bli bredare än utrymmet */
    /* max-width: calc(100vw - 160px); */
    max-width: clamp(120px, 45vw, 220px);
    /* 140px ≈ hamburger + cart + lite marginal. Justera vid behov. */

    object-fit: contain;
  }

  /* #site-header .navbar-brand img{
    height: 40px;
    width: auto;
    max-width: clamp(120px, 45vw, 220px);
    object-fit: contain;
  } */
}




/* ============================================================
 *  Color swatch (html_color) — corner badge on main image
 * ============================================================ */
.ace-color-swatch {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    z-index: 4;
    pointer-events: none;
}

@media (max-width: 576px) {
    .ace-color-swatch {
        width: 36px;
        height: 36px;
    }
}