/* Radisa Gallery — e-commerce layer (drawer, overlays, account, checkout)
   Builds on tokens.css + prototype.css. */

/* ── Accent wiring — make the accent tweak actually visible ─────────────── */
.r-nav button[data-active="true"]::after { background: var(--r-accent, var(--r-charcoal)); }
.r-link { border-bottom-color: var(--r-charcoal-30); }
.r-link:hover { border-bottom-color: var(--r-accent, var(--r-charcoal)); color: var(--r-accent, var(--r-charcoal)); }
.r-link:hover .r-arrow { color: var(--r-accent, var(--r-charcoal)); }
.r-stepper__dot[data-state="done"],
.r-stepper__dot[data-state="active"] { background: var(--r-accent, var(--r-charcoal)); border-color: var(--r-accent, var(--r-charcoal)); }
.r-stepper__line[data-state="done"] { background: var(--r-accent, var(--r-charcoal)); }
a.r-link.is-accent { color: var(--r-accent, var(--r-charcoal)); border-bottom-color: var(--r-accent, var(--r-charcoal)); }

/* ── Overlays / backdrop ───────────────────────────────────────────────── */
.r-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28, 26, 24, 0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; opacity: 0; animation: r-fadein 0.25s ease forwards;
}
@keyframes r-fadein { to { opacity: 1; } }
.r-overlay--right { justify-content: flex-end; }
.r-overlay--center { align-items: center; justify-content: center; padding: 24px; }

/* ── Cart drawer ───────────────────────────────────────────────────────── */
.r-drawer {
  width: min(460px, 100vw); height: 100%; background: var(--r-ivory);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 80px rgba(0,0,0,0.18);
  transform: translateX(100%); animation: r-slidein 0.36s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes r-slidein { to { transform: none; } }
.r-drawer__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px; border-bottom: 1px solid var(--r-charcoal-12);
}
.r-drawer__hd h3 { margin: 0; font-family: var(--r-serif); font-weight: 400; font-size: 24px; }
.r-drawer__body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.r-drawer__foot { border-top: 1px solid var(--r-charcoal-12); padding: 22px 28px 26px; background: var(--r-bg-alt, var(--r-stone)); }
.r-x {
  background: none; border: none; cursor: pointer; padding: 6px;
  font-size: 18px; line-height: 1; color: var(--r-charcoal-70);
}
.r-x:hover { color: var(--r-charcoal); }

/* cart line */
.r-cartline { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--r-charcoal-12); }
.r-cartline__thumb { width: 64px; height: 80px; position: relative; overflow: hidden; background: var(--r-stone); }
.r-cartline__name { font-family: var(--r-serif); font-size: 18px; line-height: 1.15; }
.r-qtybox { display: inline-flex; align-items: center; border: 1px solid var(--r-charcoal-30); }
.r-qtybox button { background: none; border: none; padding: 4px 9px; cursor: pointer; font-size: 13px; color: var(--r-charcoal); }
.r-qtybox span { min-width: 22px; text-align: center; font-family: var(--r-mono); font-size: 12px; }
.r-cartline__rm { background: none; border: none; cursor: pointer; font-family: var(--r-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r-charcoal-50); padding: 0; }
.r-cartline__rm:hover { color: var(--r-charcoal); }

/* totals */
.r-totrow { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 14px; }
.r-totrow--big { font-family: var(--r-serif); font-size: 22px; padding-top: 14px; }
.r-totrow--disc { color: var(--r-accent, var(--r-charcoal)); }

/* ── Modal (auth / newsletter) ─────────────────────────────────────────── */
.r-modal {
  width: min(440px, 100%); background: var(--r-ivory);
  padding: 40px 40px 36px; position: relative;
  box-shadow: 0 30px 90px rgba(0,0,0,0.28);
  transform: translateY(12px); opacity: 0; animation: r-popin 0.32s cubic-bezier(0.16,1,0.3,1) forwards;
}
.r-modal--wide { width: min(560px, 100%); }
@keyframes r-popin { to { transform: none; opacity: 1; } }
.r-modal__x { position: absolute; top: 18px; right: 18px; }
.r-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--r-charcoal-12); margin-bottom: 28px; }
.r-tabs button {
  background: none; border: none; padding: 12px 0; margin-right: 28px; cursor: pointer;
  font-family: var(--r-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--r-charcoal-50); position: relative;
}
.r-tabs button[data-active="true"] { color: var(--r-charcoal); }
.r-tabs button[data-active="true"]::after { content:""; position: absolute; left:0; right:0; bottom:-1px; height: 2px; background: var(--r-accent, var(--r-charcoal)); }

/* ── Search overlay ────────────────────────────────────────────────────── */
.r-search { width: 100%; max-width: 920px; margin: 0 auto; align-self: flex-start; margin-top: 12vh; }
.r-search__field { width: 100%; background: none; border: none; border-bottom: 1px solid var(--r-ivory-70); color: var(--r-ivory); font-family: var(--r-serif); font-size: clamp(28px, 5vw, 56px); padding: 16px 0; }
.r-search__field::placeholder { color: rgba(244,240,234,0.4); }
.r-search__field:focus { outline: none; border-bottom-color: var(--r-ivory); }
.r-search__res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }

/* ── Account ───────────────────────────────────────────────────────────── */
.r-acct { display: grid; grid-template-columns: 264px 1fr; gap: 56px; align-items: start; }
.r-acct__nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--r-charcoal-12); }
.r-acct__nav button {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 14px 0; border-bottom: 1px solid var(--r-charcoal-12);
  font-size: 14px; color: var(--r-charcoal-70); display: flex; justify-content: space-between; align-items: center;
  transition: color 0.2s ease, padding 0.2s ease;
}
.r-acct__nav button:hover { color: var(--r-charcoal); padding-left: 6px; }
.r-acct__nav button[data-active="true"] { color: var(--r-charcoal); font-weight: 500; }
.r-acct__nav button[data-active="true"] .r-acct__dot { opacity: 1; }
.r-acct__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--r-accent, var(--r-charcoal)); opacity: 0; }

/* generic data tile (address / card) */
.r-tile { border: 1px solid var(--r-charcoal-12); padding: 24px; background: var(--r-bg); position: relative; display: flex; flex-direction: column; gap: 8px; }
.r-tile[data-default="true"] { border-color: var(--r-charcoal); }
.r-tile__badge { position: absolute; top: 16px; right: 16px; }
.r-tile__actions { display: flex; gap: 16px; margin-top: 8px; }
.r-tile__actions button { background: none; border: none; cursor: pointer; padding: 0; font-family: var(--r-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r-charcoal-50); }
.r-tile__actions button:hover { color: var(--r-charcoal); }

/* status pill */
.r-status { display: inline-block; padding: 4px 10px; font-family: var(--r-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--r-charcoal-30); }
.r-status[data-tone="done"] { border-color: var(--r-accent, var(--r-charcoal)); color: var(--r-accent, var(--r-charcoal)); }

/* segmented control (checkout payment etc.) */
.r-seg2 { display: inline-flex; border: 1px solid var(--r-charcoal-30); }
.r-seg2 button { background: none; border: none; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--r-charcoal-70); }
.r-seg2 button[data-active="true"] { background: var(--r-charcoal); color: var(--r-ivory); }

/* ── Checkout ──────────────────────────────────────────────────────────── */
.r-co { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }
.r-co__aside { position: sticky; top: 96px; border: 1px solid var(--r-charcoal-12); background: var(--r-bg-alt, var(--r-stone)); padding: 28px; }
.r-radio-card { border: 1px solid var(--r-charcoal-12); padding: 20px 22px; cursor: pointer; display: flex; gap: 14px; align-items: flex-start; transition: border-color 0.2s ease; background: var(--r-bg); }
.r-radio-card:hover { border-color: var(--r-charcoal-30); }
.r-radio-card[data-active="true"] { border-color: var(--r-charcoal); }
.r-radio-card__dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--r-charcoal-30); flex-shrink: 0; margin-top: 2px; position: relative; }
.r-radio-card[data-active="true"] .r-radio-card__dot { border-color: var(--r-accent, var(--r-charcoal)); }
.r-radio-card[data-active="true"] .r-radio-card__dot::after { content:""; position:absolute; inset:3px; border-radius:50%; background: var(--r-accent, var(--r-charcoal)); }

/* responsive */
@media (max-width: 1080px) {
  .r-acct { grid-template-columns: 1fr; gap: 32px; }
  .r-acct__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; border: none; }
  .r-acct__nav button { border: 1px solid var(--r-charcoal-12); padding: 10px 14px; }
  .r-co { grid-template-columns: 1fr; gap: 40px; }
  .r-co__aside { position: static; }
  .r-search__res { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .r-search__res { grid-template-columns: 1fr 1fr; }
}