/*
 * pages/product-page.css
 * Consolidated from: style.css (product rules) + product-page.css + product-mobile.css
 * Mobile-first: base rules = mobile. Desktop restored at min-width: 769px.
 * Load order: after style.css in index2.php — cascades over same-specificity rules.
 * Before: style.css=5, product-page.css=122, product-mobile.css=101 (total 228 !important)
 * After: ~15 !important (only for confirmed cascade conflicts with main.css/responsive.css/inline styles)
 */

/* ============================================================
   OVERFLOW GUARD — mobile only
   Prevents horizontal scroll from jumbroton image overflow.
   ============================================================ */
@media (max-width: 768px) {
  body,
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ============================================================
   SECTION WRAPPER — overflow containment, all sizes
   ============================================================ */
.section-product-page,
.section-product-page__jumbroton,
.section-product-page__why-choose-me,
.section-product-page__why-choose-me-product,
.section-product-page__why-choose-me-content {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* responsive.css @media (max-width: 480px) { section { padding: 30px 0 } } menyebabkan
   strip putih antara navbar dan hero. Class selector menang atas element selector. */
.section-product-page {
  padding: 0;
}

/* ============================================================
   JUMBROTON — MOBILE BASE
   style.css sets position:relative + padding-top:227px without a media query.
   This file loads after style.css so these base rules override it on mobile.
   Desktop layout restored at min-width:769px below.
   ============================================================ */
.section-product-page__jumbroton {
  background-color: #5eabda;
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.section-product-page__jumbroton .--product-icon {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}

/* style.css sets height:365px; width:384px without media query.
   Overridden here because pages/product-page.css loads after style.css. */
.section-product-page__jumbroton .--product-icon img {
  width: 240px;
  height: auto;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Desktop nav: hide on mobile, restored at min-width:769px */
.section-product-page__jumbroton .--product-controll {
  display: none;
}

/* Mobile nav: show on mobile, hidden at min-width:769px */
.section-product-page__jumbroton .--product-controll-mobile {
  display: flex;
  justify-content: space-between;
  column-gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 0 20px;
}

.section-product-page__jumbroton .--product-controll-mobile a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 30px;
  background: #fff;
  color: #5eabda;
  text-decoration: none;
  white-space: nowrap;
}

.section-product-page__jumbroton .--product-controll-mobile a img {
  width: 10px;
  height: auto;
}

/* Product name block */
.section-product-page__jumbroton .--product-name {
  background-image: url('../img/bg-accent-ellipse.png');
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 12px;
  position: relative;
  z-index: 0;
  width: 100%;
  box-sizing: border-box;
}

.section-product-page__jumbroton .--product-name-sm {
  min-height: unset;
  width: 100%;
  padding: 12px 20px 40px;
  box-sizing: border-box;
}

.section-product-page__jumbroton .--product-name-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.section-product-page__jumbroton .--product-name-content h4,
.section-product-page__jumbroton .--product-name-content .product-category {
  font-family: Tahoma;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  margin-bottom: 4px;
  text-align: center;
  color: #fff;
}

.section-product-page__jumbroton .--product-name-content h2,
.section-product-page__jumbroton .--product-name-content h1 {
  font-family: Tahoma;
  font-size: 30px;
  font-weight: 800;
  line-height: 38px;
  margin: 0 0 6px;
  padding-bottom: 10px;
  text-align: center;
  color: #fff;
}

.section-product-page__jumbroton .--product-name-content p {
  font-family: Tahoma;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  padding: 0 8px;
  margin-bottom: 0;
}

/* Breadcrumb */
.product-breadcrumb {
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
}

.product-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-breadcrumb li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-family: Tahoma;
}

.product-breadcrumb li::after {
  content: ' / ';
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.5);
}

.product-breadcrumb li:last-child::after {
  content: '';
}

.product-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.product-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   WHY-CHOOSE-ME — MOBILE BASE
   ============================================================ */
.section-product-page__why-choose-me {
  background-color: #e5f6ff;
}

.section-product-page__why-choose-me-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 24px;
}

/* Type B — single-price card (9 pages, "Mulai dari" + "Hubungi Kami")
   style.css sets width:800px without media query — overridden here by cascade. */
.section-product-page__why-choose-me .get-product {
  background-color: #fff;
  transition: all 0.2s ease;
  width: calc(100% - 32px);
  max-width: 500px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  position: relative;
  top: auto;
  transform: none;
  z-index: 1;
}

.section-product-page__why-choose-me .get-product-sm {
  border-radius: 16px;
  box-shadow: 0 -2px 16px rgba(16, 24, 40, .05), 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .02);
  /* style.css sets margin-top:-50px at desktop, override to 0 for mobile */
  margin-top: 0;
  height: auto;
  padding: 18px 20px;
}

.section-product-page__why-choose-me .get-product-sm .start-from {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 14px;
}

.section-product-page__why-choose-me .get-product-sm .start-from-left,
.section-product-page__why-choose-me .get-product-sm .start-from-right {
  width: 100%;
  margin: 0;
}

.section-product-page__why-choose-me .get-product-sm .start-from p {
  width: auto;
  font-family: Tahoma;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.section-product-page__why-choose-me .get-product-sm .start-from h4 {
  width: auto;
  font-family: Tahoma;
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  margin-bottom: 0;
}

.section-product-page__why-choose-me .get-product-sm .start-from-right .btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: Tahoma;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 20px;
  margin: 0;
  border-radius: 30px;
}

/* start-from inside generic .get-product (shared) */
.section-product-page__why-choose-me .get-product .start-from {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 14px;
}

.section-product-page__why-choose-me .get-product p {
  width: auto;
  font-family: Tahoma;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.section-product-page__why-choose-me .get-product h4 {
  width: auto;
  font-family: Tahoma;
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  margin-bottom: 0;
}

.section-product-page__why-choose-me .get-product .start-from-right {
  width: 100%;
  margin: 0;
}

.section-product-page__why-choose-me .get-product .start-from-right .btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: Tahoma;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 20px;
  margin: 0;
  border-radius: 30px;
}

/* Type A — tier-pricing card (travel, pet, kecelakaan-diri)
   style.css sets margin-top:-70px at desktop, override for mobile. */
.section-product-page__why-choose-me .get-product-lg {
  border-radius: 12px;
  box-shadow: 0 -2px 16px rgba(16, 24, 40, .05), 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .02);
  padding: 18px 16px;
  margin-top: 0;
}

.section-product-page__why-choose-me .get-product .insurance-level,
.section-product-page__why-choose-me .get-product .insurance-level-many {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* 2 cards per row on mobile */
.section-product-page__why-choose-me .get-product .insurance-level .card-level {
  align-items: center;
  border: 1px solid #eaeced;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex: 1 1 calc(50% - 5px);
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  row-gap: 4px;
}

.section-product-page__why-choose-me .get-product .insurance-level .card-level.active {
  background-color: #ebf5fa;
  border-color: #5eabda;
}

.section-product-page__why-choose-me .get-product .insurance-level .card-level img {
  width: 32px;
  height: auto;
}

.section-product-page__why-choose-me .get-product .insurance-level .card-level-title {
  color: #2b3d4f;
  font-family: Tahoma;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  margin-bottom: 0;
  text-align: center;
}

.section-product-page__why-choose-me .get-product .insurance-level .card-level-value {
  color: #5eabda;
  font-family: Tahoma;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  margin-bottom: 0;
  text-align: center;
}

.section-product-page__why-choose-me .get-product-lg .start-from {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 12px;
  width: 100%;
}

.section-product-page__why-choose-me .get-product-lg .start-from-left,
.section-product-page__why-choose-me .get-product-lg .start-from-right {
  width: 100%;
  margin: 0;
}

/* Confirmed: inline style="margin-left:290px" on WA button in travel.php and pet.php.
   Only !important beats inline styles. */
.section-product-page__why-choose-me .get-product-lg .start-from-right .btn-primary {
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 20px;
  border-radius: 30px;
}

/* Insurance navigation (Cara Klaim / Simulasi buttons)
   style.css sets width:800px — overridden here. */
.section-product-page__why-choose-me-product .insurance-navigation {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: calc(100% - 32px);
  max-width: 500px;
  box-sizing: border-box;
}

.section-product-page__why-choose-me-product .insurance-navigation .btn-warning {
  align-items: center;
  display: flex;
  font-family: Tahoma;
  font-size: 15px;
  font-weight: 800;
  justify-content: space-between;
  line-height: 24px;
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 30px;
}

.section-product-page__why-choose-me-product .insurance-navigation .btn-warning .btn-text {
  align-items: center;
  column-gap: 16px;
  display: flex;
}

.section-product-page__why-choose-me-product .insurance-navigation .btn-warning .btn-text img {
  height: 32px;
  object-fit: cover;
  width: 32px;
}

.section-product-page__why-choose-me-product .insurance-navigation .btn-warning img {
  height: 24px;
  object-fit: cover;
  width: 24px;
}

/* ============================================================
   WHY-CHOOSE-ME CONTENT — MOBILE BASE
   ============================================================ */
.section-product-page__why-choose-me-content {
  margin-top: 32px;
  padding: 0 16px 48px;
  box-sizing: border-box;
}

.section-product-page__why-choose-me-content .title {
  color: #2b3d4f;
  font-family: Tahoma;
  font-size: 26px;
  font-weight: 800;
  line-height: 34px;
  margin-bottom: 16px;
}

/* Strength cards: 1 column on mobile */
.section-product-page__why-choose-me-content .product-strength-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.section-product-page__why-choose-me-content .product-strength-box .card-product-strength {
  background-color: #12b76a;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: unset;
  padding: 14px;
  row-gap: 10px;
}

.section-product-page__why-choose-me-content .product-strength-box .card-product-strength-icon {
  height: 56px;
  width: 56px;
}

.section-product-page__why-choose-me-content .product-strength-box .card-product-strength-icon img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 100%;
}

.section-product-page__why-choose-me-content .product-strength-box .card-product-strength-title {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  flex: 1;
  font-family: Tahoma;
  font-size: 17px;
  font-weight: 800;
  line-height: 26px;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

/* Product information box */
.section-product-page__why-choose-me-content .product-information-box {
  margin-top: 32px;
}

.section-product-page__why-choose-me-content .product-information-box .accordion.accordion-flush {
  background-color: #ebf5fa;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
  overflow: hidden;
  width: 100%;
}

.section-product-page__why-choose-me-content .product-information-box .accordion-item {
  background-color: #ebf5fa;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.section-product-page__why-choose-me-content .product-information-box .accordion-body {
  padding: 12px 0 0;
  font-family: Tahoma;
}

/* Term & condition section */
.section-product-page__why-choose-me-content .product-term-and-condition {
  margin-top: 24px;
}

.section-product-page__why-choose-me-content .product-term-and-condition-box,
.section-product-page__why-choose-me-content .product-term-and-condition-box-right {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.section-product-page__why-choose-me-content .product-term-and-condition-title {
  color: #2b3d4f;
  font-family: Tahoma;
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  margin-bottom: 16px;
  width: 100%;
}

.section-product-page__why-choose-me-content .product-term-and-condition-desc {
  color: #2b78a7;
  font-family: Tahoma;
  font-size: 14px;
  font-weight: 800;
  line-height: 24px;
  margin-bottom: 24px;
  width: 100%;
}

.section-product-page__why-choose-me-content .product-term-and-condition .detail-product-information-box .accordion {
  background-color: #ebf5fa;
  border: 1px solid #c8e3f3;
  border-radius: 16px;
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
  overflow: hidden;
  padding: 0 16px;
  width: 100%;
}

.section-product-page__why-choose-me-content .product-term-and-condition .detail-product-information-box .accordion-item {
  background-color: #ebf5fa;
  border-bottom-color: #c8e3f3;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  padding: 20px 0;
}

.section-product-page__why-choose-me-content .product-term-and-condition .detail-product-information-box .accordion-button2 {
  background-color: #ebf5fa;
  color: #2b3d4f;
  font-family: Tahoma;
  font-size: 18px;
  font-weight: 800;
  line-height: 28px;
  padding: 12px 0;
  display: flex;
  white-space: normal;
  word-break: break-word;
  width: 100%;
  box-sizing: border-box;
}

.section-product-page__why-choose-me-content .product-term-and-condition .detail-product-information-box .accordion-button2:not(.collapsed) {
  box-shadow: none;
  color: #2b3d4f;
}

/* ============================================================
   ACCORDION BUTTON2 — custom product accordion trigger
   Uses Bootstrap CSS custom properties (from Bootstrap already loaded).
   ============================================================ */
.accordion-button2 {
  align-items: center;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  color: var(--bs-accordion-btn-color);
  display: flex;
  font-size: 1rem;
  overflow-anchor: none;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  position: relative;
  text-align: left;
  transition: var(--bs-accordion-transition);
  width: 100%;
}

.accordion-button2::after {
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  content: "";
  flex-shrink: 0;
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  transition: var(--bs-accordion-btn-icon-transition);
  width: var(--bs-accordion-btn-icon-width);
}

.accordion-button2:hover {
  z-index: 2;
}

.accordion-button2:not(.collapsed) {
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
  color: var(--bs-accordion-active-color);
}

.accordion-item:first-of-type .accordion-button2 {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

/* ============================================================
   ACCORDION BODY CONTAINMENT — all screen sizes
   !important needed: main.css sets width:700px on accordion-item globally.
   responsive.css sets margin-left:16px on li globally.
   main.css at <=428px sets margin-left:35px / 30px on items/body.
   ============================================================ */
.product-information-content-box {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.product-information-box .accordion-flush .accordion-item,
.product-information-box .accordion-flush .accordion-item:first-child {
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
}

.detail-product-information-box .accordion-item {
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.product-information-box .accordion-body,
.detail-product-information-box .accordion-body {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.product-information-box .accordion-body ul,
.product-information-box .accordion-body ol,
.detail-product-information-box .accordion-body ul,
.detail-product-information-box .accordion-body ol {
  padding-left: 20px !important;
  margin: 0 0 8px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* responsive.css sets .accordion-body li { margin-left: 16px !important } */
.product-information-box .accordion-body li,
.detail-product-information-box .accordion-body li {
  margin-left: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.product-information-box .accordion-body p,
.detail-product-information-box .accordion-body p {
  max-width: 100% !important;
  width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Scoped accordion — #accordionProductInformation */
.section-product-page__why-choose-me-content #accordionProductInformation,
.section-product-page__why-choose-me-content .product-information-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* main.css global sets width:700px on accordion-item */
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-item {
  width: 100% !important;
  /* main.css at <=428px sets margin-left:35px */
  margin-left: 0 !important;
  box-sizing: border-box;
  padding: 16px;
}

.section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2 {
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  padding: 12px 16px;
  display: flex;
  white-space: normal;
  word-break: break-word;
}

/* main.css at <=428px sets margin-left:30px on accordion-body globally */
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 16px 16px;
  margin-left: 0 !important;
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.section-product-page__why-choose-me-content #accordionProductInformation .product-information-content-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body p,
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ul,
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ol,
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body li {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ul,
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body ol {
  padding-left: 20px;
  margin: 0 0 8px;
}

/* responsive.css sets li margin-left:16px */
.section-product-page__why-choose-me-content #accordionProductInformation .accordion-body li {
  margin-left: 0 !important;
  font-size: 14px;
}

/* Scoped accordion — #accordion-detail-product-information */
.section-product-page__why-choose-me-content #accordion-detail-product-information {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion {
  width: 100% !important;
  margin-left: 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-item {
  width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2 {
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px 0;
  display: flex;
  white-space: normal;
  word-break: break-word;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 16px 16px;
  margin-left: 0 !important;
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body p,
.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ul,
.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ol,
.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body li {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ul,
.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body ol {
  padding-left: 20px;
  margin: 0 0 8px;
}

.section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body li {
  margin-left: 0 !important;
  font-size: 14px;
}

/* Container padding reset — mobile only, preserve Bootstrap's desktop default */
@media (max-width: 768px) {
  .section-product-page__why-choose-me-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }

  .accordion-button2 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .accordion-body p,
  .accordion-body ul,
  .accordion-body ol {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   FINE-TUNE <= 480px — smaller phones
   ============================================================ */
@media (max-width: 480px) {
  .section-product-page__jumbroton .--product-icon img {
    width: 210px;
    max-height: 220px;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 26px;
    line-height: 34px;
  }

  .section-product-page__jumbroton .--product-name-content h4,
  .section-product-page__jumbroton .--product-name-content .product-category {
    font-size: 13px;
  }

  .section-product-page__why-choose-me-content .title {
    font-size: 22px;
  }

  .section-product-page__why-choose-me .get-product-sm .start-from h4 {
    font-size: 22px;
  }

  .section-product-page__why-choose-me .get-product .insurance-level .card-level-title {
    font-size: 13px;
  }

  .section-product-page__why-choose-me .get-product .insurance-level .card-level-value {
    font-size: 12px;
  }

  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2 {
    font-size: 16px;
  }
}

/* ============================================================
   FINE-TUNE <= 390px — iPhone 14 / 13 / 12 range
   ============================================================ */
@media (max-width: 390px) {
  .section-product-page__jumbroton .--product-icon img {
    width: 195px;
    max-height: 200px;
  }

  .section-product-page__why-choose-me .get-product-sm,
  .section-product-page__why-choose-me .get-product-lg {
    padding: 14px 16px;
  }

  .section-product-page__why-choose-me .get-product .insurance-level .card-level {
    padding: 8px;
  }
}

/* ============================================================
   FINE-TUNE <= 360px — tiny Android
   ============================================================ */
@media (max-width: 360px) {
  .section-product-page__jumbroton {
    padding-top: 60px;
  }

  .section-product-page__jumbroton .--product-icon img {
    width: 180px;
    max-height: 180px;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 22px;
    line-height: 30px;
  }

  .section-product-page__jumbroton .--product-name-content h4,
  .section-product-page__jumbroton .--product-name-content .product-category {
    font-size: 12px;
  }

  .section-product-page__jumbroton .--product-controll-mobile {
    padding: 0 12px;
  }

  .section-product-page__jumbroton .--product-controll-mobile a {
    font-size: 12px;
    padding: 8px 10px;
  }

  .section-product-page__why-choose-me .get-product {
    width: calc(100% - 24px);
    padding: 14px;
  }

  .section-product-page__why-choose-me .get-product-sm .start-from h4 {
    font-size: 20px;
  }

  .section-product-page__why-choose-me-product .insurance-navigation {
    width: calc(100% - 24px);
  }

  /* Single column on tiny screens — tier text too small to read 2-per-row */
  .section-product-page__why-choose-me .get-product .insurance-level .card-level {
    flex: 1 1 100%;
  }

  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2,
  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2,
  .accordion-button2 {
    font-size: 14px;
  }
}

/* ============================================================
   TABLET FINE-TUNE 769px – 1024px
   Desktop nav stays; layout narrower than full desktop.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .section-product-page__jumbroton {
    padding-top: 200px;
  }

  .section-product-page__jumbroton .--product-icon img {
    width: 320px;
    height: auto;
  }

  .section-product-page__jumbroton .--product-controll {
    padding: 0 40px;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 42px;
  }

  .section-product-page__why-choose-me .get-product {
    width: 90%;
    max-width: 700px;
  }

  .section-product-page__why-choose-me-product .insurance-navigation {
    width: 90%;
    max-width: 700px;
  }

  .section-product-page__why-choose-me-content {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section-product-page__why-choose-me-content .product-strength-box {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-product-page__why-choose-me-content .product-term-and-condition-box-right {
    width: 80%;
  }
}

/* ============================================================
   DESKTOP >= 769px — restores original desktop layout
   Overrides mobile base rules above.
   ============================================================ */
@media (min-width: 769px) {
  .section-product-page,
  .section-product-page__jumbroton,
  .section-product-page__why-choose-me,
  .section-product-page__why-choose-me-product,
  .section-product-page__why-choose-me-content {
    overflow-x: clip;
  }

  /* Jumbroton: switch back to absolute-positioned icon */
  .section-product-page__jumbroton {
    padding-top: 227px;
    display: block;
    align-items: unset;
  }

  .section-product-page__jumbroton .--product-icon {
    position: absolute;
    top: 67px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    margin: 0;
    overflow: visible;
  }

  .section-product-page__jumbroton .--product-icon img {
    width: 384px;
    height: 365px;
    object-fit: cover;
    max-width: unset;
    max-height: unset;
    display: inline;
    margin: 0;
  }

  /* Desktop nav */
  .section-product-page__jumbroton .--product-controll {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1440px;
    padding: 0 clamp(16px, 7.8vw, 112px);
  }

  .section-product-page__jumbroton .--product-controll .btn-secondary {
    align-items: center;
    background: #fff;
    border-radius: 30px;
    color: #5eabda;
    display: flex;
    font-family: Tahoma;
    font-size: 20px;
    font-weight: 800;
    justify-content: center;
    line-height: 30px;
    padding: 12px;
    width: 240px;
  }

  .section-product-page__jumbroton .--product-controll .btn-secondary img {
    height: 32px;
    margin-right: 8px;
    object-fit: cover;
    width: 12px;
  }

  .section-product-page__jumbroton .--product-controll .btn-secondary span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    max-width: 128px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
  }

  .section-product-page__jumbroton .--product-controll-mobile {
    display: none;
  }

  /* Product name — desktop */
  .section-product-page__jumbroton .--product-name {
    padding-top: 162px;
  }

  .section-product-page__jumbroton .--product-name-sm {
    /* border-box: min-height 452px adalah total element (bukan content-only).
       content-box sebelumnya menjadikan total = 162+452+90 = 704px — terlalu besar.
       Dengan border-box: total = 452px → jumbroton ~738px (dari 990px). */
    min-height: 452px;
    box-sizing: border-box;
    /* padding shorthand tidak dipakai — padding-top dihandle oleh
       .--product-name { padding-top: 162px } di atas. */
    padding-right: 0;
    padding-bottom: 90px;
    padding-left: 0;
    width: auto;
  }

  .section-product-page__jumbroton .--product-name-content h4,
  .section-product-page__jumbroton .--product-name-content .product-category {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 8px;
  }

  .section-product-page__jumbroton .--product-name-content h2,
  .section-product-page__jumbroton .--product-name-content h1 {
    font-size: 56px;
    line-height: 44px;
    margin: 2px 0 8px;
    padding-bottom: 20px;
  }

  .section-product-page__jumbroton .--product-name-content p {
    font-size: 20px;
    line-height: 30px;
    padding: 0;
    max-width: 710px;
  }

  .product-breadcrumb li {
    font-size: 13px;
  }

  /* Why-choose-me desktop */
  .section-product-page__why-choose-me .get-product {
    width: 800px;
    max-width: unset;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }

  .section-product-page__why-choose-me .get-product-sm {
    border-radius: 999px;
    margin-top: -50px;
    padding: 20px 24px 20px 48px;
    height: auto;
  }

  .section-product-page__why-choose-me .get-product-lg {
    border-radius: 12px;
    margin-top: -70px;
    padding: 20px 24px;
  }

  .section-product-page__why-choose-me .get-product p {
    width: 150px;
    font-size: 16px;
  }

  .section-product-page__why-choose-me .get-product h4 {
    width: 380px;
    font-size: 38px;
  }

  .section-product-page__why-choose-me .get-product .start-from {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    row-gap: 0;
  }

  .section-product-page__why-choose-me .get-product .start-from-right {
    width: auto;
    margin: 0;
  }

  .section-product-page__why-choose-me .get-product .start-from-right .btn-primary {
    width: max-content;
    font-size: 18px;
    padding: 16px 28px;
  }

  /* Type A WA button — inline style="margin-left:290px" still needs !important */
  .section-product-page__why-choose-me .get-product-lg .start-from-right .btn-primary {
    width: max-content !important;
    margin: 0 !important;
    padding: 16px 28px;
  }

  /* Insurance levels: flex row, not wrapped 2-per-row */
  .section-product-page__why-choose-me .get-product .insurance-level .card-level {
    flex: 1;
    min-width: 0;
    padding: 12px;
  }

  .section-product-page__why-choose-me .get-product .insurance-level .card-level-title {
    font-size: 16px;
    line-height: 24px;
  }

  .section-product-page__why-choose-me .get-product .insurance-level .card-level-value {
    font-size: 14px;
    line-height: 20px;
  }

  /* Insurance navigation — row layout on desktop */
  .section-product-page__why-choose-me-product .insurance-navigation {
    flex-direction: row;
    column-gap: 16px;
    row-gap: 0;
    justify-content: space-between;
    width: 800px;
    max-width: unset;
  }

  .section-product-page__why-choose-me-product .insurance-navigation .btn-warning {
    font-size: 16px;
    padding: 8px 16px;
  }

  /* Why-choose-me content — desktop */
  .section-product-page__why-choose-me-content {
    margin: 64px auto 0;
    max-width: 1440px;
    padding: 0 0 80px;
  }

  .section-product-page__why-choose-me-content .title {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 24px;
  }

  .section-product-page__why-choose-me-content .product-strength-box {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
  }

  .section-product-page__why-choose-me-content .product-strength-box .card-product-strength {
    min-height: 184px;
    row-gap: 16px;
  }

  .section-product-page__why-choose-me-content .product-strength-box .card-product-strength-title {
    font-size: 20px;
    line-height: 30px;
  }

  .section-product-page__why-choose-me-content .product-term-and-condition {
    margin-top: 48px;
  }

  .section-product-page__why-choose-me-content .product-term-and-condition-box-right {
    width: 50%;
    overflow: visible;
  }

  .section-product-page__why-choose-me-content .product-term-and-condition-title {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 24px;
  }

  .section-product-page__why-choose-me-content .product-term-and-condition-desc {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 32px;
  }

  .section-product-page__why-choose-me-content .product-information-box .accordion-item {
    padding: 24px;
  }

  .section-product-page__why-choose-me-content .product-information-box .accordion-body {
    padding: 24px 0 0;
  }

  /* Accordion desktop — restore natural sizing */
  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-item {
    padding: 24px;
  }

  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-button2 {
    font-size: 20px;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    white-space: normal;
  }

  .section-product-page__why-choose-me-content #accordionProductInformation .accordion-body {
    padding: 24px 0 0;
    font-size: 16px;
    line-height: 26px;
  }

  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-button2 {
    font-size: 18px;
    padding: 20px 0;
    white-space: normal;
  }

  .section-product-page__why-choose-me-content #accordion-detail-product-information .accordion-body {
    padding: 8px 0 16px;
    font-size: 16px;
    line-height: 26px;
  }
}