/**
* custom.css file created by Brandon Template
* @package Brandon Template
* @author Youjoomla.com
* @website Youjoomla.com 
* @copyright	Copyright (c) since 2007 Youjoomla.com.
* @license PHP files are released under GNU/GPL V2 Copyleft License.CSS / LESS / JS / IMAGES are Copyrighted material
**/
/*
 ADD ALL YOUR CUSTOM CSS OVERRIDES TO THIS FILE.
 THIS WAY IF YOU MAKE A MISTAKE YOU CAN ALWAYS TURN CUSTOM CSS FILE OFF
 AND REVERT BACK TO ORIGINAL TEMPLATE CSS
 THIS FILE WILL LOAD VERY LAST AFTER ALL TEMPLATE CSS FILES.
 SO YOU CAN OVERRIDE ANY CSS PART OF THE TEMPLATE YOU NEED.
*/
@media (max-width: 767px) {
  /* Target each of the 5 columns and turn it into a flex container */
  #newgrid2 > [id^="mewposition"] {
    display: flex;
    justify-content: space-between;
    row-gap: 10px;
  }

  /* Target the image modules INSIDE those columns */
  #newgrid2 > [id^="mewposition"] > .yjsquare {
    width: 48%; /* Set width to create two columns */
  }
}
/* Fix for product list price alignment */
.mijoshop .product-list .product-thumb .price {
    padding-right: 15px;
}
/* --- FIX FOR FULL-WIDTH HERO SECTION --- */
/* --- FIX FOR FULL-WIDTH HERO SECTION --- */

/* This rule allows the hero section to "break out" of the main site container */
#layout_type.yjsgsitew {
  overflow: visible !important;
}

/* This more specific rule removes the unwanted white space around the hero section */
#newgrid1.yjsg_grid {
  padding: 0 !important;
}
/* --- FIX FOR FULL-WIDTH HERO SECTION --- */

/* This rule allows the hero section to "break out" of the main site container */
#layout_type.yjsgsitew {
  overflow: visible !important;
}

/* This more specific rule removes the unwanted white space around the hero section */
#newgrid1.yjsg_grid {
  padding: 0 !important;
}

/* pašrakstītie */

.nopadding {
    margin-right: 25px !important;
  	margin-bottom: 25px !important;
  	margin-top: 15px !important;
  	border: 1px solid #dbdbdb;
}

#newgrid2 {
    border-top: 0px solid #3498db !important;
  	background: none;
  	padding-left:25px
}

#yjsg1.yjsg_grid {
    padding: 0px;
    margin-bottom: 0px;
    border-top: 0px solid #3498db;
  	padding-left: 15px;
}

#yjsg2.yjsg_grid {
    padding: 0px;
    margin: 0px;
    padding-left: 15px;
}

.modid298 {
  border: none;
}
.web-katalogs-spec {
    background-color: #3498db !important; /* Change #ff0000 to your desired color */
}
ul.megamenu.level0 li a:hover {
  text-decoration: underline !important;
  background-color: #3498db;
}
@media (min-width: 992px) {
  #content_oc > .col-sm-8 {
    width: 41%;
  }

  #content_oc > .col-sm-4.product_view_infos {
    width: 59%;
  }
}



/* 2. --- DESKTOP HORIZONTAL LAYOUT (screens > 767px) --- */
@media (min-width: 768px) {
    /* Reset item to full-width */
    .product-layout.product-list {
        float: none !important;
        width: 100% !important; 
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 30px !important;
    }
    /* Reset container */
    .product-list .product-thumb {
        display: block !important;
        height: auto !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Image on Left */
    .product-list .product-thumb .image {
        float: left !important; 
        width: 260px !important;
        margin: 0 10px 10px 0 !important; /* 10px space */
        text-align: left !important;
    }

    /* Text on Right */
    .product-list .product-thumb > div:not(.image) {
        display: block !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: auto !important; /* This makes it respect the float */
    }

    /* --- THE KEY FIX (from your screenshot) --- */
    .product-list .product-thumb .caption {
        margin-left: 0 !important; /* Removes the "ugly gap" */
        margin-top: 0 !important; /* Align text to top */
        padding-top: 0 !important;
        border-top: none !important; 
        display: block !important;
        visibility: visible !important;
    }
    
    .product-list .product-thumb .caption p:not(.price) {
        display: block !important; /* Show description */
    }
}

/* 3. --- MOBILE STACK (screens <= 767px) --- */
@media (max-width: 767px) {
    .product-layout.product-list {
        float: none !important;
        width: 100% !important;
        padding: 0 5px !important; 
        margin-bottom: 20px !important;
    }
    .product-list .product-thumb {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    /* Stacked image */
    .product-list .product-thumb .image {
        float: none !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important; 
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        border-radius: 8px;
    }
    .product-list .product-thumb .image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Stacked text */
    .product-list .product-thumb > div:not(.image) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .product-list .product-thumb .caption {
        margin-left: 0 !important;
        text-align: center;
    }
    .product-list .product-thumb .caption p:not(.price) {
        display: block !important; /* Show description */
    }
    .product-list .product-thumb .caption p.price {
        padding-top: 5px !important;
        border-top: none !important;
    }
}

#midblock .insidem {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.newsitem_tools {
    display: none;
}

@media (max-width: 767px) {
    .mijoshop .row.miwi-categoryhome {
        display: block !important;
    }

    .mijoshop .row.miwi-categoryhome > [class*='col-'] {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 30px;
        margin-left: 0;
        margin-right: 0;
    }

    .mijoshop .product-thumb .image {
        text-align: center;
    }
    
    .mijoshop .product-thumb .image img {
        margin: 0 auto;
        display: block;
    }

    .mijoshop .product-thumb h4 {
        text-align: center;
        font-size: 18px;
    }
}