/* Presentation only: existing navigation, forms and component behavior remain intact. */
:root {
  --retail-ink: #1d1d1f;
  --retail-muted: #6e6e73;
  --retail-paper: #f5f5f7;
  --retail-line: #d2d2d7;
  --retail-brand: #01475c;
}
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--retail-ink);
  background-color: #fff;
}
body :is(h1,h2,h3,h4,p,a,button,label,input,select,textarea) { letter-spacing: 0 !important; }
body :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #438a9c;
  outline-offset: 3px;
}
#main-header .hd-main { max-width: 1140px; min-height: 56px; padding: 8px 24px; }
#main-header .hd-category-list a { font-size: 12px; font-weight: 400; }
#main-header { background: rgba(255,255,255,.94) !important; border-bottom: 1px solid #e8e8ed; }
#main-header .hd-promo-ticker-wrap { background: #273444; }
body .btn-primary, body .btn-brand, body .btn-apple-primary {
  background: var(--retail-brand) !important;
  border-color: var(--retail-brand) !important;
  border-radius: 24px;
  box-shadow: none;
  font-weight: 500;
}
body .btn-brand-outline, body .btn-apple-secondary { border-radius: 24px; }
body :is(.form-control,.form-select,.form-control-custom) {
  border-radius: 8px;
  border-color: var(--retail-line);
  box-shadow: none;
  min-height: 44px;
}
body :is(.form-control,.form-select,.form-control-custom):focus { border-color: #438a9c; }
body .card { border-radius: 8px; box-shadow: none; border: 1px solid #e8e8ed; }
body .card:hover { transform: none; box-shadow: none; }
body .table { color: var(--retail-ink); }
body .table th { font-weight: 600; background: var(--retail-paper); }
body .table td, body .table th { padding: 14px 16px; vertical-align: middle; border-color: #e8e8ed; }
body .modal-content { border-radius: 8px; }
body .sp-page { color: var(--retail-ink); }
body .sp-page :is(.sp-step-card,.sp-benefit-card,.sp-toko-card) { border-radius: 8px; box-shadow: none; }
body .sp-page .sp-container { max-width: 1140px; }
body .sp-page :is(h2,h3) { font-weight: 600; }
body #hero-apple .hm-slide { background: var(--retail-paper); padding: 36px 24px 0; min-height: 620px; }
body #hero-apple .hm-grid { max-width: 1140px; grid-template-columns: 1fr; grid-template-rows: auto minmax(240px,1fr); gap: 20px; }
body #hero-apple .hm-content { align-items: center; text-align: center; padding-bottom: 0; }
body #hero-apple .hm-title { font-weight: 600; font-size: 48px; max-width: 850px; }
body #hero-apple .hm-eyebrow { font-size: 20px; color: var(--retail-brand); text-transform: none; }
body #hero-apple .hm-description { max-width: 650px; margin-bottom: 20px; }
body #hero-apple .hm-cta-group { justify-content: center; }
body #hero-apple .hm-media img { max-height: 340px; filter: none; }
body #hero-apple .hm-description { color: var(--retail-muted); }
body :is(.login-title,.register-title) { font-weight: 600; }
body :is(.auth-form-side,.login-form-side) { background: #fff; }
body :is(.btn-login-primary,.btn-register-primary) { border-radius: 24px; box-shadow: none; }
body footer { border-top: 1px solid #e8e8ed; }
body.retail-auth { display: block; background: var(--retail-paper); }
body.retail-auth #main-header { width: 100%; }
body.retail-auth #main-header button { font: inherit; }
body.retail-auth .auth-card-wrapper { width: calc(100% - 40px); margin: 32px auto; border-radius: 8px; border: 1px solid #e8e8ed; box-shadow: none; background: #fff; }
body .main :is(h1,h2,h3), body .sp-page :is(h1,h2,h3) { letter-spacing: 0 !important; }
body :is(.section-title,.section-heading h2) { font-size: 32px; line-height: 1.2; }
body :is(.sp-package-card,.product-card,.bento-card,.support-card) { border-radius: 8px; }
body .sidebar { box-shadow: none; border-right: 1px solid #e8e8ed; }
body #header.header { box-shadow: none; border-bottom: 1px solid #e8e8ed; background: #fff; }
body :is(.toko-card,.step-card,.trade-card) { border-radius: 8px; box-shadow: none; }
body :is(.pickup-section,.payment-guide-container,.tradein-section) { background-color: #fff; }
body.retail-account :is(.benefit-item,.service-lcd-item,.queue-card) { border-radius: 8px; box-shadow: none; }
body.retail-account .service-lcd-container { border-radius: 0; border: 0; box-shadow: none; background: transparent; }
body.retail-account .queue-page-container { background: var(--retail-paper); }
body.retail-account .queue-field :is(select,input) { border-radius: 8px; min-height: 44px; }
body.retail-account .queue-header h3 { font-size: 24px; font-weight: 600; }
body.retail-admin {
  --admin-black: #1d1d1f;
  --admin-border: #d2d2d7;
  --admin-bg-subtle: #f5f5f7;
  --admin-text-main: #1d1d1f;
  --admin-text-muted: #6e6e73;
  background: var(--retail-paper);
}
body.retail-admin :is(.admin-card-single,.stat-card,.admin-card,.form-card) { border-radius: 8px; box-shadow: none; }
body.retail-admin .header-modern { border-bottom: 1px solid #e8e8ed; box-shadow: none !important; }
body.retail-admin .sidebar { background: #fff; }
body .detail-container { max-width: 1140px; border-radius: 0; box-shadow: none; padding: 32px 0; gap: 40px; }
body .detail-image { max-width: 100%; aspect-ratio: 1; height: auto; border-radius: 8px; }
body .detail-image img { object-fit: contain; }
body .right-box { min-width: 0; }
body .table-responsive { max-width: 100%; overflow-x: auto; }
@media (max-width: 767px) {
  #main-header .hd-main { padding: 8px 16px; gap: 12px; }
  body :is(.form-control,.form-select,.form-control-custom) { font-size: 16px; }
  body .table td, body .table th { padding: 12px; }
  body #hero-apple .hm-slide { padding: 28px 18px 0; min-height: 0; }
  body #hero-apple .hm-grid { grid-template-rows: auto 220px; gap: 18px; }
  body #hero-apple .hm-title { font-size: 32px; }
  body #hero-apple .hm-eyebrow { font-size: 18px; }
  body #hero-apple .hm-description { font-size: 15px; }
  body #hero-apple .hm-media img { max-height: 220px; }
  body.retail-auth .auth-card-wrapper { width: calc(100% - 32px); margin: 24px auto; }
  body :is(.section-title,.section-heading h2) { font-size: 28px; }
  body.retail-account .queue-field :is(select,input) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}