/* Carta — component stylesheet. Loads after tokens.css. Class prefix: ct-. RTL-first (logical properties).
   Palette: ink 60 / ivory 30 / card red 10. No other hues. */

/* ---------- base ---------- */
.ct-root, .ct-root * { box-sizing: border-box; }
.ct-root { direction: rtl; font-family: var(--font-sans); font-size: 15px; line-height: 26px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
body.ct-root { margin: 0; min-height: 100vh; } /* update-34: the browser default 8px frame showed around every page */
.ct-root h1, .ct-root h2, .ct-root h3, .ct-root h4, .ct-root p { margin: 0; }
.ct-root a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ct-root button { font: inherit; }
.ct-root :focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ct-root [hidden] { display: none !important; }
.ct-display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.ct-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ct-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; direction: ltr; unicode-bidi: isolate; }
.ct-muted { color: var(--text-muted); }
.ct-small { font-size: 13px; line-height: 20px; }
.ct-container { width: 100%; max-width: calc(var(--container) + 2 * var(--space-8)); margin-inline: auto; padding-inline: var(--space-8); }
.ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ct-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ct-accent { color: var(--red-text); }

/* ---------- icons (CSS masks, colour = currentColor) ---------- */
.ct-ico { display: inline-block; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; vertical-align: middle; }
.ct-ico--sm { width: 16px; height: 16px; }
.ct-ico--lg { width: 24px; height: 24px; }
:root {
  --m-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 10.9a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.2L20.6 8H6.1'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E");
  --m-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.2-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E");
  --m-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --m-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --m-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --m-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 2.9 19.5h18.2z'/%3E%3Cpath d='M12 10v4.2M12 16.9v.1'/%3E%3C/svg%3E");
  --m-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.2M12 7.9v.1'/%3E%3C/svg%3E");
  --m-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  --m-x-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E");
  --m-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.2 12.3l2.6 2.6 5-5.2'/%3E%3C/svg%3E");
  --m-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --m-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.8 7.2 12 13l8.2-5.8'/%3E%3C/svg%3E");
  --m-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
  --m-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13.5h6l-1 7.5 8-10.5h-6z'/%3E%3C/svg%3E");
  --m-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8.1-7.5 9.5-4.3-1.4-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.8 12l2.2 2.2 4.3-4.4'/%3E%3C/svg%3E");
  --m-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6 8.5 12l6 6'/%3E%3C/svg%3E");
  --m-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --m-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --m-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  --m-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4.2h-4.2'/%3E%3C/svg%3E");
  --m-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 9.5h18M15.5 14h2'/%3E%3C/svg%3E");
  --m-gamepad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 7.5h9a4.5 4.5 0 0 1 4.4 5.4l-.8 4a2.5 2.5 0 0 1-4.3 1.2L14 16h-4l-1.8 2.1a2.5 2.5 0 0 1-4.3-1.2l-.8-4A4.5 4.5 0 0 1 7.5 7.5z'/%3E%3Cpath d='M8 10.5v3M6.5 12h3M15.5 11.2v.1M17.5 12.8v.1'/%3E%3C/svg%3E");
  --m-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
  --m-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h9'/%3E%3C/svg%3E");
  --m-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.6V4.8c0-.7.6-1.3 1.3-1.3h7.8l8 8a1.6 1.6 0 0 1 0 2.3l-6.5 6.5a1.6 1.6 0 0 1-2.3 0z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.5'/%3E%3C/svg%3E");
  --m-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12.5v8h14v-8M12 8.5v12M12 8.5C10.8 5 7 4.2 7 6.5 7 8 9.5 8.5 12 8.5zM12 8.5c1.2-3.5 5-4.3 5-2 0 1.5-2.5 2-5 2z'/%3E%3C/svg%3E");
  --m-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3.5l3 3-3 3'/%3E%3Cpath d='M4 11.5v-1a4 4 0 0 1 4-4h12M7 20.5l-3-3 3-3'/%3E%3Cpath d='M20 12.5v1a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
  --m-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E");
  --m-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14'/%3E%3Cpath d='M21 3l-6.5 18-4.5-7-7-4.5z'/%3E%3C/svg%3E");
  --m-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Cpath d='M11.2 11.8 20 3M16.5 6.5l2.5 2.5M14.5 8.5l2 2'/%3E%3C/svg%3E");
  --m-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4 17.5l4.5-4.5 3.5 3.5 3-3 5 5'/%3E%3C/svg%3E");
  --m-bank-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M2.5 9.5h19M6 15h4'/%3E%3C/svg%3E");
  --m-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.2'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
  --m-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.2'/%3E%3C/svg%3E");
  --m-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h10M7 20.5h10M8 3.5c0 4 8 4.5 8 8.5s-8 4.5-8 8.5M16 3.5c0 4-8 4.5-8 8.5s8 4.5 8 8.5'/%3E%3C/svg%3E");
  --m-user-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20.5c1.1-3.4 3.8-5.5 7-5.5 1.6 0 3 .5 4.2 1.4M15.5 18.5l2 2 4-4'/%3E%3C/svg%3E");
  --m-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13.5' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13.5' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 19.5c0 1.4-1.6 2-4 2h-2'/%3E%3C/svg%3E");
  --m-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16a1 1 0 0 1 1 1v9.5a1 1 0 0 1-1 1H9l-4.5 3.5V17H4a1 1 0 0 1-1-1V6.5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E");
  --m-chat-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z'/%3E%3Cpath d='M9 8.5c0 3.6 2.9 6.5 6.5 6.5l1-1.6-2-1-1 1a4.4 4.4 0 0 1-2.4-2.4l1-1-1-2z'/%3E%3C/svg%3E");
}
.ct-ico--cart { --m: var(--m-cart); }
.ct-ico--user { --m: var(--m-user); }
.ct-ico--menu { --m: var(--m-menu); }
.ct-ico--copy { --m: var(--m-copy); }
.ct-ico--check { --m: var(--m-check); }
.ct-ico--clock { --m: var(--m-clock); }
.ct-ico--alert { --m: var(--m-alert); }
.ct-ico--info { --m: var(--m-info); }
.ct-ico--x { --m: var(--m-x); }
.ct-ico--x-circle { --m: var(--m-x-circle); }
.ct-ico--check-circle { --m: var(--m-check-circle); }
.ct-ico--eye { --m: var(--m-eye); }
.ct-ico--mail { --m: var(--m-mail); }
.ct-ico--lock { --m: var(--m-lock); }
.ct-ico--bolt { --m: var(--m-bolt); }
.ct-ico--shield { --m: var(--m-shield); }
.ct-ico--chevron-left { --m: var(--m-chevron-left); }
.ct-ico--chevron-right { --m: var(--m-chevron-right); }
.ct-ico--chevron-down { --m: var(--m-chevron-down); }
.ct-ico--search { --m: var(--m-search); }
.ct-ico--refresh { --m: var(--m-refresh); }
.ct-ico--wallet { --m: var(--m-wallet); }
.ct-ico--gamepad { --m: var(--m-gamepad); }
.ct-ico--receipt { --m: var(--m-receipt); }
.ct-ico--logout { --m: var(--m-logout); }
.ct-ico--tag { --m: var(--m-tag); }
.ct-ico--gift { --m: var(--m-gift); }
.ct-ico--repeat { --m: var(--m-repeat); }
.ct-ico--key { --m: var(--m-key); }
.ct-ico--box { --m: var(--m-box); }
.ct-ico--send { --m: var(--m-send); }
.ct-ico--image { --m: var(--m-image); }
.ct-ico--bank-card { --m: var(--m-bank-card); }
.ct-ico--phone { --m: var(--m-phone); }
.ct-ico--grid { --m: var(--m-grid); }
.ct-ico--hourglass { --m: var(--m-hourglass); }
.ct-ico--user-check { --m: var(--m-user-check); }
.ct-ico--headset { --m: var(--m-headset); }
.ct-ico--chat { --m: var(--m-chat); }
.ct-ico--chat-phone { --m: var(--m-chat-phone); }

/* ---------- card-back pattern (red field, ivory lattice, ivory frame) ---------- */
.ct-cardback { background-color: var(--card-back); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg opacity='0.4'%3E%3Cg fill='none' stroke='%23F5F1E6' stroke-width='0.9' stroke-linejoin='round'%3E%3Cpath d='M12.00 4.80L14.11 6.91L17.09 6.91L17.09 9.89L19.20 12.00L17.09 14.11L17.09 17.09L14.11 17.09L12.00 19.20L9.89 17.09L6.91 17.09L6.91 14.11L4.80 12.00L6.91 9.89L6.91 6.91L9.89 6.91Z'/%3E%3Cpath d='M12 4.8V0M12 19.2V24M4.8 12H0M19.2 12H24'/%3E%3Cpath d='M0 -3.6L3.6 0L0 3.6L-3.6 0ZM24 -3.6L27.6 0L24 3.6L20.4 0ZM0 20.4L3.6 24L0 27.6L-3.6 24ZM24 20.4L27.6 24L24 27.6L20.4 24Z'/%3E%3Cpath d='M12.00 8.80L12.94 9.74L14.26 9.74L14.26 11.06L15.20 12.00L14.26 12.94L14.26 14.26L12.94 14.26L12.00 15.20L11.06 14.26L9.74 14.26L9.74 12.94L8.80 12.00L9.74 11.06L9.74 9.74L11.06 9.74Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 24px 24px; background-position: center; }
.ct-cardback--framed { border: 8px solid var(--card-face); border-radius: var(--radius-card); box-shadow: inset 0 0 0 6px var(--card-back), inset 0 0 0 7px rgba(245, 241, 230, .7); }
.ct-cardback__seal { width: 64px; height: 64px; border-radius: 50%; background: var(--card-back); border: 1.5px solid var(--card-face); display: grid; place-items: center; }
.ct-cardback__seal .ct-mark { width: 48px; height: 48px; }
.ct-skeleton { width: 100%; aspect-ratio: 5 / 7; }

/* ---------- logo ---------- */
.ct-mark { display: block; width: 40px; height: 40px; }
.ct-logo { display: inline-flex; align-items: center; gap: 2px; min-height: var(--touch-min); }
.ct-root a.ct-logo { color: var(--text); text-decoration: none; }
.ct-logo__word { font-family: var(--font-display); font-size: 28px; line-height: 1; padding-top: 6px; color: var(--text); }

/* ---------- buttons ---------- */
.ct-btn { --bg-c: var(--surface-raised); --fg-c: var(--text); --bd-c: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); min-width: var(--touch-min); padding: 0 var(--space-5);
  border-radius: var(--radius-md); border: 1.5px solid var(--bd-c); background: var(--bg-c); color: var(--fg-c);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ct-root a.ct-btn { color: var(--fg-c); text-decoration: none; }
.ct-btn--primary { --bg-c: var(--red); --fg-c: var(--on-red); }
.ct-btn--primary:hover, .ct-btn--primary.is-hover { --bg-c: var(--red-hover); }
.ct-btn--primary:active { --bg-c: var(--red-pressed); }
.ct-btn--secondary { --bg-c: var(--surface-raised); --fg-c: var(--text); }
.ct-btn--secondary:hover, .ct-btn--secondary.is-hover { --bg-c: #30303A; }
.ct-btn--outline { --bg-c: transparent; --fg-c: var(--text); --bd-c: var(--line-strong); }
.ct-btn--outline:hover, .ct-btn--outline.is-hover { --bd-c: var(--text); --bg-c: var(--surface-raised); }
/* destructive = red OUTLINE + ✕, never a solid red fill */
.ct-btn--danger { --bg-c: transparent; --fg-c: var(--red-text); --bd-c: var(--red-text); }
.ct-btn--danger::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--m-x-circle) center / contain no-repeat; mask: var(--m-x-circle) center / contain no-repeat; }
.ct-btn--danger:hover, .ct-btn--danger.is-hover { --bg-c: var(--red-soft); }
.ct-btn--ghost { --bg-c: transparent; --fg-c: var(--text); padding: 0 var(--space-3); }
.ct-btn--ghost:hover, .ct-btn--ghost.is-hover { --bg-c: var(--surface-raised); }
.ct-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.ct-btn--lg { min-height: 56px; padding: 0 var(--space-8); font-size: 16px; }
.ct-btn--block { width: 100%; }
.ct-btn--icon { padding: 0; width: var(--touch-min); min-height: var(--touch-min); }
.ct-btn:disabled, .ct-btn[aria-disabled="true"] { --bg-c: var(--surface-raised); --fg-c: var(--text-muted); --bd-c: transparent; cursor: not-allowed; }
.ct-btn--outline:disabled, .ct-btn--danger:disabled { --bg-c: transparent; --bd-c: var(--line); }
/* loading: static card-back texture + hourglass (no spinner) */
.ct-btn[aria-busy="true"] { cursor: progress; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg opacity='0.12'%3E%3Cg fill='none' stroke='%23F5F1E6' stroke-width='0.9' stroke-linejoin='round'%3E%3Cpath d='M12.00 4.80L14.11 6.91L17.09 6.91L17.09 9.89L19.20 12.00L17.09 14.11L17.09 17.09L14.11 17.09L12.00 19.20L9.89 17.09L6.91 17.09L6.91 14.11L4.80 12.00L6.91 9.89L6.91 6.91L9.89 6.91Z'/%3E%3Cpath d='M12 4.8V0M12 19.2V24M4.8 12H0M19.2 12H24'/%3E%3Cpath d='M0 -3.6L3.6 0L0 3.6L-3.6 0ZM24 -3.6L27.6 0L24 3.6L20.4 0ZM0 20.4L3.6 24L0 27.6L-3.6 24ZM24 20.4L27.6 24L24 27.6L20.4 24Z'/%3E%3Cpath d='M12.00 8.80L12.94 9.74L14.26 9.74L14.26 11.06L15.20 12.00L14.26 12.94L14.26 14.26L12.94 14.26L12.00 15.20L11.06 14.26L9.74 14.26L9.74 12.94L8.80 12.00L9.74 11.06L9.74 9.74L11.06 9.74Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 24px 24px; }
.ct-btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--m-hourglass) center / contain no-repeat; mask: var(--m-hourglass) center / contain no-repeat; }

/* ---------- form fields ---------- */
.ct-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ct-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ct-label small { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.ct-input { width: 100%; min-height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.ct-input::placeholder { color: var(--text-muted); }
.ct-input:hover { border-color: #8E8E97; }
.ct-input:focus, .ct-input.is-focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(245, 241, 230, .16); }
.ct-input[aria-invalid="true"], .ct-input.is-error { border-color: var(--red-text); }
.ct-input--ltr { direction: ltr; text-align: right; }
.ct-input--mono { font-family: var(--font-mono); letter-spacing: .06em; }
.ct-hint { font-size: 13px; line-height: 20px; color: var(--text-muted); }
.ct-error-text { font-size: 13px; line-height: 20px; color: var(--red-text); display: flex; gap: var(--space-1); align-items: center; }
.ct-input-group { display: flex; gap: var(--space-2); }
.ct-input-group .ct-input { flex: 1; }
.ct-player { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--status-soft); border: 1px solid var(--line); color: var(--text); font-size: 14px; }
.ct-player b { font-weight: 700; }

/* 6-digit code */
.ct-otp { display: flex; gap: var(--space-2); direction: ltr; justify-content: center; }
.ct-otp input { width: 48px; height: 56px; border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--text); text-align: center; font-family: var(--font-mono); font-weight: 500; font-size: 24px; caret-color: var(--red-text); }
.ct-otp input:focus, .ct-otp input.is-focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(245, 241, 230, .16); }
.ct-otp input.is-filled { border-color: #8E8E97; }
.ct-otp.is-error input { border-color: var(--red-text); }

/* checkbox */
.ct-check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; min-height: var(--touch-min); padding-block: 10px; font-size: 15px; line-height: 24px; }
.ct-check input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--surface-raised); display: grid; place-items: center; cursor: pointer; }
.ct-check input::after { content: ""; width: 16px; height: 16px; background: var(--on-red); -webkit-mask: var(--m-check) center / contain no-repeat; mask: var(--m-check) center / contain no-repeat; opacity: 0; }
.ct-check input:checked { background: var(--red); border-color: var(--red); }
.ct-check input:checked::after { opacity: 1; }
.ct-check input:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.ct-check--confirm { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-soft); border: 1px solid var(--line-strong); }
.ct-check--confirm .ct-ico { margin-top: 2px; }

/* ---------- tabs ---------- */
.ct-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ct-tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: 0 var(--space-5) 0 var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ct-tab:hover { color: var(--text); border-color: var(--line-strong); }
.ct-tab[aria-selected="true"] { background: var(--card-face); border-color: var(--card-face); color: var(--card-ink); }
.ct-tabs--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
.ct-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.ct-seg button { min-height: var(--touch-min); border-radius: var(--radius-md); border: 1.5px solid transparent; background: transparent; color: var(--text-muted); font-weight: 600; font-size: 14px; cursor: pointer; }
.ct-seg button[aria-selected="true"] { background: var(--surface-raised); border-color: var(--line-strong); color: var(--text); }

/* ---------- badges ---------- */
.ct-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 12px; border-radius: var(--radius-pill); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; background: var(--status-soft); color: var(--text); }
.ct-badge .ct-ico { width: 16px; height: 16px; }
.ct-badge--error { background: var(--error-soft); color: var(--error); }
.ct-badge--neutral { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------- alerts ---------- */
.ct-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--status-soft); font-size: 14px; line-height: 22px; color: var(--text); }
.ct-alert > .ct-ico { margin-top: 1px; color: var(--text); }
.ct-alert b { display: block; font-weight: 700; }
.ct-alert--error { background: var(--error-soft); border-color: var(--red-text); }
.ct-alert--error > .ct-ico { color: var(--red-text); }

/* ---------- playing card: shared anatomy ---------- */
.ct-face { background: var(--card-face); color: var(--card-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); position: relative; }
.ct-idx { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1px; font-weight: 700; font-size: 18px; line-height: 18px; font-variant-numeric: tabular-nums; color: var(--card-ink); min-width: 22px; }
.ct-idx small { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .03em; }
.ct-idx--top { top: 10px; inset-inline-start: 10px; }
.ct-idx--bottom { bottom: 10px; inset-inline-end: 10px; transform: rotate(180deg); }
.ct-window { position: absolute; border: 1px solid var(--card-ink); border-radius: 6px; background: var(--card-face-shade); display: grid; place-items: center; overflow: hidden; color: var(--card-ink-muted); }
.ct-window__ph { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; padding: 8px; }
.ct-window img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- product card ---------- */
.ct-pstack { position: relative; display: inline-block; width: var(--card-w); isolation: isolate; }
.ct-pstack::before, .ct-pstack::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); background: var(--card-face-shade); box-shadow: 0 0 0 1px rgba(18, 18, 22, .25), 0 4px 10px rgba(0, 0, 0, .3); z-index: -1; transform-origin: 50% 100%; display: none; }
.ct-pstack[data-n="2"]::before, .ct-pstack[data-n="3"]::before { display: block; transform: rotate(-3deg) translateX(-4px); }
.ct-pstack[data-n="3"]::after { display: block; transform: rotate(-6deg) translateX(-8px); background: #DCD4C1; }
.ct-pcard { display: block; width: 100%; aspect-ratio: 5 / 7; text-decoration: none; color: var(--card-ink); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ct-root a.ct-pcard { color: var(--card-ink); text-decoration: none; }
.ct-pcard .ct-window { top: 18%; inset-inline: 7%; height: 42%; }
.ct-pcard__info { position: absolute; top: 64%; inset-inline: 7%; display: flex; flex-direction: column; gap: 0; text-align: start; }
.ct-pcard__name { font-size: 14px; line-height: 20px; font-weight: 700; }
.ct-pcard__region { font-size: 12px; line-height: 18px; color: var(--card-ink-muted); }
.ct-pcard__price { position: absolute; bottom: 10px; inset-inline-start: 7%; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--card-ink-muted); }
.ct-pcard__price b { color: var(--card-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-pcard__stamp { display: none; }
.ct-pcard:hover, .ct-pcard.is-hover { transform: translateY(-6px) rotate(-2deg); box-shadow: var(--shadow-lift), 0 0 0 2px var(--red); }
.ct-pcard.is-soldout { background: var(--card-face-shade); cursor: not-allowed; box-shadow: none; }
.ct-pcard.is-soldout:hover { transform: none; box-shadow: none; }
.ct-pcard.is-soldout .ct-idx, .ct-pcard.is-soldout .ct-pcard__name { color: var(--card-ink-muted); }
.ct-pcard.is-soldout .ct-pcard__stamp { display: block; position: absolute; top: 34%; inset-inline: -6px; transform: rotate(-8deg); background: var(--card-ink); color: var(--card-face); font-size: 13px; line-height: 30px; font-weight: 700; text-align: center; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: var(--space-8) var(--space-6); justify-items: center; padding: 8px 16px 0; }
.ct-grid .ct-pstack { width: 100%; max-width: 220px; }

@keyframes ct-deal { from { opacity: 0; transform: translate(-40px, -28px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.ct-deal > * { animation: ct-deal .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---------- denomination picker ---------- */
.ct-denoms { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: 10px; }
.ct-denom { position: relative; width: 92px; aspect-ratio: 5 / 7; border: 0; padding: 0; cursor: pointer; background: var(--card-face); color: var(--card-ink); border-radius: 11px; box-shadow: var(--shadow-card); font-family: var(--font-sans); transition: transform .15s ease; }
.ct-denom .ct-idx { font-size: 12px; line-height: 13px; min-width: 0; }
.ct-denom .ct-idx small { font-size: 8px; line-height: 10px; }
.ct-denom .ct-idx--top { top: 7px; inset-inline-start: 7px; } .ct-denom .ct-idx--bottom { bottom: 7px; inset-inline-end: 7px; }
.ct-denom__amt { position: absolute; inset: 20% 16%; border: 1px solid var(--card-ink); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ct-denom__amt b { font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-denom__amt span { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--card-ink-muted); }
.ct-denom:hover { transform: translateY(-2px); }
.ct-denom[aria-checked="true"] { transform: translateY(-6px); box-shadow: var(--shadow-lift), 0 0 0 3px var(--red); }
.ct-denom:disabled { background: var(--card-face-shade); cursor: not-allowed; box-shadow: none; transform: none; }
.ct-denom:disabled .ct-denom__amt b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--card-ink-muted); }
.ct-denoms--scroll { flex-wrap: nowrap; overflow-x: auto; padding: 12px var(--space-4) 8px; margin-inline: calc(-1 * var(--space-4)); scrollbar-width: none; }
.ct-denoms--scroll .ct-denom { flex: none; }

/* ---------- code card (flip reveal) ---------- */
.ct-flip { perspective: 1000px; }
.ct-flip__inner { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .2, 1); min-height: 176px; }
.ct-flip.is-flipped .ct-flip__inner { transform: rotateY(180deg); }
.ct-flip__side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-card); }
.ct-flip__back { display: grid; place-items: center; }
.ct-flip__front { transform: rotateY(180deg); background: var(--card-face); color: var(--card-ink); padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); box-shadow: var(--shadow-card); }
.ct-code { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 19px; line-height: 28px; letter-spacing: .08em; direction: ltr; text-align: center; color: var(--card-ink); background: var(--card-face-shade); border: 1px solid var(--card-ink); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); user-select: all; }
.ct-copy { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-min); border-radius: var(--radius-md); border: 0; background: var(--card-ink); color: var(--card-face); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0 var(--space-4); }
.ct-copy.is-done { background: var(--card-face-shade); color: var(--card-ink); box-shadow: inset 0 0 0 1px var(--card-ink); }

@media (prefers-reduced-motion: reduce) {
  .ct-deal > * { animation: none; }
  .ct-flip__inner { transition: none; }
  .ct-pcard, .ct-denom { transition: none; }
  .ct-pcard:hover, .ct-pcard.is-hover { transform: translateY(-6px); }
}

/* ---------- order card (my cards) ---------- */
.ct-order { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.ct-order__head { display: flex; gap: var(--space-3); align-items: center; }
.ct-order__thumb { position: relative; width: 40px; aspect-ratio: 5 / 7; border-radius: 6px; background: var(--card-face); color: var(--card-ink); flex: none; }
.ct-order__thumb span { position: absolute; top: 3px; inset-inline-start: 4px; font-size: 9px; line-height: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-order__thumb::after { content: ""; position: absolute; inset: 14px 5px 6px; border: 1px solid var(--card-ink); border-radius: 2px; background: var(--card-face-shade); }
.ct-order__title { font-weight: 600; font-size: 15px; line-height: 22px; }
.ct-order__meta { font-size: 13px; line-height: 20px; color: var(--text-muted); }
.ct-delivered { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); font-size: 14px; line-height: 22px; }

/* ---------- panels, summary ---------- */
.ct-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.ct-sumrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; font-size: 15px; }
.ct-sumrow dt { color: var(--text-muted); } .ct-sumrow dd { margin: 0; font-weight: 600; }
.ct-sumrow--total { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-4); }
.ct-sumrow--total dd { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--text); }

/* ---------- payment methods (radio cards) ---------- */
.ct-methods { display: grid; grid-template-columns: 1fr; gap: var(--space-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.ct-methods--2col { grid-template-columns: 1fr 1fr; }
.ct-methods legend { font-size: 20px; line-height: 30px; font-weight: 600; padding: 0; margin-bottom: var(--space-3); }
.ct-method { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; }
.ct-method:hover { border-color: #8E8E97; }
.ct-method input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); display: grid; place-items: center; cursor: pointer; }
.ct-method input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-red); opacity: 0; }
.ct-method input:checked { background: var(--red); border-color: var(--red); }
.ct-method input:checked::after { opacity: 1; }
.ct-method input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ct-method:has(input:checked), .ct-method.is-selected { border: 2px solid var(--red); background: var(--bg); padding: calc(var(--space-3) - 0.5px) calc(var(--space-4) - 0.5px); }
.ct-method:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.ct-method__logo { flex: none; width: 76px; height: 40px; border-radius: 8px; background: var(--surface-raised); border: 1px dashed var(--line-strong); color: var(--text); display: grid; place-items: center; font-size: 10px; line-height: 12px; font-weight: 600; text-align: center; padding: 2px 4px; }
.ct-method__text { display: flex; flex-direction: column; min-width: 0; }
.ct-method__name { font-weight: 700; font-size: 15px; line-height: 22px; }
.ct-method__help { font-size: 13px; line-height: 20px; color: var(--text-muted); }
.ct-method__off { margin-inline-start: auto; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; }
.ct-method:has(input:disabled), .ct-method.is-disabled { cursor: not-allowed; border-style: dashed; border-color: var(--line); background: transparent; }
.ct-method:has(input:disabled) .ct-method__name, .ct-method.is-disabled .ct-method__name { color: var(--text-muted); }
.ct-method:has(input:disabled) input { border-color: var(--line); background: transparent; cursor: not-allowed; }
.ct-secure { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 20px; color: var(--text-muted); margin-top: var(--space-3); }

/* ---------- header / footer ---------- */
.ct-header { position: relative; z-index: 2; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--line); }
.ct-header__in { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
.ct-nav { display: flex; gap: var(--space-1); }
.ct-root .ct-nav a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.ct-root .ct-nav a:hover, .ct-root .ct-nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
.ct-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
.ct-header__end { margin-inline-start: auto; display: flex; gap: var(--space-2); align-items: center; }
.ct-cart { position: relative; }
.ct-cart__n { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: var(--on-red); font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; padding: 0 4px; }
.ct-header--m .ct-header__in { gap: var(--space-2); padding-inline: var(--space-2); }
.ct-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: var(--space-16); }
.ct-footer__top { display: flex; justify-content: space-between; gap: var(--space-8); padding-block: var(--space-10); flex-wrap: wrap; }
.ct-footer__links { display: flex; gap: var(--space-2) var(--space-6); flex-wrap: wrap; align-items: center; }
.ct-root .ct-footer__links a { color: var(--text-muted); text-decoration: none; font-size: 14px; min-height: var(--touch-min); display: inline-flex; align-items: center; }
.ct-root .ct-footer__links a:hover { color: var(--text); }
.ct-footer__bottom { border-top: 1px solid var(--line); padding-block: var(--space-4); font-size: 13px; color: var(--text-muted); text-align: center; }

/* ---------- FAQ ---------- */
.ct-faq { border-top: 1px solid var(--line); }
.ct-faq details { border-bottom: 1px solid var(--line); }
.ct-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 60px; font-size: 17px; line-height: 26px; font-weight: 600; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after { content: ""; width: 20px; height: 20px; flex: none; background: var(--text-muted); -webkit-mask: var(--m-chevron-down) center / contain no-repeat; mask: var(--m-chevron-down) center / contain no-repeat; }
.ct-faq details[open] summary::after { transform: rotate(180deg); background: var(--text); }
.ct-faq details p { padding: 0 0 var(--space-5); color: var(--text-muted); max-width: 72ch; }
.ct-faq__body { padding-bottom: var(--space-2); }
.ct-faq__body p { padding: 0; }

/* ---------- steps ---------- */
.ct-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.ct-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); padding-inline-start: 84px; min-height: 148px; }
.ct-step__card { position: absolute; inset-inline-start: var(--space-6); top: var(--space-6); width: 44px; aspect-ratio: 5 / 7; border-radius: 7px; background: var(--card-face); color: var(--card-ink); }
.ct-step__card b { position: absolute; top: 4px; inset-inline-start: 6px; font-size: 14px; line-height: 14px; font-weight: 700; }
.ct-step__card b:last-of-type { top: auto; inset-inline-start: auto; bottom: 4px; inset-inline-end: 6px; transform: rotate(180deg); }
.ct-step__card .ct-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; color: var(--red); }
.ct-step h3 { font-size: 17px; line-height: 26px; font-weight: 600; margin-bottom: var(--space-1); }
.ct-step p { color: var(--text-muted); font-size: 15px; }

/* ---------- screen compositions ---------- */
.ct-phone { width: 390px; min-height: 844px; background: var(--bg); overflow: hidden; position: relative; }
.ct-phone .ct-container { padding-inline: var(--space-4); }
.ct-screen-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); padding: 0 0 8px; }
.ct-hero { padding-block: var(--space-16) var(--space-12); display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; }
.ct-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 72px; }
.ct-hero h1 em { font-style: normal; color: var(--red-text); }
.ct-hero__lead { font-size: 17px; line-height: 30px; color: var(--text-muted); margin-top: var(--space-4); max-width: 34em; }
.ct-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.ct-trust { display: flex; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; color: var(--text-muted); font-size: 14px; }
.ct-trust span { display: inline-flex; gap: var(--space-2); align-items: center; }
.ct-trust .ct-ico { color: var(--text); }
.ct-fan { position: relative; height: 400px; }
.ct-fan > * { position: absolute; top: 40px; inset-inline-start: 50%; width: 200px; margin-inline-start: -100px; transform-origin: 50% 120%; }
.ct-fan .ct-pcard:hover { transform: none; box-shadow: var(--shadow-card); }
.ct-section { padding-block: var(--space-12); }
.ct-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.ct-section__head h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 40px; }
.ct-crumbs { display: flex; gap: var(--space-2); align-items: center; font-size: 13px; color: var(--text-muted); padding-block: var(--space-5); }
.ct-root .ct-crumbs a { color: var(--text-muted); text-decoration: none; }
.ct-crumbs .ct-ico { width: 14px; height: 14px; }
.ct-h1 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 52px; }
.ct-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ct-product { display: grid; grid-template-columns: 400px 1fr; gap: var(--space-12); align-items: start; }
.ct-bigcard { width: 320px; margin-inline: auto; }
.ct-bigcard .ct-pstack { width: 320px; }
.ct-bigcard .ct-idx { font-size: 26px; line-height: 26px; top: 16px; }
.ct-bigcard .ct-idx small { font-size: 13px; line-height: 16px; }
.ct-bigcard .ct-idx--bottom { top: auto; bottom: 16px; }
.ct-bigcard .ct-pcard__name { font-size: 18px; line-height: 26px; }
.ct-bigcard .ct-pcard__region, .ct-bigcard .ct-pcard__price { font-size: 14px; }
.ct-pricebar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.ct-pricebar .ct-price { font-size: 28px; line-height: 36px; }
.ct-sticky { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); z-index: 3; }
.ct-checkout { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-8); align-items: start; }
.ct-item { display: flex; gap: var(--space-4); align-items: center; }
.ct-item__card { width: 56px; aspect-ratio: 5 / 7; border-radius: 8px; flex: none; position: relative; }
.ct-item__card .ct-idx { font-size: 10px; line-height: 11px; top: 4px; inset-inline-start: 5px; }
.ct-item__card .ct-idx small { font-size: 7px; line-height: 8px; }
.ct-item__card .ct-window { inset: 27px 7px 8px; border-radius: 3px; }
.ct-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); font-size: 15px; }
.ct-kv dt { color: var(--text-muted); } .ct-kv dd { margin: 0; font-weight: 600; }
/* ivory button: the action on a red card back (red-on-red would vanish) */
.ct-btn--ivory { --bg-c: var(--card-face); --fg-c: var(--card-ink); }
.ct-btn--ivory:hover, .ct-btn--ivory.is-hover { --bg-c: #FFFFFF; }
.ct-denom .ct-idx small { display: none; }

/* ---------- Carta app extensions (not in the design system export, kept in its spirit) ---------- */

/* mobile nav drawer, opened from the header hamburger */
.ct-navdrawer { position: fixed; inset: 0; z-index: 20; display: none; }
.ct-navdrawer.is-open { display: block; }
.ct-navdrawer__scrim { position: absolute; inset: 0; background: var(--scrim); }
.ct-navdrawer__panel { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: min(84vw, 320px); background: var(--surface); box-shadow: var(--shadow-panel); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; }
.ct-navdrawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-2); }
.ct-root .ct-navdrawer__panel a, .ct-root .ct-navdrawer__panel button.ct-navlink { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-size: 16px; font-weight: 600; background: none; border: 0; text-align: start; width: 100%; cursor: pointer; }
.ct-root .ct-navdrawer__panel a:hover, .ct-root .ct-navdrawer__panel button.ct-navlink:hover { background: var(--surface-raised); }
.ct-navdrawer__sep { height: 1px; background: var(--line); margin: var(--space-2) 0; }

/* order tracker — a horizontal 4-step progress rail, drawn only from ink/ivory/red */
.ct-tracker { display: flex; gap: var(--space-2); margin-block: var(--space-2); }
.ct-tstep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: 13px; color: var(--text-muted); }
.ct-tstep .ct-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); border: 1.5px solid var(--line-strong); font-weight: 700; font-size: 13px; color: var(--text-muted); }
.ct-tstep .ct-dot .ct-ico { width: 16px; height: 16px; }
.ct-tstep::before { content: ""; position: relative; }
.ct-tracker__rail { position: relative; }
.ct-tstep.is-done .ct-dot { background: var(--red); border-color: var(--red); color: var(--on-red); }
.ct-tstep.is-current .ct-dot { background: var(--bg); border-color: var(--red); color: var(--text); box-shadow: 0 0 0 3px var(--red-soft); }
.ct-tstep.is-done { color: var(--text); }
.ct-tstep.is-current { color: var(--text); font-weight: 600; }
.ct-tline { position: relative; display: flex; align-items: center; }
.ct-tline .ct-tstep { position: relative; }
.ct-tline .ct-tstep:not(:last-child)::after { content: ""; position: absolute; top: 15px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line); z-index: -1; }
.ct-tline .ct-tstep.is-done:not(:last-child)::after { background: var(--red); }

/* quantity stepper for non-topup, multi-qty products */
.ct-qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; height: var(--control-h); }
.ct-qty button { width: 44px; border: 0; background: var(--surface-raised); color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; }
.ct-qty button:hover { background: #30303A; }
.ct-qty button:disabled { color: var(--text-muted); cursor: not-allowed; }
.ct-qty input { width: 52px; border: 0; border-inline: 1.5px solid var(--line-strong); background: var(--bg); color: var(--text); text-align: center; font-family: var(--font-sans); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-qty input:focus { outline: none; }

/* empty state (no products, 404, etc.) */
.ct-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-16) var(--space-4); }

/* language switch pill in the header */
.ct-langswitch { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.ct-root a.ct-langswitch:hover { color: var(--text); border-color: var(--text); }

/* simple prose page (terms/refund) */
.ct-prose { max-width: 72ch; }
.ct-prose p { margin: 0 0 var(--space-4); color: var(--text-muted); line-height: 28px; }
.ct-prose h3 { margin: var(--space-6) 0 var(--space-3); font-size: 19px; line-height: 28px; font-weight: 700; color: var(--text); }
.ct-prose ul, .ct-prose ol { margin: 0 0 var(--space-4); padding-inline-start: 22px; color: var(--text-muted); line-height: 28px; }
.ct-prose li { margin-bottom: 4px; }
.ct-prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ct-prose b, .ct-prose strong { color: var(--text); }

@media (max-width: 880px) {
  .ct-checkout, .ct-product { grid-template-columns: 1fr; }
}

/* responsive header: one markup, nav collapses into the drawer under 880px */
.ct-navtoggle { display: none; }
@media (max-width: 880px) {
  .ct-header .ct-nav { display: none; }
  .ct-navtoggle { display: inline-flex; }
  .ct-hero, .ct-product { grid-template-columns: 1fr; }
  .ct-hero__fan-wrap { display: none; }
  .ct-steps { grid-template-columns: 1fr; }
  .ct-container { padding-inline: var(--space-4); }
}
@media (max-width: 640px) {
  .ct-hero h1 { font-size: 36px; line-height: 46px; }
}


/* English (LTR) pages: the component base is RTL-first; follow the document direction. */
html[dir="ltr"] .ct-root, .ct-root[dir="ltr"] { direction: ltr; }

/* homepage "show more": hidden overflow tiles sit in a wrapper that must not become its own grid cell box */
.ct-more-item { display: contents; }
.ct-more-item[hidden] { display: none; }

/* =====================================================================
   update-13 — search, uncropped product images, word-named tiers, phone/desktop layout
   ===================================================================== */

/* ---------- header: logo · search · actions, section links on a second row ---------- */
.ct-header { height: auto; }
.ct-header__in { height: var(--header-h); gap: var(--space-6); }
.ct-hsearch { position: relative; flex: 1 1 320px; max-width: 520px; }
.ct-searchbox { position: relative; display: flex; align-items: center; }
.ct-searchbox > .ct-ico { position: absolute; inset-inline-start: 14px; color: var(--text-muted); pointer-events: none; z-index: 1; }
.ct-searchbox .ct-input { min-height: 44px; height: 44px; padding-inline-start: 42px; border-radius: var(--radius-pill); background: var(--surface); font-size: 15px; }
.ct-searchbox .ct-input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--red-soft, rgba(208, 2, 27, .25)); }
.ct-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ct-searchtoggle { display: none; }
.ct-subnav { border-top: 1px solid var(--line); }
.ct-subnav .ct-nav { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
.ct-subnav .ct-nav::-webkit-scrollbar { display: none; }
.ct-root .ct-subnav .ct-nav a { min-height: 40px; white-space: nowrap; font-size: 14px; }

/* ---------- live suggestions ---------- */
.ct-suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); max-height: min(70vh, 460px); overflow-y: auto; }
.ct-root .ct-suggest li a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.ct-root .ct-suggest li[aria-selected="true"] a, .ct-root .ct-suggest li a:hover { background: var(--surface-raised); }
.ct-suggest__img { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--card-face); display: grid; place-items: center; overflow: hidden; color: var(--card-ink-muted); }
.ct-suggest__img img { width: 100%; height: 100%; object-fit: contain; }
.ct-suggest__txt { display: flex; flex-direction: column; min-width: 0; }
.ct-suggest__txt b { font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-suggest__txt small { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.ct-root .ct-suggest__all a { justify-content: center; min-height: 44px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); font-size: 14px; font-weight: 600; }
.ct-suggest__none { padding: 14px; color: var(--text-muted); text-align: center; font-size: 14px; }

/* ---------- search page ---------- */
.ct-searchpage { max-width: 680px; margin: 0 0 var(--space-6); }
.ct-searchbox--lg .ct-input { min-height: 52px; height: 52px; font-size: 16px; padding-inline-end: 112px; }
.ct-searchbox--lg .ct-btn { position: absolute; inset-inline-end: 5px; min-height: 42px; border-radius: var(--radius-pill); }
.ct-searchpage__title { font-size: 30px; line-height: 40px; margin-bottom: 4px; overflow-wrap: anywhere; }

/* ---------- product image window: bigger, and never cropped ---------- */
.ct-pcard .ct-window { top: 13%; height: 50%; }
.ct-pcard__info { top: 66%; }
.ct-pcard__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ct-window.has-img { isolation: isolate; }
.ct-window .ct-window__bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(12px) saturate(1.2); opacity: .6; z-index: -1; }
.ct-window .ct-window__img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.ct-bigcard .ct-window { top: 17%; }
.ct-bigcard.is-text .ct-idx { display: none; }
.ct-bigcard.is-text .ct-window { top: 8%; height: 58%; }
.ct-bigcard.is-text .ct-pcard__info { top: 71%; }

/* ---------- tier picker: word-named tiers get equal wide cards with full name + price ---------- */
.ct-denoms--wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.ct-denom--wide { display: block; width: 100%; aspect-ratio: auto; height: 118px; padding: 0; text-align: center; }
.ct-denom--wide .ct-idx { display: none; }
.ct-denom--wide .ct-denom__amt { position: absolute; inset: 10px 10px 36px; padding: 4px 8px; }
.ct-denom--wide .ct-denom__price { position: absolute; inset-inline: 6px; bottom: 9px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-denom--wide .ct-denom__txt { font-size: 14px; line-height: 19px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ct-denom--wide .ct-denom__amt b.ct-num { font-size: 22px; line-height: 26px; }
.ct-denom__price { display: block; font-size: 13px; line-height: 18px; color: var(--card-ink); }
.ct-denom__price .ct-price, .ct-denom__price .ct-num { color: var(--card-ink); font-size: 13px; }
.ct-denom--wide[aria-checked="true"] { transform: translateY(-3px); }
.ct-denom--wide:disabled .ct-denom__txt { text-decoration: line-through; color: var(--card-ink-muted); }
/* the horizontal scroller is a phone pattern; on wider screens tiers simply wrap */
@media (min-width: 721px) { .ct-denoms--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 10px 0 0; } }

/* quantity stepper keeps its own size inside a stretched field */
.ct-qty { align-self: flex-start; width: max-content; }

/* nothing (card fans, rotated stacks) may create sideways scrolling */
.ct-root main { overflow-x: clip; }

/* ---------- tablet & phone ---------- */
@media (max-width: 880px) {
  .ct-hsearch { display: none; }
  .ct-searchtoggle { display: inline-flex; }
  .ct-subnav { display: none; }
  .ct-header.is-searching .ct-header__in { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: 10px; row-gap: 10px; }
  .ct-header.is-searching .ct-hsearch { display: block; order: 10; flex-basis: 100%; max-width: none; }
  .ct-header__in { gap: var(--space-3); }
  /* product page: picture, then the buying controls, then the reassurance panel */
  .ct-product { gap: var(--space-6); }
  .ct-product > .ct-stack:first-child { display: contents; }
  .ct-product > .ct-stack:last-child { order: 1; }
  .ct-product > .ct-stack:first-child > .ct-panel { order: 2; }
  .ct-bigcard, .ct-bigcard .ct-pstack { width: 190px; }
  .ct-bigcard .ct-idx { font-size: 18px; line-height: 18px; top: 10px; }
  .ct-bigcard .ct-idx small { font-size: 10px; line-height: 12px; }
  .ct-bigcard .ct-idx--bottom { bottom: 10px; }
  .ct-bigcard .ct-pcard__name { font-size: 14px; line-height: 20px; }
  .ct-h1 { font-size: 32px; line-height: 42px; }
}
@media (max-width: 720px) {
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); padding: 8px 0 0; }
  .ct-grid .ct-pstack { max-width: none; }
  .ct-pcard__name { font-size: 13px; line-height: 18px; }
  .ct-pcard__price { font-size: 12px; bottom: 8px; }
  .ct-tabs[data-ct-tabs] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .ct-tabs[data-ct-tabs]::-webkit-scrollbar { display: none; }
  .ct-section { padding-block: var(--space-8); }
  .ct-section__head h2 { font-size: 24px; line-height: 32px; }
  .ct-pricebar .ct-price { font-size: 22px; line-height: 30px; }
  .ct-searchpage__title { font-size: 24px; line-height: 32px; }
}
@media (min-width: 541px) and (max-width: 720px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .ct-denoms--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-pricebar { flex-wrap: wrap; }
  .ct-pricebar .ct-btn { flex: 1 1 100%; }
}
@media (max-width: 420px) { .ct-hide-s { display: none; } }

.ct-homesearch { display: none; }
@media (max-width: 880px) { .ct-homesearch { display: block; margin-top: calc(-1 * var(--space-4)); } }

/* =====================================================================
   update-14 — real supplier data: long tier lists, regions, brand pages
   ===================================================================== */
/* a long tier row (10+ tiers) must never widen the product grid past the screen */
.ct-product { grid-template-columns: 400px minmax(0, 1fr); }
.ct-product > * { min-width: 0; }
@media (max-width: 880px) { .ct-product { grid-template-columns: minmax(0, 1fr); } }
/* brand page (all regions of one brand) */
.ct-grouphead { margin-bottom: var(--space-6); }
.ct-grouphead .ct-h1 { margin: 0 0 var(--space-2); }
.ct-grouphead__hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--text-muted); font-size: 15px; line-height: 24px; max-width: 70ch; }
.ct-grouphead__hint .ct-ico { margin-top: 4px; flex: none; }
/* region line on a card */
.ct-pcard__region { display: block; margin-top: 2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pcard__region.is-locked { color: var(--card-ink); }
.ct-pcard__region.is-locked::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-inline-end: 6px; vertical-align: 1px; }
.ct-badge--region { background: var(--card-face); color: var(--card-ink); }
.ct-regionwarn { border-color: var(--line-strong); }
.ct-regionwarn > .ct-ico { color: var(--red-text, #ff6b6b); }

/* ---------- update-15: playing-card face — suit pips, printed inner frame, taller centred image ---------- */
.ct-pcard { background: linear-gradient(165deg, #FBF8EF 0%, var(--card-face) 42%, #ECE5D3 100%); }
.ct-pcard::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(18, 18, 22, .13); border-radius: 10px; pointer-events: none; z-index: 0; }
.ct-pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); z-index: 0; }
.ct-pcard > * { z-index: 1; }
/* image window: taller (reaches further down), near-square to suit the square supplier art, image always centred and whole */
.ct-pcard .ct-window { top: 12.5%; height: 56%; inset-inline: 8%; border: 0; border-radius: 9px; background: #E9E2D1; box-shadow: 0 0 0 1px rgba(18, 18, 22, .22), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 8px rgba(18, 18, 22, .12); }
.ct-window.has-img > .ct-window__img, .ct-window > img.a-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.ct-window .ct-window__bg { inset: -12%; width: 124%; height: 124%; object-position: 50% 50%; filter: blur(14px) saturate(1.25); opacity: .55; }
.ct-pcard__info { top: 71.5%; inset-inline: 8%; }
.ct-pcard__name { font-size: 14px; line-height: 19px; letter-spacing: -.005em; }
.ct-pcard__price { bottom: 11px; inset-inline-start: 8%; inset-inline-end: 22%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pcard__price b { color: var(--red); }
/* suit pips */
.ct-suit { position: absolute; width: 17px; height: 17px; color: var(--card-ink); line-height: 0; pointer-events: none; }
.ct-suit svg { width: 100%; height: 100%; display: block; }
.ct-suit.is-red, .ct-idx__suit.is-red { color: var(--red); }
.ct-suit--top { top: 10px; inset-inline-start: 10px; }
.ct-suit--bottom { bottom: 10px; inset-inline-end: 10px; transform: rotate(180deg); }
.ct-pcard__badge { position: absolute; top: 8px; inset-inline-end: 9px; z-index: 2; font-size: 11px; line-height: 16px; padding: 1px 8px; }
.ct-pcard:hover .ct-suit, .ct-pcard.is-hover .ct-suit { transform: scale(1.12); }
.ct-pcard:hover .ct-suit--bottom, .ct-pcard.is-hover .ct-suit--bottom { transform: rotate(180deg) scale(1.12); }
.ct-suit { transition: transform .18s ease; }
/* product page big card: suit sits under the amount in each index; text tiers (no index) show the plain pips */
.ct-idx__suit { display: block; width: 15px; height: 15px; margin-top: 3px; color: var(--card-ink); }
.ct-idx__suit svg { width: 100%; height: 100%; display: block; }
.ct-bigcard .ct-idx__suit { width: 20px; height: 20px; }
.ct-bigcard .ct-suit--alt { display: none; }
.ct-bigcard.is-text .ct-suit--alt { display: block; width: 22px; height: 22px; }
.ct-bigcard.is-text .ct-suit--top { top: 16px; inset-inline-start: 16px; }
.ct-bigcard.is-text .ct-suit--bottom { bottom: 16px; inset-inline-end: 16px; }
.ct-bigcard .ct-pcard .ct-window { top: 24%; height: 50%; }
.ct-bigcard .ct-pcard .ct-pcard__info { top: 77%; }
.ct-bigcard.is-text .ct-pcard .ct-window { top: 11%; height: 60%; }
.ct-bigcard.is-text .ct-pcard .ct-pcard__info { top: 75%; }
/* admin live preview card keeps its own compact layout */
.a-imgfield .ct-pcard .ct-window { top: 16%; height: 52%; }
@media (max-width: 880px) {
  .ct-bigcard .ct-idx__suit { display: none; }
  .ct-bigcard .ct-pcard .ct-window { top: 18%; height: 50%; }
  .ct-bigcard .ct-pcard .ct-pcard__info { top: 71%; }
  .ct-bigcard.is-text .ct-pcard .ct-window { top: 12%; height: 57%; }
  .ct-bigcard.is-text .ct-pcard .ct-pcard__info { top: 73%; }
  .ct-bigcard.is-text .ct-suit--alt { width: 16px; height: 16px; }
  .ct-bigcard.is-text .ct-suit--top { top: 10px; inset-inline-start: 10px; }
  .ct-bigcard.is-text .ct-suit--bottom { bottom: 10px; inset-inline-end: 10px; }
}
@media (max-width: 720px) {
  .ct-suit { width: 14px; height: 14px; }
  .ct-suit--top { top: 8px; inset-inline-start: 8px; }
  .ct-suit--bottom { bottom: 8px; inset-inline-end: 8px; }
  .ct-pcard::before { inset: 4px; border-radius: 9px; }
  .ct-pcard .ct-window { top: 12%; height: 55%; inset-inline: 7%; border-radius: 7px; }
  .ct-pcard__info { top: 69.5%; inset-inline: 7%; }
  .ct-pcard__name { font-size: 12.5px; line-height: 17px; }
  .ct-pcard__price { bottom: 8px; inset-inline-start: 7%; inset-inline-end: 20%; font-size: 11.5px; }
  .ct-pcard__badge { top: 6px; inset-inline-end: 6px; font-size: 10px; line-height: 14px; padding: 1px 6px; }
}
@media (prefers-reduced-motion: reduce) { .ct-suit { transition: none; } }

/* ---------- update-16: quick support (floating button, /contact, footer, order help) ---------- */
.ct-fab { position: fixed; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ct-fab__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--red); color: var(--on-red); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: transform .15s ease, background .15s ease; }
.ct-fab__btn:hover { background: var(--red-hover); transform: translateY(-2px); }
.ct-fab__btn[aria-expanded="true"] { background: var(--surface-raised); color: var(--text); }
.ct-fab__panel { width: min(340px, calc(100vw - 36px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 14px; display: flex; flex-direction: column; gap: 8px; transform-origin: bottom right; animation: ct-fab-in .16s ease-out; }
.ct-fab__panel[hidden] { display: none; }
@keyframes ct-fab-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ct-fab__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 2px 2px 6px; }
.ct-fab__head > div { display: flex; flex-direction: column; gap: 2px; }
.ct-fab__head b { font-size: 16px; line-height: 24px; }
.ct-fab__head span { font-size: 13px; line-height: 18px; color: var(--text-muted); }
.ct-fab__list { display: flex; flex-direction: column; gap: 6px; }
.ct-root a.ct-fab__ch { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); text-decoration: none; border: 1px solid transparent; }
.ct-root a.ct-fab__ch:hover { border-color: var(--line-strong); }
.ct-fab__ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--text); }
.ct-fab__txt { display: flex; flex-direction: column; min-width: 0; }
.ct-fab__txt b { font-size: 14px; line-height: 20px; }
.ct-fab__txt span { font-size: 13px; line-height: 18px; color: var(--text-muted); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-root a.ct-fab__more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.ct-root a.ct-fab__more:hover { color: var(--text); }
[dir="ltr"] .ct-fab__more .ct-ico, [dir="ltr"] .ct-chcard__go { transform: scaleX(-1); }
/* channel accents: a quiet tint, the label carries the name */
.ct-chbtn--whatsapp .ct-fab__ico, .ct-chcard--whatsapp .ct-chcard__ico { background: rgba(37, 211, 102, .16); color: #4ADE80; }
.ct-chbtn--telegram .ct-fab__ico, .ct-chcard--telegram .ct-chcard__ico { background: rgba(56, 152, 236, .16); color: #6CB6F5; }
.ct-chbtn--messenger .ct-fab__ico, .ct-chcard--messenger .ct-chcard__ico { background: rgba(160, 100, 255, .16); color: #B794FF; }
.ct-footer__chs .ct-chbtn--whatsapp { color: #4ADE80; } .ct-footer__chs .ct-chbtn--telegram { color: #6CB6F5; } .ct-footer__chs .ct-chbtn--messenger { color: #B794FF; }
.ct-footer__support { display: flex; flex-direction: column; gap: 8px; }
.ct-footer__support b { font-size: 14px; }
.ct-footer__chs { display: flex; gap: 8px; flex-wrap: wrap; }
/* /contact */
.ct-contact { max-width: 960px; padding-bottom: var(--space-8); }
.ct-contact__lead { max-width: 36em; margin-top: var(--space-2); }
.ct-contact__hours { display: inline-flex; gap: 8px; align-items: center; margin-top: var(--space-3); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.ct-chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.ct-root a.ct-chcard { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 76px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.ct-root a.ct-chcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ct-chcard__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-raised); }
.ct-chcard__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ct-chcard__txt b { font-size: 16px; line-height: 24px; }
.ct-chcard__txt span { font-size: 14px; color: var(--text-muted); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-chcard__go { color: var(--text-muted); }
.ct-contact__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-8); align-items: start; }
.ct-contact__h2 { font-size: 18px; line-height: 28px; font-weight: 700; }
.ct-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.ct-contact__list li { display: flex; gap: 10px; align-items: flex-start; }
.ct-contact__list .ct-ico { margin-top: 3px; color: var(--text); }
.ct-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ct-textarea { min-height: 120px; height: auto; padding-block: 12px; resize: vertical; line-height: 24px; }
.ct-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
/* order page help strip */
.ct-orderhelp { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-raised); font-size: 14px; }
.ct-orderhelp > span { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.ct-orderhelp.is-urgent { border: 1px solid var(--red-text); }
.ct-orderhelp__btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ct-fab { inset-inline-end: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ct-fab__btn { min-height: 52px; width: 52px; padding: 0; justify-content: center; }
  .ct-fab__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ct-contact__cols, .ct-form-2 { grid-template-columns: minmax(0, 1fr); }
  .ct-footer { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .ct-fab__panel { animation: none; } .ct-fab__btn, .ct-root a.ct-chcard { transition: none; } }
.ct-orderhelp .ct-btn--secondary { --bg-c: var(--bg); --bd-c: var(--line-strong); }

/* ---------- update-17: game-key platform pill + region line ---------- */
.ct-plat { position: absolute; inset-inline-start: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); padding: 2px 8px 2px 6px; border-radius: var(--radius-pill); background: rgba(18, 18, 22, .86); color: #F5F1E6; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); white-space: nowrap; }
.ct-plat span { overflow: hidden; text-overflow: ellipsis; }
.ct-plat .ct-ico { width: 13px; height: 13px; }
.ct-plat--steam { background: rgba(23, 26, 33, .9); }
.ct-plat--epic { background: rgba(18, 18, 18, .9); }
.ct-plat--xbox { background: rgba(16, 124, 16, .92); }
.ct-plat--playstation { background: rgba(0, 55, 145, .92); }
.ct-plat--nintendo { background: rgba(200, 16, 30, .92); }
.ct-plat--ea { background: rgba(255, 71, 71, .92); }
.ct-plat--ubisoft { background: rgba(0, 104, 214, .92); }
.ct-bigcard .ct-plat { font-size: 13px; line-height: 20px; padding: 3px 10px 3px 8px; inset-inline-start: 8px; bottom: 8px; }
.ct-bigcard .ct-plat .ct-ico { width: 15px; height: 15px; }
.ct-kv__sub { display: block; font-weight: 400; font-size: 13px; line-height: 20px; color: var(--text-muted); margin-top: 2px; }
.ct-badge--plat .ct-ico { width: 14px; height: 14px; }
@media (max-width: 720px) { .ct-plat { font-size: 10px; line-height: 14px; padding: 2px 6px 2px 5px; inset-inline-start: 4px; bottom: 4px; } .ct-plat .ct-ico { width: 11px; height: 11px; } }
/* region line: every region gets a dot — red = only that region, green = works anywhere */
.ct-pcard__region.is-open { color: var(--card-ink); }
.ct-pcard__region.is-open::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1F9D55; margin-inline-end: 6px; vertical-align: 1px; }

/* ================= customer account (update-23) ================= */
.ct-acct { padding-top: var(--space-6); padding-bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); }
.ct-acct__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ct-acct__who { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ct-acct__avatar { position: relative; flex: none; width: 56px; aspect-ratio: 5 / 7; border-radius: 9px; background: var(--card-face); color: var(--card-ink); display: grid; place-items: center; font-family: var(--font-display); font-size: 28px; line-height: 1; transform: rotate(-5deg); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ct-acct__avatar svg { position: absolute; width: 12px; height: 12px; top: 6px; inset-inline-start: 6px; color: var(--card-ink); }
.ct-acct__hello { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 40px; overflow-wrap: anywhere; }
.ct-acct__mail { overflow-wrap: anywhere; }
.ct-acct__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ct-acct__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.ct-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-stat__k { font-size: 13px; line-height: 18px; color: var(--text-muted); }
.ct-stat__v { font-size: 22px; line-height: 30px; font-weight: 700; }
.ct-stat__v .ct-price { font-size: 20px; }
.ct-stat.is-warn { border-color: var(--red-text); }
.ct-stat.is-warn .ct-stat__v { color: var(--red-text); }
.ct-stat.is-good .ct-stat__v { color: #4ADE80; }
.ct-acct__tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ct-acct__tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: 0 var(--space-4); color: var(--text-muted); font-weight: 600; text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ct-acct__tabs a:hover { color: var(--text); }
.ct-acct__tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--red); }
.ct-acct__filters .ct-tab { text-decoration: none; min-height: 40px; font-size: 14px; }
.ct-tab__n { font-size: 12px; line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--surface-raised); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ct-tab[aria-selected="true"] .ct-tab__n { background: var(--card-face-shade); color: var(--card-ink); }
.ct-acct__nudge a { font-weight: 700; text-decoration: underline; color: var(--text); }
.ct-acct__h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 32px; }
.ct-acct__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ct-acct__ro { display: flex; align-items: center; color: var(--text-muted); border-style: dashed; background: transparent; }
.ct-acct__out { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ct-order.is-pending { border-color: var(--line-strong); }
.ct-order__img { position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--card-face); }
.ct-order__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
a.ct-order__title { color: var(--text); text-decoration: none; display: block; overflow-wrap: anywhere; }
a.ct-order__title:hover { text-decoration: underline; }
.ct-order__coupon { display: inline-flex; align-items: center; gap: 3px; color: #4ADE80; font-weight: 600; }
.ct-order__btns { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: stretch; }
.ct-confirm { position: relative; }
.ct-confirm > summary { list-style: none; cursor: pointer; height: 100%; }
.ct-confirm > summary::-webkit-details-marker { display: none; }
.ct-confirm[open] > summary { --bd-c: var(--red-text); --fg-c: var(--red-text); }
.ct-confirm__pop { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-end: 0; width: min(280px, 80vw); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.ct-pager { display: flex; justify-content: center; align-items: center; gap: var(--space-3); padding-top: var(--space-4); }
@media (max-width: 860px) { .ct-acct__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-acct__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .ct-acct__hello { font-size: 24px; line-height: 32px; }
  .ct-acct__avatar { width: 44px; font-size: 22px; }
  .ct-acct__actions { width: 100%; } .ct-acct__actions > * { flex: 1; } .ct-acct__actions .ct-btn { width: 100%; }
  .ct-stat__v { font-size: 19px; line-height: 26px; } .ct-stat__v .ct-price { font-size: 17px; }
  .ct-order__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; }
  .ct-order__head > .ct-badge { grid-column: 2; justify-self: start; }
  .ct-order__img { width: 48px; height: 48px; }
  .ct-order__btns > * { flex: 1 1 100%; }
  .ct-order__btns .ct-confirm > summary { width: 100%; }
  .ct-confirm__pop { inset-inline-start: 0; inset-inline-end: auto; width: 100%; }
}

/* header account menu */
.ct-umenu { position: relative; }
.ct-umenu > summary { list-style: none; cursor: pointer; }
.ct-umenu > summary::-webkit-details-marker { display: none; }
.ct-umenu__pop { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 6px; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.ct-umenu__who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; min-width: 0; }
.ct-umenu__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-umenu__who span { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-umenu__pop a, .ct-umenu__pop button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; font: inherit; font-size: 15px; background: none; border: 0; width: 100%; cursor: pointer; text-align: start; }
.ct-umenu__pop a:hover, .ct-umenu__pop button:hover { background: var(--surface); }
.ct-umenu__pop form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.ct-umenu__badge { margin-inline-start: auto; font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; }

/* coupon box on the buy page */
.ct-coupon > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: 14px; min-height: 40px; }
.ct-coupon > summary::-webkit-details-marker { display: none; }
.ct-coupon > summary:hover { color: var(--text); }
.ct-coupon__row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.ct-coupon__row .ct-input { text-transform: uppercase; letter-spacing: .04em; }
.ct-coupon__msg { font-size: 13px; line-height: 20px; margin-top: 6px; }
.ct-coupon__msg.is-ok { color: #4ADE80; } .ct-coupon__msg.is-err { color: var(--red-text); }
.ct-coupon__on { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); border: 1px dashed #4ADE80; background: rgba(74, 222, 128, .06); }
.ct-coupon__on b { font-family: var(--font-mono); letter-spacing: .04em; }
.ct-discline { color: #4ADE80; font-size: 14px; font-weight: 600; }

/* ================= payment method picker (update-25) ================= */
.ct-confirm--center { display: flex; flex-direction: column; align-items: center; }
.ct-confirm--center .ct-confirm__pop { inset-inline: 0; margin-inline: auto; width: min(320px, 100%); }
.ct-payform .ct-methods legend { font-size: 17px; line-height: 26px; }
.ct-method__logo.has-img { background: #FFFFFF; border: 1px solid var(--line); padding: 4px 6px; box-sizing: border-box; }
.ct-method__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ct-method__logo .ct-ico { width: 22px; height: 22px; color: var(--text-muted); }
.ct-method { cursor: pointer; }
@media (max-width: 640px) { .ct-methods--2col { grid-template-columns: minmax(0, 1fr); } }
.ct-method__logo:not(.has-img) { border-style: solid; border-color: var(--line); }

/* ================= cart (update-26) ================= */
.ct-buybtns { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.ct-alert--cart { align-items: center; }
.ct-alert--cart .ct-btn { flex: none; }
.ct-cartpage { padding-top: var(--space-6); padding-bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); }
.ct-cartpage__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.ct-cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-5); align-items: start; }
.ct-cartsum { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--space-4); }
.ct-cartline { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.ct-cartline.is-off { border-style: dashed; background: transparent; }
.ct-cartline.is-off .ct-order__img, .ct-cartline.is-off .ct-order__thumb { opacity: .5; }
.ct-cartline__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-cartline__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 6px; }
.ct-cartline__price { margin-inline-start: auto; font-size: 16px; }
.ct-cartline__row form { margin: 0; }
.ct-qty--sm { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; height: 40px; }
.ct-qty--sm button { width: 40px; height: 40px; border: 0; background: var(--surface-raised); color: var(--text); font-size: 18px; cursor: pointer; }
.ct-qty--sm button:disabled { opacity: .4; cursor: not-allowed; }
.ct-qty--sm span { min-width: 36px; text-align: center; font-weight: 700; }
.ct-groupline { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-raised); }
.ct-groupline b { flex: none; }
@media (max-width: 900px) { .ct-cartgrid { grid-template-columns: minmax(0, 1fr); } .ct-cartsum { position: static; } }
@media (max-width: 520px) {
  .ct-buybtns { width: 100%; } .ct-buybtns .ct-btn { flex: 1 1 140px; }
  .ct-pricebar { flex-wrap: wrap; }
  .ct-groupline { flex-wrap: wrap; }
}
/* the cart icon joins the phone header: keep everything inside 360px */
@media (max-width: 520px) {
  .ct-header__in { gap: var(--space-2); }
  .ct-header__end { gap: 2px; }
  .ct-header__end .ct-btn--icon { width: 40px; min-width: 40px; }
  .ct-umenu > summary { padding: 0 8px; gap: 4px; }
  .ct-umenu > summary .ct-ico--chevron-down { display: none; }
  .ct-langswitch { padding: 0 8px; min-height: 34px; }
  .ct-logo__word { font-size: 22px; }
}

/* email confirmation (update-30) */
.ct-otpinput { font-size: 26px; line-height: 32px; letter-spacing: 10px; text-align: center; padding-inline: 8px; }
.ct-otpinput::placeholder { letter-spacing: 10px; }
.ct-linkbtn { background: none; border: 0; padding: 4px; color: var(--text-muted); text-decoration: underline; cursor: pointer; font: inherit; }
.ct-linkbtn:hover { color: var(--text); }
.ct-verifybar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }

/* update-33: the rotated bottom index of a card keeps only the amount and suit — upside-down words read as a glitch */
.ct-idx--bottom small { display: none; }
.ct-bigcard .ct-idx small { max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* update-37: product page conversion */
.ct-denom:not(.ct-denom--wide) .ct-idx--bottom { display: none; } /* the price takes the bottom of a tier card */
.ct-denom__pr { position: absolute; inset-inline: 6px; bottom: 7px; text-align: center; font-size: 11px; line-height: 13px; font-weight: 700; color: var(--card-ink); white-space: nowrap; overflow: hidden; }
.ct-denom:not(.ct-denom--wide) .ct-denom__amt { inset: 18% 15% 24%; }
.ct-denom__top { position: absolute; z-index: 2; top: -9px; inset-inline-end: -6px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: var(--on-red, #FFFFFF); font-size: 10px; line-height: 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 2px var(--bg); }
.ct-buyhint, .ct-sold { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-muted); }
.ct-sold { color: var(--text); font-weight: 600; }
.ct-buyhint .ct-ico, .ct-sold .ct-ico { flex: none; margin-top: 3px; }
.ct-sold .ct-ico { color: #2FBF71; }
.ct-check--confirm.is-invalid { box-shadow: 0 0 0 2px var(--red); border-radius: var(--radius-md); }
.ct-pfaq { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: var(--space-4); }
.ct-pfaq__t { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; line-height: 24px; font-weight: 700; }
.ct-pfaq details { border-bottom: 1px solid var(--line); }
.ct-pfaq summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14px; line-height: 22px; list-style-position: inside; }
.ct-pfaq details p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; line-height: 24px; }
@media (max-width: 720px) { .ct-denom__pr { font-size: 10px; } }