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

/* <style id="ic-standard-product-top-alignment"> */
/*
 * Standard product card:
 * seluruh card pada baris awal wajib mulai dari posisi atas yang sama.
 *
 * Perhitungan grid-row-end masonry tetap dipertahankan agar susunan
 * produk berikutnya tetap mengikuti tinggi masing-masing card.
 */
#product-container.product-grid-masonry:not(.ic-overlay-aligned-grid){
  align-items:start !important;
}

#product-container.product-grid-masonry:not(.ic-overlay-aligned-grid)
> .product-wrapper{
  margin-top:0 !important;
  padding-top:0 !important;
  align-self:start !important;
}

#product-container.product-grid-masonry:not(.ic-overlay-aligned-grid)
> .product-wrapper
> .product-card:not(.product-card-image-overlay){
  margin-top:0 !important;
  align-self:start !important;
}

/* <style id="ic-standard-natural-aligned-grid"> */
/*
 * Standard card dengan rasio gambar asli.
 *
 * Container memakai regular aligned grid agar:
 * - bagian atas semua produk sejajar;
 * - gambar tidak dipotong;
 * - rasio gambar asli tetap dipertahankan;
 * - image overlay tidak terpengaruh.
 */
#product-container.ic-standard-aligned-grid{
  display:grid !important;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        min(240px, 100%),
        300px
      )
    ) !important;
  justify-content:start !important;
  align-items:start !important;
  grid-auto-rows:auto !important;
  gap:12px !important;
}

#product-container.ic-standard-aligned-grid
> .product-wrapper{
  width:auto !important;
  max-width:none !important;
  margin-top:0 !important;
  padding-top:0 !important;
  align-self:start !important;
  grid-column:auto !important;
  grid-row:auto !important;
  grid-row-start:auto !important;
  grid-row-end:auto !important;
}

#product-container.ic-standard-aligned-grid
.product-card:not(.product-card-image-overlay){
  width:100% !important;
  height:auto !important;
  margin-top:0 !important;
}

#product-container.ic-standard-aligned-grid
.product-card:not(.product-card-image-overlay)
> .product-image-wrapper{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
}

#product-container.ic-standard-aligned-grid
.product-card:not(.product-card-image-overlay)
> .product-image-wrapper
picture{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

#product-container.ic-standard-aligned-grid
.product-card:not(.product-card-image-overlay)
> .product-image-wrapper
img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
}

@media (max-width:768px){
  #product-container.ic-standard-aligned-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* <style id="ic-overlay-product-aligned-grid"> */
#product-container.ic-overlay-aligned-grid{
  display:grid !important;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        min(240px, 100%),
        300px
      )
    ) !important;
  justify-content:start !important;
  align-items:start !important;
  grid-auto-rows:auto !important;
  gap:12px !important;
}

#product-container.ic-overlay-aligned-grid
.product-wrapper{
  width:auto !important;
  max-width:none !important;
  margin-top:0 !important;
  padding-top:0 !important;
  align-self:start !important;
  grid-row:auto !important;
  grid-row-end:auto !important;
}

#product-container.ic-overlay-aligned-grid
.product-card.product-card-image-overlay{
  margin-top:0 !important;
}

@media (max-width:768px){
  #product-container.ic-overlay-aligned-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}