* { 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: #2a2a2a; }

.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: #2a2a2a; border: 1px solid #E24C2B; color: #F0663F; }
.status-confirmed { background: #2a2a2a; border: 1px solid #d6d1c8; color: #d6d1c8; }
.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: #2a2a2a; color: #F0663F; }
.order-status-confirmed { background: #2a2a2a; color: #d6d1c8; }
.order-status-cancelled { background: #2a1414; color: #ff6b6b; }
.order-status-not_shipped { background: #2a2a2a; color: #a8a29a; }
.order-status-shipped { background: #2a2a2a; color: #F0663F; }
.order-status-delivered { background: #2a2a2a; color: #d6d1c8; }

.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: #E24C2B; 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: #d6d1c8; 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: #d6d1c8; border-color: #d6d1c8; }
.step-pill.step-active { color: #F0663F; border-color: #E24C2B; background: #2a2a2a; 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: #1a1a1a; padding: 16px; border-radius: 16px; border: 1px solid #2a2a2a;
  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, #242424, #1a1a1a); 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: #e6e1d8; }
.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: #2e2e2e;
  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: #3a3a3a; 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, #1f1f1f 0%, #141414 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: #a39d93; }

/* 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: #1c1c1c; border-radius: 16px; border: 1px solid #2c2c2c; }
.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 #3a3a3a; 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 #3a3a3a; background: #1c1c1c;
  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: #3a3a3a; 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: #2a2a2a; }
.discount-msg { font-size: 12px; margin: 6px 0 0; min-height: 0; color: #a8a29a; }
.discount-ok { color: #d6d1c8; }
.discount-bad { color: #ff6b6b; }
.sum-row.sum-discount, #discount-row { color: #d6d1c8; }


/* ---- 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, #2a2a2a, #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 #5a5a5a; 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: #161616; border: 1px solid #2a2a2a; 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 #2a2a2a; 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 #5a5a5a; 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: #3a3a3a; 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 #5a5a5a; 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 #5a5a5a; 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: #161616; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.evt-poster { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #2a2a2a, #121212); display: flex; align-items: center; justify-content: center; color: #5a5a5a; 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: #2a2a2a; border: 1px solid #d6d1c8; color: #d6d1c8; padding: 10px 14px; border-radius: 8px; margin-top: 16px; }
.exp-menu-edit { border: 1px solid #2a2a2a; border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #161616; }
.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 #2a2a2a; 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 #2a2a2a; border-radius: 10px; padding: 12px 14px; background: #161616; 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: #2a2a2a; }
#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: #2a2a2a; }
.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 #2a2a2a; border-radius: 10px; padding: 14px 16px; background: #161616; 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: #1d1d1d; }
.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: #d6d1c8 !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 #2a2a2a;
  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 #343434; 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: #121212; 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: #121212; }
.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: #121212; 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: #121212; }
.cart-badge {
  position: absolute; top: -6px; right: -8px; background: #121212; 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: #121212; }
.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,#2a2a2a,#121212); }
.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: #121212; 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 #2a2a2a; border-radius: 12px; background: #121212; 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: #d6d1c8; 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: #161616; border: 1px solid #2a2a2a; 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 #2a2a2a; }
.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: #3a3a3a; color: #e0b04a; }
.fc-ok { background: #303030; color: #d6d1c8; }
.fc-idle { background: #262626; 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: #d6d1c8; border-color: #5a5a5a; }
.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:#141414;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%, #2a2a2a 0%, #141414 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: #141414; }
.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%, #3a3a3a, #1a1a1a); 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: #2a2a2a; color: #F0663F; }

/* Kartu Brewing Guide: pakai lambang St.Roast, bukan emoji cangkir */
.brew-link::before { content: ""; font-size: 0; background: rgba(226,76,43,.12) url("/images/logo-mark.png") center / 24px auto no-repeat; }
.brew-link::before { flex: 0 0 46px; height: 46px; background-size: 32px auto; filter: brightness(1.25); }
.brew-link { background: #000; border-color: #2b2926; }
.brew-link::before { background: #000 url("/images/logo-mark-orange.png") center / 32px auto no-repeat; filter: none; border-color: #E24C2B; }

/* Tablet/desktop: tiap section homepage menampilkan 1 baris rapi (4 produk), sisanya lewat "Shop all" -- tidak ada baris yatim dengan 1-2 kartu */
@media (min-width: 761px) { .home-sec .product-grid > .product-card:nth-child(n+5) { display: none; } }
.brew-opt { display: block; }

/* ===== Black surfaces + orange outline (home: hero, tiles, chips, origin) ===== */
.hero-slider { background: #000; border: 1px solid rgba(226,76,43,.65); }
.shop-tile { background: #000; border: 1px solid rgba(226,76,43,.55); }
.shop-tile:hover { border-color: #E24C2B; box-shadow: 0 0 0 1px rgba(226,76,43,.35); }
.shop-tile-eyebrow { color: #E24C2B; }
.shop-tile-flash.is-live { background: #000; border-color: #E24C2B; box-shadow: inset 0 0 0 1px rgba(226,76,43,.5); }
.shop-tile-flash.is-live .shop-tile-eyebrow, .shop-tile-flash.is-live .shop-tile-sub { color: #F0663F; }
.cat-chips a { background: #000; border: 1px solid rgba(226,76,43,.65); }
.cat-chips a:hover { background: #E24C2B; color: #000; border-color: #E24C2B; }
.shop-tile-origin .shop-tile-subchips a { border-color: rgba(226,76,43,.5); background: transparent; }
.shop-tile-origin .shop-tile-subchips a:hover { background: #E24C2B; color: #000; border-color: #E24C2B; }
.hero-slide-plain-bg { background: #000; }

/* Free shipping note */
.free-ship-note { margin: 12px 0; padding: 11px 14px; border: 1px solid rgba(226,76,43,.55); border-radius: 12px; background: #000; color: #f0ede4; font-size: 13px; line-height: 1.5; }
.free-ship-note strong { color: #F0663F; }
.free-ship-note.is-on { border-color: #d6d1c8; }
.free-ship-note.is-on strong { color: #d6d1c8; }

/* Free shipping: sembunyikan nominal ongkir di pilihan kurir, customer cukup memilih kurir */
.free-ship-on .courier-price { display: none; }

/* Wholesale request form */
.ws-form textarea { background: #111; border: 1px solid #333; color: #f0ede4; border-radius: 8px; padding: 9px 10px; font-size: 14px; width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; }
.ws-form input:focus, .ws-form select:focus, .ws-form textarea:focus { outline: none; border-color: #E24C2B; }
.ws-form .ws-hint { margin: 0; font-size: 12px; color: #77726a; }
.ws-form button.btn { justify-self: center; }
.footer-links a { color: #8d877b; text-decoration: none; } .footer-links a:hover { color: #E24C2B; }

/* ===== Polish layer: tampilan lebih tenang & konsisten (hapus blok ini untuk kembali ke gaya sebelumnya) ===== */
::selection { background: rgba(226,76,43,.45); color: #fff; }
:focus-visible { outline: 2px solid #E24C2B; outline-offset: 2px; border-radius: 4px; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Garis oranye hanya muncul saat disentuh/dipilih; kondisi diam memakai garis netral */
.hero-slider { border-color: #262626; }
.shop-tile { background: #0f0e0d; border-color: #262626; }
.shop-tile:hover { border-color: rgba(226,76,43,.7); box-shadow: none; }
.shop-tile-eyebrow { color: #8d877b; letter-spacing: .12em; }
.cat-chips a { background: #0f0e0d; border-color: #2e2e2e; font-weight: 500; }
.shop-tile-origin .shop-tile-subchips a { border-color: #2e2e2e; }
.free-ship-note { border-color: #2e2e2e; }
/* Badge negara berupa kode huruf kecil, bukan emoji bendera */
.cc { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; padding: 1px 5px; margin-right: 6px; border-radius: 3px; background: #262626; color: #cfc9ba; vertical-align: 1px; }
.home-sec .category-badge, .category-badge { font-weight: 500; }
/* Badge lot: lebih ramping */
.premium-badge { font-size: 10.5px; letter-spacing: .04em; padding: 3px 9px; border-radius: 4px; }
.category-badge { border-radius: 4px; }
/* Status stok: kecil dan tenang, tidak berteriak */
.stock-status { font-weight: 500; font-size: 12px; display: flex; align-items: center; gap: 6px; color: #a8a29a; }
.stock-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stock-status.low-stock { color: #d9a05b; }
.stock-status.sold-out { color: #a39d93; }
/* Gambar produk: transisi halus, rasio seragam */
.home-sec .product-card img, .product-card img { transition: transform .35s ease, opacity .2s; }
.product-card:hover img { opacity: .92; }
.home-sec .product-card h3 { letter-spacing: .03em; font-weight: 600; }
/* Prestasi: ikon garis, bukan emoji */
.ach-badge { background: #121110; border-color: #2e2e2e; color: #E24C2B; }
.ach-item:hover .ach-badge { border-color: #E24C2B; }
.ach-ico { display: block; }
/* Lokasi */
.location-address { color: #b8b0a2; letter-spacing: .02em; }
/* Tombol: tinggi & tekstur seragam */
.btn { transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* Testimoni pelanggan */
.voices { margin: 56px 0 12px; }
.voices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.voice { margin: 0; padding: 22px 22px 18px; background: #0f0e0d; border: 1px solid #262626; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.voice blockquote { margin: 0; font-size: 15px; line-height: 1.65; color: #e3ddd0; }
.voice figcaption { font-size: 12.5px; color: #8d877b; display: flex; flex-direction: column; gap: 2px; }
.voice figcaption strong { color: #f0ede4; font-weight: 600; font-size: 13.5px; }
/* Form newsletter di footer */
.footer-news { max-width: 380px; margin: 0 auto 16px; text-align: center; }
.footer-news label { display: block; font-size: 12px; color: #8d877b; margin-bottom: 8px; }
.footer-news div { display: flex; gap: 8px; }
.footer-news input { flex: 1; min-width: 0; background: #0f0e0d; border: 1px solid #2e2e2e; color: #f0ede4; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.footer-news input:focus { outline: none; border-color: #E24C2B; }
.footer-news button { background: transparent; border: 1px solid #3a3733; color: #f0ede4; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.footer-news button:hover { border-color: #E24C2B; color: #E24C2B; }
/* Tombol WhatsApp melayang */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: #d6d1c8; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .15s, background .15s; }
.wa-float:hover { background: #d6d1c8; transform: translateY(-2px); }
@media print { .wa-float { display: none; } }
/* Keranjang: lebih rapi dan konsisten dengan tema gelap */
.cart-qty-form input[type=number] { background: #0f0e0d; color: #f0ede4; border: 1px solid #2e2e2e; border-radius: 6px; padding: 6px 8px; font-family: inherit; }
.cart-qty-form input[type=number]:focus { outline: none; border-color: #E24C2B; }
.cart-item .btn-danger { background: transparent; color: #b8b0a2; border: 1px solid #3a3733; }
.cart-item .btn-danger:hover { color: #ff8a8a; border-color: #8a3a3a; }
.cart-item-img { width: 72px !important; height: 72px !important; object-fit: cover; border-radius: 8px; }
.checkout-summary.cart-total { display: flex; justify-content: space-between; align-items: center; }
a.btn[href="/cart/checkout"] { display: block !important; width: 100%; max-width: 360px; text-align: center; margin-left: auto; padding: 14px 20px; }
@media (max-width: 560px) { a.btn[href="/cart/checkout"] { max-width: none; } }
#back-link { color: #a8a29a; font-size: 13px; text-decoration: none; } #back-link:hover { color: #F0663F; }
/* Halaman kategori produk: judul, sub-judul, dan dropdown jenis produk seragam di semua halaman */
html { scrollbar-gutter: stable; }
.type-sub { color: #a8a29a; font-size: 13px; margin: -8px 0 4px; }
.filter-select[aria-label="Product type"] { flex: 0 0 auto; width: 240px; max-width: 100%; }
/* Tab jenis produk (menggantikan dropdown): satu baris yang bisa digeser di HP */
.type-tabs { flex: 1 1 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.type-tabs::-webkit-scrollbar { display: none; }
.type-tabs a { flex: 0 0 auto; padding: 9px 16px; border: 1px solid #2e2e2e; border-radius: 999px; background: #0f0e0d; color: #cfc9ba; font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; }
.type-tabs a:hover { border-color: #E24C2B; color: #f0ede4; }
.type-tabs a.is-active { background: #E24C2B; border-color: #E24C2B; color: #fff; font-weight: 600; }
/* Tanggal roasting & daftar tunggu stok */
.roast-date { margin: 2px 0 8px; font-size: 13px; color: #b8b0a2; } .roast-date strong { color: #f0ede4; font-weight: 600; }
.notify-box { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 14px 16px; border: 1px solid #2e2e2e; border-radius: 10px; background: #0f0e0d; font-size: 13px; color: #b8b0a2; }
.notify-box strong { color: #f0ede4; font-size: 14px; }
.notify-box div { display: flex; gap: 8px; } .notify-box input { flex: 1; min-width: 0; background: #0b0b0b; border: 1px solid #2e2e2e; color: #f0ede4; border-radius: 8px; padding: 10px 12px; font-family: inherit; }
.notify-box input:focus { outline: none; border-color: #E24C2B; }

/* Language switch */
.lang-switch{display:flex;gap:6px;align-items:center}
.main-menu-dropdown .lang-switch{padding:10px 16px 6px;border-top:1px solid #2a2724;margin-top:6px}
.lang-switch a{padding:4px 10px;border:1px solid #3a3733;border-radius:999px;font-size:12px;color:#c9c4ba;text-decoration:none;background:transparent}
.main-menu-dropdown .lang-switch a{padding:4px 10px;display:inline-block}
.lang-switch a.is-on{background:#E24C2B;border-color:#E24C2B;color:#fff}
.lang-switch-foot{justify-content:center;margin:0 0 10px}

/* Instagram, points, loyalty */
.ig-section{margin:36px 0}.ig-sub{margin:-8px 0 12px;font-size:13px}.ig-sub a{color:#F0663F}
.ig-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.ig-card{flex:0 0 min(320px,82%);scroll-snap-align:start;border:1px solid #2e2e2e;border-radius:12px;overflow:hidden;background:#fff}
.ig-card iframe{width:100%;height:440px;border:0;display:block}
.points-box{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:12px 14px;border:1px solid #2e2e2e;border-radius:10px;background:#0f0e0d;cursor:pointer}
.points-box input{width:auto;margin-top:3px}.points-box small{display:block;color:#8d877b;font-size:12px;margin-top:2px}
.loy-card{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin:14px 0 18px;padding:16px;border:1px solid #2e2e2e;border-radius:12px;background:#0f0e0d}
.loy-card strong{font-size:20px;color:#f0ede4}.loy-card small{display:block;color:#8d877b;font-size:12px;margin-top:2px}
.loy-code{font:700 16px/1 monospace;letter-spacing:.08em;color:#F0663F}
.ew-box{margin:14px 0;padding:14px;border:1px solid #2e2e2e;border-radius:12px;background:#0f0e0d}
.ew-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ew-grid .btn{width:100%;box-sizing:border-box;text-align:center}

/* Search, ratings on cards, order actions */
.search-form{display:flex;gap:8px;margin:8px 0 6px}.search-form input{flex:1;min-width:0;padding:12px 14px;background:#0f0e0d;border:1px solid #2e2e2e;border-radius:10px;color:#f0ede4;font-family:inherit;font-size:15px}
.search-form input:focus{outline:none;border-color:#E24C2B}
.search-help{font-size:13px;color:#8d877b;margin:6px 0 16px}.search-help a{color:#F0663F}.search-count{font-size:13px;color:#8d877b;margin:0 0 10px}
.card-rating{margin:2px 0 6px;font-size:12px;color:#c9c4ba}.card-rating span{color:#E7B04A}.card-rating small{color:#77726a}
.order-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.order-actions form{margin:0}.order-actions .btn{font-size:12px;padding:8px 14px}

/* invoice: fit narrow phones */
@media (max-width:520px){
  .invoice-sheet{overflow-x:auto}
  .invoice-table th,.invoice-table td{padding:8px 6px;font-size:12px}
  .invoice-table td:nth-child(4),.invoice-table td:nth-child(5){white-space:nowrap}
}

/* Member card (metal) + stamps */
.mcard-wrap{margin:14px auto 6px;max-width:400px}
.mcard{display:block;width:100%;aspect-ratio:856/540;padding:0;border:0;background:none;cursor:pointer;perspective:1200px;container-type:inline-size;-webkit-tap-highlight-color:transparent;font-family:inherit;color:inherit}
.mcard-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.mcard.flip .mcard-inner{transform:rotateY(180deg)}
.mcard-face{position:absolute;inset:0;display:block;border-radius:4.2cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:left;
  background:
    radial-gradient(120% 90% at var(--mx,25%) var(--my,15%),rgba(255,255,255,.20),rgba(255,255,255,0) 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='270'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.004 .9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.16'/></svg>"),
    linear-gradient(125deg,#4a4c50 0%,#242528 38%,#161618 62%,#2e2f33 100%);
  box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.10),inset 0 .5cqw 0 rgba(255,255,255,.14),inset 0 -.6cqw 1cqw rgba(0,0,0,.55),0 4cqw 9cqw -2cqw rgba(0,0,0,.75)}
.mcard-back{transform:rotateY(180deg)}
.mcard-face::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%);pointer-events:none}
.mc-accent{position:absolute;left:0;right:0;bottom:0;height:1.2cqw;background:linear-gradient(90deg,#8f2a14,#E24C2B 40%,#f08a5e 60%,#E24C2B)}
.mc-logo{position:absolute;left:6.5cqw;top:6cqw;height:11cqw;width:auto;opacity:.92;filter:drop-shadow(0 -.2cqw 0 rgba(0,0,0,.7)) drop-shadow(0 .25cqw 0 rgba(255,255,255,.18))}
.mc-brand{position:absolute;left:20cqw;top:7.6cqw;font:700 6.2cqw/1 'Poppins',sans-serif;letter-spacing:.14em;color:#d9dbe0;text-shadow:0 -.25cqw 0 rgba(0,0,0,.65),0 .25cqw 0 rgba(255,255,255,.2)}
.mc-tier{position:absolute;right:6.5cqw;top:8cqw;font:600 3.2cqw/1 'Poppins',sans-serif;letter-spacing:.32em;color:#a9acb3;text-shadow:0 -.2cqw 0 rgba(0,0,0,.6),0 .2cqw 0 rgba(255,255,255,.15)}
.mc-no{position:absolute;left:6.5cqw;bottom:21cqw;font:600 7.4cqw/1 ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.2em;color:#e3e5ea;text-shadow:0 -.3cqw 0 rgba(0,0,0,.7),0 .3cqw 0 rgba(255,255,255,.22)}
.mc-name{position:absolute;left:6.5cqw;bottom:9cqw;max-width:62cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 4.2cqw/1 'Poppins',sans-serif;letter-spacing:.16em;color:#bfc2c9;text-shadow:0 -.2cqw 0 rgba(0,0,0,.6),0 .2cqw 0 rgba(255,255,255,.15)}
.mc-count{position:absolute;right:6.5cqw;bottom:8.6cqw;font:500 4.2cqw/1 'Poppins',sans-serif;color:#9a9da5;letter-spacing:.06em}.mc-count b{font-size:7.6cqw;font-weight:700;color:#F0663F;text-shadow:0 -.25cqw 0 rgba(0,0,0,.6)}
.mc-strip{position:absolute;left:0;right:0;top:6cqw;height:9cqw;background:linear-gradient(#0a0a0b,#18181a);box-shadow:inset 0 -.3cqw 0 rgba(255,255,255,.06)}
.mc-slots{position:absolute;left:10cqw;right:10cqw;top:20cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:3.2cqw 4cqw}
.mc-slot{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.10);
  background:radial-gradient(circle at 50% 35%,#1b1b1d,#0f0f10);box-shadow:inset 0 .5cqw 1cqw rgba(0,0,0,.85),0 .3cqw 0 rgba(255,255,255,.14)}
.mc-slot svg{width:62%;height:62%}
.mc-slot.on{color:#fff;background:radial-gradient(circle at 35% 25%,#f4825a,#E24C2B 55%,#a8321a);box-shadow:inset 0 -.5cqw 1cqw rgba(0,0,0,.35),inset 0 .4cqw .6cqw rgba(255,255,255,.4),0 .3cqw 0 rgba(255,255,255,.14)}
.mc-slot.gift{color:#c9a85a}.mc-slot.gift.on{color:#2a2a2a;background:radial-gradient(circle at 35% 25%,#f6e3a1,#d8b04e 55%,#9a7425)}
.mc-rule{position:absolute;left:6.5cqw;right:6.5cqw;bottom:5cqw;text-align:center;font:500 3cqw/1.3 'Poppins',sans-serif;letter-spacing:.06em;color:#8f929a;text-shadow:0 .2cqw 0 rgba(255,255,255,.1)}
.mc-hint{text-align:center;font-size:12px;color:#77726a;margin:8px 0 0}
.stamp-progress{max-width:400px;margin:14px auto 0}.stamp-progress p{font-size:13px;color:#a8a29a;margin:8px 0 0}.stamp-progress strong{color:#f0ede4}
.sp-bar{height:8px;border-radius:99px;background:#1c1b19;overflow:hidden}.sp-bar span{display:block;height:100%;background:linear-gradient(90deg,#E24C2B,#f08a5e);border-radius:99px}
.stamp-how{max-width:400px;margin:16px auto 0}.stamp-how p{display:flex;gap:10px;font-size:13px;color:#a8a29a;margin:8px 0;line-height:1.45}
.stamp-how b{flex:0 0 22px;height:22px;border-radius:50%;background:#2a2926;color:#F0663F;font-size:12px;display:flex;align-items:center;justify-content:center}
.stamp-gift{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.stamp-gift small{display:block;color:#8d877b;font-size:12px;margin-top:2px}
.stamp-legacy{font-size:12px;color:#8d877b;margin-top:12px}
.stamp-banner{display:flex;align-items:center;gap:14px;margin:14px 0 18px;padding:14px 16px;border:1px solid #2e2e2e;border-radius:12px;background:#0f0e0d;text-decoration:none;color:inherit}
.stamp-banner strong{font-size:15px;color:#f0ede4;display:block}.stamp-banner small{display:block;color:#8d877b;font-size:12px;margin-top:2px}
.sb-dots{display:grid;grid-template-columns:repeat(5,10px);gap:4px}.sb-dots i{width:10px;height:10px;border-radius:50%;background:#262421}.sb-dots i.on{background:#E24C2B}
@media (prefers-reduced-motion:reduce){.mcard-inner{transition:none}}

/* Experience Bar card: copper accent, separate from the beans card */
.mcard-bar .mc-accent{background:linear-gradient(90deg,#6b3b17,#b8743a 40%,#e0a468 60%,#b8743a)}
.mcard-bar .mc-count b{color:#e0a468}
.mcard-bar .mc-tier{font-size:2.7cqw;letter-spacing:.24em;color:#d7a877}
.mcard-bar .mc-slot.on{background:radial-gradient(circle at 35% 25%,#efc08b,#b8743a 55%,#7a4720);color:#2a2a2a}
.mcard-bar .mcard-face{background:
  radial-gradient(120% 90% at var(--mx,25%) var(--my,15%),rgba(255,235,210,.20),rgba(255,255,255,0) 55%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='270'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.004 .9' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.16'/></svg>"),
  linear-gradient(125deg,#4b4540 0%,#262626 38%,#171717 62%,#333333 100%)}
.mtabs{display:flex;gap:8px;margin:6px 0 14px;max-width:400px}
.mtab{flex:1;padding:10px 12px;border-radius:999px;border:1px solid #2e2e2e;background:#0f0e0d;color:#a8a29a;font:600 13px Poppins,sans-serif;cursor:pointer}
.mtab.on{background:#E24C2B;border-color:#E24C2B;color:#fff}
.mpanel[hidden]{display:none}
.stamp-fine{max-width:400px;margin:4px auto 0;font-size:12px;color:#77726a}

.sg-win{max-width:400px;margin:14px auto 0;padding:14px 16px;border:1px solid #d8b04e;border-radius:14px;background:linear-gradient(160deg,#2a2a2a,#1b1b1b)}
.sg-win strong{display:block;font-size:17px;margin:6px 0 2px;color:#f6e3a1}.sg-win small{color:#a8a29a;font-size:12.5px;line-height:1.4;display:block}
.sg-chip{display:inline-block;background:#d8b04e22;color:#e8b04a;border-radius:20px;padding:2px 10px;font-size:11px;letter-spacing:.08em}
.sg-box{max-width:400px;margin:14px auto 0;padding:14px;border:1px solid #2e2e2e;border-radius:14px;background:#1b1b1b}
.sg-title{margin:0 0 10px;font-size:11.5px;letter-spacing:.1em;color:#F0663F}
.sg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.sg-slot{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#77726a;border:1.5px dashed #4a4a4a}
.sg-slot svg{width:52%;height:52%}
.sg-slot.on{border:0;color:#fff;background:radial-gradient(circle at 35% 30%,#ff7a55,#E24C2B 60%,#a53418);box-shadow:0 3px 8px #E24C2B55}
.sg-slot.next{border:1.5px solid #E24C2B;color:#F0663F;animation:sgp 1.8s ease-in-out infinite}
.sg-slot.gift{border:1.5px solid #c9a85a;color:#c9a85a;background:#d8b04e14}
.sg-slot.gift.on{border:0;color:#2a2a2a;background:radial-gradient(circle at 35% 25%,#f6e3a1,#d8b04e 55%,#9a7425);box-shadow:0 0 14px #d8b04e88}
@keyframes sgp{50%{box-shadow:0 0 0 5px #E24C2B22}}
@media (prefers-reduced-motion:reduce){.sg-slot.next{animation:none}}
.sg-left{margin:14px 0 0;font-size:13px;color:#a8a29a}.sg-left strong{display:block;font-size:20px;color:#f0ede4}
.sg-show{max-width:400px;margin:14px auto 0;padding:12px 16px;border-radius:14px;background:#E24C2B;color:#fff;display:flex;flex-direction:column;gap:2px}
.sg-show-t{font-size:12.5px;opacity:.9}.sg-show-n{font-size:22px;font-weight:700;letter-spacing:.12em}
.sg-li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #2a2a2a;font-size:13px}.sg-li:last-child{border:0;padding-bottom:0}.sg-li small{color:#8d877b}
.sg-how{max-width:400px;margin:14px auto 0;color:#a8a29a;font-size:13px}.sg-how summary{cursor:pointer;color:#a8a29a}.sg-how p{margin:8px 0;line-height:1.5}

/* Stempel abu-abu (kalem, tidak menyolok) */
.sg-slot.on{background:radial-gradient(circle at 35% 30%,#9a9791,#6f6c67 60%,#4b4945);box-shadow:0 2px 6px #0006;color:#f0ede4}
.sg-slot.next{border-color:#8d877b;color:#c9c5bc}
@keyframes sgp{50%{box-shadow:0 0 0 5px #ffffff10}}
.sg-slot.gift.on{background:radial-gradient(circle at 35% 25%,#e9dcae,#bfa35a 55%,#86692a);box-shadow:0 0 10px #d8b04e55}
.mc-slot.on,.mcard-bar .mc-slot.on{color:#f0ede4;background:radial-gradient(circle at 35% 25%,#a3a09a,#74716c 55%,#4b4945);box-shadow:inset 0 -.5cqw 1cqw rgba(0,0,0,.35),inset 0 .4cqw .6cqw rgba(255,255,255,.3),0 .3cqw 0 rgba(255,255,255,.1)}
.mc-slot.gift.on,.mcard-bar .mc-slot.gift.on{color:#2a2a2a;background:radial-gradient(circle at 35% 25%,#f6e3a1,#d8b04e 55%,#9a7425)}
.sb-dots i.on{background:#8d8a84}
.sg-new{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:20px;background:#ffffff14;color:#f0ede4;font-size:11px;font-weight:600}

.sg-show{flex-direction:row;align-items:center;justify-content:space-between}.sg-show-l{display:flex;flex-direction:column;gap:2px}
.sg-qr{flex:0 0 96px;width:96px;height:96px;background:#fff;border-radius:10px;padding:4px}.sg-qr svg{width:100%;height:100%;display:block}
.scan-box{margin-top:10px;display:none}.scan-box.on{display:block}.scan-box video{width:100%;max-height:320px;border-radius:12px;background:#000;object-fit:cover}
.scan-who{margin:8px 0 0;font-size:13px;color:#a8a29a;min-height:18px}.scan-who.ok{color:#d6d1c8}.scan-who.gift{color:#e8b04a;font-weight:600}.scan-who.bad{color:#ff8a7a}

.sg-show{display:block;padding:0;overflow:hidden}.sg-show summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px}
.sg-show summary::-webkit-details-marker{display:none}.sg-show-go{font-size:12px;opacity:.85;white-space:nowrap}
.sg-show-body{display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 16px 16px}
.sg-show-body .sg-qr{flex:none;width:170px;height:170px;padding:6px}.sg-show-body .sg-show-n{font-size:24px}

.hero-slide-content h2 { font-size: 24px; line-height: 1.25; color: #f5f0e8; margin: 0 0 10px; font-weight: 700; }
.hero-slide-content h2.hero-big { font-size: clamp(42px, 13vw, 72px); line-height: .95; letter-spacing: -.035em; font-weight: 800; margin: 6px 0 18px; overflow-wrap: anywhere; }
.upcoming-notify{display:inline-block;margin-top:8px;font-size:12px;padding:7px 14px;background:transparent;border:1px solid #3a3733;color:#f0ede4}
.announce-bar a:hover{color:#E24C2B}
.hero-slide-content h1.hero-big, .hero-slide-content h2.hero-big { font-size: clamp(30px, 9.5vw, 72px); overflow-wrap: break-word; padding: 0 14px; }
.announce-bar { white-space: normal; text-overflow: clip; line-height: 1.5; text-align: center; }

.product-card{position:relative}
.wish-form{position:absolute;top:8px;right:8px;z-index:3;margin:0}
.wish-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:0;background:rgba(15,14,13,.72);color:#8d877b;font-size:17px;line-height:1;cursor:pointer;text-decoration:none;position:relative}
a.wish-guest{position:absolute;top:8px;right:8px;z-index:3}
.wish-btn.on{color:#E24C2B}.wish-btn:hover{color:#f0ede4}.wish-btn.on:hover{color:#E24C2B}
.wish-line{background:transparent;border:1px solid #3a3733;color:#c9c4ba;border-radius:999px;padding:7px 14px;font:600 12.5px Poppins,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.wish-line.on{color:#E24C2B;border-color:#E24C2B}

.fs-bar{height:6px;border-radius:99px;background:#1c1b19;overflow:hidden;margin-top:9px}.fs-bar i{display:block;height:100%;background:linear-gradient(90deg,#8d877b,#c9c4ba);border-radius:99px;transition:width .3s}
.free-ship-note.is-on .fs-bar i{background:#d6d1c8}

.wish-ic{display:inline-block;width:20px;height:20px;background:currentColor;-webkit-mask:url(/images/logo-mark.png) center/contain no-repeat;mask:url(/images/logo-mark.png) center/contain no-repeat}
.wish-btn .wish-ic{display:block}.wish-line .wish-ic{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.wish-btn{width:40px;height:40px}.wish-btn .wish-ic{width:26px;height:26px}.wish-btn{color:#a8a29a}

/* Halaman produk: gambar lebih pendek, toast keranjang, qty besar */
.detail-card #main-product-image{max-height:min(46vh,340px);width:100%;object-fit:contain;background:#141414;cursor:zoom-in}
.zoom-hint{font-size:11px;color:#77726a;text-align:center;margin:4px 0 0}
.img-zoom{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;padding:12px;cursor:zoom-out}
.img-zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.cart-toast{position:fixed;left:12px;right:12px;bottom:12px;z-index:900;max-width:520px;margin:0 auto;background:#242424;border:1px solid #5c5c5c;color:#d6d1c8;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.ct-msg{font-weight:600;font-size:15px}
.ct-act{display:flex;gap:10px}
.ct-act a{flex:1;text-align:center;padding:12px 10px;border-radius:10px;font-size:14px;font-weight:600;min-height:44px;box-sizing:border-box}
.ct-ghost{border:1px solid #d6d1c8;color:#d6d1c8}
.ct-main{background:#E24C2B;color:#fff}
.qty-picker{gap:16px}
.qty-picker button{width:44px;height:44px;border-radius:10px;font-size:20px}
.qty-picker span{font-size:17px;font-weight:600;min-width:28px}
.stock-status:not(.low-stock):not(.sold-out){color:#a8a29a}
.stock-status:empty::before{display:none}
.buy-note{font-size:12px;color:#8d877b;text-align:center;margin:8px 0 0}

/* Beranda ringkas, kartu produk, login */
.trust-strip{list-style:none;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trust-strip li{background:#141414;border:1px solid #262626;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:#a8a29a}
.trust-strip b{color:#f0ede4;font-size:13px;font-weight:600}
.trust-strip a{color:#F0663F;text-decoration:underline}
@media (max-width:560px){.trust-strip{grid-template-columns:1fr}.trust-strip li{flex-direction:row;justify-content:space-between;align-items:center}}
.card-roast{font-size:12px;color:#a8a29a;margin:2px 0}
.login-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.ach-grid:has(.ach-item:only-child){grid-template-columns:1fr;max-width:520px;margin:0 auto}
@media (max-width:560px){.trust-strip{grid-template-columns:1fr 1fr 1fr;gap:6px}.trust-strip li{flex-direction:column;align-items:flex-start;padding:8px 9px;font-size:11px}.trust-strip b{font-size:12px;line-height:1.25}}

/* Brewing guide */
.brew-back{color:#F0663F;font-size:14px;text-decoration:none}
.brew-tip{background:#141414;border:1px solid #3a3a3a;border-radius:12px;padding:12px 14px;margin:14px 0}
.brew-tip strong{display:block;font-size:14px;color:#f0ede4}
.brew-tip p{margin:6px 0 4px;font-size:13px;color:#cfc9ba;line-height:1.5}
.brew-tip small{color:#8d877b;font-size:11px}
.brew-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.brew-dose{font-size:13px;color:#a8a29a;display:flex;align-items:center;gap:6px}
.brew-dose input{width:76px;padding:8px;border-radius:8px;border:1px solid #333;background:#0d0d0d;color:#f0ede4;font-size:14px}
.brew-timer-btn{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #E24C2B;background:transparent;color:#F0663F;font:600 14px/1 inherit;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.brew-timer-btn.run{background:#E24C2B;color:#fff}
.bt-time{font-variant-numeric:tabular-nums;font-size:18px}
.brew-water{font-size:13px;color:#cfc9ba;margin:0 0 10px}
.brew-grind{margin:4px 0 12px}
.brew-grind p{font-size:13px;color:#f0ede4;margin:0 0 6px}
.brew-grind table{width:100%;border-collapse:collapse;font-size:13px}
.brew-grind td{padding:6px 0;border-bottom:1px solid #262626;color:#cfc9ba}
.brew-grind td:last-child{text-align:right;color:#F0663F;font-weight:600}
.brew-buy{margin:22px 0 0;text-align:center}

.brew-ratio-in{width:64px}
.brew-reset{background:transparent;border:0;color:#a8a29a;text-decoration:underline;font-size:13px;cursor:pointer;min-height:44px}
.brew-changed .brew-stat strong{color:#d6d1c8}

/* Kontras teks kecil, ringkasan resep 2x2, rating */
.zoom-hint,.buy-note,.brew-tip small,.po-why,.po-freq small{color:#a39d93}
.brew-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:700px){.brew-summary{grid-template-columns:repeat(4,1fr)}}
.brew-stat{text-align:center}
.rating-none{font-size:12px;color:#a39d93;margin:0 0 8px}
.rate-link{color:#F0663F;font-size:13px;text-decoration:underline}

/* Tokopedia & Shopee */
.mp-row,.mp-buy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;color:#a39d93}
.mp-buy{justify-content:center;margin-top:12px}
.mp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #333;border-radius:999px;padding:8px 12px;min-height:36px;color:#f0ede4;text-decoration:none;font-size:13px;background:#141414}
.mp-chip small{color:#a39d93;font-size:11px}
.mp-star{color:#F0A63F;font-weight:600}
.mp-tokopedia{border-color:#d6d1c8}.mp-shopee{border-color:#7a3a22}

.mp-google{border-color:#3a5a9a}

/* Baris keunggulan ringkas (menggantikan tiga kotak) */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:14px 0 6px;padding:10px 4px;border-top:1px solid #222;border-bottom:1px solid #222;grid-template-columns:none}
.trust-strip li{background:none;border:0;border-radius:0;padding:0;flex-direction:row;align-items:center;gap:6px;font-size:13px;color:#cfc9ba;font-weight:500}
.trust-strip li i{font-style:normal;color:#d6d1c8;font-weight:700}
.trust-strip a{color:#F0663F}
@media (max-width:560px){.trust-strip{flex-direction:column;align-items:flex-start;gap:6px;grid-template-columns:none}.trust-strip li{font-size:13px;flex-direction:row;padding:0}}
.stk-plan{color:#E24C2B !important;display:block}

/* ===== Home redesign: hero photo slide = gambar utuh di atas, teks di panel bawah (tidak menimpa poster) ===== */
.hero-slide-photo-bg { display: block; min-height: 0; background: #0f0e0d; }
.hero-slide-photo-bg .hero-stage { position: relative; height: 400px; overflow: hidden; background: #0b0b0b; }
.hero-slide-photo-bg .hero-slide-blur { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(28px) brightness(.45) saturate(1.2); }
.hero-slide-photo-bg .hero-slide-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
.hero-slide-photo-bg .hero-slide-content { padding: 20px 24px 40px; background: linear-gradient(180deg, #171717, #0f0e0d); border-top: 2px solid #E24C2B; }
.hero-slide-photo-bg .hero-slide-content h1, .hero-slide-photo-bg .hero-slide-content h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: .01em; }
.hero-slide-photo-bg .hero-badge { margin-bottom: 10px; }
.hero-slide-photo-bg .hero-divider { display: none; }
.hero-slide-photo-bg .hero-sub { max-width: 560px; color: #cfc9ba; margin-bottom: 14px; }
.hero-slide-photo-bg .hero-cta { border-radius: 999px; }
.hero-slide-photo-bg .hero-corner { display: none; }
.hero-slider .hero-nav { top: 200px; width: 40px; height: 40px; backdrop-filter: blur(6px); background: rgba(13,13,13,.55); border: 1px solid rgba(255,255,255,.18); }
.hero-slider .hero-nav.hero-next { background: #E24C2B; border-color: #E24C2B; }
@media (max-width: 560px) {
  .hero-slide-photo-bg .hero-stage { height: 300px; }
  .hero-slider .hero-nav { top: 150px; width: 34px; height: 34px; }
  .hero-slide-photo-bg .hero-slide-content { padding: 16px 16px 38px; }
  .hero-slide-photo-bg .hero-slide-content h1, .hero-slide-photo-bg .hero-slide-content h2 { font-size: 20px; }
}
/* trust strip jadi pil */
.trust-strip { border: 0; padding: 0; margin: 16px 0 10px; }
.trust-strip li { background: rgba(214,209,200,.08); border: 1px solid rgba(214,209,200,.28); border-radius: 999px; padding: 9px 18px; gap: 10px; text-align: left; }
.trust-strip li i { width: 20px; height: 20px; border-radius: 50%; background: #d6d1c8; color: #0d0d0d; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 20px; }
.trust-strip li span { color: #a8a29a; }
@media (max-width: 560px) { .trust-strip { align-items: stretch; } .trust-strip li { border-radius: 14px; } }
/* tile belanja: ikon, gradasi, aksen */
.shop-tile { position: relative; overflow: hidden; background: linear-gradient(145deg, #1b1b1b 0%, #121212 100%); border-color: #2d2d2d; padding: 18px 20px 18px 20px; }
.shop-tile::after { content: ''; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(226,76,43,.18), transparent 70%); pointer-events: none; }
.shop-tile-ico { width: 38px; height: 38px; border-radius: 12px; background: rgba(226,76,43,.12); border: 1px solid rgba(226,76,43,.35); color: #F0663F; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
a.shop-tile:hover { border-color: #E24C2B; box-shadow: 0 10px 28px rgba(226,76,43,.14); }
a.shop-tile:hover .shop-tile-ico { background: #E24C2B; color: #fff; }
.shop-tile-sub { color: #E8A58F; font-weight: 500; }
.shop-tile-flash.is-live .shop-tile-ico { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
@media (max-width: 560px) { .trust-strip li { flex-wrap: wrap; row-gap: 2px; font-weight: 600; color: #f0ede4; } .trust-strip li span { flex-basis: 100%; padding-left: 30px; font-weight: 400; font-size: 12px; } }
.trust-strip li b { color: #f0ede4; font-weight: 600; }
.trust-strip li span::before { content: '\00b7\00a0'; }
@media (max-width: 560px) { .trust-strip li { justify-content: flex-start; } .trust-strip li span::before { content: none; } }
/* trust strip: hitam/netral, tanpa hijau */
.trust-strip li { background: #111; border-color: #2e2e2e; }
.trust-strip li i { background: #f0ede4; color: #0d0d0d; }
/* Belanja sesuai cara seduh */
.brew-pick { max-width: 1100px; margin: 8px auto 4px; padding: 0 4px; }
.brew-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.brew-pick-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #161616; border: 1px solid #2d2d2d; border-radius: 16px; color: #f2ede4; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.brew-pick-card:hover { border-color: #E24C2B; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(226,76,43,.14); }
.brew-pick-ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: rgba(226,76,43,.12); border: 1px solid rgba(226,76,43,.35); color: #F0663F; display: inline-flex; align-items: center; justify-content: center; }
.brew-pick-card:hover .brew-pick-ico { background: #E24C2B; color: #fff; }
.brew-pick-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brew-pick-text b { font-size: 19px; font-weight: 600; }
.brew-pick-text small { font-size: 12.5px; color: #a8a29a; line-height: 1.4; }
.brew-pick-go { color: #F0663F; font-size: 20px; }
@media (max-width: 560px) { .brew-pick-grid { grid-template-columns: 1fr; gap: 10px; } .brew-pick-card { padding: 14px 16px; } .brew-pick-text b { font-size: 17px; } }
/* Brewing guide: kartu "Tune your brew" */
.bp { background: linear-gradient(145deg, #1b1b1b, #121212); border: 1px solid #2d2d2d; border-radius: 18px; padding: 18px 16px 16px; margin: 18px 0 8px; }
.bp-head h3 { margin: 0 0 2px; font-size: 22px; }
.bp-head p { margin: 0 0 14px; color: #a8a29a; font-size: 13px; }
.bp-proc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bp-pbtn { text-align: left; background: #0f0e0d; border: 1px solid #2d2d2d; border-radius: 14px; padding: 12px 14px; color: #f2ede4; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px; }
.bp-pbtn b { font-size: 15px; font-weight: 600; } .bp-pbtn small { color: #a8a29a; font-size: 12px; }
.bp-pbtn.on { border-color: #E24C2B; background: rgba(226,76,43,.1); box-shadow: inset 0 0 0 1px #E24C2B; }
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bp-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #a8a29a; }
.bp-grid select, .bp-grid input { background: #0f0e0d; border: 1px solid #2d2d2d; border-radius: 10px; color: #f2ede4; padding: 11px 10px; font: inherit; font-size: 14px; min-height: 44px; box-sizing: border-box; width: 100%; }
.bp-opt { margin: 4px 0 10px; } .bp-opt summary { cursor: pointer; font-size: 13px; color: #cfc9ba; padding: 6px 0; } .bp-opt summary em { color: #7d776c; font-style: normal; margin-left: 6px; }
.bp-fine { color: #7d776c; font-size: 11.5px; margin: 2px 0 0; }
.bp-out { background: #0f0e0d; border: 1px solid #2d2d2d; border-radius: 14px; padding: 6px 14px 12px; margin-top: 6px; }
.bp-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #22201e; font-size: 14px; }
.bp-row span { color: #a8a29a; } .bp-row strong { text-align: right; max-width: 70%; } .bp-row small { display: block; font-weight: 400; color: #a8a29a; font-size: 12px; margin-top: 2px; }
.bp-steps { margin: 10px 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: #e5dfd2; }
.bp-rest { margin: 6px 0 0; font-size: 13px; color: #cfc9ba; } .bp-rest b { color: #F0663F; }
.bp-apply { margin-top: 12px; width: 100%; }
@media (max-width: 560px) { .bp-grid { grid-template-columns: 1fr 1fr; } .bp-head h3 { font-size: 20px; } }
/* Brewing Guide dirapikan: halaman lebih lebar di tablet, kartu 2 kolom, daftar alat dilipat */
.brew-page { max-width: 880px; }
.brew-intro { margin: 14px 0 6px; max-width: 640px; }
.brew-page .brew-guide-wrap { max-width: none; }
.brew-setup-wrap { margin: 16px 0 22px; border: 1px solid #2d2d2d; border-radius: 14px; background: #121212; }
.brew-setup-wrap > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px; color: #f2ede4; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.brew-setup-wrap > summary::-webkit-details-marker { display: none; }
.brew-setup-wrap > summary::after { content: '+'; color: #F0663F; font-size: 20px; }
.brew-setup-wrap[open] > summary::after { content: '\2212'; }
.brew-setup-wrap > summary small { color: #7d776c; font-weight: 400; font-size: 12px; margin-left: auto; }
.brew-setup-wrap .brew-setup { margin: 0; padding: 0 16px 6px; border-top: 1px solid #22201e; }
.brew-setup .brew-opt { display: block; }
@media (min-width: 760px) {
  .bp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; align-items: start; padding: 22px; }
  .bp-head { grid-column: 1 / -1; }
  .bp-out { grid-column: 2; grid-row: 2 / span 5; margin-top: 0; }
  .bp-proc, .bp-grid, .bp-opt { grid-column: 1; }
  .bp-apply { grid-column: 1; margin-top: 4px; }
}
@media (max-width: 560px) { .brew-setup-wrap > summary small { display: none; } }
.brew-page .ops-eyebrow{color:#F0663F}

/* ===== Brewing Guide: satu gaya untuk kartu Tune, resep, tip, dan peralatan ===== */
.brew-page .bp, .brew-page .brew-guide, .brew-page .brew-setup-wrap, .brew-page .brew-tip {
  background: linear-gradient(145deg, #1a1a1a 0%, #121212 100%); border: 1px solid #2d2d2d; border-radius: 16px; box-sizing: border-box;
}
.brew-page .bp, .brew-page .brew-guide { padding: 18px; margin: 14px 0; }
.brew-page .brew-tip { padding: 14px 16px; }
.brew-page .brew-method-title, .brew-page .bp-head h3 { font-size: 16px; font-weight: 700; color: #F0663F; margin: 0; }
.brew-page .bp-head p { margin: 4px 0 14px; color: #a8a29a; font-size: 13px; }
.brew-page .brew-stat { background: #0f0e0d; border: 1px solid #22201e; border-radius: 12px; padding: 10px 8px; }
.brew-page .brew-stat span { font-size: 11px; letter-spacing: .04em; margin-bottom: 2px; }
.brew-page .brew-stat strong { font-size: 15px; color: #F0663F; }
.brew-page .brew-changed .brew-stat strong { color: #fff; }
.brew-page .brew-steps { padding-left: 20px; margin: 4px 0 14px; }
.brew-page .brew-steps li { font-size: 13.5px; line-height: 1.6; color: #e5dfd2; margin-bottom: 6px; }
.brew-page .brew-steps li strong { color: #f2ede4; }
.brew-page .brew-grind table, .brew-page .brew-grind td { font-size: 13.5px; }
.brew-page .bp-out { background: transparent; border: 0; padding: 0; margin: 0; }
.brew-page .bp-hint { font-size: 12.5px; color: #a8a29a; line-height: 1.55; margin: 8px 0 0; }
.brew-page .bp-grid select, .brew-page .bp-grid input, .brew-page .brew-dose input { background: #0f0e0d; border: 1px solid #2d2d2d; border-radius: 10px; color: #f2ede4; }
.brew-page .bp-grid input:focus, .brew-page .bp-grid select:focus, .brew-page .brew-dose input:focus { outline: none; border-color: #E24C2B; }
.brew-page .bp-apply { width: 100%; justify-content: center; margin-top: 10px; }
.brew-page .brew-summary { margin-bottom: 14px; }
.brew-page .brew-tools { margin-bottom: 14px; }
@media (min-width: 760px) { .brew-page .bp { padding: 22px; } .brew-page .bp-out { grid-column: 2; grid-row: 2 / span 5; } }
/* Tune your brew: timer langsung + timeline + kartu bagikan */
.bp-timer { background: #0f0e0d; border: 1px solid #22201e; border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; }
.bp-tlabel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a8a29a; }
.bp-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.bp-time { font-size: 44px; font-weight: 700; line-height: 1.1; color: #f5f0e8; font-variant-numeric: tabular-nums; }
.bp-tbtns { display: flex; align-items: center; gap: 6px; }
.bp-bar { height: 4px; background: #262626; border-radius: 4px; overflow: hidden; }
.bp-bar i { display: block; height: 100%; width: 0; background: #E24C2B; transition: width .25s linear; }
.bp-now { margin: 10px 0 0; font-size: 13.5px; color: #e5dfd2; min-height: 20px; }
.bp-tl { list-style: none; margin: 0 0 14px; padding: 0; }
.bp-tl li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 10px 10px 12px; border-left: 3px solid #2d2d2d; border-bottom: 1px solid #1d1d1d; font-size: 13.5px; color: #cfc9ba; transition: background .2s, border-color .2s; }
.bp-tl .bp-t { font-weight: 700; color: #f2ede4; font-variant-numeric: tabular-nums; }
.bp-tl .bp-w { text-align: right; color: #F0663F; font-weight: 600; white-space: nowrap; }
.bp-tl .bp-w small { display: block; color: #7d776c; font-weight: 400; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.bp-tl li.past { opacity: .5; }
.bp-tl li.on { border-left-color: #E24C2B; background: rgba(226,76,43,.1); color: #fff; }
.bp-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid #22201e; padding-top: 12px; margin-top: 4px; }
.bp-share > span { font-size: 12px; color: #a8a29a; }
.bp-share > div { display: flex; gap: 8px; flex-wrap: wrap; }
/* Resep juara */
.brew-champ-head { margin: 30px 0 6px; padding-top: 22px; border-top: 1px solid #22201e; }
.brew-champ-head h3 { margin: 0 0 4px; font-size: 20px; }
.brew-champ-head p { margin: 0; color: #a8a29a; font-size: 13px; line-height: 1.6; max-width: 640px; }
.brew-champ-badge { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: rgba(226,76,43,.12); border: 1px solid rgba(226,76,43,.35); color: #F0663F; font-size: 12px; font-weight: 600; }
.brew-champ-src { margin: 10px 0 0; font-size: 12px; color: #7d776c; } .brew-champ-src a { color: #a8a29a; text-decoration: underline; }
.brew-equip { margin: 4px 0 12px; }
.brew-equip p { font-size: 13px; color: #f0ede4; margin: 0 0 6px; }
.brew-equip table { width: 100%; border-collapse: collapse; font-size: 13px; }
.brew-equip td { padding: 7px 0; border-bottom: 1px solid #262626; color: #e5dfd2; vertical-align: top; }
.brew-equip td:first-child { width: 110px; color: #a8a29a; padding-right: 10px; }
.brew-paper-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(226,76,43,.4); color: #F0663F; font-size: 11px; white-space: nowrap; }

/* Champion reference section */
.champ-ref { margin: 34px 0 10px; padding-top: 26px; border-top: 1px solid #22201e; }
.champ-ref h2 { margin: 0 0 6px; }
.champ-ref-sub { margin: 0 0 16px; color: #a8a29a; font-size: 13px; line-height: 1.6; max-width: 640px; }
.champ-tabs { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.champ-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid #2d2d2d; background: #151312; color: #a8a29a; font: 600 13px Poppins, sans-serif; cursor: pointer; }
.champ-tabs button.on { background: #E24C2B; border-color: #E24C2B; color: #fff; }
.champ-ref .brew-guide-wrap { margin-top: 0; }
.champ-ref .brew-guide[hidden] { display: none; }
.brew-champ-note { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #E24C2B; background: #151312; border-radius: 0 10px 10px 0; color: #a8a29a; font-size: 12.5px; line-height: 1.6; }
.champ-roster { margin-top: 14px; padding: 14px 16px; border: 1px dashed #2d2d2d; border-radius: 14px; }
.champ-roster[hidden] { display: none; }
.champ-roster p { margin: 0 0 8px; font-size: 14px; } .champ-roster small { color: #7d776c; display: block; margin-top: 2px; }
.champ-roster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.champ-roster li { font-size: 13px; color: #a8a29a; line-height: 1.5; } .champ-roster li strong { color: #f3efe9; }
.champ-roster li a { color: #7d776c; text-decoration: underline; margin-left: 4px; font-size: 12px; }

/* Recipe cards: same timer + timeline look as the Tune card */
.brew-guide .bt-box { margin: 0 0 12px; }
.brew-guide .bt-rs { display: inline-flex; align-items: center; background: none; border: 0; color: #a8a29a; text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; padding: 0 6px; min-height: 44px; }
.brew-guide .bt-tl { margin: 0 0 14px; }
.brew-guide .bt-tl .bp-x strong { color: #f2ede4; }
.brew-guide .bt-tl li[hidden], .brew-guide .bp-w[hidden] { display: none; }
@media (max-width: 480px) { .brew-guide .bp-tl li { grid-template-columns: 44px 1fr auto; gap: 8px; } }

/* Recipe cards: two-column layout like the Tune card */
.brew-guide .bg-cols { margin-top: 12px; }
.brew-guide .bg-right .brew-summary { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.brew-guide .bg-right .brew-stat { padding: 10px 4px; }
.brew-guide .bg-right .brew-stat strong { font-size: 14px; }
.brew-guide .bg-right .brew-stat span { font-size: 10.5px; }
@media (max-width: 480px) { .brew-guide .bg-right .brew-summary { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) {
  .brew-guide .bg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; align-items: start; }
  .brew-guide .bg-left .brew-tools { flex-direction: column; align-items: stretch; }
  .brew-guide .bg-left .brew-dose { justify-content: space-between; }
}

/* One-line grind setting in recipe cards */
.brew-gline { margin: 0 0 12px; padding: 10px 12px; background: #0f0e0d; border: 1px solid #22201e; border-radius: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.brew-gline[hidden] { display: none; }
.brew-gline span { color: #a8a29a; } .brew-gline strong { color: #F0663F; }

/* Brewing Guide: calm grey instead of orange backgrounds (orange stays for text and thin accents) */
.brew-page .bp-tl li.on { background: rgba(255,255,255,.07); border-left-color: #8a847a; color: #fff; }
.brew-page .brew-timer-btn.run { background: #2d2a27; border-color: #4a4640; color: #f2ede4; }
.brew-page .champ-tabs button.on { background: #2d2a27; border-color: #4a4640; color: #f2ede4; }
.brew-page .brew-champ-badge { background: #1d1d1d; border-color: #2d2a27; color: #cfc9ba; }
.brew-page .bp-pbtn.on { background: #1d1d1d; border-color: #4a4640; box-shadow: none; }
.brew-page .brew-champ-note { border-left-color: #4a4640; }
.brew-page .brew-paper-tag { background: #1d1d1d; border-color: #2d2a27; color: #cfc9ba; }

/* Brewing Guide cards: neutral grey instead of the warm brown/orange tint */
.brew-page .bp, .brew-page .brew-guide, .brew-page .brew-setup-wrap, .brew-page .brew-tip { background: linear-gradient(145deg, #1d1d1d 0%, #151515 100%); border-color: #2c2c2c; }
.brew-page .brew-stat, .brew-page .bp-timer, .brew-page .brew-gline, .brew-page .bp-grid select, .brew-page .bp-grid input, .brew-page .brew-dose input, .brew-page .bp-pbtn { background: #101010; border-color: #2c2c2c; }
.brew-page .bp-tl li { border-bottom-color: #262626; border-left-color: #2c2c2c; }
.brew-page .bp-bar { background: #2a2a2a; }
.brew-page .brew-champ-note { background: #101010; }
.brew-page .brew-champ-badge, .brew-page .brew-paper-tag { background: #232323; border-color: #333; }
.brew-page .champ-roster { border-color: #333; }
.brew-page .bp-tl li.on { border-left-color: #8a8a8a; }
.brew-page .brew-timer-btn.run, .brew-page .champ-tabs button.on { background: #2e2e2e; border-color: #4a4a4a; }

/* Grind setting: St.Roast's recommended grinders, same look as the equipment list */
.brew-gl { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 12px 0 4px; border-top: 1px solid #262626; margin: 0 0 8px; }
.brew-gl-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a8a29a; padding-top: 2px; }
.brew-gl-v { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: #cfc9ba; }
.brew-gl-v .brew-opt { display: block; } .brew-gl-v .brew-opt b { color: #F0663F; font-weight: 600; margin-left: 4px; }
.brew-gl-v .brew-opt.on { color: #fff; font-weight: 600; }
@media (max-width: 480px) { .brew-gl { grid-template-columns: 1fr; gap: 4px; } }

/* Grind setting: pick one grinder */
.brew-gl-v { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.brew-gl-sel { flex: 1 1 180px; min-width: 0; background: #101010; border: 1px solid #2c2c2c; border-radius: 10px; color: #f2ede4; padding: 10px; font: inherit; font-size: 14px; min-height: 42px; }
.brew-gl-val { color: #F0663F; font-size: 15px; white-space: nowrap; }

/* Grind setting: one select, size inside the option */
label.brew-gl { display: flex; flex-direction: column; gap: 6px; grid-template-columns: none; }
label.brew-gl .brew-gl-sel { width: 100%; flex: none; box-sizing: border-box; }

/* Dose and ratio: two equal inputs side by side, labels above (same as the Tune card) */
.brew-guide .brew-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.brew-guide .brew-tools .brew-dose { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; font-size: 12px; color: #a8a29a; }
.brew-guide .brew-tools .brew-dose input { width: 100%; box-sizing: border-box; min-height: 44px; }
.brew-guide .brew-tools .brew-reset { grid-column: 1 / -1; justify-self: start; }
.brew-guide .bg-left .brew-tools { flex-direction: initial; align-items: end; }

/* The dose / water / time summary in the card title is only shown while the card is closed (the tiles repeat it when open) */
.brew-guide[open] .brew-sum-meta { display: none; }

/* Dose and ratio live in the two inputs; only water and time stay as tiles */
.brew-guide .brew-stat-h { display: none; }
.brew-guide .bg-right .brew-summary { grid-template-columns: repeat(2, 1fr); }

/* Our equipment lives inside the recipe card, under dose and ratio */
.brew-guide .brew-eq { margin: 10px 0 0; border-top: 1px solid #262626; }
.brew-guide .brew-eq > summary { cursor: pointer; list-style: none; padding: 12px 0 6px; font-size: 14px; font-weight: 600; color: #f2ede4; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.brew-guide .brew-eq > summary::-webkit-details-marker { display: none; }
.brew-guide .brew-eq > summary small { color: #7d776c; font-weight: 400; font-size: 11.5px; }
.brew-guide .brew-eq .brew-setup { margin: 0; }
.brew-guide .brew-eq .brew-setup > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #1f1f1f; font-size: 13px; }
.brew-guide .brew-eq dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a8a29a; padding-top: 2px; }
.brew-guide .brew-eq dd { margin: 0; color: #cfc9ba; } .brew-guide .brew-eq .brew-opt { display: block; }

/* Phone and champion-card tidy-up */
@media (max-width: 560px) {
  .bp-grid label.bp-wide { grid-column: 1 / -1; }
  .brew-guide .brew-eq > summary small { display: none; }
  .brew-paper-tag { display: table; margin: 4px 0 0; }
}
.brew-guide.brew-champ .brew-tools, .brew-guide.brew-champ .bt-box { display: none; }
.brew-guide.brew-champ .bg-right .brew-summary { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .brew-guide.brew-champ .bg-right .brew-summary { grid-template-columns: repeat(2, 1fr); } }
.brew-guide .brew-eq > summary::after { content: '+'; color: #F0663F; font-size: 18px; line-height: 1; margin-left: auto; }
.brew-guide .brew-eq[open] > summary::after { content: '\2212'; }

/* Homepage: neutral grey backgrounds instead of the warm brown/orange tint (orange stays on text, icons and hover) */
.shop-tile { background: linear-gradient(145deg, #1d1d1d 0%, #151515 100%); border-color: #2c2c2c; }
.shop-tile::after { display: none; }
.shop-tile-ico, .brew-pick-ico { background: #262626; border-color: #3a3a3a; }
.brew-pick-card { background: #181818; border-color: #2c2c2c; }
.shop-tile-sub { color: #cfc9ba; }
a.shop-tile:hover, .brew-pick-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.shop-tile-origin .shop-tile-subchips a { border-color: #3a3a3a; }

/* ---- Our Green Bean Partners ---- */
.pt-page{max-width:1100px;margin:0 auto;padding:24px 16px 48px}
.pt-page h2{margin:4px 0 8px}
.pt-sub{color:#b9b4ac;max-width:640px;line-height:1.6;margin:0 0 6px}
.pt-hint{color:#8d8880;font-size:13px;margin:10px 0 12px}
.pt-empty{background:#1c1c1c;border:1px solid #2c2c2c;border-radius:14px;padding:28px 18px;color:#a8a29a;text-align:center;margin-top:18px}
.pt-map-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid #2c2c2c;background:#1c1c1c}
#pt-map{height:460px;width:100%;background:#1c1c1c}
.pt-legend{position:absolute;left:12px;bottom:12px;z-index:500;background:rgba(20,20,20,.88);border:1px solid #333;border-radius:999px;padding:6px 12px;font-size:12px;color:#d6d1c8;display:flex;align-items:center;gap:8px}
.pt-dot{width:10px;height:10px;border-radius:50%;background:#E24C2B;display:inline-block}
.pt-pin span{display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#E24C2B;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.6);margin:2px}
.pt-pin span:after{content:"";position:absolute;left:9px;top:9px;width:6px;height:6px;border-radius:50%;background:#fff}
.pt-h3{margin:28px 0 12px}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pt-card{display:flex;flex-direction:column;text-align:left;background:#1c1c1c;border:1px solid #2c2c2c;border-radius:14px;overflow:hidden;color:inherit;cursor:pointer;padding:0;font:inherit;transition:border-color .15s,transform .15s}
.pt-card:hover,.pt-card:focus-visible{border-color:#E24C2B;transform:translateY(-2px);outline:none}
.pt-card-img{display:block;aspect-ratio:16/10;background:#262626;overflow:hidden}
.pt-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.pt-noimg{display:flex;height:100%;align-items:center;justify-content:center;color:#444;font-size:28px}
.pt-card-body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.pt-card-region{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#E24C2B;margin:0}
.pt-card-body small{color:#a8a29a;line-height:1.45}
.pt-modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:14px}
.pt-modal[hidden]{display:none}
.pt-modal-box{position:relative;background:#1c1c1c;border:1px solid #333;border-radius:16px;max-width:880px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr}
.pt-x{position:absolute;right:10px;top:8px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:22px;cursor:pointer}
.pt-m-photo{background:#141414;min-width:0}
.pt-m-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pt-m-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}
.pt-m-thumbs button{flex:0 0 56px;height:56px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;opacity:.6}
.pt-m-thumbs button.on{border-color:#E24C2B;opacity:1}
.pt-m-thumbs img{width:100%;height:100%;aspect-ratio:auto}
.pt-m-info{padding:22px 20px}
.pt-m-info h3{margin:4px 0 12px}
.pt-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:14px}
.pt-facts dt{color:#8d8880}.pt-facts dd{margin:0}
.pt-m-desc{color:#cfcac1;line-height:1.65;white-space:pre-line;margin:0}
.pt-admin{margin-top:24px}
.leaflet-container{font-family:inherit}
@media(max-width:700px){#pt-map{height:340px}.pt-modal-box{grid-template-columns:1fr}.pt-grid{grid-template-columns:1fr 1fr;gap:10px}.pt-card-body{padding:10px}}
@media(max-width:380px){.pt-grid{grid-template-columns:1fr}}
.pt-page .ops-eyebrow{color:#E24C2B}
.pt-badge{align-self:flex-start;font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid #444;color:#d6d1c8;margin:2px 0}
.pt-b-available{border-color:#E24C2B;color:#F0663F}
.pt-b-soon{border-color:#777;color:#b9b4ac}
.pt-b-sold{border-color:#444;color:#8d8880}
.pt-zoom{position:absolute;right:12px;bottom:12px;z-index:500;background:rgba(20,20,20,.88);border:1px solid #333;border-radius:999px;padding:7px 14px;font-size:12px;color:#d6d1c8;cursor:pointer;font-family:inherit}
.pt-zoom:hover{border-color:#E24C2B;color:#fff}.pt-zoom[hidden]{display:none}
.pt-approx{font-size:12px;color:#8d8880;margin:12px 0 0}
.pt-empty{margin-top:14px}
/* Peta OpenStreetMap dibuat gelap lewat filter (penyedia tile gelap gratis butuh API key) */
.pt-tiles{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.35)}
.leaflet-container{background:#1c1c1c}
.leaflet-control-attribution{background:rgba(20,20,20,.8)!important;color:#8d8880!important}.leaflet-control-attribution a{color:#b9b4ac!important}
.pt-approx a{color:#b9b4ac;text-decoration:underline}
/* Logo & monogram kartu mitra */
.pt-card-img{position:relative}
.pt-card-img .pt-cover{width:100%;height:100%;object-fit:cover;display:block}
.pt-logo-big{width:100%;height:100%;object-fit:contain;padding:18% 22%;box-sizing:border-box;display:block}
.pt-logo-chip{position:absolute;left:10px;bottom:10px;width:40px;height:40px;object-fit:contain;background:#fff;border-radius:50%;padding:5px;box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pt-m-head{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.pt-m-head h3{margin:0}
.pt-m-logo{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#2a2a2a;border:1px solid #3a3a3a;display:flex;align-items:center;justify-content:center;color:#b9b4ac;font-weight:700;font-size:15px;overflow:hidden}
.pt-m-logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;box-sizing:border-box}
.pt-modal-box.nophoto{grid-template-columns:1fr;max-width:560px}
.pt-card-img img.pt-logo-chip{position:absolute;left:10px;bottom:10px;width:40px;height:40px;object-fit:contain;background:#fff;border-radius:50%;padding:5px;box-sizing:border-box}
.pt-card-img img.pt-logo-big{width:100%;height:100%;object-fit:contain}
.pt-zoom{bottom:auto;top:12px}
.pt-map-wrap .leaflet-top.leaflet-left{top:auto;bottom:56px}

/* minimal list rows grouped by region */
.pt-h3{margin:30px 0 10px;font-size:17px;display:flex;align-items:baseline;gap:8px}
.pt-count{font-size:12px;color:#8d8880;font-weight:400}
.pt-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.pt-card{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:12px}
.pt-card:hover,.pt-card:focus-visible{transform:none}
.pt-card .pt-card-img{flex:0 0 40px;width:40px;height:40px;aspect-ratio:auto;border-radius:50%;background:#fff;overflow:hidden}
.pt-card .pt-card-img img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.pt-card .pt-card-body{flex:1;min-width:0;padding:0;gap:2px}
.pt-card .pt-card-body strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-card .pt-card-region{order:2;color:#8d8880;font-size:12px;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-card .pt-badge{flex:0 0 auto;align-self:center;margin:0;font-size:11px;padding:2px 8px}
@media(max-width:700px){.pt-grid{grid-template-columns:1fr;gap:6px}.pt-card{padding:11px 12px}}

/* collapsible region sections */
.pt-sec{border-top:1px solid #262626;margin:0}
.pt-sec:last-of-type{border-bottom:1px solid #262626}
.pt-sec > summary.pt-h3{list-style:none;cursor:pointer;margin:0;padding:16px 2px;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;-webkit-tap-highlight-color:transparent}
.pt-sec > summary::-webkit-details-marker{display:none}
.pt-sec > summary .pt-count{font-size:12px;color:#8d8880;font-weight:400}
.pt-sec > summary .pt-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid #8d8880;border-bottom:2px solid #8d8880;transform:rotate(45deg);transition:transform .2s;margin-right:6px}
.pt-sec[open] > summary .pt-chev{transform:rotate(-135deg)}
.pt-sec > summary:hover .pt-chev{border-color:#E24C2B}
.pt-sec .pt-grid{padding:2px 0 16px}

/* Gelembung rasa + deskripsi ringkas (HP) */
.flavor-bub { margin: 10px 0 12px; background: #151515; border-radius: 12px; padding: 10px 10px 8px; }
.flavor-bub-h { display: block; font-size: 12px; font-weight: 600; color: #a8a29a; margin: 0 0 4px 4px; letter-spacing: .02em; }
.flavor-bub svg { max-width: 300px !important; }
.story-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more-btn { background: none; border: 0; color: #E24C2B; font-size: 13px; padding: 0 0 6px; cursor: pointer; }

/* HP: chip ulasan satu baris, kartu langganan ringkas */
@media (max-width: 520px) {
  .mp-row { gap: 6px; }
  .mp-row .mp-chip { padding: 5px 10px; min-height: 30px; font-size: 12px; gap: 4px; }
  .mp-row .mp-chip small { font-size: 10px; }
  .purchase-options .po-card { padding: 10px 12px; }
  .purchase-options #po-sub .po-title { grid-column: 2 / 4; grid-row: 1; font-size: 13.5px; }
  .purchase-options #po-sub .po-price { grid-column: 2 / 4; grid-row: 2; font-size: 13px; }
  .purchase-options #po-sub .po-why { grid-row: 3; font-size: 11.5px; }
  .purchase-options #po-sub .po-freq { grid-row: 4; }
}
.info-farmer a, .info-farmer a strong { color: #F0663F; }

/* Rapikan blok atas halaman produk (HP) */
.flavor-bub { background: none; padding: 0; margin: 8px 0 10px; }
.flavor-bub-h { margin: 0 0 2px; }
.more-btn + .pt-approx { display: inline; margin-left: 12px; }
.more-btn { display: inline-block; }
@media (max-width: 520px) {
  .detail-card #main-product-image { max-height: min(32vh, 250px); }
  .zoom-hint { display: none; }
}

/* HERO FULL SCREEN: selebar layar, tinggi mengikuti isi tiap slide (tinggi slider dianimasikan ke slide aktif lewat JS) */
.hero-slider { width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 14px; border-radius: 0; border: 0; border-bottom: 1px solid rgba(226,76,43,.55); transition: height .35s ease; }
.hero-slider .hero-slides { align-items: flex-start; }
.hero-slider .hero-slide { height: auto; min-height: 0; }
.hero-slide-plain-bg { min-height: 0; display: flex; align-items: center; justify-content: center; }
.hero-slide-plain-bg .hero-slide-content { padding: 56px 20px 64px; }
.hero-slide-plain-bg .hero-sub { max-width: 520px; margin-left: auto; margin-right: auto; }
.hero-slide-content h1.hero-big { font-size: clamp(40px, 8vw, 64px); }
/* slide foto: gambar tampil utuh sesuai rasionya (tanpa tinggi tetap), teks di samping (tablet/desktop) atau di bawah (HP) */
.hero-slide-photo-bg { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.hero-slide-photo-bg .hero-stage { position: relative; height: auto; display: flex; align-items: center; justify-content: center; }
.hero-slide-photo-bg .hero-stage .hero-slide-bg-img { position: relative; inset: auto; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.hero-slide-photo-bg .hero-slide-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 22px 20px 34px; }
@media (min-width: 768px) {
  .hero-slide-plain-bg .hero-slide-content { padding: 84px 32px 92px; }
  .hero-slide-photo-bg { grid-template-columns: auto 1fr; }
  .hero-slide-photo-bg .hero-stage { justify-self: start; max-width: 58vw; }
  .hero-slide-photo-bg .hero-stage .hero-slide-bg-img { width: auto; max-width: 58vw; height: auto; max-height: 480px; min-height: 300px; }
  .hero-slide-photo-bg .hero-slide-content { align-items: flex-start; text-align: left; border-top: 0; border-left: 2px solid #E24C2B; padding: 32px 56px 40px 44px; }
  .hero-slide-photo-bg .hero-slide-content h1, .hero-slide-photo-bg .hero-slide-content h2 { font-size: 32px; }
  .hero-slide-photo-bg .hero-sub { text-align: left; margin-left: 0; margin-right: 0; }
}

html { overflow-x: clip; }

/* titik & panah hero: tidak menutupi foto */
.hero-slider .hero-dots { left: 50%; right: auto; transform: translateX(-50%); width: auto; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); bottom: 12px; }
.hero-slider .hero-nav { width: 30px; height: 30px; font-size: 12px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); }
.hero-slider .hero-prev { left: 10px; } .hero-slider .hero-next { right: 10px; }

/* Header selebar layar (selaras hero full screen); isi halaman depan ikut melebar */
@media (min-width: 1040px) { .navbar { max-width: none; margin-left: 16px; margin-right: 16px; } }
@media (min-width: 900px) {
  main.container:has(> .hero-slider) { max-width: 1320px; padding-left: 32px; padding-right: 32px; }
  main.container:has(> .hero-slider) .brew-pick,
  main.container:has(> .hero-slider) .shop-by { max-width: none; padding: 0; }
  main.container:has(> .hero-slider) .hero-slider { margin-left: calc(50% - 50vw); }
}

/* Slide poster tanpa subtitle/tombol: poster di tengah utuh, judul jadi baris keterangan di bawahnya (tidak dibelah dua) */
.hero-slide-solo, .hero-slide-photo-bg.hero-slide-solo { grid-template-columns: 1fr; }
.hero-slide-solo .hero-stage { justify-self: stretch; max-width: none; width: 100%; }
.hero-slide-solo .hero-stage .hero-slide-bg-img { width: auto; max-width: 100%; max-height: 420px; min-height: 0; margin: 0 auto; }
.hero-slide-solo .hero-slide-content { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: 6px 14px; border-left: 0; border-top: 2px solid #E24C2B; padding: 12px 20px 40px; }
.hero-slide-solo .hero-slide-content .hero-badge { margin: 0; }
.hero-slide-solo .hero-slide-content h1, .hero-slide-solo .hero-slide-content h2 { font-size: 20px; margin: 0; }

/* semua slide poster: poster utuh di atas, keterangan (judul, subtitle, tombol) satu baris di bawahnya */
.hero-slide-solo .hero-slide-content .hero-sub { margin: 0; max-width: none; font-size: 13px; letter-spacing: 0; text-transform: none; color: #cfc9ba; text-align: center; }
.hero-slide-solo .hero-slide-content .hero-divider { display: none; }
.hero-slide-solo .hero-slide-content .hero-cta { margin: 0; padding: 8px 18px; font-size: 13px; }

/* Hero lebih ringkas */
.hero-slide-plain-bg .hero-slide-content { padding: 34px 20px 44px; }
.hero-slide-content h1.hero-big { font-size: clamp(34px, 6vw, 50px); margin: 4px 0 12px; }
.hero-slide-solo .hero-stage .hero-slide-bg-img { max-height: 250px; }
.hero-slide-solo .hero-slide-content { padding: 10px 20px 34px; }
@media (min-width: 768px) {
  .hero-slide-plain-bg .hero-slide-content { padding: 48px 32px 58px; }
  .hero-slide-solo .hero-stage .hero-slide-bg-img { max-height: 330px; }
}
.hero-slide-content h2.hero-big { font-size: clamp(34px, 6vw, 50px); line-height: .98; letter-spacing: -.03em; font-weight: 800; margin: 4px 0 12px; overflow-wrap: anywhere; }

/* Resep Brewing Guide: tombol buka/tutup yang jelas di tiap judul resep */
.brew-guide > summary.brew-method-title { padding: 14px 16px; }
.brew-guide > summary.brew-method-title::-webkit-details-marker { display: none; }
.brew-guide > summary.brew-method-title::after { content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid #F0663F; border-bottom: 2px solid #F0663F; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.brew-guide[open] > summary.brew-method-title::after { transform: rotate(-135deg) translateY(-2px); }
@media (max-width: 520px) { .brew-guide > summary.brew-method-title .brew-sum-meta { display: none; } }
/* judul resep seragam: judul kiri, ringkasan rata kanan (g · ml · waktu), panah paling kanan */
.brew-guide > summary.brew-method-title { gap: 12px; }
.brew-guide > summary.brew-method-title .brew-sum-title { flex: 1 1 auto; min-width: 0; }
.brew-guide > summary.brew-method-title .brew-sum-meta { flex: 0 0 auto; margin-left: auto; color: #a8a29a; font-weight: 400; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* Proses pasca panen jadi judul utama, nama produk jadi baris di bawahnya */
.detail-card h2.proc-title { margin-bottom: 4px; }
.detail-card .name-sub { margin: 0 0 12px; font-size: 14px; color: #a8a29a; line-height: 1.4; }

/* Menu utama Operations: semua grup tampil (membungkus ke baris berikutnya), tidak perlu digeser */
#ops-main-tabs { flex-wrap: wrap; overflow: visible; max-width: none; }
@media (max-width: 600px) { #ops-main-tabs a { padding: 8px 13px; font-size: 12px; } }

/* Stok per warna (halaman produk, khusus admin) */
.cs-admin { margin-top: 12px; border: 1px solid #2e2e2e; border-radius: 12px; background: #141414; padding: 10px 14px; }
.cs-admin summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #e8e2d4; }
.cs-admin .cs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #222; font-size: 13px; }
.cs-admin .cs-row input { width: 90px; margin: 0; text-align: right; }
.cs-admin .cs-hint { font-size: 11px; color: #8d877b; margin: 8px 0; }
.cs-admin .cs-ok { color: #e8a72c; font-size: 12px; margin: 8px 0 0; }
.color-swatch-btn:disabled, #preorder-color option:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.cs-admin .cs-row input { background: #0d0d0d; color: #f0ede4; border: 1px solid #2e2e2e; border-radius: 8px; padding: 8px 10px; }

/* Kotak beli lebih ringkas: harga + stok satu baris, jumlah sebaris dengan labelnya, panel stok warna dilipat & 2 kolom */
.size-picker { margin: 12px 0; padding: 14px; }
.size-picker .selected-price { display: inline-block; margin: 10px 0 0; }
.size-picker .stock, .size-picker .stock-status { display: inline-flex; margin: 0 0 0 10px; font-size: 12px; vertical-align: middle; }
.size-picker .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.size-picker .qty-row label { margin: 0; }
.size-picker .qty-row .qty-picker { margin: 0; }
.size-picker .qty-picker button { width: 38px; height: 38px; }
.size-picker > label[style*="margin-top:14px"] { margin-top: 10px !important; margin-bottom: 6px; }
.cs-admin { margin-top: 8px; padding: 8px 12px; }
.cs-admin .cs-sum { font-weight: 400; color: #8d877b; font-size: 11px; }
.cs-admin .cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 6px; }
.cs-admin .cs-row { padding: 5px 0; }
.cs-admin .cs-row input { width: 64px; padding: 6px 8px; }
.cs-admin .cs-hint { margin: 6px 0; }

/* Deskripsi produk: baris baru & daftar (- ...) tampil apa adanya */
#storyTxt { white-space: pre-line; }

/* Blok "Tentang pembuat" (produk alat) */
.maker-note { margin: 12px 0; padding: 2px 0 2px 12px; border-left: 3px solid #E24C2B; }
.maker-note strong { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #a39d93; margin-bottom: 4px; }
.maker-note .story-text { margin: 0; }
#storyTxt .desc-h { color: #f0ede4; font-weight: 600; }

/* Deskripsi berpoin (1. Judul + isi): tiap poin bisa dilipat supaya halaman tidak panjang */
.feat-list { margin: 4px 0 8px; }
.feat-list .desc-h { font-weight: 600; color: #f0ede4; margin: 0 0 6px; }
.feat-list .feat { border-top: 1px solid #262626; }
.feat-list .feat:last-of-type { border-bottom: 1px solid #262626; }
.feat-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; font-weight: 600; color: #f0ede4; }
.feat-list summary::-webkit-details-marker { display: none; }
.feat-list summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid #a39d93; border-bottom: 2px solid #a39d93; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.feat-list details[open] summary::after { transform: rotate(-135deg); }
.feat-list .feat p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #bdb8ae; }
.feat-list .feat-more { margin: 10px 0 0; font-size: 14px; }

/* Reseller panel (admin) */
.rs-wrap { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-table { min-width: 800px; }
.rs-row { grid-template-columns: 1.6fr .6fr 1fr 1fr 1fr 1fr 1fr; align-items: center; }
.rs-row-p { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr 1.2fr .5fr 1fr; }
.rs-det > summary { list-style: none; cursor: pointer; }
.rs-det > summary::-webkit-details-marker { display: none; }
.rs-det[open] > summary { background: #161616; }
.rs-sub { background: #101010; padding: 6px 14px 10px; border-bottom: 1px solid #1f1f1f; }
.rs-line { display: grid; grid-template-columns: .9fr 2.4fr 1fr .7fr auto; gap: 8px; padding: 6px 0; font-size: 12px; color: #cfc9ba; align-items: center; border-bottom: 1px dashed #222; }
.rs-line:last-child { border-bottom: none; }
.rs-items { overflow-wrap: anywhere; }
.rs-unpaid { color: #e8a72c; }

.form-card select { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #333; border-radius: 4px; background: #0d0d0d; color: #f0ede4; font-family: inherit; }

/* ===== Peta mitra titik-titik (dot matrix) ===== */
.pm-search{display:flex;gap:8px;margin:14px 0 10px;max-width:560px}
.pm-search input{flex:1;min-width:0;background:#141414;border:1px solid #333;border-radius:10px;padding:11px 14px;color:#eee;font-size:14px}
.pm-search input:focus{outline:none;border-color:#E24C2B}
.pm-search button{background:#E24C2B;color:#fff;border:0;border-radius:10px;padding:0 20px;font-weight:700;cursor:pointer}
.pm-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:#8d8880;margin:0 0 10px}
.pm-meta i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.pm-wrap{position:relative;border:1px solid #2c2c2c;border-radius:16px;background:#101010;overflow:hidden}
#pm-canvas{display:block;width:100%;height:440px;touch-action:none;cursor:grab}
#pm-canvas.drag{cursor:grabbing}
.pm-stage{position:relative}
.pm-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.pm-zoom button{width:38px;height:38px;border-radius:10px;border:1px solid #333;background:rgba(20,20,20,.9);color:#eee;font-size:20px;cursor:pointer;line-height:1}
.pm-zoom button:hover{border-color:#E24C2B}
.pm-note{position:absolute;left:10px;bottom:10px;font-size:11px;color:#9a948a;max-width:72%;background:rgba(16,16,16,.85);border-radius:8px;padding:4px 8px}
.pm-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;border-top:1px solid #2c2c2c;background:#141414}
.pm-tabs button{flex:1 0 auto;white-space:nowrap;min-width:64px;background:none;border:0;border-bottom:2px solid transparent;padding:12px 8px;color:#a8a29a;font-size:13px;cursor:pointer}
.pm-tabs button b{color:#eee;margin-left:4px}
.pm-tabs button.on{color:#fff;border-bottom-color:#E24C2B}
.pm-panel{margin-top:14px;background:#1c1c1c;border:1px solid #2c2c2c;border-radius:14px;padding:16px 18px}
.pm-panel h3{margin:0 0 2px;font-size:20px}
.pm-panel .pm-sub{margin:0 0 10px;font-size:12px;color:#8d8880}
.pm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 22px;max-height:300px;overflow:auto}
.pm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:none;border:0;border-bottom:1px solid #2a2a2a;padding:10px 2px;color:#eee;cursor:pointer;font-size:14px}
.pm-row:hover strong,.pm-row:focus-visible strong{color:#F0663F;outline:none}
.pm-row small{display:block;color:#8d8880;font-size:12px;margin-top:2px}
@media(max-width:700px){#pm-canvas{height:320px}.pm-list{grid-template-columns:1fr}.pm-tabs button{font-size:12px;padding:11px 10px}}

/* ===== Cupping (formulir SCA) ===== */
.cp-page{max-width:720px;margin:0 auto;padding:24px 16px 110px}
.cp-ref{color:#8d8880;font-size:12px;margin:6px 0 14px}
.cp-steps{display:flex;gap:6px;overflow-x:auto;margin:0 0 16px;padding-bottom:4px}
.cp-steps button{flex:1 0 auto;white-space:nowrap;background:#1c1c1c;border:1px solid #2c2c2c;color:#a8a29a;border-radius:999px;padding:8px 14px;font-size:12px;cursor:pointer}
.cp-steps button.on{border-color:#E24C2B;color:#fff}
.cp-step{display:none}.cp-step.on{display:block}
.cp-step h3{margin:6px 0 8px}
.cp-step label{display:block;margin:14px 0 6px;font-size:13px;color:#cfc9ba}
.cp-step input[type=text],.cp-step input[type=email],.cp-step select,.cp-step textarea{width:100%;box-sizing:border-box;background:#141414;border:1px solid #333;border-radius:10px;padding:12px 14px;color:#eee;font-size:15px;font-family:inherit}
.cp-step input:focus,.cp-step select:focus,.cp-step textarea:focus{outline:none;border-color:#E24C2B}
.cp-help{color:#8d8880;font-size:13px;line-height:1.5;margin:0 0 10px}
.cp-card{background:#1c1c1c;border:1px solid #2c2c2c;border-radius:14px;padding:14px 16px;margin:12px 0}
.cp-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cp-val{font-size:22px;color:#F0663F}
.cp-range{width:100%;margin:10px 0 4px;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:linear-gradient(to right,#E24C2B var(--p,50%),#333 var(--p,50%));outline:none}
.cp-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#F0663F;border:3px solid #111;cursor:pointer}
.cp-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#F0663F;border:3px solid #111;cursor:pointer}
.cp-scale{display:flex;justify-content:space-between;font-size:11px;color:#8d8880}
.cp-group{margin:12px 0}.cp-group h4{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a8a29a}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cp-chip{background:#1c1c1c;border:1px solid #333;color:#cfc9ba;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer}
.cp-chip.on{background:#E24C2B;border-color:#E24C2B;color:#fff}
.cp-seg{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:#8d8880}
.cp-seg button{background:#141414;border:1px solid #333;color:#cfc9ba;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
.cp-seg button.on{border-color:#E24C2B;color:#fff}
.cp-cups{display:flex;gap:10px;margin-top:10px}
.cp-cups button{width:44px;height:44px;border-radius:50%;border:2px solid #444;background:#141414;color:#888;font-size:14px;cursor:pointer}
.cp-cups button.on{background:#E24C2B;border-color:#E24C2B;color:#fff}
.cp-def{display:flex;gap:18px;flex-wrap:wrap}.cp-def>div{flex:1 1 140px}
.cp-def select{margin-top:2px}
.cp-tag{display:inline-block;font-size:12px;border-radius:6px;padding:3px 9px;border:1px solid}
.cp-tag.t{color:#e8c46a;border-color:#6a5a2a}.cp-tag.f{color:#ff8a7a;border-color:#7a3028}
.cp-nav{display:flex;gap:10px;justify-content:space-between;margin-top:22px}
.cp-nav button,.cp-nav a{flex:1;border-radius:10px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid #333;background:#141414;color:#eee}
.cp-nav .cp-next,.cp-nav .cp-submit{background:#E24C2B;border-color:#E24C2B;color:#fff}
.cp-nav span{flex:1}
.cp-final{text-align:center;background:#1c1c1c;border:1px solid #E24C2B;border-radius:16px;padding:20px;margin:12px 0}
.cp-final b{display:block;font-size:46px;color:#F0663F;line-height:1.1}
.cp-final span{display:block;color:#eee;font-size:16px;margin-top:4px}.cp-final small{color:#8d8880;font-size:12px}
.cp-break{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.cp-break div{display:flex;justify-content:space-between;background:#1c1c1c;border:1px solid #2c2c2c;border-radius:10px;padding:10px 12px;font-size:13px}
.cp-break b{color:#F0663F}
.cp-radar{display:block;width:100%;max-width:380px;margin:8px auto}
.cp-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;align-items:baseline;gap:10px;background:rgba(16,16,16,.95);border-top:1px solid #2c2c2c;padding:8px 16px;color:#a8a29a;font-size:13px}
.cp-bar b{font-size:20px;color:#F0663F}
.cp-adm{background:#1c1c1c;border:1px solid #2c2c2c;border-radius:12px;margin:8px 0}
.cp-adm summary{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.cp-adm summary small{color:#8d8880}.cp-adm summary b{color:#F0663F}
.cp-adm-body{padding:0 14px 14px}.cp-adm-meta{color:#8d8880;font-size:12px;margin:0 0 8px}
@media(max-width:520px){.cp-break{grid-template-columns:1fr}}

.cp-group h4{display:flex;align-items:center;gap:8px}
.cp-group h4 i{width:10px;height:10px;border-radius:50%;background:var(--c,#E24C2B);display:inline-block}
.cp-group .cp-chip{border-color:var(--c,#333);border-color:color-mix(in srgb,var(--c) 55%,#222)}
.cp-group .cp-chip.on{background:var(--c,#E24C2B);border-color:var(--c,#E24C2B);color:#111;font-weight:700}

/* Roda bubble catatan rasa (urutan seperti roda SCA) */
.cp-wheel{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:8px auto 4px}
.cp-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border-radius:50%;background:#141414;border:1px solid #2c2c2c;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8d8880;font-size:11px}
.cp-hub b{font-size:22px;color:#F0663F;line-height:1}
.cp-cat{position:absolute;width:22.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 22%,#141414);color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(9px,2.7vw,12px);font-weight:700;line-height:1.15}
.cp-cat span{padding:0 4px;word-break:break-word}
.cp-cat em{position:absolute;right:-2px;top:-2px;min-width:20px;height:20px;border-radius:10px;background:#fff;color:#111;font-style:normal;font-size:11px;line-height:20px;text-align:center;display:none}
.cp-cat.has em{display:block}
.cp-cat.open,.cp-cat:hover{background:var(--c);color:#111}
.cp-sub{background:#1c1c1c;border:1px solid var(--c);border-radius:14px;padding:12px;margin:8px 0}
.cp-sub[hidden]{display:none}
.cp-sub h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cfc9ba}
.cp-sub h4 i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.cp-bubbles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cp-bub{width:76px;height:76px;border-radius:50%;padding:4px;border:2px solid var(--c);background:#141414;color:#eee;font-size:12px;font-weight:600;line-height:1.15;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center}
.cp-bub.on{background:var(--c);color:#111}
.cp-picked{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.cp-pk{border:0;border-radius:999px;background:var(--c);color:#111;font-size:12px;font-weight:700;padding:6px 11px;cursor:pointer}
@media(min-width:900px){.cp-wheel{max-width:480px}.cp-bub{width:84px;height:84px;font-size:13px}}

/* Revisi: pilih kategori lewat tombol kecil, roda hanya menampilkan bubble rasa yang dipilih */
.cp-pills{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.cp-pill{position:relative;display:inline-flex;align-items:center;gap:7px;background:#141414;border:2px solid var(--c);color:#eee;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer}
.cp-pill i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.cp-pill em{font-style:normal;background:#fff;color:#111;border-radius:9px;min-width:18px;height:18px;line-height:18px;font-size:11px;text-align:center;display:none}
.cp-pill.has em{display:inline-block}
.cp-pill.open{background:var(--c);color:#111}.cp-pill.open i{background:#111}
.cp-wheel{border:1px dashed #2c2c2c;border-radius:50%;max-width:420px;margin:14px auto}
.cp-wheel .cp-hub{width:22%}
.cp-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:56%;text-align:center;color:#6f6a62;font-size:12px;pointer-events:none;top:68%}
.cp-pb{position:absolute;transform:translate(-50%,-50%);width:20%;aspect-ratio:1;border-radius:50%;border:0;background:var(--c);color:#111;font-weight:700;font-size:clamp(9px,2.8vw,12px);line-height:1.1;padding:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;animation:cppop .22s ease-out}
@keyframes cppop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media(min-width:900px){.cp-pb{font-size:13px}}

/* Roda flavour disederhanakan: hanya kumpulan bubble, tanpa lingkaran & hub */
.cp-wheel.fit{border:0;pointer-events:none}
.cp-wheel.fit .cp-pb{pointer-events:auto}
.cp-wheel.fit .cp-hub{display:none}
.cp-wheel:not(.fit){aspect-ratio:auto;height:64px;border:1px dashed #2c2c2c;border-radius:14px;max-width:420px}
.cp-wheel:not(.fit) .cp-hub{display:none}
.cp-wheel:not(.fit) .cp-empty{top:50%}

/* Tombol Invoice & Order again di halaman pesanan: tinggi dan gaya sama */
.order-actions{align-items:center}
.order-actions .btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:38px;margin:0;padding:0 16px;font-family:inherit;font-size:13px;line-height:1.2;white-space:nowrap}

/* Pilihan profil roasting (Filter / Omni / Espresso) */
.rp-box { margin-top: 16px; }
.rp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rp-title { font-size: 13px; color: #a8a29a; }
.rp-which { background: none; border: 0; padding: 0; color: #F0663F; font-size: 13px; cursor: pointer; font-family: inherit; width: auto; }
.rp-grid { display: grid; gap: 8px; }
.rp-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; border: 1px solid #2f2f2f; background: #141414; color: #f0ede4; cursor: pointer; font-family: inherit; text-align: center; width: auto; margin: 0; }
.rp-card svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rp-card strong { font-size: 15px; }
.rp-card small { font-size: 12px; color: #8d877b; }
.rp-card.active { border-color: #E24C2B; background: #1f1f1f; }
.rp-card.active svg { stroke: #F0663F; opacity: 1; }
.rp-card.active small { color: #cfc9ba; }
.rp-hint { border-left: 3px solid #3a3a3a; background: #141414; color: #a8a29a; font-style: italic; font-size: 13px; line-height: 1.5; padding: 12px 14px; margin: 10px 0 0; border-radius: 4px 12px 12px 4px; }
.rp-box.rp-error .rp-grid { outline: 1px dashed #E24C2B; outline-offset: 4px; border-radius: 14px; }
.rp-help { margin-top: 8px; background: #141414; border: 1px solid #2a2a2a; border-radius: 12px; padding: 10px 14px; font-size: 13px; color: #cfc9ba; line-height: 1.5; }
.rp-help p { margin: 6px 0; }
.rp-help span { color: #8d877b; }
.btn-cart-pill.rp-needed { background: transparent !important; color: #F0663F !important; border: 1.5px dashed #E24C2B !important; }
/* Keranjang: ganti profil per baris */
.cart-roast-form { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 8px; }
.cart-roast-form .cr-label { flex-basis: 100%; font-size: 13px; color: #a8a29a; display: inline-flex; align-items: center; gap: 5px; }
.cart-roast-form .cr-label.warn { color: #F0663F; }
.cart-roast-form .cr-label svg { width: 15px; height: 15px; fill: currentColor; }
.cart-roast-form .cr-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid #3a3a3a; background: #1c1c1c; color: #f0ede4; font-size: 12px; cursor: pointer; font-family: inherit; width: auto; margin: 0; }
.cart-roast-form .cr-chip.active { border-color: #E24C2B; color: #F0663F; }
.cart-roast-form.need .cr-chip { border-color: #4a4a4a; }
.cart-roast-warn { border: 1px solid #E24C2B; background: #1c1c1c; color: #F0663F; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 14px 0 0; }
.btn.btn-blocked { background: #3a3a3a !important; color: #888 !important; cursor: not-allowed; pointer-events: none; }

/* Halaman "Where to Try" */
.wt-page { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; }
.wt-title { font-size: 30px; line-height: 1.2; margin: 6px 0 22px; }
.wt-p { color: #a8a29a; font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.wt-q { font-weight: 600; color: #f0ede4; font-size: 17px; margin: 0 0 14px; }
.wt-area { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #F0663F; margin: 22px 0 4px; }
.wt-list { margin: 10px 0 0; padding-left: 20px; }
.wt-list li { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: #f0ede4; }
.wt-link { color: #f0ede4; font-weight: 600; text-decoration: underline; text-decoration-color: #F0663F; text-underline-offset: 3px; }
.wt-serves { color: #8d877b; }
.wt-addr { font-size: 14px; line-height: 1.45; margin-top: 2px; }
.wt-addr a { color: #8d877b; text-decoration: none; }
.wt-addr a svg { vertical-align: -1px; margin-right: 2px; }
.wt-addr a:hover, .wt-addr a:focus { color: #F0663F; text-decoration: underline; text-underline-offset: 3px; }
.wt-note { color: #8d877b; font-size: 13px; margin: 18px 0 0; }
.wt-cta { margin-top: 30px; padding: 16px 18px; background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 14px; }
.wt-cta p { margin: 0 0 10px; color: #cfc9ba; }
.wt-admin { margin-top: 16px; }

.pd-ask { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 11px 14px; border: 1px solid #3a3a3a; border-radius: 999px; color: #c9c4b8; font-size: 14px; text-decoration: none; }
.pd-ask:hover, .pd-ask:focus { border-color: #F0663F; color: #F0663F; }
@media (max-width: 600px) { .wt-serves { display: block; } .wt-dash { display: none; } }