/* =========================================================
   PADI TRIMULYO — FINAL POLISH v3
   Hanya untuk merapikan layout marketplace yang sekarang
   ========================================================= */

:root{
  --padi-green:#087a42;
  --padi-green-dark:#075b33;
  --padi-green-deep:#064a2a;
  --padi-green-soft:#edf8f1;

  --padi-text:#1d2521;
  --padi-muted:#6e7973;
  --padi-line:#e3e9e5;
  --padi-bg:#f5f7f5;

  --padi-container:1200px;
}


/* =========================================================
   RESET + HILANGKAN GAP PUTIH ATAS
   ========================================================= */

html{
  margin:0!important;
  padding:0!important;
  width:100%!important;
}

body,
body#home{
  margin:0!important;
  padding:0!important;

  width:100%!important;
  min-height:100vh;

  position:relative!important;
  top:0!important;

  background:var(--padi-bg)!important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif!important;

  color:var(--padi-text)!important;

  font-size:14px!important;
  line-height:1.5!important;
}


/* Epsilon kadang memberi offset untuk sticky header */

body#home,
body#home.sticky-header,
body#home.header-sticky{
  padding-top:0!important;
  margin-top:0!important;
}


/* sembunyikan header Epsilon lama pada home */

#home > header,
#home > #header,
#home > .header,
#home > .header-wrap,
#home > .header-wrapper,
#home > .header-container,
#home > .mobile-header{
  display:none!important;

  height:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
}


/* hilangkan offset wrapper bawaan */

#home .padi-market-shell{
  margin:0!important;
  padding:0!important;
}

#home > .wrapper,
#home > #wrapper,
#home > .content,
#home > #content,
#home > main{
  margin-top:0!important;
  padding-top:0!important;
}


#home{
  --header-height:0px!important;
}


button,
input,
select,
textarea{
  font-family:inherit!important;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.padi-container{
  width:min(calc(100% - 32px),var(--padi-container))!important;
  max-width:var(--padi-container)!important;

  margin-left:auto!important;
  margin-right:auto!important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.padi-topbar{
  width:100%!important;

  min-height:34px!important;

  margin:0!important;
  padding:0!important;

  display:flex;
  align-items:center;

  background:var(--padi-green-deep)!important;

  color:#fff!important;

  border:0!important;
}


.padi-topbar-inner{
  min-height:34px!important;

  display:flex!important;

  align-items:center!important;
  justify-content:space-between!important;

  gap:20px!important;
}


.padi-topbar-left,
.padi-topbar-right{
  display:flex!important;

  align-items:center!important;

  gap:16px!important;
}


.padi-topbar span,
.padi-topbar a{
  color:#fff!important;

  font-size:11px!important;

  line-height:1!important;

  font-weight:500!important;

  text-decoration:none!important;

  white-space:nowrap;
}


.padi-topbar i{
  font-size:10px!important;
}


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

.padi-market-header{
  width:100%!important;

  margin:0!important;
  padding:0!important;

  background:
    linear-gradient(
      135deg,
      #08773f 0%,
      #15944f 100%
    )!important;

  color:#fff;

  border:0!important;

  box-shadow:
    0 2px 7px rgba(0,0,0,.08)!important;
}


.padi-market-header-inner{
  min-height:86px!important;

  padding-top:9px!important;
  padding-bottom:9px!important;

  display:grid!important;

  grid-template-columns:
    180px
    minmax(0,1fr)
    60px!important;

  align-items:center!important;

  gap:22px!important;
}


/* =========================================================
   LOGO
   ========================================================= */

.padi-brand{
  min-width:0;

  display:flex!important;

  align-items:center!important;

  gap:8px!important;

  color:#fff!important;

  text-decoration:none!important;
}


.padi-brand-mark{
  color:#fff!important;

  font-size:29px!important;

  line-height:1!important;

  font-weight:900!important;

  letter-spacing:-1.4px!important;
}


.padi-brand-copy{
  color:rgba(255,255,255,.92)!important;

  font-size:9px!important;

  line-height:1.18!important;

  font-weight:700!important;

  letter-spacing:.15px!important;

  text-transform:uppercase;
}


/* =========================================================
   SEARCH HEADER
   ========================================================= */

.padi-market-search{
  min-width:0!important;

  margin:0!important;
}


.padi-market-search-box{
  width:100%!important;

  min-height:44px!important;

  padding:4px!important;

  display:grid!important;

  grid-template-columns:
    30px
    minmax(0,1fr)
    78px!important;

  align-items:center!important;

  gap:0!important;

  background:#fff!important;

  border-radius:6px!important;

  box-shadow:
    0 2px 8px rgba(0,0,0,.14)!important;
}


.padi-market-search-box > i{
  color:#87928c!important;

  font-size:13px!important;

  text-align:center!important;
}


.padi-market-search-box input{
  width:100%!important;
  min-width:0!important;

  height:36px!important;

  padding:0 8px!important;

  margin:0!important;

  background:#fff!important;

  border:0!important;

  outline:0!important;

  box-shadow:none!important;

  color:#26312b!important;

  font-size:12.5px!important;

  font-weight:400!important;
}


.padi-market-search-box input::placeholder{
  color:#929d97!important;

  opacity:1!important;
}


.padi-market-search-box button{
  width:100%!important;

  height:36px!important;

  padding:0 12px!important;

  margin:0!important;

  border:0!important;

  border-radius:5px!important;

  background:var(--padi-green-dark)!important;

  color:#fff!important;

  font-size:11px!important;

  line-height:1!important;

  font-weight:700!important;

  cursor:pointer;
}


/* link kecil bawah search */

.padi-search-suggestions{
  min-height:17px!important;

  margin-top:5px!important;

  display:flex!important;

  align-items:center!important;

  gap:14px!important;

  overflow:hidden!important;
}


.padi-search-suggestions a{
  color:rgba(255,255,255,.91)!important;

  font-size:9.5px!important;

  line-height:1!important;

  font-weight:500!important;

  text-decoration:none!important;

  white-space:nowrap;
}


/* tombol jual kanan */

.padi-sell-button{
  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  gap:3px!important;

  color:#fff!important;

  font-size:10.5px!important;

  line-height:1.1!important;

  font-weight:600!important;

  text-decoration:none!important;
}


.padi-sell-button i{
  font-size:19px!important;
}


/* =========================================================
   BANNER
   ========================================================= */

.padi-banner-zone{
  margin-top:14px!important;

  display:grid!important;

  grid-template-columns:
    minmax(0,2fr)
    minmax(260px,.66fr)!important;

  gap:8px!important;
}


.padi-banner-main,
.padi-epsilon-banner{
  min-width:0!important;

  overflow:hidden!important;

  border-radius:6px!important;
}


.padi-epsilon-banner img{
  display:block!important;

  width:100%!important;

  height:294px!important;

  max-width:none!important;

  object-fit:cover!important;

  border-radius:6px!important;
}


.padi-banner-side{
  gap:8px!important;
}


.padi-promo-card{
  min-height:143px!important;

  padding:20px 21px!important;

  border-radius:6px!important;
}


.padi-promo-card span{
  font-size:9px!important;

  font-weight:800!important;

  line-height:1.2!important;
}


.padi-promo-card strong{
  margin:5px 0!important;

  font-size:18px!important;

  line-height:1.18!important;

  font-weight:750!important;
}


.padi-promo-card small{
  font-size:10.5px!important;

  line-height:1.4!important;
}


/* =========================================================
   SHORTCUT MENU
   ========================================================= */

.padi-shortcuts{
  margin-top:9px!important;

  padding:16px 8px!important;

  display:grid!important;

  grid-template-columns:
    repeat(8,minmax(0,1fr))!important;

  align-items:start!important;

  background:#fff!important;

  border:1px solid var(--padi-line)!important;

  border-radius:5px!important;
}


.padi-shortcuts a{
  padding:3px 4px!important;

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  color:var(--padi-text)!important;

  text-decoration:none!important;
}


.padi-shortcuts .ico{
  width:44px!important;
  height:44px!important;

  margin:0 auto 7px!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  background:var(--padi-green-soft)!important;

  border-radius:50%!important;

  color:var(--padi-green)!important;

  font-size:17px!important;
}


.padi-shortcuts b{
  font-size:10px!important;

  line-height:1.25!important;

  font-weight:600!important;

  text-align:center!important;
}


/* =========================================================
   SECTION
   ========================================================= */

.padi-section{
  margin-top:16px!important;

  overflow:hidden!important;

  background:#fff!important;

  border:1px solid var(--padi-line)!important;

  border-radius:5px!important;
}


.padi-section-head{
  min-height:54px!important;

  padding:0 17px!important;

  display:flex!important;

  align-items:center!important;

  justify-content:space-between!important;

  gap:15px!important;

  border-bottom:1px solid var(--padi-line)!important;
}


.padi-section-head h2{
  margin:0!important;

  color:#202723!important;

  font-size:15.5px!important;

  line-height:1.2!important;

  font-weight:750!important;

  letter-spacing:0!important;
}


.padi-section-head a{
  display:flex!important;

  align-items:center!important;

  gap:5px!important;

  color:var(--padi-green)!important;

  font-size:10px!important;

  font-weight:700!important;

  text-decoration:none!important;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.padi-product-grid.products.grid{
  width:100%!important;

  padding:16px!important;

  display:grid!important;

  grid-template-columns:
    repeat(4,minmax(0,1fr))!important;

  gap:14px!important;

  align-items:stretch!important;
}


/* reset width bawaan Epsilon */

.padi-product-grid.products.grid > *{
  width:100%!important;

  min-width:0!important;

  max-width:none!important;

  height:auto!important;

  float:none!important;

  clear:none!important;

  margin:0!important;
}


/* card */

.padi-product-grid .simple-wrap,
.padi-product-grid .item,
.padi-product-grid article,
.padi-product-grid .product{
  width:100%!important;

  min-width:0!important;

  max-width:none!important;

  margin:0!important;

  display:block!important;

  background:#fff!important;

  border:1px solid #dfe6e1!important;

  border-radius:5px!important;

  overflow:hidden!important;

  box-shadow:none!important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease!important;
}


.padi-product-grid .simple-wrap:hover,
.padi-product-grid .item:hover,
.padi-product-grid article:hover,
.padi-product-grid .product:hover{
  transform:translateY(-2px)!important;

  border-color:#c9d8ce!important;

  box-shadow:
    0 7px 18px rgba(22,78,47,.09)!important;
}


/* FOTO */

.padi-product-grid .img,
.padi-product-grid .image,
.padi-product-grid .img-wrap{
  width:100%!important;

  max-width:none!important;

  height:auto!important;

  margin:0!important;

  overflow:hidden!important;
}


.padi-product-grid img{
  display:block!important;

  width:100%!important;

  max-width:none!important;

  height:auto!important;

  aspect-ratio:1.22 / 1!important;

  object-fit:cover!important;
}


/* CONTENT */

.padi-product-grid .data,
.padi-product-grid .details,
.padi-product-grid .content{
  width:100%!important;

  padding:9px 10px 11px!important;

  margin:0!important;
}


/* lokasi */

.padi-product-grid .location,
.padi-product-grid .item-location{
  margin:0 0 4px!important;

  color:#7a847f!important;

  font-size:9.5px!important;

  line-height:1.3!important;

  font-weight:400!important;
}


/* judul */

.padi-product-grid h3,
.padi-product-grid .title,
.padi-product-grid .name{
  margin:0 0 7px!important;

  min-height:34px!important;

  color:#202723!important;

  font-size:12.5px!important;

  line-height:1.35!important;

  font-weight:650!important;

  letter-spacing:0!important;

  display:-webkit-box!important;

  -webkit-box-orient:vertical!important;

  -webkit-line-clamp:2!important;

  overflow:hidden!important;
}


/* harga */

.padi-product-grid .price,
.padi-product-grid .item-price{
  color:#078242!important;

  font-size:13px!important;

  line-height:1.25!important;

  font-weight:750!important;
}

/* =========================================================
   PRODUCT CARD - MARKETPLACE STYLE
   ========================================================= */

.padi-product-grid.products.grid{
  width:100% !important;

  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;

  gap:10px !important;

  padding:12px !important;

  align-items:start !important;
}


/* reset bawaan epsilon */
.padi-product-grid.products.grid > *{
  width:100% !important;

  min-width:0 !important;
  max-width:none !important;

  height:auto !important;
  min-height:0 !important;

  float:none !important;
  clear:none !important;

  margin:0 !important;
}


/* CARD */
.padi-product-grid .simple-wrap,
.padi-product-grid .item,
.padi-product-grid article,
.padi-product-grid .product{
  width:100% !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  display:block !important;

  background:#fff !important;

  border:1px solid #e3e8e4 !important;
  border-radius:6px !important;

  overflow:hidden !important;

  box-shadow:none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}


.padi-product-grid .simple-wrap:hover,
.padi-product-grid .item:hover,
.padi-product-grid article:hover,
.padi-product-grid .product:hover{
  transform:translateY(-2px) !important;

  border-color:#c9d8cd !important;

  box-shadow:
    0 5px 15px rgba(30,70,45,.10) !important;
}


/* =========================================================
   FOTO
   ========================================================= */

.padi-product-grid .img,
.padi-product-grid .image,
.padi-product-grid .img-wrap{
  position:relative !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;

  border-radius:0 !important;

  overflow:hidden !important;

  background:#f6f7f6 !important;
}


.padi-product-grid img{
  display:block !important;

  width:100% !important;

  height:auto !important;

  aspect-ratio:1 / 1 !important;

  object-fit:cover !important;

  margin:0 !important;

  border-radius:0 !important;

  transition:transform .25s ease !important;
}


.padi-product-grid .item:hover img,
.padi-product-grid article:hover img{
  transform:scale(1.025) !important;
}


/* kurangi gradient hitam bawaan epsilon */
.padi-product-grid .img:after,
.padi-product-grid .image:after,
.padi-product-grid .img-wrap:after{
  opacity:.35 !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

.padi-product-grid .data,
.padi-product-grid .details,
.padi-product-grid .content{
  position:relative !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;

  padding:9px 10px 10px !important;

  margin:0 !important;

  background:#fff !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.padi-product-grid h3,
.padi-product-grid .title,
.padi-product-grid .name{
  margin:0 0 7px !important;

  padding:0 !important;

  min-height:34px !important;
  max-height:34px !important;

  color:#202723 !important;

  font-size:12.5px !important;

  line-height:17px !important;

  font-weight:600 !important;

  letter-spacing:0 !important;

  display:-webkit-box !important;

  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;
}


/* =========================================================
   PRICE
   ========================================================= */

.padi-product-grid .price,
.padi-product-grid .item-price{
  color:#39A81E !important;

  font-size:14px !important;

  line-height:18px !important;

  font-weight:800 !important;

  margin:0 0 7px !important;
}


/* =========================================================
   LOCATION
   ========================================================= */

.padi-product-grid .location,
.padi-product-grid .item-location{
  color:#879089 !important;

  font-size:10px !important;

  line-height:15px !important;

  font-weight:400 !important;

  margin:0 !important;

  padding:0 !important;
}


/* =========================================================
   PREMIUM LABEL
   ========================================================= */

.padi-product-grid .premium,
.padi-product-grid .label-premium,
.padi-product-grid .lab.premium{
  background:#ffe500 !important;

  color:#544900 !important;

  border-radius:3px !important;

  padding:3px 6px !important;

  font-size:9px !important;

  line-height:1 !important;

  font-weight:800 !important;
}


/* =========================================================
   FOTO COUNTER
   ========================================================= */

.padi-product-grid .photos,
.padi-product-grid .image-counter,
.padi-product-grid .photo-count{
  font-size:9px !important;

  line-height:1 !important;
}


/* =========================================================
   SECTION PRODUCT
   ========================================================= */

.padi-section-head{
  min-height:50px !important;

  padding:0 15px !important;
}


.padi-section-head h2{
  font-size:15px !important;

  font-weight:700 !important;

  text-transform:none !important;
}


.padi-section-head a{
  font-size:10px !important;

  color:#39A81E !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

  .padi-product-grid.products.grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}


@media(max-width:850px){

  .padi-product-grid.products.grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .padi-product-grid.products.grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:7px !important;

    padding:7px !important;
  }


  .padi-product-grid .data,
  .padi-product-grid .details,
  .padi-product-grid .content{
    padding:7px 8px 9px !important;
  }


  .padi-product-grid h3,
  .padi-product-grid .title,
  .padi-product-grid .name{
    min-height:32px !important;
    max-height:32px !important;

    font-size:11px !important;

    line-height:16px !important;
  }


  .padi-product-grid .price,
  .padi-product-grid .item-price{
    font-size:13px !important;
  }


  .padi-product-grid .location,
  .padi-product-grid .item-location{
    font-size:9px !important;
  }

}
/* =========================================================
   CTA UMKM
   ========================================================= */

.padi-seller-cta{
  margin-top:16px!important;
  margin-bottom:19px!important;

  padding:20px 22px!important;

  display:grid!important;

  grid-template-columns:
    48px
    1fr
    auto!important;

  align-items:center!important;

  gap:15px!important;

  background:#edf8f1!important;

  border:1px solid #d5e9dc!important;

  border-radius:6px!important;
}


.padi-seller-icon{
  width:48px!important;
  height:48px!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  border-radius:50%!important;

  background:#fff!important;

  color:var(--padi-green)!important;

  font-size:17px!important;
}


.padi-seller-copy small{
  color:var(--padi-green)!important;

  font-size:8px!important;

  line-height:1!important;

  font-weight:800!important;

  letter-spacing:.7px!important;
}


.padi-seller-copy h3{
  margin:4px 0 3px!important;

  color:#202723!important;

  font-size:16px!important;

  line-height:1.2!important;

  font-weight:750!important;
}


.padi-seller-copy p{
  margin:0!important;

  color:#747e78!important;

  font-size:10px!important;

  line-height:1.45!important;
}


.padi-seller-cta > a{
  min-height:39px!important;

  padding:0 16px!important;

  display:inline-flex!important;

  align-items:center!important;

  justify-content:center!important;

  gap:7px!important;

  background:var(--padi-green-dark)!important;

  border-radius:5px!important;

  color:#fff!important;

  font-size:10px!important;

  line-height:1!important;

  font-weight:700!important;

  text-decoration:none!important;
}


/* =========================================================
   INFO BAWAH
   ========================================================= */

.padi-info-block{
  margin-top:0!important;

  padding:24px 20px 28px!important;

  background:#fff!important;

  border-top:2px solid var(--padi-green)!important;
}


.padi-info-block h3{
  margin:0 0 9px!important;

  color:#202723!important;

  font-size:14px!important;

  line-height:1.35!important;

  font-weight:750!important;
}


.padi-info-block p{
  max-width:none!important;

  margin:0 0 7px!important;

  color:#707a74!important;

  font-size:10px!important;

  line-height:1.65!important;
}


.padi-info-columns{
  margin-top:19px!important;

  padding-top:17px!important;

  display:grid!important;

  grid-template-columns:
    repeat(4,minmax(0,1fr))!important;

  gap:30px!important;

  border-top:1px solid var(--padi-line)!important;
}


.padi-info-columns h4{
  margin:0 0 7px!important;

  color:#242c27!important;

  font-size:10px!important;

  font-weight:750!important;
}


.padi-info-columns a{
  display:block!important;

  color:#707a74!important;

  font-size:9px!important;

  line-height:1.85!important;

  font-weight:400!important;

  text-decoration:none!important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .padi-market-header-inner{
    grid-template-columns:
      145px
      minmax(0,1fr)
      50px!important;

    gap:14px!important;
  }


  .padi-brand-mark{
    font-size:25px!important;
  }


  .padi-product-grid.products.grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr))!important;
  }


  .padi-banner-zone{
    grid-template-columns:
      minmax(0,1.7fr)
      minmax(230px,.7fr)!important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  html,
  body,
  body#home{
    margin:0!important;
    padding:0!important;
    top:0!important;
  }


  .padi-container{
    width:calc(100% - 16px)!important;
  }


  /* topbar */

  .padi-topbar{
    min-height:30px!important;
  }


  .padi-topbar-inner{
    min-height:30px!important;
  }


  .padi-topbar span,
  .padi-topbar a{
    font-size:9px!important;
  }


  .padi-topbar-left span:nth-child(2),
  .padi-topbar-right a:nth-child(1),
  .padi-topbar-right a:nth-child(2){
    display:none!important;
  }


  /* header */

  .padi-market-header-inner{
    min-height:auto!important;

    padding-top:9px!important;
    padding-bottom:10px!important;

    grid-template-columns:
      1fr
      auto!important;

    grid-template-areas:
      "brand sell"
      "search search"!important;

    gap:8px!important;
  }


  .padi-brand{
    grid-area:brand!important;
  }


  .padi-market-search{
    grid-area:search!important;
  }


  .padi-sell-button{
    grid-area:sell!important;
  }


  .padi-brand-mark{
    font-size:24px!important;
  }


  .padi-brand-copy{
    font-size:8px!important;
  }


  .padi-market-search-box{
    min-height:42px!important;

    grid-template-columns:
      27px
      minmax(0,1fr)
      65px!important;
  }


  .padi-market-search-box input{
    height:34px!important;

    font-size:11px!important;
  }


  .padi-market-search-box button{
    height:34px!important;

    font-size:10px!important;
  }


  .padi-search-suggestions{
    margin-top:5px!important;

    gap:11px!important;

    overflow-x:auto!important;

    scrollbar-width:none;
  }


  .padi-search-suggestions a{
    font-size:8.5px!important;
  }


  /* banner */

  .padi-banner-zone{
    margin-top:8px!important;

    display:block!important;
  }


  .padi-banner-side{
    display:none!important;
  }


  .padi-epsilon-banner img{
    width:100%!important;

    height:auto!important;

    aspect-ratio:16 / 7!important;

    object-fit:cover!important;
  }


  /* shortcut */

  .padi-shortcuts{
    padding:12px 4px!important;

    grid-template-columns:
      repeat(4,minmax(0,1fr))!important;

    row-gap:13px!important;
  }


  .padi-shortcuts .ico{
    width:40px!important;
    height:40px!important;

    margin-bottom:6px!important;

    font-size:15px!important;
  }


  .padi-shortcuts b{
    font-size:9px!important;
  }


  /* section */

  .padi-section{
    margin-top:10px!important;
  }


  .padi-section-head{
    min-height:48px!important;

    padding:0 11px!important;
  }


  .padi-section-head h2{
    font-size:13px!important;
  }


  .padi-section-head a{
    font-size:9px!important;
  }


  /* product */

  .padi-product-grid.products.grid{
    padding:8px!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:8px!important;
  }


  .padi-product-grid img{
    aspect-ratio:1 / 1!important;
  }


  .padi-product-grid .data,
  .padi-product-grid .details,
  .padi-product-grid .content{
    padding:8px!important;
  }


  .padi-product-grid h3,
  .padi-product-grid .title,
  .padi-product-grid .name{
    min-height:32px!important;

    font-size:11px!important;
  }


  .padi-product-grid .price,
  .padi-product-grid .item-price{
    font-size:12px!important;
  }


  /* CTA */

  .padi-seller-cta{
    padding:16px!important;

    grid-template-columns:
      42px
      1fr!important;

    gap:11px!important;
  }


  .padi-seller-icon{
    width:42px!important;
    height:42px!important;
  }


  .padi-seller-copy h3{
    font-size:14px!important;
  }


  .padi-seller-cta > a{
    width:100%!important;

    grid-column:
      1 / -1!important;
  }


  /* bawah */

  .padi-info-block{
    padding:18px 14px 22px!important;
  }


  .padi-info-columns{
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:17px!important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .padi-brand-copy{
    display:none!important;
  }


  .padi-brand-mark{
    font-size:25px!important;
  }


  .padi-topbar-left{
    gap:5px!important;
  }


  .padi-category-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr))!important;
  }

}
/* =========================================================
   PADI - BANNER + GREEN UNIFIED PATCH
   Samakan semua hijau & rapikan banner kanan
   ========================================================= */

:root{
  --padi-green:#39A81E !important;
  --padi-green-dark:#39A81E !important;
  --padi-green-deep:#39A81E !important;
  --padi-green-soft:#edf8e8 !important;
}


/* =========================================================
   SAMAKAN SEMUA HIJAU
   ========================================================= */

.padi-topbar,
.padi-market-header,
.padi-market-search-box button,
.padi-sell-button i,
.padi-seller-cta > a,
.padi-section-head a,
.padi-product-grid .price,
.padi-product-grid .item-price,
.padi-info-block{
  color:inherit;
}

.padi-topbar{
  background:#39A81E !important;
}

.padi-market-header{
  background:#39A81E !important;
}

.padi-market-search-box button{
  background:#39A81E !important;
}

.padi-seller-cta > a{
  background:#39A81E !important;
}

.padi-shortcuts .ico,
.category-icon,
.padi-seller-icon{
  background:rgba(57,168,30,.10) !important;
  color:#39A81E !important;
}

.padi-section-head a,
.padi-product-grid .price,
.padi-product-grid .item-price,
.padi-seller-copy small,
.padi-info-block{
  color:#39A81E !important;
}

.padi-info-block{
  border-top:2px solid #39A81E !important;
}


/* =========================================================
   BANNER UTAMA + PROMO KANAN
   ========================================================= */

.padi-banner-zone{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:12px !important;
  align-items:stretch !important;
  margin-top:14px !important;
}

.padi-banner-main{
  min-width:0 !important;
  height:100% !important;
}

.padi-epsilon-banner{
  width:100% !important;
  height:100% !important;
  border-radius:12px !important;
  overflow:hidden !important;
}

.padi-epsilon-banner img{
  width:100% !important;
  height:100% !important;
  min-height:300px !important;
  max-height:300px !important;
  object-fit:cover !important;
  border-radius:12px !important;
  display:block !important;
}

.padi-banner-side{
  display:grid !important;
  grid-template-rows:1fr 1fr !important;
  gap:12px !important;
  min-width:0 !important;
}

.padi-promo-card{
  position:relative !important;
  overflow:hidden !important;

  min-height:144px !important;
  padding:22px 22px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;

  border-radius:12px !important;
  border:none !important;

  background:#39A81E !important;
  color:#fff !important;

  box-shadow:0 4px 14px rgba(0,0,0,.06) !important;
}

.padi-promo-card:before{
  content:"" !important;
  position:absolute !important;
  right:-35px !important;
  bottom:-35px !important;
  width:130px !important;
  height:130px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.10) !important;
}

.padi-promo-card:after{
  content:"" !important;
  position:absolute !important;
  right:25px !important;
  top:18px !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.07) !important;
}

.promo-1,
.promo-2{
  background:#39A81E !important;
  color:#fff !important;
}

.padi-promo-card span{
  position:relative !important;
  z-index:2 !important;

  display:block !important;
  margin:0 0 6px !important;

  color:rgba(255,255,255,.85) !important;

  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
}

.padi-promo-card strong{
  position:relative !important;
  z-index:2 !important;

  display:block !important;
  margin:0 0 6px !important;

  color:#fff !important;

  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.padi-promo-card small{
  position:relative !important;
  z-index:2 !important;

  display:block !important;

  color:rgba(255,255,255,.90) !important;

  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}


/* =========================================================
   HEADER FONT BIAR LEBIH PAS
   ========================================================= */

.padi-brand-mark{
  font-size:28px !important;
  font-weight:900 !important;
  letter-spacing:-1px !important;
}

.padi-brand-copy{
  font-size:9px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

.padi-market-search-box input{
  font-size:13px !important;
}

.padi-market-search-box button{
  font-size:12px !important;
  font-weight:700 !important;
}

.padi-topbar span,
.padi-topbar a{
  font-size:11px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .padi-banner-zone{
    display:block !important;
    margin-top:8px !important;
  }

  .padi-banner-main{
    margin-bottom:0 !important;
  }

  .padi-epsilon-banner img{
    min-height:auto !important;
    max-height:none !important;
    height:auto !important;
    aspect-ratio:16 / 8 !important;
  }

  .padi-banner-side{
    display:none !important;
  }
}
/* =========================================================
   SAMAKAN TINGGI BANNER KIRI & KANAN
   ========================================================= */

.padi-banner-zone{
  --padi-banner-height:340px; /* ubah ini kalau mau lebih tinggi/rendah */

  display:grid !important;
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:12px !important;
  align-items:stretch !important;
}


/* kiri */
.padi-banner-main,
.padi-epsilon-banner{
  height:var(--padi-banner-height) !important;
}

.padi-epsilon-banner img{
  width:100% !important;
  height:var(--padi-banner-height) !important;
  min-height:var(--padi-banner-height) !important;
  max-height:var(--padi-banner-height) !important;
  object-fit:cover !important;
  border-radius:12px !important;
}


/* kanan */
.padi-banner-side{
  height:var(--padi-banner-height) !important;

  display:grid !important;
  grid-template-rows:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
}

.padi-promo-card{
  height:auto !important;
  min-height:0 !important;

  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}


/* supaya isi card kanan lebih pas secara vertikal */
.padi-promo-card strong{
  font-size:17px !important;
  line-height:1.2 !important;
}

.padi-promo-card small{
  font-size:12px !important;
  line-height:1.45 !important;
}


/* tablet */
@media(max-width:1000px){
  .padi-banner-zone{
    --padi-banner-height:300px;
    grid-template-columns:minmax(0,1fr) 290px !important;
  }
}


/* mobile */
@media(max-width:760px){
  .padi-banner-zone{
    --padi-banner-height:auto;
    display:block !important;
  }

  .padi-banner-main,
  .padi-epsilon-banner,
  .padi-epsilon-banner img{
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
  }

  .padi-banner-side{
    display:none !important;
    height:auto !important;
  }
}
/* =========================================================
   PADI TRIMULYO FOOTER
   ========================================================= */

.padi-footer{
  --footer-green:#39A81E;
  --footer-deep:#248c14;
  --footer-soft:#f0faed;
  --footer-text:#1f271f;
  --footer-muted:#6f786f;
  --footer-line:#e1e8df;

  margin:40px 0 0!important;
  padding:0!important;

  width:100%!important;

  background:#fff!important;

  border:0!important;

  color:var(--footer-text)!important;
}


/* container */
.padi-footer-container{
  width:min(calc(100% - 32px),1200px);

  margin-left:auto;
  margin-right:auto;
}


/* =========================================================
   CTA HIJAU
   ========================================================= */

.padi-footer-cta{
  padding:24px 0;

  background:var(--footer-green);

  color:#fff;
}


.padi-footer-cta > .padi-footer-container{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;
}


.padi-footer-cta-copy{
  display:flex;

  align-items:center;

  gap:16px;
}


.padi-footer-cta-icon{
  flex:0 0 48px;

  width:48px;
  height:48px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:rgba(255,255,255,.15);

  border:1px solid rgba(255,255,255,.2);

  border-radius:12px;

  color:#fff;

  font-size:19px;
}


.padi-footer-cta-copy span{
  display:block;

  margin-bottom:2px;

  color:rgba(255,255,255,.8);

  font-size:9px;

  font-weight:800;

  letter-spacing:.75px;

  text-transform:uppercase;
}


.padi-footer-cta-copy h3{
  margin:0 0 3px!important;

  color:#fff!important;

  font-size:18px!important;

  line-height:1.2!important;

  font-weight:800!important;
}


.padi-footer-cta-copy p{
  margin:0!important;

  color:rgba(255,255,255,.85)!important;

  font-size:11px!important;
}


.padi-footer-cta-actions{
  display:flex;

  gap:9px;
}


.padi-footer-btn{
  min-height:40px;

  padding:0 16px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  border-radius:6px;

  font-size:10.5px;

  line-height:1;

  font-weight:700;

  text-decoration:none!important;
}


.padi-footer-btn-white{
  background:#fff;

  color:var(--footer-green)!important;
}


.padi-footer-btn-outline{
  background:transparent;

  border:1px solid rgba(255,255,255,.55);

  color:#fff!important;
}


/* =========================================================
   FOOTER MAIN
   ========================================================= */

.padi-footer-main{
  padding:42px 0 38px;

  background:#fff;
}


.padi-footer-grid{
  display:grid;

  grid-template-columns:
    minmax(260px,1.5fr)
    repeat(4,minmax(120px,.75fr));

  gap:40px;
}


/* brand */

.padi-footer-logo{
  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-bottom:17px;

  color:var(--footer-green)!important;

  text-decoration:none!important;
}


.padi-footer-logo strong{
  font-size:28px;

  line-height:1;

  font-weight:900;

  letter-spacing:-1.3px;
}


.padi-footer-logo span{
  color:#5e685f;

  font-size:8px;

  line-height:1.1;

  font-weight:800;

  text-transform:uppercase;
}


.padi-footer-brand > p{
  max-width:330px;

  margin:0 0 17px!important;

  color:var(--footer-muted)!important;

  font-size:10.5px!important;

  line-height:1.7!important;
}


.padi-footer-contact{
  display:flex;

  align-items:flex-start;

  gap:8px;

  margin-top:8px;

  color:#69736b;

  font-size:10px;

  line-height:1.4;
}


.padi-footer-contact i{
  width:13px;

  margin-top:2px;

  color:var(--footer-green);

  text-align:center;
}


/* columns */

.padi-footer-column h4{
  margin:0 0 15px!important;

  color:#202720!important;

  font-size:11px!important;

  font-weight:800!important;
}


.padi-footer-column > a{
  display:block;

  width:max-content;
  max-width:100%;

  margin-bottom:9px;

  color:#707970!important;

  font-size:10px!important;

  line-height:1.3;

  font-weight:400!important;

  text-decoration:none!important;

  transition:.15s ease;
}


.padi-footer-column > a:hover{
  color:var(--footer-green)!important;

  transform:translateX(2px);
}


/* social */

.padi-social-icons{
  display:flex;

  align-items:center;

  gap:7px;

  margin-bottom:20px;
}


.padi-social-icons a{
  width:34px;
  height:34px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--footer-soft);

  border:1px solid #e0efdc;

  border-radius:8px;

  color:var(--footer-green)!important;

  font-size:14px;

  text-decoration:none!important;
}


.padi-social-icons a:hover{
  background:var(--footer-green);

  border-color:var(--footer-green);

  color:#fff!important;
}


.padi-footer-badge{
  padding:12px;

  display:flex;

  align-items:center;

  gap:9px;

  background:var(--footer-soft);

  border-radius:7px;
}


.padi-footer-badge > i{
  color:var(--footer-green);

  font-size:16px;
}


.padi-footer-badge small{
  display:block;

  color:#7a837a;

  font-size:8.5px;
}


.padi-footer-badge strong{
  display:block;

  margin-top:1px;

  color:#303830;

  font-size:10px;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.padi-footer-bottom{
  background:#f8faf8;

  border-top:1px solid var(--footer-line);
}


.padi-footer-bottom > .padi-footer-container{
  min-height:58px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}


.padi-footer-bottom span{
  color:#7a837b;

  font-size:9.5px;
}


.padi-footer-bottom div{
  display:flex;

  gap:18px;
}


.padi-footer-bottom a{
  color:#687269!important;

  font-size:9.5px;

  text-decoration:none!important;
}


.padi-footer-bottom a:hover{
  color:var(--footer-green)!important;
}


/* jangan menampilkan hook sebagai blok */
.padi-footer-hooks{
  display:none;
}


/* =========================================================
   HILANGKAN FOOTER/PROMO EPSILON LAMA
   ========================================================= */

body > section.promo{
  display:none!important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .padi-footer-grid{
    grid-template-columns:
      1.4fr
      repeat(2,1fr);

    gap:35px 28px;
  }


  .padi-footer-brand{
    grid-row:span 2;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .padi-footer{
    margin-top:25px!important;

    padding-bottom:70px!important;
  }


  .padi-footer-container{
    width:calc(100% - 28px);
  }


  .padi-footer-cta{
    padding:20px 0;
  }


  .padi-footer-cta > .padi-footer-container{
    display:block;
  }


  .padi-footer-cta-copy{
    align-items:flex-start;
  }


  .padi-footer-cta-copy h3{
    font-size:16px!important;
  }


  .padi-footer-cta-actions{
    margin-top:16px;

    display:grid;

    grid-template-columns:1fr 1fr;
  }


  .padi-footer-btn{
    width:100%;
  }


  .padi-footer-main{
    padding:30px 0;
  }


  .padi-footer-grid{
    grid-template-columns:
      1fr
      1fr;

    gap:28px 18px;
  }


  .padi-footer-brand{
    grid-column:1 / -1;

    grid-row:auto;
  }


  .padi-footer-brand > p{
    max-width:100%;
  }


  .padi-footer-social{
    grid-column:1 / -1;
  }


  .padi-footer-bottom{
    padding:16px 0;
  }


  .padi-footer-bottom > .padi-footer-container{
    min-height:0;

    display:block;

    text-align:center;
  }


  .padi-footer-bottom div{
    margin-top:10px;

    justify-content:center;
  }

}


/* sangat kecil */
@media(max-width:400px){

  .padi-footer-grid{
    grid-template-columns:1fr;
  }


  .padi-footer-brand,
  .padi-footer-social{
    grid-column:auto;
  }

}
/* =========================================================
   PADI PRODUCT CARD — FINAL
   Tidak bergantung layout item Epsilon
   ========================================================= */

.padi-product-grid{
  width:100%;

  padding:14px;

  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:11px;

  align-items:start;
}


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

.padi-product-card{
  min-width:0;

  margin:0;

  padding:0;

  overflow:hidden;

  background:#fff;

  border:1px solid #e1e7e2;

  border-radius:6px;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.padi-product-card:hover{
  transform:translateY(-3px);

  border-color:#cbd9ce;

  box-shadow:
    0 7px 18px rgba(25,75,42,.10);
}


/* =========================================================
   FOTO
   ========================================================= */

.padi-product-photo{
  position:relative;

  width:100%;

  display:block;

  overflow:hidden;

  aspect-ratio:1 / 1;

  background:#f3f5f3;

  text-decoration:none;
}


.padi-product-photo img{
  position:absolute;

  inset:0;

  display:block;

  width:100%;
  height:100%;

  margin:0;

  object-fit:cover;

  transition:
    transform .25s ease;
}


.padi-product-card:hover
.padi-product-photo img{
  transform:scale(1.025);
}


/* =========================================================
   PREMIUM
   ========================================================= */

.padi-product-premium{
  position:absolute;

  z-index:4;

  top:8px;
  left:8px;

  padding:4px 7px;

  background:#ffe000;

  border-radius:3px;

  color:#4f4700;

  font-size:9px;

  line-height:1;

  font-weight:800;
}


/* =========================================================
   JUMLAH FOTO
   ========================================================= */

.padi-product-photo-count{
  position:absolute;

  z-index:4;

  right:7px;
  bottom:7px;

  padding:4px 6px;

  display:flex;

  align-items:center;

  gap:4px;

  background:rgba(0,0,0,.60);

  border-radius:4px;

  color:#fff;

  font-size:9px;

  line-height:1;
}


.padi-product-photo-count i{
  font-size:9px;
}


/* =========================================================
   BODY
   ========================================================= */

.padi-product-body{
  padding:10px 10px 11px;

  background:#fff;
}


/* =========================================================
   NAMA PRODUK
   ========================================================= */

.padi-product-name{
  min-height:35px;

  margin:0 0 8px;

  display:-webkit-box;

  overflow:hidden;

  color:#252c28 !important;

  font-size:12.5px;

  line-height:17px;

  font-weight:600;

  text-decoration:none !important;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}


.padi-product-name:hover{
  color:#39A81E !important;
}


/* =========================================================
   HARGA
   ========================================================= */

.padi-product-price{
  margin-bottom:8px;

  color:#39A81E;

  font-size:15px;

  line-height:18px;

  font-weight:800;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* =========================================================
   LOKASI
   ========================================================= */

.padi-product-location{
  display:flex;

  align-items:center;

  gap:5px;

  color:#858e87;

  font-size:10px;

  line-height:15px;
}


.padi-product-location i{
  color:#a1aaa4;

  font-size:9px;
}


/* =========================================================
   DESKTOP MEDIUM
   ========================================================= */

@media(max-width:1100px){

  .padi-product-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:850px){

  .padi-product-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .padi-product-grid{
    padding:7px;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:7px;
  }


  .padi-product-body{
    padding:8px;
  }


  .padi-product-name{
    min-height:32px;

    margin-bottom:6px;

    font-size:11px;

    line-height:16px;
  }


  .padi-product-price{
    margin-bottom:6px;

    font-size:13px;
  }


  .padi-product-location{
    font-size:9px;
  }

}
/* =====================================================
   PADI TRIMULYO - PRODUCT CARD
===================================================== */

.simple-prod.padi-prod {
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
  transition: all .22s ease !important;
}

.simple-prod.padi-prod:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(57,168,30,.35) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.09) !important;
}

.padi-prod .padi-prod-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}


/* IMAGE */

.padi-prod .padi-card-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f5f8f4 !important;
}

.padi-prod .padi-card-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.padi-prod .padi-card-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  transition: transform .35s ease !important;
}

.padi-prod:hover .padi-card-image img {
  transform: scale(1.025);
}


/* Placeholder jangan diberi efek hitam */

.padi-prod .padi-card-media.no-image:after,
.padi-prod .padi-card-media.no-image:before {
  display: none !important;
}

.padi-prod .no-image img {
  opacity: 1 !important;
  filter: none !important;
}


/* BADGE */

.padi-card-badges {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.padi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  border-radius: 6px;
  color: #fff;
}

.padi-badge.premium {
  background: #f59e0b;
}

.padi-badge.sold {
  background: #ef4444;
}

.padi-badge.reserved {
  background: #3b82f6;
}


/* FAVORITE */

.padi-card-favorite {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  z-index: 5 !important;
}

.padi-card-favorite a {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}


/* PHOTO COUNTER */

.padi-photo-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.60);
  color: #fff;
  font-size: 10px;
  z-index: 4;
}


/* DAY OFFER */

.padi-day-offer {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 10px;
  background: #39A81E;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}


/* BODY */

.padi-prod .padi-card-body {
  padding: 11px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0;
}

.padi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 6px;
}

.padi-category {
  font-size: 10px;
  font-weight: 700;
  color: #39A81E;
  background: #edf8e8;
  border-radius: 5px;
  padding: 4px 6px;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.padi-date {
  font-size: 9px;
  color: #999;
  white-space: nowrap;
}


/* TITLE */

.padi-prod .padi-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;

  min-height: 38px;
  margin: 0 0 7px !important;

  color: #202020 !important;
  font-size: 14px !important;
  line-height: 19px !important;
  font-weight: 600 !important;

  text-decoration: none !important;
}

.padi-prod .padi-card-title:hover {
  color: #39A81E !important;
}


/* SELLER */

.padi-card-seller {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 11px;
  color: #666;
  overflow: hidden;
}

.padi-card-seller i {
  color: #39A81E;
  font-size: 10px;
}

.padi-card-seller span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* LOCATION */

.padi-prod .padi-card-location {
  display: flex !important;
  align-items: flex-start !important;
  gap: 5px !important;

  margin: 0 0 7px !important;

  color: #8a8a8a !important;
  font-size: 10px !important;
  line-height: 15px !important;
}

.padi-prod .padi-card-location i {
  margin-top: 2px;
  color: #aaa;
}

.padi-prod .padi-card-location > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.padi-prod .padi-card-location a {
  color: inherit !important;
}


/* PRICE */

.padi-card-price {
  margin-top: auto;
  color: #39A81E;
  font-size: 16px;
  line-height: 21px;
  font-weight: 800;
}


/* DESCRIPTION */

.padi-card-description {
  color: #666 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  margin: 6px 0 10px !important;
}


/* EXTRA */

.padi-card-extra {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 !important;
}

.padi-card-extra span {
  background: #f5f5f5;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 11px;
  color: #666;
}


/* DETAIL BUTTON */

.padi-card-actions {
  margin-top: 9px;
}

.padi-detail-button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #39A81E;
  border-radius: 7px;

  color: #39A81E !important;
  background: #fff;

  font-size: 11px;
  font-weight: 700;
  text-decoration: none !important;

  transition: .2s ease;
}

.padi-detail-button:hover {
  color: #fff !important;
  background: #39A81E;
}


/* CONTACT DETAIL */

.padi-contact-area {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px !important;
}

.padi-contact-button,
.padi-phone-button,
.padi-email-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 38px;
  padding: 8px 12px;

  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.padi-contact-button {
  background: #39A81E;
  color: #fff !important;
}

.padi-phone-button {
  background: #edf8e8;
  color: #278513 !important;
}

.padi-email-button {
  background: #f5f5f5;
  color: #555 !important;
}


/* LIST VIEW */

.padi-list-right {
  padding: 15px !important;
}

.padi-list-price {
  color: #39A81E;
  font-size: 18px;
  font-weight: 800;
}


/* GRID MODE */

.products.grid .padi-prod .padi-card-actions {
  display: none;
}

.products.grid .padi-prod .padi-card-description {
  display: none !important;
}

.products.grid .padi-prod .padi-card-extra {
  display: none !important;
}


/* MOBILE */

@media (max-width: 600px) {

  .padi-prod .padi-card-body {
    padding: 9px 9px 10px !important;
  }

  .padi-prod .padi-card-title {
    font-size: 12px !important;
    line-height: 17px !important;
    min-height: 34px;
  }

  .padi-card-price {
    font-size: 14px;
  }

  .padi-category {
    font-size: 9px;
  }

  .padi-date {
    display: none;
  }

  .padi-card-seller {
    font-size: 10px;
  }

  .padi-prod .padi-card-location {
    font-size: 9px !important;
  }

  .padi-card-favorite a {
    width: 29px !important;
    height: 29px !important;
  }

}
/* =========================================================
   PADI ITEM PAGE V3
   desktop proper + sidebar related + app nav mobile
   ========================================================= */

body#item{
  background:#f3f5f2 !important;
}


/* container */
body#item .container.primary{
  max-width:1280px !important;
  width:min(calc(100% - 32px),1280px) !important;
  margin:18px auto 0 !important;
  padding:0 !important;
}


/* main layout: kiri konten, kanan sidebar */
body#item .data-box{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 340px !important;
  gap:22px !important;
  align-items:start !important;
}

body#item #item-main{
  min-width:0 !important;
}

body#item #item-side{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  position:sticky !important;
  top:120px !important;
}


/* gallery / placeholder */
body#item #item-image{
  border:1px solid #e2e8e2 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#edf3eb !important;
  padding:24px !important;
}

body#item #item-image.noimg{
  min-height:520px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

body#item #item-image.noimg img{
  width:min(100%,440px) !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:12px !important;
}


/* basic card */
body#item .basic,
body#item .description,
body#item .props,
body#item #comments,
body#item #seller,
body#item #protection,
body#item .padi-side-related,
body#item .box{
  border:1px solid #e3e8e3 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 3px 14px rgba(0,0,0,.03) !important;
}


/* basic block */
body#item .basic{
  padding:22px !important;
}

body#item .basic h1{
  font-size:24px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  color:#1d2a1f !important;
  margin-bottom:10px !important;
}

body#item .basic .price.under-header{
  color:#39A81E !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

body#item .basic .details span{
  background:#f3f5f3 !important;
  border-radius:999px !important;
  padding:7px 10px !important;
  font-size:12px !important;
  color:#5f6b61 !important;
}


/* description and content */
body#item .description{
  padding:22px !important;
}

body#item .description .text,
body#item .description .desc-text{
  min-height:auto !important;
}

body#item .description p,
body#item .description div,
body#item .description span{
  line-height:1.75 !important;
  color:#445145 !important;
}


/* map/location box inside */
body#item .description .loc,
body#item .description .location,
body#item .description .item-location{
  background:#f7faf7 !important;
  border:1px solid #e2e8e2 !important;
  border-radius:14px !important;
  padding:16px !important;
}


/* sidebar buttons */
body#item #item-side .master-button,
body#item #item-side .seller-button,
body#item .report-button{
  border-radius:14px !important;
  min-height:48px !important;
  font-weight:700 !important;
}


/* seller box */
body#item #seller{
  padding:18px !important;
}


/* sidebar related products */
body#item .padi-side-related{
  padding:16px !important;
}

body#item .padi-box-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:14px !important;
}

body#item .padi-box-head h3{
  margin:0 !important;
  font-size:18px !important;
  font-weight:800 !important;
  color:#223125 !important;
}

body#item .padi-box-head a{
  font-size:12px !important;
  font-weight:700 !important;
  color:#39A81E !important;
  text-decoration:none !important;
}

/* paksa related tampil vertikal di sidebar */
body#item .padi-side-related .products.grid,
body#item .padi-side-related .products{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}

body#item .padi-side-related .simple-prod,
body#item .padi-side-related .simple-wrap{
  margin:0 !important;
}

body#item .padi-side-related .img-wrap{
  border-radius:12px !important;
  overflow:hidden !important;
}

body#item .padi-side-related .img-wrap img{
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
}

body#item .padi-side-related .title{
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}

body#item .padi-side-related .price{
  color:#39A81E !important;
  font-weight:800 !important;
}


/* sembunyikan sticky bawaan epsilon di mobile agar tidak dobel */
body#item .sticky-button.isMobile{
  display:none !important;
}


/* floating app nav mobile */
.padi-app-nav-mobile{
  display:none;
}

@media (max-width: 900px){

  body#item .container.primary{
    width:calc(100% - 16px) !important;
    margin-top:10px !important;
  }

  body#item .data-box{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  body#item #item-side{
    position:static !important;
  }

  body#item #item-image{
    padding:12px !important;
    border-radius:16px !important;
  }

  body#item #item-image.noimg{
    min-height:300px !important;
  }

  body#item .basic{
    padding:16px !important;
  }

  body#item .basic h1{
    font-size:22px !important;
  }

  body#item .padi-side-related{
    margin-bottom:84px !important;
  }

  .padi-app-nav-mobile{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:9999;

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;

    padding:8px;

    border:1px solid #dfe7df;
    border-radius:20px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.14);
  }

  .padi-app-nav-mobile .nav-item{
    min-width:0;
    min-height:54px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    border-radius:14px;
    text-decoration:none !important;
    color:#5a645d;
    font-size:10px;
    font-weight:700;
  }

  .padi-app-nav-mobile .nav-item i{
    font-size:18px;
  }

  .padi-app-nav-mobile .nav-item.nav-post{
    background:#39A81E;
    color:#fff;
    transform:translateY(-14px);
    box-shadow:0 10px 22px rgba(57,168,30,.28);
  }

  .padi-app-nav-mobile .nav-item.nav-post i{
    font-size:22px;
  }

  /* kasih ruang agar konten tidak ketutup nav bawah */
  body#item{
    padding-bottom:90px !important;
  }
}