/* =====================================================================
   Ronelle Perfume — Premium Cart Drawer (Phase 6)
   Standalone, token-driven, served directly (no Tailwind build step).
   Namespaced `rcd-*` to avoid colliding with the shop filter `.rui-drawer`.
   Physical right-side panel (holds in RTL + LTR). Honors reduced-motion.
   ===================================================================== */

.rcd {
  position: fixed;
  inset: 0;
  z-index: var(--rui-z-drawer, 1040);
  visibility: hidden;
  pointer-events: none;
}
.rcd.is-open { visibility: visible; pointer-events: auto; }

.rcd__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.rcd.is-open .rcd__overlay { opacity: 1; }

.rcd__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--rui-bg, #fff);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.rcd.is-open .rcd__panel { transform: translateX(0); }

/* ---- Header ---- */
.rcd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rui-space-md) var(--rui-space-lg);
  border-block-end: 1px solid var(--rui-border);
  flex-shrink: 0;
}
.rcd__title {
  display: inline-flex;
  align-items: center;
  gap: var(--rui-space-xs);
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rui-text);
}
.rcd__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--rui-radius-pill);
  background: transparent;
  color: var(--rui-text-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.rcd__close:hover { background: var(--rui-surface-sunken); color: var(--rui-text); }

/* ---- Free shipping progress ---- */
.rcd__ship {
  padding: var(--rui-space-sm) var(--rui-space-lg);
  background: var(--rui-surface-sunken);
  border-block-end: 1px solid var(--rui-border);
  flex-shrink: 0;
}
.rcd__ship-msg {
  margin: 0 0 var(--rui-space-xs);
  font-size: 0.82rem;
  color: var(--rui-text);
}
.rcd__ship-msg strong { color: var(--rui-accent-strong, var(--rui-accent)); }
.rcd__ship.is-qualified .rcd__ship-msg { color: var(--rui-accent-strong, var(--rui-accent)); font-weight: 600; }
.rcd__ship-bar {
  height: 6px;
  border-radius: var(--rui-radius-pill);
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.rcd__ship-fill {
  display: block;
  height: 100%;
  border-radius: var(--rui-radius-pill);
  background: linear-gradient(90deg, var(--rui-accent), var(--rui-accent-hover));
  transition: width 0.4s ease;
}

/* ---- Body (scroll) ---- */
.rcd__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--rui-space-md) var(--rui-space-lg);
}

/* ---- Cart item ---- */
.rcd__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--rui-space-sm);
  padding: var(--rui-space-md) 0;
  border-block-end: 1px solid var(--rui-border);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}
.rcd__item.is-adding { animation: rcd-pop 0.45s ease; }
.rcd__item.is-removing {
  opacity: 0;
  transform: translateX(24px);
  max-height: 0;
  padding-block: 0;
  border-block-end-color: transparent;
  overflow: hidden;
}
@keyframes rcd-pop {
  0%   { background: var(--rui-success-bg, rgba(52,211,153,0.12)); }
  100% { background: transparent; }
}
.rcd__item-img {
  width: 72px;
  height: 90px;
  border-radius: var(--rui-radius-md);
  object-fit: cover;
  background: var(--rui-surface-sunken);
  border: 1px solid var(--rui-border);
}
.rcd__item-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rui-text-subtle);
}
.rcd__item-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rcd__item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rui-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rcd__item-variant { font-size: 0.74rem; color: var(--rui-text-muted); }
.rcd__item-unit { font-size: 0.78rem; color: var(--rui-text-subtle); }

.rcd__item-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--rui-space-xs); }
.rcd__item-total { font-size: 0.9rem; font-weight: 700; color: var(--rui-text); white-space: nowrap; }

.rcd__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rui-border);
  border-radius: var(--rui-radius-pill);
  overflow: hidden;
}
.rcd__qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--rui-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rcd__qty-btn:hover:not(:disabled) { background: var(--rui-surface-sunken); }
.rcd__qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rcd__qty-val { min-width: 28px; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--rui-text); }

.rcd__remove {
  border: none;
  background: transparent;
  color: var(--rui-text-subtle);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s ease;
}
.rcd__remove:hover { color: #dc2626; }

/* ---- Empty state ---- */
.rcd__empty { text-align: center; padding: var(--rui-space-3xl) var(--rui-space-md); }
.rcd__empty-art { color: var(--rui-text-subtle); margin-block-end: var(--rui-space-md); }
.rcd__empty-title { font-size: 1.2rem; font-weight: 700; color: var(--rui-text); margin: 0 0 var(--rui-space-xs); }
.rcd__empty-text { font-size: 0.85rem; color: var(--rui-text-muted); margin: 0 0 var(--rui-space-lg); line-height: 1.7; }
.rcd__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--rui-space-xs);
  padding: var(--rui-space-sm) var(--rui-space-lg);
  border-radius: var(--rui-radius-pill);
  background: var(--rui-accent);
  color: var(--rui-on-accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease;
}
.rcd__empty-cta:hover { background: var(--rui-accent-hover); }

/* ---- Recommendations (compact frozen cards) ---- */
.rcd__recs { margin-block-start: var(--rui-space-lg); }
.rcd__recs-title { font-size: 0.95rem; font-weight: 700; color: var(--rui-text); margin: 0 0 var(--rui-space-sm); }
.rcd__recs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rui-space-sm); }
.rcd__recs-grid .rui-pcard__inspired,
.rcd__recs-grid .rui-pcard__meta { display: none; }
.rcd__recs-grid .rui-pcard__name { font-size: 0.78rem; }
.rcd__recs-grid .rui-pcard__price-now { font-size: 0.82rem; }
.rcd__recs-grid .rui-pcard__addbtn { font-size: 0.72rem; padding-block: 0.4rem; }

/* ---- Footer / summary ---- */
.rcd__foot {
  flex-shrink: 0;
  padding: var(--rui-space-md) var(--rui-space-lg);
  border-block-start: 1px solid var(--rui-border);
  background: var(--rui-bg, #fff);
}
.rcd__summary { display: flex; flex-direction: column; gap: var(--rui-space-2xs); margin-block-end: var(--rui-space-sm); }
.rcd__row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--rui-text); }
.rcd__row--muted { color: var(--rui-text-muted); font-size: 0.78rem; }
.rcd__row--total { font-size: 1rem; font-weight: 700; padding-block-start: var(--rui-space-xs); border-block-start: 1px solid var(--rui-border); }
.rcd__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rui-space-xs);
  width: 100%;
  height: 48px;
  border-radius: var(--rui-radius-pill);
  background: var(--rui-accent);
  color: var(--rui-on-accent);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease;
}
.rcd__checkout:hover { background: var(--rui-accent-hover); }
.rcd__viewcart {
  display: block;
  text-align: center;
  margin-block-start: var(--rui-space-xs);
  font-size: 0.8rem;
  color: var(--rui-text-muted);
  text-decoration: none;
}
.rcd__viewcart:hover { color: var(--rui-text); text-decoration: underline; }

/* ---- Badge pulse on add ---- */
.rui-nav__count.is-bump { animation: rcd-bump 0.5s ease; }
@keyframes rcd-bump {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.45); }
}

@media (max-width: 480px) {
  .rcd__panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .rcd__overlay, .rcd__panel, .rcd__ship-fill, .rcd__item { transition: none; }
  .rcd__item.is-adding, .rui-nav__count.is-bump { animation: none; }
}

/* RONELLE bag: shared commerce layout, white / stone / gold. */
.rcd{--rui-accent:#252525;--rui-accent-hover:#444;--bag-gold:#8a6d12}
.rcd__panel{width:min(480px,100vw);background:#fff;color:#222}
.rcd__head{padding:22px 24px}.rcd__title{font-size:18px;font-weight:500}
.rcd__ship{background:#f7f7f3;padding:18px 24px;border-bottom:1px solid #e6e6df}
.rcd__ship-msg{font-size:12px;line-height:1.6}.rcd__ship-fill{background:var(--bag-gold)}
.rcd__body{padding:0 24px}.rcd__item{padding:22px 0;border-bottom:1px solid #e7e7e1;gap:16px}
.rcd__item-img{width:78px;height:104px;object-fit:contain;border-radius:0;background:#f7f7f4}
.rcd__item-name{font-size:14px;font-weight:500;line-height:1.5}.rcd__item-variant,.rcd__item-unit{font-size:12px;color:#666}
.rcd__qty{border:1px solid #d8d8d0;border-radius:0;background:#fff}.rcd__qty-btn{border-radius:0;min-width:32px;min-height:32px}
.rcd__remove{color:#777;text-decoration:underline;font-size:11px}.rcd__item-total{font-size:14px;white-space:nowrap}
.rcd__foot{background:#f8f8f5;padding:20px 24px;border-top:1px solid #e2e2dc}
.rcd__row{font-size:13px}.rcd__row--total{font-size:16px}.rcd__checkout,.rcd__empty-cta{border-radius:0;background:#222;color:#fff;min-height:48px}
.rcd__recs{padding-block:26px}.rcd__recs-title{font-size:17px;font-weight:500}.rcd__recs .rui-pcard{border-radius:0;box-shadow:none;border:0}
.rcd__recs .rui-pcard__media{aspect-ratio:3/4;border-radius:0;background:#f7f7f3}.rcd__recs .rui-pcard__name{font-size:13px}.rcd__recs .rui-pcard__inspired{font-size:11px}
.rcd__recs .rui-pcard__img{object-fit:contain}.rcd__recs .rui-pcard__wish{display:none}
.rn-cart-page{width:calc(100% - 64px);max-width:1400px;margin:0 auto;padding:48px 0 72px;color:#222}
.rn-cart-heading{margin-bottom:36px}.rn-cart-heading>span{font-size:10px;letter-spacing:.18em;color:#8a6d12}.rn-cart-heading h1{font-size:clamp(28px,3vw,44px);font-weight:500;margin:14px 0}.rn-cart-heading p{font-size:14px;color:#777}
.rcd--page{position:static;visibility:visible;pointer-events:auto;z-index:auto}
.rcd--page .rcd__overlay,.rcd--page .rcd__close,.rcd--page .rcd__viewcart{display:none}
.rcd--page .rcd__panel{position:static;width:100%;transform:none;transition:none;box-shadow:none;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0 48px;will-change:auto}
.rcd--page .rcd__head{grid-column:1/-1;padding:0 0 20px}
.rcd--page .rcd__ship{grid-column:1/-1;margin:0 0 24px}
.rcd--page .rcd__body{padding:0;overflow:visible;min-width:0}
.rcd--page .rcd__foot{align-self:start;position:sticky;top:100px;border:1px solid #e2e2dc;padding:28px}
.rcd--page .rcd__item-img{width:96px;height:128px}.rcd--page .rcd__item-name{font-size:17px}
.rcd--page .rcd__recs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rcd--page .rcd__panel:has([data-rcd-empty]:not([hidden])){grid-template-columns:1fr}.rcd--page .rcd__empty{padding:64px 20px}
.rcd [hidden]{display:none!important}
@media(max-width:850px){.rn-cart-page{width:calc(100% - 32px);padding-top:28px}.rcd--page .rcd__panel{grid-template-columns:1fr;gap:0}.rcd--page .rcd__foot{position:static}.rcd--page .rcd__item-img{width:78px;height:104px}.rcd--page .rcd__recs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.rcd__body{padding-inline:16px}.rcd__item{gap:10px}.rcd__item-img{width:66px;height:88px}.rcd__head,.rcd__foot,.rcd__ship{padding-inline:16px}.rcd__item-name{font-size:13px}}

.rcd__qty{width:max-content}.rcd__empty-art{margin-inline:auto}
.rcd__recs .rui-pcard__quick{position:static;inset:auto;opacity:1;visibility:visible;transform:none;padding:0;margin-top:12px;width:100%;pointer-events:auto}
.rcd__recs .rui-pcard__addbtn{background:#fff;color:#222;border:1px solid #222;border-radius:0;min-height:40px;width:100%;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.rcd__recs .rui-pcard__addbtn:hover{background:#222;color:#fff}
.rcd__recs .rui-pcard__body{padding:12px 0 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rcd__recs .rn-card-gender{position:absolute;top:8px;right:0;background:#7855a3;color:white;padding:3px 7px;font-size:10px;z-index:3}
.rcd__recs .rn-card-gender--men{background:#246b9c}.rcd__recs .rn-card-gender--women{background:#c73550}
.rcd__recs .rn-card-reviews{display:flex;gap:5px;color:#8a6d12;font-size:10px;align-items:center}
.rcd__recs .rn-card-stars{position:relative;width:80px;height:14px;display:inline-block;direction:ltr}
.rcd__recs .rn-card-stars__base,.rcd__recs .rn-card-stars__fill{position:absolute;left:0;top:0;display:flex;gap:2px;height:14px;overflow:hidden}
.rcd__recs .rn-card-stars__base{color:#ddd}.rcd__recs .rn-card-stars svg{min-width:14px;fill:currentColor}
.rcd__recs .rui-pcard__img-alt{position:absolute;inset:0;opacity:0;pointer-events:none}

.rcd__recs .rui-pcard__badges{display:none}
@media(max-width:850px){.rcd--page .rcd__body{display:contents}.rcd--page .rcd__head{order:1}.rcd--page .rcd__ship{order:2}.rcd--page .rcd__items,.rcd--page .rcd__empty{order:3}.rcd--page .rcd__foot{order:4;margin-top:24px}.rcd--page .rcd__recs{order:5}}