/* =========================================================
   JERMBER.STORE — Design System v2 (Dinamis & Responsif)
   Palette  : Emerald deep (brand/trust) + Warm ember (aksi/promo)
   Type     : Sora (display) / Inter (body) / IBM Plex Mono (harga & angka)
   Signature: Kartu produk "label harga" bertakik + Hero bergradasi
              hidup + navigasi seperti aplikasi native di HP (tab bar
              bawah + drawer kategori) supaya terasa modern di 2 dunia:
              layar sentuh & layar besar.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --color-bg:            #F6F8F6;
  --color-surface:       #FFFFFF;
  --color-primary:       #0F6B5C;
  --color-primary-dark:  #0A4F44;
  --color-primary-light: #E3F1EC;
  --color-accent:        #FF6A3D;
  --color-accent-dark:   #DE5024;
  --color-text:          #16241F;
  --color-text-muted:    #5C6F6A;
  --color-border:        #E1E7E3;
  --color-success:       #2E9E5B;
  --color-danger:        #E24E3A;
  --color-star:          #F2A93B;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 2px 14px rgba(15,107,92,0.08);
  --shadow-hover: 0 10px 28px rgba(15,107,92,0.16);
  --shadow-glass: 0 8px 28px rgba(10,79,68,0.14);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: .18s;
  --dur-base: .35s;
  --dur-slow: .6s;

  --header-h: 64px;
  --bottom-nav-h: 62px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height:1.55;
  animation: pageFadeIn .5s var(--ease);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .4em; letter-spacing:-.01em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: var(--font-body); cursor:pointer; }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
:focus-visible{ outline:3px solid var(--color-accent); outline-offset:2px; }

@keyframes pageFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(28px);} to{ opacity:1; transform:none; } }
@keyframes gentlePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@keyframes softBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes drift{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-14px,10px) scale(1.06); } 100%{ transform:translate(0,0) scale(1); } }
@keyframes shimmer{ 0%{ background-position:-300px 0; } 100%{ background-position:300px 0; } }

/* Hormati preferensi pengguna yang sensitif terhadap animasi */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Utility ---------- */
.price{ font-family: var(--font-mono); font-weight:600; }
.price-strike{ font-family: var(--font-mono); color: var(--color-text-muted); text-decoration: line-through; font-size:.85em; }
.text-muted{ color: var(--color-text-muted); }
.badge{ display:inline-block; padding:3px 9px; border-radius:99px; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.badge-accent{ background: var(--color-accent); color:#fff; }
.badge-primary{ background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-outline{ border:1px solid var(--color-border); color: var(--color-text-muted); }
.badge-pulse{ animation: gentlePulse 1.8s var(--ease) infinite; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius: var(--radius-sm); padding:12px 22px; font-weight:600; font-size:.95rem; cursor:pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-fast) var(--ease); }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.97); }
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); box-shadow: var(--shadow-hover); }
.btn-accent{ background: var(--color-accent); color:#fff; }
.btn-accent:hover{ background: var(--color-accent-dark); box-shadow: 0 10px 24px rgba(255,106,61,.28); }
.btn-outline{ background:transparent; border:1.5px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary-light); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:.85rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.form-group{ margin-bottom:16px; }
.form-label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.form-control{ width:100%; padding:11px 14px; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size:.95rem; background:#fff; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.form-control:focus{ border-color: var(--color-primary); outline:none; box-shadow: 0 0 0 4px var(--color-primary-light); }
textarea.form-control{ resize:vertical; }

.alert{ padding:13px 16px; border-radius: var(--radius-sm); margin-bottom:18px; font-size:.9rem; animation: fadeInUp var(--dur-base) var(--ease); }
.alert-success{ background:#E5F6EC; color:#1E7A45; }
.alert-warning{ background:#FFF3E0; color:#9A5B00; }
.alert-danger{ background:#FDEBE8; color:#B23423; }

.card{ background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.section-title{ display:flex; align-items:baseline; justify-content:space-between; margin: 42px 0 18px; }
.section-title h2{ font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); }
.section-title a{ font-size:.85rem; font-weight:600; color: var(--color-primary); }

/* ---------- Header ---------- */
.topbar{ background: var(--color-primary-dark); color:#cfe9e1; font-size:.78rem; padding:6px 0; }
.topbar .container{ display:flex; justify-content:space-between; gap:12px; }
.site-header{ background:rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:60; transition: box-shadow var(--dur-base) var(--ease); }
.site-header.scrolled{ box-shadow: var(--shadow-glass); }
.site-header .container{ display:flex; align-items:center; gap:18px; padding:12px 20px; min-height: var(--header-h); }
.logo{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--color-primary-dark); white-space:nowrap; }
.logo span{ color: var(--color-accent); }
.search-form{ flex:1; display:flex; max-width:560px; }
.search-form input{ flex:1; border:1.5px solid var(--color-border); border-right:none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding:10px 14px; font-size:.9rem; }
.search-form input:focus{ outline:none; border-color: var(--color-primary); }
.search-form button{ border:none; background: var(--color-primary); color:#fff; padding:0 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; transition: background var(--dur-fast) var(--ease); }
.search-form button:hover{ background: var(--color-primary-dark); }
.header-actions{ display:flex; align-items:center; gap:18px; white-space:nowrap; }
.header-actions a{ position:relative; font-size:.85rem; font-weight:600; color: var(--color-text); display:flex; flex-direction:column; align-items:center; gap:2px; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.header-actions a:hover{ color: var(--color-primary); transform: translateY(-1px); }
.header-actions .icon-badge{ position:absolute; top:-6px; right:-10px; background: var(--color-accent); color:#fff; font-size:.65rem; font-weight:700; border-radius:99px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* Hamburger (mobile only) */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:4px; width:38px; height:38px; border:none; background:transparent; border-radius:8px; }
.nav-toggle span{ display:block; width:20px; height:2px; background: var(--color-primary-dark); border-radius:2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.main-nav{ background: var(--color-primary); }
.main-nav .container{ display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; }
.main-nav .container::-webkit-scrollbar{ display:none; }
.main-nav a{ color:#fff; font-size:.85rem; font-weight:600; padding:11px 2px; white-space:nowrap; opacity:.92; position:relative; }
.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; background:#fff; transform:scaleX(0); transition: transform var(--dur-fast) var(--ease); }
.main-nav a:hover{ opacity:1; }
.main-nav a:hover::after{ transform:scaleX(1); }

/* Drawer navigasi mobile */
.drawer-overlay{ position:fixed; inset:0; background:rgba(10,25,20,.45); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity var(--dur-base) var(--ease); z-index:90; }
.drawer-overlay.open{ opacity:1; visibility:visible; }
.mobile-drawer{ position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:#fff; z-index:95; transform:translateX(-105%); transition: transform var(--dur-base) var(--ease); overflow-y:auto; box-shadow: 8px 0 30px rgba(0,0,0,.15); }
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer-header{ background: var(--color-primary-dark); color:#fff; padding:22px 20px; display:flex; justify-content:space-between; align-items:center; }
.mobile-drawer-header .logo{ color:#fff; }
.mobile-drawer-header .logo span{ color:#FFD9C8; }
.mobile-drawer-close{ background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:1.1rem; }
.mobile-drawer nav{ padding:10px; }
.mobile-drawer a{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:10px; font-weight:600; font-size:.92rem; color: var(--color-text); }
.mobile-drawer a:hover, .mobile-drawer a:active{ background: var(--color-primary-light); color: var(--color-primary-dark); }
.mobile-drawer .drawer-section-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-muted); padding:14px 14px 4px; }

/* ---------- Hero / Banner (crossfade + gradasi hidup) ---------- */
.hero{ position:relative; margin:20px auto; max-width:1180px; padding:0 20px; }
.hero-slide{
  border-radius: var(--radius-lg); overflow:hidden;
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary) 45%, #12806e 100%);
  background-size:200% 200%;
  animation: heroGradient 10s ease infinite;
  color:#fff; min-height:280px; display:flex; align-items:center; padding:40px 50px; position:relative;
}
@keyframes heroGradient{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.hero-slide::after{ content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background: rgba(255,255,255,.08); animation: drift 9s ease-in-out infinite; }
.hero-slide::before{ content:""; position:absolute; left:20%; bottom:-70px; width:180px; height:180px; border-radius:50%; background: rgba(255,106,61,.14); animation: drift 12s ease-in-out infinite reverse; }
.hero-slide .eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:700; color: #FFD9C8; position:relative; z-index:1; }
.hero-slide h1{ font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.3rem); max-width:480px; margin:10px 0 12px; position:relative; z-index:1; }
.hero-slide p{ max-width:420px; opacity:.92; margin-bottom:20px; position:relative; z-index:1; }
.hero-slide .btn{ position:relative; z-index:1; }
.hero-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.hero-dots button{ width:8px; height:8px; border-radius:99px; border:none; background: var(--color-border); padding:0; transition: width var(--dur-base) var(--ease), background var(--dur-fast) var(--ease); }
.hero-dots button.active{ background: var(--color-primary); width:22px; }

/* ---------- Kategori ---------- */
.category-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.category-item{ text-align:center; padding:16px 8px; border-radius: var(--radius-md); background:#fff; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.category-item:hover{ transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-hover); }
.category-item .cat-icon{ width:46px; height:46px; margin:0 auto 8px; border-radius:50%; background: var(--color-primary-light); display:flex; align-items:center; justify-content:center; font-size:1.3rem; transition: transform var(--dur-base) var(--ease); }
.category-item:hover .cat-icon{ transform: scale(1.12) rotate(-6deg); }
.category-item span{ font-size:.82rem; font-weight:600; }

/* ---------- Product Grid & Card (signature: notch label) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.product-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow:hidden; position:relative; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); display:flex; flex-direction:column; }
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.product-thumb{ position:relative; aspect-ratio:1/1; background: var(--color-primary-light); overflow:hidden; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.product-card:hover .product-thumb img{ transform: scale(1.08); }
.product-thumb .badge{ position:absolute; top:10px; left:10px; z-index:2; }
.product-thumb .wishlist-btn{ position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center; font-size:1rem; z-index:2; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.product-thumb .wishlist-btn:hover{ transform: scale(1.15); background:#fff; }
.product-info{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.product-info .cat{ font-size:.7rem; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; }
.product-info h3{ font-family: var(--font-body); font-size:.92rem; font-weight:600; margin:0; line-height:1.35; min-height:2.5em; }
.product-price-row{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.product-price-row .price{ font-size:1.05rem; color: var(--color-primary-dark); }
.product-meta{ display:flex; justify-content:space-between; font-size:.75rem; color: var(--color-text-muted); margin-top:4px; }
.product-meta .rating{ color: var(--color-star); font-weight:600; }
/* takik label harga */
.product-card::before{ content:""; position:absolute; top:16px; right:-1px; width:14px; height:14px; background: var(--color-bg); border-radius:50%; z-index:3; box-shadow: inset 0 0 0 1px var(--color-border); }

/* ---------- Flash Sale ---------- */
.flash-banner{ background: linear-gradient(100deg,var(--color-accent),var(--color-accent-dark)); background-size:200% 200%; animation: heroGradient 6s ease infinite; border-radius: var(--radius-md); color:#fff; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.flash-banner .timer{ display:flex; gap:8px; font-family: var(--font-mono); }
.flash-banner .timer span{ background:rgba(255,255,255,.18); padding:6px 10px; border-radius:6px; font-weight:700; }
.stock-bar{ height:6px; background: var(--color-border); border-radius:99px; overflow:hidden; margin-top:6px; }
.stock-bar > div{ height:100%; background: var(--color-accent); transition: width var(--dur-slow) var(--ease); }

/* ---------- Filter Sidebar (jadi bottom-sheet di HP) ---------- */
.filter-layout{ display:grid; grid-template-columns:230px 1fr; gap:24px; align-items:start; }
.filter-box{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding:18px; position:sticky; top:calc(var(--header-h) + 26px); }
.filter-box h4{ font-size:.9rem; margin-bottom:10px; }
.filter-box .filter-group{ margin-bottom:20px; border-bottom:1px solid var(--color-border); padding-bottom:16px; }
.filter-box label{ display:flex; align-items:center; gap:8px; font-size:.85rem; padding:4px 0; color: var(--color-text); }
.filter-box input[type=range]{ width:100%; }
.filter-toggle-btn{ display:none; }
.filter-drawer-header{ display:none; }
.filter-overlay{ display:none; }

/* ---------- Product Detail ---------- */
.pdp-layout{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.pdp-gallery-main{ border-radius: var(--radius-lg); overflow:hidden; background: var(--color-primary-light); aspect-ratio:1/1; }
.pdp-gallery-main img{ transition: transform var(--dur-base) var(--ease); }
.pdp-thumbs{ display:flex; gap:8px; margin-top:10px; }
.pdp-thumbs img{ width:64px; height:64px; object-fit:cover; border-radius: var(--radius-sm); border:2px solid transparent; cursor:pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.pdp-thumbs img:hover{ transform: translateY(-2px); }
.pdp-thumbs img.active{ border-color: var(--color-primary); }
.pdp-price-box{ background: var(--color-primary-light); border-radius: var(--radius-md); padding:16px 18px; margin:14px 0; }
.pdp-price-box .price{ font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem); color: var(--color-primary-dark); }
.variant-options{ display:flex; flex-wrap:wrap; gap:8px; }
.variant-options button{ border:1.5px solid var(--color-border); background:#fff; padding:8px 16px; border-radius: var(--radius-sm); font-size:.85rem; font-weight:600; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.variant-options button:hover{ transform: translateY(-2px); }
.variant-options button.selected{ border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; }
.qty-stepper button{ width:38px; height:38px; border:none; background:#fff; font-size:1.1rem; transition: background var(--dur-fast) var(--ease); }
.qty-stepper button:hover{ background: var(--color-primary-light); }
.qty-stepper input{ width:50px; border:none; text-align:center; font-family: var(--font-mono); }
.tabs{ display:flex; gap:26px; border-bottom:1.5px solid var(--color-border); margin-top:40px; overflow-x:auto; }
.tabs button{ border:none; background:none; padding:12px 0; font-weight:700; color: var(--color-text-muted); border-bottom:2px solid transparent; white-space:nowrap; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tabs button.active{ color: var(--color-primary-dark); border-color: var(--color-accent); }
.review-item{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--color-border); }
.review-item .avatar{ width:40px; height:40px; border-radius:50%; background: var(--color-primary-light); display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--color-primary-dark); flex-shrink:0; }
.stars{ color: var(--color-star); font-size:.9rem; }

/* ---------- Cart & Checkout ---------- */
.cart-item{ display:grid; grid-template-columns:70px 1fr auto auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--color-border); transition: background var(--dur-fast) var(--ease); }
.cart-item img{ width:70px; height:70px; object-fit:cover; border-radius: var(--radius-sm); }
.checkout-layout{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
.summary-box{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding:22px; position:sticky; top:calc(var(--header-h) + 26px); }
.summary-row{ display:flex; justify-content:space-between; padding:7px 0; font-size:.9rem; }
.summary-row.total{ border-top:1.5px dashed var(--color-border); margin-top:8px; padding-top:14px; font-weight:700; font-size:1.05rem; }
.pay-option{ border:1.5px solid var(--color-border); border-radius: var(--radius-sm); padding:14px 16px; margin-bottom:10px; display:flex; align-items:flex-start; gap:12px; cursor:pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pay-option.selected{ border-color: var(--color-primary); background: var(--color-primary-light); }

/* ---------- Invoice (receipt style — ties into signature notch theme) ---------- */
.invoice-box{ background:#fff; max-width:640px; margin:30px auto; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding:34px; position:relative; }
.invoice-box::before, .invoice-box::after{ content:""; position:absolute; top:50%; width:24px; height:24px; background: var(--color-bg); border-radius:50%; }
.invoice-box::before{ left:-12px; } .invoice-box::after{ right:-12px; }
.invoice-header{ display:flex; justify-content:space-between; border-bottom:2px dashed var(--color-border); padding-bottom:16px; margin-bottom:16px; }
.invoice-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.invoice-table th{ text-align:left; font-size:.75rem; text-transform:uppercase; color: var(--color-text-muted); padding-bottom:8px; }
.invoice-table td{ padding:8px 0; border-top:1px solid var(--color-border); }

/* ---------- Account / Sidebar ---------- */
.account-layout{ display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:start; }
.account-menu{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding:10px; }
.account-menu a{ display:block; padding:11px 14px; border-radius: var(--radius-sm); font-size:.88rem; font-weight:600; color: var(--color-text-muted); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.account-menu a.active, .account-menu a:hover{ background: var(--color-primary-light); color: var(--color-primary-dark); }
.order-status-track{ display:flex; justify-content:space-between; margin:24px 0; position:relative; }
.order-status-track::before{ content:""; position:absolute; top:14px; left:5%; right:5%; height:3px; background: var(--color-border); z-index:0; }
.order-status-track .step{ position:relative; z-index:1; text-align:center; flex:1; font-size:.75rem; color: var(--color-text-muted); }
.order-status-track .step .dot{ width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--color-border); margin:0 auto 6px; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.order-status-track .step.done .dot{ background: var(--color-primary); border-color: var(--color-primary); }
.order-status-track .step.done{ color: var(--color-primary-dark); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-primary-dark); color:#cfe9e1; margin-top:60px; padding:48px 0 20px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
.footer-grid h4{ color:#fff; font-size:.95rem; margin-bottom:12px; }
.footer-grid a{ display:block; font-size:.85rem; color:#B7D8CF; padding:4px 0; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.footer-grid a:hover{ color:#fff; transform: translateX(3px); }
.footer-bottom{ text-align:center; font-size:.78rem; color:#8FBAAE; border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:16px; }

/* ---------- Blog ---------- */
.blog-card{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow:hidden; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.blog-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.blog-card img{ aspect-ratio:16/9; object-fit:cover; }
.blog-card .content{ padding:16px; }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:60px 20px; color: var(--color-text-muted); }
.empty-state .icon{ font-size:2.6rem; margin-bottom:10px; animation: softBounce 2.4s ease-in-out infinite; display:inline-block; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; gap:6px; justify-content:center; margin:30px 0; }
.pagination a, .pagination span{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius: var(--radius-sm); font-size:.85rem; font-weight:600; border:1px solid var(--color-border); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pagination a:hover{ background: var(--color-primary-light); }
.pagination .active{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }

/* ---------- Toast ---------- */
.toast{ position:fixed; right:20px; bottom:24px; z-index:200; background: var(--color-primary); color:#fff; padding:12px 18px; border-radius:10px; font-size:.88rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: toastIn var(--dur-base) var(--ease); max-width:280px; }
.toast.toast-error{ background: var(--color-danger); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- Floating WhatsApp CTA ---------- */
.fab-whatsapp{
  position:fixed; right:20px; bottom:24px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg,#25D366,#1DA851);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; box-shadow: 0 8px 22px rgba(29,168,81,.4);
  transition: transform var(--dur-fast) var(--ease);
}
.fab-whatsapp:hover{ transform: scale(1.08); }

/* ---------- Bottom Tab Bar (mobile only, app-like) ---------- */
.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top:1px solid var(--color-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(10,79,68,.08);
}
.bottom-nav-inner{ display:flex; justify-content:space-around; }
.bottom-nav a{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.68rem; font-weight:600; color: var(--color-text-muted); padding:4px 8px; border-radius:10px; transition: color var(--dur-fast) var(--ease); flex:1; }
.bottom-nav a .bn-icon{ font-size:1.15rem; }
.bottom-nav a.active{ color: var(--color-primary); }
.bottom-nav a .icon-badge{ position:absolute; top:-2px; right:14%; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .category-grid{ grid-template-columns:repeat(3,1fr); }
  .pdp-layout, .checkout-layout, .account-layout{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  /* Sembunyikan nav horizontal desktop, tampilkan hamburger */
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }

  /* Filter jadi bottom-sheet */
  .filter-layout{ grid-template-columns:1fr; }
  .filter-toggle-btn{ display:inline-flex; }
  .filter-overlay{ display:block; position:fixed; inset:0; background:rgba(10,25,20,.45); z-index:94; opacity:0; visibility:hidden; transition: opacity var(--dur-base) var(--ease); }
  .filter-overlay.open{ opacity:1; visibility:visible; }
  .filter-box{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:95;
    max-height:80vh; overflow-y:auto; border-radius:20px 20px 0 0;
    transform:translateY(105%); transition: transform var(--dur-base) var(--ease);
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  }
  .filter-box.open{ transform:translateY(0); }
  .filter-drawer-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--color-border); }

  .bottom-nav{ display:block; }
  body{ padding-bottom: var(--bottom-nav-h); }
  .fab-whatsapp{ bottom: calc(var(--bottom-nav-h) + 14px); width:50px; height:50px; font-size:1.3rem; }
  .toast{ bottom: calc(var(--bottom-nav-h) + 14px); right:14px; left:14px; max-width:none; }
}

@media (max-width: 600px){
  .site-header .container{ flex-wrap:wrap; padding:10px 16px; }
  .search-form{ order:3; max-width:100%; width:100%; }
  .category-grid{ display:flex; overflow-x:auto; gap:12px; padding-bottom:4px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .category-grid::-webkit-scrollbar{ display:none; }
  .category-item{ flex:0 0 auto; width:92px; scroll-snap-align:start; }
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .hero-slide{ padding:28px 26px; min-height:230px; }
  .footer-grid{ grid-template-columns:1fr; }
  .cart-item{ grid-template-columns:56px 1fr; grid-template-rows:auto auto; }
}