/* 
Theme Name:		 sorana
Theme URI:		 https://baliwebmaker.com/
Description:	 Sorana is a child theme of Twenty Twenty-Five
Author:			 BaliWebMaker
Author URI:		 https://baliwebmaker.com/
Template:		 twentytwentyfive
Version:		 1.0.0
Text Domain:	 sorana
*/

/* Change the WordPress default css breakpoints media query */
/* Menu button with shadow */
button.wp-block-navigation__responsive-container-close,
button.wp-block-navigation__responsive-container-open {
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--system);
    line-height: 1.7;
    padding: 0;
    border: 0px solid var(--wp--custom--button-border-color);
    border-radius: var(--wp--custom--button-border-radius);
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--foreground);
    box-shadow: none;
}

button.wp-block-navigation__responsive-container-close:hover,
button.wp-block-navigation__responsive-container-open:hover,
button.wp-block-navigation__responsive-container-close:focus,
button.wp-block-navigation__responsive-container-open:focus {
    color: var(--wp--preset--color--foreground);
    filter: brightness(94%) !important;
    box-shadow: none;
}

button.wp-block-navigation__responsive-container-close:active,
button.wp-block-navigation__responsive-container-open:active {
    border-color: var(--wp--custom--button-border-color);
    box-shadow: var(--wp--custom--button-highlight);
    color: var(--wp--preset--color--foreground);
    filter: brightness(93%) !important;
    margin-top: 1px;
    margin-bottom: -1px;
}

button.wp-block-navigation__responsive-container-close:visited,
button.wp-block-navigation__responsive-container-open:visited {
    background-color: initial;
    border-color: var(--wp--custom--button-border-color);
    color: var(--wp--preset--color--foreground);
    box-shadow: var(--wp--custom--small-button-shadow);
}
.wp-block-navigation__responsive-container-close{
    top:3em;
    right:3em;
}


/* Change the WordPress default css breakpoints media query */
.wp-block-navigation__responsive-container-content .wp-block-navigation__container{
     
}
.has-modal-open .wp-block-navigation__responsive-close{         
    margin-left:auto; 
    margin-right:0;
}
 
@media ( min-width: 782px ) {
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{ 
    text-transform: capitalize;
}
    .wp-block-navigation .wp-block-navigation__submenu-container
    {
        border-top:2px solid blueviolet !important; 
    }
     
    .is-nav-header-mobile , .is-responsive
    {
        display: none !important;
    }

    .wp-block-navigation.is-nav-header-desktop ul::before
    {
        height: 2rem;
        left: 0;
        right: 0;
        content: "";
        display: block;
        position: absolute;
        bottom: 100%;
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container
    { 
        top: calc(100% + 1.4rem) !important; 
        left: auto;
        right: 0;
    }
}

/*mobile*/
@media ( max-width: 781px ) {
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item
{
display: flex; 
flex-wrap: wrap; 
width: 100%;
justify-content: start;
flex-direction: row;
}
    .wp-block-navigation.is-nav-header-desktop  
    {
      display: none; 
      visibility:hidden;
    }


    .wp-block-navigation__responsive-close {
      padding : 0; 
        overflow-x: hidden;
        background-color:#fff;
        height: 100vh;
        max-width: 330px;
    }

    ul.wp-block-navigation__container{
        padding-top: 2em;
        width: 100%;
        
    }
    
ul.wp-block-navigation__container li a.wp-block-navigation-item__content{ 
align-items: center;
display: flex;
flex: 1;
justify-content:start;
max-width: 100%;
padding: .8rem;
  text-align:   start;
  width: auto;
}

    ul.wp-block-navigation__container li a:hover{ 
        color:#D3D3D3 !important;
    }
 
    .wp-block-navigation.is-nav-header-mobile .wp-block-navigation__responsive-container
    {
        right:0;
        overflow  : hidden;
        height:100% !important;
        padding: 0;
        animation: slide-out .3s forwards;
        -webkit-animation: slide-out .3s forwards;
    }
    
    .wp-block-navigation.is-nav-header-mobile .wp-block-navigation__responsive-container.is-menu-open
    {
        
        animation: slide-in 0.2s forwards;
        -webkit-animation: slide-in 0.2s forwards;
    }
    
    .is-nav-header-mobile .wp-block-navigation__responsive-container.is-menu-open::after
    {
        
    }
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
   margin: 0 auto;  width:80%; padding-top: 10px !important;
    }
    
    .wp-block-navigation.is-nav-header-mobile .wp-block-navigation__responsive-dialog,
    .wp-block-navigation.is-nav-header-mobile-id-ID .wp-block-navigation__responsive-dialog{ 
        gap:inherit; 
    }

.wp-block-navigation.is-nav-header-mobile :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),
    .wp-block-navigation.is-nav-header-mobile-id-ID :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)){
        padding: 0;
    }



    /* SUB menu*/
    .active {
   transform: rotate(-180deg);
    }
    .wp-block-navigation.is-nav-header-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon ,
    .wp-block-navigation.is-nav-header-mobile-id-ID .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
    align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  margin: 0 0 0 auto;
  padding: 1em 0;
  font-size: 100%;
  cursor: pointer;

    }
    .wp-block-navigation__submenu-container .wp-block-navigation-submenu{

  animation:'none';
  background:#fff;
  border:0;
  border-radius:0;
  display:flex;
  flex:1 1 100%;
  flex-wrap:wrap;
  font-size:'.9em';
  left:'auto';
  list-style-type:'none';
  margin:0;
  opacity:1;
  padding:0;
  position:'relative';
  top:'100%';
  width:'18rem';
  z-index:9
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        flex-wrap: wrap;
        flex: 1 1 100%;

    }
}

ul.is-nav-header-desktop li a:after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: red;
  transform-origin: bottom center;
  transition: transform 0.2s ease-out;
}

ul.is-nav-header-desktop li a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom center;
}
.wp-block-navigation__responsive-container { z-index:99999; }

.main-toggler {
  border-radius:0;
  width: 70px;
  height: 50px;
  border:0;
  outline:none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0;
  position: relative;
  background-color: rgba(0, 160, 210, 0) !important;
}

.main-toggler .toggler-icon, .main-toggler .toggler-icon::after, .main-toggler .toggler-icon::before {
border-radius: 1px;
height: 5px;
}

.main-toggler .toggler-icon::after, .main-toggler .toggler-icon::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: var(--mobile-menu-toggle-width,13px);
}
.main-toggler .toggler-icon::after {
  transform: var(--menu-toggle-line-after-transform, translateY(11px) rotate(0deg) );
  transition: var(--menu-toggle-line-after-transition,bottom .2s .2s,transform .2s 0s);
}

.main-toggler .toggler-icon::before {
  transform: var(--menu-toggle-line-before-transform,translate(-13px,-11px) rotate(0deg));
  transition: var(--menu-toggle-line-before-transition,top .2s .2s,transform .2s 0s);
 
}

.main-toggler .toggler-icon {
 background: var(--menu-toggle-icon-background,currentColor);
 
 transition: var(--menu-toggle-transition,background 0s .1s);
 transition:all .2s ease-in-out;
 width: 24px;
 margin: auto;
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
}


.sub-menu-toggle-icon {
  border-bottom-width: 2px;
  border-color: #242121;
  border-right-width: 2px;
  border-style: solid;
  border-top-style: solid;
  border-left-style: solid;
  border-left: 0;
  border-top: 0;
  height: .4em;
  transform: rotate(45deg);
  width: .4em;
  display: flex;
}


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{
    padding-top: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-icon{
    width:1.8em; margin-left:.465em;
}

.mobile-menu-visible {
  --menu-toggle-icon-background: transparent;
  --menu-toggle-line-spacing: 0;
  --menu-toggle-line-before-transform: rotate(45deg);
  --menu-toggle-line-after-transform: rotate(-45deg);
  --menu-toggle-line-before-transition: top 0.2s 0s,transform 0.2s 0.2s;
  --menu-toggle-line-after-transition: top 0.2s 0s,transform 0.2s 0.2s;
  --mobile-menu-display: block;
  --mobile-menu-animation: standardmenu 0.15s ease-in-out;
  --mobile-menu-toggle-width:20px;
}
.animate-left{position:relative;animation:animateleft 0.4s}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

@media (max-width: 781px) {
  .wp-block-table {
    table {
      width: max-content !important;
      table-layout: auto !important;
    }
  }
}
@keyframes slide-in {
    0% {
        -webkit-transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(0)
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}
.custom-category-wrapper{ 
-webkit-box-shadow: 6px 10px 8px -6px rgba(0,0,0,0.25); 
box-shadow: 6px 10px 8px -6px rgba(0,0,0,0.25);
background: #fff;
}
.custom-category-wrapper .woocommerce-loop-category__title{ font-size:12px !important;}
.custom-category-wrapper img{
border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.custom-category-wrapper .term-description{font-size:12px;}