/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 28 2026 | 08:32:58 */
/* =========================================
   UKURAN FONT JUDUL PRODUK SINGLE PRODUCT
   WooCommerce + Hello Shoppable
   Taruh di: Appearance > Customize > Additional CSS
========================================= */

/* Desktop / Laptop */
.single-product .product_title,
.single-product h1.product_title {
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 700;
}

/* Tablet / iPad */
@media (max-width: 1024px) {
    .single-product .product_title,
    .single-product h1.product_title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .single-product .product_title,
    .single-product h1.product_title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
}

/* HP kecil */
@media (max-width: 480px) {
    .single-product .product_title,
    .single-product h1.product_title {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
}





/* =========================================
   FIX UKURAN FONT HARGA SINGLE PRODUCT
   WooCommerce + Hello Shoppable
   Taruh di: Appearance > Customize > Additional CSS
========================================= */

/* Desktop / Laptop */
.single-product .woocommerce-Price-amount,
.single-product .woocommerce-Price-amount.amount,
.single-product .summary .woocommerce-Price-amount,
.single-product .summary .amount,
.single-product .price .amount {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

/* Tablet / iPad */
@media (max-width: 1024px) {
    .single-product .woocommerce-Price-amount,
    .single-product .woocommerce-Price-amount.amount,
    .single-product .summary .woocommerce-Price-amount,
    .single-product .summary .amount,
    .single-product .price .amount {
        font-size: 22px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .single-product .woocommerce-Price-amount,
    .single-product .woocommerce-Price-amount.amount,
    .single-product .summary .woocommerce-Price-amount,
    .single-product .summary .amount,
    .single-product .price .amount {
        font-size: 22px !important;
    }
}

/* HP kecil */
@media (max-width: 480px) {
    .single-product .woocommerce-Price-amount,
    .single-product .woocommerce-Price-amount.amount,
    .single-product .summary .woocommerce-Price-amount,
    .single-product .summary .amount,
    .single-product .price .amount {
        font-size: 16px !important;
    }
}





/* =========================================
   MENGATUR JUMLAH ETALASE PRODUK
   PER BARIS DI RELATED PRODUCTS
   (Halaman Single Produk)
========================================= */

/* TABLET / iPad = 3 produk */
@media (min-width: 768px) and (max-width: 1024px) {

  .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  .related ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
  }

}

/* MOBILE BESAR = 3 produk */
@media (min-width: 481px) and (max-width: 767px) {

  .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
  }

  .related ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
  }

}

/* MOBILE KECIL = 2 produk */
@media (max-width: 480px) {

  .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .related ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
  }

}





/* =========================================
   MENGATUR JARAK ETALASE PRODUK
   DARI TULISAN "PRODUK TERKAIT"
   (Halaman Single Produk)
========================================= */

/* DESKTOP */
@media (min-width: 1025px) {

  .related.products ul.products.columns-4 {
    margin-top: 5px !important;
  }

}

/* TABLET / iPad */
@media (min-width: 768px) and (max-width: 1024px) {

  .related.products ul.products.columns-4 {
    margin-top: 10px !important;
  }

}

/* MOBILE BESAR */
@media (min-width: 481px) and (max-width: 767px) {

  .related.products ul.products.columns-4 {
    margin-top: -8px !important;
  }

}

/* MOBILE KECIL */
@media (max-width: 480px) {

  .related.products ul.products.columns-4 {
    margin-top: -18px !important;
  }

}






/* =========================================
   MENGATUR JARAK KOSONG ANTARA
   DETAIL PRODUK DAN DESKRIPSI
   (Halaman Single Produk)
========================================= */

/* DESKTOP */
@media (min-width: 1025px) {

  .product-detail-wrapper + .row {
    margin-top: -120px !important;
  }

}

/* TABLET / iPad */
@media (min-width: 768px) and (max-width: 1024px) {

  .product-detail-wrapper + .row {
    margin-top: -70px !important;
  }

}

/* MOBILE BESAR */
@media (min-width: 481px) and (max-width: 767px) {

  .product-detail-wrapper + .row {
    margin-top: -30px !important;
  }

}

/* MOBILE KECIL */
@media (max-width: 480px) {

  .product-detail-wrapper + .row {
    margin-top: -20px !important;
  }

}





/* ===================================================
   PENGATURAN POSISI BOX VARIASI + QTY + BUTTON
=================================================== */


/* ===================================================
   DESKTOP
   Ukuran layar laptop / PC
   1025px ke atas
=================================================== */
@media (min-width: 1025px) {

    /* baris Warna + dropdown */
    .single-product table.variations td,
    .single-product table.variations th,
    .single-product .variations td,
    .single-product .variations th {
        vertical-align: middle !important;
        padding-top: 0 !important;
        padding-bottom: 8px !important;
    }

    /* dropdown Pilih sebuah opsi */
    .single-product .variations select,
    .single-product .value select {
        margin-top: -10px !important;
        position: relative !important;
    }

    /* area qty + tombol keranjang */
    .single-product .single_variation_wrap,
    .single-product .woocommerce-variation-add-to-cart,
    .single-product .cart {
        margin-top: -5px !important;
        position: relative !important;
    }

}


/* ===================================================
   TABLET / IPAD
   768px - 1024px
=================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    /* dropdown variasi */
    .single-product table.variations td.value select {
        margin-top: -5px !important;
        transform: translateY(-5px) !important;
        position: relative !important;
    }

    /* area qty + tombol */
    .single-product .single_variation_wrap {
        margin-top: -8px !important;
        transform: translateY(-8px) !important;
        position: relative !important;
    }

}


/* ===================================================
   MOBILE BESAR
   481px - 767px
=================================================== */
@media (min-width: 481px) and (max-width: 767px) {

    /* dropdown variasi */
    .single-product table.variations td.value select {
        margin-top: -4px !important;
        transform: translateY(-4px) !important;
        position: relative !important;
    }

    /* area qty + tombol */
    .single-product .single_variation_wrap {
        margin-top: -6px !important;
        transform: translateY(-6px) !important;
        position: relative !important;
    }

}


/* ===================================================
   MOBILE KECIL
   max 480px
=================================================== */
@media (max-width: 480px) {

    /* dropdown variasi */
    .single-product table.variations td.value select {
        margin-top: -10px !important;
        transform: translateY(-2px) !important;
        position: relative !important;
    }

    /* area qty + tombol */
    .single-product .single_variation_wrap {
        margin-top: -10px !important;
        transform: translateY(-4px) !important;
        position: relative !important;
    }

}