/** Shopify CDN: Minification failed

Line 2066:2 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.page-404 {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 150px 0;
    text-align: center;
  }

  .page-404 .page-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .title-404 {
    font-family: 'Aeonik', var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 120px;
    line-height: 1;
    color: #0A4A92;
    margin: 0 0 20px 0;
  }

  .text-404 {
    font-family: var(--font-body-family), sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #4a4a4a;
    margin: 0 0 40px 0;
  }

  .btn-404 {
    background-color: #D24B3D;
    color: white !important;
    padding: 16px 32px;
    border-radius: 10px;
    font-family: var(--font-body-family), sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-404:hover {
    background-color: #b53d30;
  }

  /* --- RESPONSIF MOBILE --- */
  @media screen and (max-width: 768px) {
    .page-404 { padding: 100px 0; }
    .title-404 { font-size: 80px; }
    .text-404 { font-size: 18px; margin-bottom: 30px; }
    .btn-404 { font-size: 14px; padding: 14px 24px; }
  }
/* END_SECTION:404 */

/* START_SECTION:about-hero-timeline (INDEX:1) */
/* Force Full Width mengabaikan wrapper tema */
  .about-hero-timeline {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 100px 0;
    overflow: hidden;
  }

  .about-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  .about-flex {
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
  }

  /* --- LEFT CONTENT --- */
  .about-content {
    flex: 0 0 45%; /* Perlebar sedikit sesuai gambar */
    padding-right: 20px;
  }

  .about-subheading {
    color: #ef4444; /* Merah cerah */
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 20px;
  }

  .about-heading {
    color: #1e3a8a; /* Biru dongker */
    font-family: 'Aeonik', sans-serif;
    font-size: 54px;
    line-height: 1.1;
    font-weight: 400;
    margin: 0 0 25px 0;
  }

  .about-description {
    font-family: var(--font-body-family), sans-serif;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 40px;
  }

  /* --- BUTTONS --- */
  .about-buttons {
    display: flex;
    gap: 15px;
  }

  .btn-solid {
    background-color: #1e3a8a;
    color: #ffffff !important;
    border: 1px solid #1e3a8a;
    padding: 14px 28px;
    border-radius: 6px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.3s, color 0.3s;
  }

  .btn-outline {
    background-color: transparent;
    color: #1e3a8a !important;
    border: 1px solid #1e3a8a;
    padding: 14px 28px;
    border-radius: 6px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.3s, color 0.3s;
  }

  .btn-solid:hover { background-color: #172554; border-color: #172554; }
  .btn-outline:hover { background-color: #1e3a8a; color: #ffffff !important; }

  /* --- RIGHT TIMELINE --- */
  .about-timeline {
    flex: 1;
    position: relative;
    padding: 20px 0;
  }

  /* Garis putus-putus presisi di tengah media */
  .timeline-line {
    display: none; 
  }

  .timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 2;
  }

  .timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .timeline-year {
    font-family: 'Inter', sans-serif; /* Fallback jika font script belum ada */
    color: #0A4A92;
    font-size: 18px;
    font-weight: 600;
  }

  .timeline-media {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* MEMBUAT GAMBAR BULAT SEMPURNA */
  .timeline-media img {
    width: 120px; /* Lebar tetap */
    height: 120px; /* Tinggi tetap (wajib sama dengan lebar agar proporsional) */
    object-fit: cover; /* Agar gambar mengisi lingkaran tanpa gepeng */
    border-radius: 50%; /* Membuat jadi bulat/circle */
    background-color: #ffffff; /* Tambahan background putih jika PNG transparan */
  }

  .timeline-text {
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    max-width: 140px;
    margin: 0;
  }

  /* RESPONSIF */
  @media screen and (max-width: 1024px) {
    .about-flex { flex-direction: column; text-align: center; }
    .about-content { width: 100%; padding-right: 0; }
    .about-buttons { justify-content: center; }
    .timeline-line { display: none; } /* Sembunyikan garis di tablet/mobile */
    .timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  }

  @media screen and (max-width: 768px) {
    .about-hero-timeline { padding: 60px 0; }
    .about-container { padding: 0 24px; }
    
    /* Mengembalikan teks rata kiri untuk mobile */
    .about-flex { text-align: left; align-items: stretch; }
    .about-content { text-align: left; }
    
    .about-heading { font-size: 36px; margin-bottom: 20px; }
    .about-description { font-size: 15px; margin-bottom: 32px; }
    
    /* Stack Buttons menjadi Full-Width */
    .about-buttons { 
      flex-direction: column; 
      gap: 12px; 
    }
    .btn-solid, .btn-outline { 
      width: 100%; 
      box-sizing: border-box; 
      text-align: center; 
      padding: 16px 20px; 
      font-size: 13px;
    }
    
    /* Timeline menjadi Grid 2x2 */
    .timeline-grid { 
      grid-template-columns: repeat(2, 1fr); 
      gap: 32px 16px; 
      margin-top: 20px;
    }
    .timeline-item { text-align: center; }
    .timeline-year { font-size: 16px; margin-bottom: 12px; }
    .timeline-media { height: 90px; margin-bottom: 12px; }
    .timeline-media img { width: 90px; height: 90px; }
    .timeline-text { font-size: 11px; max-width: 100%; padding: 0 4px; }
  }
/* END_SECTION:about-hero-timeline */

/* START_SECTION:about-innovation (INDEX:2) */
.about-innovation-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 100px 0;
  }

  .about-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  .inno-wrapper {
    display: flex;
    align-items: center;
    gap: 80px;
    justify-content: space-between;
  }

  /* --- KOLOM KIRI --- */
  .inno-left-col {
    flex: 1.1;
  }

  .inno-subheading {
    color: #ef4444;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
  }

  .inno-heading {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0 0 20px 0;
  }

  .inno-desc {
    font-family: var(--font-body-family), sans-serif;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 95%;
  }

  .inno-desc p { margin: 0; }

  /* Feature Items Inline */
  .inno-features-row {
    display: flex;
    align-items: center;
    gap: 0; /* Jarak diatur via padding di item */
  }

  .inno-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    padding: 0 10px;
  }

  /* Garis Vertikal (CSS Divider) Desktop */
  .inno-feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 45px;
    background-color: #0A4A92;
    opacity: 0.2;
  }

  .inno-feature-icon {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }

  .inno-feature-icon img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
  }

  .svg-icon-style {
    width: 26px;
    height: 26px;
  }

  .inno-feature-title {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif; /* Update font */
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 6px 0;
    line-height: 1.2;
  }

  .inno-feature-subtitle {
    color: #666666;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
  }

  /* --- KOLOM KANAN (Gambar Box Putih) --- */
  .inno-right-col {
    flex: 1;
  }

  .inno-image-cards {
    display: flex;
    gap: 20px;
  }

  .inno-image-card {
    background: #FDFCFB;
    border-radius: 16px;
    padding: 0px;
    flex: 1;
    aspect-ratio: 1 / 1; /* Membuat card berbentuk kotak (square) presisi */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .inno-image-card img {
    width: 100%;
    height: 100%; /* Memastikan gambar mengisi penuh area kotak */
    object-fit: contain;
    border-radius: 16px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  }

  /* --- RESPONSIF --- */
  @media screen and (max-width: 1024px) {
    .about-innovation-section { padding: 60px 0; }
    .inno-wrapper { flex-direction: column; gap: 50px; }
    .inno-left-col, .inno-right-col { width: 100%; }
    
    /* Kembalikan teks rata kiri */
    .inno-heading { text-align: left; font-size: 38px; }
    .inno-subheading { text-align: left; }
    .inno-desc { text-align: left; max-width: 100%; }
  }

  @media screen and (max-width: 768px) {
    .about-container { padding: 0 24px; }
    
    /* Teks Mobile */
    .inno-subheading { font-size: 11px; margin-bottom: 12px; }
    .inno-heading { font-size: 28px; line-height: 1.25; margin-bottom: 20px; }
    .inno-desc { font-size: 14px; line-height: 1.6; margin-bottom: 32px; }
    
    /* Feature Grid Mobile 2x2 */
    .inno-features-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px 0; /* Jarak vertikal 32px, horizontal diatur padding */
    }
    
    .inno-feature-item { padding: 0 10px; }
    
    /* Matikan semua border divider dulu */
    .inno-feature-item::after { display: none; }
    
    /* Nyalakan divider HANYA untuk item ganjil (sebelah kiri) */
    .inno-feature-item:nth-child(odd)::after {
      display: block;
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 45px;
      background-color: #0A4A92;
      opacity: 0.2;
    }

    /* Ukuran Icon & Text Fitur Mobile */
    .svg-icon-style { width: 28px; height: 28px; }
    .inno-feature-icon { height: 32px; margin-bottom: 12px; }
    .inno-feature-title { font-size: 16px; margin-bottom: 6px; }
    .inno-feature-subtitle { font-size: 11px; }
    
    
    /* Image Mobile (Berdampingan) */
    .inno-image-cards { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 16px; 
    }
    .inno-image-card { 
      padding: 16px; 
      border-radius: 16px; 
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); /* Shadow ditambahkan di sini */
      /* aspect-ratio: 1 / 1 tetap berlaku dari class utama desktop, jadi otomatis kotak di mobile juga */
    }
  }
/* END_SECTION:about-innovation */

/* START_SECTION:about-statement (INDEX:3) */
.about-statement {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* Padding-bottom dihilangkan di sini karena padding akan diletakkan di text-col untuk memberi ruang nempel bagi gambar Ron */
    padding: 30px 0 0 0; 
  }

  .about-statement__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Membiarkan kolom meregang sama tinggi */
  }

  /* --- KOLOM GAMBAR (RON) --- */
  .about-statement__image-col {
    width: 25%; /* TAMPILKAN LEBIH KECIL */
    display: flex;
    align-items: flex-end; /* KUNCI: Memaksa gambar Ron nempel ke dasar kontainer */
    justify-content: center;
    /* Sedikit jarak di atas kepala Ron, tapi bagian bawah dipaksa menempel */
    padding-top: 40px; 
  }

  .about-statement__image {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 0; /* Pastikan nempel bawah tanpa jarak */
  }

  /* --- KOLOM TEKS --- */
  .about-statement__text-col {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Teks berada di tengah secara vertikal */
    /* Padding dipertahankan seperti request klien */
    padding: 0 40px 40px 40px; 
  }

  .about-statement__top-text {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif;
    font-size: 26px;
    line-height: 1.4;
    font-weight: 500;
    margin: 0 0 40px 0;
    text-align: left;
  }

  .about-statement__top-text sup {
    font-size: 0.5em;
    vertical-align: super;
  }

  .about-statement__heading {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif;
    font-size: 40px;
    line-height: 1.3;
    font-weight: 500;
    margin: 0 0 30px 0;
    text-align: left;
  }

  .about-statement__author {
    font-size: 18px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    display: inline-block;
    margin-left: 8px;
    white-space: nowrap;
  }

  .about-statement__text {
    font-family: var(--font-body-family), sans-serif;
    color: #666666;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    text-align: left;
  }

  /* --- RESPONSIF --- */
  @media screen and (max-width: 1024px) {
    .about-statement__top-text {
      font-size: 22px;
      margin-bottom: 30px;
    }
    .about-statement__heading {
      font-size: 32px;
    }
    .about-statement__text-col {
      padding: 0 20px 80px 20px;
    }
    .about-statement__author {
      white-space: normal; /* Mengizinkan teks author turun baris jika layarnya kurang lebar */
    }
  }

  @media screen and (max-width: 768px) {
    .about-statement {
      padding: 60px 0 0 0;
    }
    
    .about-statement__container {
      flex-direction: column; /* Ditumpuk ke bawah di HP */
      padding: 0 24px;
    }

    .about-statement__text-col {
      width: 100%;
      padding: 0 0 40px 0;
      order: 1; /* Teks di atas */
      align-items: center;
      text-align: center;
    }

    .about-statement__image-col {
      width: 100%;
      max-width: 200px; /* Batasi ukuran foto Ron di mobile agar tetap kecil */
      margin: 0 auto;
      order: 2; /* Gambar di bawah */
      padding-top: 20px;
    }

    .about-statement__top-text {
      font-size: 18px;
      text-align: center;
      margin-bottom: 24px;
    }

    .about-statement__heading {
      font-size: 24px;
      text-align: center;
    }

    .about-statement__author {
      font-size: 14px;
      display: block;
      margin-left: 0;
      margin-top: 10px;
    }

    .about-statement__text {
      font-size: 12px;
      text-align: center;
    }
  }
/* END_SECTION:about-statement */

/* START_SECTION:about-story (INDEX:4) */
.about-story-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 100px 0;
    display: flex;
    align-items: center;
    overflow: hidden; 
  }

  /* --- Sisi Kiri (Gambar Mepet Edge di Desktop) --- */
  .story-image-col {
    flex: 0 0 35%; 
    max-width: 450px; 
    height: 100%; 
    display: flex;
    align-items: center;
  }

  .story-img {
    width: 100%;
    height: auto;
    border-radius: 0 24px 24px 0; 
    object-fit: cover;
    box-shadow: 10px 10px 40px rgba(0,0,0,0.06); 
    display: block;
  }

  /* --- Sisi Kanan (Container Flex Text & Stats di Desktop) --- */
  .story-container {
    flex: 1; 
    width: 100%;
    margin: 0; 
    padding-left: 70px; 
    padding-right: max(60px, calc(50vw - 720px + 60px)); 
    box-sizing: border-box;
  }

  .story-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 100%;
  }

  /* --- TEXT COL --- */
  .story-text-col {
    flex: 1; /* Memberikan seluruh sisa ruang untuk teks */
  }

  .story-subheading {
    color: #ef4444;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
    display: block;
  }

  .story-heading {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 500;
    margin: 0 0 24px 0;
  }

  .story-desc {
    font-family: var(--font-body-family), sans-serif;
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.7;
    max-width: 100%; /* Dibuat 100% agar memenuhi lebar kolom secara maksimal */
  }

  .story-desc p { margin-top: 0; margin-bottom: 20px; }
  .story-desc p:last-child { margin-bottom: 0; }

  /* --- STATS COL (Cards) --- */
  .story-stats-col {
    flex: 0 0 220px; /* Membatasi lebar bagian ikon maksimal 220px */
  }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    margin-left: auto;
  }

  .stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #f8f9fa;
  }

  .stat-icon {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }

  .stat-icon img { max-height: 100%; width: auto; object-fit: contain; }
  
  .svg-icon-style { width: 30px; height: 30px; }

  .stat-title {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 6px 0;
    line-height: 1.2;
  }

  .stat-subtitle {
    color: #666666;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
  }

  /* --- RESPONSIF --- */
  @media screen and (max-width: 1150px) {
    .story-content-wrapper { flex-direction: column; gap: 40px; align-items: stretch; }
    .story-stats-col { flex: auto; } /* Kembalikan sifat flex di tablet/mobile */
    .stats-grid { margin-left: 0; max-width: 100%; grid-template-columns: 1fr 1fr 1fr; }
  }

  @media screen and (max-width: 1024px) {
    .about-story-section {
      flex-direction: column; 
      padding: 60px 0; 
    }
    
    .story-container {
      order: 1; 
      flex: none;
      width: 100%;
      padding: 0 40px; 
    }

    /* Pindahkan Image ke bawah */
    .story-image-col {
      order: 2; 
      flex: none; 
      display: block; 
      width: 100%;
      max-width: 100%;
      height: auto; 
      margin-top: 40px; 
      padding: 0 40px;
    }
    
    .story-img {
      border-radius: 20px;
      width: 100%; 
      margin: 0; 
      box-shadow: 0 10px 40px rgba(0,0,0,0.06);
      display: block;
    }
    
    /* Kembalikan teks rata kiri di mobile */
    .story-text-col { text-align: left; }
    .story-subheading { text-align: left; }
    .story-heading { text-align: left; font-size: 38px; }
    .story-desc { text-align: left; }
  }

  @media screen and (max-width: 768px) {
    .about-story-section { padding: 60px 0; }
    
    .story-container { padding: 0 24px; }
    .story-image-col { padding: 0 24px; margin-top: 32px; }
    .story-img { border-radius: 16px; }
    
    /* Typography Text Kiri */
    .story-subheading { 
      font-size: 11px; 
      margin-bottom: 12px; 
    }
    .story-heading { 
      font-size: 28px; 
      line-height: 1.25; 
      margin-bottom: 20px; 
    }
    .story-desc { 
      font-size: 14px; 
      line-height: 1.6; 
    }
    
    .story-content-wrapper { gap: 24px; }
    
    /* FIX: Stats Grid menjadi 1 Kolom ke bawah */
    .stats-grid { 
      grid-template-columns: 1fr;
      gap: 16px; 
      max-width: 100%;
      margin-left: 0;
    }
    
    .stat-card { 
      padding: 24px 20px; 
      border-radius: 16px; 
    }
    
    .stat-icon { 
      height: 32px; 
      margin-bottom: 12px; 
    }
    
    .svg-icon-style { 
      width: 28px; 
      height: 28px; 
    }
    
    .stat-title { 
      font-size: 16px; 
      margin-bottom: 6px; 
    }
    
    .stat-subtitle { 
      font-size: 12px; 
    }
  }
/* END_SECTION:about-story */

/* START_SECTION:cart (INDEX:7) */
/* --- WRAPPER UTAMA --- */
  .page-cart {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fcfbfa; /* Off-white background */
    padding: 60px 0 100px 0;
  }

  .page-cart .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  /* --- HEADER CART --- */
  .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 20px;
  }

  .page-cart .page-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    font-size: 56px;
    color: #142B47;
    margin: 0;
    line-height: 1;
  }

  .continue-shopping {
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0A4A92;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
  }
  .continue-shopping:hover { color: #D24B3D; }

  /* --- GRID LAYOUT KIRI KANAN --- */
  .cart-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
  }

  /* --- DAFTAR ITEM (KIRI) --- */
  .cart-items-wrapper {
    width: 100%;
  }

  .cart-items-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 20px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
  }
  .col-quantity { text-align: center; }
  .col-total { text-align: right; }

  .cart-item {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .cart-item__media {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.04);
  }

  .cart-item__img, .placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .placeholder-svg { fill: #ccc; }

  .cart-item__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cart-item__title {
    font-family: var(--font-heading-family), sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0A4A92;
    text-decoration: none;
    margin: 0 0 5px 0;
    line-height: 1.3;
  }

  .cart-item__variant {
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0 0 5px 0;
  }

  /* --- PRICE WRAPPER CART --- */
  .cart-item__price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }

  .cart-item__price {
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0;
  }

  .cart-item__price-compare {
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: line-through;
  }

  .cart-item__quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .qty-input {
    width: 70px;
    text-align: center;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
  }

  .cart-item__remove {
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #D24B3D;
    text-decoration: underline;
  }
  .cart-item__remove:hover { color: #b53d30; }

  .cart-item__line-total {
    text-align: right;
    font-family: var(--font-body-family), sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #142B47;
  }

  /* --- RINGKASAN PESANAN (KANAN) --- */
  .cart-summary-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    position: sticky;
    top: 100px;
  }

  .cart-summary-box h3 {
    font-family: 'Aeonik', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #142B47;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .summary-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body-family), sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #142B47;
    margin-bottom: 15px;
  }

  .summary-note {
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0 0 25px 0;
    line-height: 1.5;
  }

  .summary-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .btn-checkout {
    background-color: #D24B3D;
    color: white !important;
    padding: 16px 24px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body-family), sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    width: 100%;
  }
  .btn-checkout:hover { background-color: #b53d30; }

  .btn-update {
    background-color: transparent;
    color: #0A4A92;
    padding: 14px 24px;
    border: 1px solid #0A4A92;
    border-radius: 10px;
    font-family: var(--font-body-family), sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
  }
  .btn-update:hover { background-color: #f0f4f8; }

  /* --- EMPTY CART STATE --- */
  .empty-cart-message {
    text-align: center;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .icon-empty-cart {
    width: 80px;
    height: 80px;
    color: #ccc;
    margin-bottom: 20px;
  }

  .empty-cart-message h2 {
    font-family: 'Aeonik', sans-serif;
    font-size: 32px;
    color: #142B47;
    margin: 0 0 10px 0;
  }

  .empty-cart-message p {
    font-family: var(--font-body-family), sans-serif;
    font-size: 18px;
    color: #666;
    margin: 0 0 30px 0;
  }

  .empty-cart-message .btn-checkout {
    display: inline-block;
    width: auto;
    min-width: 200px;
    text-decoration: none;
  }

  /* --- RESPONSIF TABLET & MOBILE --- */
  @media screen and (max-width: 989px) {
    .cart-layout {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .page-cart .page-inner { padding: 0 40px; }
    .cart-summary-box { position: static; }
  }

  @media screen and (max-width: 768px) {
    .page-cart { padding: 40px 0; }
    .page-cart .page-inner { padding: 0 20px; }
    
    .cart-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .page-cart .page-title { font-size: 36px; }
    
    .cart-items-header { display: none; } /* Sembunyikan header tabel di mobile */
    
    .cart-item {
      grid-template-columns: 100px 1fr;
      grid-template-areas: 
        "img details"
        "img quantity"
        "img total";
      gap: 10px 15px;
      padding: 20px 0;
    }
    
    .cart-item__media { grid-area: img; width: 100px; height: 100px; }
    .cart-item__details { grid-area: details; }
    
    .cart-item__quantity { 
      grid-area: quantity; 
      flex-direction: row; 
      justify-content: flex-start; 
    }
    
    .cart-item__line-total { 
      grid-area: total; 
      text-align: left; 
      margin-top: 10px;
    }
    
    .qty-input { padding: 8px; font-size: 14px; width: 60px; }
    .cart-item__title { font-size: 16px; }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:8) */
/* --- WRAPPER UTAMA --- */
  .collection-page {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fcfbfa; /* Latar belakang off-white */
    padding: 60px 0 100px 0;
  }

  .collection-page .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  /* --- HEADER & TYPOGRAPHY --- */
  .collection-header {
    text-align: center;
    margin-bottom: 50px;
  }

  .collection-page .page-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    font-size: 56px;
    color: #142B47;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 100%;
  }

  .collection-description {
    font-family: var(--font-body-family), sans-serif;
    font-size: 18px;
    color: #4a4a4a;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* --- GRID PRODUK (DIPAKSA 2 KOLOM DENGAN !IMPORTANT) --- */
  .collection-page .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 60px !important; 
  }

  /* --- CARD PRODUK --- */
  .collection-page .product-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
  }

  .collection-page .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  .collection-page .product-card__image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Gambar dibuat kotak sempurna (1:1) */
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .collection-page .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .collection-page .product-card:hover .product-card__image {
    transform: scale(1.05); /* Efek zoom tipis saat dihover */
  }

  .placeholder-svg {
    width: 100%;
    height: 100%;
    fill: #cccccc;
    background-color: #e9e9e9;
  }

  .collection-page .product-card__content {
    padding: 30px; /* Diperbesar karena kartu sekarang lebar */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  /* Styling SKU */
  .collection-page .product-card__sku {
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
  }

  .collection-page .product-card__title {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 400; /* Menghapus bold */
    font-size: 20px;
    color: #0A4A92;
    margin: 0 0 12px 0;
    line-height: 1.3;
  }

  /* --- Price Wrapper CSS --- */
  .collection-page .product-card__price-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 35px; /* Diberi ruang lega sebelum tombol */
  }

  .collection-page .product-card__price {
    font-family: var(--font-body-family), sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #333333;
    margin: 0;
  }

  .collection-page .product-card__price-compare {
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: line-through;
  }

  .collection-page .product-card__btn {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background-color: #0A4A92; 
    text-transform: uppercase;
    margin-top: auto;
    padding: 16px 24px; /* Padding tombol dipertajam untuk desktop */
    border-radius: 10px;
    text-align: center;
    display: block;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    width: 100%;
  }

  .collection-page .product-card:hover .product-card__btn {
    background-color: #0b5fbe; 
    color: #FFFFFF;
  }

  /* --- PAGINATION --- */
  .pagination-wrapper {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    font-family: var(--font-body-family), sans-serif;
  }

  .pagination-wrapper .page,
  .pagination-wrapper .next,
  .pagination-wrapper .prev {
    display: inline-block;
    margin: 0 5px;
  }

  .pagination-wrapper a,
  .pagination-wrapper span {
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 6px;
    color: #0A4A92;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .pagination-wrapper a:hover {
    background: #0A4A92;
    color: #ffffff;
    border-color: #0A4A92;
  }

  .pagination-wrapper .current {
    background: #0A4A92;
    color: #ffffff;
    border-color: #0A4A92;
  }

  /* --- RESPONSIF TABLET --- */
  @media screen and (max-width: 989px) {
    .collection-page { 
      padding-top: 120px; /* Kompensasi fixed header */
    }
    .collection-page .page-inner { padding: 0 40px; }
    .collection-page .page-title { font-size: 42px; }
    .collection-page .product-grid { 
      grid-template-columns: repeat(2, 1fr) !important; 
      gap: 40px !important; 
    } 
  }

  /* --- RESPONSIF MOBILE --- */
  @media screen and (max-width: 768px) {
    .collection-page { 
      padding: 120px 0 60px 0; /* Hindari tertutup header */
    }
    .collection-page .page-inner { padding: 0 20px; }
    
    .collection-header {
      margin-bottom: 32px;
    }
    .collection-page .page-title { 
      font-size: 32px; 
      margin-bottom: 12px; 
    }
    .collection-description { 
      font-size: 15px; 
    }
    
    .collection-page .product-grid {
      /* Tetap 2 kolom di layar mobile, dipaksa mutlak */
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px !important; 
    }
    
    .collection-page .product-card {
      border-radius: 12px; 
    }
    
    .collection-page .product-card__content { 
      padding: 16px; 
    }

    .collection-page .product-card__sku {
      font-size: 10px;
      margin-bottom: 4px;
    }
    
    .collection-page .product-card__title { 
      font-size: 14px;
      margin-bottom: 6px;
    }

    .collection-page .product-card__price-wrapper {
      margin-bottom: 16px; /* Ruang untuk tombol di mobile */
    }
    
    .collection-page .product-card__price { 
      font-size: 15px; 
    }

    .collection-page .product-card__price-compare {
      font-size: 12px;
    }
    
    .collection-page .product-card__btn { 
      font-size: 12px;
      padding: 12px 14px; /* Padding diatur ulang agar tombol tidak terlalu sempit */
      border-radius: 8px;
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:9) */
.collections-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 20px 100px 20px;
  }

  .collections-page__header {
    text-align: center;
    margin-bottom: 40px;
  }

  .collections-page__title {
    font-family: 'Aeonik', var(--font-heading-family), sans-serif;
    font-weight: 500;
    font-size: 48px;
    color: #142B47;
    margin: 0;
  }

  .collections-page__grid {
    display: grid;
    /* Menggunakan variabel dari schema, default fallback ke 1fr */
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }

  /* Diperbesar sedikit dari aslinya agar proporsional dengan card style baru */
  .collections--compact {
    --collection-card-size: 260px;
  }
  .collections--full {
    --collection-card-size: 320px; 
  }

  .collection-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    height: 100%;
  }

  .collection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  }

  .collection-card__image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
  }

  /* Menargetkan img dari tag render Shopify */
  .collection-card__image,
  .collection-card__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection-card__placeholder {
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
  }

  .collection-card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .collection-card__title {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 400; /* Removed bold */
    font-size: 18px;
    line-height: 1.2;
    color: #142B47;
    margin: 0 0 12px 0;
  }

  .collection-card__desc {
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
    margin: 0 0 20px 0;
  }

  .collection-card__btn {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background-color: #0A4A92;
    text-transform: uppercase;
    margin-top: auto; /* Memaksa button selalu berada di bawah */
    padding: 14px 24px;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.3s ease;
  }

  .collection-card__btn:hover {
    background-color: #0b5fbe; 
  }

  @media screen and (max-width: 768px) {
    .collections-page {
      padding: 40px 16px;
    }
    .collections-page__title {
      font-size: 36px;
    }
    .collections-page__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px; /* Menambah spacing antar produk di mobile */
    }
  }

  @media screen and (max-width: 480px) {
    .collections-page__grid {
      grid-template-columns: 1fr;
      gap: 24px; /* Menambah spacing antar produk di layar kecil */
    }
  }
/* END_SECTION:collections */

/* START_SECTION:contact-form (INDEX:10) */
.contact-form-wrapper { max-width: 800px; margin-top: 40px; }
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .field { margin-bottom: 20px; display: flex; flex-direction: column; }
  .field label { font-family: var(--font-body-family); font-size: 14px; margin-bottom: 8px; color: #0b3c7c; }
  .field input, .field textarea { 
    padding: 12px; border: 1px solid #e5e5e5; border-radius: 4px; 
    font-family: var(--font-body-family); font-size: 16px; 
  }
  .form-submit { 
    background-color: #0b3c7c; color: white; border: none; 
    padding: 14px 30px; border-radius: 6px; cursor: pointer;
    font-family: var(--font-body-family); font-weight: 500;
  }
  .form-status { background: #e8f5e9; color: #2e7d32; padding: 15px; margin-bottom: 20px; }

  @media screen and (max-width: 768px) { .field-grid { grid-template-columns: 1fr; } }
/* END_SECTION:contact-form */

/* START_SECTION:custom-section (INDEX:11) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:faq-accordion (INDEX:12) */
.faq-section { background: #ffffff; padding: 60px 0; }
  .faq-container { max-width: 800px; margin: 0 auto; }
  .faq-title { font-family: 'Aeonik', sans-serif; color: #0b3c7c; font-size: 32px; margin-bottom: 40px; text-align: center; }

  .faq-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 20px 0;
  }

  .faq-question {
    list-style: none; /* Hapus panah default */
    font-family: var(--font-body-family);
    font-weight: 600;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Animasi Plus/Minus */
  .faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
  }
  .faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    background: #0b3c7c;
    transition: transform 0.3s ease;
  }
  .faq-icon::before { width: 16px; height: 2px; top: 7px; } /* Garis horisontal */
  .faq-icon::after { width: 2px; height: 16px; left: 7px; } /* Garis vertikal */

  details[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
  details[open] .faq-icon::before { transform: rotate(180deg); }

  .faq-answer {
    padding-top: 15px;
    font-family: var(--font-body-family);
    font-size: 16px;
    line-height: 1.6;
    color: #666;
  }
/* END_SECTION:faq-accordion */

/* START_SECTION:footer (INDEX:13) */
.site-footer {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #123c78; /* Warna biru dongker untuk bagian bawah */
    color: #ffffff;
    font-family: var(--font-body-family), sans-serif;
  }

  .footer-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  /* --- 1. TRUST BADGES --- */
  .footer-trust-badges {
    background-color: #094a92; /* Warna biru lebih terang untuk trust badges */
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .trust-badges-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer-feature {
    flex: 1;
    padding: 0 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
  }

  .footer-feature:first-child {
    border-left: none;
    padding-left: 0;
  }
  .footer-feature:last-child {
    padding-right: 0;
  }

  .footer-feature__title {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    margin: 0 0 8px 0;
  }

  .footer-feature__text {
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
  }

  /* --- 2. MAIN FOOTER --- */
  .footer-main {
    padding: 60px 0;
  }

  .footer-main-wrapper {
    display: flex;
    gap: 80px;
    justify-content: space-between;
  }

  .footer-left {
    flex: 0 0 35%;
  }

  .footer-heading {
    font-family: var(--font-heading-family), sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 20px 0;
    color: #ffffff;
  }

  .footer-subheading {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 40px 0;
    line-height: 1.6;
    max-width: 400px;
  }

  /* Newsletter Form (Pill Shape) */
  .newsletter-input-group {
    display: flex;
    background-color: #ffffff;
    border-radius: 50px;
    padding: 6px;
    max-width: 450px;
    margin-bottom: 40px;
  }

  .newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    color: #333333;
    outline: none;
    box-shadow: none;
  }

  .newsletter-input::placeholder {
    color: #999999;
  }

  .newsletter-btn {
    background-color: transparent;
    border: none;
    padding: 10px 24px;
    font-family: var(--font-body-family), sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .newsletter-btn:hover {
    opacity: 0.7;
  }

  /* Social Icons */
  .footer-socials {
    display: flex;
    gap: 20px;
  }

  .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transition: all 0.3s ease;
  }

  .social-icon:hover {
    background-color: #ffffff;
    color: #123c78;
  }

  .social-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Menus & Contact (Kanan) */
  .footer-right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .footer-menu-title {
    font-family: var(--font-heading-family), sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px 0;
  }

  .footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer-menu-list a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    transition: color 0.3s ease;
  }

  .footer-menu-list a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  /* Contact Text Styles */
  .footer-contact-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.6;
  }
  .footer-contact-info p {
    margin: 0 0 15px 0;
  }
  .footer-contact-info p:last-child {
    margin: 0;
  }

  /* --- 3. FOOTER BOTTOM --- */
  .footer-bottom {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .footer-bottom-links {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
  }

  .footer-bottom-links a,
  .copyright {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
  }

  .footer-bottom-links a:hover {
    color: #ffffff;
  }

  .footer-disclaimer p {
    margin: 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
  }


  /* =========================================
     4. RESPONSIF (Tablet & Mobile)
     ========================================= */
  @media screen and (max-width: 1024px) {
    .footer-container { padding: 0 40px; }
    .footer-main-wrapper { gap: 40px; flex-direction: column; }
    .footer-left { flex: unset; width: 100%; }
    .footer-right { flex: unset; width: 100%; grid-template-columns: repeat(3, 1fr); }
  }

  @media screen and (max-width: 768px) {
    .footer-container { padding: 0 20px; }
    
    /* Trust Badges bertumpuk ke bawah dengan border rapi */
    .trust-badges-wrapper { flex-direction: column; }
    .footer-feature { 
      width: 100%; 
      padding: 0 0 20px 0; 
      margin-bottom: 20px; 
      border-left: none; 
      border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
    }
    .footer-feature:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    
    .footer-heading { font-size: 28px; }
    
    /* Menu Links menumpuk vertikal di Mobile */
    .footer-right { grid-template-columns: 1fr; gap: 40px; }
    
    /* Footer Bottom penyesuaian */
    .footer-bottom-links { flex-wrap: wrap; gap: 15px; }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:14) */
/* --- GLOBAL FONT INJECTION (INTER) --- */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root {
    --font-body-family: 'Inter', sans-serif;
    --font-heading-family: 'Inter', sans-serif;
  }

  body, html, h1, h2, h3, h4, h5, h6, p, a, span, input, button, select, textarea {
    font-family: var(--font-body-family);
  }

  /* --- 1. WRAPPER UTAMA (FIXED GLOBAL) --- */
  .site-header-wrapper {
    width: 100vw; 
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 999; 
  }

  .header-placeholder {
    height: 106px; 
    width: 100%;
    display: block;
  }

  .site-header-wrapper.is-scrolled:not(.is-transparent-header) .header-main {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  /* --- HEADER TRANSPARAN (Khusus Homepage) --- */
  .site-header-wrapper.is-transparent-header .header-main {
    background-color: transparent; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); 
    transition: background-color 0.3s ease, border-bottom 0.3s ease; 
  }

  /* --- EFEK SCROLL --- */
  .site-header-wrapper.is-scrolled .header-main {
    background-color: rgba(255, 255, 255, 0.95); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); 
  }
  .site-header-wrapper.is-transparent-header.is-scrolled .header-main {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  /* --- 2. ANNOUNCEMENT BAR --- */
  .header-announcement {
    background-color: #0A4A92;
    padding: 15px 0;
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  }

  .header-announcement.is-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }

  .header-announcement .header-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
  }

  /* Ticker Wrapper Desktop */
  .ticker-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .header-announcement span { 
    flex: 1;
    font-family: var(--font-heading-family), sans-serif; 
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: white;
  }
  
  .announce-left { text-align: left; }
  .announce-center { text-align: center; }
  .announce-right { text-align: right; }

  /* --- 3. MAIN HEADER --- */
  .header-main {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background-color 0.3s ease;
  }

  .header-main .header-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
  }
  
  .header__title {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin: 0;
  }
  
  .header__logo {
    max-height: 45px; 
    width: auto;
    display: block;
  }

  /* --- DESKTOP MENU & DROPDOWN --- */
  .header__menu {
    flex: 2;
    display: flex;
    justify-content: center;
  }

  .main-menu-list {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .menu-item {
    position: relative;
    padding: 22px 0;
  }

  .menu-link {
    font-family: var(--font-body-family), sans-serif;
    font-weight: 550;
    font-style: normal;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-foreground, #000);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .icon-chevron {
    width: 10px;
    height: 6px;
    transition: transform 0.3s ease;
  }

  .menu-item:hover .icon-chevron {
    transform: rotate(180deg);
  }

  .header__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff;
    min-width: 220px;
    padding: 15px 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
  }

  .menu-item:hover .header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .submenu-link {
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    font-family: var(--font-body-family), sans-serif;
    color: #4a4a4a;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    transition: background 0.2s, color 0.2s;
  }

  .submenu-link:hover {
    background: #f8f9fa;
    color: #0A4A92;
  }

  .header__icons {
    flex: 1;
    display: flex;
    gap: 1.5rem;
    justify-content: flex-end;
    align-items: center;
  }

  /* --- SEARCH ICON & DROPDOWN --- */
  .header-search {
    position: relative;
  }

  .search-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-foreground, #000);
    transition: opacity 0.2s ease;
  }

  .search-toggle::-webkit-details-marker {
    display: none;
  }

  .search-toggle:hover {
    opacity: 0.7;
  }

  .icon-search {
    width: 22px;
    height: 22px;
  }

  .search-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    background: #ffffff;
    min-width: 280px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 1000;
  }

  .search-form {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
  }

  .search-input {
    border: none;
    background: transparent;
    padding: 12px 15px;
    width: 100%;
    outline: none;
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    color: #333;
  }

  .search-submit {
    background: transparent;
    border: none;
    padding: 12px 15px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-submit:hover {
    color: #0A4A92;
  }

  .header__cta {
    background-color: #D24B3D;
    color: white !important;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: var(--font-body-family), sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    display: inline-flex;
    transition: background-color 0.3s ease;
    text-decoration: none;
  }
  
  .header__cta:hover {
    background-color: #082d5e;
  }

  .mobile-menu-drawer { display: none; }

  /* =========================================
     4. RESPONSIF MOBILE (< 989px)
     ========================================= */
  @media screen and (max-width: 989px) {
    .header-placeholder {
      height: 112px; 
    }

    /* MATIKAN TRANSPARAN DI MOBILE */
    .site-header-wrapper.is-transparent-header .header-main {
      background-color: #ffffff !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* SLIDER VERTICAL MOBILE */
    .header-announcement .header-container {
      padding: 0 20px;
      height: 16px;
      overflow: hidden;
    }

    .ticker-wrapper {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      animation: tickerSlide 9s ease infinite;
    }

    .header-announcement span {
      flex: 0 0 16px;
      height: 16px;
      line-height: 16px;
      width: 100%;
      text-align: center;
      display: block;
    }

    @keyframes tickerSlide {
      0%, 25% { transform: translateY(0); }
      33%, 58% { transform: translateY(-16px); }
      66%, 91% { transform: translateY(-32px); }
      100% { transform: translateY(0); }
    }

    /* MENU MAIN MOBILE */
    .header-main .header-container {
      padding: 0 20px; 
      height: auto;
      min-height: 70px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .header__menu, .header__cta {
      display: none;
    }

    .mobile-menu-drawer {
      display: block;
    }

    .header__icons {
      flex: 1; /* Diubah agar icon search dan hamburger tetap rata kanan */
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 15px;
    }

    .mobile-menu-toggle {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    
    .mobile-menu-toggle::-webkit-details-marker {
      display: none;
    }

    .icon-hamburger, .icon-close {
      width: 28px;
      height: 28px;
    }

    details[open] .icon-hamburger { display: none; }
    details[open] .icon-close { display: block !important; }

    .mobile-menu-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100vw;
      background-color: #ffffff;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.08);
      z-index: 999;
      border-radius: 0 0 24px 24px;
    }

    .mobile-menu-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px; 
      font-weight: 700;
      text-transform: uppercase;
      color: #142B47; 
      text-decoration: none;
      padding: 12px 0;
      cursor: pointer;
      letter-spacing: 0.5px;
    }

    .mobile-submenu-details[open] .icon-chevron {
      transform: rotate(180deg);
    }

    .mobile-submenu-details summary {
      list-style: none;
    }
    
    .mobile-submenu-details summary::-webkit-details-marker {
      display: none;
    }

    .mobile-submenu-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-left: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .mobile-submenu-content a {
      text-decoration: none;
      color: #666666;
      font-size: 15px;
      font-weight: 500;
    }

    .mobile-menu-cta-wrapper {
      margin-top: 15px;
    }

    .mobile-header__cta {
      display: block;
      width: 100%;
      background-color: #D24B3D;
      color: white !important;
      padding: 16px;
      border-radius: 12px;
      text-align: center;
      font-family: var(--font-body-family), sans-serif;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }

    .header__title {
      flex: 1;
      justify-content: flex-start;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hello-world (INDEX:15) */
.welcome {
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #f6f6f7;
    padding: 72px 0;
  }

  .welcome-content {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 24px;
  }

  .welcome-description {
    max-width: 80ch;
    line-height: 1.4;
    margin-top: 1.5rem;
  }

  .icon {
    width: 300px;
  }

  .highlights {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  @media (max-width: 1100px) {
    .highlights {
      grid-template-columns: 1fr;
    }
  }

  .highlight {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #eef3ff;
    color: rgb(92, 95, 98);
    line-height: 1.4;
  }

  .highlight > * + * {
    margin-top: 1rem;
  }

  .highlight h3 {
    font-size: 1rem;
    color: rgb(32, 34, 35);
  }

  .highlight-description {
    flex: 1 1;
  }

  .highlight a {
    display: flex;
    width: fit-content;
    background-color: rgb(250, 251, 251);
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset;
    border: 1px solid rgb(140, 145, 150);
    border-radius: 4px;
    color: rgb(92, 95, 98);
    padding: 3px 10px 5px;
    text-decoration: none;
  }
/* END_SECTION:hello-world */

/* START_SECTION:hero-banner (INDEX:16) */
.hero-custom {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-size: cover;
    background-position: top center; 
    background-repeat: no-repeat;
    min-height: 800px;
    display: flex;
    align-items: center;
    padding: 80px 0;
  }

  .hero-custom__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 60px 0;
  }

  .hero-custom__content {
    max-width: 500px; 
    width: 100%;
  }

  /* --- UPDATE TIPOGRAFI HEADING SESUAI FIGMA --- */
  .hero-custom__heading {
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0;
    color: #142B47; 
    margin-top: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center; 
  }

  .hero-custom__text {
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 40px;
    max-width: 90%;
  }

  .hero-custom__buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 50px;
  }

  .hero-btn {
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero-btn--primary {
    background-color: #0A4A92;
    color: #ffffff;
  }
  .hero-btn--primary:hover {
    background-color: #082d5e;
  }

  .hero-btn--secondary {
    background-color: #ffffff;
    color: #0A4A92;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
  }
  .hero-btn--secondary:hover {
    background-color: #f9f9f9;
  }

  .hero-custom__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .hero-feature {
    background-color: transparent; 
    border: 1px solid rgba(0, 0, 0, 0.06); 
    border-radius: 12px;
    padding: 24px 20px;
  }

  .hero-feature__icon {
    margin-bottom: 16px;
  }

  .hero-feature__icon img {
    width: 28px;
    height: auto;
    object-fit: contain;
  }

  .hero-feature__title {
    font-size: 13px;
    font-weight: 700;
    color: #142B47;
    margin: 0 0 8px 0;
    font-family: var(--font-body-family), sans-serif;
  }

  .hero-feature__text {
    font-size: 12px;
    color: #777777;
    line-height: 1.4;
    margin: 0;
  }

  /* =========================================
     RESPONSIF MOBILE (< 989px)
     ========================================= */
  @media screen and (max-width: 989px) {
    .hero-custom {
      /* Padding top ditambah jadi 130px untuk kompensasi tinggi fixed header di mobile */
      padding: 130px 0 60px 0;
      background-position: left center; 
    }
    .hero-custom__container {
      padding: 0 20px;
    }
    .hero-custom__heading {
      font-size: 42px; 
      margin-bottom: 16px;
    }
    .hero-custom__text {
      font-size: 15px;
      margin-bottom: 32px;
      max-width: 100%;
    }
    .hero-custom__buttons {
      flex-direction: column;
      gap: 12px;
      margin-bottom: 40px;
    }
    .hero-btn {
      width: 100%;
      padding: 16px 24px;
    }
    .hero-custom__features {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .hero-feature {
      background-color: rgba(244, 243, 240, 0.9);
      border: none;
      padding: 20px;
    }
    .hero-feature__icon {
      margin-bottom: 12px;
    }
    .hero-feature__icon img {
      width: 24px;
    }
    .hero-feature__title {
      font-size: 14px;
    }
  }
/* END_SECTION:hero-banner */

/* START_SECTION:image-metrics (INDEX:17) */
.image-metrics {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fcfbfa;
    padding: 100px 0;
    display: flex;
    align-items: center;
    overflow: hidden; 
  }

  /* --- Sisi Kiri Desktop --- */
  .image-metrics__image-col {
    flex: 0 0 35%; 
    max-width: 400px; 
    height: 100%; 
    display: flex;
    align-items: center;
  }

  .image-metrics__img {
    width: 100%;
    height: auto;
    border-radius: 0 24px 24px 0; 
    object-fit: cover;
    box-shadow: 10px 10px 40px rgba(0,0,0,0.06); 
    display: block;
  }

  /* --- Container Konten Desktop --- */
  .image-metrics__container {
    flex: 1; 
    width: 100%;
    margin: 0; 
    padding-left: 80px; 
    padding-right: max(60px, calc(50vw - 720px + 60px)); 
    box-sizing: border-box;
  }

  .image-metrics__content-col {
    width: 100%;
  }

  .image-metrics__subtitle {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    color: #0A4A92;
    margin: 0 0 16px 0;
  }

  .image-metrics__title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.1; 
    letter-spacing: 0;
    color: #142B47;
    margin: 0 0 24px 0;
  }

  .image-metrics__text {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8; 
    color: #4a4a4a;
    margin: 0 0 48px 0;
    max-width: 90%; 
  }

  .image-metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    max-width: 600px; 
  }
  
  @media screen and (min-width: 1200px) {
    .image-metrics__grid {
      grid-template-columns: repeat(4, 1fr);
      max-width: 100%;
    }
  }

  .metric-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* MENGUBAH ALIGNMENT KE RATA ATAS */
  }

  .metric-card__value {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 30px; 
    line-height: 100%;
    letter-spacing: -0.03em;
    color: #0A4A92;
    margin: 0 0 12px 0;
  }

  .metric-card__label {
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #333333;
    margin: 0;
  }

  /* =========================================
     RESPONSIF TABLET & MOBILE
     ========================================= */
  @media screen and (max-width: 1024px) {
    .image-metrics {
      flex-direction: column; 
      padding: 60px 0 0 0; /* Hilangkan padding bawah agar gambar bisa mepet jika perlu */
    }
    
    .image-metrics__container {
      order: 1; /* Teks di atas */
      flex: none;
      width: 100%;
      padding: 0 40px; 
    }

    .image-metrics__image-col {
      order: 2; /* Gambar di bawah */
      flex: none; /* FIX: Matikan sifat flex yang menyebabkan tinggi runtuh */
      display: block; /* FIX: Paksa menjadi blok agar tinggi mengikuti gambar */
      width: 100%;
      max-width: 100%;
      height: auto; 
      margin-top: 40px; 
    }
    
    .image-metrics__img {
      border-radius: 24px;
      width: 90%; 
      margin: 0 auto 40px auto; /* Tambahkan margin bawah untuk spasi */
      box-shadow: 0 10px 40px rgba(0,0,0,0.06);
      display: block;
    }
    
    .image-metrics__text {
      font-size: 18px;
      max-width: 100%;
    }
    
    .image-metrics__grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 100%;
    }
  }
  
  @media screen and (max-width: 768px) {
    .image-metrics__container { 
      padding: 0 20px; 
    }
    .image-metrics__title { 
      font-size: 36px; 
    }
    .image-metrics__text {
      font-size: 16px;
      margin-bottom: 32px;
    }
    .image-metrics__image-col {
      padding: 0 20px; 
      margin-top: 32px;
    }
    .image-metrics__img { 
      width: 100%; 
      border-radius: 20px; 
      margin-bottom: 40px;
    }
    .image-metrics__grid {
      gap: 12px; 
    }
    .metric-card {
      padding: 20px 16px;
    }
    .metric-card__value { 
      font-size: 32px; 
    }
  }
/* END_SECTION:image-metrics */

/* START_SECTION:main-page (INDEX:18) */
/* Wrapper Full Width agar sejajar dengan Footer */
  .page-container {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0; /* Padding atas-bawah saja, kiri-kanan dikontrol container */
  }

  .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px; /* Padding kiri-kanan persis 60px seperti header/footer */
    box-sizing: border-box;
  }

  .page-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    font-size: 48px;
    color: #0b3c7c;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .page-content {
    /* Style tipografi sesuai permintaanmu */
    font-family: var(--font-body-family), sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
    vertical-align: middle;
    color: #4a4a4a;
    max-width: 100%; /* Biarkan teks mengisi ruang container tapi tetap nyaman */
  }

  .page-content p, .page-content div {
    margin-bottom: 1.5rem;
  }

  /* --- Responsif Mobile --- */
  @media screen and (max-width: 989px) {
    .page-inner {
      padding: 0 20px; /* Padding mobile disamakan dengan header/footer */
    }
    .page-title {
      font-size: 36px;
    }
    .page-content {
      font-size: 18px; 
      line-height: 1.6;
    }
  }
/* END_SECTION:main-page */

/* START_SECTION:password (INDEX:20) */
/* Wrapper Full Width agar sejajar dengan Footer */
  .page-container {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0; /* Padding atas-bawah saja, kiri-kanan dikontrol container */
    min-height: 80vh; /* Agar posisinya pas di tengah layar */
    display: flex;
    align-items: center;
  }

  .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px; /* Padding kiri-kanan persis 60px seperti header/footer */
    box-sizing: border-box;
  }

  .page-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    font-size: 48px;
    color: #0b3c7c;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .page-content {
    font-family: var(--font-body-family), sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
    vertical-align: middle;
    color: #4a4a4a;
    max-width: 600px; /* Dibatasi agar teks dan form tidak terlalu melebar */
  }

  .page-content p, .page-content div {
    margin-bottom: 1.5rem;
  }

  /* --- Styling Khusus Form Password --- */
  .password-form-wrapper {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
  }

  .input-group {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 450px;
  }

  .input-group input[type="password"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #cccccc;
    font-family: inherit;
    font-size: 16px;
    color: #4a4a4a;
    outline: none;
    border-radius: 4px; /* Sedikit lengkungan agar modern */
    transition: border-color 0.3s ease;
  }

  .input-group input[type="password"]:focus {
    border-color: #0b3c7c;
  }

  .btn-submit {
    background-color: #0b3c7c;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    font-family: 'Aeonik', sans-serif;
  }

  .btn-submit:hover {
    background-color: #082b59;
  }

  .form-errors {
    color: #d9534f;
    margin-bottom: 15px;
    font-size: 14px;
  }

  /* Sembunyikan label tapi tetap bisa dibaca oleh screen reader */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* --- Responsif Mobile --- */
  @media screen and (max-width: 989px) {
    .page-inner {
      padding: 0 20px; /* Padding mobile disamakan dengan header/footer */
    }
    .page-title {
      font-size: 36px;
    }
    .page-content {
      font-size: 18px; 
      line-height: 1.6;
    }
    .input-group {
      flex-direction: column; /* Input dan tombol jadi atas-bawah di HP */
    }
    .btn-submit {
      width: 100%;
    }
  }
/* END_SECTION:password */

/* START_SECTION:product (INDEX:21) */
/* --- WRAPPER UTAMA --- */
  .page-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 60px 0; 
  }

  .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px; 
    box-sizing: border-box;
  }

  /* --- GRID LAYOUT PRODUK --- */
  .product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px;
    align-items: start;
  }

  /* --- BAGIAN GALERI GAMBAR --- */
  .product-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
    position: sticky;
    top: 120px; 
    align-self: start;
    z-index: 10;
  }
  
  .main-image-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background-color: #f9f9f9;
  }

  .main-product-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  /* --- SLIDER THUMBNAIL --- */
  .thumbnail-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .thumb-arrow {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #0b3c7c;
    padding: 0 5px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .thumb-arrow:hover {
    color: #082d5e;
  }

  .thumbnail-list {
    display: flex;
    flex-wrap: nowrap; 
    gap: 12px;
    overflow-x: auto; 
    scroll-behavior: smooth;
    flex: 1; 
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    padding-bottom: 5px; 
  }

  .thumbnail-list::-webkit-scrollbar {
    display: none; 
  }

  .thumbnail-item {
    flex: 0 0 80px; 
    height: 80px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
  }

  .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .thumbnail-item:hover, 
  .thumbnail-item.active-thumb {
    opacity: 1;
    border-color: #0b3c7c;
  }

  /* --- BAGIAN INFO & TEKS --- */
  .product-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  /* --- SKU STYLING --- */
  .product-sku {
    font-family: var(--font-body-family), sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
  }

  .product-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    font-size: 42px;
    color: #0b3c7c;
    margin: 0 0 15px 0;
    line-height: 1.1;
  }

  /* --- HARGA WRAPPER --- */
  .product-price-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .product-price {
    font-family: var(--font-body-family), sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #333333;
    margin: 0;
  }

  .product-price-compare {
    font-family: var(--font-body-family), sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: line-through;
  }

  .product-description {
    font-family: var(--font-body-family), sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #4a4a4a;
  }

  .product-description p {
    margin-bottom: 1.5rem;
  }

  /* --- BAGIAN FORM --- */
  .product-form-wrapper .field {
    margin-bottom: 24px;
  }

  .product-form-wrapper label {
    display: block;
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    color: #0b3c7c;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .product-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
  }

  /* --- QUANTITY CONTAINER --- */
  .quantity-wrapper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    height: 50px;
    width: 150px;
    overflow: hidden;
  }

  .qty-btn {
    background: #fcfcfc;
    border: none;
    color: #0b3c7c;
    font-size: 22px;
    width: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
  }

  .qty-btn:hover {
    background: #f0f0f0;
  }

  .qty-input {
    width: 60px;
    border: none;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-radius: 0;
    text-align: center;
    padding: 0;
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
    color: #333;
    -moz-appearance: textfield;
  }

  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* --- TOMBOL BELI --- */
  .product-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
  }

  .btn-add-to-cart {
    background-color: #0b3c7c;
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body-family), sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    transition: background-color 0.3s ease;
  }

  .btn-add-to-cart:hover {
    background-color: #082d5e;
  }

  .shopify-payment-button__button {
    border-radius: 6px !important;
  }

  /* --- RESPONSIF MOBILE --- */
  @media screen and (max-width: 989px) {
    .page-inner {
      padding: 0 20px; 
    }
    .product-layout {
      grid-template-columns: 1fr; 
      gap: 40px;
    }
    .product-gallery {
      position: static;
    }
    .product-sku {
      font-size: 11px;
    }
    .product-title {
      font-size: 32px;
    }
    .product-price {
      font-size: 24px;
    }
    .product-price-compare {
      font-size: 18px;
    }
    .thumbnail-item {
      flex: 0 0 60px;
      height: 60px;
    }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:22) */
/* =========================================================
     1. GLOBAL & WRAPPER (Sama Persis dengan Collection)
     ========================================================= */
  .collection-page {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fcfbfa; /* Latar belakang off-white */
    padding: 60px 0 100px 0;
  }

  .collection-page .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  /* =========================================================
     2. HEADER & SEARCH FORM
     ========================================================= */
  .collection-header {
    text-align: center;
    margin-bottom: 50px;
  }

  .collection-page .page-title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    font-size: 56px;
    color: #142B47;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 100%;
  }

  .collection-description {
    font-family: var(--font-body-family), sans-serif;
    font-size: 18px;
    color: #4a4a4a;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Styling Khusus Input Search */
  .search-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 30px;
  }

  .page-search-form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .page-search-form:focus-within {
    box-shadow: 0 5px 20px rgba(10, 74, 146, 0.08);
    border-color: rgba(10, 74, 146, 0.2);
  }

  .page-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 16px 20px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 15px;
    color: #142B47;
    outline: none;
  }

  .page-search-submit {
    background: transparent;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    color: #142B47;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* =========================================================
     3. GRID & CARD PRODUK
     ========================================================= */
  .product-grid {
    display: grid;
    /* Grid dinamis: minimal 260px, maksimal memenuhi ruang */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 60px; /* Jarak antar produk diperlebar menjadi 60px */
  }

  .product-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
  }

  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  .product-card__image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Gambar dibuat kotak sempurna (1:1) */
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .product-card:hover .product-card__image {
    transform: scale(1.05); /* Efek zoom tipis saat dihover */
  }

  .placeholder-svg {
    width: 100%;
    height: 100%;
    fill: #cccccc;
    background-color: #e9e9e9;
  }

  .product-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-bottom: 0; /* Dibuat 0 karena ada form button dibawahnya */
  }

  .product-card__sku {
    font-family: var(--font-body-family), sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 6px 0;
  }

  .product-card__title {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 400; 
    font-size: 18px;
    color: #0A4A92;
    margin: 0 0 8px 0;
    line-height: 1.3;
  }

  .product-card__price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
  }

  .product-card__price {
    font-family: var(--font-body-family), sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #333333;
    margin: 0;
  }

  .product-card__price-compare {
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: line-through;
  }

  /* Form & Button Add to Cart */
  .product-card__form-wrapper {
    padding: 0 24px 24px 24px;
    margin-top: auto;
  }
  
  .product-card__form-wrapper form {
    margin: 0;
  }

  .product-card__btn {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background-color: #0A4A92; 
    text-transform: uppercase;
    padding: 14px 24px;
    border-radius: 10px;
    text-align: center;
    display: block;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    width: 100%;
    border: none;
    cursor: pointer;
  }

  .product-card:hover .product-card__btn:not(.disabled) {
    background-color: #0b5fbe; 
    color: #FFFFFF;
  }

  .product-card__btn.disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
  }

  /* =========================================================
     4. PAGINATION
     ========================================================= */
  .pagination-wrapper {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    font-family: var(--font-body-family), sans-serif;
  }

  .pagination-wrapper .page,
  .pagination-wrapper .next,
  .pagination-wrapper .prev {
    display: inline-block;
    margin: 0 5px;
  }

  .pagination-wrapper a,
  .pagination-wrapper span {
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 6px;
    color: #0A4A92;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .pagination-wrapper a:hover {
    background: #0A4A92;
    color: #ffffff;
    border-color: #0A4A92;
  }

  .pagination-wrapper .current {
    background: #0A4A92;
    color: #ffffff;
    border-color: #0A4A92;
  }

  /* =========================================================
     5. RESPONSIF TABLET
     ========================================================= */
  @media screen and (max-width: 989px) {
    .collection-page { 
      padding-top: 120px; 
    }
    .collection-page .page-inner { padding: 0 40px; }
    .collection-page .page-title { font-size: 42px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px; } 
  }

  /* =========================================================
     6. RESPONSIF MOBILE (Pasti 2 Kolom)
     ========================================================= */
  @media screen and (max-width: 768px) {
    .collection-page { 
      padding: 60px 0 60px 0; 
    }
    .collection-page .page-inner { padding: 0 20px; }
    
    .collection-header {
      margin-bottom: 32px;
    }
    .collection-page .page-title { 
      font-size: 32px; 
      margin-bottom: 12px; 
    }
    .collection-description { 
      font-size: 15px; 
    }
    
    .product-grid {
      /* DI MOBILE, WAJIB 2 KOLOM */
      grid-template-columns: repeat(2, 1fr);
      gap: 24px; 
    }
    
    .product-card {
      border-radius: 12px; 
    }
    
    .product-card__content { 
      padding: 12px; 
      padding-bottom: 0;
    }

    .product-card__sku {
      font-size: 10px;
      margin-bottom: 4px;
    }
    
    .product-card__title { 
      font-size: 14px; 
      margin-bottom: 6px;
    }

    .product-card__price-wrapper {
      margin-bottom: 12px;
    }
    
    .product-card__price { 
      font-size: 15px; 
    }

    .product-card__price-compare {
      font-size: 12px;
    }
    
    .product-card__form-wrapper {
      padding: 0 12px 12px 12px;
    }

    .product-card__btn { 
      font-size: 11px;
      padding: 10px 12px; 
    }
  }
/* END_SECTION:search */

/* START_SECTION:shop-by-wellness (INDEX:23) */
.wellness-needs {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 60px 0 100px 0;
  }

  .wellness-needs__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
  }

  .wellness-needs__header {
    margin-bottom: 40px;
  }

  .wellness-needs__subtitle {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    color: #0A4A92;
    margin: 0 0 16px 0;
  }

  /* --- UPDATE TIPOGRAFI SESUAI FIGMA --- */
  .wellness-needs__title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #142B47;
    margin: 0;
  }

  .wellness-needs__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }

  .wellness-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .wellness-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  }

  .wellness-card__image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wellness-card__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  
  .wellness-card__placeholder {
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    border-radius: 8px;
  }

  .wellness-card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .wellness-card__title {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #142B47;
    margin: 0 0 12px 0;
  }

  .wellness-card__desc {
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
    margin: 0 0 20px 0;
    flex-grow: 1;
  }

  .wellness-card__link {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    color: #0A4A92;
    text-transform: uppercase;
  }

  /* --- STYLING UNTUK TOMBOL BARU --- */
  .wellness-needs__footer {
    margin-top: 40px;
    display: flex;
    justify-content: flex-start; /* Memastikan posisi di kiri */
  }

  .wellness-needs__btn {
    display: inline-block;
    background-color: #114c92; /* Warna biru sesuai gambar */
    color: #ffffff;
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 14px 24px;
    border-radius: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .wellness-needs__btn:hover {
    background-color: #0a3a72;
    transform: translateY(-2px);
  }

  @media screen and (max-width: 1200px) {
    .wellness-needs__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media screen and (max-width: 768px) {
    .wellness-needs__container {
      padding: 0 20px;
    }
    .wellness-needs__title {
      font-size: 42px;
    }
    .wellness-needs__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .wellness-needs__footer {
      margin-top: 32px;
      justify-content: center; /* Tombol ke tengah di layar kecil untuk UX lebih baik (opsional, bisa diubah ke flex-start jika tetap ingin di kiri) */
    }
  }
  
  @media screen and (max-width: 480px) {
    .wellness-needs__grid {
      grid-template-columns: 1fr;
    }
    .wellness-needs__btn {
      width: 100%;
      text-align: center;
    }
  }
/* END_SECTION:shop-by-wellness */

/* START_SECTION:tablet-comparison (INDEX:24) */
.tablet-comparison {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #faf9f7; /* Background sesuai request */
    padding: 100px 0;
  }

  .tablet-comparison .page-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
  }

  .comparison-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  /* --- SISI KIRI (30%) --- */
  .comparison-left {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* --- GARIS PEMISAH VERTIKAL --- */
  .comparison-divider {
    width: 1px;
    background-color: #A4B8CD; /* Warna garis biru pudar */
    margin: 0 40px;
    flex-shrink: 0;
  }

  /* --- SISI KANAN (70%) --- */
  .comparison-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .comparison-header {
    font-family: 'Aeonik', sans-serif;
    color: #0A4A92;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 40px 0;
  }

  .comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
  }

  .comparison-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* --- LINGKARAN GAMBAR --- */
  .image-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    padding: 30px;
    box-sizing: border-box;
  }

  .image-circle img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  .image-circle--light {
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* Lingkaran kiri putih bersih */
  }

  .image-circle--dark {
    background-color: #F0EDE6; /* Lingkaran kanan krem abu-abu */
  }

  /* --- TEKS --- */
  .comparison-subtitle {
    font-family: var(--font-heading-family), sans-serif;
    color: #0A4A92;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px 0;
  }

  .comparison-desc {
    font-family: var(--font-body-family), sans-serif;
    color: #666666;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 260px; /* Jaga agar baris teks tidak terlalu panjang */
  }

  /* --- RESPONSIF TABLET & MOBILE --- */
  @media screen and (max-width: 1024px) {
    .tablet-comparison .page-inner {
      padding: 0 40px;
    }
    .comparison-wrapper {
      flex-direction: column;
    }
    .comparison-left {
      flex: unset;
      width: 100%;
    }
    .comparison-divider {
      width: 100%;
      height: 1px;
      margin: 50px 0;
    }
    .comparison-right {
      flex: unset;
      width: 100%;
    }
  }

  @media screen and (max-width: 768px) {
    .tablet-comparison { padding: 60px 0; }
    .tablet-comparison .page-inner { padding: 0 20px; }
    .comparison-grid {
      grid-template-columns: 1fr; /* Tumpuk vertikal di HP */
      gap: 50px;
    }
    .image-circle {
      width: 180px;
      height: 180px;
    }
    .comparison-header { font-size: 20px; }
  }
/* END_SECTION:tablet-comparison */

/* START_SECTION:template-best-sellers (INDEX:25) */
.new-products-list { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow-x: hidden; }
  .bs-header { padding: 80px 20px; text-align: center; }
  .bs-header__container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .bs-header__subtitle { font-family: var(--font-heading-family), sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #D34135; margin: 0 0 16px 0; }
  .bs-header__title { font-family: 'Aeonik', var(--font-heading-family), sans-serif; font-weight: 400; font-size: 56px; line-height: 1.2; color: #113D75; margin: 0 0 32px 0; }
  .bs-header__btn { display: inline-block; background-color: #113D75; color: #ffffff; font-family: var(--font-heading-family), sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 1px; text-decoration: none;  padding: 12px 24px; border-radius: 10px; transition: background-color 0.3s ease; }
  .bs-header__btn:hover { background-color: #142B47; }

  .bs-content { display: flex; flex-direction: column; width: 100%; padding: 0px 0px 60px 0px;}
  .bs-product-band { width: 100%; padding: 60px 20px; }
  .bs-product-band:nth-child(odd) { background-color: #FAF9F7; }
  .bs-product-band:nth-child(even) { background-color: #FFFEFB; }

  .bs-content__container { max-width: 1000px; margin: 0 auto; width: 100%; }
  .bs-row { display: flex; flex-direction: row; align-items: center; gap: 60px; }
  
  .bs-row__image-col { width: 45%; }
  .bs-row__image-card { display: block; background: #ffffff; border-radius: 24px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
  .bs-row__image-card:hover { transform: translateY(-5px); }
  .bs-row__image-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .bs-placeholder { width: 100%; height: 100%; background-color: #f4f4f4; }

  .bs-row__text-col { width: 55%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  
  /* Styling SKU */
  .bs-row__sku { font-family: var(--font-body-family), sans-serif; font-size: 12px; font-weight: 600; color: #9ca3af; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 12px 0; }

  .bs-row__title { font-family: 'Aeonik', var(--font-heading-family), sans-serif; font-weight: 500; font-size: 32px; line-height: 1.2; color: #142B47; margin: 0 0 12px 0; }
  
  /* Styling Harga */
  .bs-row__price { font-family: var(--font-body-family), sans-serif; font-size: 22px; font-weight: 600; color: #113D75; margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;}
  .bs-row__price-compare { font-size: 16px; font-weight: 400; color: #9ca3af; text-decoration: line-through; }

  .bs-row__desc { font-family: var(--font-body-family), sans-serif; font-size: 14px; line-height: 1.6; color: #666666; margin: 0 0 30px 0; }
  .bs-row__form { margin: 0; }
  .bs-row__add-btn { background-color: #0A4A92; color: #ffffff; font-family: var(--font-heading-family), sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease; }
  .bs-row__add-btn:hover { background-color: #113D75; }
  .bs-row__add-btn:disabled { background-color: #cccccc; cursor: not-allowed; }

  /* --- RESPONSIF --- */
  @media screen and (max-width: 900px) { 
    .bs-row { gap: 40px; } 
    .bs-header__title { font-size: 36px; } 
    .bs-row__title { font-size: 28px; } 
    .bs-row__price { font-size: 20px; }
  }
  @media screen and (max-width: 768px) {
    .bs-header { padding: 60px 20px; }
    .bs-product-band { padding: 40px 20px; }
    .bs-row { flex-direction: column; gap: 30px; }
    .bs-row__image-col, .bs-row__text-col { width: 100%; }
    .bs-row__text-col { align-items: center; text-align: center; }
    .bs-row__desc p { text-align: center; }
    .bs-row__price { justify-content: center; }
  }
/* END_SECTION:template-best-sellers */

/* START_SECTION:template-new-products (INDEX:26) */
.new-products-list {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
  }

  /* --- HEADER STYLES --- */
  .bs-header { padding: 80px 20px; text-align: center; }
  .bs-header__container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .bs-header__subtitle { font-family: var(--font-heading-family), sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #D34135; margin: 0 0 16px 0; }
  .bs-header__title { font-family: 'Aeonik', var(--font-heading-family), sans-serif; font-weight: 400; font-size: 56px; line-height: 1.2; color: #113D75; margin: 0 0 32px 0; }
  .bs-header__btn { display: inline-block; background-color: #113D75; color: #ffffff; font-family: var(--font-heading-family), sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 1px; text-decoration: none;  padding: 12px 24px; border-radius: 10px; transition: background-color 0.3s ease; }
  .bs-header__btn:hover { background-color: #142B47; }

  /* --- BACKGROUND SELANG-SELING --- */
  .bs-content { display: flex; flex-direction: column; width: 100%;  }
  
  .np-product-band {
    width: 100%;
    padding: 60px 20px;
  }
  
  /* Ganjil abu-abu, genap putih (atau sebaliknya, sesuai desain) */
  .np-product-band:nth-child(odd) {
    background-color: #EFF6FF; /* Default: #FAFAFA */
  }
  .np-product-band:nth-child(even) {
    background-color: #F8FBFF;
  }

  .bs-content__container { max-width: 1000px; margin: 0 auto; width: 100%; }
  .bs-row { display: flex; flex-direction: row; align-items: center; gap: 60px; }
  
  /* --- KIRI: GAMBAR --- */
  .bs-row__image-col { width: 45%; }
  .bs-row__image-card { display: block; background: #ffffff; border-radius: 24px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
  .bs-row__image-card:hover { transform: translateY(-5px); }
  .bs-row__image-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .bs-placeholder { width: 100%; height: 100%; background-color: #f4f4f4; }

  /* --- KANAN: TEKS --- */
  .bs-row__text-col { width: 55%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  
  /* Styling SKU */
  .bs-row__sku { font-family: var(--font-body-family), sans-serif; font-size: 12px; font-weight: 600; color: #9ca3af; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 12px 0; }

  .bs-row__title { font-family: 'Aeonik', var(--font-heading-family), sans-serif; font-weight: 500; font-size: 32px; line-height: 1.2; color: #142B47; margin: 0 0 12px 0; }
  
  /* Styling Harga */
  .bs-row__price { font-family: var(--font-body-family), sans-serif; font-size: 22px; font-weight: 600; color: #113D75; margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;}
  .bs-row__price-compare { font-size: 16px; font-weight: 400; color: #9ca3af; text-decoration: line-through; }

  .bs-row__desc { font-family: var(--font-body-family), sans-serif; font-size: 14px; line-height: 1.6; color: #666666; margin: 0 0 30px 0; }
  .bs-row__form { margin: 0; }
  .bs-row__add-btn { background-color: #0A4A92; color: #ffffff; font-family: var(--font-heading-family), sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease; }
  .bs-row__add-btn:hover { background-color: #113D75; }
  .bs-row__add-btn:disabled { background-color: #cccccc; cursor: not-allowed; }

  /* --- RESPONSIF --- */
  @media screen and (max-width: 900px) { 
    .bs-row { gap: 40px; } 
    .bs-header__title { font-size: 36px; } 
    .bs-row__title { font-size: 28px; } 
    .bs-row__price { font-size: 20px; }
  }
  
  @media screen and (max-width: 768px) {
    .bs-header { padding: 60px 20px; }
    .np-product-band { padding: 40px 20px; }
    .bs-row { flex-direction: column; gap: 30px; }
    .bs-row__image-col, .bs-row__text-col { width: 100%; }
    .bs-row__text-col { align-items: center; text-align: center; }
    .bs-row__desc p { text-align: center; }
    .bs-row__price { justify-content: center; }
  }
/* END_SECTION:template-new-products */

/* START_SECTION:trusted-quality (INDEX:27) */
.trusted-quality {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-size: cover;
    background-position: right center; /* Gambar fokus di kanan, fade di kiri */
    background-repeat: no-repeat;
    background-color: #f6f7f9; /* Fallback color */
    padding: 30px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
  }

  .trusted-quality__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
  }

  /* Kontainer diperlebar jadi 100% agar list bisa sejajar maksimal */
  .trusted-quality__content {
    max-width: 100%;
    width: 100%;
  }

  .trusted-quality__subtitle {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0A4A92;
    margin: 0 0 16px 0;
  }

  .trusted-quality__title {
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #142B47;
    margin: 0 0 24px 0;
  }

  .trusted-quality__text {
    font-family: var(--font-body-family), sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 50px 0;
    max-width: 60%; /* Teks deskripsi dibatasi agar tidak terlalu memanjang */
  }

  /* --- List Items (Dibuat Grid Sejajar Kiri-Kanan) --- */
  .trusted-quality__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom sejajar */
    gap: 24px; /* Jarak antar kolom disesuaikan */
    width: 100%;
  }

  .trusted-list-item {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff; /* Background putih untuk efek card */
    border-radius: 16px; /* Sudut membulat seperti pada desain */
    padding: 32px 28px; /* Padding dalam agar teks tidak menempel tepi */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Bayangan sangat halus untuk dimensi */
    height: 100%;
  }

  .trusted-list-item__text-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Jarak antara title dan deskripsi */
  }

  .trusted-list-item__title {
    font-family: var(--font-heading-family), sans-serif;
    font-weight: 700;
    font-size: 16px; /* Ukuran font disesuaikan */
    color: #0A4A92;
    margin: 0;
  }

  .trusted-list-item__desc {
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px; /* Ukuran font disesuaikan */
    line-height: 1.5;
    color: #666666;
    margin: 0;
  }

  /* =========================================
     RESPONSIF MOBILE (< 989px)
     ========================================= */
  @media screen and (max-width: 989px) {
    .trusted-quality {
      padding: 60px 0;
      /* Mematikan background image di mobile agar area teks bersih/putih seperti desain */
      background-image: none !important; 
      background-color: #ffffff;
      min-height: auto;
    }
    .trusted-quality__container {
      padding: 0 20px;
    }
    .trusted-quality__title {
      font-size: 36px;
      margin-bottom: 20px;
    }
    .trusted-quality__text {
      font-size: 16px;
      max-width: 100%;
      margin-bottom: 40px;
    }
    
    /* List Item kembali jadi 1 kolom (atas-bawah) di mobile */
    .trusted-quality__list {
      grid-template-columns: 1fr;
      gap: 20px; 
    }

    .trusted-list-item {
      padding: 24px;
      /* Background untuk mobile ditambahkan sedikit aksen border agar tidak menyatu dengan background section putih */
      border: 1px solid #eaeaea; 
      box-shadow: none;
    }
    
    .trusted-list-item__title {
      font-size: 18px; /* Judul list lebih besar di mobile */
    }
    .trusted-list-item__desc {
      font-size: 15px; /* Deskripsi list lebih terbaca */
      color: #555555;
    }
  }
/* END_SECTION:trusted-quality */

/* START_SECTION:wholesale-contact (INDEX:28) */
.ws-contact-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0 100px 0; /* Jarak dengan section di atasnya */
  }

  .ws-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }

  /* CARD UTAMA (Membungkus Kiri dan Kanan) */
  .ws-card {
    display: flex;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Agar lengkungan card rapi */
  }

  /* --- KOLOM KIRI (PUTIH) --- */
  .ws-left-col {
    flex: 1;
    background-color: #ffffff;
    padding: 60px;
  }

  .ws-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Aspect Ratio 16:9 */
    height: 0;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
  }
  .ws-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .ws-left-heading {
    color: #4b5563; /* Abu-abu gelap / Charcoal seperti di gambar */
    font-family: 'Aeonik', var(--font-heading-family), sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 20px 0;
    line-height: 1.3;
  }

  .ws-left-list {
    margin: 0 0 30px 20px;
    padding: 0;
    color: #555555;
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    line-height: 1.6;
  }
  .ws-left-list li { margin-bottom: 8px; }
  .ws-left-list li strong { color: #0A4A92; } /* Biru untuk nomor telepon */

  .ws-left-text p {
    color: #666666;
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 20px 0;
  }
  .ws-left-text p:last-child { margin-bottom: 0; }


  /* --- KOLOM KANAN (ABU TERANG) --- */
  .ws-right-col {
    flex: 1;
    background-color: #f4f4f4; /* Abu-abu super terang persis gambar */
    padding: 60px;
  }

  .ws-form-heading {
    color: #333333;
    font-family: 'Aeonik', var(--font-heading-family), sans-serif;
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 30px 0;
  }

  .ws-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ws-field-group {
    display: flex;
    flex-direction: column;
  }

  .ws-label {
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #666666;
    margin-bottom: 6px;
  }
  .ws-label .required { color: #d93025; } /* Merah untuk tanda bintang */

  .ws-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: var(--font-body-family), sans-serif;
    font-size: 14px;
    background-color: #ffffff;
    color: #333333;
    transition: border-color 0.2s;
  }
  .ws-input:focus { outline: none; border-color: #0A4A92; }
  
  .ws-select { appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px auto; }

  /* Style Khusus Block Address */
  .ws-address-line { margin-bottom: 12px; }
  
  .ws-sublabel {
    display: block;
    font-family: var(--font-body-family), sans-serif;
    font-size: 11px;
    color: #888888;
    margin-top: 4px;
  }

  .ws-address-row {
    display: flex;
    gap: 4%;
    margin-bottom: 12px;
  }
  .ws-address-col { flex: 1; }

  /* Radio Buttons */
  .ws-radio-group { margin-bottom: 15px; }
  .ws-radio-question {
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #666666;
    margin: 0 0 8px 0;
  }
  .ws-radio-label {
    display: block;
    font-family: var(--font-body-family), sans-serif;
    font-size: 13px;
    color: #555555;
    margin-bottom: 6px;
    cursor: pointer;
  }
  .ws-radio-label input { margin-right: 8px; cursor: pointer; }

  .ws-captcha-info {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .ws-captcha-info p { margin: 0; font-size: 13px; font-weight: 700; color: #666; }
  .ws-captcha-info span { font-size: 11px; color: #888; }

  .ws-submit-btn {
    background-color: #0A4A92;
    color: #ffffff;
    font-family: 'Aeonik', var(--font-heading-family), sans-serif;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
  }
  .ws-submit-btn:hover { background-color: #142B47; }

  .ws-form-success { background: #d1fae5; color: #065f46; padding: 15px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; }
  .ws-form-error { background: #fee2e2; color: #991b1b; padding: 15px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; }


  /* --- RESPONSIF --- */
  @media screen and (max-width: 1024px) {
    .ws-card { flex-direction: column; }
    .ws-left-col { padding: 40px; }
    .ws-right-col { padding: 40px; }
  }

  @media screen and (max-width: 768px) {
    .ws-container { padding: 0 20px; }
    .ws-card { border-radius: 16px; }
    .ws-left-col { padding: 30px 20px; }
    .ws-right-col { padding: 30px 20px; }
    
    .ws-left-heading { font-size: 20px; }
    .ws-form-heading { font-size: 24px; }
    .ws-address-row { flex-direction: column; gap: 0; }
    .ws-address-col { margin-bottom: 12px; width: 100% !important; flex: none !important; }
  }
/* END_SECTION:wholesale-contact */

/* START_SECTION:wholesale-template (INDEX:29) */
.wholesale-info-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 30px 0 80px 0; 
  }

  .wholesale-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }

  /* KOTAK PUTIH UTAMA */
  .wholesale-main-card {
    background-color: #f6f9fc;
    border-radius: 20px;
    padding: 60px 80px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  }

  .wholesale-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
  }

  /* --- KOLOM KIRI (TEKS RATA KIRI) --- */
  .wholesale-left-col {
    flex: 1.2;
    text-align: left;
  }

  .wholesale-heading {
    color: #0A4A92;
    font-family: 'Aeonik', sans-serif;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0 0 20px 0;
    text-align: left;
  }

  .wholesale-desc {
    font-family: var(--font-body-family), sans-serif;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
    text-align: left;
    max-width: 95%;
  }

  .wholesale-desc p { margin: 0 0 16px 0; }
  .wholesale-desc p:last-child { margin-bottom: 0; }

  /* Feature Items Inline (Opsional) */
  .wholesale-features-row {
    display: flex;
    align-items: flex-start;
    gap: 0; 
  }

  .wholesale-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    padding: 0 15px;
  }

  .wholesale-feature-item:first-child {
    padding-left: 0;
  }

  .wholesale-feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: #0A4A92;
    opacity: 0.2;
  }

  .wholesale-feature-icon {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }

  .wholesale-feature-icon img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
  }

  .svg-icon-style {
    width: 28px;
    height: 28px;
    stroke: #0A4A92;
  }

  .wholesale-feature-title {
    color: #0A4A92;
    font-family: 'Aeonik', var(--font-heading-family), sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.2;
  }

  .wholesale-feature-subtitle {
    color: #666666;
    font-family: var(--font-body-family), sans-serif;
    font-size: 11px;
    margin: 0;
    line-height: 1.4;
  }

  /* --- KOLOM KANAN (1 GAMBAR SAJA - SQUARE) --- */
  .wholesale-right-col {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .wholesale-image-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1; 
    overflow: hidden; 
  }

  .wholesale-image-card img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 8px;
  }

  /* --- RESPONSIF --- */
  @media screen and (max-width: 1024px) {
    .wholesale-info-section { padding: 30px 0; } 
    .wholesale-main-card { padding: 40px; }
    .wholesale-wrapper { flex-direction: column; gap: 40px; }
    .wholesale-left-col, .wholesale-right-col { width: 100%; }
    .wholesale-image-card { max-width: 100%; }
  }

  @media screen and (max-width: 768px) {
    .wholesale-container { padding: 0 20px; }
    .wholesale-main-card { padding: 30px 20px; border-radius: 16px; }
    
    .wholesale-heading { font-size: 32px; margin-bottom: 16px; }
    .wholesale-desc { font-size: 14px; margin-bottom: 30px; }
    
    .wholesale-features-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px 0; 
    }
    
    .wholesale-feature-item { padding: 0 10px; }
    .wholesale-feature-item:first-child { padding-left: 10px; }
    .wholesale-feature-item::after { display: none; }
    
    .wholesale-feature-item:nth-child(odd)::after {
      display: block;
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 40px;
      background-color: #0A4A92;
      opacity: 0.2;
    }
  }
/* END_SECTION:wholesale-template */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:30) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:31) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:33) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */