/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* import google font "outfit" */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  --color-primary: #ff4d00;
  --color-secondary: #003399;
  --color-third: #0066cc;
  --font-base: 'Outfit', sans-serif;
}

body {
  font-family: var(--font-base);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #555;
}

.container {
  width: 1160px;
  margin: 0 auto;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
}

h1 {
  font-size: 2.25em;
  margin-bottom: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-secondary);
  text-align: center;
}

h2 {
  font-size: 1.5em;
  margin-bottom: 40px;
  font-weight: 700;
}

h3 {
  font-size: 1.25em;
  font-weight: 600;
}

hr {
  border: none;
  height: 2px;
  background-color: #f7f7f7;
  margin: 20px 0;
}

.main-content-section p {
  margin-bottom: 20px;
}

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

/* ===== TOP BAR ===== */
.top-bar {
  background-color: #e7e7e7;
}

.top-bar .container {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

.contact-info {
  display: flex;
  gap: 10px;
  color: var(--color-primary);
  font-size: 1.25em;
  font-weight: 500;
  align-items: center;
}

nav.top-links {
  font-size: 0.875em;
}

nav.top-links ul {
  display: flex;
  gap: 40px;
  list-style: none;
}

/* ===== MIDDLE BAR ===== */
.middle-bar {
  padding: 5px 0;
}

.middle-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 2px;
  overflow: hidden;
}

.search-box input {
  border: none;
  padding: 6px 8px;
  outline: none;
  width: 240px;
}

.search-box button {
  background: #e7e7e7;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
}

.search-icon {
  color: var(--color-secondary);
}

/* ===== BOTTOM BAR ===== */
.bottom-bar {
  background-color: #e7e7e7;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-inline-start: 0;
}

.nav-menu li {
  margin: 0 16px;
  position: relative;
}

.nav-menu a {
  text-decoration: none;
  color: #f15a22;
  font-weight: 600;
  display: block;
  padding: 3px 0;
  transition: color 0.2s;
  text-transform: uppercase;
}

.nav-menu li.active a,
.nav-menu a:hover {
  color: #00205b;
}

.nav-menu li.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #00205b;
}

/* main menu desktop */

.nav-menu li {
  margin: 0;
}

#main_menu ul ul {
  display: none;
  position: absolute;
  z-index: 999;
  padding: 0; /* utk reset padding browser */
}

#main_menu ul a {
  padding-right: 16px;
  padding-left: 16px;
}

#main_menu ul ul a {
  background-color: #e7e7e7;
  width: 250px;
}

#main_menu ul li {
  list-style: none;
}

#main_menu ul li:hover > ul {
  display: block;
}

#main_menu ul li a.parent_menu {
  background: url(/pc/images/template/drop-down_img.png?v=1) right center no-repeat;
}

/* ===== ECOM BARNAV ===== */
.ecom-barnav {
  border: 1px solid #e7e7e7;
  padding: 4px 0;
}

.ecom-barnav .container {
  display: flex;
  justify-content: right;
}

.ecom-nav {
  font-size: 0.875em;
}

.ecom-nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
}

.ecom-nav ul li a {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ecom-nav svg {
  height: 24px;
}

/* ===== HEROES ===== */
.heroes-wrapper {
  margin-top: 4px;
}

/* ===== CALL TO ACTION ===== */
.cta-wrapper {
  display: flex;
  color: white;
  font-size: 1.25em;
}

.cta-left {
  width: 50%;
  background-color: var(--color-third);
  padding: 20px 20px 5px;
}

.cta-left ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  list-style-position: inside;
  padding: 0;
}

.cta-left-bottom {
  display: flex;
  gap: 0;
  align-items: center;
}

.cta-right {
  width: 50%;
  background-color: var(--color-secondary);
  padding: 10px 20px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  gap: 50px;
}

/* ===== FEATURED PRODUCTS ===== */
.featured-products {
  text-align: center;
  padding: 60px 5%;
}

/* ===== PRODUCT GRID ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  justify-content: center;
  margin: 0 auto;
}

.product-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 6px;
}

.product-card:hover {
  transform: translateY(-6px);
}

.product-card img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

/* Zoom-in efek saat hover */
.product-card:hover img {
  transform: scale(1.05);
}

/* ===== OVERLAY HANYA 20% DARI BAWAH ===== */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; /* cuma 20% dari tinggi gambar */
  background: rgba(255, 255, 255, 0.65);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
  transform: translateY(100%); /* sembunyi di bawah dulu */
}

.overlay p {
  font-size: 1em;
  font-weight: 600;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  padding: 20px;
}

/* Saat hover baru muncul overlay dari bawah */
.product-card:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}

.product-card:hover .overlay p {
  opacity: 1;
  transform: translateY(0);
}

/* ===== MAIN CONTENT SECTION ===== */
.main-content-section {
  padding: 40px 0 60px;
}

/* ===== ORDER + QUOTE SECTION ===== */
.order-quote {
  display: flex;
  flex-wrap: wrap;
}

.order-box-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.order-box-wrapper h3 {
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 20px;
}

.order-box,
.payment-box {
  flex: 1;
  padding: 40px;
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.order-box {
  background: var(--color-third);
}

.order-box p {
  color: #fff;
  margin-top: 15px;
}

.btn-orange {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-weight: 400;
  letter-spacing: 2px;
  padding: 10px 40px;
  margin: 15px 0;
  text-decoration: none;
}

.btn-orange:hover {
  background: #d84d1c;
  color: #fff;
}

.payment-box {
  background: #e7e7e7;
}

.payment-box h3 {
  color: var(--color-secondary);
}

.payment img {
  width: 80%;
  max-width: 400px;
}

/* ===== QUOTE BOX ===== */
.quote-box {
  background: var(--color-secondary);
  color: #fff;
  text-align: center;
  flex: 1;
  padding: 40px;
}

.quote-box h3 {
  color: #fff;
  font-size: 2.25em;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.quote-box p {
  margin-bottom: 20px;
}

.quote-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  width: 300px;
  margin: 0 auto;
}

.quote-inputs label {
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 6px;
  width: 30%;
}

.quote-inputs input,
.quote-inputs select {
  padding: 6px 8px;
  width: 33%;
  font-size: 1em;
  line-height: 1.5em;
}

.quote-inputs select {
  padding: 8px;
}

select.product-select {
  width: 100%;
}

/* ===== TRUST SECTION ===== */
.trust-section {
  background: #fff;
  text-align: center;
}

.trust-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px 15%;
  border-top: 1px solid #e7e7e7;
}

.trust-container img {
}

.reviews {
  text-align: left;
  font-size: 0.8rem;
  color: #333;
}

/* ===== FOOTER LINKS ===== */
.footer {
  background: var(--color-third);
  color: #fff;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 40px 5%;
}

.footer h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1.25em;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer ul li {
  margin: 6px 0;
}

.footer ul li a {
  color: #fff;
  text-decoration: none;
}

.footer ul li a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid #fff;
  background: var(--color-secondary);
  text-align: center;
  padding: 40px;
  font-size: 1em;
  line-height: 2em;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* ===== BLOG SECTION ===== */
.blog-section {
  text-align: center;
  padding: 60px 5%;
  background-color: #fff;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding-top: 40px;
}

.blog-card {
  background: #f7f7f7;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.blog-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.blog-content {
  padding: 20px;
}

.blog-content h3 {
  color: #00205b;
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.blog-content p {
  color: #333;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
}

.blog-content p svg {
  width: 24px;
  color: var(--color-secondary);
}

.blog-content .read-more {
  color: #0044a8;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.blog-content .read-more:hover {
  text-decoration: underline;
}

.blog-content .meta {
  display: block;
}

.meta {
  border-top: 1px solid #ddd;
  margin: 12px 0px;
  padding: 10px 0px;
  color: #777;
  font-size: 0.85rem;
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #ddd;
}

.meta p {
  margin: 4px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ====== KATALOG PAGE ====== */
.sale-banner {
  display: flex;
  align-items: stretch; /* biar tinggi kanan & kiri sejajar */
  justify-content: space-between;
  margin-top: 4px;
}

/* Gambar kiri */
.sale-banner-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75%;
}

.sale-banner-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Box kanan */
.download-box-top {
  flex: 1; /* isi ruang sisa */
  background-color: var(--color-third);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.download-box-top h3 {
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.download-box-top .btn-orange {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 20px;
  font-weight: 400;
  text-decoration: none;
  margin: 0;
  transition: background 0.3s;
}

.download-box-top .btn-orange:hover {
  background-color: #e64200;
}

/* ====== PAGE TITLE ====== */
.page-title {
  padding: 40px 20px 0;
}

.page-title .breadcrumb {
  margin-bottom: 20px;
}

.page-title .pagination {
  margin-top: 20px;
  font-weight: 500;
}

/* ====== PRODUCT GRID ====== */
.catalog-products {
  background-color: #fff;
  padding: 40px 5%;
}

.catalog-card {
  text-align: center;
  background: #fafafa;
  border-radius: 6px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.catalog-card:hover {
  transform: translateY(-6px);
}

.catalog-card img {
  width: 100%;
  object-fit: cover;
  margin-bottom: 12px;
}

.catalog-card h3 {
  margin: 10px 0;
  font-weight: 500;
  padding: 0 15px;
  min-height: 80px;
  max-height: 80px;
  display: flex;
  font-size: 18px;
  justify-content: center;
  align-items: center;
}

.catalog-card .price {
  color: var(--color-third);
  font-weight: 500;
}

.catalog-card .stars {
  color: #ff4d00;
  margin: 6px 0;
  font-size: 1.1rem;
}

/* ===== PRODUCT DETAIL PAGE ===== */
.product-detail {
  background: #fff;
  padding: 60px 5%;
}

.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  padding-bottom: 40px;
}

/* === Left Side === */
.product-images {
  flex: 1;
  text-align: center;
}

.product-images a {
  display: inline-block;
}

.product-images .main-image {
  width: 100%;
  max-width: 420px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.thumbs {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.thumbs a {
  width: 33%;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: border 0.2s;
}

.thumbs a:hover {
  opacity: 1;
  border: 2px solid var(--color-primary);
}

/* === Right Side === */
.product-info {
  flex: 1 1 480px;
  color: #00205b;
}

.product-info h1 {
  text-align: left;
  margin-bottom: 10px;
  letter-spacing: 0;
}

.breadcrumb {
  margin-bottom: 15px;
}

.breadcrumb a {
  text-decoration: none;
}

.desc {
  margin-bottom: 20px;
}

.price {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 15px;
}

.subtext,
.availability {
  color: #666;
}

.btn-orange.large {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 30px;
  margin-top: 20px;
  transition: background 0.3s ease;
}

.btn-orange.large:hover {
  background: #e64200;
}

/* === Video Section === */
.video-section {
  margin-top: 25px;
}

.video-link {
  display: inline-flex;
  align-items: center;
  color: #0044a8;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.play-icon {
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

/* ===== PRODUCT TABS ===== */
.product-tabs {
  background: #fff;
  border-top: 1px solid #f7f7f7;
  padding: 40px 0;
}

/* Tab Header */
.tabs-header {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-secondary);
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  background: #f7f7f7;
  color: var(--color-secondary);
  border: none;
  padding: 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--color-third);
  color: #fff;
}

.tab-btn.active {
  background: var(--color-secondary);
  color: #fff;
}

/* Tab Content */
.tab-content {
  display: none;
  padding: 20px 0;
  color: #333;
  line-height: 1.6;
}

.tab-content.active {
  display: block;
}

/* Colors Tab */
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-swatch {
  flex: 1 1 120px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: lowercase;
  padding: 40px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Details Tab */
.details-list {
  list-style: disc;
  padding-left: 20px;
}

.details-list li {
  margin-bottom: 15px;
}

/* Videos Tab */
.video-placeholder {
  background: #f4f4f4;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
}

.video-placeholder .play-icon {
  width: 60px;
  height: 60px;
  background: #ff4d00;
  color: #fff;
  font-size: 1.8rem;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcSectionTitle {
  font-weight: 700;
}

@media (max-width: 1160px) {
  /* Tablet landscape & portrait */
  .container {
    width: 100%;
    padding: 0 20px;
  }

  #main_menu ul a {
    font-weight: 500;
    font-size: 0.875rem;
  }

  .cta-wrapper {
    font-size: 0.875rem;
  }

  .featured-products {
    padding: 30px 2%;
  }

  .overlay p {
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 500;
  }

  .contact-info {
    font-size: 0.875rem;
  }

  .footer {
    font-size: 0.875rem;
  }

  .sale-banner {
    flex-direction: column;
  }

  .download-box-top {
    flex-direction: row;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  /* mobile */
  /* perubahan dari sini */
  .container {
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
  }

  h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .nav-menu {
    display: none;
  }

  .main-nav {
    padding: 10px;
  }

  .ecom-nav {
    width: 100%;
  }

  .ecom-nav ul {
    gap: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: between;
  }

  .ecom-nav ul li {
    flex-basis: 48%;
  }

  .contact-info {
    font-size: 1em;
  }

  nav.top-links ul {
    padding: 0;
    font-size: 0.75rem;
    margin-bottom: 5px;
    gap: 20px;
  }

  .cta-wrapper {
    flex-direction: column;
    font-size: 1rem;
  }

  .cta-left,
  .cta-right {
    width: 100%;
  }

  .cta-left ul {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .cta-left-bottom {
    justify-content: center;
  }

  .cta-right img {
    width: 84px;
  }

  .overlay {
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
    height: auto;
  }

  .overlay p {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .quote-inputs {
  }

  .quote-box {
    padding: 20px;
  }

  .footer h4 {
    font-size: 1rem;
  }

  .footer ul li {
    font-size: 0.875rem;
  }

  .footer-bottom {
    font-size: 0.675rem;
    line-height: normal;
    padding: 20px 10px;
  }

  /* inner style mobile start here */
  .download-box-top {
    padding: 20px;
  }

  .btn-orange {
    text-align: center;
    padding: 10px;
    font-size: 0.875rem;
  }

  .product-tabs.container {
    padding: 0;
  }

  .product-grid.container {
    padding: 0;
  }

  .catalog-card h3,
  h3 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .price {
    font-size: 1rem;
  }

  .meta {
    flex-direction: column;
    gap: 0;
  }

  .simplesocial iframe {
    width: 100%;
  }

  .sale-banner-image {
    width: 100%;
  }

  /* perubahan sampai sini */

  .featured-products {
    padding: 40px 20px;
  }
  .overlay p {
    font-size: 0.85em;
  }
  .order-quote {
    flex-direction: column;
  }

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

  .blog-section {
    padding: 40px 20px;
  }
  .blog-content h3 {
    font-size: 1rem;
  }

  .sale-banner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .catalog-card img {
    /* height: 200px; */
  }

  .product-container {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .product-info {
  }

  .btn-orange.large {
    width: 100%;
  }

  .video-link {
    justify-content: center;
  }

  .tab-btn {
    flex: 1 1 50%;
  }

  .color-swatch {
    flex: 1 1 45%;
  }
} /* end @media (max-width: 768px) */

/*
khusus ecommerce start
*/

#pcMain {
  padding: 20px;
  max-width: 1160px;
  margin: 0 auto;
}

@media only screen and (max-width: 640px) {
  #pcMain {
    width: 100%;
    float: none;
    height: auto;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@media only screen and (max-width: 640px) {
  table {
    max-width: 100% !important;
  }
}

.pcMainTable {
  width: 100%;
}

@media only screen and (max-width: 640px) {
  th,
  table tr th,
  table tr td {
    display: block;
    width: 100%;
  }
}

#pcMain td img {
  display: inline;
}

.pcShowContent {
  width: 100%;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 20px;
  font-weight: normal;
  margin: 10px 0;
}

.pcShowContent td {
  padding-top: 3px;
  padding-bottom: 3px;
  vertical-align: top;
}

.mobile_label {
  display: none;
}

@media only screen and (max-width: 640px) {
  .mobile_label {
    display: inline;
  }
}

select.tinynav {
  display: none;
  width: 100%;
  padding: 10px;
}

@media only screen and (max-width: 768px) {
  select.tinynav {
    display: block;
  }
}

#pcOPCtotal {
  margin-top: 0 !important;
}

.pcShowCart {
  text-align: left;
  margin-left: 0;
  width: 100%;
  border: 0;
  border-collapse: collapse;
}

.pcShowCart th {
  background-color: #ffffcc;
  font-size: 12px;
  font-weight: bold;
  padding: 4px;
  border-bottom: 1px solid #e1e1e1;
  text-align: left;
}

.pcShowCart td {
  padding: 1px;
  vertical-align: top;
}

.pcShowCartPrices {
  text-align: left;
  padding-left: 3px;
}

.order-complete-table th,
.previous-order-table th {
  background-color: #f7f7f7;
  font-weight: bold;
}

@media only screen and (max-width: 640px) {
  .pcShowCart td {
    padding: 0;
    display: inline;
  }
}

@media only screen and (max-width: 640px) {
  .pcShowCart th,
  .order_preview th {
    display: none;
  }

  .loginform td {
    display: table-cell;
    width: auto;
  }

  .loginform input {
    margin: 5px 0;
  }

  #ORVForm td {
    display: table-cell;
    width: auto;
    vertical-align: middle;
  }

  .pcShowCart td {
    padding: 0;
    display: inline;
  }
  .pcShowCart td.qty {
    padding-top: 20px;
    display: block;
  }

  #pcOPCtotal {
    padding: 17px 12px 8px !important;
  }
  #opcLoginTable td {
    padding: 0 4px !important;
  }
  #opcLoginTable,
  #opcLoginTable .bottomCell,
  #opcLoginTable .rightCell {
    border: none !important;
  }
}

.swiper-slide {
  text-align: center; /* supaya image slider tengah */
}

.swiper-slide img {
  display: inline;
  width: 100%; /* supaya image slider tengah */
}

/*
khusus ecommerce end
*/