/* Shared cart badge + drawer (BKC / Shopify-style) */
:root {
  --rb-red: #349344;
  --rb-red-hover: #0b5f31;
  --rb-fg: #000;
  --rb-paper: #F6F2F2;
  --rb-gray-500: #6B6363;
  --color-border: #E4DEDE;
  --font-body: Montserrat, system-ui, sans-serif;
  --font-display: Montserrat, system-ui, sans-serif;
  --z-modal: 1000;
  --dur-3: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.rb-utility .rb-cart { position: relative; background: none; border: 0; cursor: pointer; padding: 6px; color: inherit; }
.rb-utility a { color: inherit; display: inline-flex; }
.rb-cart-count {
  position: absolute; top: -4px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--rb-red, #349344); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.rb-brand .bkc-mark {
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 28px;
  color: #349344; letter-spacing: -0.04em; text-decoration: none;
}

.rb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: background 160ms ease, transform 120ms ease;
}
.rb-btn-primary { background: var(--rb-red); color: #fff; }
.rb-btn-primary:hover { background: var(--rb-red-hover); color: #fff; }
.rb-btn-text { background: transparent; color: var(--rb-red); padding: 8px 0; border-radius: 0; letter-spacing: 0.08em; }
.rb-btn-text:hover { text-decoration: underline; text-underline-offset: 4px; }
.rb-btn-block { width: 100%; box-sizing: border-box; }

.rb-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden;
}
.rb-qty button {
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
}
.rb-qty .v { padding: 0 12px; font-family: var(--font-body); font-weight: 700; font-size: 14px; min-width: 1.5em; text-align: center; }

.rb-scrim {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.55);
  z-index: var(--z-modal);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out);
}
.rb-scrim.open { opacity: 1; pointer-events: auto; }
.rb-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 100%;
  background: #fff;
  z-index: calc(var(--z-modal) + 1);
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease-out);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,0.12);
}
.rb-drawer.open { transform: translateX(0); }
.rb-drawer .head { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--color-border);}
.rb-drawer .head h3 { font-family: var(--font-display); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: var(--rb-fg);}
.rb-drawer .head button { background: none; border: 0; cursor: pointer; padding: 4px; color: var(--rb-fg);}
.rb-drawer .items { flex: 1; overflow-y: auto; padding: 16px 24px;}
.rb-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); align-items: center;}
.rb-line .pimg { background: var(--rb-paper); border-radius: 8px; padding: 6px; display: flex; align-items: center; justify-content: center; height: 84px; }
.rb-line .pimg img { max-height: 72px; max-width: 100%; object-fit: contain;}
.rb-line h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; margin: 0 0 4px; color: var(--rb-fg);}
.rb-line .var { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-gray-500); margin-bottom: 8px;}
.rb-line .price { font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--rb-fg); line-height: 1;}
.rb-drawer .footer-cart { padding: 20px 24px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 14px;}
.rb-drawer .subtotal { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-fg);}
.rb-drawer .subtotal .v { font-weight: 700; font-size: 22px; color: var(--rb-fg); letter-spacing: 0; text-transform: none;}
.rb-drawer .ship-note { font-family: var(--font-body); font-size: 11px; color: var(--rb-gray-500); text-align: center; letter-spacing: 0.04em;}

@media (max-width: 480px) {
  .rb-drawer { width: 100%; }
}

.bkc-discount-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(52, 147, 68, 0.1); border: 1px solid rgba(52, 147, 68, 0.25);
  font-family: var(--font-body); font-size: 13px; color: var(--rb-fg);
}
.bkc-discount-pill strong {
  font-family: var(--font-display); letter-spacing: 0.06em; color: var(--rb-red);
}
.bkc-discount-pill-save {
  font-weight: 700; color: var(--rb-red); white-space: nowrap;
}
.bkc-discount-row .v { color: var(--rb-red) !important; }
.bkc-discount-row { opacity: 0.95; }

button.rb-hero-code,
button.rb-gallery-code {
  display: inline; margin: 0; padding: 2px 8px;
  border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; font-weight: 800; letter-spacing: 0.06em;
  background: #fdeb01; color: #0b5f31;
}
button.rb-hero-code:hover,
button.rb-gallery-code:hover { filter: brightness(0.97); }