/*
Theme Name: Civil Products
Theme URI: https://sellingonlinemadesimple.com.au/
Author: Ayu Candrawati
Author URI: https://sellingonlinemadesimple.com.au/
Description: Main theme for Civil Product WA website
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: civil-product-wa
*/
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  background: #fff;
  color: #131313;
}

.text-product-box a {
  display: flex; /* Menggunakan Flexbox */
  flex-direction: column; /* Menyusun elemen dalam kolom */
}

.single_add_to_cart_button  {
  background-color: #cf2f1d !important;
}


.category-text {
  order: 2; /* Menetapkan urutan kedua (setelah judul produk) */
}

.woocommerce-loop-product__title {
  order: 1; /* Menetapkan urutan pertama (sebelum kategori) */
}

p {
  margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6, .h1 .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
  color: #cf2f1d;
}


.h1, h1 {
    font-size: 2rem;
}
h2{
  font-size: 20px;
}
h3{
  font-size: 18px;
}
h4{
  font-size: 16px;
}
h5{
  font-size: 15px;
}

a {
  text-decoration: none;
  color: #ff6600;
  transition: all .2s ease-in-out;
}

a:hover {
  text-decoration: none;
  color: #cf2f1d;
  cursor: pointer;
}

.single .content-section p a, .single .content-section li a {
    text-decoration: underline;
}

.btn,
a, button {
  -webkit-transition: all .3s ease-out 0s;
  -moz-transition: all .3s ease-out 0s;
  -ms-transition: all .3s ease-out 0s;
  -o-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  max-width: 100%;
  margin: auto;
  height: auto;
  display: block;
}

/* section, .ihub-content, .ihub-page-content {
  line-height: 1.75rem;
} */

section, .ihub-content ul li {
  list-style: none;
}

/** Color Set **/
.bg-white {
  background-color: #fff;
}

.bg-red{
  background-color: #cf2f1d;
}

.bg-powderblue{
  background-color: #d7e4fc;
}

.bg-aliceblue{
  background-color: #e8f0ff;
}

.bg-orange{
  background-color: #ff6600;
}

.bg-darkblue{
  background-color: #182334;
}

.bg-lightgrey{
  background-color: #f6f6f6;
}

.text-red{
  color: #cf2f1d;
}

.text-orange{
  color: #f3a027;
}

.text-blue{
  color: #163655;
}

.text-black{
  color: #131313;
}

/** Original buttons  **/
.red-btn {
  background-color: #cf2f1d;
  color: #fff;
  text-align: center;
  font-weight: 500;
  padding: 7px 20px;
}

.red-btn:hover {
  background-color: transparent;
  color: #cf2f1d;
  border: 1px solid #cf2f1d;
}

.orange-btn {
  background-color: #ff6600;
  color: #fff;
  text-align: center;
  font-weight: 500;
  padding: 7px 20px;
}

.orange-btn:hover {
  background-color: transparent;
  color: #fff;
}

.grey-btn {
  background-color: #7e8695;
  color: #fff;
  text-align: center;
  font-weight: 500;
  padding: 7px 20px;
}

.grey-btn:hover {
  background-color: #646b79;
  color: #fff;
}

.ghost-btn {
  background-color: transparent;
  color: #000;
  text-align: center;
  font-weight: 500;
  padding: 6px 20px;
  border: 1px solid #000;
}

.ghost-btn:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
}

.ghostorange-btn {
  background-color: transparent;
  color: #fff;
  text-align: center;
  font-weight: 500;
  padding: 6px 20px;
  border: 1px solid #f3a127;
}

.ghostorange-btn:hover {
  background-color: #f3a127;
  color: #000;
  border: 1px solid #f3a127;
}

.white-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
  font-weight: 500;
  padding: 7px 20px;
}

.white-btn:hover {
  background-color: #fff;
  color: #000;
}

/** Typography ****/
.fs-14{
  font-size: 14px;
}
.fs-24{
  font-size: 24px;
}
.fw-500{
  font-weight: 500;
}
.fw-600{
  font-weight: 600;
}

/** Padding **/
.py-content{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Breadcrumbs */
#breadcrumbs, #breadcrumbs a{
  color: #767676;
}

/* Top Header */
.sosmed-box{
  display: flex;
}

/* Modal */
.modal{
  background: #000000c9;
}
.modal-dialog{
  height: 100vh;
  display: flex;
  align-items: center;
  margin: auto;
}
.modal-header{
  padding: 3rem;
  background-color: #cf2f1d;
}
.modal-header h5{
  font-size: 1.5rem;
  color: #fff;
  font-weight: 500;
}
.modal-header .close{
  margin: -1rem -1rem -1rem 0;
}
.modal-body{
  padding: 4rem 3rem;
}
.close{
  font-size: 2rem;
}

/** Post **/
.single h2 {
  margin-top: 2rem;
}
.single h3 {
  margin-top: 1.5rem;
}
.single h4, .single h5, .single h6 {
  margin-top: 1.2rem;
}

/** Product Category Page **/
.pcbdw-bottom-description-content h2 {
  margin-top: 2rem;
}
.pcbdw-bottom-description-content h3 {
  margin-top: 1.5rem;
}

/** Search All Page and Post **/
#searchform .form-control-lg{
  border-radius: 0.3rem 0 0 0.3rem;
}
.search-btn{
  background-color: #fcb315;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
}
.search-btn:hover{
  color: #fff;
}
.search-btn .fa{
  color: #000;
  font-size: 12px;
}
.btn-search{
	background: #fcb315;
	color: #191970;
	border:none;
}

/** Search Only Product **/
#searchProductModal form{
  display: flex;
}
#searchProductModal .form-control-lg{
  border-radius: 0.3rem 0 0 0.3rem;
}
#searchProductModal button[type=submit]{
  background: #e73420;
  color: #fff;
	border:none;
  padding-left: 2rem;
  padding-right: 2rem;
  text-transform: uppercase;
}
#searchProductModal button[type=submit]:hover{
  background: #cf2f1d;
}

/** Contact Form *********/
.form-group.required label::after {
  content: " *";
  color: red;
}

/** Navbar 1 **/

/* Compact buttons in red bar */
.top-header .btn.red-btn.btn-sm {
  background: #fff;
  color: #e33924;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 4px;
}
.top-header .btn.red-btn.btn-sm:hover {
  background: #e33924;
  color: #fff;
}

.search-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff; /* white circle */
  color: #e33924;   /* red icon/text */
  border-radius: 50px;
  padding: 6px 15px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.search-circle i {
  margin-right: 6px;
}

.search-circle:hover {
  background: #e33924;
  color: #fff;
}

ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-menu ul {
  margin-bottom: 0;
}

.top-menu ul.menu a {
  color: #000;
  display: block;
  padding: .5rem 1rem;
}

.top-menu ul.menu a:hover {
  color: #cf2f1d;
}

.top-menu ul.menu li {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.top-menu ul.menu li.current-menu-item a{
  color: #cf2f1d;
}

.top-menu ul.menu li:last-child {
  border-right: none;
}

.top-menu ul.menu li.menu-item-has-children>a:after {
  content: '\f107';
  font-family: FontAwesome;
  color: #212121;
  margin-left: 10px;
}

.top-menu ul.menu .sub-menu {
  position: absolute;
  background: #fff;
  padding: 0;
  margin: 0;
  z-index: 10;
 width: 280px;
  text-align: center;
  border: 1px solid #e6e6e6;
  box-shadow: 3px 3px 5px #0000002e;
}

.top-menu ul.menu>li>.sub-menu {
  top: 100%;
  list-style: none;
}

.top-menu ul.menu .sub-menu li>.sub-menu {
  right: -280px;
  top: 0;
  width: 280px;
}

.top-menu ul.menu .sub-menu li+li {
  border-top-color: #fff;
}

.top-menu ul.sub-menu>li:hover,
.top-menu ul.sub-menu>li.current-menu-item,
.top-menu ul.sub-menu>li.current-menu-ancestor,
.top-menu ul.sub-menu>li.current-menu-parent {
  color: #fff;
}

.top-menu ul.sub-menu>li a:hover {
  background-color: #ddd;
  color: #000;
}

.tnp-field-email label{
  display: none !important;
}

.tnp-subscription>form{
  display: flex !important;
}

.tnp-subscription .tnp-field-email{
  width: 90% !important;
}

.tnp-subscription .tnp-submit{
  background-color: #182334 !important;
}

.top-menu ul.sub-menu li:first-child a{
  padding-left: 1rem;
}

.top-menu ul.sub-menu>li:hover+li,
.top-menu ul.sub-menu>li.current-menu-item+li,
.top-menu ul.sub-menu>li.current-menu-ancestor+li,
.top-menu ul.sub-menu>li.current-menu-parent+li {
  border-top: none;
}

.top-menu ul.menu .sub-menu a {
  text-align: left;
  padding: 0.5rem 1rem;
}

.top-menu ul li ul.sub-menu li.menu-item-has-children>a:after{
  content: '\f105';
}

.showmenu {
  border: 1px solid #cf2f1d;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 24px;
} 


@media (max-width: 991.98px){
  .top-menu {
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .site-logo {
    max-height:70px!important;
    height:auto;
    width:auto;
  }
  .top-menu .menu {
    display:none; /* hide inline menu, use burger */
  }


/* Mobile Navbar */
#navbar-ihub1 {
  position: absolute;
  top: 100%;
  right: 0;                  /* align to right instead of left */
  width: 260px;              /* fixed width so it doesn’t overwhelm */
  max-height: 80vh;          /* avoid covering whole screen */
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  z-index: 9999;
}

/* Main nav list */
#navbar-ihub1 .menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navbar-ihub1 .menu li {
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
}

#navbar-ihub1 .menu a {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
  font-size: 15px;
}

/* Submenus collapsed by default */
#navbar-ihub1 .sub-menu {
  display: none;
  padding-left: 15px;
  border-left: 2px solid #eee;
}

#navbar-ihub1 .menu li.open > .sub-menu {
  display: block;
}

/* Toggle indicator */
#navbar-ihub1 .menu li.menu-item-has-children > a::after {
  content: "\25BC"; /* ▼ arrow */
  float: right;
  font-size: 0.7rem;
  margin-left: 8px;
}
#navbar-ihub1 .menu li.open > a::after {
  content: "\25B2"; /* ▲ arrow */
	


}
	/* Hamburger icon base */
.showmenu {
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10000; /* stay above menu */
}

/* Turn into X when active */
.showmenu.active i::before {
  content: "\f00d"; /* FontAwesome "times" (X) */
  font-family: "FontAwesome";
}

}



/* Logo */
.site-logo {
  max-height: 150px;   /* increase from default (often ~50px) */
  height: auto;
  width: auto;
}

/* Navbar center */
.main-navbar ul.menu {
  margin: 0;
  padding: 0;
}
.main-navbar ul.menu li {
  margin: 0 15px;
}
.main-navbar ul.menu a {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.main-navbar ul.menu a:hover {
  color: #cf2f1d;
}



/* Icons right */
.header-icons a {
  font-size: 20px;
  color: #000;
  transition: color 0.3s;
}
.header-icons a:hover {
  color: #cf2f1d;
}
.header-call i {
  font-size: 22px;
}

/* FORCE center the trio inside each 50% block */
.header-category-bar {
  display: flex;
  width: 100%;
}

.header-category-bar a.category-btn {
  flex: 1 1 50%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* center the icon-text-arrow group */
  text-align: center !important;
  gap: 10px; /* even spacing between icon, text, arrow */
}

/* Neutralize any Bootstrap justify utilities that might sneak in */
.header-category-bar a.category-btn[class*="justify-content-"] {
  justify-content: center !important;
}

/* Children shouldn’t stretch or push content */
.header-category-bar a.category-btn > * {
  flex: 0 0 auto;
  margin: 0; /* kill stray margins that shift the row */
}

/* Size + spacing */
.header-category-bar .btn-icon {
  width: 60px;
  height: auto;
}

.header-category-bar .btn-arrow {
  font-size: 1.8rem;
  margin-left: 10px; /* replaces ml-2 */
}

/* Colors (keep your halves) */
.header-category-bar .hardware-btn { background: #e33924; }
.header-category-bar .signage-btn  { background: #f58220; }

/* Text styling */
.header-category-bar a.category-btn span {
  color: #fff !important;
  font-size: 2rem;       /* adjust size */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 0;       /* padding above and below */
  display: inline-block; /* makes padding apply nicely */
}

/* Arrow styling */
.header-category-bar a.category-btn i {
  color: #fff !important;   /* make arrow white */
  font-size: 1.6rem;        /* scale arrow a bit larger */
  margin-left: 8px;         /* spacing between text and arrow */
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .header-category-bar {
    flex-direction: row;   /* stay side by side */
  }

  .header-category-bar a.category-btn {
    width: 50%;            
    text-align: center;    
    padding: 12px 0;       
    display: flex;         
    align-items: center;   
    justify-content: center;
    gap: 6px;              
  }

  .header-category-bar a.category-btn span {
    font-size: 1rem;     
    font-weight: 600;
  }

  /* Hide the logo icon image only */
  .header-category-bar a.category-btn img {
    display: none;
  }
}




/** Header Banner **/
.home h1{
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.home h2{
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.home h3 {
  font-size: 1.75rem;
}
.home-banner p {
  font-size: 15px;
}
/* Home Section 1 - First Division (Image Column) */
#home-section-1 .col-12.col-lg-5 {
  max-width: 40%;   /* shrink the column */
  flex: 0 0 40%;    /* force flex width */
}

#home-section-1 .col-12.col-lg-5 img.compact-img {
  max-width: 80% !important; /* shrink image inside */
  height: auto;
  display: block;
  margin: 0 auto;            /* center it */
}



.border-bottom-orange{
  border-bottom: 2px solid #f68f1e;
}
.cta-box a{
  color: #cf2f1d;
  font-size: 26px;
  font-weight: 700;
}
.cta-box a:hover{
  color: #ff6600;
}

.section-button-next,
.section-button-prev {
  color: #131313;
  background: transparent;
  z-index: 10;
  cursor: pointer;
  text-align: center;
  border-radius: 2rem;
  display: table;
  min-width: 18px;
  min-height: 69px;
  font-size: 24px;
  top: 34%;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: '';
  font-weight: 300;
}

.fa-2x {
  vertical-align: middle;
  display: table-cell;
}



/* Section 2 tighter layout */
#home-section-2 {
  padding: 20px 0 !important;   /* smaller padding */
}

#home-section-2 .box-categoryproduct {
  margin-bottom: 1rem; /* tighter spacing between items */
  padding: 0 0.5rem;   /* reduce side padding */
}

#home-section-2 h5 {
  font-size: 1rem;     /* ~16px */
  margin-bottom: 0.4rem;
}

#home-section-2 p {
  font-size: 0.85rem;  /* ~13.5px */
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

/* Section 3 - featured product */
.featured-product h2{
  font-size: 1.25rem;
}


/* Section 6 - New, Special, Coming soon product */
.mix-product h2{
  font-size: 1.25rem;
}

/* FAQ */
#faq{
  margin-top: .5rem;
}
.card{
  border: none;
}
.card, .card-header{
  background-color: transparent;
}
.card-header{
  padding-left: 0;
  border-bottom: 1px solid rgb(22 54 85 / 40%);
}
.card-body{
  padding-left: 0;
}
.card-header h4{
  font-size: 18px;
  font-weight: 600;
}
.card-header h4 a{
  color: #163655;
}
.card-header .fa{
  font-weight: 600;
}

/* newsletter */
div.tnp-subscription, div.tnp-profile, form.tnp-subscription, form.tnp-profile{
  margin: 0 !important;
  max-width: 100% !important;
}
.tnp-subscription div.tnp-field, .tnp-profile div.tnp-field{
  margin-bottom: 0 !important;
}

/*blog section*/
.section-blog h5{
  font-size: 18px;
  font-weight: 600;
}

/* footer */
footer a {
  color: #fff;
}

footer h3, footer h5 {
  color: #fff;
  font-size: 22px;
  margin-top: 2rem;
}

footer h3:before, footer h5:before{
  content: "|";
  color: #f3a127;
  margin-right: .5rem;
}

footer h3{
  margin-top: 0;
  margin-bottom: 2rem;
}

footer p, footer table{
  font-size: 16px;
}

footer figure {
    margin: 0 0 2rem;
}

footer table{
  width: 100%;
}

footer table tr{
  border-bottom: 1px solid rgb(93 104 122);
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
}

footer .latest-product .woocommerce ul.products li.product{
  padding: 0;
}

footer .latest-product .woocommerce ul.products li.product,
footer .latest-product .woocommerce-page ul.products li.product{
  margin: 0;
}

footer .latest-product .woocommerce li img
{
  padding: 5px;
}

footer .latest-product .woocommerce .group-product-btn{
  margin-top: 0;
}

.widget_nav_menu ul {
  padding-left: 0;
  margin-bottom: 0;
}

.widget_nav_menu ul li {
  list-style-type: none;
  margin-bottom: 0.5rem;
}

.widget_nav_menu ul li:before{
  font-family: 'FontAwesome', sans-serif;
  content: "\f101";
  color: #f3a127;
  margin-right: .75rem;
}

footer i.fa-map-marker{
  width: 17px;
}

footer .sosmed{
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

footer .sosmed a{
  color: #fff;
  font-size: 20px;
  border: 1px solid #fff;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .sosmed a:hover{
  color: #182334;
  background-color: #fff;
}

/* Hide unwanted elements */
footer .woocommerce span,
footer .woocommerce h2,
footer .woocommerce .text-product-box,
footer .woocommerce .box-product .group-product-btn {
  display: none !important;
}

/* Product container cleanup */
footer .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr); /* 3 per row desktop */
  gap: 0 !important; /* remove grid gaps */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Individual product boxes */
footer .woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anchor tag inside product */
footer .woocommerce ul.products li.product a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}

/* Product images */
footer .woocommerce ul.products li.product a img {
  width: 100% !important;   /* fill the grid cell */
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* maintain aspect ratio */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile adjustments: 2 per row */
@media (max-width: 768px) {
  footer .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 !important;
  }
}

/* Hide 'Select Code' attribute everywhere */
.woocommerce-product-attributes-item--attribute_select-code,
.woocommerce-product-attributes-item--attribute_pa_select-code {
  display: none !important;
}



.copyright {
  border-top: 1px solid rgb(93 104 122);
}

.copyright div a {
  color: #fff;
}

/* Archive */
.post-wrap{
  border-bottom: 1px solid #cacaca;
  padding-bottom: 3rem;
}

/* Page Navi */
.wp-pagenavi{
  display: block;
  text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span{
  padding: 0.75em 1em;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
  font-weight: normal;
  background: #ebe9eb;
  color: #8a7e88;
  border-color: #d3ced2;
}

/* Floating button */
.mobile-sticky p {
  font-size: 10px;
}

/* sassy social share */
.heateor_sss_sharing_container{
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top: 1px solid #d8d8d8;
  padding-top: 1rem;
}
div.heateor_sss_follow_ul a, div.heateor_sss_horizontal_sharing div.heateor_sss_sharing_ul a{
  margin-right: .25rem !important;
}

/* Search Product Page */
.search h1{
  margin-bottom: 2rem;
}

/* === WooCommerce Shop Styles === */

/* Remove sorting label margin */
.woocommerce .woocommerce-ordering {
  margin-bottom: 3rem;
}

/* Hide search label */
.woocommerce-shop .wp-block-search__label {
  display: none;
}
.wp-block-search__inside-wrapper {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.wp-block-search__button {
  background-color: #3e3b3b;
  color: #fff;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 0.25rem;
}

/* Hide prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: none;
}

/* Product grid layout */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* keep left-aligned rows */
  align-items: flex-start;       /* prevent stretching */
  padding-left: 50px;
  padding-right: 50px;
}

/* Product card */
.woocommerce ul.products li.product {
  flex: 0 0 23%;                /* fixed width per item (approx 4 per row) */
  max-width: 23%;
  padding: 0.75rem;
  margin: 0 1% 1.5rem 0;        /* spacing between items */
  background-color: #fff;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 380px;
  overflow: hidden;
}

/* Product image */
.woocommerce ul.products li.product a img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  margin: 0 auto 0.5rem;
  display: block;
}

/* Product text container */
.woocommerce ul.products li.product .text-product-box {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding-top: 10px;
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-align: center;
}

.woocommerce ul.products li.product .text-product-box .category-text {
  line-height: normal !important;
  color: #515151;
}


/* Hide cart icons */
.woocommerce ul.products li.product a i.fa-shopping-cart {
  display: none;
}

/* Main + Grouped product buttons unified */
.woocommerce ul.products li.product .button {
  border-radius: 0;
  margin-top: 0; /* removes extra gap */
  display: inline-flex; /* keeps buttons inline */
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25rem;
  color: #333;
  background-color: #d8e3f9;
  transition: all .2s ease-in-out;
  flex: 1; /* makes them equal width */
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  height: 40px; /* consistent height */
  box-sizing: border-box;
}
/* Hover effect for See Details button */
.woocommerce ul.products li.product .button:hover {
  background-color: #b6c9f0; /* slightly darker blue */
  color: #333; /* keep text readable */
}

}

/* Grouped product button container */
.woocommerce .group-product-btn {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  width: 100%;
}
.woocommerce .group-product-btn .woocommerce-LoopProduct-link.woocommerce-loop-product__link {
  display: none;
}
.woocommerce .group-product-btn a.orange-btn:hover {
  background-color: #ff781e;
}

/* Simple product button hover */
.woocommerce a.button.product_type_simple {
  color: #131313;
}
.woocommerce a.button.product_type_simple:hover {
  background-color: #b6bdcc;
}

/* Comment submit button */
.comment-form .submit {
  background-color: #a1aabc !important;
  color: #131313 !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
}

/* Ratings */
.woocommerce .star-rating span::before {
  color: #ff9f0d;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 0.75em 1em;
}





/* Product detail */
.woocommerce div.product .woocommerce-tabs{
  padding: 3rem 0;
}
.woocommerce #review_form #respond .form-submit input{
  transition: all .2s ease-in-out;
}
.woocommerce #review_form #respond .form-submit input:hover{
  background-color: #b6bdcc !important;
}
.woocommerce div.product form.cart div.quantity, .woocommerce div.product form.cart .button{
  /* display: none !important; */
}
.woocommerce div.product.product-type-simple .cart, .woocommerce div.product form.cart .variations{
  margin-bottom: 0;
}
.woocommerce .cart-collaterals {
  display: none;
}
.product_meta .sku_wrapper,
.product_meta .posted_in{
  display: block;
}
.product_meta .tagged_as{
  display: none;
}
.single-product h1{
  font-size: 24px;
  margin-bottom: 2rem;
}
.single-product .woocommerce-Tabs-panel h2{

}
.product_meta, .product_meta a{
  color: #cf2f1d;
}

/* Boxed layout for single product page */
.single-product-box {
    max-width: 1200px;   /* adjust width as needed */
    width: 100%;
    padding: 30px;
    margin: 0 auto;
}

/* Product details box beside the image */
.single-product .product .summary {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Adjust product images to avoid being too large */
.woocommerce div.product div.images img {
    max-width: 85%;   /* smaller than before for balance */
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Adjust product images to avoid being too large */
.woocommerce div.product div.images img {
    max-width: 85%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* === Responsive WooCommerce Fixes === */

/* Tablet adjustments */
@media (max-width: 1024px) {
  /* Single product page */
  .single-product-box {
      padding: 10px;
  }
  .single-product .product .summary {
      padding: 10px;
  }
  .woocommerce div.product div.images img {
      max-width: 90%;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  /* Product grid layout */
  .woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 10px !important;
  }

  /* Product card - force 2 per row */
  .woocommerce ul.products li.product {
    flex: 1 1 calc(50% - 10px) !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    padding: 10px !important;
    max-height: none !important;
  }

  /* Product image */
  .woocommerce ul.products li.product a img {
    max-height: 150px !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* Product title */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    line-height: 1.3em !important;
  }

  /* Buttons - prevent cropping */
  .woocommerce ul.products li.product .button,
  .woocommerce .group-product-btn a {
    font-size: 11px !important;
    padding: 8px 12px !important;
    height: auto !important;
    line-height: 1.2em !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Grouped button alignment */
  .woocommerce .group-product-btn {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Single product page layout */
  .single-product .product {
    display: block !important;
  }
  .woocommerce div.product div.images,
  .single-product .product .summary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 5px !important;
  }
  .woocommerce div.product div.images img {
    max-width: 100% !important;
  }
  .single-product .product .summary {
    padding: 10px !important;
  }
}


/* Related products - 4 columns uniform cards */
.woocommerce .related.products ul.products,
.woocommerce .related.products ul {
    display: flex;
    flex-wrap: nowrap; 
    justify-content: space-between;
}

.woocommerce .related.products ul.products li.product {
    flex: 1 1 25%;   
    max-width: 25%;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

/* Style both buttons consistently */
.woocommerce ul.products li.product .button,
.woocommerce .group-product-btn a.orange-btn {
    font-size: 12px !important;     /* smaller text */
    padding: 6px 12px !important;   /* same padding */
    height: 40px;                   /* fixed height for both */
    flex: 1;                        /* equal width inside row */
    text-align: center;
    border-radius: 0;
    font-weight: 500;
    line-height: 1rem;
    box-sizing: border-box;
}

/* Keep both buttons inline and equal */
.woocommerce .group-product-btn {
    display: flex;
    justify-content: center;
    gap: 0px;                       /* small gap */
    margin-top: auto;
    width: 100%;
}

/* Hover states */
.woocommerce ul.products li.product .button:hover {
    background-color: #b6c9f0;
    color: #333;
}
.woocommerce .group-product-btn a.orange-btn:hover {
    background-color: #ff781e;
    color: #fff;
}

/* Hide after 4 */
.woocommerce .related.products ul.products li.product:nth-child(n+5) {
    display: none !important;
}





/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .woocommerce .related.products ul.products,
    .woocommerce .related.products ul {
        flex-wrap: wrap;        /* allow wrapping */
        justify-content: flex-start;
    }

    .woocommerce .related.products ul.products li.product {
        flex: 1 1 45%;          /* 2 items per row */
        max-width: 45%;
        margin: 0 5px 10px;     /* smaller spacing */
    }

    .woocommerce .related.products ul.products li.product:nth-child(n+5) {
        display: block !important; /* show all products */
    }
}

@media screen and (max-width: 600px) {
    .woocommerce .related.products ul.products li.product {
        flex: 1 1 45%;         /* 2 items per row on phones */
        max-width: 100%;
        margin: 0 0 15px;
    }
}




/**** RESPONSIVE *******/
@media (min-width:2000px) {
  /*special*/
}

@media (min-width:1200px) {
  /*xl*/
}

@media (max-width: 1199px) {
  .top-menu ul.menu a{
    padding: 0.5rem;
  }
}

@media (min-width: 992px) {

  /*lg ke atas*/
  .top-menu ul.menu li:first-child a{
    padding-left: 0;
  }
  .top-menu ul.sub-menu li:first-child a {
    padding-left: 1rem;
  }
  .top-menu ul.menu .sub-menu {
    display: none;
  }

  .top-menu ul.menu li:hover>.sub-menu {
    display: block;
    z-index: 99;
  }

  .modal-dialog{
    max-width: 950px;
  }
}

@media (max-width: 991px) {

  /*md*/
  .ihub-after-header-home,
  .ihub-page-banner,
  .ihub-after-header-service {
    /* margin-top: 100px; */
  }

  /* popup */
  .modal-dialog{
    height: auto;
    margin-top: 2rem;
  }

  header .border-bottom-orange{
    border-bottom: none;
  }

  /* start navmenu */
  .top-menu ul.menu .sub-menu{
    box-shadow: none;
    border: none;
  }

  .top-menu{
    border: none;
  }

  .top-menu ul.menu li.menu-item-has-children>a:after {
    display: none;
  }

  .top-menu ul.menu a {
    padding: .5rem 1.5rem;
    color: #212121;
    border-bottom: 1px solid #e5e5e5;
  }

  .top-menu ul.menu a:hover {
    padding: 1em;
  }

  .top-menu ul.menu li:last-child a{
    border-bottom: none;
  }

  .top-menu ul.sub-menu li:last-child a {
    border-bottom: 1px solid #e5e5e5;
  }

  .top-menu ul.menu>li>.sub-menu {
    background: #f4f4f4;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
  }

  .top-menu ul.menu .sub-menu a {
    padding: 0;
  }

  .top-menu ul.menu .sub-menu li {
    border: none;
  }

  .top-menu ul.sub-menu>li a:hover {
    color: #000;
  }

  .top-menu ul.menu li.menu-item-has-children {
    display: flex;
    flex-flow: column;
  }

  .top-menu ul.menu li.menu-item-has-children a {
    display: flex;
  }

  .top-menu ul.menu li.menu-item-has-children ul li a {
    padding: .5em 2.5em;
  }

  .top-menu ul.menu .sub-menu li>.sub-menu{
    position: relative;
    width: 100%;
    right: unset;
    background: #fafafa;
  }

  .top-menu ul.menu .sub-menu li>.sub-menu li a{
    padding: .5em 4em;
    border-bottom: none;
    color: #212121;
  }

  .top-menu ul.menu .sub-menu li>.sub-menu li:last-child a{
    border-bottom: 1px solid #e5e5e5;
  }

  .top-menu ul.menu .sub-menu li>.sub-menu li.current-menu-item a{
    color: #cf2f1d;
  }

  .mobnav-subarrow {
    background: transparent;
    height: 34px;
    width: 31px;
    position: absolute;
    top: 3px;
    right: 0;
    color: #212121;
    text-align: center;
    border-radius: 2px;
    font-size: 16px;
    z-index: 99;
    margin-left: 15px;
    /* margin-right: 15px; */
    border: 1px solid #212121;
    border-radius: 0.25rem;
  }

  .mobnav-subarrow .fa {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  /* end navmenu */

  /* home */
  .box-categoryproduct:nth-child(1),
  .box-categoryproduct:nth-child(2),
  .box-categoryproduct:nth-child(3){
    margin-bottom: 3rem;
  }

  .section-blog .thumb{
    width: 100%;
  }

  /* footer */
  footer{
    margin-bottom: 48px;
  }
  footer .latest-product-m .woocommerce ul.products[class*=columns-] li.product {
    margin: 0 ;
  }

  footer .latest-product-m .woocommerce .group-product-btn {
    margin-top: 0 ;
  }

  footer .latest-product-m .woocommerce ul.products li.product{
    padding: .5rem 0.25rem;
  }

  .mobile-sticky .red-btn,
  .mobile-sticky .grey-btn{
    padding: 12px;
  }

  /* woocommerce */
  .woocommerce ul.products li.product .text-product-box{
    min-height: 81px;
  }
  .wp-block-search__inside-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .woocommerce .woocommerce-ordering{
    margin-bottom: 2rem;
  }

}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* modal */
  .modal-dialog{
    max-width: 700px;
  }
  .modal-header, .modal-body {
    padding: 3rem 2rem;
  }
  .modal-header h5 {
    font-size: 1.25rem;
  }
}

@media (max-width: 767px) {

  /*sm*/
  /* home */
  .box-categoryproduct:nth-child(4) {
    margin-bottom: 3rem;
  }
  .wcu-img{
    width: 25%;
  }
  .box-blog1, .box-blog2, .box-blog3{
    margin-bottom: 3rem;
  }

  /* navbar */
  #nav_menu-2{
    margin-top: 3rem;
  }

  /* modal */
  .modal-dialog{
    max-width: 90%;
  }
  .modal-header{
    padding: 1.5rem;
  }
  .modal-body {
    padding: 1.5rem;
  }
  .modal-header h5 {
    font-size: 1.25rem;
  }
  #searchProductModal button[type=submit]{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mobile-sticky {
    color: #343a40;
    text-align: center;
    z-index: 10;
  }

  .mobile-sticky p {
    margin-bottom: 0;
  }

  /* footer */
  footer .latest-product-m .woocommerce ul.products li.product{
    padding: 0;
  }

  footer .latest-product-m .woocommerce ul.products li.product,
  footer .latest-product-m .woocommerce-page ul.products li.product{
    margin: 0;
  }

  footer .latest-product-m .woocommerce li img
  {
    padding: 5px;
  }

  footer .latest-product-m .woocommerce .group-product-btn{
    margin-top: 0;
  }

  footer .latest-product-m .woocommerce ul.products li.product{
    padding: .7rem 0.25rem;
  }

  footer {
    margin-bottom: 45px;
  }
  .mobile-sticky .red-btn, .mobile-sticky .grey-btn {
    font-size: 14px;
  }

  /* woocommerce */
  .woocommerce .group-product-btn a{
    width: 100%;
  }
  .group-product-btn{
      flex-direction: column;
  }
  .woocommerce a.button.product_type_simple{
    padding: 15px 10px;
    margin-bottom: .75rem;
  }
  .woocommerce ul.products li.product .text-product-box{
    min-height: auto;
  }
  .woocommerce ul.products li.product .button{
    margin-bottom: 0.5rem;
  }
  .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count{
    float: none;
  }
  .woocommerce .woocommerce-ordering{
    float: none;
    margin-bottom: 3rem;
  }

}

@media (max-width: 450px) {
  .woocommerce ul.products li.product .button{
    min-height: 54px;
  }
}

@media (max-width: 320px) {
  .top-menu ul.menu li.menu-item-has-children ul li a {
    font-size: 14px;
  }
}

@media (max-width: 280px) {
  .top-menu ul.menu li.menu-item-has-children ul li a {
    font-size: 13px;
    padding: 0.5em 1.5em;
  }
}

.shop-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.shop-sidebar {
    width: 22%;
    background: #f8f9fb;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}
.shop-main {
    flex: 1;
}

/* Make sidebar look subtle */
.shop-categories li {
  padding: 5px 0;
}

.shop-categories li a {
  color: #333;
  text-decoration: none;
}

.shop-categories li a:hover {
  color: #e33924; /* highlight on hover */
}

/* Product grid wider when sidebar hidden */
@media (max-width: 768px) {
  .woocommerce ul.products {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Sidebar spacing */
.shop-sidebar {
    padding: 20px 40px; /* smaller padding like your reference */
    background: #f9f9f9;
    border-right: 1px solid #ddd;
}

/* Sidebar titles */
.shop-sidebar h3,
.shop-sidebar .widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 2px solid #e33924;
    padding-bottom: 5px;
}

/* Sidebar links */
.shop-sidebar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.shop-sidebar ul li {
    margin-bottom: 8px;
}

.shop-sidebar ul li a {
    color: #333;
    text-decoration: none;
    transition: color .2s ease;
}

.shop-sidebar ul li a:hover {
    color: #e33924;
}
/* --- FIX: show hierarchy indentation in the sidebar --- */

/* Indent nested lists (children) */
.shop-sidebar ul ul {
  padding-left: 18px;          /* create the visible indent */
  margin-top: 6px;
  border-left: 1px solid #e9ecef;  /* subtle guide line (optional) */
}

/* Slightly tighter spacing for child items */
.shop-sidebar ul ul li {
  margin-bottom: 6px;
}

/* Make links full-row clickable for neat alignment */
.shop-sidebar ul li a {
  display: block;
}

/* Emphasize the current category / parent for orientation (optional) */
.shop-sidebar li.current-cat > a,
.shop-sidebar li.current-cat-parent > a,
.shop-sidebar li.current-cat-ancestor > a {
  font-weight: 600;
  color: #2a4d8f;
}

/* Hide product counts - works for both classic & block category widgets */

/* Classic WooCommerce category widget */
.shop-sidebar ul li .count {
  display: none !important;
}

/* Block-based WooCommerce category widget */
.wc-block-product-categories-list-item-count {
  display: none !important;
}


/* Search bar */
.shop-search input[type="search"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #666;
}

.woocommerce-breadcrumb a {
    color: #333;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: #e33924;
}

/* Sorting */
.shop-sorting {
    text-align: right;
    margin-bottom: 20px;
}
/* Product Search Form */
.woocommerce-product-search {
    display: flex;
    align-items: center;
    gap: 8px; /* space between input & button */
}

.woocommerce-product-search input[type="search"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
}

.woocommerce-product-search button[type="submit"] {
    padding: 10px 16px;
    border: none;
    background: #e33924;
    color: #fff;
    font-size: 0.95rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.woocommerce-product-search button[type="submit"]:hover {
    background: #c72a1d;
}

/* Keep your active category arrow */
.shop-categories li.current-cat > a::after {
  content: "➤"; /* or "✔" */
  color: #e33924;
  margin-left: 6px;
  font-size: 12px;
}

/* Add hover arrow for all category links */
.shop-categories li a:hover::after {
  content: "➤";
  color: #666; /* subtle grey on hover */
  margin-left: 6px;
  font-size: 12px;
}

@media (max-width: 767px) {
  /* Ensure equal 2 columns per row on mobile */
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product-category {
      flex: 1 1 calc(50% - 10px) !important;
      max-width: calc(50% - 10px) !important;
  }

  /* Adjust product buttons if cropped */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .group-product-btn a {
      font-size: 11px !important;
      padding: 8px 6px !important;
      white-space: normal !important;
      line-height: 1.3 !important;
  }

  /* Reduce extra spacing under products */
  .woocommerce ul.products {
      gap: 10px !important;
      justify-content: center !important;
  }
}