/* ==========================================================
   AyoPromo Frontend — Modern & Clean (Safe Override)
   Hanya mengubah visual: warna, font, shadow, radius.
   Tidak menyentuh layout / display / height / flex.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ── */
:root {
  --fp-primary:    #CC0000;
  --fp-secondary:  #990000;
  --fp-accent:     #F97316;
  --fp-dark:       #0F172A;
  --fp-text:       #1E293B;
  --fp-muted:      #64748B;
  --fp-border:     #E2E8F0;
  --fp-bg:         #F8FAFC;
  --fp-white:      #FFFFFF;
  --fp-shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --fp-shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --fp-radius:     10px;
}

/* ── Typography ── */
body,
input, select, button, textarea {
  font-family: 'Nunito', 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
  line-height: 1.6 !important;
}

/* ══════════════════════════════════
   TOPBAR
══════════════════════════════════ */
.topbar {
  background-color: var(--fp-dark) !important;
  border-bottom: none !important;
}

/* teks di topbar */
.topbar .font-xs,
.topbar .color-brand-3 { color: rgba(255,255,255,.6) !important; }

.topbar .font-sm-bold,
.topbar .color-success  { color: #4ADE80 !important; }

.topbar .nav-small a  { color: rgba(255,255,255,.6) !important; transition: color .15s; }
.topbar .nav-small a:hover,
.topbar .dashboard      { color: #FFFFFF !important; }

/* dot separator pengganti | */
.topbar-dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════
   HEADER UTAMA (baris logo + search)
══════════════════════════════════ */
.header,
.header-container {
  background-color: var(--fp-white) !important;
  border-bottom: 1px solid var(--fp-border) !important;
  box-shadow: none !important;
  float: none !important;
}

.header.stick,
.header-container.stick {
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
  border-bottom-color: transparent !important;
}

/* Row utama: logo | search | tombol */
.header .main-header,
.header-container .main-header {
  display: flex !important;
  align-items: center !important;
}

.header .main-header .header-left,
.header-container .main-header .header-left {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px !important;
  padding: 10px 0 !important;
}

/* Logo */
.header .main-header .header-left .header-logo,
.header-container .main-header .header-left .header-logo {
  max-width: 150px !important;
  width: 150px !important;
  flex-shrink: 0 !important;
  margin-right: 4px !important;
}

/* header-nav kosong → tidak pakai ruang */
.header .main-header .header-left .header-nav,
.header-container .main-header .header-left .header-nav {
  display: none !important;
}

/* Search bar isi ruang tengah */
.header .main-header .header-left .header-search,
.header-container .main-header .header-left .header-search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Tombol akun + wishlist di kanan */
.header .main-header .header-left .header-shop,
.header-container .main-header .header-left .header-shop {
  width: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 4px !important;
}

/* ── Search bar ── */
.box-header-search {
  background: #fff !important;
  border: 1.5px solid var(--fp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .2s, box-shadow .2s !important;
  padding: 0 !important;
}

.box-header-search:focus-within {
  border-color: var(--fp-primary) !important;
  box-shadow: 0 0 0 3px rgba(204,0,0,.08) !important;
}

/* Category dropdown di dalam search */
.box-category {
  flex-shrink: 0 !important;
  border-right: 1.5px solid var(--fp-border) !important;
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
}

.box-category select {
  height: 40px !important;
  font-size: 12.5px !important;
  padding: 0 26px 0 12px !important;
  border: none !important;
  background-color: transparent !important;
  color: var(--fp-text) !important;
  min-width: 110px !important;
  max-width: 130px !important;
  cursor: pointer !important;
  outline: none !important;
}

/* Input pencarian */
.box-header-search .form-search {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.box-keysearch {
  flex: 1 !important;
  min-width: 0 !important;
}

.box-header-search .form-control,
.box-header-search input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  color: var(--fp-text) !important;
  height: 40px !important;
  padding: 0 12px !important;
  width: 100% !important;
  outline: none !important;
}

.box-header-search .form-control::placeholder,
.box-header-search input::placeholder {
  color: #94A3B8 !important;
}

.box-header-search .form-control:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Account & Wishlist — tombol baru */
/* Tombol Wishlist — outline merah tipis */
.hs-wishlist-btn.hs-btn {
  background: transparent !important;
  border: 1.5px solid var(--fp-border) !important;
  color: var(--fp-text) !important;
}
.hs-wishlist-btn.hs-btn:hover {
  background: #FFF0F0 !important;
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
}

/* Tombol Masuk/Akun — solid merah */
.hs-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--fp-primary) !important;
  border: 1.5px solid var(--fp-primary) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s, box-shadow .15s !important;
  white-space: nowrap !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(204,0,0,.18) !important;
}

.hs-btn:hover,
.hs-btn-wrap:hover > .hs-btn {
  background: var(--fp-secondary) !important;
  border-color: var(--fp-secondary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(204,0,0,.28) !important;
}

.hs-btn svg { flex-shrink: 0 !important; }
.hs-label { font-size: 13px !important; font-weight: 700 !important; }
.hs-chevron { opacity: .75 !important; margin-left: 2px !important; }

/* Wishlist badge angka */
.hs-wishlist-btn { position: relative !important; }

.hs-wishlist-btn .number-item,
.hs-wishlist-btn .font-xs.number-item {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: var(--fp-primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: 2px solid #fff !important;
}

/* Dropdown account modern */
.hs-btn-wrap {
  position: relative !important;
  display: inline-block !important;
}

.dropdown-account {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  background: #fff !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  min-width: 190px !important;
  padding: 6px !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  transition: opacity .15s, transform .15s, visibility .15s !important;
}

.dropdown-account.dropdown-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown-account ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset li agar hover bisa full width */
.dropdown-account ul li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropdown-account ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fp-text) !important;
  text-decoration: none !important;
  transition: background .12s, color .12s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dropdown-account ul li a:hover {
  background: #FFF0F0 !important;
  color: var(--fp-primary) !important;
}

.dropdown-account ul li a svg { flex-shrink: 0 !important; opacity: .6 !important; }
.dropdown-account ul li a:hover svg { opacity: 1 !important; }

/* Divider di dropdown */
.hs-divider {
  height: 1px !important;
  background: var(--fp-border) !important;
  margin: 4px 8px !important;
}

/* Tombol keluar */
.dropdown-account .hs-logout { color: #DC2626 !important; }
.dropdown-account .hs-logout:hover { background: #FEF2F2 !important; color: #DC2626 !important; }

/* ══════════════════════════════════
   HEADER BOTTOM (navigasi)
   Override agresif karena tema asli pakai #bb0202
══════════════════════════════════ */

/* wrapper luar */
.header-bottom,
.header-brand-2 {
  background-color: transparent !important;
  border-top: none !important;
}

/* wrapper dalam — ini yang berisi warna merah asli */
.header-brand-2 .box-header-bottom,
.header-bottom .box-header-bottom {
  background-color: var(--fp-primary) !important;
  border-bottom: 2px solid rgba(255,255,255,.15) !important;
  border-radius: 0 !important;
}

/* tombol "Shop By Categories" — juga merah di tema asli */
.btn.btn-category,
.header-brand-2 .box-header-bottom .btn-category {
  background-color: rgba(0,0,0,.18) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  border-radius: 0 !important;
  transition: background-color .15s !important;
  padding-left: 20px !important;
  min-width: auto !important;
}

.btn.btn-category:hover,
.btn.btn-category:focus,
.btn.btn-category[aria-expanded="true"],
.header-brand-2 .box-header-bottom .btn-category:hover {
  background-color: rgba(0,0,0,.28) !important;
  color: #FFFFFF !important;
}

/* separator kiri tombol */
.header-brand-2 .box-header-bottom .btn-category:before {
  background-color: rgba(255,255,255,.3) !important;
}

/* teks dropdown-right di dalam tombol */
.header-bottom .dropdown-right,
.header-brand-2 .box-header-bottom .dropdown-right {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* dropdown kategori */
.sidebar-left.dropdown-menu,
.header-bottom .sidebar-left {
  border: 1px solid var(--fp-border) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: var(--fp-shadow-md) !important;
  background: var(--fp-white) !important;
}

.sidebar-left .menu-texts li a {
  color: var(--fp-text) !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  transition: background .12s, color .12s !important;
}

.sidebar-left .menu-texts li a:hover {
  background: #FFF0F0 !important;
  color: var(--fp-primary) !important;
}

/* link navigasi utama */
.header-brand-2 .box-header-bottom .main-menu li a,
.header-bottom .header-nav .main-menu li a {
  color: rgba(255,255,255,.92) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  transition: background .15s !important;
}

.header-brand-2 .box-header-bottom .main-menu li a:hover,
.header-bottom .header-nav .main-menu li a:hover {
  color: #FFFFFF !important;
  background-color: rgba(255,255,255,.15) !important;
}

/* ══════════════════════════════════
   DROPDOWN AKUN
══════════════════════════════════ */
.dropdown-account {
  border: 1px solid var(--fp-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--fp-shadow-md) !important;
  background: var(--fp-white) !important;
}

.dropdown-account ul li a {
  border-radius: 6px !important;
  font-size: 14px !important;
  color: var(--fp-text) !important;
  transition: background .12s, color .12s !important;
}

.dropdown-account ul li a:hover {
  background: #FFF0F0 !important;
  color: var(--fp-primary) !important;
}

/* ══════════════════════════════════
   BODY / MAIN CONTENT
══════════════════════════════════ */
body { background: #F8F9FB !important; }
.main { background: #F8F9FB !important; }

/* ══════════════════════════════════
   SECTION SPACING & HEADING
══════════════════════════════════ */
.section-box { margin-bottom: 8px !important; }

.head-main {
  padding-bottom: 20px !important;
  border-bottom: none !important;
  margin-bottom: 4px !important;
}

.head-main h3,
.head-main h4 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fp-text) !important;
  letter-spacing: -.02em !important;
  margin-bottom: 4px !important;
}

.head-main p,
.head-main .font-base {
  font-size: 14px !important;
  color: var(--fp-muted) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════
   TABS (All / Best Seller / Most Viewed)
══════════════════════════════════ */
.nav-tabs {
  border-bottom: none !important;
  gap: 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.nav-tabs li a {
  display: inline-block !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fp-muted) !important;
  text-decoration: none !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
  transition: all .15s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.nav-tabs li a:hover {
  color: var(--fp-primary) !important;
  background: #FFF0F0 !important;
  border-color: transparent !important;
}

.nav-tabs li a.active {
  color: var(--fp-primary) !important;
  background: #FFF0F0 !important;
  border-color: var(--fp-primary) !important;
}

/* head-main layout: judul kiri, tabs + buttons kanan, sejajar */
.head-main.bd-gray-200 {
  border-bottom: 1px solid var(--fp-border) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

.head-main.bd-gray-200 .row {
  align-items: center !important;
}

/* kolom kanan: tabs + buttons dalam satu baris */
.head-main.bd-gray-200 .col-xl-6.col-lg-8 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.head-main.bd-gray-200 ul.nav-tabs {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ── Swiper nav buttons di head-main ── */
.box-button-slider {
  display: flex !important;
  align-items: center !important;
}

/* Urutan DOM: next dulu, lalu prev.
   row-reverse membalik urutan visual → prev(←) di kiri, next(→) di kanan */
.box-button-slider .button-slider-nav {
  display: flex;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Reset semua override Swiper yang bikin posisi aneh */
.box-button-slider [class*="swiper-button"] {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
  transform: none !important;

  /* Ukuran & gaya tombol */
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, box-shadow .15s !important;
}

.box-button-slider [class*="swiper-button"]:hover {
  background: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
  box-shadow: 0 4px 10px rgba(204,0,0,.2) !important;
}

/* Ganti font icon dgn chevron CSS murni — tidak tergantung swiper-icons font */
.box-button-slider [class*="swiper-button"]::after {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-top: 2px solid #475569 !important;
  border-right: 2px solid #475569 !important;
  font-family: unset !important;
  flex-shrink: 0 !important;
}

.box-button-slider .swiper-button-next::after {
  transform: rotate(45deg) translateX(-1px) !important;
}

.box-button-slider .swiper-button-prev::after {
  transform: rotate(-135deg) translateX(1px) !important;
}

.box-button-slider [class*="swiper-button"]:hover::after {
  border-color: #fff !important;
}

/* ══════════════════════════════════
   CATEGORY CIRCLES
══════════════════════════════════ */
.card-circle {
  text-align: center !important;
  padding: 8px 4px !important;
  cursor: pointer !important;
  display: block !important;
  text-decoration: none !important;
}

.card-circle .card-image {
  margin: 0 auto 10px !important;
}

.card-circle .card-image .inner-image {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  background: #F1F5F9 !important;
  border: 2px solid var(--fp-border) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-circle:hover .inner-image {
  border-color: var(--fp-primary) !important;
  box-shadow: 0 4px 14px rgba(204,0,0,.18) !important;
  transform: translateY(-3px) !important;
}

.card-circle .card-image .inner-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.card-circle .card-info .font-md-bold {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fp-text) !important;
  display: block !important;
  margin-bottom: 2px !important;
  transition: color .15s !important;
}

.card-circle:hover .card-info .font-md-bold { color: var(--fp-primary) !important; }

.card-circle .card-info .font-xs {
  font-size: 12px !important;
  color: var(--fp-muted) !important;
}

/* ══════════════════════════════════
   KARTU PRODUK
══════════════════════════════════ */

/* wrapper luar */
.card-grid-style-3 {
  margin-bottom: 20px !important;
  transition: transform .2s !important;
}

.card-grid-style-3:hover {
  transform: translateY(-4px) !important;
}

/* inner card — hapus padding bawaan, pakai border-radius modern */
.card-grid-style-3 .card-grid-inner {
  border-radius: 14px !important;
  border: 1px solid var(--fp-border) !important;
  background: var(--fp-white) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: box-shadow .2s, border-color .2s !important;
}

.card-grid-style-3:hover .card-grid-inner {
  border-color: #fccaca !important;
  box-shadow: 0 8px 28px rgba(204,0,0,.10) !important;
}

/* image box — aspect ratio konsisten, gambar cover */
.card-grid-style-3 .card-grid-inner .image-box {
  position: relative !important;
  width: 100% !important;
  height: 190px !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
  border-radius: 0 !important;
  display: block !important;
  line-height: unset !important;
  margin-bottom: 0 !important;
}

.card-grid-style-3 .card-grid-inner .image-box a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.card-grid-style-3 .card-grid-inner .image-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  vertical-align: unset !important;
  transition: transform .35s ease !important;
}

.card-grid-style-3:hover .card-grid-inner .image-box img {
  transform: scale(1.06) !important;
}

/* info section — tinggi minimum agar semua card sejajar */
.card-grid-style-3 .card-grid-inner .info-right {
  padding: 14px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 140px !important;
}

/* tombol detail selalu di bawah (auto margin top) */
.card-grid-style-3 .card-grid-inner .box-btn-cart {
  margin-top: auto !important;
}

/* badge kategori */
.card-grid-style-3 .card-grid-inner .info-right > a.color-gray-500,
.card-grid-style-3 .card-grid-inner .info-right > a:first-child {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--fp-primary) !important;
  background: #FFF0F0 !important;
  padding: 2px 8px !important;
  border-radius: 50px !important;
  margin-bottom: 7px !important;
  text-decoration: none !important;
}

/* nama produk */
.card-grid-style-3 .card-grid-inner .info-right .color-brand-3.font-sm-bold {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fp-text) !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
}

.card-grid-style-3 .card-grid-inner .info-right .color-brand-3.font-sm-bold:hover {
  color: var(--fp-primary) !important;
}

/* harga */
.card-grid-style-3 .card-grid-inner .price-info {
  margin: 0 0 12px !important;
}

.card-grid-style-3 .card-grid-inner .price-info .price-main {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--fp-text) !important;
  margin-right: 0 !important;
}

/* tombol detail — outline style lebih elegan */
.card-grid-style-3 .card-grid-inner .box-btn-cart .btn-cart,
.card-grid-style-3 .card-grid-inner .info-right .btn-cart {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--fp-primary) !important;
  border: 1.5px solid var(--fp-primary) !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  transition: background .15s, color .15s, box-shadow .15s !important;
  text-decoration: none !important;
}

.card-grid-style-3 .card-grid-inner .box-btn-cart .btn-cart:hover,
.card-grid-style-3 .card-grid-inner .info-right .btn-cart:hover {
  background: var(--fp-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(204,0,0,.22) !important;
}

/* tombol wishlist floating */
.card-grid-style-3 .card-grid-inner .tools {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 12 !important;
  width: auto !important;
}

.card-grid-style-3 .card-grid-inner .tools .btn-wishlist {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--fp-border) !important;
  background-image: url(../ecom_frontend/assets/imgs/template/wishlist.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px !important;
  transition: background-color .15s, border-color .15s !important;
  display: block !important;
  margin-bottom: 0 !important;
}

.card-grid-style-3 .card-grid-inner .tools .btn-wishlist:hover {
  background-color: #FFF0F0 !important;
  border-color: var(--fp-primary) !important;
}

/* ══════════════════════════════════
   TOMBOL
══════════════════════════════════ */
.btn-cart {
  background-color: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background .15s, box-shadow .15s !important;
}

.btn-cart:hover {
  background-color: var(--fp-secondary) !important;
  border-color: var(--fp-secondary) !important;
  box-shadow: 0 4px 12px rgba(204,0,0,.3) !important;
}

.btn-buy {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════
   BANNER HERO
══════════════════════════════════ */
.banner-big-7 {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.banner-big-7 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.banner-right-7 {
  border-radius: 12px !important;
  overflow: hidden !important;
  height: 100% !important;
}

.banner-right-7 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.swiper-pagination-1 .swiper-pagination-bullet-active {
  background: var(--fp-primary) !important;
}

/* ══════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════ */
.head-main h3,
.section-title h3 {
  color: var(--fp-text) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

.head-main p,
.section-title p {
  color: var(--fp-muted) !important;
}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.footer { background-color: #0F172A !important; }

.footer-1 {
  background-color: #0F172A !important;
  padding: 32px 0 16px !important;
  margin: 0 !important;
}

/* Kurangi margin bawah kolom footer */
.footer-1 .mb-40,
.footer-1 [class*="mb-"] {
  margin-bottom: 16px !important;
}

/* Footer bottom section */
.footer .footer-bottom {
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}

.footer-col-title {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

/* logo */
.footer-logo-img {
  filter: brightness(0) invert(1) !important;
  opacity: .85 !important;
}

/* deskripsi singkat */
.footer-desc {
  color: rgba(255,255,255,.5) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  max-width: 300px !important;
}

/* ikon sosial */
.footer-socials { display: flex !important; gap: 8px !important; }

.icon-socials {
  background-color: rgba(255,255,255,.1) !important;
  border-radius: 50% !important;
  transition: background-color .15s !important;
}

.icon-socials:hover { background-color: var(--fp-primary) !important; }

/* link menu cepat */
.menu-footer { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.menu-footer li { margin-bottom: 10px !important; }

.menu-footer li a {
  color: rgba(255,255,255,.55) !important;
  font-size: 14px !important;
  transition: color .15s, padding-left .15s !important;
  text-decoration: none !important;
}

.menu-footer li a:hover {
  color: #FFFFFF !important;
  padding-left: 4px !important;
}

/* daftar kontak */
.footer-contact-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-contact-list li {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 14px !important;
}

.fc-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
  margin-bottom: 2px !important;
}

.fc-value,
.fc-value a {
  font-size: 13.5px !important;
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}

.fc-value a:hover { color: #FFFFFF !important; }

/* footer bawah (gelap) */
.footer-2 {
  background-color: rgba(0,0,0,.35) !important;
  margin-top: 0 !important;
}

.footer-bottom-1 {
  padding: 12px 0 8px !important;
}

.footer-2-top { margin-bottom: 10px !important; }
.footer-2-bottom { margin-bottom: 8px !important; }

.footer-2-top {
  margin-bottom: 20px !important;
}

.footer-2-top img {
  filter: brightness(0) invert(1) !important;
  opacity: .5 !important;
}

.footer-2-bottom {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

.head-left-footer {
  flex-shrink: 0 !important;
  width: 120px !important;
  padding-top: 5px !important;
}

.head-left-footer h6 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.35) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* tags kategori */
.tags-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex: 1 !important;
}

.tags-footer a {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.6) !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  transition: background .15s, color .15s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.tags-footer a:hover {
  background: var(--fp-primary) !important;
  color: #FFFFFF !important;
}

/* copyright bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 16px 0 !important;
}

.footer-bottom .color-gray-900,
.footer-bottom .font-sm {
  color: rgba(255,255,255,.35) !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════
   PAGINATION
══════════════════════════════════ */
.page-link {
  border-color: var(--fp-border) !important;
  color: var(--fp-muted) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  transition: all .15s !important;
}

.page-link:hover {
  background: #FFF0F0 !important;
  color: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
}

.page-item.active .page-link {
  background: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════
   SHOP LIST PAGE
══════════════════════════════════ */

/* Filter bar */
.shop-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--fp-shadow-sm) !important;
}

.sfb-count { font-size: 13.5px !important; color: var(--fp-muted) !important; }
.sfb-count strong { color: var(--fp-text) !important; font-weight: 700 !important; }

.sbb-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.sfb-search {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--fp-bg) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: var(--fp-muted) !important;
}

.sfb-search-input {
  border: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: var(--fp-text) !important;
  outline: none !important;
  width: 160px !important;
  font-family: inherit !important;
}

.sfb-search-input::placeholder { color: #94A3B8 !important; }

.sfb-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fp-text) !important;
  background: var(--fp-bg) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  white-space: nowrap !important;
}

.sfb-btn:hover { border-color: var(--fp-primary) !important; color: var(--fp-primary) !important; }

.sfb-btn-filter svg { stroke: currentColor; }

/* Shop card */
.shop-card-link { text-decoration: none !important; display: block !important; }

.shop-card {
  background: #fff !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 20px !important;
  transition: box-shadow .2s, transform .2s, border-color .2s !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.shop-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  transform: translateY(-2px) !important;
  border-color: var(--fp-primary) !important;
}

.shop-card-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--fp-border) !important;
}

.shop-card-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  border: 1px solid var(--fp-border) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: var(--fp-bg) !important;
}

.shop-card-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.shop-card-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--fp-primary) !important;
  background: #FFF0F0 !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
}

.shop-card-body { flex: 1 !important; }

.shop-card-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--fp-text) !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.shop-card:hover .shop-card-name { color: var(--fp-primary) !important; }

.shop-card-address {
  font-size: 12.5px !important;
  color: var(--fp-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.shop-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--fp-border) !important;
}

.shop-card-year {
  font-size: 11.5px !important;
  color: #94A3B8 !important;
}

.shop-card-wa {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #16A34A !important;
  text-decoration: none !important;
  background: #F0FDF4 !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  transition: background .15s !important;
}

.shop-card-wa:hover { background: #DCFCE7 !important; }

/* Sidebar widgets */
.sidebar-widget {
  background: #fff !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: var(--fp-shadow-sm) !important;
}

.sidebar-widget-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--fp-muted) !important;
  margin-bottom: 14px !important;
}

.sidebar-cat-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-cat-list li { margin-bottom: 2px !important; }

.sidebar-cat-list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  font-size: 13.5px !important;
  color: var(--fp-text) !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}

.sidebar-cat-list li a:hover {
  background: #FFF0F0 !important;
  color: var(--fp-primary) !important;
}

.sidebar-cat-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--fp-muted) !important;
  background: var(--fp-bg) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

.sidebar-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.sidebar-tag {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--fp-text) !important;
  background: var(--fp-bg) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s !important;
}

.sidebar-tag:hover {
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-color: var(--fp-primary) !important;
}

/* Filter modal */
.filter-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--fp-muted) !important;
  margin-bottom: 10px !important;
}

/* ══════════════════════════════════
   BLOG CARD
══════════════════════════════════ */
.card-grid-style-1 {
  background: var(--fp-white) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: box-shadow .2s, transform .2s !important;
}

.card-grid-style-1:hover {
  box-shadow: var(--fp-shadow-md) !important;
  transform: translateY(-3px) !important;
}

.card-grid-style-1 .image-box {
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  aspect-ratio: 16/9 !important;
}

.card-grid-style-1 .image-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s !important;
}

.card-grid-style-1:hover .image-box img { transform: scale(1.05) !important; }

.card-grid-style-1 h4 {
  color: var(--fp-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin-top: 10px !important;
}

.card-grid-style-1 .tag-dot {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--fp-primary) !important;
  background: #FFF0F0 !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  display: inline-block !important;
  margin-top: 12px !important;
}

/* ══════════════════════════════════
   SWIPER NAVIGATION BUTTONS
══════════════════════════════════ */
.swiper-button-next,
.swiper-button-prev {
  width: 36px !important;
  height: 36px !important;
  background: var(--fp-white) !important;
  border: 1.5px solid var(--fp-border) !important;
  border-radius: 50% !important;
  box-shadow: var(--fp-shadow-sm) !important;
  transition: background .15s, border-color .15s !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: swiper-icons !important;
  font-weight: 400 !important;
  color: var(--fp-text) !important;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after { color: #fff !important; }

/* Swiper pagination dots */
.swiper-pagination-bullet-active {
  background: var(--fp-primary) !important;
}

/* ══════════════════════════════════
   BLOG / BERITA SECTION
══════════════════════════════════ */

/* Nav buttons row di sebelah kanan heading */
.blog-nav-btns {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.blog-nav-btns [class*="swiper-button"] {
  position: static !important;
  top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  margin-top: 0 !important; transform: none !important;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
}

.blog-nav-btns [class*="swiper-button"]:hover {
  background: var(--fp-primary) !important;
  border-color: var(--fp-primary) !important;
  box-shadow: 0 4px 10px rgba(204,0,0,.2) !important;
}

.blog-nav-btns [class*="swiper-button"]::after {
  content: '' !important;
  display: block !important;
  width: 7px !important; height: 7px !important;
  border-top: 2px solid #475569 !important;
  border-right: 2px solid #475569 !important;
  font-family: unset !important;
  flex-shrink: 0 !important;
}

.blog-nav-btns .swiper-button-next::after {
  transform: rotate(45deg) translateX(-1px) !important;
}

.blog-nav-btns .swiper-button-prev::after {
  transform: rotate(-135deg) translateX(1px) !important;
}

.blog-nav-btns [class*="swiper-button"]:hover::after {
  border-color: #fff !important;
}

/* Blog card */
.card-grid-style-1 {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--fp-border) !important;
  box-shadow: var(--fp-shadow-sm) !important;
  transition: box-shadow .2s, transform .2s !important;
}

.card-grid-style-1:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  transform: translateY(-3px) !important;
}

.card-grid-style-1 .image-box {
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

.card-grid-style-1 .image-box img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
  transition: transform .35s !important;
}

.card-grid-style-1:hover .image-box img {
  transform: scale(1.05) !important;
}

.card-blog-body {
  padding: 16px !important;
}

/* Category pill tag */
.card-grid-style-1 .tag-dot {
  background: #FFF0F0 !important;
  background-image: none !important;
  color: var(--fp-primary) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}

.card-grid-style-1 a.color-gray-1100 h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--fp-text) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card-grid-style-1 a.color-gray-1100:hover h4 {
  color: var(--fp-primary) !important;
}

.card-blog-body .blog-meta {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--fp-muted) !important;
}

/* ══════════════════════════════════
   BREADCRUMB
══════════════════════════════════ */
.breadcrumb-item a { color: var(--fp-primary) !important; }
.breadcrumb-item.active { color: var(--fp-muted) !important; }

/* ══════════════════════════════════
   BACK TO TOP
══════════════════════════════════ */
.scrollup {
  background: var(--fp-primary) !important;
  border-radius: 8px !important;
  box-shadow: var(--fp-shadow-md) !important;
}

/* ══════════════════════════════════
   BADGE / LABEL
══════════════════════════════════ */
.label.bg-brand-2  { background: var(--fp-accent) !important; color: #fff !important; }
.tag-dot           { background: #FFF0F0 !important; color: var(--fp-primary) !important; border-radius: 999px !important; }

/* ══════════════════════════════════
   PRODUCT DETAIL — IMAGE GALLERY
══════════════════════════════════ */

/* Horizontal thumbnail layout (below main image) */
.galleries {
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Main gallery frame */
.detail-gallery {
  border: 1.5px solid var(--fp-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  width: 100% !important;
}

/* Reduce main image height from 610px to 400px */
.product-image-slider.slick-slider .slick-track figure {
  height: 400px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}

.product-image-slider .slick-slide img {
  max-height: 370px !important;
  object-fit: contain !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Thumbnail strip — horizontal below main image */
.slider-nav-thumbnails {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}

.slider-nav-thumbnails .slick-slide {
  padding: 0 4px !important;
}

.slider-nav-thumbnails .slick-slide .item-thumb {
  height: 76px !important;
  line-height: 76px !important;
  border: 1.5px solid var(--fp-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #fff !important;
  transition: border-color .15s !important;
  margin-bottom: 0 !important;
}

.slider-nav-thumbnails .slick-slide .item-thumb:hover,
.slider-nav-thumbnails .slick-slide .item-thumb.slick-current {
  border-color: var(--fp-primary) !important;
}

.slider-nav-thumbnails .slick-slide .item-thumb img {
  width: 100% !important;
  height: 74px !important;
  max-height: 74px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Prevent zoom container from covering content */
.zoomContainer { z-index: 100 !important; }

/* ══════════════════════════════════
   PRODUCT DETAIL TABS
══════════════════════════════════ */
.nav-tabs-product {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 0 !important;
  display: flex !important;
  gap: 4px !important;
  border-bottom: 2px solid var(--fp-border) !important;
}

.nav-tabs-product li {
  margin-bottom: -2px !important;
}

.nav-tabs-product li a {
  display: inline-block !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fp-muted) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color .15s, border-color .15s !important;
}

.nav-tabs-product li a:hover {
  color: var(--fp-text) !important;
  background: transparent !important;
}

.nav-tabs-product li a.active {
  color: var(--fp-primary) !important;
  border-bottom-color: var(--fp-primary) !important;
  background: transparent !important;
}

/* ══════════════════════════════════
   AUTH PAGES (Login / Register)
══════════════════════════════════ */
.auth-page {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--fp-bg);
}
.auth-card {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--fp-text);
  text-align: center;
  margin: 0 0 6px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--fp-muted);
  text-align: center;
  margin: 0 0 28px;
}
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; }
.auth-label { font-size: 13px; font-weight: 700; color: var(--fp-text); }
.auth-forgot { font-size: 12px; color: var(--fp-primary); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-input {
  width: 100%;
  border: 1.5px solid var(--fp-border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--fp-text);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.auth-input:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(204,0,0,.08);
}
.auth-input-icon { position: relative; }
.auth-input-icon .auth-input { padding-right: 44px; }
.auth-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fp-muted);
  padding: 0;
  line-height: 1;
  transition: color .15s;
}
.auth-eye-btn:hover { color: var(--fp-text); }
.auth-error { font-size: 12px; color: var(--fp-primary); }
.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--fp-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  font-family: inherit;
  margin-top: 4px;
}
.auth-submit-btn:hover {
  background: #a80000;
  box-shadow: 0 4px 14px rgba(204,0,0,.25);
}
.auth-divider {
  border-top: 1px solid var(--fp-border);
  margin: 24px 0 18px;
}
.auth-switch { font-size: 13.5px; color: var(--fp-muted); text-align: center; margin: 0; }
.auth-switch a { color: var(--fp-primary); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-input-error { border-color: var(--fp-primary) !important; background: #FFF8F8 !important; }
.auth-input-prefix-error { border-color: var(--fp-primary) !important; }
.auth-alert-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF0F0;
  border: 1px solid #fccaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fp-primary);
  font-weight: 600;
}

/* ══════════════════════════════════
   UTILITY SPACING
══════════════════════════════════ */
.mb-28 { margin-bottom: 28px !important; }
.mt-8  { margin-top: 8px !important; }

/* ══════════════════════════════════
   MOBILE BOTTOM NAVIGATION
══════════════════════════════════ */
.mbn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  border-top: 1px solid var(--fp-border);
  box-shadow: 0 -2px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: stretch;
  z-index: 1050;
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #94A3B8;
  font-size: 10px;
  font-weight: 600;
  transition: color .15s;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mbn-item span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.mbn-item.mbn-active { color: var(--fp-primary); }
.mbn-item.mbn-active svg { stroke: var(--fp-primary); }

/* FAB search button (center) */
.mbn-search-btn { position: relative; }

.mbn-search-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(204,0,0,.32);
  margin-top: -20px;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}

.mbn-search-btn:active .mbn-search-fab {
  transform: scale(.93);
  box-shadow: 0 2px 8px rgba(204,0,0,.2);
}

/* ══════════════════════════════════
   MOBILE SEARCH OVERLAY
══════════════════════════════════ */
.mso-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, visibility .2s;
}

.mso-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mso-box {
  width: 100%;
  background: #fff;
  padding: 20px 16px 24px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  transform: translateY(-100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.mso-overlay.active .mso-box { transform: translateY(0); }

.mso-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.mso-form { display: flex; flex-direction: column; gap: 10px; }

.mso-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fp-bg);
  border: 1.5px solid var(--fp-border);
  border-radius: 12px;
  padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
}

.mso-input-wrap:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(204,0,0,.08);
}

.mso-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 0;
  font-size: 16px;
  color: var(--fp-text);
  outline: none;
  font-family: inherit;
}

.mso-input::placeholder { color: #94A3B8; font-size: 15px; }

.mso-close-btn {
  background: none;
  border: none;
  color: var(--fp-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.mso-close-btn:hover { color: var(--fp-primary); }

.mso-kategori {
  border: 1.5px solid var(--fp-border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--fp-text);
  background: #fff;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.mso-kategori:focus { border-color: var(--fp-primary); }

.mso-submit {
  background: var(--fp-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(204,0,0,.22);
}
.mso-submit:hover { background: var(--fp-secondary); }

/* ══════════════════════════════════
   MOBILE HEADER ADJUSTMENTS (≤ 767px)
══════════════════════════════════ */
@media (max-width: 767px) {
  /* Hide topbar on mobile */
  .topbar { display: none !important; }

  /* Sticky header */
  .header, .header-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.10) !important;
  }

  /* Slim header padding */
  .header .main-header .header-left,
  .header-container .main-header .header-left {
    padding: 8px 0 !important;
    gap: 8px !important;
  }

  /* Smaller logo */
  .header .main-header .header-left .header-logo,
  .header-container .main-header .header-left .header-logo {
    max-width: 88px !important;
    width: 88px !important;
    margin-right: 0 !important;
  }

  /* Hide search bar on mobile (pakai search overlay) */
  .header .main-header .header-left .header-search,
  .header-container .main-header .header-left .header-search {
    display: none !important;
  }

  /* Account & wishlist: icon only */
  .hs-btn .hs-label,
  .hs-btn .hs-chevron,
  .hs-wishlist-btn .hs-label {
    display: none !important;
  }
  .hs-btn { padding: 8px 10px !important; }

  /* Hide header-bottom (diganti bottom nav) */
  .header-bottom { display: none !important; }

  /* Body padding for bottom nav */
  body { padding-bottom: 68px !important; }

  /* Breadcrumb compact */
  .breadcrumbs-div { padding: 6px 0 !important; }

  /* Shop filter bar compact */
  .shop-filter-bar { padding: 10px 12px !important; }

  /* Product card image height on mobile */
  .card-grid-style-3 .card-grid-inner .image-box {
    height: 160px !important;
  }
}