/* ===========================
   MORA HAIRCARE – Shopee-Style
   =========================== */

/* ===== Ticker (teks berjalan) ===== */
.mora-ticker {
  background:#fff;
  padding:20px;
  width:100vw;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
.mora-ticker-inner {
  background:#f3f3f3;
  border-radius:14px;
  overflow:hidden;
  height:64px;
  display:flex;
  align-items:center;
  line-height:1;
}
.mora-ticker-track {
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
  animation:tickerScroll 40s linear infinite;
  will-change:transform;
}
.mora-ticker-track:hover { animation-play-state:paused; }
.mora-ticker-item {
  display:inline-flex;
  align-items:center;
  gap:0;
  font-size:13.5px;
  font-weight:400;
  color:#888;
  padding:0 48px;
  letter-spacing:.1px;
  line-height:1;
}
.mora-ticker-icon { display:none; }
.mora-ticker-sep { display:none; }
@keyframes tickerScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-33.333%); }
}
@keyframes tickerScrollAdmin {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ===== Hero Fullscreen (Oakywood Style) ===== */
.mhs-section {
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  height:72vh;
  min-height:460px;
  overflow:hidden;
  background:#111;
}
.mhs-slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .8s ease;
}
.mhs-slide.active { opacity:1; }
.mhs-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.05) 100%);
}
.mhs-content {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  z-index:2;
  padding:0 6vw 72px;
}
.mhs-content-inner {
  max-width:600px;
  color:#fff;
}
.mhs-tag {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.8;
  margin-bottom:18px;
}
.mhs-title {
  font-size:clamp(2rem,5vw,3.6rem);
  font-weight:800;
  line-height:1.08;
  margin-bottom:18px;
  text-shadow:0 2px 24px rgba(0,0,0,.2);
}
.mhs-subtitle {
  font-size:clamp(14px,1.5vw,17px);
  opacity:.82;
  margin-bottom:32px;
  line-height:1.6;
}
.mhs-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.mhs-btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 36px;
  background:#fff;color:#111;
  font-weight:700;font-size:14px;
  border-radius:100px;
  text-decoration:none;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}
.mhs-btn-primary:hover { background:#f0f0f0;color:#111;transform:translateY(-1px); }
.mhs-btn-secondary {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 34px;
  background:transparent;color:#fff;
  font-weight:600;font-size:14px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:100px;
  text-decoration:none;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}
.mhs-btn-secondary:hover { background:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px); }
.mhs-trust {
  font-size:12.5px;
  opacity:.65;
  letter-spacing:.3px;
}
/* Arrows */
.mhs-arrow {
  position:absolute;top:50%;
  transform:translateY(-50%);
  z-index:10;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;
  transition:background .2s;
}
.mhs-arrow:hover { background:rgba(255,255,255,.28); }
.mhs-arrow-prev { left:24px; }
.mhs-arrow-next { right:24px; }
@media(max-width:767px) { .mhs-arrow { display:none !important; } }
/* Dots */
.mhs-dots {
  position:absolute;bottom:28px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:8px;z-index:10;
}
.mhs-dot {
  width:8px;height:8px;border-radius:50%;
  border:none;background:rgba(255,255,255,.4);
  cursor:pointer;transition:all .25s;padding:0;
}
.mhs-dot.active { background:#fff;width:26px;border-radius:4px; }
:root {
  --mora: #1E4A2E;
  --mora-dark: #1E3420;
  --mora-light: #3A5E3D;
  --mora-secondary: #6B8E6D;
  --mora-bg: #f0efed;
  --mora-radius: 4px;
  --mora-shadow: 0 1px 4px rgba(0,0,0,0.08);
  --mora-shadow-md: 0 2px 12px rgba(0,0,0,0.12);
  --transition: all 0.2s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--mora-bg); overflow-x: hidden; }
.text-mora { color: var(--mora) !important; }
.bg-mora  { background: var(--mora) !important; }

/* ===== TOPBAR – persis Shopee ===== */
.mora-topbar {
  background: #2d2d2d;
  color: #fff;
  font-size: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.mora-topbar a {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.mora-topbar a:hover { color: #fff; }
.mora-topbar-sep { color: rgba(255,255,255,0.35); margin: 0 10px; }

/* Topbar kanan — link & tombol */
.mora-topbar-link {
  color: rgba(255,255,255,0.7) !important;
  font-size: 12px;
  letter-spacing: .3px;
  text-decoration: none;
  margin-right: 16px;
  transition: color .15s;
}
.mora-topbar-link:hover { color: #fff !important; }

.mora-topbar-btn-outline {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 4px 14px;
  text-decoration: none !important;
  transition: border-color .15s, color .15s;
  margin-right: 8px;
}
.mora-topbar-btn-outline:hover { border-color: #fff; color: #fff !important; }

.mora-topbar-btn-solid {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #1a1a1a !important;
  background: #fff;
  padding: 4px 14px;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.mora-topbar-btn-solid:hover { background: #e8e5e1; }

/* ===== NAVBAR ===== */
.mora-navbar {
  background: var(--mora) !important;
  padding: 10px 0;
}
.mora-navbar .container { gap: 16px; }

/* Logo */
.mora-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.mora-logo-icon {
  font-size: 26px;
  color: #fff;
  line-height: 1;
}
.logo-text { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -0.5px; line-height: 1.1; }
.logo-sub  { font-size: 9px; color: rgba(255,255,255,0.65); font-weight: 400; letter-spacing: 1.5px; text-transform: lowercase; }

/* Search column: search bar + suggestion tags di bawahnya (seperti Shopee) */
.mora-search-col {
  flex-direction: column;
  flex-grow: 1;
  gap: 5px;
}

/* Search bar – persis Shopee: input putih + tombol oranye terpisah */
.mora-search {
  height: 40px;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.55);
}
.mora-search input {
  flex: 1; border: none; outline: none;
  padding: 0 14px; font-size: 14px;
  color: #333; background: #fff; min-width: 0;
}
.mora-search input::placeholder { color: #bbb; font-size: 13px; }
.mora-search button {
  width: 64px; height: 40px;
  background: #1E4A2E;
  color: #fff; border: none; font-size: 18px;
  cursor: pointer; transition: background 0.2s;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mora-search button:hover { background: #1e3420; }

/* Search suggestion tags di dalam navbar (baris kedua di bawah search bar) */
.mora-search-tags-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 0 2px;
}
.mora-search-tags-inner a {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.mora-search-tags-inner a:hover { color: #fff; }
.mora-search-tags-inner .sep {
  color: rgba(255,255,255,0.35);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Cart button – seperti Shopee: hanya icon besar */
.mora-cart-btn {
  background: transparent; border: none;
  color: #fff; font-size: 26px;
  cursor: pointer; position: relative;
  padding: 4px 8px;
  transition: opacity 0.15s;
  display: flex; align-items: center;
}
.mora-cart-btn:hover { opacity: 0.8; }

/* Backward compat */
.mora-icon-btn {
  width: 40px; height: 40px; border-radius: 2px;
  background: transparent; border: none;
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: var(--transition);
}
.mora-icon-btn:hover { background: rgba(0,0,0,0.1); }

.cart-badge {
  position: absolute; top: 0; right: 0;
  background: #fff; color: var(--mora);
  font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

.mora-toggler {
  border: none !important; background: transparent !important;
  color: #fff !important; font-size: 26px;
  padding: 4px 6px; box-shadow: none !important;
}
.mora-nav-link {
  color: rgba(255,255,255,0.9) !important;
  font-size: 14px; font-weight: 500;
  padding: 8px 12px !important; border-radius: 4px;
  transition: var(--transition);
}
.mora-nav-link:hover { color: #fff !important; background: rgba(0,0,0,0.1) !important; }

/* Search suggestion tags (bar lama di luar navbar – disembunyikan) */
.mora-search-tags {
  display: none;
}
.mora-search-tags a {
  font-size: 12px; color: rgba(255,255,255,0.85);
  text-decoration: none; transition: color 0.15s;
}
.mora-search-tags a:hover { color: #fff; }
.mora-search-tags .sep { color: rgba(255,255,255,0.3); margin: 0 10px; }

/* ===== HERO – seperti Shopee: ada gap kecil antara search tags dan hero ===== */
#home {
  background: none;
  margin: 0;
  padding: 0;
  padding-top: 10px;
}
#main-content {
  margin-top: 0 !important;
  padding-top: 0;
}

/* ===== HERO SPLIT LAYOUT – seperti Shopee ===== */
.mora-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mora-hero-grid {
    grid-template-columns: 2fr 1fr;
    height: 300px;
    gap: 0;
  }
}

.mora-hero-main {
  height: 240px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .mora-hero-main { height: 300px; }
}

.mora-hero-slide {
  height: 100%;
  width: 100%;
  padding: 20px 0;
}
.mora-hero-title {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.mora-hero-desc { font-size: 12px; opacity: 0.9; margin-bottom: 12px; line-height: 1.5; }
.mora-hero-tag {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  margin-bottom: 8px;
}

.mora-btn-white {
  background: #fff; color: var(--mora);
  font-weight: 700; padding: 9px 18px;
  border-radius: 2px; font-size: 13px;
  text-decoration: none; display: inline-block;
  transition: var(--transition);
}
.mora-btn-white:hover { background: rgba(255,255,255,0.9); color: var(--mora-dark); }
.mora-btn-outline-white {
  border: 1.5px solid rgba(255,255,255,0.8);
  color: #fff; font-weight: 600;
  padding: 8px 16px; border-radius: 2px;
  font-size: 13px; text-decoration: none; display: inline-block;
  transition: var(--transition);
}
.mora-btn-outline-white:hover { background: rgba(255,255,255,0.15); }

/* Hero bottle visual */
.mora-hero-bottle-wrap {
  position: relative;
  width: 180px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.mora-hero-img-wrap {
  position: relative;
  width: 300px; height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.mora-hero-glow {
  position: absolute; inset: 20px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  filter: blur(32px);
}
.mora-hero-product-img {
  position: relative; z-index: 2;
  width: 280px; height: 260px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
  animation: heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.mora-bottle-shape {
  width: 76px; height: 160px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
  border-radius: 38px 38px 22px 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), inset 0 2px 6px rgba(255,255,255,0.4);
  position: relative; overflow: hidden; z-index: 2;
}
.mora-bottle-shape::before {
  content: ''; position: absolute; top: 0; left: 25%; width: 16%; height: 100%;
  background: rgba(255,255,255,0.2); border-radius: 8px;
}
.mora-bottle-shape span { font-size: 11px; font-weight: 800; color: var(--mora); text-align: center; line-height: 1.4; letter-spacing: 1px; }
.mora-bottle-shape small { font-size: 9px; font-weight: 400; opacity: 0.8; }

.mora-carousel-arrow {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(4px);
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0;
}
@media(max-width:767px) {
  .mora-carousel-arrow { display:none !important; }
}
.mora-indicators { bottom: 10px; }
.mora-indicators button {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.5) !important;
  border: none !important;
}
.mora-indicators button.active {
  width: 20px !important; border-radius: 3px !important;
  background: #fff !important;
}

/* Side banners */
.mora-hero-side { gap: 2px; }
.mora-side-banner {
  flex: 1; display: flex; align-items: stretch;
  text-decoration: none; overflow: hidden;
  position: relative; cursor: pointer;
  transition: opacity 0.2s;
}
.mora-side-banner:hover { opacity: 0.92; }
.mora-side-banner-content {
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: center;
  flex: 1;
}
.mora-side-tag {
  font-size: 10px; color: rgba(255,255,255,0.8);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.mora-side-title {
  font-size: 16px; font-weight: 900; color: #fff;
  line-height: 1.2; margin-bottom: 4px;
}
.mora-side-sub {
  font-size: 11px; color: rgba(255,255,255,0.8);
  font-weight: 600; letter-spacing: 0.3px;
}
.mora-side-deco {
  position: absolute; right: -16px; bottom: -16px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

/* ===== Featured Products Highlight ===== */
.fph-header { max-width:1200px; margin:0 auto 24px; }
.fph-title { font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:800; color:#111; margin:0; }
.fph-footer { max-width:1200px; margin:28px auto 0; text-align:center; }
.fph-view-all { display:inline-block; padding:13px 48px; border:1.5px solid #111; color:#111; font-size:13px; font-weight:600; text-decoration:none; letter-spacing:.5px; transition:background .2s,color .2s; }
.fph-view-all:hover { background:#111; color:#fff; }
.fph-section {
  background:#fff;
  padding:48px 20px 28px;
  width:100vw;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
.fph-inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.fph-card {
  display:flex;
  flex-direction:column;
}
.fph-img-wrap {
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f5f3f0;
  text-decoration:none;
  margin-bottom:14px;
}
.fph-img {
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.fph-card:hover .fph-img { transform:scale(1.04); }
.fph-img-placeholder {
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;color:#ccc;
}
.fph-badge-off {
  position:absolute;top:14px;right:14px;
  background:#fff;
  font-size:12px;font-weight:600;color:#333;
  padding:4px 10px;border-radius:3px;
  z-index:2;
}
.fph-badge-sale {
  position:absolute;bottom:14px;left:14px;
  background:#1E4A2E;color:#fff;
  font-size:12px;font-weight:600;
  padding:5px 14px;border-radius:20px;
  z-index:2;
}
.fph-info { flex:1; padding: 14px 16px 12px; }
.fph-name {
  font-size:14px;font-weight:700;
  color:#111;line-height:1.3;
  margin-bottom:4px;
}
.fph-sub {
  font-size:13px;color:#999;
  font-style:italic;margin-bottom:8px;
}
.fph-price { display:flex;gap:8px;align-items:center; }
.fph-price-old { font-size:13px;color:#bbb;text-decoration:line-through; }
.fph-price-new { font-size:14px;font-weight:700;color:#111; }
.fph-btn {
  display:block;
  text-align:center;
  padding:13px;
  background:#e8e5e1;
  color:#111;
  font-size:13px;font-weight:600;
  text-decoration:none;
  border-radius:0;
  transition:background .2s;
  margin-top:auto;
  border-top: 1px solid #e0ddd9;
}
.fph-btn:hover { background:#d8d4cf;color:#111; }
@media(max-width:900px){
  .fph-inner { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:540px){
  .fph-inner { grid-template-columns:1fr 1fr;gap:12px; }
  .fph-section { padding:40px 12px; }
}

/* ===== Brand Story Section ===== */
.mbs-section {
  background:#fff;
  padding:20px 20px 40px;
  width:100vw;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
.mbs-inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:55% 1fr;
  gap:80px;
  align-items:center;
}
.mbs-img-col { position:relative; }
.mbs-img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:0;
}
.mbs-img-placeholder {
  width:100%;
  aspect-ratio:3/4;
  border-radius:20px;
  background:#f0f0f0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mbs-eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#888;
  margin-bottom:16px;
}
.mbs-heading {
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:800;
  line-height:1.15;
  color:#111;
  margin-bottom:20px;
}
.mbs-body p {
  font-size:15px;
  color:#555;
  line-height:1.75;
  margin-bottom:14px;
}
.mbs-body p:last-child { margin-bottom:0; }
.mbs-cta {
  display:inline-block;
  margin-top:28px;
  font-size:14px;
  font-weight:600;
  color:#111;
  text-decoration:none;
  border-bottom:1.5px solid #111;
  padding-bottom:2px;
  transition:opacity .2s;
}
.mbs-cta:hover { opacity:.6; color:#111; }
@media(max-width:768px) {
  .mbs-inner { grid-template-columns:1fr; gap:32px; }
  .mbs-img { aspect-ratio:4/3; }
  .mbs-section { padding:48px 16px; }
}

/* Full-width white breakout dari #main-content constraint – seperti Shopee */
.mora-full-white {
  position: relative;
}
.mora-full-white::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  z-index: 0;
}
.mora-full-white > .container {
  position: relative;
  z-index: 1;
}

/* ===== SERVICE ICONS – Shopee promo icons ===== */
.mora-service-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
@media (min-width: 768px) {
  .mora-service-row { grid-template-columns: repeat(10, 1fr); }
}
.mora-service-item {
  text-align: center; padding: 12px 4px 8px;
  cursor: pointer; transition: background 0.15s;
  text-decoration: none; border-radius: 4px;
}
.mora-service-item:hover { background: #fafafa; }
.mora-service-icon {
  width: 60px; height: 60px; border-radius: 12px;
  background: #fff;
  border: 1px solid #ebebeb;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px; font-size: 28px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mora-service-label { font-size: 11px; color: #333; line-height: 1.3; font-weight: 400; }

/* ===== SECTION HEADER ===== */
.mora-section-tag {
  display: inline-block; background: rgba(44, 74, 46,0.1);
  color: var(--mora); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 20px;
}

/* ===== FLASH SALE – Shopee style ===== */
/* Header row */
.mora-fs-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
}
.mora-fs-title {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.mora-fs-bolt { font-size: 20px; line-height: 1; }
.mora-fs-flash {
  font-size: 20px; font-weight: 900; color: var(--mora);
  letter-spacing: -0.5px; line-height: 1;
}
.mora-fs-sale {
  font-size: 20px; font-weight: 900; color: #1a1a1a;
  letter-spacing: -0.5px; line-height: 1;
}
/* Countdown */
.mora-fs-countdown { display: flex; align-items: center; gap: 3px; }
.mora-fs-timer-block {
  background: #1a1a1a; color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
  min-width: 30px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mora-fs-colon { color: #1a1a1a; font-weight: 700; font-size: 14px; }
.mora-fs-see-all {
  margin-left: auto; color: var(--mora); font-size: 13px;
  font-weight: 600; text-decoration: none; flex-shrink: 0;
  display: flex; align-items: center; gap: 2px;
}
.mora-fs-see-all:hover { text-decoration: underline; }
/* Slider container */
.mora-fs-slider-wrap {
  position: relative; overflow: hidden;
}
.mora-fs-track {
  display: flex; gap: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
/* Arrow buttons */
.mora-fs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 32px; height: 64px;
  background: rgba(0,0,0,0.15); border: none;
  color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.mora-fs-arrow:hover { background: rgba(0,0,0,0.35); }
.mora-fs-prev { left: 0; border-radius: 0 4px 4px 0; }
.mora-fs-next { right: 0; border-radius: 4px 0 0 4px; }
/* Card */
.mora-fs-card {
  flex: 0 0 180px; min-width: 180px;
  border-right: 1px solid #f0f0f0;
  cursor: pointer; position: relative;
  transition: opacity 0.15s;
  background: #fff;
}
.mora-fs-card:last-child { border-right: none; }
.mora-fs-card:hover { opacity: 0.9; }
/* Discount badge */
.mora-fs-discount {
  position: absolute; top: 6px; right: 6px;
  background: var(--mora); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 2px; z-index: 2;
  display: flex; align-items: center; gap: 1px;
}
.mora-fs-bolt-sm { font-size: 10px; }
/* Product image */
.mora-fs-img {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.mora-fs-bottle {
  width: 32px; height: 78px;
  border-radius: 16px 16px 10px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
/* Info area */
.mora-fs-info { padding: 8px 10px 12px; }
.mora-fs-price {
  font-size: 15px; font-weight: 700; color: var(--mora);
  margin-bottom: 6px;
}
/* Progress */
.mora-progress { height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden; }
.mora-progress-bar { height: 100%; background: var(--mora); border-radius: 2px; }
/* Stok terbatas button */
.mora-fs-stok {
  width: 100%; padding: 5px 0; text-align: center;
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 2px; letter-spacing: 0.3px;
}
@media (max-width: 767px) {
  .mora-fs-card { flex: 0 0 140px; min-width: 140px; }
  .mora-fs-flash, .mora-fs-sale { font-size: 16px; }
}

/* ===== CATEGORIES – Shopee: scroll row, kotak putih ===== */
/* Grid dengan border 1px antar cell – persis seperti Shopee */
.mora-cat-scroll {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #e8e8e8;
  gap: 1px;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
@media (min-width: 768px) {
  .mora-cat-scroll { grid-template-columns: repeat(10, 1fr); }
}

.mora-cat-item {
  background: #fff;
  cursor: pointer; text-align: center;
  padding: 16px 6px 14px;
  transition: background 0.15s;
}
.mora-cat-item:hover { background: #fafafa; }

.mora-cat-thumb {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; overflow: hidden;
  margin: 0 auto 10px;
}
.mora-cat-label { font-size: 12px; font-weight: 400; color: #333; line-height: 1.3; word-break: break-word; }

/* ===== BANNER ===== */
.mora-banner-card {
  padding: 20px; border-radius: 4px;
  transition: var(--transition); position: relative; overflow: hidden;
}
.mora-banner-card:hover { opacity: 0.94; }
.mora-btn-white-sm {
  display: inline-block; background: #fff; color: var(--mora);
  font-size: 11px; font-weight: 700; padding: 5px 12px;
  border-radius: 2px; text-decoration: none; transition: var(--transition);
}
.mora-btn-white-sm:hover { background: var(--mora-secondary); color: #fff; }

/* ===== PRODUCTS – Shopee minimal card ===== */
.mora-filter-btn {
  padding: 4px 12px; border-radius: 2px;
  font-size: 12px; font-weight: 500; color: #555;
  background: #fff; border: 1px solid #e8e8e8;
  cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.mora-filter-btn:hover { border-color: var(--mora); color: var(--mora); }
.mora-filter-btn.active { background: #eef3ec; color: var(--mora); border-color: var(--mora); }

.mora-product-card {
  background: #fff; border-radius: 4px;
  overflow: hidden; border: none;
  box-shadow: var(--mora-shadow);
  cursor: pointer; transition: box-shadow 0.2s, transform 0.2s;
}
.mora-product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }

.mora-badge-product {
  position: absolute; top: 4px; left: 4px;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 2px; z-index: 2;
}
.mora-badge-sale { background: var(--mora); color: #fff; }
.mora-badge-new  { background: #27ae60; color: #fff; }
.mora-badge-best { background: #f39c12; color: #fff; }

.mora-bottle-wrap { height: 96px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.mora-bottle {
  width: 38px; height: 92px;
  border-radius: 19px 19px 11px 11px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.25);
  position: relative; overflow: hidden;
}
.mora-bottle::after { content: ''; position: absolute; top: 0; left: 20%; width: 12%; height: 100%; background: rgba(255,255,255,0.2); border-radius: 6px; }

.mora-wishlist-btn {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; background: rgba(255,255,255,0.9);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #bbb;
  opacity: 0; transition: var(--transition); cursor: pointer;
}
.mora-product-card:hover .mora-wishlist-btn { opacity: 1; }
.mora-wishlist-btn:hover { color: var(--mora); }

.mora-product-body { padding: 10px; }
.mora-product-name {
  font-size: 13px; font-weight: 400; line-height: 1.4; color: #333;
  margin-bottom: 4px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 36px;
}
.mora-stars { color: #f39c12; font-size: 11px; }
.mora-price-new { font-size: 14px; font-weight: 700; color: var(--mora); }
.mora-price-old { font-size: 11px; color: #999; text-decoration: line-through; }

.mora-add-cart-btn {
  background: var(--mora); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 2px;
  border: none; cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.mora-add-cart-btn:hover { background: var(--mora-dark); }

/* ===== WHY MORA ===== */
.mora-why-card { transition: var(--transition); background: #fff; }
.mora-why-card:hover { border-color: var(--mora) !important; box-shadow: var(--mora-shadow-md); transform: translateY(-3px); }

/* ===== ABOUT ===== */
.mora-showcase-bottle {
  border-radius: 18px 18px 8px 8px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.mora-milestones {
  background: rgba(44, 74, 46,0.04);
  border: 1px solid rgba(44, 74, 46,0.1) !important;
}
.mora-btn-primary {
  display: inline-block; background: var(--mora); color: #fff;
  font-weight: 700; font-size: 14px; padding: 10px 24px;
  border-radius: 2px; border: none; text-decoration: none;
  cursor: pointer; transition: var(--transition);
}
.mora-btn-primary:hover { background: var(--mora-dark); color: #fff; }

/* ===== TESTIMONIALS ===== */
.mora-testi-card { background: #fff !important; transition: var(--transition); }
.mora-testi-card:hover { border-color: var(--mora) !important; box-shadow: var(--mora-shadow); }
.mora-testi-featured { border-left: 3px solid var(--mora) !important; }
.mora-verified-badge {
  font-size: 10px; color: #27ae60; font-weight: 600;
  background: rgba(39,174,96,0.1); padding: 2px 8px;
  border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}

/* ===== ARTICLES ===== */
.mora-article-card { transition: var(--transition); }
.mora-article-card:hover { transform: translateY(-3px); box-shadow: var(--mora-shadow-md); }
.mora-article-tag {
  background: rgba(255,255,255,0.92); color: var(--mora);
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.mora-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mora-btn-outline-primary {
  display: inline-block; border: 1.5px solid var(--mora); color: var(--mora);
  font-size: 14px; font-weight: 600; padding: 9px 24px;
  border-radius: 2px; text-decoration: none; transition: var(--transition);
}
.mora-btn-outline-primary:hover { background: var(--mora); color: #fff; }

/* ===== CTA ===== */
.mora-btn-wa {
  display: inline-flex; align-items: center;
  background: #25D366; color: #fff;
  font-size: 14px; font-weight: 600;
  border-radius: 2px; text-decoration: none; transition: var(--transition);
}
.mora-btn-wa:hover { background: #128C7E; color: #fff; }

/* ===== CONTACT ===== */
.mora-input {
  border: 1px solid #e8e8e8 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  transition: var(--transition) !important;
}
.mora-input:focus { border-color: var(--mora) !important; box-shadow: 0 0 0 2px rgba(44, 74, 46,0.1) !important; }
.mora-social-btn {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 20px;
  text-decoration: none; transition: var(--transition);
}
.mora-social-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.mora-instagram { background: linear-gradient(135deg,#E1306C,#833AB4); color: #fff !important; }
.mora-tiktok    { background: #1a1a1a; color: #fff !important; }
.mora-shopee    { background: var(--mora); color: #fff !important; }

/* ===== PAGE HERO (inner pages) ===== */
.page-hero {
  background: #111;
  padding: 40px 0 36px;
  color: #fff;
  margin-top: 0;
  border-radius: 0;
}
.page-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; letter-spacing: .5px; }
.page-hero p  { font-size: .9rem; opacity: .6; max-width: 560px; margin: 0; letter-spacing: .3px; }

/* ===== FOOTER ===== */
.mora-footer { background: #1a1a1a; padding: 56px 0 0; }
.mora-footer-links a { display: block; color: rgba(255,255,255,0.6); font-size: 13px; margin-bottom: 8px; text-decoration: none; transition: var(--transition); }
.mora-footer-links a:hover { color: var(--mora); padding-left: 4px; }
.mora-cert-badge {
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 20px;
  color: rgba(255,255,255,0.7);
}
.mora-pay-icon {
  font-size: 10px; font-weight: 700; padding: 4px 10px;
  background: rgba(255,255,255,0.1); border-radius: 4px;
  color: rgba(255,255,255,0.8);
}

/* ===== BOTTOM NAV ===== */
.mora-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e8e8e8;
  height: 56px; display: flex; z-index: 999;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.mora-bottom-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; color: #aaa; font-size: 10px; font-weight: 500;
  text-decoration: none; transition: var(--transition);
}
.mora-bottom-item i { font-size: 20px; }
.mora-bottom-item.active, .mora-bottom-item:active { color: var(--mora); }

@media (max-width: 767.98px) { body { padding-bottom: 56px; } }

/* ===== CART OFFCANVAS ===== */
.mora-cart-offcanvas { width: 380px !important; }
@media (max-width: 575.98px) { .mora-cart-offcanvas { width: 100% !important; } }

/* ===== MODAL ===== */
.mora-modal-content { border-radius: 8px; border: none; }

/* ===== TOAST ===== */
.mora-toast { background: var(--mora) !important; border-radius: 8px !important; }

/* ===== SCROLL ANIMATION ===== */
.mora-fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.mora-fade-up.visible { opacity: 1; transform: translateY(0); }

/* ===== SPINNER ===== */
.spinner-border.text-mora { color: var(--mora) !important; }

/* ===== UTILITY ===== */
.mora-section { background: var(--mora-bg); }

/* ===== TOKO PAGE ===== */
.mora-section-heading {
  font-size: 14px; font-weight: 700; color: #333;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 14px;
}
/* ===== PRODUK TERLARIS – Shopee style ===== */
.mora-terlaris-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
}
.mora-terlaris-title {
  font-size: 16px; font-weight: 700; color: var(--mora);
  letter-spacing: 0.3px; text-transform: uppercase;
}
.mora-terlaris-see-all {
  color: var(--mora); font-size: 13px; font-weight: 600;
  text-decoration: none; display: flex; align-items: center; gap: 2px;
}
.mora-terlaris-see-all:hover { text-decoration: underline; }
/* Slider */
.mora-terlaris-wrap { position: relative; overflow: hidden; }
.mora-terlaris-track {
  display: flex; gap: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
/* Arrow */
.mora-tl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 32px; height: 64px;
  background: rgba(0,0,0,0.15); border: none;
  color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.mora-tl-arrow:hover { background: rgba(0,0,0,0.35); }
.mora-tl-prev { left: 0; border-radius: 0 4px 4px 0; }
.mora-tl-next { right: 0; border-radius: 4px 0 0 4px; }
/* Card */
.mora-tl-card {
  flex: 0 0 220px; min-width: 220px;
  border-right: 1px solid #f0f0f0;
  cursor: pointer; background: #fff;
  transition: opacity 0.15s;
}
.mora-tl-card:last-child { border-right: none; }
.mora-tl-card:hover { opacity: 0.9; }
/* Image */
.mora-tl-img {
  width: 100%; aspect-ratio: 1;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* TOP badge triangle */
.mora-tl-top-badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 0; height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #1E4A2E transparent transparent transparent;
}
.mora-tl-top-label {
  position: absolute; top: -52px; left: 4px;
  color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px; transform: rotate(0deg);
}
/* Bottle */
.mora-tl-bottle {
  width: 40px; height: 96px;
  border-radius: 20px 20px 13px 13px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}
/* Sold overlay at bottom of image */
.mora-tl-sold-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.45);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 5px 8px; text-align: center;
}
/* Name */
.mora-tl-name {
  padding: 10px 12px 14px;
  font-size: 13px; color: #333; line-height: 1.4;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
@media (max-width: 767px) {
  .mora-tl-card { flex: 0 0 160px; min-width: 160px; }
}

/* ===== REKOMENDASI SECTION – Shopee style ===== */
/* Header */
.mora-rekomen-header {
  padding: 20px 16px 0; text-align: center;
}
.mora-rekomen-title {
  font-size: 16px; font-weight: 700; color: var(--mora);
  letter-spacing: 1px; margin: 0 0 10px;
  text-transform: uppercase;
}
.mora-rekomen-underline {
  height: 3px; background: var(--mora);
  width: 100%; margin-bottom: 0;
}
/* Filter + sort bar */
.mora-rekomen-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
  flex-wrap: wrap;
}
.mora-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Grid – 6 kolom desktop, 3 mobile */
.mora-rekomen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid #f0f0f0;
}
@media (min-width: 576px) {
  .mora-rekomen-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
  .mora-rekomen-grid { grid-template-columns: repeat(6, 1fr); }
}
.mora-rekomen-item {
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.mora-rekomen-item:nth-child(3n) { border-right: none; }
@media (min-width: 576px) {
  .mora-rekomen-item:nth-child(3n) { border-right: 1px solid #f0f0f0; }
  .mora-rekomen-item:nth-child(4n) { border-right: none; }
}
@media (min-width: 992px) {
  .mora-rekomen-item:nth-child(4n) { border-right: 1px solid #f0f0f0; }
  .mora-rekomen-item:nth-child(6n) { border-right: none; }
}
/* Card */
.mora-rekomen-card {
  cursor: pointer; background: #fff;
  transition: box-shadow 0.18s;
  height: 100%;
}
.mora-rekomen-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.1); z-index: 1; position: relative; }
/* Image area */
.mora-rekomen-img {
  width: 100%; aspect-ratio: 1;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Discount badge (top-right) */
.mora-rekomen-discount {
  position: absolute; top: 0; right: 0;
  background: var(--mora); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 6px; z-index: 2;
}
/* Other badges (top-left) */
.mora-rekomen-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 2px; z-index: 2;
  background: #1E4A2E; color: #fff;
}
.mora-rekomen-badge.mora-badge-new { background: #26aa99; }
/* Bottle inside image */
.mora-rekomen-bottle {
  width: 34px; height: 84px;
  border-radius: 17px 17px 11px 11px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
/* Body */
.mora-rekomen-body { padding: 8px 10px 12px; }
.mora-rekomen-name {
  font-size: 13px; color: #333; line-height: 1.4;
  margin: 0 0 6px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mora-rekomen-price-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 4px; flex-wrap: wrap;
}
.mora-rekomen-price {
  font-size: 15px; font-weight: 700; color: var(--mora);
}
.mora-rekomen-sold { font-size: 11px; color: #999; white-space: nowrap; }

/* ===== PAGE WRAPPER – Shopee: seluruh konten + section bg ikut max-width ===== */
#main-content {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--mora-bg);
}

/* ===== KATEGORI PAGE – Shopee style ===== */
.mora-kat-layout {
  display: flex; gap: 8px; align-items: flex-start;
}
/* Sidebar */
.mora-kat-sidebar {
  flex: 0 0 210px; min-width: 210px;
  display: flex; flex-direction: column; gap: 4px;
}
.mora-kat-box {
  background: #fff;
  padding: 24px 20px;
}
.mora-kat-box-title {
  font-size: 11px; font-weight: 700; color: #aaa;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 16px;
}
.mora-kat-list {
  list-style: none; margin: 0; padding: 0;
}
.mora-kat-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13.5px; color: #555;
  text-decoration: none; transition: color 0.15s;
  border-bottom: 1px solid transparent;
}
.mora-kat-link:hover { color: #111; }
.mora-kat-link.active { color: #111; font-weight: 700; }
.mora-kat-link-icon { font-size: 15px; flex-shrink: 0; opacity: .7; }
/* Price filter */
.mora-kat-price-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.mora-kat-price-input {
  flex: 1; border: 1px solid #e0e0e0;
  padding: 7px 10px; font-size: 12px; outline: none; width: 0;
  font-family: inherit;
}
.mora-kat-price-input:focus { border-color: #1E4A2E; }
.mora-kat-filter-btn {
  width: 100%; display: block; padding: 9px;
  background: #1E4A2E; color: #fff;
  border: none;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  cursor: pointer; font-family: inherit;
  transition: background .2s;
}
.mora-kat-filter-btn:hover { background: #1e3420; }
/* Rating filter */
.mora-kat-rating-list { padding: 0; }
.mora-kat-rating-item {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; margin-bottom: 10px; font-size: 13px; color: #555;
}
.mora-kat-rating-item input { accent-color: #1E4A2E; }
.mora-kat-stars { color: #f39c12; font-size: 13px; letter-spacing: 1px; }
/* Main */
.mora-kat-main { flex: 1; min-width: 0; }
/* Sort bar */
.mora-kat-sortbar {
  display: flex; align-items: center; gap: 4px;
  background: #fff;
  padding: 12px 20px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.mora-kat-sort-btns-row { display:flex; align-items:center; gap:4px; }
@media(max-width:767px) {
  .mora-kat-sortbar { flex-wrap:nowrap; padding:8px 12px; }
  .mora-kat-sort-label { display:none; }
  .mora-kat-sort-btns-row { flex:1; min-width:0; overflow-x:auto; gap:2px; scrollbar-width:none; padding-right:4px; }
  .mora-kat-sort-btns-row::-webkit-scrollbar { display:none; }
  .mora-kat-sort-btn { padding:5px 12px; font-size:12px; white-space:nowrap; flex-shrink:0; }
  .mora-kat-count { display:none !important; }
}
.mora-kat-sort-label { font-size: 12px; color: #aaa; letter-spacing: 1px; text-transform: uppercase; margin-right: 8px; }
.mora-kat-sort-btn {
  padding: 6px 16px; font-size: 13px;
  text-decoration: none; color: #888;
  border: none; background: none;
  transition: color 0.15s;
}
.mora-kat-sort-btn:hover { color: #111; }
.mora-kat-sort-btn.active {
  background: #111; color: #fff; border-radius: 100px;
}
.mora-kat-count { font-size: 12px; color: #aaa; margin-left: auto; }
/* Product grid – 5 columns */
.mora-kat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background: transparent;
}
@media (min-width: 576px) {
  .mora-kat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .mora-kat-grid { grid-template-columns: repeat(4, 1fr); }
}
.mora-kat-card {
  background: #fff; cursor: pointer;
  transition: box-shadow 0.18s; position: relative;
  margin: 1px;
}
.mora-kat-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.12); z-index: 2; }
/* Image */
.mora-kat-img {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.mora-kat-badge-disc {
  position: absolute; top: 0; right: 0;
  background: var(--mora); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px;
}
.mora-kat-badge-new {
  position: absolute; top: 6px; left: 6px;
  background: #26aa99; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 2px;
}
.mora-kat-bottle {
  width: 38px; height: 92px;
  border-radius: 19px 19px 12px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
/* Info */
.mora-kat-info { padding: 8px 10px 12px; }
.mora-kat-name {
  font-size: 13px; color: #333; line-height: 1.4;
  margin: 0 0 6px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mora-kat-price-row { margin-bottom: 4px; }
.mora-kat-price { font-size: 15px; font-weight: 700; color: var(--mora); }
.mora-kat-meta {
  display: flex; align-items: center;
  justify-content: space-between; gap: 4px;
}
.mora-kat-stars-txt { font-size: 11px; color: #f39c12; }
.mora-kat-sold { font-size: 11px; color: #999; }
.mora-kat-empty {
  background: #fff; border-radius: 3px; text-align: center;
  padding: 64px 0; color: #999; font-size: 15px;
}
@media (max-width: 767px) {
  .mora-kat-layout { flex-direction: column; }
  .mora-kat-sidebar { flex: none; width: 100%; }
}

/* ===== PRODUCT DETAIL PAGE ===== */
.mora-det-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #999; margin-bottom: 12px;
  flex-wrap: wrap;
}
.mora-det-breadcrumb a { color: #555; text-decoration: none; }
.mora-det-breadcrumb a:hover { color: var(--mora); text-decoration: underline; }
.mora-det-breadcrumb i { font-size: 10px; }
.mora-det-card {
  background: #fff; border-radius: 3px; padding: 24px;
}
.mora-det-layout {
  display: flex; gap: 32px; align-items: flex-start;
}
/* Images */
.mora-det-images { flex: 0 0 380px; }
.mora-det-main-img {
  width: 100%; aspect-ratio: 1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.mora-det-bottle {
  width: 72px; height: 174px;
  border-radius: 36px 36px 22px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.mora-det-thumbs {
  display: flex; gap: 8px;
}
.mora-det-thumb {
  width: 72px; height: 72px; border-radius: 3px;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s;
}
.mora-det-thumb.active { border-color: var(--mora); }
/* Info */
.mora-det-info { flex: 1; min-width: 0; }
.mora-det-name {
  font-size: 18px; font-weight: 600; color: #333;
  line-height: 1.4; margin: 0 0 12px;
}
.mora-det-stats {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #555; margin-bottom: 16px;
  flex-wrap: wrap;
}
.mora-det-rating-val { font-size: 14px; font-weight: 700; color: var(--mora); border-bottom: 1px solid var(--mora); }
.mora-det-stars { color: #f39c12; font-size: 13px; letter-spacing: 1px; }
.mora-det-sep { color: #e0e0e0; }
.mora-det-stat-txt { color: #555; }
/* Flash sale banner */
.mora-det-fs-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #1a1a1a, #333);
  padding: 10px 16px; border-radius: 3px 3px 0 0;
}
.mora-det-fs-label { display: flex; align-items: center; gap: 4px; }
.mora-det-fs-bolt { font-size: 16px; }
.mora-det-fs-text { font-size: 16px; font-weight: 900; color: var(--mora); letter-spacing: 1px; }
.mora-det-fs-timer { display: flex; align-items: center; gap: 4px; }
.mora-det-timer-block {
  background: #fff; color: #1a1a1a;
  font-size: 14px; font-weight: 800;
  padding: 3px 8px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.mora-det-timer-colon { color: #fff; font-weight: 700; }
/* Price boxes */
.mora-det-price-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; background: #eef3ec;
}
.mora-det-price-fs { background: #eef3ec; border-radius: 0 0 3px 3px; margin-bottom: 16px; }
.mora-det-price-main { font-size: 28px; font-weight: 700; color: var(--mora); }
.mora-det-price-orig { font-size: 14px; color: #999; text-decoration: line-through; }
.mora-det-discount-pill {
  background: var(--mora); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 2px;
}
.mora-det-divider { height: 1px; background: #f5f5f5; margin: 14px 0; }
/* Rows */
.mora-det-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px; font-size: 13px;
}
.mora-det-row-align-top { align-items: flex-start; }
.mora-det-row-label { flex: 0 0 100px; color: #999; }
.mora-det-row-val { color: #333; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Variants */
.mora-det-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.mora-det-variant {
  padding: 6px 14px; border: 1px solid #e0e0e0;
  border-radius: 2px; background: #fff;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.mora-det-variant.active { border-color: var(--mora); color: var(--mora); background: #eef3ec; }
/* Qty */
.mora-det-qty {
  display: flex; align-items: stretch; border: 1px solid #e0e0e0;
  border-radius: 2px; overflow: hidden;
}
.mora-det-qty-btn {
  width: 34px; background: #f5f5f5; border: none;
  font-size: 18px; cursor: pointer; color: #555;
  transition: background 0.15s; line-height: 1;
}
.mora-det-qty-btn:hover { background: #eee; }
.mora-det-qty-input {
  width: 52px; text-align: center; border: none;
  outline: none; font-size: 14px; font-weight: 600;
  border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;
}
/* Buttons */
.mora-det-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.mora-det-btn-cart {
  flex: 1; padding: 14px; border: 2px solid var(--mora);
  background: #eef3ec; color: var(--mora);
  font-size: 15px; font-weight: 700; border-radius: 2px;
  cursor: pointer; transition: all 0.18s; min-width: 180px;
}
.mora-det-btn-cart:hover { background: #dfe9db; }
.mora-det-btn-buy {
  flex: 1; padding: 14px; background: var(--mora);
  color: #fff; font-size: 15px; font-weight: 700;
  border: none; border-radius: 2px; cursor: pointer;
  transition: background 0.18s; min-width: 180px;
}
.mora-det-btn-buy:hover { background: var(--mora-dark); }
/* Description */
.mora-det-section-title {
  font-size: 15px; font-weight: 700; color: #333;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.mora-det-desc { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 16px; }
.mora-det-benefits-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; }
.mora-det-benefits { list-style: none; padding: 0; margin: 0; }
.mora-det-benefits li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #555; padding: 5px 0;
}
/* Responsive */
@media (max-width: 767px) {
  .mora-det-layout { flex-direction: column; gap: 20px; }
  .mora-det-images { flex: none; width: 100%; }
  .mora-det-price-main { font-size: 22px; }
  .mora-det-btns { flex-direction: column; }
}

/* ===== DETAIL PAGE – bottom layout ===== */
.mora-det-bottom-layout {
  display: flex; gap: 12px; align-items: flex-start;
}
.mora-det-bottom-main { flex: 1; min-width: 0; }
.mora-det-bottom-side { flex: 0 0 220px; min-width: 220px; }

/* Related sidebar cards */
.mora-related-card {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none; transition: background 0.15s;
}
.mora-related-card:hover { background: #fafafa; }
.mora-related-card:last-child { border-bottom: none; }
.mora-related-img {
  flex: 0 0 72px; height: 72px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.mora-related-info { flex: 1; min-width: 0; }
.mora-related-name {
  font-size: 12px; color: #333; line-height: 1.4; margin: 0 0 4px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mora-related-price { font-size: 14px; font-weight: 700; color: var(--mora); margin-bottom: 2px; }

/* Ulasan summary */
.mora-ulasan-summary {
  display: flex; gap: 32px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid #f5f5f5; margin-bottom: 16px;
}
.mora-ulasan-score { text-align: center; flex-shrink: 0; }
.mora-ulasan-big { font-size: 48px; font-weight: 900; color: var(--mora); line-height: 1; }
.mora-ulasan-stars-big { font-size: 20px; margin: 4px 0; letter-spacing: 2px; color: #f39c12; }
.mora-ulasan-bars { flex: 1; }
.mora-ulasan-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.mora-ulasan-bar-label { font-size: 12px; color: #555; width: 28px; flex-shrink: 0; }
.mora-ulasan-bar-bg {
  flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;
}
.mora-ulasan-bar-fill { height: 100%; background: #f39c12; border-radius: 4px; }
.mora-ulasan-bar-pct { font-size: 11px; color: #999; width: 32px; text-align: right; }

/* Review cards */
.mora-review-card {
  padding: 16px 0; border-bottom: 1px solid #f5f5f5;
}
.mora-review-card:last-child { border-bottom: none; }
.mora-review-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.mora-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mora); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.mora-review-name { font-size: 13px; font-weight: 600; color: #333; }
.mora-review-stars { font-size: 12px; }
.mora-review-date { font-size: 12px; color: #999; white-space: nowrap; }
.mora-review-varian {
  font-size: 11px; color: #999; background: #f5f5f5;
  display: inline-block; padding: 2px 8px; border-radius: 2px; margin-bottom: 6px;
}
.mora-review-text { font-size: 13px; color: #555; line-height: 1.6; }

@media (max-width: 767px) {
  .mora-det-bottom-layout { flex-direction: column; }
  .mora-det-bottom-side { flex: none; width: 100%; }
  .mora-ulasan-summary { flex-direction: column; gap: 16px; }
}

/* ===== AUTH NAV BUTTONS ===== */
.mora-auth-nav-btn {
  font-size: 13px; font-weight: 600; padding: 6px 16px;
  border-radius: 3px; text-decoration: none; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.mora-auth-nav-outline {
  color: #fff; border: 1px solid rgba(255,255,255,.8); background: transparent;
}
.mora-auth-nav-outline:hover { background: rgba(255,255,255,.15); color: #fff; }
.mora-auth-nav-solid {
  color: #1E4A2E; background: #fff; border: 1px solid #fff;
}
.mora-auth-nav-solid:hover { background: #f5f5f5; border-color: #f5f5f5; color: #1E4A2E; }

/* ===== USER DROPDOWN ===== */
.mora-user-dropdown { position: relative; }
.mora-user-btn {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
  transition: background .15s;
}
.mora-user-btn:hover { background: rgba(255,255,255,.15); }
.mora-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.3); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mora-user-name { color: #fff; font-size: 13px; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mora-user-chevron { color: rgba(255,255,255,.8); font-size: 11px; transition: transform .2s; }
.mora-user-chevron.open { transform: rotate(180deg); }

.mora-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  min-width: 220px; z-index: 2000;
  display: none; overflow: hidden;
}
.mora-user-menu.show { display: block; }

.mora-user-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: #fafafa;
}
.mora-user-menu-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1E4A2E; color: #fff;
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mora-user-menu-name { font-size: 14px; font-weight: 600; color: #222; }
.mora-user-menu-email { font-size: 11.5px; color: #999; margin-top: 1px; }

.mora-user-menu-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }

.mora-user-menu-item {
  display: flex; align-items: center;
  padding: 10px 16px; font-size: 13px; color: #444;
  text-decoration: none; transition: background .15s;
  width: 100%; background: none; border: none; cursor: pointer;
  text-align: left; font-family: 'Inter', sans-serif;
}
.mora-user-menu-item:hover { background: #fafafa; color: #222; }
.mora-user-logout { color: #1E4A2E !important; }
.mora-user-logout:hover { background: #eef3ec !important; }

/* ===== TOPBAR USER DROPDOWN ===== */
.mora-topbar-user { position: relative; display: inline-flex; align-items: center; }
.mora-topbar-user-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.85); font-size: 12px; display: flex; align-items: center; gap: 5px;
  font-family: inherit;
}
.mora-topbar-user-btn:hover { color: #fff; }
.mora-topbar-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.3); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mora-topbar-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 10px);
  background: #fff; border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  min-width: 220px; z-index: 3000; overflow: hidden;
}
.mora-topbar-dropdown.show { display: block; }
.mora-topbar-dd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fafafa;
}
.mora-topbar-dd-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1E4A2E; color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mora-topbar-dd-name { font-size: 13px; font-weight: 600; color: #222; }
.mora-topbar-dd-email { font-size: 11px; color: #999; margin-top: 1px; }
.mora-topbar-dd-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
.mora-topbar-dd-item {
  display: flex; align-items: center;
  padding: 10px 16px; font-size: 13px; color: #444 !important;
  text-decoration: none !important; transition: background .15s;
  width: 100%; background: none; border: none; cursor: pointer;
  text-align: left; font-family: 'Inter', sans-serif;
}
.mora-topbar-dd-item:hover { background: #fafafa; color: #222 !important; }
.mora-topbar-dd-logout { color: #1E4A2E !important; }
.mora-topbar-dd-logout:hover { background: #eef3ec !important; }

/* ===== NOTIFICATION DROPDOWN ===== */
.mora-notif-wrap { position: relative; display: inline-flex; align-items: center; }

.mora-notif-trigger {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.85); font-size: 12px;
  display: flex; align-items: center; gap: 6px;
  font-family: inherit; position: relative; white-space: nowrap;
}
.mora-notif-trigger:hover { color: #fff; }

.mora-notif-dot {
  min-width: 18px; height: 18px; border-radius: 100px;
  background: #1E4A2E; color: #fff;
  font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  padding: 0 5px; line-height: 1;
}

.mora-notif-panel {
  display: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 14px);
  width: 400px; background: #fff; border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0,0,0,.18);
  z-index: 4000; overflow: hidden;
}
.mora-notif-panel::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}
.mora-notif-panel.show { display: block; }

.mora-notif-panel-head {
  padding: 14px 16px 10px;
  font-size: 13px; font-weight: 600; color: #222;
  border-bottom: 1px solid #f5f5f5;
}

.mora-notif-list { max-height: 420px; overflow-y: auto; }

.mora-notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid #f9f9f9;
  cursor: pointer; transition: background .15s; text-decoration: none;
}
.mora-notif-item:hover { background: #fafafa; }

.mora-notif-icon {
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

.mora-notif-body { flex: 1; min-width: 0; }
.mora-notif-title {
  font-size: 13px; font-weight: 600; color: #222;
  line-height: 1.4; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mora-notif-desc {
  font-size: 12px; color: #888; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mora-notif-time { font-size: 11px; color: #bbb; margin-top: 4px; }

.mora-notif-loading {
  padding: 32px; text-align: center; color: #ccc; font-size: 20px;
}
@keyframes mora-spin { to { transform: rotate(360deg); } }
.mora-spin { display: inline-block; animation: mora-spin .8s linear infinite; }

.mora-notif-showall {
  display: block; text-align: center;
  padding: 12px; font-size: 13px; color: #1E4A2E;
  text-decoration: none; border-top: 1px solid #f5f5f5;
  font-weight: 500; transition: background .15s;
}
.mora-notif-showall:hover { background: #eef3ec; color: #1E4A2E; }

.mora-notif-empty {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: #bbb;
}

/* ── AKUN SIDEBAR HEAD LINK ── */
.mora-akun-nav-head-link {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #222;
  padding: 8px 0; text-decoration: none; transition: color .15s;
}
.mora-akun-nav-head-link i { font-size: 18px; color: #1E4A2E; }
.mora-akun-nav-head-link:hover { color: #1E4A2E; }
.mora-akun-nav-head-link.active { color: #1E4A2E; }


/* =====================================================
   MORA NAVBAR – OAKYWOOD STYLE
   ===================================================== */

.mora-nav-oak {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
.mno-inner {
  display: flex; align-items: center;
  height: 68px; padding: 0 40px;
  max-width: 1440px; margin: 0 auto;
  position: relative;
}

/* Logo */
.mno-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.mno-logo-icon { font-size:22px; color:#1E4A2E; }
.mno-logo-text { font-size:20px; font-weight:900; color:#111; letter-spacing:-0.5px; line-height:1.1; }
.mno-logo-sub  { font-size:8px; color:#999; letter-spacing:2px; text-transform:lowercase; }

/* Category nav – center */
.mno-catmenu { display:flex; align-items:stretch; list-style:none; margin:0 auto; padding:0; gap:0; height:68px; position:absolute; left:50%; transform:translateX(-50%); }
.mno-cat-item { position:static; display:flex; align-items:stretch; }
.mno-cat-link {
  display:flex; align-items:center; gap:5px;
  padding:0 16px; font-size:14px; font-weight:500; color:#222;
  text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.mno-cat-link:hover,
.mno-cat-item:hover > .mno-cat-link { color:#111; border-bottom-color:#111; }
.mno-chevron { font-size:9px; transition:transform .2s; }
.mno-cat-item:hover .mno-chevron { transform:rotate(180deg); }
.mno-cat-flashsale { color:#1E4A2E !important; font-weight:600; }
.mno-cat-flashsale:hover { color:#c0392b !important; border-bottom-color:#1E4A2E !important; }
.mno-flashsale-badge { font-size:14px; }

/* Mega Menu */
.mno-mega {
  position:absolute;
  top:68px;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:100vw;
  background:#fff;
  border-top:1px solid #eee;
  box-shadow:0 12px 40px rgba(0,0,0,0.1);
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:999;
}
.mno-cat-item:hover .mno-mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.mno-mega-inner {
  display:flex; max-width:1440px; margin:0 auto;
  padding:40px 40px 36px;
  gap:0;
}

/* Left panel – sub-categories */
.mno-mega-left {
  width:280px; flex-shrink:0;
  padding-right:48px;
  display:flex; flex-direction:column; gap:0;
}
.mno-mega-cat-label {
  font-size:12px; color:#999; font-weight:500;
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:16px; display:block;
}
.mno-mega-subnav {
  display:flex; flex-direction:column; gap:2px;
  margin-bottom:24px;
}
.mno-mega-sublink {
  font-size:17px; font-weight:700; color:#111;
  text-decoration:none; padding:4px 0;
  line-height:1.35;
  transition:color .12s;
}
.mno-mega-sublink:hover,
.mno-mega-sublink.active { color:#1E4A2E; }

.mno-mega-cta-btn {
  display:inline-block;
  background:#111; color:#fff;
  font-size:13px; font-weight:600;
  padding:11px 22px; border-radius:100px;
  text-decoration:none; white-space:nowrap;
  transition:background .15s;
  align-self:flex-start;
  margin-bottom:12px;
}
.mno-mega-cta-btn:hover { background:#1E4A2E; color:#fff; }

.mno-mega-trust {
  font-size:11.5px; color:#999;
}

/* Right panel – products */
.mno-mega-right {
  flex:1; padding-left:48px;
  border-left:1px solid #f0f0f0;
}
.mno-mega-bestseller-label {
  font-size:12px; color:#999; font-weight:500;
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:20px;
}
/* Panel switching */
.mno-mega-panels-wrap { position:relative; }
.mno-mega-panel { display:none; gap:20px; align-items:flex-start; }
.mno-mega-panel.active {
  display:flex;
  animation:mnoPanelIn .15s ease;
}
@keyframes mnoPanelIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
/* legacy .mno-mega-products still works if used elsewhere */
.mno-mega-products { display:flex; gap:24px; }

/* Card grid — semua produk sejajar horizontal, fill penuh */
.mno-mega-card {
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.mno-mega-card-img {
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius:0; overflow:hidden;
  background:#f5f5f5; margin-bottom:12px;
}
.mno-mega-card-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s ease;
}
.mno-mega-card:hover .mno-mega-card-img img { transform:scale(1.04); }
.mno-mega-card-info { padding:0 2px; }
.mno-mega-card-name {
  font-size:13px; font-weight:600; color:#111;
  line-height:1.35; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mno-mega-card-pricing { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mno-mega-prod {
  flex:1; max-width:260px;
  text-decoration:none; color:inherit;
}
.mno-mega-prod:only-child { max-width:none; flex:0 0 50%; }
.mno-mega-prod-img {
  aspect-ratio:4/3; background:#f5f5f5;
  border-radius:8px; overflow:hidden;
  position:relative; margin-bottom:14px;
}
.mno-mega-prod-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s;
}
.mno-mega-prod:hover .mno-mega-prod-img img { transform:scale(1.04); }
.mno-mega-prod-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:#ccc;
}
.mno-mega-prod-badge {
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:700;
  padding:4px 9px; border-radius:100px;
}
.mno-mega-prod-badge.bestseller { background:#2ecc71; color:#fff; }
.mno-mega-prod-badge.new-arrival { background:#8e44ad; color:#fff; }

.mno-mega-prod-name {
  font-size:15px; font-weight:700; color:#111;
  margin-bottom:4px; line-height:1.3;
}
.mno-mega-prod-desc {
  font-size:12px; color:#777; line-height:1.5;
  margin-bottom:8px;
}
.mno-mega-prod-pricing {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.mno-price-original {
  font-size:12px; color:#aaa;
  text-decoration:line-through;
}
.mno-price-final {
  font-size:14px; font-weight:700; color:#1E4A2E;
}
.mno-price-badge {
  font-size:10px; font-weight:700;
  background:#8e44ad; color:#fff;
  padding:2px 7px; border-radius:100px;
}
.mno-mega-empty {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px; padding:32px; color:#ccc; font-size:13px;
}
.mno-mega-empty i { font-size:28px; }

/* Right Actions */
.mno-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; margin-left:auto; z-index:1; }
.mno-action-btn {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:transparent; border:none;
  color:#222; font-size:18px;
  cursor:pointer; position:relative;
  transition:background .15s, color .15s;
  text-decoration:none;
}
.mno-action-btn:hover { background:#f5f5f5; color:#1E4A2E; }
.mno-user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:#1E4A2E; color:#fff;
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.mno-user-avatar.sm { width:36px; height:36px; font-size:15px; flex-shrink:0; }
.mno-badge {
  position:absolute; top:4px; right:4px;
  background:#1E4A2E; color:#fff;
  font-size:9px; font-weight:800;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
}

/* Search Overlay */
.mno-search-overlay {
  position:fixed; top:0; left:0; right:0;
  background:#fff; padding:0; z-index:1100;
  transform:translateY(-100%); opacity:0;
  transition:transform .25s ease, opacity .25s ease;
  box-shadow:0 4px 24px rgba(0,0,0,0.1);
}
.mno-search-overlay.active { transform:translateY(0); opacity:1; }
.mno-search-overlay-inner { max-width:1440px; margin:0 auto; padding:18px 40px; }
.mno-search-overlay-form {
  display:flex; align-items:center; gap:14px;
  border-bottom:2px solid #111; padding-bottom:10px;
}
.mno-so-icon { font-size:20px; color:#111; flex-shrink:0; }
.mno-search-overlay-form input {
  flex:1; border:none; outline:none;
  font-size:22px; color:#111; background:transparent; font-weight:400;
}
.mno-search-overlay-form input::placeholder { color:#ccc; }
.mno-so-close {
  background:transparent; border:none;
  font-size:18px; color:#888; cursor:pointer;
  padding:6px; border-radius:50%;
  transition:background .15s;
}
.mno-so-close:hover { background:#f5f5f5; color:#111; }
.mno-so-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.mno-so-label { font-size:12px; color:#999; }
.mno-so-tags a {
  font-size:12px; color:#555; background:#f5f5f5;
  padding:4px 12px; border-radius:20px;
  text-decoration:none; transition:background .15s, color .15s;
}
.mno-so-tags a:hover { background:#111; color:#fff; }

/* Backdrop */
.mno-overlay-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.3); z-index:1099;
  opacity:0; visibility:hidden;
  transition:opacity .2s, visibility .2s;
}
.mno-overlay-backdrop.active { opacity:1; visibility:visible; }

/* Mobile */
.mno-mobile-menu { border-top:1px solid #f0f0f0; background:#fff; }
.mno-mobile-search { padding:12px 16px; border-bottom:1px solid #f5f5f5; }
.mno-mobile-search-wrap {
  display:flex; align-items:center;
  background:#f5f5f5; border-radius:8px; padding:8px 14px; gap:10px;
}
.mno-mobile-search-wrap i { color:#888; font-size:15px; }
.mno-mobile-search-wrap input { flex:1; border:none; outline:none; background:transparent; font-size:14px; color:#222; }
.mno-mobile-search-wrap button {
  background:#111; color:#fff; border:none;
  padding:5px 14px; border-radius:100px;
  font-size:13px; font-weight:600; cursor:pointer;
}
.mno-mobile-cats { list-style:none; margin:0; padding:8px 0; }
.mno-mobile-cat-link {
  display:flex; align-items:center; gap:12px;
  padding:13px 20px; text-decoration:none;
  color:#222; font-size:14px; font-weight:500;
  transition:background .12s;
}
.mno-mobile-cat-link:hover { background:#fafafa; }
.mno-mobile-footer { padding:16px 20px; border-top:1px solid #f0f0f0; }
.mno-mobile-user-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:#222; }
.mno-mobile-uname { font-size:14px; font-weight:600; color:#111; }
.mno-mobile-uemail { font-size:12px; color:#888; }
.mno-mobile-btn-outline {
  flex:1; padding:10px 0; text-align:center;
  border:1.5px solid #111; color:#111; border-radius:100px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:background .15s;
}
.mno-mobile-btn-outline:hover { background:#f5f5f5; }
.mno-mobile-btn-fill {
  flex:1; padding:10px 0; text-align:center;
  background:#111; color:#fff; border-radius:100px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:background .15s;
}
.mno-mobile-btn-fill:hover { background:#1E4A2E; }

@media (max-width:991px) { .mno-inner { padding:0 16px; } }

/* ===== Instagram Feed Section ===== */
.igf-section { background:#fff; padding:24px 20px 48px; width:100vw; position:relative; left:50%; transform:translateX(-50%); }
.igf-inner { max-width:1200px; margin:0 auto; }
.igf-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
.igf-title { font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:800; color:#111; margin:0; }
.igf-handle { color:#888; font-weight:500; }
.igf-btn { display:inline-block; padding:10px 28px; border:1.5px solid #ddd; border-radius:100px; font-size:13px; font-weight:600; color:#111; text-decoration:none; background:#fff; transition:background .2s,color .2s; }
.igf-btn:hover { background:#111; color:#fff; border-color:#111; }
.igf-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; background:#f3f3f3; border-radius:20px; padding:20px; }
.igf-card { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:14px; }
.igf-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.igf-card:hover .igf-img { transform:scale(1.05); }
.igf-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:flex-end; gap:16px; padding:14px 16px; transition:background .3s; }
.igf-card:hover .igf-overlay { background:rgba(0,0,0,.35); }
.igf-stat { display:flex; align-items:center; gap:5px; color:#fff; font-size:13px; font-weight:600; opacity:0; transition:opacity .3s; }
.igf-card:hover .igf-stat { opacity:1; }
@media(max-width:640px) { .igf-grid { grid-template-columns:repeat(2,1fr); } }

/* ===== Blog Preview Section ===== */
.blp-section { background:#fff; padding:8px 20px 56px; width:100vw; position:relative; left:50%; transform:translateX(-50%); }
.blp-inner { max-width:1200px; margin:0 auto; }
.blp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.blp-head .blp-title { font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:800; color:#111; margin:0; }
.blp-btn { display:inline-block; padding:10px 28px; border:1.5px solid #ddd; border-radius:100px; font-size:13px; font-weight:600; color:#111; text-decoration:none; background:#fff; transition:background .2s,color .2s; }
.blp-btn:hover { background:#111; color:#fff; border-color:#111; }
.blp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blp-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.blp-card:hover .blp-img { transform:scale(1.04); }
.blp-img-wrap { aspect-ratio:4/3; overflow:hidden; border-radius:14px; background:#f3f3f3; }
.blp-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.blp-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.blp-body { padding:16px 4px 0; }
.blp-date { font-size:12px; color:#aaa; margin-bottom:8px; }
.blp-title-card { font-size:15px; font-weight:700; color:#111; line-height:1.4; margin:0 0 10px; }
.blp-tag { display:inline-block; background:#f3f3f3; color:#555; font-size:11px; font-weight:600; padding:4px 12px; border-radius:100px; }
@media(max-width:768px) { .blp-grid { grid-template-columns:1fr; } }

/* ===== Voucher Strip ===== */
.vs-strip { background:#1a1a1a; width:100vw; position:relative; left:50%; transform:translateX(-50%); padding:18px 20px; }
.vs-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.vs-eyebrow { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:3px; }
.vs-heading { font-size:13px; font-weight:500; color:rgba(255,255,255,.85); white-space:nowrap; }
.vs-divider { width:0.5px; height:36px; background:rgba(255,255,255,.12); flex-shrink:0; }
.vs-codes { display:flex; gap:10px; flex:1; }
.vs-code { display:flex; flex-direction:column; background:rgba(255,255,255,.06); border:0.5px solid rgba(255,255,255,.12); border-radius:8px; padding:8px 14px; cursor:pointer; position:relative; overflow:hidden; transition:background .2s; min-width:140px; }
.vs-code:hover { background:rgba(255,255,255,.11); }
.vs-code-label { font-size:10px; color:rgba(255,255,255,.45); letter-spacing:.5px; margin-bottom:2px; }
.vs-code-value { font-size:14px; font-weight:700; color:#fff; letter-spacing:2px; }
.vs-code-sub { font-size:10px; color:rgba(255,255,255,.35); margin-top:2px; }
.vs-copied-msg { position:absolute; inset:0; background:#1E4A2E; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; opacity:0; transition:opacity .2s; border-radius:8px; }
.vs-code.copied .vs-copied-msg { opacity:1; }
.vs-cta { margin-left:auto; flex-shrink:0; background:#fff; color:#111; font-size:12px; font-weight:600; padding:10px 24px; border-radius:100px; text-decoration:none; white-space:nowrap; transition:opacity .2s; }
.vs-cta:hover { opacity:.88; color:#111; }
@media(max-width:768px) {
  .vs-strip { width:100%; left:0; transform:none; box-sizing:border-box; }
  .vs-left,.vs-divider { display:none; }
  .vs-inner { flex-direction:column; align-items:stretch; gap:12px; }
  .vs-codes { flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:4px; }
  .vs-code { min-width:130px; flex-shrink:0; }
  .vs-cta { margin-left:0; text-align:center; display:block; box-sizing:border-box; width:100%; }
}

/* ── AKUN PAGES – mobile sidebar stack ── */
@media(max-width:768px) {
  .mora-akun-inner { flex-direction:column !important; padding:0 8px !important; }
  .mora-akun-sidebar { width:100% !important; flex-shrink:1 !important; }
  .mora-akun-wrap { padding:12px 0 80px !important; }
  .mora-akun-nav-sub { padding-left:16px; }
  /* payment page */
  .mora-pay-bank-no { font-size:14px !important; letter-spacing:0 !important; word-break:break-all; }
}