/*
Theme Name: Storefront Child
Template: storefront
Version: 1.0
*/
.homepage-wrapper {
  display: flex;
  flex-direction: column;
}

.hero-edukatif{
    padding:30px 0;
    background:#f7f9fc;
	order: 1;
}

.hero-wrap{
    display:flex;
    align-items:center;
    gap:50px;
}

.hero-left{
    flex:1;
}

.hero-left h1{
    font-size:40px;
    margin-bottom:20px;
}

.home-desc{
    font-size:16px;
    line-height:1.7;
    color:#555;
    margin-bottom:30px;
    text-align:justify;
}

.hero-right{
    flex:1;
    text-align:right;
}

.hero-right img{
    max-width:520px;
    width:100%;
    height:auto;
}

.hero-btn{
    padding:14px 28px;
    font-size:18px;
    background:#b3df87;
    border-radius:10px;
}

.hero-badges{
    display:flex;
    gap:15px;
    margin:25px 0;
    flex-wrap:wrap;
}

.hero-badges span{
    background:#ffffff;
    border-radius:30px;
    padding:8px 16px;
    font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.hero-button-wrapper {
    margin-top: 20px;
    text-align:center;
}

.site-branding {
    padding-bottom: 20px;
    padding-top:10px;
  }
.widget_product_search {
    padding-top: 10px;
  }
#site-navigation-menu-toggle {
    margin-top: 10px;
}  
.storefront-product-pagination {
    display: none !important;
}
.entry-header {
	 padding-bottom:10px !important;
}
/* Products Section */
.col-full-2 { 
	background:#fff;
  }
.homepage-products {
    padding: 15px 0;
	order: 2;
}

.homepage-products h2 {
    text-align: center;
    margin-bottom: 15px;
}

.homepage-products h1 {
    text-align: center;
    margin-bottom: 15px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.featured-products {
    margin-top: 20px;
}

.manual-products {
    display: flex;
    flex-wrap: nowrap; /* tetap satu baris */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.manual-products {
    display: flex;
    flex-wrap: wrap; /* IZINKAN turun */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.manual-products .product {
    flex: 0 0 22%;
    text-align: center;
}

.home-title-1 {
    color:#dd771d;
    font-size:18px;
	background: #d5eae1;
  padding: 10px 5px 10px 5px;
	border-radius:5px;
     }
.home-title-2 {
    color:#f6fff7;
    font-size:18px;
	background: #6593a2;
  padding: 10px 5px 10px 5px;
	border-radius:5px;
     }
.home-title-3 {
    color:#df1431;
    font-size:18px;
	padding: 10px 5px 10px 5px;
  background: #eae2ce;
	border-radius:5px;
      }
.home-title-4 {
    color:#101515;
    font-size:18px;
	padding: 10px 5px 10px 5px;
  background: #8787f2;
	border-radius:5px;
    }
.buttonhome-1 {
	background: #67ea43;
    padding: 15px;
	color:#000;
	border-radius:5px;
       }
.buttonhome-2 {
	background: #36eed4;
    padding: 15px;
	color:#000;
	border-radius:5px;
       }
.buttonhome-3 {
	background: #e68c1a;
    padding: 15px;
	color:#000;
	border-radius:5px;
       }
.buttonhome-4 {
	background: #ee369e;
    padding: 15px;
	color:#000;
	border-radius:5px;
       }
.buttonhome-1:hover, .buttonhome-2:hover, .buttonhome-3:hover, .buttonhome-4:hover {
	background: #2ea81f;
	color:#fff;
    }
.single_add_to_cart_button {
	background:#3ac126 !important;
	color:#fff !important;
	border-radius:5px;
  }
.single_add_to_cart_button:hover {
	background: #2ea81f !important;
	color:#ccc !important;
  }

#payment .place-order .button {
    background: #0fdf99;
	color:#000;
	border-radius:7px;
   }
#payment .place-order .button:hover {
    background: #2ea81f;
	color:#fff;
   }

/* Tablet */
@media (max-width: 768px) {
	.hero-edukatif {
      order: 2;
      }
   .homepage-products {
        order: 1;
        }
	.homepage-products h2 {
       text-align: center;
        margin-bottom: 15px;
		font-size:14px;
		}
	.homepage-products h1 {
       text-align: center;
        margin-bottom: 15px;
		font-size:24px;
		font-weight:bold;
      }
    .manual-products .product {
        flex: 0 0 46%;
      }
    .bank-box {
        flex: 0 0 46% !important;
        width: 100% !important;
    }
    .payment-col {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .hero-wrap{
    flex-direction:column;
    text-align:center;
    }

   .hero-right{
    text-align:center;
    }

   .hero-left h1{
    font-size:24px;
    }

   .home-desc{
    font-size:16px;
    }
   .woocommerce-notices-wrapper {
    display:none;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .manual-products .product {
        flex: 0 0 100%;
    }
    .bank-box {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* site header */
.site-header {
    margin-bottom:10px !important;
    padding-top:10px;
    background:#bae1c4;
}

/* Menu */
#menu-menu-atas {
 text-align:right;   
 }
.storefront-primary-navigation {
   background:#f7f7f7;
}
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    padding: 15px !important;
    color: #d739a1;
  }
.site-header-cart .cart-contents {
     padding: 15px !important;
       color: #8310ee;
  }

/* tanpa sidebar */
.content-area {
    width: 100% !important;
    margin: 0 auto;
}

/* SHOP Style */
.storefront-breadcrumb
   {
       margin:0 0 0 0 !important;
   }
.storefront-sorting {
      margin:0 0 20px 0 !important;
      display:none;
  }   
.woocommerce-products-header {
   display:none;
} 
.woocommerce-message {
    padding:5px;
    margin-bottom:10px;
}
.widget-area {
    display: none !important;
}
.wc-block-components-totals-item__label {
    display: none !important;
}
.product_meta {
    text-align:right;
}
.product-attributes {
   font-size:11px;
}
.entry-header h1 {
	font-size:16px;
    text-align:left;
}
.product-attributes p {
    margin:0;padding:0;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  list-style: none;
  margin-bottom: 1.618em;
  cursor: pointer;
  border: 1px solid #39e1c2;
}

/* Checkout Style */
.woocommerce-thankyou-order-details {
    display:none;
}
.woocommerce-bacs-bank-details {
    display:none;
}

.bank-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.bank-box {
    flex: 0 0 32%;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}
.bank-box img {
    text-align:center;
	margin:auto;
}

.payment-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap; /* supaya tetap rapi di mobile */
}

.payment-col {
  flex: 1;
  width: 48%px;
}

.kode-order {
  font-size: 28px;
  font-weight: bold;
  padding:10px;
  border:1px solid #000;
  border-radius:5px;
  color:#1a6ae8;
}
.pemesan {
    padding:20px 10px;
}
.order-rekening {
    padding-top:20px;
}

/* Confirm Wa */

.konfirmasi-bayar {
    margin-top: 30px;
    padding: 20px;
    background: #f8f8f8;
    text-align: center;
    border-radius: 6px;
}

.wa-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #25D366;
    color: #fff;
    padding: 14px 22px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.wa-button:hover {
    background-color: #1ebe5d;
    color: #fff;
}

.wa-confirm {
    margin-bottom:10px;
}

/* WA Topbar */
.wa-topbar {
            background:#25D366;
            text-align:right;
            padding: 10px 0 10px 10px;
            font-weight:600;
        }
  .wa-topbar a {
            text-decoration:none;
            color: #463839;
          }
  .header-kontak{
          display:flex;
           align-items:center;
          justify-content:flex-end;
           gap:10px;
        }       
  .top-tiktok img{
        vertical-align:middle;
        margin-right:10px;
      }
   .top-tiktok,.top-tiktok:visited,.top-tiktok:focus,.top-tiktok:active{
     outline:none;
     border:none;
     box-shadow:none;
    }      
  .wa-tombol {
      padding: 5px 10px 5px 10px;
          border: 2px solid #0d6e63;
         border-radius: 20px;
         background: #84f090;
         font-size:14px;
  }      
  .wa-topbar a:hover {
            opacity: 0.9;
            color:#fff;
        }
.top-fb {
	margin-right:10px;
    }      
   .top-fb,.top-fb:visited,.top-fb:focus,.top-fb:active{
     outline:none;
     border:none;
     box-shadow:none;
    }      
.post-author {
    display:none;  
  }   
.posted-on {
    display:none;  
  } 
.storefront-handheld-footer-bar .my-account,
.storefront-handheld-footer-bar .cart {
    display: none !important;
}
.storefront-handheld-footer-bar li.search > a {
    display: none;
}
/* site-search mobile, delete if annoying */
.storefront-handheld-footer-bar ul li.search .site-search { 
  bottom: 0 !important;
	padding: 0 !important;
 }
/* Footer */
.site-footer {
  background-color: #1e1c1c !important;
  color: #6d6d6d;
}
.site-footer a {
	color:#6d6d6d !important;
	margin-left:5px;
	margin-right:5px;
}