/* ==========================================================================
   SIGNPRINTPARTS (SPP) - UNIFIED INDUSTRIAL OEM THEME (BLACK & YELLOW)
   ========================================================================== */

:root {
  --spp-black: #0f1115;
  --spp-dark: #181b20;
  --spp-yellow: #ffe600;
  --spp-gray-card: #f8fafc;
  --spp-border: #e2e8f0;
  --spp-text: #1e293b;
  --spp-muted: #64748b;
}

body {
  background-color: #ffffff !important;
  color: var(--spp-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --- 1. HEADER & BLACK-YELLOW MICRO TOP BAR --- */
#header { background: #ffffff !important; border: none !important; padding: 0 !important; margin-bottom: 24px !important; }
#spp-clean-header { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

.spp-micro-top {
  background-color: var(--spp-black) !important;
  border-bottom: 3px solid var(--spp-yellow) !important;
  padding: 8px 0 !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}
.spp-micro-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#spp-micro-left, #spp-micro-right { display: flex !important; align-items: center !important; gap: 14px !important; }

.spp-oem-pill {
  background-color: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}
.spp-micro-top .ps-contactinfo a,
.spp-top-email-link {
  font-size: 12.5px !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: 0.2s !important;
}
.spp-micro-top .ps-contactinfo a:hover,
.spp-top-email-link:hover { color: var(--spp-yellow) !important; }

/* Dropdown USD $ & English */
.spp-micro-top select.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  padding: 5px 34px 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  width: auto !important;
  min-width: 90px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffe600' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 11px 11px !important;
  transition: all 0.2s ease !important;
}
.spp-micro-top select.form-select:hover,
.spp-micro-top select.form-select:focus { border-color: var(--spp-yellow) !important; color: var(--spp-yellow) !important; }
.spp-micro-top select.form-select option { background-color: var(--spp-black) !important; color: #ffffff !important; }

/* Baris Utama Header */
.spp-header-main {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
}
#spp-logo-zone { flex: 0 0 auto; margin: 0; padding: 0; }
#spp-logo-zone img { max-height: 48px !important; width: auto !important; object-fit: contain !important; margin: 0 !important; }
#spp-search-zone { flex: 1 1 auto; max-width: 700px; width: 100%; margin: 0 auto; }
#spp-search-zone #_desktop_ps_searchbar, #spp-search-zone #ps_searchbar { width: 100% !important; max-width: 100% !important; margin: 0 !important; display: block !important; padding: 0 !important; }
#spp-search-zone form { display: flex !important; width: 100% !important; position: relative !important; align-items: center !important; }
#spp-search-zone input[name="s"] { width: 100% !important; border: 2px solid var(--spp-black) !important; border-radius: 6px !important; padding: 12px 120px 12px 20px !important; font-size: 15px !important; height: 50px !important; outline: none !important; background-color: #ffffff !important; box-shadow: none !important; }
#spp-search-zone input[name="s"]:focus { border-color: var(--spp-black) !important; box-shadow: 0 0 0 3px rgba(255,230,0,0.3) !important; }
.spp-search-btn { position: absolute !important; right: 4px !important; top: 4px !important; bottom: 4px !important; height: 42px !important; padding: 0 30px !important; border-radius: 4px !important; background-color: var(--spp-yellow) !important; color: var(--spp-black) !important; font-weight: 800 !important; font-size: 14.5px !important; border: none !important; cursor: pointer !important; transition: 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.spp-search-btn:hover { background-color: var(--spp-black) !important; color: var(--spp-yellow) !important; }

#spp-user-zone { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
#spp-user-zone > div { margin: 0 !important; padding: 0 !important; }
#spp-user-zone a, #spp-user-zone .header-block { display: flex; align-items: center; gap: 8px; color: var(--spp-black); font-weight: 700; font-size: 14.5px; text-decoration: none; padding: 10px 16px; border-radius: 6px; transition: 0.2s; border: 1px solid transparent; }
#spp-user-zone a:hover, #spp-user-zone .header-block:hover { background-color: var(--spp-gray-card); border-color: var(--spp-border); }
.header-block__badge { background-color: var(--spp-yellow) !important; color: var(--spp-black) !important; font-weight: 800 !important; border-radius: 4px !important; padding: 2px 8px !important; margin-left: 4px !important; }

/* Navigasi Menu */
.spp-header-nav {
  max-width: 1320px !important;
  margin: 20px auto 0 auto !important;
  padding: 6px 15px !important;
  border-top: 1px solid var(--spp-border) !important;
  border-bottom: 2px solid var(--spp-black) !important;
}
#spp-menu-zone .ps-mainmenu--desktop { margin: 0 !important; padding: 0 !important; display: block !important; }
#spp-menu-zone .ps-mainmenu__tree { display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; flex-wrap: wrap !important; }
#spp-menu-zone .ps-mainmenu__tree-item-wrapper { display: flex !important; align-items: center !important; border-radius: 6px !important; transition: 0.2s !important; }
#spp-menu-zone .ps-mainmenu__tree-link { font-weight: 700 !important; font-size: 14px !important; color: var(--spp-black) !important; text-decoration: none !important; padding: 9px 12px 9px 15px !important; text-transform: none !important; }
#spp-menu-zone .ps-mainmenu__tree-item-wrapper:hover { background-color: var(--spp-black) !important; }
#spp-menu-zone .ps-mainmenu__tree-item-wrapper:hover .ps-mainmenu__tree-link,
#spp-menu-zone .ps-mainmenu__tree-item-wrapper:hover .dropdown-toggle { color: var(--spp-yellow) !important; }
.ps-mainmenu__tree-item::before, .ps-mainmenu__tree-item::after { display: none !important; }

/* ==========================================================================
   2. HOMEPAGE INDUSTRIAL OEM ARCHITECTURE (NON-EBAY)
   ========================================================================== */
#custom-text, .custom-text, .ps-customtext { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; }
.carousel, .homeslider { max-width: 1320px !important; margin: 0 auto 32px auto !important; border-radius: 8px !important; overflow: hidden !important; border: 2px solid var(--spp-black) !important; }

.spp-industrial-home {
  max-width: 1320px !important;
  margin: 0 auto !important;
}

/* 1. 4-Pillar Trust Bar */
.spp-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 52px !important;
}
.spp-trust-card {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-left: 4px solid var(--spp-yellow) !important;
  border-radius: 6px !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.spp-trust-num {
  background: rgba(255, 230, 0, 0.12) !important;
  color: var(--spp-yellow) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  padding: 6px 9px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 230, 0, 0.3) !important;
  line-height: 1 !important;
}
.spp-trust-info h4 {
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  margin: 0 0 4px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.spp-trust-info p {
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Section Headers */
.spp-ind-section { margin: 52px 0 !important; }
.spp-ind-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--spp-black) !important;
  margin-bottom: 24px !important;
}
.spp-ind-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.spp-ind-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.spp-ind-link {
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border: 1px solid var(--spp-black) !important;
  border-radius: 4px !important;
  transition: 0.2s !important;
}
.spp-ind-link:hover {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
}

/* 2. 6-Column Hardware Bento Cards */
.spp-hw-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
}
.spp-hw-card {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 20px 18px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.22s ease !important;
}
.spp-hw-card:hover {
  background: var(--spp-black) !important;
  border-color: var(--spp-black) !important;
  border-top-color: var(--spp-yellow) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}
.spp-hw-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.spp-hw-code {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--spp-muted) !important;
  letter-spacing: 0.6px !important;
}
.spp-hw-arrow {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  transition: 0.2s !important;
}
.spp-hw-icon {
  width: 46px !important;
  height: 46px !important;
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  color: var(--spp-black) !important;
  transition: 0.2s !important;
}
.spp-hw-icon svg { width: 24px !important; height: 24px !important; }
.spp-hw-card h3 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}
.spp-hw-card p {
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.spp-hw-card:hover .spp-hw-code { color: var(--spp-yellow) !important; }
.spp-hw-card:hover .spp-hw-arrow { color: var(--spp-yellow) !important; transform: translate(2px, -2px) !important; }
.spp-hw-card:hover .spp-hw-icon { background: var(--spp-yellow) !important; border-color: var(--spp-yellow) !important; color: var(--spp-black) !important; }
.spp-hw-card:hover h3 { color: #ffffff !important; }
.spp-hw-card:hover p { color: #cbd5e1 !important; }

/* 3. Industrial Callout Strip */
.spp-ind-strip {
  background: var(--spp-gray-card) !important;
  border: 2px solid var(--spp-black) !important;
  border-left: 8px solid var(--spp-yellow) !important;
  border-radius: 6px !important;
  padding: 24px 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 48px 0 !important;
}
.spp-ind-strip-left {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
.spp-strip-badge {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  white-space: nowrap !important;
}
.spp-ind-strip-left h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 4px 0 !important;
  text-transform: uppercase !important;
}
.spp-ind-strip-left p {
  font-size: 14px !important;
  color: var(--spp-muted) !important;
  margin: 0 !important;
}
.spp-btn-dark {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 2px solid var(--spp-black) !important;
  white-space: nowrap !important;
  transition: 0.2s !important;
}
.spp-btn-dark:hover {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}

/* 4. Manufacturer Matrix (12 Engineering Plates) */
.spp-brand-matrix {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
}
.spp-brand-plate {
  background: #ffffff !important;
  border: 1.5px solid var(--spp-border) !important;
  border-left: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 16px 18px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.spp-brand-plate span {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
}
.spp-brand-plate small {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--spp-muted) !important;
}
.spp-brand-plate:hover {
  background: var(--spp-black) !important;
  border-color: var(--spp-black) !important;
  border-left-color: var(--spp-yellow) !important;
  transform: translateY(-2px) !important;
}
.spp-brand-plate:hover span { color: var(--spp-yellow) !important; }
.spp-brand-plate:hover small { color: #e2e8f0 !important; }

/* 5. Technical Guarantee Hero Banner */
.spp-eng-banner {
  background: var(--spp-black) !important;
  border-top: 5px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 44px 48px !important;
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
  margin: 52px 0 !important;
  color: #ffffff !important;
}
.spp-eng-pill {
  display: inline-block !important;
  background: rgba(255, 230, 0, 0.15) !important;
  color: var(--spp-yellow) !important;
  border: 1px solid rgba(255, 230, 0, 0.4) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 16px !important;
}
.spp-eng-left h2 {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin: 0 0 14px 0 !important;
  text-transform: uppercase !important;
}
.spp-eng-left h2 span { color: var(--spp-yellow) !important; }
.spp-eng-left p {
  font-size: 14.5px !important;
  color: #cbd5e1 !important;
  line-height: 1.65 !important;
  margin: 0 0 24px 0 !important;
}
.spp-eng-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.spp-btn-yellow {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: 0.2s !important;
}
.spp-btn-yellow:hover { background: #ffffff !important; color: var(--spp-black) !important; }
.spp-btn-outline-light {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #475569 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: 0.2s !important;
}
.spp-btn-outline-light:hover { border-color: var(--spp-yellow) !important; color: var(--spp-yellow) !important; }

.spp-spec-panel {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.spp-spec-head {
  background: #222731 !important;
  color: var(--spp-yellow) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #2d3340 !important;
}
.spp-spec-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #262b36 !important;
  font-size: 13.5px !important;
}
.spp-spec-row:last-child { border-bottom: none !important; }
.spp-spec-row span { color: #94a3b8 !important; }
.spp-spec-row strong { color: #ffffff !important; font-weight: 700 !important; }

/* ==========================================================================
   3. PRODUCT DETAIL PAGE (PDP) - EXACT HUMMINGBIRD BEM OVERHAUL
   ========================================================================== */
.breadcrumb__wrapper { background: transparent !important; margin-bottom: 24px !important; }
.breadcrumb { background: var(--spp-gray-card) !important; padding: 12px 20px !important; border-radius: 6px !important; border: 1px solid var(--spp-border) !important; margin: 0 !important; font-size: 13.5px !important; }
.breadcrumb-item a { color: var(--spp-muted) !important; text-decoration: none !important; font-weight: 600 !important; }
.breadcrumb-item a:hover { color: var(--spp-black) !important; text-decoration: underline !important; }
.breadcrumb-item span { color: var(--spp-black) !important; font-weight: 700 !important; }

.product__container {
  display: grid !important;
  grid-template-columns: 52% 45% !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 3% !important;
  margin-bottom: 48px !important;
}
.product__left, .product__right { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

.product-flags .badge {
  background-color: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.product-flags .badge.discount { background-color: #dc2626 !important; color: #ffffff !important; }

.product__carousel { border: 1px solid var(--spp-border) !important; border-radius: 8px !important; padding: 16px !important; background: #ffffff !important; margin-bottom: 16px !important; }
.product__thumbnails-list { display: flex !important; gap: 10px !important; padding: 0 !important; list-style: none !important; flex-wrap: wrap !important; }
.product__thumbnail { border: 2px solid var(--spp-border) !important; border-radius: 6px !important; padding: 4px !important; background: #ffffff !important; width: 84px !important; height: 84px !important; overflow: hidden !important; transition: 0.2s !important; }
.product__thumbnail.active, .product__thumbnail:hover { border-color: var(--spp-black) !important; box-shadow: 0 0 0 2px var(--spp-yellow) !important; }

.product__right { background: var(--spp-gray-card) !important; border: 1px solid var(--spp-border) !important; border-top: 4px solid var(--spp-black) !important; border-radius: 8px !important; padding: 32px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; }
.product__name { font-size: 24px !important; font-weight: 800 !important; color: var(--spp-black) !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
.product__manufacturer { margin-bottom: 18px !important; }
.product__manufacturer a { display: inline-block !important; background: var(--spp-black) !important; color: var(--spp-yellow) !important; font-weight: 800 !important; font-size: 12px !important; padding: 5px 14px !important; border-radius: 4px !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }

.product__prices { background: #ffffff !important; border: 1px solid var(--spp-border) !important; border-left: 5px solid var(--spp-yellow) !important; padding: 18px 22px !important; border-radius: 6px !important; margin: 0 0 22px 0 !important; }
.product__price { font-size: 32px !important; font-weight: 900 !important; color: var(--spp-black) !important; line-height: 1.1 !important; }
.product__regular-price { color: #94a3b8 !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 600 !important; }
.product__discount-percentage { background: #fee2e2 !important; color: #dc2626 !important; font-weight: 800 !important; font-size: 12.5px !important; padding: 3px 8px !important; border-radius: 4px !important; margin-left: 8px !important; }
.product__tax-infos { font-size: 12.5px !important; color: var(--spp-muted) !important; margin-top: 6px !important; }
.product__description-short { font-size: 14.5px !important; color: #334155 !important; line-height: 1.65 !important; margin-bottom: 24px !important; }

.product__actions-qty-add { display: flex !important; gap: 14px !important; align-items: stretch !important; margin-bottom: 20px !important; }
.quantity-button__group { height: 52px !important; border: 2px solid var(--spp-black) !important; border-radius: 6px !important; overflow: hidden !important; background: #ffffff !important; width: 140px !important; }
.quantity-button__group input.form-control { border: none !important; font-weight: 800 !important; font-size: 16px !important; text-align: center !important; }
.quantity-button__group .btn { background: var(--spp-gray-card) !important; color: var(--spp-black) !important; border: none !important; }
.quantity-button__group .btn:hover { background: var(--spp-yellow) !important; }
.product__add-to-cart { flex: 1 1 auto !important; }
.product__add-to-cart-button { width: 100% !important; height: 52px !important; background-color: var(--spp-black) !important; color: var(--spp-yellow) !important; border: 2px solid var(--spp-black) !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 15.5px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; transition: all 0.2s ease !important; }
.product__add-to-cart-button:hover { background-color: var(--spp-yellow) !important; color: var(--spp-black) !important; border-color: var(--spp-black) !important; }

.blockreassurance--product { margin-top: 24px !important; padding-top: 20px !important; border-top: 1px solid var(--spp-border) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
.blockreassurance--product .reassurance { display: flex !important; align-items: center !important; gap: 12px !important; background: #ffffff !important; padding: 12px 16px !important; border-radius: 6px !important; border: 1px solid var(--spp-border) !important; }
.blockreassurance--product .reassurance__image img, .blockreassurance--product .reassurance__image svg { filter: grayscale(100%) brightness(0.15) !important; width: 26px !important; height: 26px !important; }
.blockreassurance--product .reassurance__title { font-weight: 700 !important; font-size: 13.5px !important; color: var(--spp-black) !important; }
.blockreassurance--product .reassurance__desc { font-size: 12px !important; color: var(--spp-muted) !important; }

/* --- 4. FULL-WIDTH DESCRIPTION & PRODUCT DETAILS --- */
.product__bottom { display: block !important; width: 100% !important; max-width: 100% !important; grid-template-columns: 1fr !important; margin-top: 20px !important; margin-bottom: 48px !important; }
.product__bottom-left { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
.product__bottom-right { display: none !important; }

#product_accordion .accordion-item { border: 1px solid var(--spp-border) !important; border-radius: 8px !important; overflow: hidden !important; margin-bottom: 24px !important; background: #ffffff !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important; }
#product_accordion .accordion-button { background-color: var(--spp-black) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; padding: 18px 24px !important; border-left: 6px solid var(--spp-yellow) !important; box-shadow: none !important; }
#product_accordion .accordion-button::after { filter: invert(1) brightness(2) !important; }
#product_accordion .accordion-body { padding: 28px !important; }

.details__list { list-style: none !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--spp-border) !important; border-radius: 6px !important; overflow: hidden !important; }
.details__item { display: flex !important; justify-content: space-between !important; padding: 14px 20px !important; border-bottom: 1px solid var(--spp-border) !important; }
.details__item:last-child { border-bottom: none !important; }
.details__title { font-weight: 700 !important; color: var(--spp-black) !important; }
.details__right a { color: var(--spp-black) !important; font-weight: 700 !important; }

/* --- 5. PRODUCT CARDS & FEATURED SECTIONS --- */
.section-title { font-size: 20px !important; font-weight: 900 !important; color: var(--spp-black) !important; text-transform: uppercase !important; padding-bottom: 12px !important; border-bottom: 2px solid var(--spp-black) !important; margin: 40px 0 24px 0 !important; letter-spacing: 0.4px !important; }
.product-miniature { background: #ffffff !important; border: 1px solid var(--spp-border) !important; border-top: 3px solid var(--spp-black) !important; border-radius: 6px !important; padding: 16px !important; transition: all 0.22s ease !important; }
.product-miniature:hover { border-color: var(--spp-black) !important; border-top-color: var(--spp-yellow) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important; transform: translateY(-4px) !important; }
.product-miniature__image-container { background: var(--spp-gray-card) !important; border-radius: 4px !important; overflow: hidden !important; aspect-ratio: 1 / 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; }
.product-miniature__image-link { color: var(--spp-muted) !important; text-decoration: none !important; font-size: 12px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; }
.product-miniature__title { color: var(--spp-black) !important; font-size: 14.5px !important; font-weight: 700 !important; text-decoration: none !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 40px !important; margin-bottom: 8px !important; }
.product-miniature__title:hover { color: var(--spp-black) !important; text-decoration: underline !important; }
.product-miniature__price { font-size: 18px !important; font-weight: 900 !important; color: var(--spp-black) !important; }
.product-miniature__regular-price { font-size: 13.5px !important; color: #94a3b8 !important; text-decoration: line-through !important; }
.product-miniature__add.btn-primary { background-color: var(--spp-black) !important; color: var(--spp-yellow) !important; border: 1px solid var(--spp-black) !important; border-radius: 6px !important; }
.product-miniature__add.btn-primary:hover { background-color: var(--spp-yellow) !important; color: var(--spp-black) !important; }

.module-products__buttons { margin-top: 24px !important; text-align: center !important; }
.module-products__buttons .btn-outline-primary {
  background-color: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}
.module-products__buttons .btn-outline-primary:hover {
  background-color: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}

/* --- 6. UNIQUE FOOTER CSS (SIGNPRINTPARTS) --- */
#footer { background: transparent !important; padding: 0 !important; border: none !important; }
#spp-custom-footer { background-color: #111111; color: #94a3b8; margin-top: 60px; font-family: "Inter", sans-serif; border-top: 4px solid var(--spp-yellow); }
.spp-ft-main { padding: 70px 15px 50px; }
.spp-ft-container { max-width: 1320px; margin: 0 auto; }
.spp-ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 40px; }
.spp-ft-title { color: #ffffff; font-size: 15px; font-weight: 800; text-transform: uppercase; margin-bottom: 24px; border-left: 3px solid var(--spp-yellow); padding-left: 12px; letter-spacing: 0.5px; }
.spp-ft-about p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: #cbd5e1; }
.spp-ft-about strong { color: var(--spp-yellow); font-weight: 700; }
.spp-bulk-btn { display: inline-block; border: 1px solid var(--spp-yellow); color: var(--spp-yellow); padding: 8px 16px; border-radius: 4px; font-size: 13px; text-decoration: none; font-weight: 700; transition: 0.2s; margin-top: 10px; }
.spp-bulk-btn:hover { background: var(--spp-yellow); color: var(--spp-black); }
.spp-ft-contact ul { list-style: none; padding: 0; margin: 0; }
.spp-ft-contact li { display: flex; gap: 12px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; color: #cbd5e1; }
.spp-ft-contact i { font-style: normal; font-size: 16px; margin-top: 2px; }
.spp-ft-email-link { color: var(--spp-yellow) !important; text-decoration: none !important; font-weight: 700 !important; }
.spp-ft-email-link:hover { text-decoration: underline !important; }
.spp-ft-links { list-style: none; padding: 0; margin: 0; }
.spp-ft-links li { margin-bottom: 14px; }
.spp-ft-links a { color: #94a3b8; text-decoration: none; font-size: 14px; transition: 0.2s; display: inline-block; }
.spp-ft-links a:hover { color: var(--spp-yellow); transform: translateX(5px); }
.spp-nl-desc { font-size: 14px; line-height: 1.5; margin-bottom: 20px; color: #cbd5e1; }
.spp-new-nl-form { display: flex; background: #1e293b; border-radius: 6px; overflow: hidden; margin-bottom: 24px; border: 1px solid #334155; transition: 0.2s; }
.spp-new-nl-form:focus-within { border-color: var(--spp-yellow); }
.spp-new-nl-form input { flex: 1; background: transparent; border: none; padding: 14px 16px; color: #ffffff; outline: none; font-size: 14px; }
.spp-new-nl-form input::placeholder { color: #64748b; }
.spp-new-nl-form button { background: var(--spp-yellow); color: var(--spp-black); border: none; padding: 0 20px; font-weight: 800; cursor: pointer; font-size: 20px; transition: 0.2s; }
.spp-new-nl-form button:hover { background: #ffffff; }
.spp-social-minimal { font-size: 13.5px; color: #64748b; font-weight: 600; }
.spp-social-minimal a { color: #cbd5e1; text-decoration: none; transition: 0.2s; margin: 0 4px; }
.spp-social-minimal a:hover { color: var(--spp-yellow); }
.spp-ft-bottom { background: #080808; border-top: 1px solid #1e293b; }
.spp-bottom-bar-flex { display: flex; justify-content: space-between; align-items: center; padding: 24px 15px; }
.spp-copyright { font-size: 13.5px; color: #64748b; margin: 0; }
.spp-pay-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.spp-pay-badges span { background: #1a1a1a; color: #64748b; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; border: 1px solid #2d2d2d; }

/* RESPONSIVE */
@media (max-width: 1200px) {
  .spp-hw-grid, .spp-brand-matrix { grid-template-columns: repeat(3, 1fr) !important; }
  .spp-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-ft-grid { grid-template-columns: 1fr 1fr; gap: 50px 30px; }
}
@media (max-width: 991px) {
  .spp-header-main { flex-wrap: wrap; gap: 15px; }
  #spp-logo-zone { order: 1; }
  #spp-user-zone { order: 2; }
  #spp-search-zone { order: 3; flex: 0 0 100%; max-width: 100%; }
  .product__container, .spp-eng-banner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .spp-ind-strip { flex-direction: column !important; text-align: center !important; }
  .spp-ind-strip-left { flex-direction: column !important; }
}
@media (max-width: 768px) {
  .spp-hw-grid, .spp-brand-matrix { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-trust-grid, .spp-ft-grid { grid-template-columns: 1fr !important; }
  .spp-bottom-bar-flex { flex-direction: column; gap: 20px; text-align: center; }
  .spp-pay-badges { justify-content: center; }
  #product_accordion .accordion-body { padding: 16px !important; }
}
@media (max-width: 576px) {
  .spp-micro-top { display: none !important; }
  .spp-hw-grid { grid-template-columns: 1fr !important; }
  .spp-eng-banner { padding: 28px 20px !important; }
}

/* ==========================================================================
   7. CONTACT US PAGE INDUSTRIAL STYLING
   ========================================================================== */
body#contact #wrapper .spp-contact-main-row {
  align-items: stretch !important;
  gap: 0 !important;
  margin-bottom: 40px !important;
}

/* Kartu Kiri: Store Information (Dark & Yellow Industrial) */
.spp-contact-card-dark {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-top: 5px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 34px 28px !important;
  height: 100% !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1) !important;
}
.spp-contact-badge {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.spp-contact-card-dark h3 {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.4px !important;
}
.spp-contact-sub {
  color: #94a3b8 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 26px 0 !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #1e293b !important;
}
.spp-contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}
.spp-contact-icon {
  width: 38px !important;
  height: 38px !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.spp-contact-text {
  display: flex !important;
  flex-direction: column !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #cbd5e1 !important;
}
.spp-contact-text strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
}
.spp-contact-text a {
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  font-size: 14.5px !important;
}
.spp-contact-text a:hover {
  text-decoration: underline !important;
}
.spp-contact-guarantee {
  margin-top: 28px !important;
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  border-radius: 6px !important;
  padding: 16px 18px !important;
}
.spp-contact-guarantee strong {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}
.spp-contact-guarantee p {
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Kartu Kanan: Formulir Contact Us */
.spp-contact-right-col > .contact-form,
body#contact .spp-contact-right-col {
  background: #ffffff !important;
}
body#contact .contact-form,
.spp-contact-right-col form {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 5px solid var(--spp-black) !important;
  border-radius: 8px !important;
  padding: 36px 40px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}
.spp-form-header-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
body#contact h1,
.spp-contact-right-col h1,
.spp-contact-right-col h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 24px !important;
}

/* Label & Input Form Kontak */
body#contact form label,
.spp-contact-right-col label.form-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 8px !important;
}
body#contact form .form-control,
body#contact form .form-select,
.spp-contact-right-col .form-control,
.spp-contact-right-col .form-select {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  color: var(--spp-black) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
body#contact form .form-control:focus,
body#contact form .form-select:focus,
.spp-contact-right-col .form-control:focus,
.spp-contact-right-col .form-select:focus {
  border-color: var(--spp-black) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35) !important;
}
body#contact form textarea.form-control {
  min-height: 150px !important;
}

/* Tombol Submit "Send your message" (Ganti Biru Jadi Hitam-Kuning) */
body#contact form input[type="submit"],
body#contact form button[type="submit"],
.spp-contact-right-col .btn-primary {
  background-color: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 13px 32px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
body#contact form input[type="submit"]:hover,
body#contact form button[type="submit"]:hover,
.spp-contact-right-col .btn-primary:hover {
  background-color: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  border-color: var(--spp-black) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 991px) {
  .spp-contact-left-col { margin-bottom: 28px !important; }
  body#contact .contact-form, .spp-contact-right-col form { padding: 24px 20px !important; }
}

/* ==========================================================================
   8. DELIVERY, 40-DAY WARRANTY & RMA PORTAL INDUSTRIAL STYLING
   ========================================================================== */
.spp-log-wrapper {
  max-width: 1320px !important;
  margin: 0 auto 40px auto !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--spp-text) !important;
}

/* 1. Hero Banner */
.spp-log-hero {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 40px 44px !important;
  margin-bottom: 44px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}
.spp-log-hero-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.spp-log-badge {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.spp-log-code {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.spp-log-hero h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.25 !important;
}
.spp-log-hero p {
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 920px !important;
  margin: 0 0 32px 0 !important;
}
.spp-log-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding-top: 26px !important;
  border-top: 1px solid #262b36 !important;
}
.spp-log-metric-box {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 6px !important;
}
.spp-metric-val {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.spp-metric-lbl {
  display: block !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Section Headings */
.spp-log-section { margin-bottom: 52px !important; }
.spp-log-sec-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--spp-black) !important;
  margin-bottom: 26px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.spp-log-sec-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.spp-log-sec-head h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  letter-spacing: 0.4px !important;
}

/* 2. 4-Stage Dispatch Cards */
.spp-log-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.spp-log-step-card {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 24px 20px !important;
  transition: 0.2s !important;
}
.spp-log-step-card:hover {
  border-top-color: var(--spp-yellow) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px) !important;
}
.spp-step-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.spp-step-num {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.6px !important;
}
.spp-step-time {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--spp-muted) !important;
}
.spp-log-step-card h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase !important;
}
.spp-log-step-card p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 3. Courier Matrix & Rules Panels */
.spp-log-two-col {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 28px !important;
}
.spp-log-panel {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
.spp-panel-bar {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  padding: 15px 22px !important;
  border-left: 6px solid var(--spp-yellow) !important;
  text-transform: uppercase !important;
}
.spp-panel-body { padding: 24px !important; }
.spp-panel-intro {
  font-size: 14px !important;
  color: #334155 !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.6 !important;
}
.spp-log-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
  font-size: 13.5px !important;
}
.spp-log-table th {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--spp-border) !important;
  text-align: left !important;
}
.spp-log-table td {
  padding: 13px 14px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
  vertical-align: middle !important;
}
.spp-sla-pill {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}
.spp-log-notice-yellow {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 5px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
}
.spp-log-notice-yellow a {
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}
.spp-log-RuleList {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.spp-log-RuleList li {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--spp-border) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.spp-log-RuleList li:first-child { padding-top: 0 !important; }
.spp-log-RuleList li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.spp-log-RuleList strong {
  display: block !important;
  color: var(--spp-black) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-log-RuleList span { color: #475569 !important; }

/* 4. 40-Day Ironclad Guarantee Vault */
.spp-warranty-vault {
  background: var(--spp-gray-card) !important;
  border: 2px solid var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 36px 40px !important;
}
.spp-vault-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  gap: 20px !important;
}
.spp-vault-pill {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
}
.spp-vault-header h2 {
  font-size: 25px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.spp-vault-seal {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  flex-shrink: 0 !important;
}
.spp-vault-seal small {
  font-size: 10px !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
}
.spp-vault-lead {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin-bottom: 28px !important;
}
.spp-vault-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}
.spp-vault-card {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-left: 5px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 22px !important;
}
.spp-vault-card-top {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #b45309 !important;
  letter-spacing: 0.7px !important;
  margin-bottom: 8px !important;
}
.spp-vault-card h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 8px 0 !important;
}
.spp-vault-card p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.spp-vault-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
}
.spp-vault-table th {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 13px 16px !important;
  border: 1px solid #2d3340 !important;
  text-align: left !important;
}
.spp-vault-table td {
  padding: 13px 16px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
}
.spp-res-tag {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}
.spp-res-tag-dark {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* 5. Customer Reviews */
.spp-rating-summary {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.spp-stars-gold {
  color: #facc15 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
}
.spp-rev-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.spp-rev-box {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.spp-rev-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.spp-rev-Courier {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.spp-rev-box h4 {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 10px 0 !important;
}
.spp-rev-box p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 0 18px 0 !important;
}
.spp-rev-meta {
  padding-top: 14px !important;
  border-top: 1px solid var(--spp-border) !important;
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.spp-rev-meta strong { color: var(--spp-black) !important; }
.spp-verified-pill {
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}

/* 6. Direct RMA & Claim Portal */
.spp-rma-container {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  background: var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important;
}
.spp-rma-left {
  padding: 40px 36px !important;
  color: #ffffff !important;
  border-right: 1px solid #262b36 !important;
}
.spp-rma-badge {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 14px !important;
}
.spp-rma-left h2 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
}
.spp-rma-left p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 28px 0 !important;
}
.spp-rma-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
.spp-rma-step-item {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
}
.spp-rma-step-item strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-rma-step-item span {
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
}
.spp-rma-direct-box {
  padding-top: 20px !important;
  border-top: 1px solid #262b36 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.spp-rma-direct-box span {
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.spp-rma-direct-box a {
  color: var(--spp-yellow) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.spp-rma-right {
  background: #ffffff !important;
  padding: 40px !important;
}
.spp-rma-form-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
  border-bottom: 2px solid var(--spp-black) !important;
}
.spp-rma-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
.spp-rma-field {
  margin-bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
}
.spp-rma-field label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 7px !important;
}
.spp-rma-field input,
.spp-rma-field select,
.spp-rma-field textarea {
  background: var(--spp-gray-card) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: var(--spp-black) !important;
  outline: none !important;
  transition: 0.2s !important;
}
.spp-rma-field input:focus,
.spp-rma-field select:focus,
.spp-rma-field textarea:focus {
  background: #ffffff !important;
  border-color: var(--spp-black) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35) !important;
}
.spp-rma-alert {
  background: #dcfce7 !important;
  border-left: 5px solid #16a34a !important;
  color: #14532d !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  margin-bottom: 18px !important;
}
.spp-rma-submit-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.spp-rma-submit-btn {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 15px 28px !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.spp-rma-submit-btn:hover {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}
.spp-rma-note {
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

@media (max-width: 991px) {
  .spp-log-metrics, .spp-log-steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-log-two-col, .spp-vault-grid, .spp-rev-grid, .spp-rma-container { grid-template-columns: 1fr !important; }
  .spp-rma-left { border-right: none !important; border-bottom: 1px solid #262b36 !important; }
}
@media (max-width: 576px) {
  .spp-log-metrics, .spp-log-steps-grid, .spp-rma-row { grid-template-columns: 1fr !important; }
  .spp-log-hero, .spp-warranty-vault, .spp-rma-left, .spp-rma-right { padding: 24px 18px !important; }
  .spp-vault-header { flex-direction: column !important; align-items: flex-start !important; }
}

/* ==========================================================================
   9. ABOUT US CORPORATE PROFILE & QUALITY CHARTER STYLING
   ========================================================================== */
.spp-abt-wrapper {
  max-width: 1320px !important;
  margin: 0 auto 40px auto !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--spp-text) !important;
}

/* 1. Hero Banner */
.spp-abt-hero {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 42px 44px !important;
  margin-bottom: 48px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}
.spp-abt-hero-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.spp-abt-badge {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.spp-abt-code {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.spp-abt-hero h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.25 !important;
}
.spp-abt-hero p {
  color: #cbd5e1 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  max-width: 920px !important;
  margin: 0 0 32px 0 !important;
}
.spp-abt-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding-top: 26px !important;
  border-top: 1px solid #262b36 !important;
}
.spp-abt-metric-card {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 6px !important;
}
.spp-abt-m-val {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.spp-abt-m-lbl {
  display: block !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Section Headers */
.spp-abt-section { margin-bottom: 52px !important; }
.spp-abt-sec-head {
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--spp-black) !important;
  margin-bottom: 26px !important;
}
.spp-abt-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.spp-abt-sec-head h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* 2. Story & Comparison Matrix */
.spp-abt-two-col {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.spp-abt-story-card {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 8px !important;
  padding: 30px !important;
}
.spp-abt-story-card h3 {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 0 16px 0 !important;
}
.spp-abt-story-card p {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #334155 !important;
  margin: 0 0 16px 0 !important;
}
.spp-abt-ref-notice {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 5px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
  margin-top: 22px !important;
}

.spp-abt-compare-panel {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
.spp-abt-panel-head {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  padding: 15px 22px !important;
  border-left: 6px solid var(--spp-yellow) !important;
  text-transform: uppercase !important;
}
.spp-abt-panel-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
}
.spp-abt-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
  margin-bottom: 20px !important;
}
.spp-abt-table th {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
  padding: 12px !important;
  border: 1px solid var(--spp-border) !important;
  text-align: left !important;
}
.spp-abt-table td {
  padding: 12px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
}
.spp-ok-pill {
  display: inline-block !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
}
.spp-bad-pill {
  display: inline-block !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
}
.spp-abt-bulk-callout {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.spp-abt-bulk-callout strong {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 14px !important;
  margin-bottom: 3px !important;
}
.spp-abt-bulk-callout span {
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
}
.spp-abt-bulk-callout a {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-weight: 900 !important;
  font-size: 12.5px !important;
  padding: 9px 14px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* 3. Three Pillars */
.spp-abt-pillars {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.spp-abt-pillar-box {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 26px 24px !important;
  transition: 0.2s !important;
}
.spp-abt-pillar-box:hover {
  border-top-color: var(--spp-yellow) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px) !important;
}
.spp-pillar-num {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 12px !important;
}
.spp-abt-pillar-box h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 10px 0 !important;
  text-transform: uppercase !important;
}
.spp-abt-pillar-box p {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* 4. Headquarters & Bulk Quote Container */
.spp-abt-hq-container {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  background: var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important;
}
.spp-abt-hq-left {
  padding: 38px 34px !important;
  color: #ffffff !important;
  border-right: 1px solid #262b36 !important;
}
.spp-abt-hq-badge {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 12px !important;
}
.spp-abt-hq-left h2 {
  color: #ffffff !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px 0 !important;
}
.spp-abt-hq-left p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 26px 0 !important;
}
.spp-abt-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.spp-abt-c-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
}
.spp-abt-c-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}
.spp-abt-c-item strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-abt-c-item span {
  font-size: 13px !important;
  color: #cbd5e1 !important;
  line-height: 1.55 !important;
  display: block !important;
}
.spp-abt-c-item a {
  color: var(--spp-yellow) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.spp-abt-c-item a:hover { text-decoration: underline !important; }

.spp-abt-hq-right {
  background: #ffffff !important;
  padding: 38px !important;
}
.spp-abt-form-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
  border-bottom: 2px solid var(--spp-black) !important;
}
.spp-abt-form-sub {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin: 0 0 20px 0 !important;
}
.spp-abt-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.spp-abt-field {
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}
.spp-abt-field label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 6px !important;
}
.spp-abt-field input,
.spp-abt-field textarea {
  background: var(--spp-gray-card) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: var(--spp-black) !important;
  outline: none !important;
}
.spp-abt-field input:focus,
.spp-abt-field textarea:focus {
  background: #ffffff !important;
  border-color: var(--spp-black) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35) !important;
}
.spp-abt-alert {
  background: #dcfce7 !important;
  border-left: 5px solid #16a34a !important;
  color: #14532d !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  margin-bottom: 16px !important;
}
.spp-abt-submit-btn {
  width: 100% !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 15px 24px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.spp-abt-submit-btn:hover {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}

@media (max-width: 991px) {
  .spp-abt-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-abt-two-col, .spp-abt-pillars, .spp-abt-hq-container { grid-template-columns: 1fr !important; }
  .spp-abt-hq-left { border-right: none !important; border-bottom: 1px solid #262b36 !important; }
}
@media (max-width: 576px) {
  .spp-abt-metrics, .spp-abt-form-row { grid-template-columns: 1fr !important; }
  .spp-abt-hero, .spp-abt-story-card, .spp-abt-hq-left, .spp-abt-hq-right { padding: 24px 18px !important; }
}

/* ==========================================================================
   9. ABOUT US CORPORATE PROFILE & QUALITY CHARTER STYLING
   ========================================================================== */
.spp-abt-wrapper {
  max-width: 1320px !important;
  margin: 0 auto 40px auto !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--spp-text) !important;
}

/* 1. Hero Banner */
.spp-abt-hero {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 42px 44px !important;
  margin-bottom: 48px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}
.spp-abt-hero-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.spp-abt-badge {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.spp-abt-code {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.spp-abt-hero h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.25 !important;
}
.spp-abt-hero p {
  color: #cbd5e1 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  max-width: 920px !important;
  margin: 0 0 32px 0 !important;
}
.spp-abt-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding-top: 26px !important;
  border-top: 1px solid #262b36 !important;
}
.spp-abt-metric-card {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 6px !important;
}
.spp-abt-m-val {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.spp-abt-m-lbl {
  display: block !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Section Headers */
.spp-abt-section { margin-bottom: 52px !important; }
.spp-abt-sec-head {
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--spp-black) !important;
  margin-bottom: 26px !important;
}
.spp-abt-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.spp-abt-sec-head h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* 2. Story & Comparison Matrix */
.spp-abt-two-col {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.spp-abt-story-card {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 8px !important;
  padding: 30px !important;
}
.spp-abt-story-card h3 {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 0 16px 0 !important;
}
.spp-abt-story-card p {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #334155 !important;
  margin: 0 0 16px 0 !important;
}
.spp-abt-ref-notice {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 5px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
  margin-top: 22px !important;
}

.spp-abt-compare-panel {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
.spp-abt-panel-head {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  padding: 15px 22px !important;
  border-left: 6px solid var(--spp-yellow) !important;
  text-transform: uppercase !important;
}
.spp-abt-panel-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
}
.spp-abt-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
  margin-bottom: 20px !important;
}
.spp-abt-table th {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
  padding: 12px !important;
  border: 1px solid var(--spp-border) !important;
  text-align: left !important;
}
.spp-abt-table td {
  padding: 12px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
}
.spp-ok-pill {
  display: inline-block !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
}
.spp-bad-pill {
  display: inline-block !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
}
.spp-abt-bulk-callout {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.spp-abt-bulk-callout strong {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 14px !important;
  margin-bottom: 3px !important;
}
.spp-abt-bulk-callout span {
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
}
.spp-abt-bulk-callout a {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-weight: 900 !important;
  font-size: 12.5px !important;
  padding: 9px 14px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* 3. Three Pillars */
.spp-abt-pillars {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.spp-abt-pillar-box {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 26px 24px !important;
  transition: 0.2s !important;
}
.spp-abt-pillar-box:hover {
  border-top-color: var(--spp-yellow) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px) !important;
}
.spp-pillar-num {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 12px !important;
}
.spp-abt-pillar-box h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 10px 0 !important;
  text-transform: uppercase !important;
}
.spp-abt-pillar-box p {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* 4. Headquarters & Bulk Quote Container */
.spp-abt-hq-container {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  background: var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important;
}
.spp-abt-hq-left {
  padding: 38px 34px !important;
  color: #ffffff !important;
  border-right: 1px solid #262b36 !important;
}
.spp-abt-hq-badge {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 12px !important;
}
.spp-abt-hq-left h2 {
  color: #ffffff !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px 0 !important;
}
.spp-abt-hq-left p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 26px 0 !important;
}
.spp-abt-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.spp-abt-c-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
}
.spp-abt-c-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}
.spp-abt-c-item strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-abt-c-item span {
  font-size: 13px !important;
  color: #cbd5e1 !important;
  line-height: 1.55 !important;
  display: block !important;
}
.spp-abt-c-item a {
  color: var(--spp-yellow) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.spp-abt-c-item a:hover { text-decoration: underline !important; }

.spp-abt-hq-right {
  background: #ffffff !important;
  padding: 38px !important;
}
.spp-abt-form-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
  border-bottom: 2px solid var(--spp-black) !important;
}
.spp-abt-form-sub {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin: 0 0 20px 0 !important;
}
.spp-abt-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.spp-abt-field {
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}
.spp-abt-field label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 6px !important;
}
.spp-abt-field input,
.spp-abt-field textarea {
  background: var(--spp-gray-card) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: var(--spp-black) !important;
  outline: none !important;
}
.spp-abt-field input:focus,
.spp-abt-field textarea:focus {
  background: #ffffff !important;
  border-color: var(--spp-black) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35) !important;
}
.spp-abt-alert {
  background: #dcfce7 !important;
  border-left: 5px solid #16a34a !important;
  color: #14532d !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  margin-bottom: 16px !important;
}
.spp-abt-submit-btn {
  width: 100% !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 15px 24px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.spp-abt-submit-btn:hover {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}

@media (max-width: 991px) {
  .spp-abt-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-abt-two-col, .spp-abt-pillars, .spp-abt-hq-container { grid-template-columns: 1fr !important; }
  .spp-abt-hq-left { border-right: none !important; border-bottom: 1px solid #262b36 !important; }
}
@media (max-width: 576px) {
  .spp-abt-metrics, .spp-abt-form-row { grid-template-columns: 1fr !important; }
  .spp-abt-hero, .spp-abt-story-card, .spp-abt-hq-left, .spp-abt-hq-right { padding: 24px 18px !important; }
}

/* ==========================================================================
   8. DELIVERY, 40-DAY WARRANTY & RMA PORTAL INDUSTRIAL STYLING
   ========================================================================== */
.spp-log-wrapper {
  max-width: 1320px !important;
  margin: 0 auto 40px auto !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--spp-text) !important;
}

/* 1. Hero Banner */
.spp-log-hero {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 40px 44px !important;
  margin-bottom: 44px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}
.spp-log-hero-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.spp-log-badge {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.spp-log-code {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.spp-log-hero h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.25 !important;
}
.spp-log-hero p {
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 920px !important;
  margin: 0 0 32px 0 !important;
}
.spp-log-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding-top: 26px !important;
  border-top: 1px solid #262b36 !important;
}
.spp-log-metric-box {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 6px !important;
}
.spp-metric-val {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.spp-metric-lbl {
  display: block !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Section Headings */
.spp-log-section { margin-bottom: 52px !important; }
.spp-log-sec-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--spp-black) !important;
  margin-bottom: 26px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.spp-log-sec-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.spp-log-sec-head h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  letter-spacing: 0.4px !important;
}

/* 2. 4-Stage Dispatch Cards */
.spp-log-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.spp-log-step-card {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 24px 20px !important;
  transition: 0.2s !important;
}
.spp-log-step-card:hover {
  border-top-color: var(--spp-yellow) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px) !important;
}
.spp-step-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.spp-step-num {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.6px !important;
}
.spp-step-time {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--spp-muted) !important;
}
.spp-log-step-card h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase !important;
}
.spp-log-step-card p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 3. Courier Matrix & Rules Panels */
.spp-log-two-col {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 28px !important;
}
.spp-log-panel {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
.spp-panel-bar {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  padding: 15px 22px !important;
  border-left: 6px solid var(--spp-yellow) !important;
  text-transform: uppercase !important;
}
.spp-panel-body { padding: 24px !important; }
.spp-panel-intro {
  font-size: 14px !important;
  color: #334155 !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.6 !important;
}
.spp-log-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
  font-size: 13.5px !important;
}
.spp-log-table th {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--spp-border) !important;
  text-align: left !important;
}
.spp-log-table td {
  padding: 13px 14px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
  vertical-align: middle !important;
}
.spp-sla-pill {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}
.spp-log-notice-yellow {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 5px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
}
.spp-log-notice-yellow a {
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}
.spp-log-RuleList {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.spp-log-RuleList li {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--spp-border) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.spp-log-RuleList li:first-child { padding-top: 0 !important; }
.spp-log-RuleList li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.spp-log-RuleList strong {
  display: block !important;
  color: var(--spp-black) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-log-RuleList span { color: #475569 !important; }

/* 4. 40-Day Ironclad Guarantee Vault */
.spp-warranty-vault {
  background: var(--spp-gray-card) !important;
  border: 2px solid var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 36px 40px !important;
}
.spp-vault-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  gap: 20px !important;
}
.spp-vault-pill {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
}
.spp-vault-header h2 {
  font-size: 25px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.spp-vault-seal {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  flex-shrink: 0 !important;
}
.spp-vault-seal small {
  font-size: 10px !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
}
.spp-vault-lead {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin-bottom: 28px !important;
}
.spp-vault-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}
.spp-vault-card {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-left: 5px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 22px !important;
}
.spp-vault-card-top {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #b45309 !important;
  letter-spacing: 0.7px !important;
  margin-bottom: 8px !important;
}
.spp-vault-card h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 8px 0 !important;
}
.spp-vault-card p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.spp-vault-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
}
.spp-vault-table th {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 13px 16px !important;
  border: 1px solid #2d3340 !important;
  text-align: left !important;
}
.spp-vault-table td {
  padding: 13px 16px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
}
.spp-res-tag {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}
.spp-res-tag-dark {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* 5. Customer Reviews */
.spp-rating-summary {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.spp-stars-gold {
  color: #facc15 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
}
.spp-rev-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.spp-rev-box {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.spp-rev-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.spp-rev-Courier {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.spp-rev-box h4 {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 10px 0 !important;
}
.spp-rev-box p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 0 18px 0 !important;
}
.spp-rev-meta {
  padding-top: 14px !important;
  border-top: 1px solid var(--spp-border) !important;
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.spp-rev-meta strong { color: var(--spp-black) !important; }
.spp-verified-pill {
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}

/* 6. Direct RMA & Claim Portal */
.spp-rma-container {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  background: var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important;
}
.spp-rma-left {
  padding: 40px 36px !important;
  color: #ffffff !important;
  border-right: 1px solid #262b36 !important;
}
.spp-rma-badge {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 14px !important;
}
.spp-rma-left h2 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
}
.spp-rma-left p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 28px 0 !important;
}
.spp-rma-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
.spp-rma-step-item {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
}
.spp-rma-step-item strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-rma-step-item span {
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
}
.spp-rma-direct-box {
  padding-top: 20px !important;
  border-top: 1px solid #262b36 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.spp-rma-direct-box span {
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.spp-rma-direct-box a {
  color: var(--spp-yellow) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.spp-rma-right {
  background: #ffffff !important;
  padding: 40px !important;
}
.spp-rma-form-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
  border-bottom: 2px solid var(--spp-black) !important;
}
.spp-rma-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
.spp-rma-field {
  margin-bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
}
.spp-rma-field label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 7px !important;
}
.spp-rma-field input,
.spp-rma-field select,
.spp-rma-field textarea {
  background: var(--spp-gray-card) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: var(--spp-black) !important;
  outline: none !important;
  transition: 0.2s !important;
}
.spp-rma-field input:focus,
.spp-rma-field select:focus,
.spp-rma-field textarea:focus {
  background: #ffffff !important;
  border-color: var(--spp-black) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35) !important;
}
.spp-rma-alert {
  background: #dcfce7 !important;
  border-left: 5px solid #16a34a !important;
  color: #14532d !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  margin-bottom: 18px !important;
}
.spp-rma-submit-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.spp-rma-submit-btn {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 15px 28px !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.spp-rma-submit-btn:hover {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}
.spp-rma-note {
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

@media (max-width: 991px) {
  .spp-log-metrics, .spp-log-steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-log-two-col, .spp-vault-grid, .spp-rev-grid, .spp-rma-container { grid-template-columns: 1fr !important; }
  .spp-rma-left { border-right: none !important; border-bottom: 1px solid #262b36 !important; }
}
@media (max-width: 576px) {
  .spp-log-metrics, .spp-log-steps-grid, .spp-rma-row { grid-template-columns: 1fr !important; }
  .spp-log-hero, .spp-warranty-vault, .spp-rma-left, .spp-rma-right { padding: 24px 18px !important; }
  .spp-vault-header { flex-direction: column !important; align-items: flex-start !important; }
}

/* ==========================================================================
   8. DELIVERY, 40-DAY WARRANTY & RMA PORTAL INDUSTRIAL STYLING
   ========================================================================== */
.spp-log-wrapper {
  max-width: 1320px !important;
  margin: 0 auto 40px auto !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--spp-text) !important;
}

/* 1. Hero Banner */
.spp-log-hero {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 40px 44px !important;
  margin-bottom: 44px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}
.spp-log-hero-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.spp-log-badge {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.spp-log-code {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.spp-log-hero h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.25 !important;
}
.spp-log-hero p {
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 920px !important;
  margin: 0 0 32px 0 !important;
}
.spp-log-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding-top: 26px !important;
  border-top: 1px solid #262b36 !important;
}
.spp-log-metric-box {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 18px !important;
  border-radius: 6px !important;
}
.spp-metric-val {
  display: block !important;
  color: var(--spp-yellow) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.spp-metric-lbl {
  display: block !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Section Headings */
.spp-log-section { margin-bottom: 52px !important; }
.spp-log-sec-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--spp-black) !important;
  margin-bottom: 26px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.spp-log-sec-tag {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.spp-log-sec-head h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  letter-spacing: 0.4px !important;
}

/* 2. 4-Stage Dispatch Cards */
.spp-log-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.spp-log-step-card {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 24px 20px !important;
  transition: 0.2s !important;
}
.spp-log-step-card:hover {
  border-top-color: var(--spp-yellow) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px) !important;
}
.spp-step-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.spp-step-num {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.6px !important;
}
.spp-step-time {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--spp-muted) !important;
}
.spp-log-step-card h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase !important;
}
.spp-log-step-card p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 3. Courier Matrix & Rules Panels */
.spp-log-two-col {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 28px !important;
}
.spp-log-panel {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
.spp-panel-bar {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  padding: 15px 22px !important;
  border-left: 6px solid var(--spp-yellow) !important;
  text-transform: uppercase !important;
}
.spp-panel-body { padding: 24px !important; }
.spp-panel-intro {
  font-size: 14px !important;
  color: #334155 !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.6 !important;
}
.spp-log-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
  font-size: 13.5px !important;
}
.spp-log-table th {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--spp-border) !important;
  text-align: left !important;
}
.spp-log-table td {
  padding: 13px 14px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
  vertical-align: middle !important;
}
.spp-sla-pill {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}
.spp-log-notice-yellow {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 5px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
}
.spp-log-notice-yellow a {
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}
.spp-log-RuleList {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.spp-log-RuleList li {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--spp-border) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.spp-log-RuleList li:first-child { padding-top: 0 !important; }
.spp-log-RuleList li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.spp-log-RuleList strong {
  display: block !important;
  color: var(--spp-black) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-log-RuleList span { color: #475569 !important; }

/* 4. 40-Day Ironclad Guarantee Vault */
.spp-warranty-vault {
  background: var(--spp-gray-card) !important;
  border: 2px solid var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 36px 40px !important;
}
.spp-vault-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  gap: 20px !important;
}
.spp-vault-pill {
  display: inline-block !important;
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
}
.spp-vault-header h2 {
  font-size: 25px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.spp-vault-seal {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  flex-shrink: 0 !important;
}
.spp-vault-seal small {
  font-size: 10px !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
}
.spp-vault-lead {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin-bottom: 28px !important;
}
.spp-vault-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}
.spp-vault-card {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-left: 5px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 22px !important;
}
.spp-vault-card-top {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #b45309 !important;
  letter-spacing: 0.7px !important;
  margin-bottom: 8px !important;
}
.spp-vault-card h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 8px 0 !important;
}
.spp-vault-card p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.spp-vault-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
}
.spp-vault-table th {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 13px 16px !important;
  border: 1px solid #2d3340 !important;
  text-align: left !important;
}
.spp-vault-table td {
  padding: 13px 16px !important;
  border: 1px solid var(--spp-border) !important;
  color: #334155 !important;
}
.spp-res-tag {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}
.spp-res-tag-dark {
  background: #f1f5f9 !important;
  color: var(--spp-black) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* 5. Customer Reviews */
.spp-rating-summary {
  background: var(--spp-black) !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.spp-stars-gold {
  color: #facc15 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
}
.spp-rev-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.spp-rev-box {
  background: #ffffff !important;
  border: 1px solid var(--spp-border) !important;
  border-top: 4px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.spp-rev-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.spp-rev-Courier {
  background: var(--spp-gray-card) !important;
  border: 1px solid var(--spp-border) !important;
  color: var(--spp-black) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.spp-rev-box h4 {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  margin: 0 0 10px 0 !important;
}
.spp-rev-box p {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 0 18px 0 !important;
}
.spp-rev-meta {
  padding-top: 14px !important;
  border-top: 1px solid var(--spp-border) !important;
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.spp-rev-meta strong { color: var(--spp-black) !important; }
.spp-verified-pill {
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}

/* 6. Direct RMA & Claim Portal */
.spp-rma-container {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  background: var(--spp-black) !important;
  border-top: 6px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important;
}
.spp-rma-left {
  padding: 40px 36px !important;
  color: #ffffff !important;
  border-right: 1px solid #262b36 !important;
}
.spp-rma-badge {
  display: inline-block !important;
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 14px !important;
}
.spp-rma-left h2 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
}
.spp-rma-left p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 28px 0 !important;
}
.spp-rma-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
.spp-rma-step-item {
  background: #181b22 !important;
  border: 1px solid #2d3340 !important;
  border-left: 4px solid var(--spp-yellow) !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
}
.spp-rma-step-item strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.spp-rma-step-item span {
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
}
.spp-rma-direct-box {
  padding-top: 20px !important;
  border-top: 1px solid #262b36 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.spp-rma-direct-box span {
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.spp-rma-direct-box a {
  color: var(--spp-yellow) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.spp-rma-right {
  background: #ffffff !important;
  padding: 40px !important;
}
.spp-rma-form-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--spp-black) !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
  border-bottom: 2px solid var(--spp-black) !important;
}
.spp-rma-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
.spp-rma-field {
  margin-bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
}
.spp-rma-field label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 7px !important;
}
.spp-rma-field input,
.spp-rma-field select,
.spp-rma-field textarea {
  background: var(--spp-gray-card) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: var(--spp-black) !important;
  outline: none !important;
  transition: 0.2s !important;
}
.spp-rma-field input:focus,
.spp-rma-field select:focus,
.spp-rma-field textarea:focus {
  background: #ffffff !important;
  border-color: var(--spp-black) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35) !important;
}
.spp-rma-alert {
  background: #dcfce7 !important;
  border-left: 5px solid #16a34a !important;
  color: #14532d !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  margin-bottom: 18px !important;
}
.spp-rma-submit-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.spp-rma-submit-btn {
  background: var(--spp-black) !important;
  color: var(--spp-yellow) !important;
  border: 2px solid var(--spp-black) !important;
  border-radius: 6px !important;
  padding: 15px 28px !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.spp-rma-submit-btn:hover {
  background: var(--spp-yellow) !important;
  color: var(--spp-black) !important;
}
.spp-rma-note {
  font-size: 12.5px !important;
  color: var(--spp-muted) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

@media (max-width: 991px) {
  .spp-log-metrics, .spp-log-steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .spp-log-two-col, .spp-vault-grid, .spp-rev-grid, .spp-rma-container { grid-template-columns: 1fr !important; }
  .spp-rma-left { border-right: none !important; border-bottom: 1px solid #262b36 !important; }
}
@media (max-width: 576px) {
  .spp-log-metrics, .spp-log-steps-grid, .spp-rma-row { grid-template-columns: 1fr !important; }
  .spp-log-hero, .spp-warranty-vault, .spp-rma-left, .spp-rma-right { padding: 24px 18px !important; }
  .spp-vault-header { flex-direction: column !important; align-items: flex-start !important; }
}

/* ==========================================================================
   10. REASSURANCE BLOCK COMPACT INDUSTRIAL STYLING
   ========================================================================== */
.blockreassurance--product {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--spp-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.spp-reass-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  border: 1px solid var(--spp-border) !important;
  border-left: 3px solid var(--spp-black) !important;
}
.spp-reass-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.spp-reass-item div {
  display: flex !important;
  flex-direction: column !important;
}
.spp-reass-item strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--spp-black) !important;
  text-transform: uppercase !important;
}
.spp-reass-item span {
  font-size: 11.5px !important;
  color: var(--spp-muted) !important;
}

/* ==========================================================================
   11. IMAGE SLIDER (BANNER) LEFT-ALIGNED INDUSTRIAL CAPTION OVERHAUL
   ========================================================================== */
.ps-imageslider .ps-imageslider__figure {
  position: relative !important;
  margin: 0 !important;
}

/* Geser Kotak Teks dari Tengah ke Pinggir Kiri & Rapikan Ukuran */
.ps-imageslider .ps-imageslider__figcaption.carousel-caption {
  position: absolute !important;
  top: 50% !important;
  left: 64px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 46% !important;
  max-width: 520px !important;
  text-align: left !important;
  background: rgba(15, 17, 21, 0.82) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 5px solid var(--spp-yellow) !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* Judul Utama Banner (SPARE PARTS) */
.ps-imageslider .ps-imageslider__figcaption h2 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--spp-yellow) !important;
  text-align: left !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

/* Sub-judul & Isi Deskripsi Banner */
.ps-imageslider .ps-imageslider__figcaption h3,
.ps-imageslider .ps-imageslider__figcaption h4 {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: left !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.35 !important;
}

.ps-imageslider .ps-imageslider__figcaption div,
.ps-imageslider .ps-imageslider__figcaption p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #e2e8f0 !important;
  text-align: left !important;
  margin: 0 0 6px 0 !important;
}

.ps-imageslider .ps-imageslider__figcaption p:last-child {
  margin-bottom: 0 !important;
}

/* Highlight Kata Penting (Bold) dengan Warna Kuning/Putih Tegas */
.ps-imageslider .ps-imageslider__figcaption strong,
.ps-imageslider .ps-imageslider__figcaption b {
  color: var(--spp-yellow) !important;
  font-weight: 800 !important;
}

/* Ubah Indikator Bawah Slider dari Biru ke Kuning Elektrik */
.ps-imageslider .carousel-indicators [data-bs-target] {
  background-color: #ffffff !important;
  opacity: 0.45 !important;
  height: 4px !important;
  border-radius: 2px !important;
}
.ps-imageslider .carousel-indicators .active {
  background-color: var(--spp-yellow) !important;
  opacity: 1 !important;
}

/* Tombol Panah Kiri-Kanan Slider Lebih Rapi di Pinggir */
.ps-imageslider .carousel-control-prev,
.ps-imageslider .carousel-control-next {
  width: 42px !important;
  height: 42px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(15, 17, 21, 0.75) !important;
  border: 1px solid rgba(255, 230, 0, 0.4) !important;
  border-radius: 6px !important;
  opacity: 0.85 !important;
}
.ps-imageslider .carousel-control-prev { left: 12px !important; }
.ps-imageslider .carousel-control-next { right: 12px !important; }
.ps-imageslider .carousel-control-prev:hover,
.ps-imageslider .carousel-control-next:hover {
  background: var(--spp-yellow) !important;
  opacity: 1 !important;
}
.ps-imageslider .carousel-control-prev:hover .carousel-control-prev-icon,
.ps-imageslider .carousel-control-next:hover .carousel-control-next-icon {
  filter: invert(1) !important;
}

@media (max-width: 1199px) {
  .ps-imageslider .ps-imageslider__figcaption.carousel-caption {
    left: 56px !important;
    width: 50% !important;
    padding: 16px 18px !important;
  }
  .ps-imageslider .ps-imageslider__figcaption h2 { font-size: 20px !important; }
  .ps-imageslider .ps-imageslider__figcaption div,
  .ps-imageslider .ps-imageslider__figcaption p { font-size: 11.5px !important; }
}

/* ==========================================================================
   12. FIX WHITE FLASH ON SLIDER TRANSITION (DARK BUFFER & GPU LOCK)
   ========================================================================== */
.ps-imageslider,
.ps-imageslider .carousel-inner,
.ps-imageslider .carousel-item,
.ps-imageslider .ps-imageslider__figure {
  background-color: #0f1115 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Matikan backdrop-filter blur yang memicu kilatan putih GPU saat geser */
.ps-imageslider .ps-imageslider__figcaption.carousel-caption {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 17, 21, 0.90) !important;
  will-change: opacity, transform !important;
}

/* Pastikan gambar banner selalu memenuhi frame hitam tanpa celah putih */
.ps-imageslider .ps-imageslider__image,
.ps-imageslider .carousel-item img {
  display: block !important;
  width: 100% !important;
  background-color: #0f1115 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}