/*
Theme Name: TokoStyle Tokopedia Full
Author: Krisservice
Version: 2.1
Description: Theme WordPress tampilan Tokopedia 100%, WooCommerce & Multi Vendor Ready
License: GPL v2
Text Domain: tokostyle
*/
/* ===============================
   CLEAN PSEUDO ELEMENT – MY ACCOUNT
================================ */

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{
  content:none !important;
  display:none !important;
}
.woocommerce-cart .woocommerce::before,
.woocommerce-cart .woocommerce::after{
  content:none !important;
  display:none !important;
}
.woocommerce-account .woocommerce{
  overflow:visible;
}


/* ===============================
   STICKY FOOTER – GLOBAL
================================ */

html, body{
  height:100%;
}

body{
  min-height:100vh;
 /* display:flex;
  flex-direction:column;*/
  margin:0;
  font-family:Arial;
  background:#f4fdf7
}

/* Area konten utama */
.site-content,
.site-main,
main{
  flex:1;
}

a{text-decoration:none;
  color:#03ac0e
}

.category{
 background:#fff;
 border-radius:12px;
 padding:15px 10px;
 text-align:center;
 box-shadow:0 2px 6px rgba(0,0,0,.08);
 transition:.2s;
}

.search input{width:420px;
  padding:8px;
  border-radius:6px;
  border:none
}

.category-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
 gap:16px;
 margin:20px;
}

.category:hover{
 transform:translateY(-3px);
}

.category img{
 width:40px;
 height:40px;
 margin-bottom:8px;
}

.category span{
 display:block;
 font-size:13px;
 color:#333;
}

.header{
 align-items:center;
}

.header .search{
 flex:1;
}

/* =========================
   WOO RESET TOTAL
========================= */
.woocommerce ul.products,
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  display: grid;
  float: none;
  clear: none;
  content: none;
  box-sizing: border-box;
}

.woocommerce ul.products li.product{
  box-sizing: border-box;
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
}

/* === TOTAL RESET WOO LEGACY GRID === */
/* kill float system */

/* kill first / last break */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{
  clear: none !important;
}

/* === KILL WOO CLEARFIX TOTAL === */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
  content: none !important;
  display: none !important;
}

/* =====================
   SHOP CONTAINER FIX
===================== */
.shop-container{
 max-width:1400px;
 margin:auto;
 padding:0 16px;
}

.woocommerce-page .site-main,
.woocommerce-page main{
 padding:0 12px;
}

/* =====================
   SECTION CONTAINER FIX
===================== */
.section{
max-width:1300px !important;
margin:0 auto;
padding:0 16px;
box-sizing:border-box;
background:#fff;
border-radius:12px
}

.section .woocommerce,
.section ul.products{
 margin-left:0px !important;
 margin-right:0px !important;
}

.section ul.products{
 padding:0px;
}

/* =====================
   SHOP PAGE EDGE FIX
===================== */
.woocommerce-page .woocommerce{
 max-width:1200px;
 margin:0 auto;
 padding-left:12px;
 padding-right:12px;
 box-sizing:border-box;
}

.woocommerce-page ul.products{
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

body.woocommerce-shop{
 
 padding-left:0px;
 padding-right:0px;
}

.section.shop-section{
  max-width:1300px;
 margin:0 auto;
 padding:0 16px;
 box-sizing:border-box;
}

.product-section{
 width:100%;
}

.flash-sale .countdown span{
 background:#b00000;
 padding:4px 6px;
 border-radius:4px;
 min-width:22px;
 text-align:center;
}

.flash-sale{
 background:#e6f7f0;
 color:#03ac0e;
 padding:6px 8px;
 margin-top:6px;
 border-radius:6px;
 font-size:12px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.flash-sale .label{
 font-weight:600;
}

.discount-badge{
 position:absolute;
 top:8px;
 left:8px;
 background:#fa3e3e;
 color:#fff;
 font-size:12px;
 font-weight:700;
 padding:4px 6px;
 border-radius:4px;
 z-index:2;
}

.flash-sale.single{
 margin:15px 0;
 font-size:14px;
}

/* =========================
   FLASH SALE SECTION
========================= */
.flash-sale-section{
 margin:30px 0;
}

.flash-sale-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:15px;
}

.flash-sale-header h2{
  padding:0 16px;
 font-size:18px;
 font-weight:700;
 color:#222;
}


.flash-sale-link{
 font-size:13px;
 color:#03ac0e;
 font-weight:600;
 text-decoration:none;
}

.flash-countdown{
 
 background:#baee5a;
 color:#a70707;
 font-size:12px;
 font-weight:600;
 padding:4px 8px;
 border-radius:4px;
 display:inline-block;
 margin:6px 0;
}

.flash-countdown{
 background:#ffeaea;
 color:#d32f2f;
 font-size:11px;
 font-weight:600;
 padding:4px 6px;
 border-radius:4px;
 white-space:nowrap;
}

/* ============
Flash Sale row 
=============*/
.flash-row{
 display:flex;
 align-items:center;
 gap:8px;
 margin-top:6px;
}

/* Price */
.flash-row .price{
 font-size:14px;
 font-weight:700;
 color:#222;
 white-space:nowrap;
}

/* Button */
.flash-row .button{
 margin-left:auto;
 padding:6px 10px;
 font-size:12px;
 border-radius:6px;
 background:#03ac0e;
 color:#fff;
}

/* =========================
   ///// PRODUCT CARD ///
========================= */

body.woocommerce-shop ul.products{
width:100%;
  display: grid !important;
 /* grid-template-columns: repeat(auto-fill, minmax(0, 1fr));*/
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  
  padding:10px !important;
 margin:10px 0px!important;
}
 .woocommerce ul.products{
/*grid-template-columns:repeat(auto-fit,minmax(100px,1fr));*/
grid-template-columns: repeat(4, minmax(0,1fr)) !important;
gap: 12px;
 padding:10px !important;
 margin:10px 10px!important;
}
/* Grid item */
.woocommerce ul.products li.product{
background:#fff;
border-radius:10px;
transition:.2s ease;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
display: flex;
flex-direction: column;
height: 100%;
}

    /* AMANKAN ISI */
.woocommerce ul.products li.product img {
        width: 100%;
        height: auto;
        display: block;
}
.woocommerce ul.products li.product:hover{
 transform:translateY(-3px);
 box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* Thumbnail */
.woocommerce ul.products li.product a img{
 border-radius:8px;
 margin-bottom:8px;
 object-fit:cover;
 aspect-ratio:1/1;
}

/* Title */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{
 font-size:14px;
 font-weight:500;
 line-height:1.4;
 margin:4px 0 6px;
 color:#333;
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:visible;
 min-height:38px;
}
/* Title area lock */
.woocommerce-loop-product__title{
  min-height: 40px;
}

.woocommerce a.button,
.woocommerce button.button{
 background:#03ac0e;
 color:#fff;
 border-radius:6px;
 padding:8px 14px;
 font-size:13px;
 font-weight:600;
 text-align:center;
 width:70%;
}

.woocommerce a.button:hover{
 background:#02960c;
}

.woocommerce a.button::before{
 content:"🛒";
 margin-right:6px;
}

/* Price */
.woocommerce ul.products li.product .price{
 font-size:15px;
 font-weight:700;
 color:#222;
 margin-bottom:6px;
 display:block;
 margin-top:0;
   min-height: 22px;
}

/* Button */
.woocommerce ul.products li.product .button{
  margin-top: auto !important;
 background:#03ac0e;
 color:#fff;
 font-size:12px;
 font-weight:600;
 padding:6px 0px;
 border-radius:6px;
 text-align:center;
 line-height:1.2;
 width: 100%;
}

.woocommerce ul.products li.product .button:hover{
 background:#02960c;
}

/* Price block lock */
.woocommerce ul.products li.product .flash-row{
  min-height: 22px;
}


/* =========================
   HEADER MARKETPLACE
========================= */

header.site-header{
 background:#03ac0e;
 padding:10px 0;
  position:sticky;
 top:0;
 z-index:999;
}

.header-inner{
 max-width:1200px;
 margin:0 auto;
 padding:0 16px;
 display:flex;
 align-items:center;
 gap:12px;
}

/* Logo */
.header-logo a{
 color:#fff;
 font-size:18px;
 font-weight:700;
 text-decoration:none;
 white-space:nowrap;
}

/* Search */
.header-search{
 flex:1;
}

.header-search form{
 display:flex;
}

.header-search input[type="search"]{
 width:100%;
 padding:8px 12px;
 border-radius:6px 0 0 6px;
 border:none;
 outline:none;
}

.header-search button{
 background:#fff;
 color:#03ac0e;
 border:none;
 padding:8px 14px;
 border-radius:0 6px 6px 0;
 cursor:pointer;
 font-weight:600;
}

/* Cart */
.header-cart{
 position:relative;
}

.cart-link{
 color:#fff;
 font-size:20px;
 text-decoration:none;
 position:relative;
}

.cart-count{
 position:absolute;
 top:-6px;
 right:-8px;
 background:#ff424e;
 color:#fff;
 font-size:11px;
 padding:2px 6px;
 border-radius:50%;
 font-weight:700;
}

/* ===== HEADER FINAL ===== */

header.site-header .header-inner{
 max-width:1200px;
 margin:0 auto;
 padding:10px 16px;
 display:flex;
 align-items:center;
 gap:12px;
}

/* =========================
   PRODUCT BADGE
========================= */
.woocommerce ul.products li.product{
 position:relative;
}

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    
    z-index: 30;
    display: flex;
    flex-direction: column;
    
    gap: 4px;
}

.product-badge {
    display: inline-block;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1;
    color: #fff;
}

.badge-flash {
  display: inline-block;
  top:8px;
    background: #ff9800;
}

.badge-sale {
  display: inline-block;
  top:30px;
    background: #fa2c5a;
}

/* Flash Sale Section */
.flash-sale-section {
    margin: 32px 0;
}

.flash-sale-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header */
.flash-sale-header {
    margin-bottom: 16px;
}

.flash-sale-header h2 {
    font-size: 20px;
    font-weight: 700;
}

/* Products grid */
.flash-sale-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}



/* =========================
   FLASH COUNTDOWN MINI
========================= */

.flash-mini{
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffeaea;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;
}

/* Label */
.flash-mini .label{
  background: #ff424e;
  color: #fff;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* Time */
.flash-mini .time{
  color: #d32f2f;
  font-variant-numeric: tabular-nums;
}
/* ===============================
   RESET TOTAL SINGLE PRODUCT
================================ */

.single-product .woocommerce,
.single-product .site-main,
.single-product .content-area{
  display: block !important;
  width: 100%;
}
/* ===============================
   SINGLE PRODUCT CONTAINER
================================ */
/* ===============================
   SINGLE SECTION
================================ */

.single-product section,
.single-product .section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  overflow-x: hidden;
}

.single-product .woocommerce{
   width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.single-product div.product{
 display: grid;
  grid-template-columns: 48% 52%;
  gap: 24px;
  width: 100%;
  /* ===============================
   PRODUCT WRAPPER
================================ */
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* gambar */
.single-product div.product .woocommerce-product-gallery{
  width: 100%;
}

/* ringkasan */
.single-product div.product .summary{
  width: 100% !important;
}

/* tombol */
.single-product .single_add_to_cart_button{
  width: 100%;
  padding: 14px;
}
/* ===============================
   RELATED PRODUCTS
================================ */

.single-product .related{
  margin-top: 60px;
  width: 100%;
  clear: both;
  display: block;
}

/* grid related */
.single-product .related ul.products{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
}
/* hilangkan float bawaan woo */
.single-product ul.products li.product{
  float: none !important;
  width: auto !important;
}
/* ===============================
   JARAK FOTO BESAR
================================ */

.single-product.woocommerce-product-gallery .woocommerce-product-gallery__wrapper{
  margin-bottom: 16px;
}
/* ===============================
   RESET GALLERY
================================ */

.single-product .woocommerce-product-gallery{
  width: 100%;
  position: relative;
}

.single-product .woocommerce-product-gallery *{
  box-sizing: border-box;
}
/* ===============================
   MAIN IMAGE
================================ */

.single-product .woocommerce-product-gallery__wrapper{
  margin: 0;
  padding: 0;
}

/* Image utama */
.single-product .woocommerce-product-gallery__image{
  width: 100%;
  margin-bottom: 12px;
  position: relative;
}
/* ===============================
   THUMBNAILS
================================ */

.single-product .flex-control-thumbs{
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.single-product .flex-control-thumbs li{
  float: none !important;
  width: 60px;
  margin: 0;
}
/* ===============================
   THUMBNAILS
================================ */

.single-product .flex-control-thumbs{
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.single-product .flex-control-thumbs li{
  float: none !important;
  width: 60px;
  margin: 0;
}
.single-product .flex-control-thumbs img{
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #eee;
}

/* ===============================
   THUMBNAIL KECIL
================================ */

.single-product .flex-control-thumbs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
}

.single-product .flex-control-thumbs li{
  margin: 0 !important;
}

/* ===============================
   CATEGORY WRAPPER
================================ */

.archive.tax-product_cat .woocommerce{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ===============================
   CATEGORY GRID – DESKTOP
================================ */

.archive.tax-product_cat ul.products{
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* ===============================
   CATEGORY CARD
================================ */

.archive.tax-product_cat li.product{
  margin: 0 !important;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

.archive.tax-product_cat li.product img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.archive.tax-product_cat .woocommerce-loop-product__title{
  font-size: 13px;
  line-height: 1.4;
  min-height: 36px;
}

.archive.tax-product_cat .price{
  font-size: 14px;
  font-weight: 600;
}

.archive.tax-product_cat .add_to_cart_button{
  width: 100%;
  text-align: center;
  border-radius: 6px;
}

/* ===============================
   SINGLE PRODUCT SUMMARY RESET
================================ */

.single-product .summary{
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.single-product .summary h1.product_title{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
  color:#222;
}

.single-product .woocommerce-product-rating{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.single-product .woocommerce-review-link{
  font-size: 13px;
  color:#777;
}

/* Harga utama */
.single-product .summary .price{
  font-size: 22px;
  font-weight: 700;
  color:#222;
  margin: 12px 0;
}

/* Harga coret */
.single-product .summary .price del{
  font-size: 14px;
  color:#999;
  margin-right:6px;
}

/* Harga diskon */
.single-product .summary .price ins{
  text-decoration: none;
  color:#222;
}

/* ===============================
   ADD TO CART
================================ */

.single-product form.cart{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.single-product .quantity{
  margin: 0;
}

.single-product .quantity input.qty{
  width: 60px;
  height: 40px;
  border-radius: 6px;
  border:1px solid #ddd;
  text-align:center;
  font-size:14px;
}

.single-product .quantity{
  margin: 0;
}

.single-product .quantity input.qty{
  width: 60px;
  height: 40px;
  border-radius: 6px;
  border:1px solid #ddd;
  text-align:center;
  font-size:14px;
}

.single-product button.single_add_to_cart_button{
  flex:1;
  height: 40px;
  border-radius: 8px;
  background:#03ac0e;
  color:#fff;
  font-size:14px;
  font-weight:600;
  border:none;
  cursor:pointer;
}

.single-product button.single_add_to_cart_button:hover{
  background:#02960c;
}

.single-product .product_meta{
  margin-top: 16px;
  font-size: 13px;
  color:#777;
}

.single-product .product_meta span{
  display:block;
  margin-bottom:4px;
}


/* ===============================
   MY ACCOUNT RESET
================================ */
.woocommerce-account .woocommerce{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
  box-sizing: border-box;
}

.woocommerce-account *{
  box-sizing: border-box;
}

/* ===============================
   MY ACCOUNT LAYOUT
================================ */
.woocommerce-account .woocommerce{
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Sidebar */
.woocommerce-MyAccount-navigation{
  width: 240px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding: 12px 0;
}

/* Menu list */
.woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Item */
.woocommerce-MyAccount-navigation li{
  border-bottom:1px solid #f0f0f0;
}

.woocommerce-MyAccount-navigation li:last-child{
  border-bottom:none;
}

/* Link */
.woocommerce-MyAccount-navigation a{
  display:block;
  padding:12px 16px;
  font-size:14px;
  color:#333;
  font-weight:500;
  text-decoration:none;
}

/* Hover */
.woocommerce-MyAccount-navigation a:hover{
  background:#f4fdf7;
  color:#03ac0e;
}

/* Active */
.woocommerce-MyAccount-navigation .is-active a{
  background:#e6f7f0;
  color:#03ac0e;
  font-weight:600;
}

/* ===============================
   MY ACCOUNT CONTENT
================================ */
.woocommerce-MyAccount-content{
  flex:1;
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  min-height:300px;
}

.woocommerce-MyAccount-content p{
  font-size:14px;
  line-height:1.6;
  color:#444;
}

/* ===============================
   MY ACCOUNT TABLE
================================ */
.woocommerce-MyAccount-content table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.woocommerce-MyAccount-content th{
  text-align:left;
  padding:10px;
  background:#f7f7f7;
  font-weight:600;
}

.woocommerce-MyAccount-content td{
  padding:10px;
  border-bottom:1px solid #eee;
}

.woocommerce-MyAccount-content tr:last-child td{
  border-bottom:none;
}

.woocommerce-account .button{
  background:#03ac0e;
  color:#fff;
  border-radius:8px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  border:none;
}

.woocommerce-account .button:hover{
  background:#02960c;
}

/* ===============================
   MY ACCOUNT FORM
================================ */
.woocommerce-account form .form-row{
  margin-bottom:12px;
}

.woocommerce-account input,
.woocommerce-account select{
  width:100%;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #ddd;
  font-size:14px;
}

/* ===============================
   LOGIN / REGISTER RESET
================================ */
.woocommerce-account .u-columns{
  max-width: 900px;
  margin: 40px auto;
  display: flex;
  gap: 24px;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2{
  background:#fff;
  padding:24px;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  width:50%;
  box-sizing:border-box;
}

.woocommerce-account h2{
  font-size:18px;
  font-weight:700;
  margin-bottom:16px;
  color:#222;
}

/* ===============================
   INPUT
================================ */
.woocommerce-account form .form-row{
  margin-bottom:14px;
}

.woocommerce-account label{
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
  display:block;
  color:#444;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"]{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:14px;
}

/* ===============================
   AUTH BUTTON
================================ */
.woocommerce-account button.button{
  width:100%;
  background:#03ac0e;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px;
  font-size:14px;
  font-weight:600;
  margin-top:10px;
}

.woocommerce-account button.button:hover{
  background:#02960c;
}

.woocommerce-account .woocommerce-form__label{
  font-size:13px;
  color:#555;
}

.woocommerce-account .lost_password{
  margin-top:10px;
}

.woocommerce-account .lost_password a{
  font-size:13px;
  color:#03ac0e;
}

/* ===============================
   NOTICE
================================ */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info{
  border-radius:8px;
  font-size:13px;
}

   /* Container Menu Umum */
.my-header-menu-class ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Gaya Dasar Link Menu */
.menu-item a {
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: #fafafc;
}

/* --- Gaya Khusus Tombol LOGIN --- */
.login-item a {
    background-color: #1c0068; /* Warna hijau */
    color: white !important;
    padding: 8px 18px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(46, 204, 113, 0.3);
}

.login-item a:hover {
    background-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);
}

/* --- Gaya Khusus Tombol LOGOUT --- */
.logout-item a {
    color: #e74c3c !important; /* Warna merah teks */
    border: 1px solid #e74c3c;
    padding: 6px 14px;
    border-radius: 5px;
}

.logout-item a:hover {
    background-color: #e74c3c !important;
    color: white !important;
}


/* Styling Tombol Hamburger */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background: #333;
    transition: 0.3s;
}

/* ===============================
   SINGLE PRODUCT LAYOUT (PC)
================================ */

@media (min-width: 769px){

  .single-product div.product{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
.archive.tax-product_cat ul.products{
    grid-template-columns: repeat(3, 1fr) !important;
  }
    .menu-toggle, .menu-overlay { display: none; }
    .menu-side-container { 
      position: static; 
      left: 0; 
      width: auto; }
    .menu-side-container ul { 
      list-style: none;    
    align-items: center;   
      display: flex;
       gap: 20px; }
}
/* ===============================
   SINGLE PRODUCT Mobile(HP)
================================ */
@media (max-width: 768px){

  /* CONTAINER SHOP */
  body.woocommerce-shop .site-main,
  body.woocommerce-shop main{
    padding: 0 !important;
    margin: 0 !important;
  }

  body.woocommerce-shop .woocommerce{
    padding: 0 10px !important;
    margin: 0 auto !important;
  }
body.home .woocommerce ul.products {
display:grid !important;
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap:12px;
}

  /* PRODUCT GRID */
  body.woocommerce-shop ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PRODUCT CARD */
  body.woocommerce-shop ul.products li.product{
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 10px;
  }

  /* IMAGE */
  body.woocommerce-shop ul.products li.product img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* TITLE */
  body.woocommerce-shop h2.woocommerce-loop-product__title{
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0;
  }

  /* PRICE */
  body.woocommerce-shop .price{
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* BUTTON */
  body.woocommerce-shop .button{
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
  }
  
/* kill float system */
.woocommerce ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
}

/* kill first / last break */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{
  clear: none !important;
}
.woocommerce-loop-product__title{
    min-height: 36px;
  }

  .woocommerce ul.products li.product{
    min-height: 100%;
  }
  .flash-mini{
    font-size:10px;
    padding:3px 5px;

}
 .single-product div.product{
    grid-template-columns: 1fr;
    gap: 24px;
    margin:0 !important;
  }
 .single-product .related ul.products{
  width: 100%;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* SEMUA WRAPPER */
  body,
  .site,
  .site-main,
  main,
  .woocommerce,
  .woocommerce-page{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* PRODUCTS GRID */
  .woocommerce ul.products{
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  /* PRODUCT ITEM */
  .woocommerce ul.products li.product{
    margin: 0 !important;
    box-sizing: border-box;
  }

  .archive.tax-product_cat ul.products{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .single-product .flex-control-thumbs{
    gap: 6px;
  }

  .single-product .flex-control-thumbs li{
    width: 52px;
  }
   .single-product .summary h1.product_title{
    font-size:18px;
  }

  .single-product form.cart{
    flex-direction: column;
    align-items: stretch;
  }

  .single-product button.single_add_to_cart_button{
    width:100%;
  }
 .woocommerce-account .woocommerce{
    flex-direction: column;
    padding:10px;
  }

  .woocommerce-MyAccount-navigation{
    width:100%;
  }

  .woocommerce-MyAccount-content{
    padding:16px;
  }
  .woocommerce-account .u-columns{
    flex-direction:column;
    margin:20px 12px;
  }

  .woocommerce-account .u-column1,
  .woocommerce-account .u-column2{
    width:100%;
  }

      .header-menu-container ul {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .login-item a, .logout-item a {
        display: block;
        width: 100%;
        text-align: center;
    }
   .menu-side-container {
        position: fixed;
        top: 0;
        left: -280px; /* Sembunyi di kiri */
        width: 280px;
        height: 100vh;
        background: #03ac0e81;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: 0.4s ease-in-out;
        z-index: 1000;
        padding-top: 60px;
    }
.menu-side-container ul { 
      list-style: none; 
       padding: 20px !important; /* Jarak dari tepi dalam kotak overlay */
        display: flex;
        flex-direction: column;
        gap: 8px; /* Jarak modern antar baris (hanya bekerja di browser modern) */  
    }

     /* 2. Menambah tinggi baris setiap item menu */
    .menu-side-container ul li {
        margin-bottom: 5px; /* Cadangan jika 'gap' tidak terbaca */
        list-style: none;
    }

     /* 3. Membuat area klik (link) menjadi besar dan lega */
    .menu-side-container ul li a {
        display: flex;
        align-items: center;
        padding: 15px 20px; /* Atas-Bawah 15px, Kiri-Kanan 20px */
        font-size: 12px;    /* Ukuran teks yang nyaman di mata */
        color: #333;
        text-decoration: none;
        border-radius: 10px; /* Sudut melengkung halus */
        transition: background 0.3s ease;
        background-color: #f9f9f9; /* Warna dasar tipis agar terlihat seperti tombol */
    }
     /* 4. Efek saat menu ditekan/sentuh */
    .menu-side-container ul li a:active,
    .menu-side-container ul li a:hover {
        background-color: #f0f0f0;
        color: #2ecc71; /* Warna hijau (sesuaikan tema Anda) */
    }
    /* 6. Jarak Ikon di dalam Mobile Menu */
    .menu-side-container ul li a i {
        margin-right: 15px; /* Jarak ikon ke teks lebih lebar */
        font-size: 20px;    /* Ikon sedikit lebih besar di mobile */
        width: 25px;        /* Menjaga teks tetap rata kiri */
        text-align: center;
    }
    /* Ketika menu aktif 
    .menu-active .menu-side-container {
        left: 0;
    }*/

    /* Overlay gelap */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
        z-index: 999;
    }

    .menu-active .menu-overlay {
        display: block;
    }
    /* Ketika Menu Aktif */
    .menu-active .menu-side-container {
        left: 0;
        visibility: visible; /* Munculkan kembali */
    }

}
@media (hover:hover){
    .woocommerce ul.products li.product:hover{
        transform:translateY(-2px);
    }
}








/* Memberi jarak antara ikon dan teks */
.menu-item i.fa {
    margin-right: 8px;
    color: #2ecc71; /* Warna ikon hijau, sesuaikan dengan tema Anda */
}
/* Memaksa browser menggunakan font-family yang benar */
.fa-solid, .fas, .fa-home, .fa-shopping-cart {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block;
}

/* Ukuran ikon di mobile menu */
@media (max-width: 768px) {
    .menu-item i.fa {
        font-size: 18px;
        width: 25px; /* Agar ikon sejajar lurus ke bawah */
        text-align: center;
    }
}


/* Ukuran Logo */
.header-logo img {
    max-height: 60px; /* Atur ukuran maksimal logo Anda */
    width: auto;
    display: block;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    header {
        padding: 10px 20px;
    }
    .header-logo img {
        max-height: 40px;
    }
}

/* =================================================
   CART BLOCK – PROCEED TO CHECKOUT (FINAL & FIX)
================================================= */

.wp-block-woocommerce-cart
.wc-block-components-button.wc-block-cart__submit-button{
  width: 100%;
  min-height: 48px;
  background-color: #03ac0e !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(3,172,14,.35);
  text-align: center;
}

/* Hover */
.wp-block-woocommerce-cart
.wc-block-components-button.wc-block-cart__submit-button:hover{
  background-color:#02960c !important;
}
@media(max-width:768px){
  .wp-block-woocommerce-cart
  .wc-block-components-button.wc-block-cart__submit-button{
    font-size:14px;
    border-radius:14px;
  }
}
/* =================================================
   CART BLOCK – EMPTY CART (FINAL)
================================================= */

.wp-block-woocommerce-cart
.wc-block-cart__empty-cart{
  text-align: center;
  background:#fff;
  border-radius:16px;
  padding:40px 20px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  max-width:480px;
  margin:40px auto;
}
.wp-block-woocommerce-cart
.wc-block-cart__empty-cart-image{
  max-width:160px;
  margin:0 auto 20px;
}
.wp-block-woocommerce-cart
.wc-block-cart__empty-cart-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
  color:#222;
}

.wp-block-woocommerce-cart
.wc-block-cart__empty-cart-description{
  font-size:14px;
  color:#666;
  margin-bottom:20px;
}
.wp-block-woocommerce-cart
.wc-block-cart__empty-cart
.wc-block-components-button{
  background:#03ac0e !important;
  color:#fff !important;
  font-size:14px;
  font-weight:700;
  padding:12px 20px;
  border-radius:10px;
  border:none;
  min-width:200px;
  box-shadow:0 4px 10px rgba(3,172,14,.35);
}

/* Hover */
.wp-block-woocommerce-cart
.wc-block-cart__empty-cart
.wc-block-components-button:hover{
  background:#02960c !important;
}
@media(max-width:768px){
  .wp-block-woocommerce-cart
  .wc-block-cart__empty-cart{
    margin:20px 12px;
    padding:32px 16px;
  }

  .wp-block-woocommerce-cart
  .wc-block-cart__empty-cart-title{
    font-size:18px;
  }
}