/* =========================================================
   natsoe-header.css — bydenio-style header (used with natsoe-header.js)
   Desktop: menu left | logo center | icons right
   Mobile (<992px): burger left | logo center | icons right, menu drawer left
   ========================================================= */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light > .container.nh-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 70px;
  min-height: 70px;
  max-width: 100%;
  padding: 0 40px !important;
  flex-wrap: nowrap !important;
}
.nh-header .nh-hidden { display: none !important; }
.nh-header .nh-left { display: flex; align-items: center; justify-self: start; min-width: 0; }
.nh-header .nh-center { display: flex; align-items: center; justify-content: center; justify-self: center; }
.nh-header .nh-right { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 14px; }
.nh-header .nh-center .region-nav-branding,
.nh-header .nh-center .navbar-brand { margin: 0 !important; padding: 0 !important; }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-center .site-logo img {
  height: 22px !important;
  width: auto !important;
  max-height: 22px !important;
  padding: 0 !important;
}
.nh-header .nh-icon,
.nh-search-panel .nh-icon,
.nh-menu .nh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  color: #222 !important;
  cursor: pointer;
  box-shadow: none !important;
}
.nh-header .nh-icon:hover { color: #4d5959 !important; }
.nh-header .nh-burger { display: none; }
.nh-header .nh-right .region-nav-additional {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right #natsoe-user-btn,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right #natsoe-cart-trigger {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #222 !important;
}
.nh-header .nh-right svg { width: 22px; height: 22px; }
@media (min-width: 992px) {
  .nh-menu .nh-drawer-head { display: none !important; }
  .nh-header .nh-menu { display: block !important; margin: 0 !important; padding: 0 !important; }
  .nh-header .nh-menu .advanced-mega-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
  html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-menu .advanced-mega-menu-item-inner > a {
    padding: 5px 12px !important;
  }
  html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-menu .advanced-mega-menu > li:first-child .advanced-mega-menu-item-inner > a {
    padding-left: 0 !important;
  }
}
@media (max-width: 991.98px) {
  html body nav.navbar.navbar-expand-lg.navbar-dark.text-light > .container.nh-header {
    height: 60px;
    min-height: 60px;
    padding: 0 12px !important;
  }
  .nh-header .nh-burger { display: inline-flex; }
  .nh-header .nh-right { gap: 6px; }
  .nh-header .nh-right .region-nav-additional { gap: 6px; }
  .nh-header .nh-right #natsoe-user-menu-wrapper { display: none !important; }
  html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-center .site-logo img {
    height: 18px !important;
    max-height: 18px !important;
  }
  .nh-header .nh-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #fff;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform .3s ease;
    overflow-y: auto;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: 2px 0 12px rgba(0,0,0,.08);
  }
  body.nh-menu-open .nh-header .nh-menu { transform: translateX(0); }
  .nh-menu .nh-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
  }
  .nh-menu .nh-drawer-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111;
  }
  .nh-header .nh-menu .advanced-mega-menu { display: block !important; margin: 0; padding: 0; }
  .nh-header .nh-menu .advanced-mega-menu > li { display: block; border-bottom: 1px solid #f0f0f0; }
  html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-menu .advanced-mega-menu-item-inner > a {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
}
.nh-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1055;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
body.nh-search-open .nh-overlay,
body.nh-menu-open .nh-overlay { opacity: 1; visibility: visible; }
body.nh-search-open,
body.nh-menu-open { overflow: hidden; }
.nh-search-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: #fff;
  z-index: 1065;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 12px rgba(0,0,0,.08);
  font-family: 'Poppins', sans-serif;
}
body.nh-search-open .nh-search-panel { transform: translateX(0); }
.nh-search-panel .nh-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
}
.nh-search-panel .nh-search-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111;
}
.nh-search-panel .nh-search-body { padding: 24px 20px; }
html body .nh-search-panel #views-exposed-form-product-search-page-1 .form--inline {
  display: flex !important;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  margin: 0 !important;
}
html body .nh-search-panel #views-exposed-form-product-search-page-1 .form-item { flex: 1 1 auto; margin: 0 !important; }
html body .nh-search-panel #views-exposed-form-product-search-page-1 input.form-text {
  width: 100% !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #3c3c3c !important;
}
html body .nh-search-panel #views-exposed-form-product-search-page-1 input.form-text::placeholder { color: #8a8a8a !important; }
html body .nh-search-panel #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 input#edit-submit-product-search.form-submit {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23111111' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ui-autocomplete { z-index: 1070 !important; }
/* footer: wordmark logo */
html body footer.mt-auto .natsoe-footer-brand img {
  height: 20px !important;
  width: auto !important;
  margin-bottom: 14px !important;
}

/* icon stroke fix — account & cart icons dark + thin like bydenio */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right #natsoe-user-btn svg,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right #natsoe-cart-trigger svg {
  stroke: #222 !important;
  color: #222 !important;
  stroke-width: 1.3 !important;
  width: 22px !important;
  height: 22px !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right #natsoe-user-btn svg *,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right #natsoe-cart-trigger svg * {
  stroke: #222 !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .nh-right .user-avatar-icon {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
}

/* old toggler hide (bootstrap toggler replaced by .nh-burger) */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light > .container.nh-header > .navbar-toggler,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light > .container.nh-header > #navbarSupportedContent {
  display: none !important;
}
/* tablet: keep announcement bar on one line so it doesn't cover the header */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html body .region-announcement-bar .natsoe-announcement-bar {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 11px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* drawer above overlay: lift the fixed navbar while the mobile menu is open */
html body.nh-menu-open nav.navbar.navbar-expand-lg.navbar-dark.text-light { z-index: 1062 !important; }
/* search form full width inside the panel */
html body .nh-search-panel .nh-search-body > div,
html body .nh-search-panel #views-exposed-form-product-search-page-1 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* SLIDESHOW mobile image — field_gambar_mobile (portrait) replaces the landscape slide on phones */
.slick--view--banner-homepage .views-field-field-gambar-mobile { display: none !important; }
.slick--view--banner-homepage .views-field-field-foto-pelanggan img,
.slick--view--banner-homepage .views-field-field-gambar-mobile img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767.98px) {
  .slick--view--banner-homepage .slick__slide:has(.views-field-field-gambar-mobile img) .views-field-field-foto-pelanggan {
    display: none !important;
  }
  .slick--view--banner-homepage .slick__slide:has(.views-field-field-gambar-mobile img) .views-field-field-gambar-mobile {
    display: block !important;
  }
}

/* =========================================================
   PRODUCT INFO ACCORDION (Deskripsi / Material / Color / Size Chart)
   Desktop: all sections open, headings as small bold labels.
   Mobile (<768px): collapsible rows like bydenio.
   ========================================================= */
html body .product-information-body.pi-accordion .pi-acc__head {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #3c3c3c;
  cursor: default;
}
@media (min-width: 768px) {
  html body .product-information-body.pi-accordion .pi-acc--desc > .pi-acc__head { display: none; }
  html body .product-information-body.pi-accordion .pi-acc + .pi-acc {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #ececec;
  }
  html body .product-information-body.pi-accordion .pi-acc:not(.pi-acc--desc) > .pi-acc__head { margin-bottom: 6px; pointer-events: none; }
  html body .product-information-body.pi-accordion .pi-acc__body { display: block !important; }
}
@media (max-width: 767.98px) {
  html body .product-information-inner .product-information-header { display: none !important; }
  html body .product-information-body.pi-accordion { padding-top: 0 !important; }
  html body .product-information-body.pi-accordion .pi-acc { border-bottom: 1px solid #e5e5e5; }
  html body .product-information-body.pi-accordion .pi-acc:first-child { border-top: 1px solid #e5e5e5; }
  html body .product-information-body.pi-accordion .pi-acc__head {
    position: relative;
    padding: 15px 30px 15px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111;
    cursor: pointer;
  }
  html body .product-information-body.pi-accordion .pi-acc__head::before,
  html body .product-information-body.pi-accordion .pi-acc__head::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #111;
    transition: transform .25s ease;
  }
  html body .product-information-body.pi-accordion .pi-acc__head::after { transform: rotate(90deg); }
  html body .product-information-body.pi-accordion .pi-acc.is-open > .pi-acc__head::after { transform: rotate(0deg); }
  html body .product-information-body.pi-accordion .pi-acc__body { display: none; padding: 0 0 16px; }
  html body .product-information-body.pi-accordion .pi-acc.is-open > .pi-acc__body { display: block; }
  html body .product-information-body.pi-accordion .pi-acc__body table { display: block; overflow-x: auto; }
}