/* ===========================================================================
remAIke.IT — Shared Warm-Light Theme
Customer user-area stylesheet. FRIENDLY warm corporate palette
(NOT the dark admin glass). Ported from ZaunbauOnline React components
into vanilla classes.
Link from every customer page:
Fonts (load in before this sheet):
API base: https://upload.remaike.it
Customer auth: PayPal OAuth bearer in localStorage, or email query param.
Never embed operator/admin tokens in customer pages.
=========================================================================== */
/* ---------------------------------------------------------------------------
DESIGN TOKENS (--rm-*)
--------------------------------------------------------------------------- */
:root {
/* Brand */
--rm-gold: #c9a962;
--rm-gold-bright: #f0cf83;
--rm-gold-grad: linear-gradient(135deg, #c9a962 0%, #f0cf83 100%);
/* Surfaces */
--rm-paper: #faf8f3;
--rm-surface: #ffffff;
--rm-input-bg: #f2eadc;
/* Ink */
--rm-ink: #1c1a17;
--rm-ink-soft: #6b6457;
/* Lines */
--rm-border: #e8e2d6;
--rm-border-gold: rgba(201, 169, 98, 0.18);
/* Status */
--rm-success: #3f9b6b;
--rm-error: #c2554d;
--rm-warn: #c9962f;
/* Status tints (soft fills for banners/pills) */
--rm-success-tint: rgba(63, 155, 107, 0.12);
--rm-error-tint: rgba(194, 85, 77, 0.12);
--rm-warn-tint: rgba(201, 150, 47, 0.12);
/* Elevation + radii */
--rm-shadow: 0 8px 24px rgba(201, 169, 98, 0.08);
--rm-shadow-lg: 0 18px 48px rgba(28, 26, 23, 0.16);
--rm-radius: 12px;
--rm-radius-lg: 16px;
--rm-radius-pill: 100px;
/* Type */
--rm-font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
--rm-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Layout */
--rm-max: 1200px;
--rm-header-h: 64px;
--rm-header-h-sm: 56px;
/* Motion */
--rm-t: 0.2s ease;
}
/* ---------------------------------------------------------------------------
BASE RESET
--------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--rm-font-body);
font-weight: 400;
line-height: 1.55;
color: var(--rm-ink);
background: var(--rm-paper);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--rm-t); }
a:hover { color: var(--rm-gold); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
:focus-visible {
outline: 2px solid var(--rm-gold);
outline-offset: 2px;
border-radius: 4px;
}
::selection { background: var(--rm-gold-bright); color: var(--rm-ink); }
.rm-hidden { display: none !important; }
.rm-container { max-width: var(--rm-max); margin: 0 auto; padding: 0 24px; }
.rm-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------------------------
TYPOGRAPHY (Cinzel headings / Manrope body)
--------------------------------------------------------------------------- */
h1, h2, h3 {
font-family: var(--rm-font-head);
font-weight: 600;
line-height: 1.2;
color: var(--rm-ink);
letter-spacing: 0.01em;
}
h4, h5, h6 {
font-family: var(--rm-font-body);
font-weight: 700;
line-height: 1.3;
color: var(--rm-ink);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { color: var(--rm-ink); }
.rm-muted { color: var(--rm-ink-soft); }
.rm-gold-tx { color: var(--rm-gold); }
.rm-eyebrow {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--rm-ink-soft);
}
/* ===========================================================================
COMPONENT — .rm-header (sticky ShopHeader)
logo · nav · WhatsApp + Anfrage CTAs · mobile drawer toggle
=========================================================================== */
.rm-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250, 248, 243, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--rm-border-gold);
}
.rm-header__bar {
max-width: var(--rm-max);
margin: 0 auto;
height: var(--rm-header-h);
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* Logo */
.rm-header__logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
font-family: var(--rm-font-head);
font-size: 1.4rem;
font-weight: 600;
color: var(--rm-ink);
letter-spacing: 0.01em;
}
.rm-header__logo:hover { color: var(--rm-ink); }
.rm-header__logo span { color: var(--rm-gold); }
.rm-header__logo img { height: 34px; width: auto; }
/* Desktop nav */
.rm-nav {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
.rm-nav a {
padding: 8px 14px;
border-radius: var(--rm-radius-pill);
font-size: 0.92rem;
font-weight: 500;
color: var(--rm-ink-soft);
white-space: nowrap;
}
.rm-nav a:hover,
.rm-nav a.is-active {
color: var(--rm-ink);
background: rgba(201, 169, 98, 0.1);
}
/* Action cluster */
.rm-header__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* WhatsApp CTA */
.rm-cta-wa {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--rm-radius-pill);
background: #25d366;
color: #fff;
font-weight: 600;
font-size: 0.88rem;
}
.rm-cta-wa:hover { background: #1da851; color: #fff; }
/* Anfrage CTA (outline-gold) */
.rm-cta-anfrage {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--rm-radius-pill);
background: transparent;
border: 1px solid var(--rm-gold);
color: var(--rm-gold);
font-weight: 600;
font-size: 0.88rem;
}
.rm-cta-anfrage:hover {
background: var(--rm-gold);
color: #fff;
}
/* Icon button (search, account, etc.) */
.rm-icon-btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--rm-radius-pill);
color: var(--rm-ink-soft);
border: 1px solid var(--rm-border);
background: var(--rm-surface);
transition: all var(--rm-t);
}
.rm-icon-btn:hover {
color: var(--rm-gold);
border-color: var(--rm-gold);
}
/* Mobile drawer toggle (hamburger) — hidden on desktop */
.rm-header__toggle { display: none; }
/* Mobile drawer */
.rm-drawer {
position: fixed;
inset: 0;
z-index: 60;
}
.rm-drawer.rm-hidden { display: none; }
.rm-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(28, 26, 23, 0.28);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.rm-drawer__panel {
position: absolute;
top: var(--rm-header-h);
left: 0;
right: 0;
background: var(--rm-surface);
border-bottom: 1px solid var(--rm-border);
box-shadow: var(--rm-shadow-lg);
padding: 16px 20px 24px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: calc(100vh - var(--rm-header-h));
overflow-y: auto;
}
.rm-drawer__panel a,
.rm-drawer__panel button {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: var(--rm-radius);
font-size: 1rem;
font-weight: 500;
color: var(--rm-ink);
text-align: left;
}
.rm-drawer__panel a:hover,
.rm-drawer__panel button:hover {
background: rgba(201, 169, 98, 0.1);
color: var(--rm-ink);
}
.rm-drawer__sep {
height: 1px;
background: var(--rm-border);
margin: 8px 0;
}
.rm-drawer__legal {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 8px 14px 0;
font-size: 0.82rem;
}
.rm-drawer__legal a { color: var(--rm-ink-soft); padding: 0; }
/* ===========================================================================
COMPONENT — .rm-btn (buttons)
.primary (gold gradient) · .ghost (outline)
=========================================================================== */
.rm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 22px;
border-radius: var(--rm-radius);
font-family: var(--rm-font-body);
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: transform var(--rm-t), box-shadow var(--rm-t),
background var(--rm-t), border-color var(--rm-t), color var(--rm-t);
border: 1px solid transparent;
-webkit-tap-highlight-color: transparent;
}
.rm-btn:disabled,
.rm-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.rm-btn.primary {
background: var(--rm-gold-grad);
color: #1c1a17;
box-shadow: var(--rm-shadow);
}
.rm-btn.primary:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(201, 169, 98, 0.28);
color: #1c1a17;
}
.rm-btn.primary:active { transform: translateY(0); }
.rm-btn.ghost {
background: transparent;
border-color: var(--rm-border);
color: var(--rm-ink);
}
.rm-btn.ghost:hover {
border-color: var(--rm-gold);
color: var(--rm-gold);
}
.rm-btn.block { width: 100%; }
.rm-btn.sm { padding: 8px 16px; font-size: 0.85rem; }
.rm-btn.lg { padding: 14px 30px; font-size: 1.05rem; }
/* ===========================================================================
COMPONENT — .rm-card (ProductCard / job card)
=========================================================================== */
.rm-card {
position: relative;
background: var(--rm-surface);
border: 1px solid var(--rm-border);
border-radius: var(--rm-radius-lg);
box-shadow: var(--rm-shadow);
overflow: hidden;
transition: transform var(--rm-t), box-shadow var(--rm-t), border-color var(--rm-t);
}
.rm-card:hover {
transform: translateY(-3px);
box-shadow: var(--rm-shadow-lg);
border-color: var(--rm-border-gold);
}
/* Media (4:3) */
.rm-card__media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--rm-input-bg);
overflow: hidden;
}
.rm-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.rm-card:hover .rm-card__media img { transform: scale(1.04); }
/* Corner badges on media */
.rm-card__tag {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255, 255, 255, 0.92);
color: var(--rm-ink);
padding: 4px 10px;
border-radius: var(--rm-radius-pill);
font-size: 0.7rem;
font-weight: 700;
box-shadow: var(--rm-shadow);
}
.rm-card__tag.right { left: auto; right: 12px; }
.rm-card__tag.gold { background: var(--rm-gold-grad); }
/* Duration / overlay chip */
.rm-card__overlay {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(28, 26, 23, 0.78);
color: #fff;
padding: 3px 9px;
border-radius: 8px;
font-size: 0.72rem;
font-weight: 600;
}
/* Body */
.rm-card__body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.rm-card__sku {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rm-ink-soft);
}
.rm-card__title {
font-family: var(--rm-font-body);
font-weight: 700;
font-size: 1.02rem;
color: var(--rm-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rm-card__desc {
font-size: 0.85rem;
color: var(--rm-ink-soft);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rm-card__price {
font-weight: 700;
font-size: 1rem;
color: var(--rm-ink);
}
/* Color swatches */
.rm-card__swatches { display: flex; gap: 6px; }
.rm-card__swatch {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid var(--rm-border);
}
/* Footer / CTA region */
.rm-card__footer {
padding: 0 16px 16px;
}
/* ===========================================================================
COMPONENT — .rm-pill (status badges)
.ok / .processing / .failed + warn variant
=========================================================================== */
.rm-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--rm-radius-pill);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
border: 1px solid transparent;
white-space: nowrap;
}
.rm-pill::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.rm-pill.ok {
color: var(--rm-success);
background: var(--rm-success-tint);
border-color: rgba(63, 155, 107, 0.3);
}
.rm-pill.processing {
color: var(--rm-warn);
background: var(--rm-warn-tint);
border-color: rgba(201, 150, 47, 0.3);
}
.rm-pill.processing::before { animation: rm-pulse 1.4s ease-in-out infinite; }
.rm-pill.failed {
color: var(--rm-error);
background: var(--rm-error-tint);
border-color: rgba(194, 85, 77, 0.3);
}
/* alias for queued/warning */
.rm-pill.warn {
color: var(--rm-warn);
background: var(--rm-warn-tint);
border-color: rgba(201, 150, 47, 0.3);
}
@keyframes rm-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* ===========================================================================
COMPONENT — .rm-ba (BeforeAfter slider — drag to reveal)
Pointer-event driven. JS sets --rm-ba-pos (%) on the container.
=========================================================================== */
.rm-ba {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--rm-input-bg);
border-radius: var(--rm-radius-lg);
border: 1px solid var(--rm-border);
user-select: none;
-webkit-user-select: none;
cursor: ew-resize;
touch-action: none;
--rm-ba-pos: 50%;
}
/* After image (base layer) */
.rm-ba__after {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Before image (clipped overlay) — width driven by --rm-ba-pos */
.rm-ba__before {
position: absolute;
inset: 0;
height: 100%;
width: var(--rm-ba-pos);
overflow: hidden;
}
.rm-ba__before img {
position: absolute;
inset: 0;
height: 100%;
width: auto;
max-width: none;
object-fit: cover;
}
/* Labels */
.rm-ba__label {
position: absolute;
top: 12px;
z-index: 2;
padding: 3px 9px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 600;
color: #fff;
pointer-events: none;
}
.rm-ba__label.before { left: 12px; background: rgba(28, 26, 23, 0.7); }
.rm-ba__label.after { right: 12px; background: rgba(63, 155, 107, 0.9); }
/* Divider line — left driven by --rm-ba-pos */
.rm-ba__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--rm-ba-pos);
width: 2px;
background: #fff;
transform: translateX(-50%);
pointer-events: none;
z-index: 3;
box-shadow: 0 0 8px rgba(28, 26, 23, 0.25);
}
/* Handle — left driven by --rm-ba-pos */
.rm-ba__handle {
position: absolute;
top: 50%;
left: var(--rm-ba-pos);
width: 38px;
height: 38px;
transform: translate(-50%, -50%);
background: #fff;
border: 1px solid var(--rm-border);
border-radius: 50%;
box-shadow: var(--rm-shadow-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--rm-gold);
z-index: 4;
pointer-events: none;
}
.rm-ba__handle svg { width: 20px; height: 20px; }
/* ===========================================================================
COMPONENT — .rm-modal (upsell / Anfrage overlay)
=========================================================================== */
.rm-modal {
position: fixed;
inset: 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(28, 26, 23, 0.32);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.rm-modal.rm-hidden { display: none; }
.rm-modal__card {
position: relative;
width: 100%;
max-width: 460px;
max-height: 88vh;
overflow-y: auto;
background: var(--rm-surface);
border: 1px solid var(--rm-border-gold);
border-radius: var(--rm-radius-lg);
box-shadow: var(--rm-shadow-lg);
padding: 24px;
animation: rm-modal-in 0.22s ease;
}
.rm-modal__card.wide { max-width: 640px; }
@keyframes rm-modal-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.rm-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.rm-modal__head h2,
.rm-modal__head h3 { font-size: 1.2rem; }
.rm-modal__close {
width: 34px;
height: 34px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.1rem;
color: var(--rm-ink-soft);
transition: all var(--rm-t);
}
.rm-modal__close:hover {
background: var(--rm-input-bg);
color: var(--rm-ink);
}
.rm-modal__body { font-size: 0.92rem; color: var(--rm-ink); }
.rm-modal__foot {
display: flex;
gap: 10px;
margin-top: 18px;
}
.rm-modal__foot .rm-btn { flex: 1; }
/* Checkbox upsell rows */
.rm-modal__row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--rm-border);
border-radius: var(--rm-radius);
cursor: pointer;
transition: border-color var(--rm-t), background var(--rm-t);
text-align: left;
}
.rm-modal__row:hover { border-color: var(--rm-gold); }
.rm-modal__row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--rm-gold);
flex-shrink: 0;
}
.rm-modal__row-main { flex: 1; }
.rm-modal__row-main strong { font-size: 0.9rem; font-weight: 600; }
.rm-modal__row-sub { font-size: 0.76rem; color: var(--rm-ink-soft); }
.rm-modal__row-price { font-size: 0.85rem; font-weight: 700; color: var(--rm-ink); }
.rm-modal__req {
font-size: 0.62rem;
font-weight: 700;
background: var(--rm-error-tint);
color: var(--rm-error);
padding: 1px 5px;
border-radius: 4px;
margin-left: 4px;
}
/* Status banner inside modals/pages */
.rm-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--rm-radius);
border: 1px solid var(--rm-border);
}
.rm-banner__icon { font-size: 1.7rem; line-height: 1; }
.rm-banner__text h4 { margin-bottom: 2px; }
.rm-banner__text p { font-size: 0.85rem; color: var(--rm-ink-soft); }
.rm-banner.ok { background: var(--rm-success-tint); border-color: rgba(63,155,107,.3); }
.rm-banner.processing { background: var(--rm-warn-tint); border-color: rgba(201,150,47,.3); }
.rm-banner.warn { background: var(--rm-warn-tint); border-color: rgba(201,150,47,.3); }
.rm-banner.failed { background: var(--rm-error-tint); border-color: rgba(194,85,77,.3); }
/* ===========================================================================
COMPONENT — .rm-input (form fields)
=========================================================================== */
.rm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rm-field label,
.rm-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--rm-ink-soft);
}
.rm-input,
textarea.rm-input,
select.rm-input {
width: 100%;
padding: 12px 14px;
font-family: var(--rm-font-body);
font-size: 0.95rem;
color: var(--rm-ink);
background: var(--rm-input-bg);
border: 1px solid var(--rm-border);
border-radius: var(--rm-radius);
transition: border-color var(--rm-t), box-shadow var(--rm-t), background var(--rm-t);
}
.rm-input::placeholder { color: var(--rm-ink-soft); opacity: 0.8; }
.rm-input:focus,
textarea.rm-input:focus,
select.rm-input:focus {
outline: none;
background: var(--rm-surface);
border-color: var(--rm-gold);
box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.18);
}
textarea.rm-input { min-height: 110px; resize: vertical; }
.rm-input.is-error { border-color: var(--rm-error); }
.rm-field__hint { font-size: 0.76rem; color: var(--rm-ink-soft); }
.rm-field__error { font-size: 0.78rem; color: var(--rm-error); }
/* ===========================================================================
COMPONENT — .rm-footer
=========================================================================== */
.rm-footer {
margin-top: 64px;
border-top: 1px solid var(--rm-border);
background: var(--rm-surface);
}
.rm-footer__inner {
max-width: var(--rm-max);
margin: 0 auto;
padding: 40px 24px;
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 32px;
}
.rm-footer__brand .rm-footer__logo {
font-family: var(--rm-font-head);
font-size: 1.3rem;
font-weight: 600;
color: var(--rm-ink);
}
.rm-footer__brand .rm-footer__logo span { color: var(--rm-gold); }
.rm-footer__brand p { font-size: 0.85rem; color: var(--rm-ink-soft); margin-top: 10px; max-width: 32ch; }
.rm-footer__col h5 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rm-ink-soft);
margin-bottom: 12px;
}
.rm-footer__col a {
display: block;
padding: 5px 0;
font-size: 0.9rem;
color: var(--rm-ink);
}
.rm-footer__col a:hover { color: var(--rm-gold); }
.rm-footer__bar {
border-top: 1px solid var(--rm-border);
}
.rm-footer__bar-inner {
max-width: var(--rm-max);
margin: 0 auto;
padding: 16px 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 0.8rem;
color: var(--rm-ink-soft);
}
/* ===========================================================================
RESPONSIVE — breakpoints 980 / 640
=========================================================================== */
@media (max-width: 980px) {
/* Collapse desktop nav + inline CTAs into the drawer */
.rm-nav,
.rm-cta-wa,
.rm-cta-anfrage { display: none; }
.rm-header__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--rm-radius);
color: var(--rm-ink);
font-size: 1.4rem;
}
.rm-header__toggle:hover { background: rgba(201, 169, 98, 0.1); }
.rm-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.rm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
:root { --rm-header-h: var(--rm-header-h-sm); }
.rm-container { padding: 0 16px; }
.rm-header__bar { padding: 0 16px; height: var(--rm-header-h-sm); }
.rm-header__logo { font-size: 1.2rem; }
.rm-drawer__panel { top: var(--rm-header-h-sm); }
.rm-modal { padding: 0; align-items: flex-end; }
.rm-modal__card {
max-width: 100%;
max-height: 92vh;
border-radius: var(--rm-radius-lg) var(--rm-radius-lg) 0 0;
padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}
.rm-modal__foot { flex-direction: column-reverse; }
.rm-btn.lg { padding: 13px 24px; font-size: 1rem; }
.rm-footer__inner { grid-template-columns: 1fr; gap: 24px; }
.rm-footer__bar-inner { flex-direction: column; align-items: flex-start; }
}
/* ---------------------------------------------------------------------------
Reduced motion
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}