/* product-1.css — dipindah dari comp/seller-product.php (baris 10125, 26 Okt 2026) agar bisa di-cache browser. */

/* <style > */
/* =========================
   Masonry grid (daftar produk)
   ========================= */

/* Tidak pakai lagi square paksa untuk storefront */
.img-square {}

/* Default: masonry pakai column (desktop) */
#product-container.product-grid-masonry{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  column-gap:.75rem;
  -webkit-column-gap:.75rem;
  -moz-column-gap:.75rem;
}

#product-container.product-grid-masonry .product-wrapper{
  display:block;
  width:100%;
  margin:0 0 .75rem;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}

#product-container.product-grid-masonry .product-card{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

#product-container.product-grid-masonry .product-image-wrapper{
  width:100%;
  overflow:hidden;
  border-radius:var(--ic-card-radius-top);
}

#product-container.product-grid-masonry .product-image-wrapper picture{
  display:block;
  width:100%;
  max-width:100%;
}

#product-container.product-grid-masonry .product-image-wrapper img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

/* Mobile (<= 767px): grid 2 kolom */
@media (max-width: 767.98px){
  #product-container.product-grid-masonry{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:.75rem;
    column-count:initial;
    -webkit-column-count:initial;
    -moz-column-count:initial;
  }

  #product-container.product-grid-masonry .product-wrapper{
    margin:0;
    break-inside:auto;
    -webkit-column-break-inside:auto;
    page-break-inside:auto;
  }
}

/* Tablet: 3 kolom */
@media (min-width:768px) and (max-width:991.98px){
  #product-container.product-grid-masonry{
    column-count:3;
    -webkit-column-count:3;
    -moz-column-count:3;
  }
}

/* Laptop: 4 kolom */
@media (min-width:992px) and (max-width:1199.98px){
  #product-container.product-grid-masonry{
    column-count:4;
    -webkit-column-count:4;
    -moz-column-count:4;
  }
}

/* Desktop: 5 kolom */
@media (min-width:1200px){
  #product-container.product-grid-masonry{
    column-count:5;
    -webkit-column-count:5;
    -moz-column-count:5;
  }
}

/* Mode khusus <= 2 produk: pakai grid stabil */
#product-container.product-grid-masonry.product-grid-no-masonry{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem;
  column-count:initial;
  -webkit-column-count:initial;
  -moz-column-count:initial;
}

#product-container.product-grid-masonry.product-grid-no-masonry .product-wrapper{
  margin:0;
  break-inside:auto;
  -webkit-column-break-inside:auto;
  page-break-inside:auto;
}

@media (min-width: 992px){
  #product-container.product-grid-masonry.product-grid-no-masonry{
    grid-template-columns:repeat(2, minmax(260px,320px));
    justify-content:flex-start;
    max-width:720px;
    margin-left:0;
    margin-right:auto;
  }
}

/* =========================
   Product layout: GRID / QUICK ORDER
   ========================= */
#product-container.product-grid-list{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.75rem;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  align-items:stretch;
}

#product-container.product-grid-list .product-wrapper{
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}

#product-container.product-grid-list .product-card{
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  align-items:stretch;
  width:100%;
  max-width:none;
  min-width:0;
  min-height:108px;
  overflow:hidden;
  box-sizing:border-box;
  background:#fff;
}

#product-container.product-grid-list .product-image-wrapper{
  width:86px;
  height:100%;
  min-height:108px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--ic-card-radius) 0 0 var(--ic-card-radius) !important;
  background:#fff;
}

#product-container.product-grid-list .product-image-wrapper picture{
  display:flex !important;
  width:100% !important;
  height:100% !important;
  align-items:center;
  justify-content:center;
}

#product-container.product-grid-list .product-image-wrapper img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  padding:.35rem;
}

#product-container.product-grid-list .product-card .card-body{
  min-width:0;
  height:100%;
  justify-content:center;
  padding:.6rem .65rem !important;
  margin:0 !important;
}

#product-container.product-grid-list .product-card .card-title{
  font-size:.9rem !important;
  line-height:1.25;
  font-weight:600 !important;
  margin-bottom:.35rem !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

#product-container.product-grid-list .product-card .mt-auto{
  margin-top:.25rem !important;
}

#product-container.product-grid-list .product-card .d-flex.align-items-center.justify-content-between{
  gap:.45rem !important;
}

#product-container.product-grid-list .seller-open-modal-btn{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0 !important;
  padding:0 !important;
}

#product-container.product-grid-list .out-of-stock-overlay{
  font-size:.65rem;
  padding:6px;
  border-radius:var(--ic-card-radius) 0 0 var(--ic-card-radius);
}

#product-container.product-grid-list .pinned-star-badge{
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  font-size:.75rem;
}

/* Laptop kecil: 3 kolom */
@media (max-width: 1199.98px){
  #product-container.product-grid-list{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Tablet: 2 kolom */
@media (max-width: 991.98px){
  #product-container.product-grid-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 kolom full width */
@media (max-width: 767.98px){
  #product-container.product-grid-list{
    grid-template-columns:1fr;
    gap:.75rem;
    width:100%;
    max-width:none;
  }

  #product-container.product-grid-list .product-card{
    grid-template-columns:88px minmax(0, 1fr);
    min-height:104px;
    width:100%;
  }

  #product-container.product-grid-list .product-image-wrapper{
    width:88px;
    min-height:104px;
  }
}

/* Mobile kecil */
@media (max-width: 575.98px){
  #product-container.product-grid-list{
    gap:.65rem;
  }

  #product-container.product-grid-list .product-card{
    grid-template-columns:78px minmax(0, 1fr);
    min-height:96px;
  }

  #product-container.product-grid-list .product-image-wrapper{
    width:78px;
    min-height:96px;
  }

  #product-container.product-grid-list .product-card .card-body{
    padding:.55rem .6rem !important;
  }

  #product-container.product-grid-list .product-card .card-title{
    font-size:.88rem !important;
  }

  #product-container.product-grid-list .seller-open-modal-btn{
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
  }
}

/* =========================
   Search + helper UI
   ========================= */
.ic-hide-by-search{
  display:none !important;
}

.ic-search-empty{
  padding:12px;
  border:1px dashed rgba(0,0,0,.25);
  border-radius:12px;
  margin:12px 0;
}


/* =========================
   Busy overlay + error bar
   ========================= */
.ic-busy-overlay{
  position:fixed;
  inset:0;
  z-index:1700;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(2px);
}

.ic-busy-card{
  display:flex;
  gap:.6rem;
  align-items:center;
  padding:.8rem 1rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.ic-error-bar{
  position:fixed;
  left:12px;
  right:12px;
  top:12px;
  z-index:1750;
  padding:.6rem .8rem;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(220,53,69,.25);
  color:#b02a37;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.ic-btn-busy{
  opacity:.85;
  pointer-events:none;
}

.ic-btn-busy .spinner-border{
  width:1rem;
  height:1rem;
}


/* =========================
   Per-card busy + skeleton image
   ========================= */
.product-card{
    position:relative;
}

.product-image-wrapper{
    position:relative;
}

.product-image-wrapper .ic-img-skeleton{
    position:absolute;
    inset:0;
    min-height:120px;
    background:#f1f3f5;
    border-radius:.5rem;
}

.product-image-wrapper.ic-img-loaded .ic-img-skeleton{
    display:none;
}

.product-card .dropdown{
    position:relative;
    z-index:50;
}

.product-card .dropdown-menu{
    z-index:2000;
    white-space:normal;
}

.product-card .dropdown-item{
    white-space:normal;
    line-height:1.25;
}

/* ========================= External product links - visible platform chips ========================= */
.ic-external-card-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  width:100%;
  margin-top:8px;
}

.ic-external-card-link{
  max-width:100%;
  min-width:0;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:var(--brand) !important;
  text-decoration:none !important;
  line-height:1;
  padding:6px 10px;
  font-size:.78rem;
  font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.ic-external-card-link:first-child{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff !important;
}

.ic-external-card-link:hover{
  text-decoration:none !important;
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.ic-external-card-link i{
  flex:0 0 auto;
  font-size:.95rem;
  line-height:1;
}

.ic-external-label{
  display:inline-block;
  min-width:0;
  max-width:132px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ic-external-card-actions[data-count="2"] .ic-external-label,
.ic-external-card-actions[data-count="3"] .ic-external-label{
  max-width:96px;
}

.ic-external-card-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Full-row stacked layout for physical products with marketplace links */
.ic-external-card-actions--fullrow{flex-direction:column;gap:4px;}
.ic-external-card-actions--fullrow .ic-external-card-link{
  width:100%;
  justify-content:center;
  padding:7px 12px;
  border-radius:10px;
}
.ic-external-card-actions--fullrow .ic-external-label{max-width:none;flex:0 1 auto;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="tokopedia"]{background:#00aa5b !important;border-color:#00aa5b !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="shopee"]{background:#ee4d2d !important;border-color:#ee4d2d !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="lazada"]{background:#0f0f7d !important;border-color:#0f0f7d !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="blibli"]{background:#0095da !important;border-color:#0095da !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="bukalapak"]{background:#e31e25 !important;border-color:#e31e25 !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="tiktok"]{background:#010101 !important;border-color:#010101 !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="zalora"]{background:#222 !important;border-color:#222 !important;color:#fff !important;}
.ic-external-card-actions--fullrow .ic-external-card-link[data-channel="jdid"]{background:#cc0000 !important;border-color:#cc0000 !important;color:#fff !important;}

.ic-external-card-link.ic-cart-btn,.ic-external-card-link.ic-cart-btn:first-child{background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important;}
.ic-external-card-link.ic-cart-btn:hover{background:#fff !important;border-color:var(--brand) !important;color:var(--brand) !important;}

.product-card .ic-card-busy-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.65);
  z-index:10;
  border-radius:inherit;
}

.product-card.ic-card-busy .ic-card-busy-overlay{
  display:flex;
}


/* =========================
   Category button icon
   ========================= */
.ic-cat-btn .ic-cat-icon{
  font-size:1.25rem;
  color:var(--bs-secondary-color);
}

.ic-cat-btn[aria-pressed="true"] .ic-cat-icon{
  color:var(--ic-brand, var(--brand, #0d6efd));
}


/* =========================
   Product details (OFFCANVAS) - scoped
   ========================= */

/* Fix utama: matiin scroll kiri-kanan */
#productQtyModal,
#productQtyModal .offcanvas-body{
  overflow-x:hidden !important;
}

/* Header overlay: untuk offcanvas lebih aman sticky (bukan absolute) */
#productQtyModal .ic-modal-header-overlay{
  position:absolute;          /* ✅ overlay */
  top:0;
  left:0;
  right:0;
  z-index:40;
  padding:.5rem .5rem;
  background:transparent;
  border:0;
  pointer-events:none;        /* biar klik tembus kecuali tombol */
}

#productQtyModal .ic-modal-header-overlay .ic-modal-actions{
  pointer-events:auto;
}

/* Tombol icon */
#productQtyModal .ic-icon-btn{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#productQtyModal .ic-icon-btn .bi{
  font-size:1.05rem;
  line-height:1;
}

/*
 * Product detail actions — dark mode.
 * Tombol share dan close harus tetap jelas di atas gambar/panel gelap.
 */
html[data-stf-mode="dark"]
#productQtyModal .ic-modal-actions .ic-icon-btn,
body[data-stf-mode="dark"]
#productQtyModal .ic-modal-actions .ic-icon-btn{
  color:#fff !important;
  background:rgba(15,23,42,.78) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

html[data-stf-mode="dark"]
#productQtyModal .ic-modal-actions .ic-icon-btn:hover,
html[data-stf-mode="dark"]
#productQtyModal .ic-modal-actions .ic-icon-btn:focus,
body[data-stf-mode="dark"]
#productQtyModal .ic-modal-actions .ic-icon-btn:hover,
body[data-stf-mode="dark"]
#productQtyModal .ic-modal-actions .ic-icon-btn:focus{
  color:#fff !important;
  background:rgba(30,41,59,.94) !important;
  border-color:rgba(255,255,255,.55) !important;
}

/* Image frame: jangan pakai 100vw (sering bikin overflow). Pakai 100% + max-width */
#productQtyModal .ic-img-frame{
  width:100%;
  max-width:980px;
  margin:0 auto;
  position:relative;
  background:#fff;
  overflow:hidden; /* potong elemen absolute kalau kebablas */
}

/* Gambar utama */
#productQtyModal .ic-img-frame img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:75vh;
  object-fit:contain;
  object-position:center;
  background:transparent;
}

/* Placeholder */
#productQtyModal .ic-img-placeholder{
  width:100%;
  aspect-ratio:4/5;
  min-height:260px;
  max-height:75vh;
  background:#fff;
  border:0 !important;
}

/* Mobile/tablet: biar frame full lebar container, tetap 100% (tanpa 100vw) */
@media (max-width: 991.98px){
  #productQtyModal .ic-img-frame{
    width:100%;
    max-width:100%;
  }
  #productQtyModal .ic-img-frame img{
    max-height:60vh;
  }
}

/* Product image slider: dua layer bergeser penuh 100% */
#productQtyModal #modalImgSlider{
  position:relative;
  overflow:hidden;
}

#productQtyModal #modalProdImg,
#productQtyModal .ic-modal-slide-layer{
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

#productQtyModal .ic-modal-slide-layer{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2;
  display:block;
  margin:0 !important;
  pointer-events:none;
}

/* Safety: teks panjang jangan dorong lebar */
#productQtyModal #modalProdTitle,
#productQtyModal #modalProdDesc{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Safety: area variant jangan bikin overflow */
#productQtyModal #modalVariantBox,
#productQtyModal #modalVariantBox *{
  max-width:100%;
}

/* <style > */
body.ic-category-loading {
  cursor: progress;
}

body.ic-category-loading #product-container {
  opacity: .32;
  pointer-events: none;
  transition: opacity .16s ease;
}

body.ic-category-loading::after {
  content: "";
  position: fixed;
  z-index: 10050;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 4px solid rgba(255, 122, 0, .22);
  border-top-color: var(--ic-theme-color, #ff7a00);
  border-radius: 50%;
  animation: ic-category-spin .7s linear infinite;
  pointer-events: none;
}

.category-link.is-loading {
  pointer-events: none;
  opacity: .65;
}

@keyframes ic-category-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ic-category-loading::after {
    animation-duration: 1.4s;
  }

  body.ic-category-loading #product-container {
    transition: none;
  }
}