/* SRSW Reserve — Dark Luxury Theme
 * ─────────────────────────────────────────────────────────────────
 * Overrides Tailwind CDN's defaults for the luxury demo aesthetic.
 * Locked tokens from 26a_scope_and_goals.md.
 */

:root {
  /* Core dark palette */
  --srsw-ink:        #0E0D0B;
  --srsw-ink-2:      #15140F;
  --srsw-ink-3:      #1F1D17;
  --srsw-ink-line:   #2A271F;

  /* Bone / paper on dark */
  --srsw-bone:       #E8DDA6;
  --srsw-bone-dim:   #B8AC79;
  --srsw-paper:      #FAF7F2;

  /* Accents */
  --srsw-brass:      #C9A36A;
  --srsw-brass-deep: #8A6F44;
  --srsw-brass-pale: rgba(201, 163, 106, 0.18);
  --srsw-oxblood:    #4A1A20;

  /* Sage */
  --srsw-sage:       #6B7068;
  --srsw-sage-dark:  #3A3F38;

  /* iPhone safe area */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Legacy aliases (from rebuild) — re-routed to dark palette */
  --srsw-forest: var(--srsw-brass);
  --srsw-bone-bg: var(--srsw-ink-2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--srsw-ink); }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--srsw-ink);
  color: var(--srsw-bone);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse at top, rgba(201,163,106,0.04) 0%, transparent 60%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 6px);
  background-attachment: fixed;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.font-serif {
  font-family: 'Fraunces', 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  letter-spacing: -0.015em;
  font-feature-settings: "ss01", "ss02";
}
.font-display {
  font-family: 'Cormorant Garamond', 'Fraunces', 'Georgia', serif;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.font-mono { font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', ui-monospace, monospace; }

/* Color utility shims */
.bg-ink     { background-color: var(--srsw-ink); }
.bg-ink-2   { background-color: var(--srsw-ink-2); }
.bg-ink-3   { background-color: var(--srsw-ink-3); }
.bg-paper   { background-color: var(--srsw-ink-2); }   /* legacy alias — dark surface */
.bg-bone    { background-color: var(--srsw-ink-2); }    /* legacy alias */
.bg-brass   { background-color: var(--srsw-brass); }
.bg-brass-pale { background-color: var(--srsw-brass-pale); }
.bg-oxblood { background-color: var(--srsw-oxblood); }
.bg-sage    { background-color: var(--srsw-sage); }
.bg-forest  { background-color: var(--srsw-brass); }    /* legacy alias */

.text-ink     { color: var(--srsw-ink); }
.text-bone    { color: var(--srsw-bone); }
.text-bone-dim { color: var(--srsw-bone-dim); }
.text-paper   { color: var(--srsw-ink); }     /* legacy: 'on-CTA' text = dark on brass */
.text-brass   { color: var(--srsw-brass); }
.text-brass-deep { color: var(--srsw-brass-deep); }
.text-sage    { color: var(--srsw-sage); }
.text-forest  { color: var(--srsw-brass); }
.text-oxblood { color: var(--srsw-oxblood); }

.border-brass     { border-color: var(--srsw-brass); }
.border-brass-deep { border-color: var(--srsw-brass-deep); }
.border-bone\/20  { border-color: rgba(232, 221, 166, 0.20); }
.border-bone\/30  { border-color: rgba(232, 221, 166, 0.30); }
.border-ink-line  { border-color: var(--srsw-ink-line); }
.border-sage\/15  { border-color: var(--srsw-ink-line); }
.border-sage\/20  { border-color: var(--srsw-ink-line); }
.border-sage\/30  { border-color: var(--srsw-ink-line); }
.border-brass\/30 { border-color: rgba(201, 163, 106, 0.30); }
.border-brass\/40 { border-color: rgba(201, 163, 106, 0.40); }
.border-brass\/60 { border-color: rgba(201, 163, 106, 0.60); }
.border-ink\/20   { border-color: var(--srsw-ink-line); }

/* Translucent overlays */
.bg-ink\/40    { background-color: rgba(14, 13, 11, 0.40); }
.bg-ink\/70    { background-color: rgba(14, 13, 11, 0.70); }
.bg-ink\/85    { background-color: rgba(14, 13, 11, 0.85); }
.bg-ink\/90    { background-color: rgba(14, 13, 11, 0.92); }
.bg-brass\/5   { background-color: rgba(201, 163, 106, 0.05); }
.bg-brass\/10  { background-color: rgba(201, 163, 106, 0.10); }
.bg-brass\/20  { background-color: rgba(201, 163, 106, 0.20); }
.bg-brass\/90  { background-color: rgba(201, 163, 106, 0.90); }
.bg-oxblood\/20 { background-color: rgba(74, 26, 32, 0.20); }
.bg-paper\/90  { background-color: rgba(14, 13, 11, 0.92); }  /* legacy — sticky header bg goes dark */
.bg-bone\/90   { background-color: rgba(14, 13, 11, 0.92); }
.bg-bone\/5    { background-color: rgba(232, 221, 166, 0.05); }
.bg-bone\/10   { background-color: rgba(232, 221, 166, 0.08); }

.text-ink\/70  { color: rgba(232, 221, 166, 0.70); }
.text-ink\/80  { color: rgba(232, 221, 166, 0.80); }
.placeholder-sage::placeholder { color: var(--srsw-sage); }

/* Focus visibility — brass ring on dark */
*:focus-visible {
  outline: 2px solid var(--srsw-brass);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Region tile pills — region-tile uses its own borders; keep ring tight */
.region-tile:focus-visible { outline-offset: 1px; }

/* Form inputs on dark */
input, textarea, select {
  background-color: var(--srsw-ink-2);
  border: 1px solid var(--srsw-ink-line);
  color: var(--srsw-bone);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--srsw-brass);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--srsw-sage); }
/* Inline filter selects (in toolbars/dropdown rows) should clear 44px on touch */
.toolbar-select,
select.toolbar-select { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }

/* Buttons inherit font */
button { font: inherit; }

/* Selection */
::selection { background: var(--srsw-brass); color: var(--srsw-ink); }

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--srsw-ink); }
::-webkit-scrollbar-thumb { background: var(--srsw-ink-line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--srsw-brass-deep); }

/* Line-clamp polyfill */
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-4 { display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }

/* Hero display type */
.hero-display {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.hero-display em, .hero-display .italic {
  font-style: italic;
  color: var(--srsw-brass);
  font-weight: 400;
}

/* Brass divider */
.brass-rule {
  border: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--srsw-brass) 50%, transparent);
  margin: 2rem 0;
}

/* Tier badges */
.tier-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
  padding: 0.25rem 0.65rem; border-radius: 999px; font-weight: 500;
}
.tier-mid     { background: var(--srsw-brass-pale); color: var(--srsw-brass); border:1px solid rgba(201,163,106,0.4); }
.tier-premium { background: rgba(201, 163, 106, 0.18); color: var(--srsw-brass); border:1px solid var(--srsw-brass); }
.tier-trophy  { background: var(--srsw-oxblood); color: var(--srsw-brass); border:1px solid var(--srsw-brass); }

/* Cart drawer transitions */
#cart-drawer aside { transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); }
#cart-drawer [data-overlay] { transition: opacity 220ms ease; }

/* Touch targets ≥ 44px (Apple HIG) — for interactive elements */
.touch, .btn-touch { min-height: 44px; }
button, [role="button"], a.btn { min-height: 44px; }

/* Bottle card luxe styling */
.card-luxe {
  background: var(--srsw-ink-2);
  border: 1px solid var(--srsw-ink-line);
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.card-luxe:hover {
  border-color: var(--srsw-brass);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
}

.glow-brass { box-shadow: 0 0 24px -8px rgba(201, 163, 106, 0.4); }

/* PWA standalone tweaks (iOS) */
@media (display-mode: standalone) {
  body { padding-top: var(--safe-top); }
}

/* Mobile-only — bigger hero, sticky CTA */
@media (max-width: 640px) {
  .hero-display { font-size: clamp(2.5rem, 9vw, 3.75rem); }
}

/* Wood-plank seam — for decorative dividers */
.plank-line {
  background: repeating-linear-gradient(
    180deg,
    rgba(201,163,106,0.06) 0px,
    rgba(201,163,106,0.06) 1px,
    transparent 1px,
    transparent 6px
  );
}

/* ─── Motion ───────────────────────────────────────────────────── */

/* Page entrance — fade & rise on load */
body.motion-page-enter { opacity: 0; transform: translateY(8px); }
body.motion-page-enter-active {
  opacity: 1; transform: translateY(0);
  transition: opacity 480ms cubic-bezier(.2,.7,.2,1),
              transform 600ms cubic-bezier(.2,.7,.2,1);
}
body.motion-page-exit {
  opacity: 0; transform: scale(0.985);
  transition: opacity 260ms ease, transform 260ms ease;
}

/* View Transitions API — cross-fade between routes */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }
  ::view-transition-old(root) { animation-name: fadeOutScale; }
  ::view-transition-new(root) { animation-name: fadeInScale; }
}
@keyframes fadeOutScale {
  to { opacity: 0; transform: scale(0.995); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(1.01); }
}

/* Staggered card reveal — only when motion.js is loaded (body.has-motion) */
.card-luxe {
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
body.has-motion .card-luxe,
body.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms cubic-bezier(.2,.7,.2,1),
              transform 540ms cubic-bezier(.2,.7,.2,1),
              border-color 200ms, box-shadow 200ms;
}
body.has-motion .card-luxe.is-revealed,
body.has-motion [data-reveal].is-revealed {
  opacity: 1; transform: translateY(0);
}
.card-luxe.is-pressed { transform: scale(0.985); }

/* Smooth hover lift (already on hover via card-luxe rule, but stronger) */
.card-luxe:hover { transform: translateY(-3px); }

/* Soft floating drift for hero bottles */
@keyframes hero-drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.hero-drift { animation: hero-drift 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  body.motion-page-enter, body.motion-page-enter-active,
  .card-luxe, [data-reveal], .hero-drift {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
}

/* ─── Concierge widget ─────────────────────────────────────────── */

#concierge-fab {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  right:  calc(20px + var(--safe-right));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(140deg, #D9B886, #C9A36A 50%, #8A6F44);
  color: #0E0D0B;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(201,163,106,0.65);
  border-radius: 999px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6),
              0 0 0 4px rgba(201,163,106,0.10),
              inset 0 1px 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms;
}
#concierge-fab:hover { transform: translateY(-2px) scale(1.02); }
#concierge-fab:active { transform: translateY(0) scale(0.98); }
#concierge-fab .concierge-fab-label { white-space: nowrap; }

@media (max-width: 480px) {
  #concierge-fab .concierge-fab-label { display: none; }
  #concierge-fab { padding: 14px; }
}

#concierge-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#concierge-panel.hidden { display: none; }

.concierge-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 220ms ease;
}
#concierge-panel.is-open .concierge-overlay { opacity: 1; }

.concierge-sheet {
  position: relative;
  width: min(420px, 100%);
  height: min(680px, 92dvh);
  margin: max(16px, var(--safe-bottom)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) 0;
  background: linear-gradient(180deg, #1A1812 0%, #0E0D0B 100%);
  border: 1px solid var(--srsw-ink-line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
  transform: translateY(40px) scale(0.96);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 280ms;
  overflow: hidden;
}
#concierge-panel.is-open .concierge-sheet { transform: translateY(0) scale(1); opacity: 1; }

@media (max-width: 640px) {
  #concierge-panel { align-items: stretch; }
  .concierge-sheet {
    width: 100%;
    height: 100dvh;   /* dvh adapts when the iOS keyboard opens */
    margin: 0;
    border-radius: 18px 18px 0 0;
  }
}

.concierge-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--srsw-ink-line);
  background: linear-gradient(180deg, rgba(201,163,106,0.08), transparent);
}
.concierge-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--srsw-brass-deep);
  border-radius: 999px;
  background: var(--srsw-ink);
}
.concierge-seal img { width: 32px; height: 32px; object-fit: contain; }
.concierge-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--srsw-bone-dim);
  background: transparent; border: 1px solid transparent;
}
.concierge-close:hover { color: var(--srsw-brass); border-color: var(--srsw-ink-line); }

.concierge-log {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}

.concierge-msg { display: flex; flex-direction: column; max-width: 88%; }
.concierge-msg-bot { align-self: flex-start; }
.concierge-msg-me  { align-self: flex-end; align-items: flex-end; }

.concierge-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--srsw-ink-2);
  color: var(--srsw-bone);
  border: 1px solid var(--srsw-ink-line);
}
.concierge-msg-bot .concierge-bubble {
  border-bottom-left-radius: 4px;
  background: var(--srsw-ink-3);
}
.concierge-msg-me .concierge-bubble {
  border-bottom-right-radius: 4px;
  background: var(--srsw-brass-pale);
  border-color: var(--srsw-brass-deep);
  color: var(--srsw-bone);
}

.concierge-typing { padding: 12px 14px; }
.concierge-typing span {
  display: inline-block; width: 6px; height: 6px;
  margin-right: 4px;
  border-radius: 999px; background: var(--srsw-brass);
  opacity: 0.5;
  animation: dotpulse 1.1s infinite ease-in-out;
}
.concierge-typing span:nth-child(2) { animation-delay: 0.18s; }
.concierge-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dotpulse {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

.concierge-cta {
  margin-top: 8px;
  display: inline-block;
  background: var(--srsw-brass);
  color: var(--srsw-ink);
  font-size: 12px; font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  align-self: flex-start;
}
.concierge-cta:hover { background: var(--srsw-brass-deep); }

.concierge-bottle-list {
  margin-top: 8px;
  display: grid; gap: 6px;
}
.concierge-bottle {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--srsw-ink-line);
  border-radius: 10px;
  background: var(--srsw-ink-2);
  text-decoration: none;
  transition: border-color 160ms;
  overflow: hidden;
  min-width: 0;
}
.concierge-bottle:hover { border-color: var(--srsw-brass); }
.concierge-bottle-thumb {
  width: 36px; height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}
.concierge-bottle-thumb-fallback {
  width: 36px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  background: var(--srsw-ink-3);
  border-radius: 6px;
  color: var(--srsw-brass);
}
.concierge-bottle-text {
  display: flex; flex-direction: column;
  min-width: 0; flex: 1;
}

.concierge-suggestions {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding: 8px 18px 12px;
  border-top: 1px dashed var(--srsw-ink-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.concierge-suggestions::-webkit-scrollbar { display: none; }
.concierge-chip {
  padding: 10px 14px;
  min-height: 36px;
  font-size: 12px;
  color: var(--srsw-bone-dim);
  background: var(--srsw-ink-2);
  border: 1px solid var(--srsw-ink-line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.concierge-chip:hover {
  border-color: var(--srsw-brass);
  color: var(--srsw-brass);
}

.concierge-form {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--srsw-ink-line);
}
.concierge-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  background: var(--srsw-ink-2);
  border: 1px solid var(--srsw-ink-line);
  color: var(--srsw-bone);
  outline: none;
}
.concierge-form input:focus { border-color: var(--srsw-brass); }
.concierge-send {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--srsw-brass);
  color: var(--srsw-ink);
  border: 1px solid var(--srsw-brass-deep);
  cursor: pointer;
}
.concierge-send:hover { background: var(--srsw-brass-deep); color: var(--srsw-bone); }

/* peer-checked card style — used in inquire + checkout radios.
 * Tailwind CDN doesn't always JIT these inside HTML strings; explicit rule.
 */
.select-card input.peer:checked ~ .select-card-body,
.select-card input.peer:checked + .select-card-body {
  border-color: var(--srsw-brass) !important;
  background-color: rgba(201, 163, 106, 0.10) !important;
}

/* Toast system */
#srsw-toast-root {
  position: fixed;
  z-index: 80;
  bottom: calc(96px + var(--safe-bottom));
  right:  calc(20px + var(--safe-right));
  left:   calc(20px + var(--safe-left));
  pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
@media (max-width: 480px) {
  #srsw-toast-root { bottom: calc(86px + var(--safe-bottom)); }
}
/* Payment-method chips (Venmo / Cash App / Zelle / PayPal) */
.payment-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  text-align: left;
  background: var(--srsw-ink-2);
  border: 1px solid var(--srsw-ink-line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.payment-chip:hover {
  border-color: var(--srsw-brass);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.5);
}
.payment-chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: #fff;
  flex-shrink: 0;
}
.payment-chip-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.payment-chip-name {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--srsw-bone);
}
.payment-chip-handle {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--srsw-bone-dim);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-chip-arrow {
  color: var(--srsw-brass);
  opacity: 0.7;
  font-size: 18px;
}
.payment-chip:hover .payment-chip-arrow { opacity: 1; }

/* Request-added banner — slides in from top */
@keyframes banner-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes banner-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(-4px); } }
.animate-banner-in  { animation: banner-in 320ms cubic-bezier(.2,.7,.2,1); }
.animate-banner-out { animation: banner-out 280ms ease forwards; }

/* Toast — opacity/transform driven inline by JS (so cascade can't fight us) */
.srsw-toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(420px, 100%);
  padding: 12px 38px 12px 16px;
  background: var(--srsw-ink-2);
  border: 1px solid var(--srsw-brass-deep);
  border-radius: 14px;
  color: var(--srsw-bone);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.55);
  position: relative;
}
.srsw-toast-body { flex: 1; }
.srsw-toast-body strong { color: var(--srsw-brass); font-weight: 600; }
.srsw-toast-action {
  display: inline-block;
  background: var(--srsw-brass);
  color: var(--srsw-ink);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  border: 0; cursor: pointer;
  white-space: nowrap;
}
.srsw-toast-action:hover { background: var(--srsw-brass-deep); }
.srsw-toast-close {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--srsw-bone-dim); font-size: 18px; line-height: 1;
  cursor: pointer; border-radius: 999px;
}
.srsw-toast-close:hover { color: var(--srsw-brass); }

/* Footer social icons */
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--srsw-ink-line);
  color: var(--srsw-bone-dim);
  transition: color 180ms, border-color 180ms, transform 180ms;
}
.footer-social:hover {
  color: var(--srsw-brass);
  border-color: var(--srsw-brass);
  transform: translateY(-1px);
}

/* First-visit hint balloon over the concierge FAB */
#concierge-hint {
  position: fixed;
  z-index: 59;
  bottom: calc(76px + var(--safe-bottom));
  right:  calc(20px + var(--safe-right));
  max-width: 260px;
  padding: 10px 32px 10px 14px;
  background: var(--srsw-ink-2);
  border: 1px solid var(--srsw-brass-deep);
  color: var(--srsw-bone);
  font-size: 13px;
  border-radius: 14px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.55);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), opacity 320ms;
}
#concierge-hint::after {
  content: ''; position: absolute;
  bottom: -7px; right: 26px;
  width: 12px; height: 12px;
  background: var(--srsw-ink-2);
  border-right: 1px solid var(--srsw-brass-deep);
  border-bottom: 1px solid var(--srsw-brass-deep);
  transform: rotate(45deg);
}
#concierge-hint.is-in { transform: translateY(0); opacity: 1; }
#concierge-hint.is-out { transform: translateY(8px); opacity: 0; }
.concierge-hint-dismiss {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--srsw-bone-dim); font-size: 18px; line-height: 1;
  cursor: pointer; border-radius: 999px;
}
.concierge-hint-dismiss:hover { color: var(--srsw-brass); }