/* =========================================================
   GLOBAL RESET AMAN (TANPA MERUSAK GUTENBERG / WOOCOMMERCE)
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================================================
   HEADER + LOGO (HILANGKAN TUMPANG TINDIH)
========================================================= */
header,
.site-header {
  position: relative;
  clear: both;
  width: 100%;
  background: #fff;
}

.site-branding,
.site-logo,
.logo {
  display: block;
  text-align: center;
  margin: 20px auto;
}

.site-branding img,
.site-logo img,
.logo img {
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Cegah logo dobel ketimpa */
.site-header img {
  position: relative;
  z-index: 2;
}

/* =========================================================
   NAVIGATION MENU
========================================================= */
.main-navigation,
.nav-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 10px 0 20px;
  padding: 0;
}

.main-navigation li {
  list-style: none;
}

.main-navigation a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

/* =========================================================
   SEARCH BAR
========================================================= */
.search-form,
.woocommerce-product-search {
  max-width: 420px;
  margin: 10px auto 25px;
  display: flex;
}

.search-form input,
.woocommerce-product-search input {
  width: 100%;
  padding: 10px 12px;
}

/* =========================================================
   GUTENBERG CONTENT FIX
========================================================= */
.wp-block {
  margin-bottom: 1.5em;
}

.wp-block-heading,
h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  margin: 0 0 0.6em;
  font-weight: 600;
}

.wp-block-paragraph,
p {
  margin: 0 0 1em;
}

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.wp-block-column {
  flex: 1;
  min-width: 0;
}

/* Images */
.wp-block-image img,
.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   WOOCOMMERCE PRODUCT GRID
========================================================= */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.woocommerce ul.products li.product {
  width: calc(33.333% - 20px);
  box-sizing: border-box;
}

/* Buttons */
.woocommerce a.button,
.wp-block-button__link {
  background: #6a2c91;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

/* =========================================================
   RESPONSIVE (MOBILE)
========================================================= */
@media (max-width: 768px) {
  .woocommerce ul.products li.product {
    width: 100%;
  }

  .main-navigation {
    gap: 10px;
  }

  .site-branding img,
  .logo img {
    max-width: 220px;
  }
}