* { box-sizing: border-box; }
body {
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: #0d0d0d;
  color: #f0ede4;
}
h1, h2, h3, .hero h1, .checkout-product, .bank-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
}
.section-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
.navbar {
  background: #000000;
  color: #f0ede4;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; top: 0; z-index: 1000;
  flex-wrap: wrap;
  border-bottom: 1px solid #2a2a2a;
}
.navbar .brand {
  color: #f0ede4; font-weight: bold; text-decoration: none; font-size: 18px;
  display: flex; align-items: center; gap: 8px; letter-spacing: 1px;
}
.brand-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.brand-logo { height: 52px; width: auto; }

.hamburger-trigger {
  background: transparent; background-color: transparent; -webkit-appearance: none; appearance: none;
  border: none; outline: none; color: #f0ede4; cursor: pointer; padding: 4px;
  display: flex; align-items: center; font-family: inherit;
}

.main-menu-dropdown {
  display: none; position: absolute; left: 24px; top: calc(100% + 4px); background: #161616;
  border: 1px solid #2a2a2a; border-radius: 6px; min-width: 180px; padding: 6px; z-index: 25;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); flex-direction: column;
}
.main-menu-dropdown.open { display: flex; }
.main-menu-dropdown a {
  display: block; padding: 9px 12px; border-radius: 4px; color: #f0ede4; text-decoration: none; font-size: 14px;
}
.main-menu-dropdown a:hover { background: #0d0d0d; color: #F0663F; }

.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-links a, .link-btn {
  color: #f0ede4; text-decoration: none; background: none; border: none;
  cursor: pointer; font-size: 14px;
}
.icon-link { display: inline-flex; align-items: center; padding: 4px; }
.icon-link:hover { color: #F0663F; }
.nav-links a:hover, .link-btn:hover { color: #F0663F; text-decoration: underline; }

.container { max-width: 1000px; margin: 0 auto; padding: 24px; }

h2 { color: #f0ede4; }

.form-card, .detail-card {
  background: #161616; padding: 24px; border-radius: 8px;
  max-width: 480px; margin: 20px auto; border: 1px solid #2a2a2a;
}
.form-card label { display: block; margin-top: 12px; font-weight: 600; font-size: 14px; color: #cfc9ba; }
.form-card input, .form-card textarea {
  width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #333;
  border-radius: 4px; background: #0d0d0d; color: #f0ede4;
}
.form-card input:focus, .form-card textarea:focus { outline: none; border-color: #E24C2B; }
.form-card button {
  margin-top: 20px; padding: 10px 16px; background: #E24C2B; color: #0d0d0d;
  border: none; border-radius: 4px; cursor: pointer; font-size: 15px; font-weight: 600;
}
.form-card button:hover { background: #F0663F; }
.error-msg { color: #ff6b6b; background: #2a1414; padding: 8px 12px; border-radius: 4px; }

.flavor-picker { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.flavor-chip {
  font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid;
  cursor: pointer; background: transparent; font-weight: 600;
}
.flavor-chip:hover { filter: brightness(1.2); }

.flavor-tags { margin: 12px 0; }
.flavor-tag-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.flavor-tag-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.flavor-tag {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid; font-weight: 600;
}
.flavor-breadcrumb { font-size: 10px; color: #777; padding-left: 2px; }

.btn-outline { background: transparent; color: #F0663F; border: 1px solid #E24C2B; }
.btn-outline:hover { background: #2a1c10; }

.checkout-summary {
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px; margin-bottom: 16px;
}
.checkout-product { font-size: 14px; color: #f0ede4; font-weight: 600; margin: 0 0 6px; }
.checkout-line { font-size: 13px; color: #a8a29a; margin: 2px 0; }
.checkout-total { font-size: 15px; color: #F0663F; font-weight: 700; margin: 8px 0 0; }

.bank-box {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 14px; margin-bottom: 12px; text-align: center;
}
.bank-label { font-size: 11px; color: #a8a29a; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.bank-name { font-size: 14px; color: #f0ede4; font-weight: 700; margin: 0; }
.bank-account { font-size: 22px; color: #F0663F; font-weight: 700; letter-spacing: 1px; margin: 4px 0; }
.bank-holder { font-size: 13px; color: #a8a29a; margin: 0; }

.amount-box {
  background: #0d0d0d; border: 1px dashed #E24C2B; border-radius: 8px; padding: 14px; text-align: center; margin-bottom: 8px;
}
.amount-label { font-size: 12px; color: #a8a29a; margin: 0 0 6px; }
.amount-value { font-size: 24px; color: #F0663F; font-weight: 700; margin: 0 0 4px; }
.amount-breakdown { font-size: 11px; color: #666; margin: 0; }

.status-box { border-radius: 8px; padding: 16px; text-align: center; }
.status-waiting { background: #2a1c10; border: 1px solid #E24C2B; color: #F0663F; }
.status-confirmed { background: #0f2a14; border: 1px solid #6bbf6b; color: #6bbf6b; }
.status-cancelled { background: #2a1414; border: 1px solid #ff6b6b; color: #ff6b6b; }

.analytics-row-orders { grid-template-columns: 1.6fr 1.2fr 0.9fr 1fr 1.2fr; }
.order-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; display: inline-block; }
.order-status-pending_payment { background: #2a2a2a; color: #a8a29a; }
.order-status-awaiting_confirmation { background: #2a1c10; color: #F0663F; }
.order-status-confirmed { background: #0f2a14; color: #6bbf6b; }
.order-status-cancelled { background: #2a1414; color: #ff6b6b; }
.order-status-not_shipped { background: #2a2a2a; color: #a8a29a; }
.order-status-shipped { background: #2a1c10; color: #F0663F; }
.order-status-delivered { background: #0f2a14; color: #6bbf6b; }

.analytics-row-shipping { grid-template-columns: 1.4fr 1fr 1fr 0.8fr; }

.courier-option { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.courier-radio {
  display: flex; align-items: center; gap: 8px; background: #0d0d0d; border: 1px solid #2a2a2a;
  border-radius: 6px; padding: 10px; cursor: pointer; font-size: 13px; color: #f0ede4;
}
.courier-radio input { width: auto; margin: 0; }
.courier-eta { color: #a8a29a; font-size: 11px; font-weight: 400; }

.track-status-row {
  display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #1f1f1f; font-size: 13px;
}
.track-status-row span:first-child { color: #a8a29a; }
.track-status-row span:last-child { color: #f0ede4; font-weight: 500; }

.order-card {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 14px; margin-bottom: 12px;
}
.order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
.order-card-header > span:first-child { font-size: 13px; color: #f0ede4; font-weight: 600; }
.order-card-line { font-size: 12px; color: #a8a29a; margin: 3px 0; }
.order-card-actions { margin-top: 10px; display: flex; gap: 8px; }
.shipment-form { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.shipment-form input, .shipment-form select {
  background: #0d0d0d; border: 1px solid #333; color: #f0ede4; border-radius: 4px; padding: 6px; font-size: 12px;
}

.ops-header { margin-bottom: 24px; }
.ops-eyebrow { color: #6bbf6b; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 8px; }
.ops-title { font-size: 28px; margin: 0 0 8px; }
.ops-sub { color: #a8a29a; font-size: 14px; margin: 0; }
.ops-section-label { color: #6bbf6b; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin: 20px 0 8px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stat-tile {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px;
}
.stat-tile-label { color: #a8a29a; font-size: 13px; margin: 0 0 8px; }
.stat-tile { min-width: 0; }
.stat-tile-value { font-size: clamp(17px, 2vw, 22px); font-weight: 700; color: #f0ede4; margin: 0 0 12px; overflow-wrap: anywhere; line-height: 1.2; }

.order-detail-card {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 20px; max-width: 560px; margin-top: 14px;
}
.order-detail-box { background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.order-detail-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: #f0ede4; }
.order-detail-row span:first-child { color: #a8a29a; }
.order-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.packing-list {
  background: #fff; color: #111; max-width: 560px; margin: 0 auto; padding: 24px; border-radius: 8px;
}
.packing-list h3 { color: #111; margin-top: 20px; }
.packing-warning {
  background: #fee2e2; border: 2px solid #dc2626; color: #991b1b; font-weight: 700;
  padding: 12px; border-radius: 4px; margin: 12px 0;
}
.packing-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.packing-table th, .packing-table td { border: 1px solid #ccc; padding: 8px; text-align: left; font-size: 13px; }
.packing-signoff { display: flex; gap: 30px; margin-top: 24px; font-size: 13px; }
.packing-signoff span { color: #666; }
@media print { .no-print { display: none; } body { background: #fff; } }

.step-tracker { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.step-pill {
  font-size: 11px; padding: 5px 10px; border-radius: 999px; border: 1px solid #2a2a2a;
  color: #666; background: #161616;
}
.step-pill.step-done { color: #6bbf6b; border-color: #6bbf6b; }
.step-pill.step-active { color: #F0663F; border-color: #E24C2B; background: #2a1c10; font-weight: 600; }

.order-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

.site-footer {
  margin-top: 48px; padding: 28px 10px; border-top: 1px solid #2a2a2a; text-align: center;
}
.footer-social { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.social-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #a8a29a; text-decoration: none; font-size: 12px;
}
.social-icon:hover { color: #F0663F; }
.footer-copy { font-size: 12px; color: #666; margin: 0; }

.courier-toggle { display: flex; gap: 6px; margin: 6px 0 12px; }
.courier-toggle-btn,
.form-card .courier-toggle-btn {
  flex: 1; padding: 8px; border-radius: 4px; border: 1px solid #2a2a2a; background: #0d0d0d;
  color: #a8a29a; font-size: 12px; cursor: pointer; font-weight: 600;
}
.courier-toggle-btn.active,
.form-card .courier-toggle-btn.active { background: #E24C2B; color: #0d0d0d; border-color: #E24C2B; }

/* Tombol metode pembayaran (Bank Transfer / QRIS) -- pakai selector ID biar warnanya
   tidak bisa ketiban aturan CSS lain di masa depan (ID = prioritas tertinggi di CSS).
   Beda warna per metode + tanda centang, biar jelas kelihatan mana yang aktif
   walau suatu saat ada bug warna lagi. */
.pm-check { display: none; margin-right: 3px; }
.courier-toggle-btn.active .pm-check { display: inline; }
#toggle-bank.active { background: #E24C2B !important; color: #0d0d0d !important; border-color: #E24C2B !important; }
#toggle-qris.active { background: #d7263d !important; color: #fff !important; border-color: #d7263d !important; }

.account-menu { position: relative; display: inline-block; }
.account-trigger {
  background: transparent; background-color: transparent; -webkit-appearance: none; appearance: none;
  border: none; outline: none; color: #f0ede4; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 4px; padding: 4px 0; font-family: inherit;
}
.account-caret { font-size: 10px; }
.account-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #161616;
  border: 1px solid #2a2a2a; border-radius: 6px; min-width: 160px; padding: 6px; z-index: 20;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.account-dropdown.open { display: block; }
.account-dropdown a, .account-dropdown-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 4px;
  color: #f0ede4; text-decoration: none; font-size: 13px; background: none; border: none; cursor: pointer;
}
.account-dropdown a:hover, .account-dropdown-item:hover { background: #0d0d0d; color: #F0663F; }
.account-dropdown-label {
  font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.5px;
  margin: 4px 10px 2px; font-weight: 600;
}
.account-dropdown-divider { height: 1px; background: #2a2a2a; margin: 6px 4px; }

.invoice-page-wrapper {
  background: #d9552c; padding: 28px 14px; border-radius: 4px; max-width: 700px; margin: 0 auto;
}
.invoice-sheet {
  background: #fff; color: #1a1a1a; max-width: 100%; margin: 0 auto; padding: 32px; border-radius: 4px; position: relative;
}
.invoice-big-title {
  font-size: 52px; font-weight: 900; margin: 0 0 20px; letter-spacing: 1px; color: #1a1a1a;
}
.invoice-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.invoice-label { font-size: 12px; color: #d9552c; font-weight: 700; text-transform: uppercase; margin: 0 0 4px; }
.invoice-bill-name { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.invoice-value { font-size: 13px; color: #333; margin: 2px 0; }
.invoice-meta { text-align: right; }
.invoice-number { font-size: 13px; font-weight: 700; margin: 0 0 6px; }

.invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.invoice-table th {
  background: #1a1a1a; color: #d9552c; text-align: left; font-size: 12px; text-transform: uppercase;
  padding: 10px 12px; border-right: 2px solid #d9552c;
}
.invoice-table th:last-child, .invoice-table td:last-child { border-right: none; }
.invoice-table td { font-size: 13px; padding: 10px 12px; border-right: 1px solid #d9552c; border-bottom: 1px solid #eee; }

.invoice-total-bar {
  background: #d9552c; color: #fff; display: flex; justify-content: space-between;
  padding: 10px 14px; font-weight: 800; font-size: 15px; margin-bottom: 20px;
}

.invoice-terbilang { font-size: 13px; margin: 4px 0; }
.invoice-bank-line { font-size: 13px; font-weight: 600; margin: 4px 0 10px; }

.invoice-watermark { text-align: center; margin: 20px 0; opacity: 0.9; }
.invoice-watermark img { height: 110px; }

.invoice-signoff { text-align: right; margin-top: 10px; }
.invoice-signoff-logo { height: 55px; margin: 8px 0 4px; }
.invoice-signoff-name { font-size: 13px; font-weight: 700; margin: 0; }

.invoice-stamp {
  position: absolute; left: 32px; bottom: 32px; width: 78px; height: 78px; border-radius: 50%;
  background: #d9552c; display: flex; align-items: center; justify-content: center;
}
.invoice-stamp img { width: 46px; height: 46px; object-fit: contain; filter: brightness(0) invert(1); }

.invoice-tagline-badge {
  position: absolute; left: 4px; bottom: -6px; background: #1a1a1a; color: #fff; font-size: 10px;
  font-weight: 700; padding: 10px 14px; transform: rotate(-8deg); border: 1px solid #d9552c;
  max-width: 130px; line-height: 1.4;
}

.invoice-footer { font-size: 11px; color: #888; margin-top: 24px; text-align: center; }

.wholesale-hero { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.wholesale-hero h2 { font-size: 28px; margin: 6px 0 12px; }
.wholesale-sub { color: #a8a29a; font-size: 15px; line-height: 1.6; }
.wholesale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; }
.wholesale-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 20px; }
.wholesale-card h3 { margin-top: 0; font-size: 17px; }
.wholesale-list { padding-left: 18px; margin: 0; color: #cfc9ba; font-size: 14px; line-height: 1.9; }
.wholesale-cta {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 28px; text-align: center; max-width: 500px; margin: 0 auto;
}
.wholesale-cta h3 { margin-top: 0; }
.wholesale-cta p { color: #a8a29a; font-size: 14px; margin-bottom: 18px; }

.cart-item {
  display: flex; gap: 12px; align-items: center; background: #161616; border: 1px solid #2a2a2a;
  border-radius: 8px; padding: 12px; margin-bottom: 10px;
}
.cart-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.cart-item-img-placeholder { background: #0d0d0d; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 14px; color: #f0ede4; font-weight: 600; margin: 0 0 2px; }
.cart-item-size { font-size: 12px; color: #a8a29a; margin: 0 0 8px; }
.cart-qty-form { display: flex; align-items: center; gap: 6px; }
.cart-qty-form input[type="number"] { padding: 5px; margin: 0; }
.cart-item-actions { text-align: right; flex-shrink: 0; }
.cart-item-subtotal { font-size: 14px; color: #F0663F; font-weight: 700; margin: 0 0 8px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 20px; }
.filter-select {
  background: #161616; border: 1px solid #2a2a2a; color: #f0ede4; font-size: 13px;
  padding: 9px 10px; border-radius: 6px; flex: 1 1 150px; min-width: 130px; cursor: pointer;
}
.filter-select:hover, .filter-select:focus { outline: none; border-color: #E24C2B; }

.coffee-info-box {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 6px; padding: 10px 14px; margin-bottom: 18px;
}
.coffee-info-box summary { font-size: 13px; color: #F0663F; cursor: pointer; font-weight: 600; }
.coffee-info-content { margin-top: 10px; }
.coffee-info-content p { font-size: 13px; color: #cfc9ba; line-height: 1.6; margin: 0 0 10px; }
.coffee-info-content strong { color: #f0ede4; }

.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px;
}
.product-card {
  background: #1a1712; padding: 16px; border-radius: 16px; border: 1px solid #2a2418;
  transition: border-color 0.15s;
}
.product-card:hover { border-color: #E24C2B; }
.product-card img, .detail-card img { width: 100%; border-radius: 12px; object-fit: cover; max-height: 180px; }
.img-placeholder {
  background: linear-gradient(135deg, #241d14, #1a1510); height: 120px; display: flex; align-items: center;
  justify-content: center; border-radius: 12px; color: #8a7d6c; font-size: 13px;
}
.product-card h3 { margin: 10px 0 4px; font-size: 17px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.product-card a { color: #f0ede4; text-decoration: none; }
.product-card a:hover { color: #F0663F; }
.stock { font-weight: 600; color: #6bbf6b; }
.stock.low { color: #ff6b6b; }

.detail-card { max-width: 500px; }
.detail-card .price { font-size: 20px; font-weight: bold; color: #F0663F; }
.actions { margin-top: 16px; display: flex; gap: 10px; }
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 4px; text-decoration: none;
  background: #E24C2B; color: #0d0d0d; border: none; cursor: pointer; font-size: 14px; font-weight: 600;
}
.btn:hover { background: #F0663F; }
.btn-danger { background: transparent; color: #ff6b6b; border: 1px solid #ff6b6b; }
.btn-danger:hover { background: #2a1414; }

a { color: #F0663F; }

.type-tabs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.type-tab {
  padding: 12px 10px; border-radius: 2px; border: 1px solid #2a2a2a; background: #161616;
  color: #f0ede4; text-decoration: none; font-size: 11px; text-align: center;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.type-tab.active { background: #E24C2B; color: #0d0d0d; border-color: #E24C2B; }
.type-tab:hover:not(.active) { border-color: #E24C2B; color: #F0663F; }

.preorder-badge {
  display: inline-block; font-size: 11px; font-weight: 600; color: #0d0d0d;
  background: #f0ede4; padding: 3px 10px; border-radius: 20px;
}
.preorder-note { font-size: 12px; color: #F0663F; margin: 4px 0; }

.filter-bar { margin-bottom: 16px; }
.filter-bar select {
  background: #161616; color: #f0ede4; border: 1px solid #333; border-radius: 4px;
  padding: 8px; font-size: 14px;
}
.category-badge {
  display: inline-block; font-size: 11px; color: #e8a562; background: #2e2113;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 6px;
}
.info-table { margin-top: 14px; border-top: 1px solid #2a2a2a; padding-top: 12px; }
.info-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid #1f1f1f; font-size: 13px;
}
.info-row span:first-child { color: #a8a29a; }
.info-row span:last-child { color: #f0ede4; font-weight: 500; text-align: right; }

.hero-slider { position: relative; margin-bottom: 10px; border-radius: 12px; overflow: hidden; border: 1px solid #2a2a2a; }
.hero-slides { display: flex; transition: transform 0.5s ease; }
.hero-slide { flex: 0 0 100%; box-sizing: border-box; }
.btn-lg { padding: 12px 28px; font-size: 15px; }
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(13,13,13,0.6);
  color: #f0ede4; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; z-index: 3;
}
.hero-nav:hover { background: #E24C2B; color: #0d0d0d; }
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
.hero-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0; background: #161616; }
.hero-dot { width: 7px; height: 3px; border-radius: 2px; background: #3a352c; cursor: pointer; transition: width 0.2s; }
.hero-dot.active { width: 16px; background: #E24C2B; }

/* Hero slide -- gaya kaya: foto full-bg atau panel gelap dekoratif, badge, divider, CTA panah */
.hero-slide-rich {
  position: relative; min-height: 320px; display: flex; align-items: flex-end;
  background: #161616; overflow: hidden; box-sizing: border-box;
}
/* contain (bukan cover) -- foto label/produk yang sudah ada tulisannya ditampilkan utuh,
   tidak dipotong. Sisa ruang di belakangnya diisi warna gelap, bukan di-zoom paksa. */
.hero-slide-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0d0d0d; }
.hero-slide-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.45) 70%, rgba(13,13,13,0.95) 100%);
}
.hero-slide-plain-bg { align-items: center; justify-content: center; background: linear-gradient(135deg, #1f1810 0%, #14100b 60%, #0d0d0d 100%); }
.hero-slide-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(232,121,44,0.12), transparent 60%);
}
.hero-slide-dots-deco { position: absolute; top: 0; right: 0; width: 140px; height: 140px; opacity: 0.1; pointer-events: none; }
.hero-corner { position: absolute; width: 22px; height: 22px; border-color: #E24C2B; opacity: 0.65; z-index: 1; }
.hero-corner-tl { top: 14px; left: 14px; border-top: 1.5px solid; border-left: 1.5px solid; }
.hero-corner-tr { top: 14px; right: 14px; border-top: 1.5px solid; border-right: 1.5px solid; }

.hero-slide-content { position: relative; z-index: 2; text-align: center; padding: 24px 22px; width: 100%; box-sizing: border-box; }
.hero-slide-plain-bg .hero-slide-content { padding: 36px 22px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(232,121,44,0.14);
  border: 1px solid rgba(232,121,44,0.38); color: #e8a562; font-size: 10px; font-weight: 600;
  letter-spacing: 2px; padding: 5px 14px; border-radius: 999px; margin-bottom: 12px;
}
.hero-badge-dot { width: 4px; height: 4px; border-radius: 50%; background: #E24C2B; }
.hero-slide-content h1 { font-size: 24px; line-height: 1.25; color: #f5f0e8; margin: 0 0 10px; font-weight: 700; }
.hero-divider { display: block; width: 36px; height: 1px; background: #E24C2B; opacity: 0.7; margin: 0 auto 10px; }
.hero-sub { color: #c9c4ba; max-width: 300px; margin: 0 auto 16px; font-size: 13px; line-height: 1.5; }
.hero-cta { display: inline-flex; align-items: center; gap: 8px; }
.hero-cta-arrow { font-size: 14px; }
.hero-slide-linkwrap { position: absolute; inset: 0; z-index: 2; }

.badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.premium-badge {
  display: inline-block; font-size: 11px; font-weight: 600; color: #0d0d0d;
  background: #E24C2B; padding: 3px 10px; border-radius: 20px;
}

/* Rating produk -- tampilan bintang rata-rata & form input rating */
.rating-summary { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.rating-stars { color: #F0663F; font-size: 15px; letter-spacing: 1px; }
.rating-score { color: #f0ede4; font-weight: 600; font-size: 13px; }
.rating-count { color: #888; font-size: 12px; }
.rating-input { display: flex; gap: 4px; }
.rating-star-btn {
  background: none; border: none; font-size: 28px; color: #3a3a3a; cursor: pointer; padding: 0; line-height: 1;
}
.rating-star-btn.filled { color: #F0663F; }

.stock-status { font-weight: 600; font-size: 13px; margin: 4px 0 0; }
.stock-status.low-stock { color: #e8a562; }
.stock-status.sold-out { color: #888; }

/* Tab pill "Special Lot" -- Competition / Private Lot / Collaboration */
.special-lot-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 20px; }
.special-lot-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #3a3a3a; color: #f0ede4; font-size: 13px; font-weight: 600; text-decoration: none;
  background: #161616; white-space: nowrap;
}
.special-lot-tab.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; }
.special-lot-count {
  font-size: 11px; background: rgba(0,0,0,0.2); padding: 1px 7px; border-radius: 999px;
}
.special-lot-tab:not(.active) .special-lot-count { background: rgba(255,255,255,0.08); }

.story-card { max-width: 560px; }
.story-card .subtitle { color: #a8a29a; font-size: 13px; margin: 4px 0; }
.story-card .farmer-line { color: #F0663F; font-size: 13px; margin: 4px 0 12px; }
.story-card .story-text { color: #cfc9ba; line-height: 1.7; font-size: 14px; }
.story-card .flavor-line { font-size: 14px; margin: 12px 0; }

.size-picker { margin: 18px 0; padding: 16px; background: #1a1712; border-radius: 16px; border: 1px solid #2a2418; }
.size-picker label { display: block; font-size: 12px; color: #a8a29a; margin-bottom: 8px; }
.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #3a352c; background: transparent;
  color: #f0ede4; cursor: pointer; font-size: 13px;
}
.size-btn.active { background: #E24C2B; color: #0d0d0d; border-color: #E24C2B; font-weight: 600; }
.selected-price { font-size: 22px; font-weight: 700; color: #F0663F; margin: 12px 0 2px; }
.btn-cart-pill { border-radius: 999px !important; }
.btn-cart-pill:disabled { background: #3a3a3a !important; color: #888 !important; cursor: not-allowed; }

.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 4px; border-radius: 10px; transition: outline 0.15s; }
.color-swatch-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #3a352c; background: #1a1712;
  color: #f0ede4; cursor: pointer; font-size: 13px;
}
.color-swatch-btn.active { background: #E24C2B; color: #0d0d0d; border-color: #E24C2B; font-weight: 600; }
.color-swatches-error { outline: 1px solid #ff6b6b; }

.product-image-wrap { perspective: 1200px; }
#main-product-image {
  transition: transform 0.2s ease-in, box-shadow 0.2s ease;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
  max-height: none; object-fit: contain; background: #0d0d0d;
}
#main-product-image.flipping-out { transform: rotateY(90deg) scale(0.96); }
#main-product-image.flipping-in { animation: flip-in 0.25s ease-out; }
@keyframes flip-in {
  from { transform: rotateY(-90deg) scale(0.96); }
  to { transform: rotateY(0deg) scale(1); }
}
.gallery-thumb { transition: transform 0.15s ease, border-color 0.15s ease; }
.gallery-thumb:hover { transform: translateY(-2px) scale(1.05); border-color: #E24C2B !important; }

.site-footer {
  text-align: center; padding: 28px 20px; margin-top: 40px;
  border-top: 1px solid #2a2a2a; background: #000000;
}
.footer-title { color: #f0ede4; font-size: 14px; margin: 0 0 14px; }
.footer-contacts { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-contact-item {
  display: flex; align-items: center; gap: 6px; color: #F0663F;
  text-decoration: none; font-size: 13px;
}
.footer-contact-item:hover { color: #F0663F; }
.footer-copyright { color: #666; font-size: 11px; margin: 0; }

.admin-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 10px;
  color: #444; text-decoration: none; border: 1px solid #2a2a2a;
}
.admin-lock:hover { color: #F0663F; border-color: #E24C2B; }

.wa-float {
  position: fixed; bottom: 20px; right: 20px; width: 52px; height: 52px;
  background: #25D366; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 100;
  text-decoration: none;
}
.footer-address { color: #a8a29a; }

.location-section {
  text-align: center; padding: 40px 20px 10px; border-top: 1px solid #2a2a2a; margin-top: 10px;
}
.location-address { color: #F0663F; font-size: 14px; margin: 8px 0 18px; }
.map-embed {
  max-width: 560px; margin: 0 auto 18px; border-radius: 10px; overflow: hidden;
  border: 1px solid #2a2a2a;
}

.brew-guide-wrap { max-width: 560px; margin: 24px auto 0; }
.brew-guide-wrap > h3 { margin: 0 0 12px; font-size: 15px; color: #f0ede4; }
.brew-method-title { font-size: 13px; color: #F0663F; font-weight: 600; margin: 0 0 10px; }
.brew-guide {
  background: #161616; border: 1px solid #2a2a2a;
  border-radius: 10px; padding: 16px; margin-bottom: 12px;
}
.brew-summary { display: flex; gap: 10px; margin-bottom: 14px; }
.brew-stat {
  flex: 1; background: #0d0d0d; border-radius: 6px; padding: 8px; text-align: center;
}
.brew-stat span { display: block; font-size: 10px; color: #a8a29a; }
.brew-stat strong { font-size: 13px; color: #F0663F; }
.brew-steps { margin: 0 0 12px; padding-left: 18px; }
.brew-steps li { font-size: 13px; color: #cfc9ba; margin-bottom: 6px; line-height: 1.5; }
.brew-water { font-size: 12px; color: #a8a29a; margin: 0 0 10px; }
.brew-grinder summary { font-size: 12px; color: #F0663F; cursor: pointer; }
.brew-grinder-list { margin-top: 10px; }
.brew-grinder-row {
  display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0;
  border-bottom: 1px solid #1f1f1f; color: #f0ede4;
}

.sub-hero { text-align: center; padding: 20px 10px 30px; }
.sub-hero h2 { margin: 0 0 8px; }
.sub-hero p { color: #a8a29a; max-width: 480px; margin: 0 auto; font-size: 14px; }

.sub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.sub-card {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 16px;
}
.sub-card h3 { margin: 8px 0 6px; font-size: 15px; color: #f0ede4; }
.sub-desc { font-size: 12px; color: #a8a29a; line-height: 1.5; margin: 0 0 12px; min-height: 54px; }
.sub-meta {
  display: flex; justify-content: space-between; font-size: 12px; color: #cfc9ba;
  border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; padding: 8px 0; margin-bottom: 10px;
}
.sub-price { font-size: 18px; font-weight: 700; color: #F0663F; margin: 0 0 12px; }
.sub-price span { font-size: 11px; color: #a8a29a; font-weight: 400; }

.qty-picker { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.qty-picker button {
  width: 32px; height: 32px; border-radius: 4px; border: 1px solid #333; background: #0d0d0d;
  color: #f0ede4; font-size: 16px; cursor: pointer;
}
.qty-picker button:hover { border-color: #E24C2B; color: #F0663F; }
.qty-picker span { font-size: 15px; color: #f0ede4; min-width: 20px; text-align: center; }

.stat-cards { display: flex; gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 14px 20px;
}
.stat-card span { display: block; font-size: 12px; color: #a8a29a; margin-bottom: 4px; }
.stat-card strong { font-size: 24px; color: #F0663F; }

.analytics-table { margin-bottom: 24px; border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden; }
.analytics-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px;
  padding: 10px 14px; font-size: 13px; color: #cfc9ba; border-bottom: 1px solid #1f1f1f;
}
.analytics-row-5 { grid-template-columns: 1.4fr 1.4fr 1.2fr 0.8fr 0.6fr; }
.analytics-row-3col { grid-template-columns: 1fr 2fr; }
.analytics-row-origins { grid-template-columns: 1fr 1.6fr 1.1fr; align-items: center; }
.origin-subrow { background: #101010; }
.origin-actions { display: flex; gap: 6px; }
.btn-outline-sm {
  font-size: 11px; padding: 4px 9px; border: 1px solid #3a3a3a; border-radius: 4px;
  color: #cfc9ba; background: transparent; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.btn-outline-sm:hover { border-color: #E24C2B; color: #F0663F; }
.btn-danger-sm { border-color: #5a2a2a; color: #ff6b6b; }
.btn-danger-sm:hover { border-color: #ff6b6b; color: #ff6b6b; }
.analytics-row:last-child { border-bottom: none; }
.analytics-head { background: #161616; color: #a8a29a; font-size: 11px; text-transform: uppercase; }
.empty-note { color: #666; font-size: 13px; margin-bottom: 20px; }

.upcoming-card { border-color: #3a2a1a; position: relative; }
.upcoming-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: #F0663F;
  background: transparent; border: 1px solid #E24C2B; padding: 2px 8px; border-radius: 4px;
}
.upcoming-notes { font-size: 12px; color: #a8a29a; margin: 4px 0; }
.upcoming-date { font-size: 12px; color: #F0663F; font-weight: 600; margin: 4px 0; }

.collab-card { border-color: #2a2a3a; }
.collab-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: #f0ede4;
  background: linear-gradient(90deg, #E24C2B, #c2410c); padding: 2px 8px; border-radius: 4px;
}

.announce-bar {
  text-align: center; background: #000000; color: #F0663F; font-size: 12px;
  padding: 8px 12px; letter-spacing: 0.3px; border-bottom: 1px solid #2a2a2a;
}

.chip-section-label {
  margin: 22px 0 10px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #888; text-align: center; font-weight: 600;
}
.chip-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 0 0 8px; padding: 0 10px;
}
.origin-chip {
  background: #161616; border: 1px solid #2a2a2a; color: #f0ede4; text-decoration: none;
  font-size: 11px; padding: 9px 16px; border-radius: 2px; transition: border-color 0.15s, color 0.15s;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.origin-chip:hover { border-color: #E24C2B; color: #F0663F; }
.origin-chip-outline { border-color: #E24C2B; color: #F0663F; }

.section-label {
  margin: 36px 0 2px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #f0ede4; text-align: center; font-weight: 700;
}
.section-sub { color: #a8a29a; font-size: 13px; text-align: center; margin: 0 0 16px; }

/* ---- Checkout dua kolom: form di kiri, ringkasan pesanan di kanan ---- */
.checkout-layout {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px;
  max-width: 980px; margin: 20px auto; padding: 0 16px; align-items: start;
}
.checkout-layout .form-card { max-width: none; margin: 0; }
.checkout-aside {
  position: sticky; top: 16px; background: #161616; border: 1px solid #2a2a2a;
  border-radius: 8px; padding: 20px;
}
.checkout-aside h3 { margin: 0 0 14px; font-size: 16px; color: #f0ede4; }
.sum-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sum-thumb {
  position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px;
  background: #0d0d0d; border: 1px solid #2a2a2a;
}
.sum-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.sum-badge {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #E24C2B; color: #0d0d0d; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.sum-info { flex: 1; min-width: 0; }
.sum-name { font-size: 14px; color: #f0ede4; font-weight: 600; }
.sum-sub { font-size: 12px; color: #8d877b; }
.sum-price { font-size: 14px; color: #f0ede4; white-space: nowrap; }
.sum-rows { border-top: 1px solid #2a2a2a; margin-top: 14px; padding-top: 12px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; color: #a8a29a; margin: 6px 0; }
.sum-row.sum-total {
  border-top: 1px solid #2a2a2a; margin-top: 12px; padding-top: 12px;
  font-size: 18px; font-weight: 700; color: #F0663F;
}
.sum-note { font-size: 11px; color: #777; margin: 10px 0 0; }
@media (max-width: 760px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-aside { position: static; order: -1; }
}

.discount-box { margin: 4px 0 6px; }
.discount-row { display: flex; gap: 8px; }
.discount-row input {
  flex: 1; min-width: 0; padding: 10px; border: 1px solid #333; border-radius: 6px;
  background: #0d0d0d; color: #f0ede4; text-transform: uppercase;
}
.discount-row input:focus { outline: none; border-color: #E24C2B; }
.discount-row button {
  padding: 10px 16px; border-radius: 6px; border: 1px solid #E24C2B; background: transparent;
  color: #F0663F; font-weight: 600; cursor: pointer;
}
.discount-row button:hover { background: #2a1c10; }
.discount-msg { font-size: 12px; margin: 6px 0 0; min-height: 0; color: #a8a29a; }
.discount-ok { color: #6bbf6b; }
.discount-bad { color: #ff6b6b; }
.sum-row.sum-discount, #discount-row { color: #6bbf6b; }


/* ---- Flash sale ---- */
.flash-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #E24C2B; color: #0d0d0d; letter-spacing: .3px;
}
.old-price { color: #777; font-size: 13px; margin-right: 4px; }
.sale-price { color: #F0663F; font-weight: 700; }
.flash-timer { font-size: 12px; color: #ff9a55; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.flash-detail { margin: 4px 0 10px; display: flex; align-items: center; gap: 10px; }
.flash-banner {
  background: linear-gradient(135deg, #2a1608, #161616); border: 1px solid #5a3515; border-radius: 10px;
  padding: 16px 18px; margin: 4px 0 18px;
}
.flash-banner h2 { margin: 0 0 4px; }
.flash-banner p { margin: 0; color: #cfc9ba; font-size: 13px; }

/* ===== Experience coffee (booking Brewing Service) ===== */
.exp-wrap { max-width: 640px; margin: 8px auto 40px; }
.exp-title { text-align: center; color: #F0663F; font-weight: 600; margin: 8px 0 20px; }
.exp-dow, .exp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.exp-dow { text-align: center; font-size: 12px; color: #8d877b; margin-bottom: 8px; }
.exp-day { aspect-ratio: 1; min-height: 44px; background: transparent; border: 1px solid #333; color: #f2ede4; border-radius: 4px; font-size: 15px; cursor: pointer; }
.exp-day-empty { border: 0; }
.exp-day:hover { border-color: #E24C2B; }
.exp-day.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; }
.exp-label { margin: 22px 0 6px; font-size: 13px; color: #8d877b; }
.exp-hint { font-size: 13px; color: #8d877b; margin: 0 0 8px; }
.exp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.exp-time { background: transparent; border: 1px solid #5a4630; color: #f2ede4; border-radius: 999px; padding: 8px 0; font-size: 13px; cursor: pointer; }
.exp-time:hover:not(:disabled) { border-color: #E24C2B; }
.exp-time.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; }
.exp-time:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.exp-form { margin-top: 22px; max-width: none; }
.exp-chosen { font-weight: 600; color: #F0663F; }
.exp-confirm { display: block; margin: 20px auto 0; min-width: 180px; }
.exp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exp-table th, .exp-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #2a2a2a; }
.exp-past { opacity: .5; }
.exp-mini { background: transparent; border: 1px solid #444; color: #f2ede4; border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.exp-mini:hover { border-color: #E24C2B; color: #F0663F; }

/* ===== Homepage: Shop-by tiles ===== */
.shop-by { max-width: 1100px; margin: 28px auto 8px; padding: 0 4px; }
.shop-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.shop-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #161310; border: 1px solid #2a2520; border-radius: 12px; color: #f2ede4; text-decoration: none; transition: border-color .15s, transform .15s; }
a.shop-tile:hover, .shop-tile:hover { border-color: #E24C2B; transform: translateY(-2px); }
.shop-tile-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8d877b; }
.shop-tile-title { font-size: 20px; font-weight: 600; color: #f2ede4; }
.shop-tile-link { text-decoration: none; }
.shop-tile-link:hover { color: #F0663F; }
.shop-tile-sub { font-size: 13px; color: #b8b0a2; }
.shop-tile-subchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.shop-tile-subchips a { font-size: 12px; padding: 4px 10px; border: 1px solid #E24C2B; border-radius: 999px; color: #F0663F; text-decoration: none; }
.shop-tile-subchips a:hover { background: #E24C2B; color: #0d0d0d; }
.shop-tile-flash.is-live { background: linear-gradient(135deg, #E24C2B, #b84d0e); border-color: #E24C2B; }
.shop-tile-flash.is-live .shop-tile-eyebrow, .shop-tile-flash.is-live .shop-tile-sub { color: #fff3e6; }
.shop-tile-flash:not(.is-live) { opacity: .75; }
.shop-by .chip-section-label { margin-top: 26px; }
@media (max-width: 560px) {
  .shop-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-tile { padding: 14px; }
  .shop-tile-title { font-size: 17px; }
}

/* Experience: pengaturan admin + kartu terpisah dari dropdown kategori */
.exp-card { margin-top: 28px; padding: 24px 22px 28px; background: #121110; border: 1px solid #2a2520; border-radius: 14px; }
.exp-price { text-align: center; font-size: 13px; color: #b8b0a2; margin: -10px 0 18px; }
.exp-day-closed, .exp-day:disabled { background: #1c1b1a; color: #5a554d; border-color: #1c1b1a; cursor: not-allowed; text-decoration: line-through; }
.exp-day-closed:hover { border-color: #1c1b1a; }
.exp-total { font-weight: 600; color: #F0663F; margin: 6px 0 0; }
.exp-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.exp-admin-grid .form-card { max-width: none; }
.exp-weekdays { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 14px; }
.exp-wd { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; margin: 0; }
.exp-wd input { width: auto; margin: 0; }
.exp-closed-list { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13px; }
.exp-closed-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #2a2a2a; }

/* Experience: menu pilihan */
.exp-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #2a2a2a; }
.exp-menu-name { font-weight: 600; }
.exp-menu-desc { font-size: 12px; color: #8d877b; margin-top: 2px; }
.exp-menu-price { font-size: 13px; color: #F0663F; margin-top: 4px; }
.exp-qty { display: flex; align-items: center; gap: 6px; }
.exp-qty input { width: 44px; text-align: center; padding: 6px 0; margin: 0; }
.exp-qty-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid #5a4630; color: #f2ede4; font-size: 18px; line-height: 1; cursor: pointer; }
.exp-qty-btn:hover { border-color: #E24C2B; color: #F0663F; }
.exp-menu-add { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.exp-menu-add input { margin: 0; }
@media (max-width: 700px) { .exp-menu-add { grid-template-columns: 1fr; } }

/* Homepage: tile Origin lebih lebar, semua tile sama tinggi */
.shop-tile-origin { margin-top: 14px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.shop-tile-origin .shop-tile-subchips a { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; border-color: #3a342c; color: #f2ede4; }
.shop-tile-origin .shop-tile-subchips a:hover { border-color: #E24C2B; background: #E24C2B; color: #0d0d0d; }
@media (max-width: 560px) { .shop-tile-origin { margin-top: 14px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; } }

/* Admin Experience: sub-tab */
.exp-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.exp-subtab { padding: 9px 16px; border: 1px solid #333; border-radius: 999px; color: #f2ede4; text-decoration: none; font-size: 13px; }
.exp-subtab:hover:not(.active) { border-color: #E24C2B; color: #F0663F; }
.exp-subtab.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; font-weight: 600; }

/* Omakase: pilih kopi dari lineup */
.exp-lineup { padding: 0 0 14px; border-bottom: 1px solid #2a2a2a; }
.exp-lineup-title { font-size: 12px; color: #8d877b; margin: 0 0 6px; }
.exp-lineup select { display: block; width: 100%; margin: 0 0 6px; }
.exp-menu-add { grid-template-columns: 2fr 2fr 1fr 1fr auto; }
@media (max-width: 700px) { .exp-menu-add { grid-template-columns: 1fr; } }
.exp-lineup select { background: #0d0d0d; color: #f2ede4; border: 1px solid #333; border-radius: 4px; padding: 10px 12px; font-size: 14px; }
.exp-lineup select:focus { outline: none; border-color: #E24C2B; }

.exp-extra-title { margin: 22px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8d877b; border-top: 1px solid #2a2a2a; padding-top: 14px; }

/* Omakase berkategori */
.exp-pick { margin: 0 0 12px; }
.exp-pick-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.exp-pick-tab { padding: 6px 12px; border: 1px solid #5a4630; border-radius: 999px; background: transparent; color: #f2ede4; font-size: 12px; cursor: pointer; }
.exp-pick-tab:hover:not(.active) { border-color: #E24C2B; color: #F0663F; }
.exp-pick-tab.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; font-weight: 600; }
.exp-pick select { margin-bottom: 0 !important; }
.exp-tier-pick { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; margin: 4px 0; }
.exp-pick .exp-pick-tab { background: transparent; color: #f2ede4; border: 1px solid #5a4630; padding: 6px 12px; font-weight: 400; }
.exp-pick .exp-pick-tab:hover:not(.active) { border-color: #E24C2B; color: #F0663F; background: transparent; }
.exp-pick .exp-pick-tab.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; font-weight: 600; }
.shop-tile-event .shop-tile-sub strong { color: #F0663F; font-weight: 600; }
.evt-head { margin: 8px 0 4px; }
.evt-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 22px; }
.evt-chip { padding: 8px 16px; border: 1px solid #333; border-radius: 999px; color: #f2ede4; text-decoration: none; font-size: 13px; }
.evt-chip.active { background: #E24C2B; border-color: #E24C2B; color: #0d0d0d; font-weight: 600; }
.evt-section { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8d877b; margin: 26px 0 12px; }
.evt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.evt-card { background: #161310; border: 1px solid #2a2520; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.evt-poster { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #2a1c10, #120d08); display: flex; align-items: center; justify-content: center; color: #5a4630; font-size: 12px; letter-spacing: .1em; position: relative; }
.evt-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; padding: 4px 10px; border-radius: 999px; background: #E24C2B; color: #0d0d0d; font-weight: 600; }
.evt-badge.takeover { background: #f2ede4; }
.evt-badge.join { background: transparent; color: #f2ede4; border: 1px solid #f2ede4; }
.evt-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.evt-date { font-size: 12px; color: #F0663F; letter-spacing: .06em; text-transform: uppercase; }
.evt-title { font-size: 18px; font-weight: 600; margin: 0; }
.evt-meta { font-size: 13px; color: #b8b0a2; }
.evt-desc { font-size: 13px; color: #8d877b; margin: 4px 0 10px; }
.evt-cta { margin-top: auto; align-self: flex-start; padding: 8px 16px; border: 1px solid #E24C2B; border-radius: 4px; color: #F0663F; text-decoration: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.evt-card.past { opacity: .55; }
.evt-detail { max-width: 720px; }
.evt-detail-poster { width: 100%; border-radius: 12px; margin-bottom: 14px; }
.evt-badge-inline { position: static; display: inline-block; }
.evt-ok { background: #1c2a1a; border: 1px solid #3f6b3a; color: #b9e2b3; padding: 10px 14px; border-radius: 8px; margin-top: 16px; }
.exp-menu-edit { border: 1px solid #2a2520; border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #161310; }
.exp-menu-form label { display: block; font-size: 12px; color: #8d877b; margin-bottom: 8px; }
.exp-menu-form input[type=text], .exp-menu-form input[type=number], .exp-menu-form select { width: 100%; box-sizing: border-box; margin-top: 4px; }
.exp-menu-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.exp-menu-form .exp-wd { display: inline-flex; gap: 4px; align-items: center; margin-right: 10px; }
.exp-menu-form .exp-wd input { width: auto; margin: 0; }
.exp-save { margin-top: 6px; padding: 8px 18px; font-size: 13px; }
.exp-menu-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid #2a2520; font-size: 12px; color: #8d877b; }
/* Tombol di baris aksi order: semua sama tinggi (link <a> dan <button> dirender berbeda oleh browser) */
.order-actions-row { align-items: center; }
.order-actions-row .btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 36px; line-height: 1.2; font-family: inherit; font-size: 12px; padding: 0 12px; margin: 0; }
/* Admin Events: daftar berbentuk kartu supaya mudah dipakai di HP */
.evt-admin-list { display: grid; gap: 12px; }
.evt-admin-item { border: 1px solid #2a2520; border-radius: 10px; padding: 12px 14px; background: #161310; display: flex; flex-direction: column; gap: 6px; }
.evt-admin-item.hidden { opacity: .55; }
.evt-admin-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #F0663F; }
.evt-admin-type { color: #8d877b; }
.evt-admin-title { font-size: 16px; }
.evt-admin-meta { font-size: 12px; color: #8d877b; }
.evt-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.evt-admin-actions form { margin: 0; }
.evt-admin-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid #E24C2B; border-radius: 6px; background: transparent; color: #F0663F; font-size: 13px; font-family: inherit; text-decoration: none; cursor: pointer; }
.evt-admin-btn:hover { background: #2a1c10; }
#event-form { scroll-margin-top: 80px; }
.form-card .evt-admin-actions .evt-admin-btn { background: transparent; color: #F0663F; border: 1px solid #E24C2B; padding: 0 14px; margin: 0; font-size: 13px; font-weight: 500; min-height: 40px; }
.form-card .evt-admin-actions .evt-admin-btn:hover { background: #2a1c10; }
.form-card select { width: 100%; box-sizing: border-box; }
/* Input tanggal/jam di tema gelap: ikon kalender/jam harus terlihat dan mudah disentuh */
input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: dark; min-height: 44px; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; padding: 6px; filter: invert(1); }
/* Pemilih tanggal/jam berbasis dropdown (form Events) */
.dt-pick { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.form-card .dt-pick select.dt-sel { width: auto; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px; box-sizing: border-box; }
.dt-clear { background: transparent; color: #8d877b; border: 1px solid #3a3a3a; border-radius: 6px; min-height: 44px; padding: 0 12px; font-size: 12px; cursor: pointer; }
.form-card .dt-pick .dt-clear { margin: 0; width: auto; }
/* Admin Stock */
.stk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 20px; }
.stk-card { border: 1px solid #2a2520; border-radius: 10px; padding: 14px 16px; background: #161310; display: flex; flex-direction: column; gap: 4px; }
.stk-card span { font-size: 12px; color: #8d877b; text-transform: uppercase; letter-spacing: .08em; }
.stk-card strong { font-size: 20px; }
.stk-card-hi { border-color: #E24C2B; }
.stk-card-hi strong { color: #F0663F; }
.stk-card-warn strong { color: #e0b04a; }
.stk-table th, .stk-table td { font-size: 13px; vertical-align: top; }
.stk-table tfoot td { border-top: 1px solid #3a3a3a; }
.stk-warn { background: #1d1708; }
.stk-warn-text { color: #e0b04a; }
.stk-link-cell { min-width: 260px; }
.stk-link-cell form { margin: 0; }
.stk-link-cell select { width: 100%; min-height: 36px; font-size: 12px; box-sizing: border-box; }
.stk-link-cell small { display: block; margin-top: 4px; color: #8d877b; font-size: 11px; }
.stk-st-ok { color: #6bbf6b !important; }
.stk-st-warn { color: #e0b04a !important; }
.stk-st-bad { color: #ff6b6b !important; }
.stk-shrink { display: flex; gap: 10px; align-items: center; margin: 10px 0; font-size: 13px; color: #b8b0a2; }
.stk-shrink input { margin: 0 4px; }

/* ===== Omset ===== */
.om-card-link { text-decoration: none; color: inherit; }
.om-card-link:hover, .om-on { border-color: #E24C2B; }
.om-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.om-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #b8b0a2; }
.om-form .om-wide { grid-column: 1 / -1; }
.om-form input, .om-form select { width: 100%; box-sizing: border-box; }
.om-date { display: flex; gap: 6px; }
.om-date select { flex: 1; min-width: 0; }
.om-form button { grid-column: 1 / -1; }
.om-table td { vertical-align: top; }
.om-mute { font-size: 12px; color: #8d877b; }
.om-actions { min-width: 120px; }
.om-actions form { margin: 0 0 6px; }
.om-actions details { margin-bottom: 6px; }
.om-actions details[open] { min-width: 300px; }
.om-actions summary { cursor: pointer; display: inline-block; }
.om-del { color: #ff6b6b; }
@media (max-width: 640px) { .om-form { grid-template-columns: 1fr; } .om-actions details[open] { min-width: 240px; } }

/* Alamat event -> Google Maps */
.evt-map { color: inherit; text-decoration: underline; text-decoration-color: rgba(232,121,44,.6); text-underline-offset: 3px; }
.evt-map:hover { color: #F0663F; }
.evt-map-btn { display: inline-block; margin-left: 8px; padding: 3px 10px; border: 1px solid #E24C2B; border-radius: 999px; font-size: 12px; color: #F0663F; text-decoration: none; white-space: nowrap; }
.evt-map-btn:hover { background: #E24C2B; color: #111; }

/* ===== Homepage: section ala editorial (judul huruf besar + garis, produk geser samping di HP) ===== */
.home-sec .section-label {
  text-align: left; margin: 42px 0 12px; padding-bottom: 10px; border-bottom: 1px solid #2a2620;
  font-size: 14px; font-weight: 600; letter-spacing: .14em;
}
.home-sec .section-sub { text-align: left; margin: -2px 0 16px; color: #8d877b; }
.home-sec .product-card { background: transparent; border: 0; padding: 0; border-radius: 0; }
.home-sec .product-card:hover { border: 0; }
.home-sec .product-card img { max-height: none; aspect-ratio: 4 / 3; height: auto; border-radius: 6px; object-fit: cover; }
.home-sec .img-placeholder { height: auto; aspect-ratio: 4 / 3; border-radius: 6px; }
.home-sec .product-card h3 {
  margin: 8px 0 4px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}
.home-sec .product-card p { font-size: 13px; margin: 2px 0; color: #cfc9ba; }
.home-sec .category-badge { background: transparent; border: 1px solid #34302a; color: #b8b0a2; font-size: 10.5px; padding: 2px 9px; }
.home-seeall { text-align: right; margin-top: 14px; }
.home-seeall a {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #f0ede4;
  text-decoration: none; border-bottom: 1.5px solid #f0ede4; padding-bottom: 1px;
}
.home-seeall a:after { content: " \2192"; color: #F0663F; }
.home-seeall a:hover { color: #F0663F; border-color: #E24C2B; }
@media (max-width: 760px) {
  .home-sec .product-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -24px; padding: 0 24px 6px; scroll-padding: 0 24px; scrollbar-width: none;
  }
  .home-sec .product-grid::-webkit-scrollbar { display: none; }
  .home-sec .product-card { flex: 0 0 172px; scroll-snap-align: start; }
}

/* ===== Header oranye (warna St.Roast), isi halaman tetap hitam ===== */
.navbar { background: #E24C2B; color: #120d08; border-bottom: 0; min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
.navbar .hamburger-trigger, .navbar .nav-links a, .navbar .link-btn, .navbar .account-trigger, .navbar .icon-link { color: #120d08; }
.navbar .icon-link:hover, .navbar .nav-links a:hover, .navbar .account-trigger:hover { color: #fff; text-decoration: none; }
.brand-wordmark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #120d08; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: .06em; white-space: nowrap;
}
.brand-wordmark span { font-weight: 300; }
.brand-wordmark:hover { color: #120d08; }
.cart-badge {
  position: absolute; top: -6px; right: -8px; background: #120d08; color: #F0663F; font-size: 10px; font-weight: 700;
  border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
/* dropdown menu tetap gelap & terbaca (teks di dalamnya jangan ikut gelap) */
.navbar .main-menu-dropdown a, .navbar .account-dropdown a, .navbar .account-dropdown .link-btn { color: #f0ede4; }
.navbar .main-menu-dropdown a:hover, .navbar .account-dropdown a:hover, .navbar .account-dropdown .link-btn:hover { color: #F0663F; }
/* ikon akun hanya tampil di HP (nama panjang bikin header sesak) */
.acc-icon { display: none; }
@media (max-width: 560px) {
  .navbar { padding-left: 16px; padding-right: 16px; }
  .brand-wordmark { font-size: 19px; }
  .acc-hi, .acc-role, .acc-name, .acc-login { display: none; }
  .acc-icon { display: block; }
  .nav-links { gap: 10px; }
}

/* Tile terakhir yang ganjil di HP dibuat selebar penuh supaya tidak sendirian */
@media (max-width: 560px) { .shop-tiles > .shop-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ===== Homepage: tile dirapikan jadi 3 baris (fitur / kategori / origin), tinggi tile seragam ===== */
.shop-tiles { align-items: stretch; }
.shop-tiles > .shop-tile { height: 100%; }
.shop-sublabel { margin: 26px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8d877b; }
.shop-tiles-cat { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shop-tiles-cat .shop-tile { padding: 14px 18px; gap: 4px; justify-content: center; }
.shop-tiles-cat .shop-tile-title { font-size: 17px; }
.shop-tiles-cat .shop-tile-sub { font-size: 12px; }
@media (max-width: 560px) {
  .shop-tiles-cat { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-tiles-cat .shop-tile { padding: 12px 14px; }
  .shop-tiles-cat .shop-tile-title { font-size: 16px; }
  .shop-sublabel { margin-top: 20px; }
}

/* Event hero slider */
.evh { position: relative; margin: 14px 0 6px; border-radius: 14px; overflow: hidden; background: #120d08; }
.evh-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.evh-track::-webkit-scrollbar { display: none; }
.evh-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; gap: 22px; padding: 22px; min-height: 300px; color: #f2ede4; text-decoration: none; overflow: hidden; box-sizing: border-box; }
.evh-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(26px) brightness(.38); transform: scale(1.1); }
.evh-slide > *:not(.evh-bg) { position: relative; z-index: 1; }
.evh-img { flex: 0 0 auto; height: 260px; max-width: 42%; border-radius: 10px; object-fit: contain; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.evh-noimg { flex: 0 0 auto; width: 180px; height: 240px; border-radius: 10px; background: linear-gradient(135deg,#2a1c10,#120d08); }
.evh-info { min-width: 0; flex: 1; }
.evh-date { color: #F0663F; font-size: 13px; font-weight: 600; margin-top: 8px; }
.evh-title { font-size: 26px; line-height: 1.15; margin: 4px 0 8px; font-weight: 700; }
.evh-loc { font-size: 13px; color: #cfc7b8; }
.evh-btn { display: inline-block; margin-top: 14px; background: #E24C2B; color: #fff; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.evh-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.evh-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); border: 0; padding: 0; cursor: pointer; }
.evh-dot.on { background: #E24C2B; width: 18px; border-radius: 4px; }
.evh-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; cursor: pointer; }
.evh-nav.prev { left: 8px; } .evh-nav.next { right: 8px; }
@media (max-width: 560px) {
  .evh-slide { padding: 16px 16px 30px; gap: 14px; min-height: 230px; }
  .evh-img { height: 180px; max-width: 44%; }
  .evh-noimg { width: 120px; height: 170px; }
  .evh-title { font-size: 19px; }
  .evh-nav { display: none; }
}

/* Header: warna logo St.Roast (oranye-merah), teks krem agar beda dari oranye terang */
.navbar { background: #E24C2B; color: #fff4e8; box-shadow: 0 1px 0 #b93a1f; }
.navbar .hamburger-trigger, .navbar .nav-links a, .navbar .link-btn, .navbar .account-trigger, .navbar .icon-link { color: #fff4e8; }
.navbar .icon-link:hover, .navbar .nav-links a:hover, .navbar .account-trigger:hover { color: #fff; }
.brand-wordmark, .brand-wordmark:hover { color: #fff4e8; }
.cart-badge { background: #120d08; color: #fff4e8; }
.navbar .main-menu-dropdown a:hover, .navbar .account-dropdown a:hover, .navbar .account-dropdown .link-btn:hover { color: #E24C2B; }

/* Teks di atas tombol brand: putih krem agar kontras */
.btn, .hero-cta { color: #fff4e8; }
.btn-outline { color: #F0663F; }
.btn-outline:hover { background: #2a120c; }
.navbar .main-menu-dropdown a:hover, .navbar .account-dropdown a:hover, .navbar .account-dropdown .link-btn:hover { color: #F0663F; }

/* Footer: 4 kanal sosial rapi dalam satu baris (ikon di atas, label di bawah) */
.footer-follow { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8d877b; margin: 0 0 12px; }
.site-footer .footer-social { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: 0 auto 16px; }
.site-footer .social-icon { flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid #2a2520; border-radius: 12px; background: #120f0c; font-size: 12px; min-width: 0; }
.site-footer .social-icon span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.site-footer .social-icon:hover { border-color: #E24C2B; text-decoration: none; }
@media (max-width: 380px) { .site-footer .social-icon { font-size: 11px; } }

/* Footer: semua kanal menampilkan identitasnya; HP = 2 kolom, layar lebar = 4 kolom */
.site-footer .footer-social { grid-template-columns: repeat(2, 1fr); max-width: 440px; }
.site-footer .social-icon { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 14px; text-align: left; }
.site-footer .social-icon svg { flex: 0 0 auto; }
@media (min-width: 900px) { .site-footer .footer-social { grid-template-columns: repeat(4, auto); max-width: none; justify-content: center; } }
@media (max-width: 899px) { .site-footer .social-icon[aria-label="Email"], .site-footer .social-icon[aria-label="WhatsApp"] { grid-column: 1 / -1; } }

/* Cash & Stock */
.pos-up { color: #5fcf8a; font-weight: 600; }
.pos-down { color: #ff6b6b; font-weight: 600; }
.pos-flat { color: #8d877b; }
.pos-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pos-table th, .pos-table td { white-space: nowrap; }
.pos-chart { width: 100%; max-width: 640px; height: auto; background: #161310; border: 1px solid #2a2520; border-radius: 10px; }

/* Forecast stok */
.fc-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 16px; }
.fc-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #b8b0a2; }
.fc-controls input, .fc-controls select { min-height: 36px; box-sizing: border-box; }
.fc-cat { margin-top: 30px; padding-top: 6px; border-top: 1px solid #2a2520; }
.fc-cat h3 { margin: 12px 0 0; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
.fc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.fc-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.fc-urgent { background: #3a1510; color: #ff8a72; }
.fc-soon { background: #3a2c0c; color: #e0b04a; }
.fc-ok { background: #12301d; color: #5fcf8a; }
.fc-idle { background: #26221d; color: #8d877b; }
.stk-card em { font-style: normal; font-size: 12px; }
@media (max-width: 760px) { .fc-split { grid-template-columns: 1fr; } }

.ws-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; text-align: left; margin: 0 auto 18px; max-width: 520px; }
.ws-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #a8a29a; min-width: 0; }
.ws-form input, .ws-form select { background: #111; border: 1px solid #333; color: #f0ede4; border-radius: 8px; padding: 9px 10px; font-size: 14px; width: 100%; box-sizing: border-box; min-width: 0; font-family: inherit; }
.ws-form .ws-wide { grid-column: 1 / -1; }

.wholesale-prices { background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.wholesale-prices h3 { margin: 0 0 6px; font-size: 17px; }
.ws-note { color: #a8a29a; font-size: 13.5px; margin: 0 0 12px; line-height: 1.6; }
.ws-origin { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #a8a29a; max-width: 320px; }
.ws-origin select { background: #111; border: 1px solid #333; color: #f0ede4; border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit; }
#ws-price-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ws-prod { background: #111; border: 1px solid #2e2e2e; border-radius: 10px; padding: 12px; }
.ws-prod > strong { display: block; margin-bottom: 6px; font-size: 14px; }
.ws-size { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 4px 0; border-top: 1px dashed #2a2a2a; color: #cfc9ba; }
.ws-size s { color: #8d877b; }
.ws-size b { color: #E24C2B; }
.ws-av { font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid #333; color: #8d877b; }
.ws-av-in { color: #4cc38a; border-color: #2d5a45; }
.ws-av-low { color: #e8a72c; border-color: #6a4f17; }
.ws-av-out { color: #ff6b6b; border-color: #6a2a2a; }

.brew-link{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:560px;margin:24px auto 0;padding:14px 16px;border:1px solid #2b2926;border-radius:12px;background:#141311;color:#F0663F;text-decoration:none}
.brew-link strong{display:block;font-size:14px;color:#f0ede4}
.brew-link small{display:block;font-size:12px;color:#a8a29a;margin-top:2px}
.brew-link:hover{border-color:#E24C2B}
.brew-page{max-width:600px;margin:0 auto;padding:24px 16px}
.brew-page h2{margin:4px 0 8px;font-size:26px}
.brew-page-sub{color:#a8a29a;font-size:14px;line-height:1.6;margin:0 0 8px}
.brew-page .brew-guide-wrap{margin-top:16px;max-width:none}
.footer-links{text-align:center;margin:14px 0 4px;font-size:13px}
.footer-links a{color:#c9c4ba;text-decoration:underline}

/* ===== Gaya baru: menu pill melayang + hero judul besar (terinspirasi Awwwards Room & Pillar) ===== */
body { background: #0b0b0b; }
.navbar {
  position: sticky; top: 10px; margin: 10px 12px 0; min-height: 54px; padding: 6px 12px 6px 14px;
  border-radius: 999px; background: rgba(20,19,17,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid #3a3733; box-shadow: 0 8px 24px rgba(0,0,0,.45); color: #f0ede4; flex-wrap: nowrap;
}
.navbar .hamburger-trigger, .navbar .nav-links a, .navbar .link-btn, .navbar .account-trigger, .navbar .icon-link { color: #f0ede4; }
.navbar .icon-link:hover, .navbar .nav-links a:hover, .navbar .account-trigger:hover { color: #E24C2B; }
.brand-wordmark, .brand-wordmark:hover { color: #f0ede4; font-size: 18px; }
.brand-wordmark { font-weight: 800; }
.cart-badge { background: #E24C2B; color: #fff; }
.main-menu-dropdown { left: 8px; top: calc(100% + 8px); border-radius: 16px; }
.account-dropdown { border-radius: 16px; }
.navbar .account-trigger { background: #E24C2B; color: #fff; border-radius: 999px; padding: 7px 12px; }
.navbar .account-trigger:hover { color: #fff; background: #F0663F; }
@media (min-width: 1040px) { .navbar { max-width: 960px; margin-left: auto; margin-right: auto; } }

.hero-slider { border-radius: 24px; }
.hero-slide-plain-bg { min-height: 440px; background: radial-gradient(circle at 50% 78%, #2a1a14 0%, #14100b 48%, #0b0b0b 80%); }
.hero-slide-plain-bg .hero-slide-content { padding: 48px 20px 40px; }
.hero-slide-content h1.hero-big {
  font-size: clamp(42px, 13vw, 72px); line-height: .95; letter-spacing: -.035em; font-weight: 800; margin: 6px 0 18px;
  overflow-wrap: anywhere;
}
.hero-big em { font-style: normal; color: #E24C2B; }
.hero-slide-plain-bg .hero-divider { display: none; }
.hero-slide-plain-bg .hero-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #a8a29a; max-width: 280px; line-height: 1.7; }
.hero-slide-plain-bg .hero-cta { border-radius: 999px; }
.announce-bar{border-radius:14px;margin-bottom:10px}.hero-dots{background:#0b0b0b}

/* ===== Rapikan hero & kategori ===== */
.hero-slide-plain-bg .hero-corner, .hero-slide-plain-bg .hero-slide-dots-deco { display: none; }
.hero-slider .hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; padding: 0; background: transparent; z-index: 3; }
.hero-dot { background: rgba(255,255,255,.28); }
.hero-dot.active { background: #E24C2B; }
.hero-slide-plain-bg { min-height: 380px; }
.hero-slide-plain-bg .hero-slide-content { padding: 36px 20px 44px; }
.hero-slide-rich { min-height: 380px; }
.announce-bar { background: transparent; border: 0; font-size: 11px; padding: 6px 10px; margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #a8a29a; letter-spacing: .04em; }
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; margin: 0 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips a { flex: 0 0 auto; padding: 10px 18px; border: 1px solid #3a3733; border-radius: 999px; color: #f0ede4; font-size: 13px; font-weight: 600; text-decoration: none; background: #141311; }
.cat-chips a:hover { border-color: #E24C2B; color: #E24C2B; }

/* Link Brewing Guide di halaman produk -- kartu rapi dengan ikon */
.brew-link { margin-top: 20px; padding: 14px 16px; gap: 14px; justify-content: flex-start; text-decoration: none !important; }
.brew-link::before { content: "\2615"; display: flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: rgba(226,76,43,.14); border: 1px solid rgba(226,76,43,.4); color: #E24C2B; font-size: 18px; }
.brew-link > span:first-child { flex: 1; min-width: 0; }
.brew-link strong { text-decoration: none; font-size: 14px; }
.brew-link small { text-decoration: none; }
.brew-link > span:last-child { color: #E24C2B; font-size: 18px; }

/* ===== Award-Winning Roasts (prestasi) ===== */
.ach { margin: 44px 0 8px; text-align: center; }
.ach-eyebrow { font-size: 11px; letter-spacing: .28em; color: #E24C2B; font-weight: 700; margin: 0 0 8px; }
.ach-title { font-size: clamp(26px, 7vw, 40px); font-weight: 800; letter-spacing: -.01em; margin: 0 0 22px; text-transform: uppercase; border: 0; padding: 0; }
.ach-tabs { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 0 0 26px; border-bottom: 1px solid #2b2926; }
.ach-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #8d877b; font: 700 13px/1 inherit; font-family: inherit; letter-spacing: .1em; text-transform: uppercase; padding: 0 2px 14px; cursor: pointer; margin-bottom: -1px; }
.ach-tab.is-active { color: #E24C2B; border-bottom-color: #E24C2B; }
.ach-panel[hidden] { display: none; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; text-align: left; }
.ach-item { display: flex; gap: 16px; align-items: flex-start; }
.ach-badge { flex: 0 0 76px; height: 76px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 25%, #3a2a22, #1a1512); border: 1px solid #E24C2B; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.ach-badge img { width: 100%; height: 100%; object-fit: cover; }
.ach-year { font-size: 12px; color: #8d877b; margin-bottom: 4px; }
.ach-body h3 { font-size: 16px; line-height: 1.35; margin: 0 0 6px; color: #f0ede4; }
.ach-body p { font-size: 13px; line-height: 1.55; color: #a8a29a; margin: 0; }
.ach-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.ach-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #3a3733; background: transparent; color: #f0ede4; cursor: pointer; }
.ach-nav button:hover { border-color: #E24C2B; color: #E24C2B; }
@media (max-width: 640px) { .ach-grid { grid-template-columns: 1fr; gap: 22px; } .ach-badge { flex-basis: 64px; height: 64px; } .ach-tabs { gap: 14px; } }

/* Our Achievements -- disederhanakan: judul sama dengan section lain, rata kiri */
.ach { margin: 36px 0 8px; text-align: left; }
.ach-tabs { justify-content: flex-start; margin: 0 0 22px; }
.ach-body, .ach-body h3, .ach-body p { overflow-wrap: anywhere; min-width: 0; }
.ach-item { min-width: 0; }
.ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ach-grid { grid-template-columns: minmax(0, 1fr); } }

/* Judul produk seragam di semua halaman (Poppins kapital, tidak italic) */
.product-card h3 { font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; margin: 10px 0 6px; }
.product-card h3 a { font-style: normal; }
.home-sec .product-card h3 { font-size: 12px; }

/* Lambang di header pill */
.brand-wordmark { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { height: 24px; width: auto; display: block; }
@media (max-width: 380px) { .brand-mark { height: 20px; } .brand-wordmark { font-size: 16px; } }

/* Titik slide tidak menimpa keterangan di slide foto/poster */
.hero-slide-photo-bg .hero-slide-content { padding-bottom: 38px; }
.brand-wordmark .brand-text { font-weight: 800; } .brand-wordmark .brand-text span { font-weight: 300; }
@media (max-width: 560px) {
  .brand-wordmark { font-size: 15px; gap: 6px; letter-spacing: .04em; }
  .brand-mark { height: 20px; }
  .navbar .nav-links { gap: 8px; }
}

/* Brewing Guide: intro + daftar peralatan */
.brew-intro { font-size: 14px; line-height: 1.7; color: #cfc9ba; margin: 22px 0 14px; }
.brew-setup { margin: 0 0 26px; padding: 4px 0; border-top: 1px solid #22201e; }
.brew-setup > div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid #22201e; font-size: 14px; }
.brew-setup dt { flex: 0 0 82px; color: #E24C2B; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.brew-setup dd { margin: 0; color: #f0ede4; font-weight: 500; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }

/* Tombol "outline" yang dipakai bersama class .btn: jangan tertimpa warna oranye penuh */
.btn.btn-outline { background: transparent; color: #F0663F; border: 1px solid #E24C2B; }
.btn.btn-outline:hover { background: #2a1c10; color: #F0663F; }