@charset "UTF-8";
/* ==========================================================================
   COSPTY Mobile App shell — the whole look of the phone experience.

   Loaded only by cosptyapp's front controllers, so nothing in here can ever
   leak into the classic theme. The bottom bar keeps its own styles (printed by
   cosptyappbar) — this file only reserves room for it and paints everything
   around it: fixed app header, cards, chips, sheets, cart and My account.

   Colour: --ab-primary is set by cosptyappbar from the Back Office, so the app
   header always matches the bottom bar. The var() fallback covers the case
   where that module is disabled.
   ========================================================================== */

:root {
  --cpa-primary: var(--ab-primary, #FF8D4F);
  --cpa-ink: #111827;
  --cpa-ink-2: #374151;
  --cpa-mute: #9aa1b1;
  --cpa-line: #eef1f6;
  --cpa-line-2: #e5e9f0;
  --cpa-bg: #f5f6f8;
  --cpa-card: #ffffff;
  --cpa-ok: #047857;
  --cpa-hot: #e11d48;
  --cpa-safe-t: env(safe-area-inset-top, 0px);
  --cpa-safe-b: env(safe-area-inset-bottom, 0px);
  --cpa-bar-h: 56px;
  --cpa-r: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html.cpa { -webkit-text-size-adjust: 100%; }

body.cpa-body {
  margin: 0;
  padding: calc(var(--cpa-head-h, 52px) + var(--cpa-safe-t)) 0 0;
  background: var(--cpa-bg);
  color: var(--cpa-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Every base reset below is wrapped in :where(), which contributes ZERO
   specificity. Without it, "body.cpa-body a{color:inherit}" would outrank
   ".cpa-cta{color:var(--cpa-primary)}" and the hero buttons rendered white
   text on a white pill. With it, any component rule wins automatically and
   unclassed links still inherit their parent's colour. */
:where(body.cpa-body) a { color: inherit; text-decoration: none; }
:where(body.cpa-body) img { max-width: 100%; display: block; border: 0; }
:where(body.cpa-body) button { font-family: inherit; cursor: pointer; }
:where(body.cpa-body) ul,
:where(body.cpa-body) ol { margin: 0; padding: 0; list-style: none; }
:where(body.cpa-body) p { margin: 0; }
:where(body.cpa-body) h1,
:where(body.cpa-body) h2,
:where(body.cpa-body) h3 { margin: 0; font-weight: 700; }
:where(body.cpa-body) dl,
:where(body.cpa-body) dd,
:where(body.cpa-body) dt { margin: 0; }

/* ---------------------------------------------------------------- header */
.cpa-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9985;
  padding-top: var(--cpa-safe-t);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cpa-line);
  box-shadow: 0 2px 12px rgba(17, 24, 39, .05);
  transition: box-shadow .2s ease;
}
.cpa-head.is-scrolled { box-shadow: 0 5px 20px rgba(17, 24, 39, .11); }
.cpa-head-row {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 10px;
}
.cpa-head-space { flex: 1 1 auto; }

.cpa-brand { display: flex; align-items: center; gap: 8px; padding-right: 6px; }
.cpa-brand-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cpa-primary);
  box-shadow: 0 0 0 4px rgba(255, 141, 79, .16);
}
.cpa-brand-txt { font-size: 16.5px; font-weight: 800; letter-spacing: .14em; color: var(--cpa-ink); }

.cpa-ico {
  position: relative;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 12px;
  color: var(--cpa-ink);
  -webkit-tap-highlight-color: transparent;
}
.cpa-ico:active { background: #f1f3f7; }
.cpa-ico svg {
  width: 22px; height: 22px; display: block;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cpa-back svg { width: 24px; height: 24px; stroke-width: 2; }

.cpa-badge {
  position: absolute; top: 5px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--cpa-hot); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
  font-style: normal; border: 1.5px solid #fff;
}
.cpa-badge[hidden] { display: none; }

.cpa-head-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 10px;
  height: 40px; padding: 0 12px;
  background: #f4f5f8;
  border: 1.5px solid transparent;
  border-radius: 12px;
}
.cpa-head-search:focus-within { border-color: var(--cpa-primary); background: #fff; }
.cpa-head-search svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  stroke: var(--cpa-mute); fill: none; stroke-width: 2; stroke-linecap: round;
}
.cpa-head-search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--cpa-ink);
}
.cpa-head-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ------------------------------------------------------------------ main */
.cpa-main { padding: 12px 14px 6px; --cpa-main-px: 14px; }

.cpa-sec { margin-top: 18px; }
.cpa-sec:first-child { margin-top: 4px; }
.cpa-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.cpa-sec-head h2 { font-size: 15.5px; letter-spacing: -.01em; }
.cpa-h1 { font-size: 19px; letter-spacing: -.02em; }
.cpa-more { font-size: 12px; font-weight: 600; color: var(--cpa-primary); }

.cpa-listhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 4px 2px 10px;
}
.cpa-count { font-size: 12px; color: var(--cpa-mute); }

.cpa-note {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 14px; padding: 10px 12px;
  border-radius: 14px; font-size: 12px; line-height: 1.5;
}
.cpa-note strong { font-size: 12.5px; }
.cpa-note-info {
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}

/* ------------------------------------------------------------------ hero */
.cpa-hero {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 18px 16px;
  background: linear-gradient(135deg, var(--cpa-primary), #ff9f6b 55%, #ffc08a);
  box-shadow: 0 10px 26px rgba(255, 141, 79, .24);
  color: #fff;
}
.cpa-hero-in { position: relative; z-index: 2; max-width: 74%; }
.cpa-hero-k {
  display: inline-block; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.cpa-hero-t { margin: 10px 0 6px; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.cpa-hero-s { font-size: 12.5px; line-height: 1.5; opacity: .94; }
.cpa-hero-em {
  position: absolute; right: 8px; bottom: -6px;
  font-size: 78px; line-height: 1; opacity: .92; z-index: 1;
  transform: rotate(-8deg);
}
.cpa-cta {
  display: inline-block; margin-top: 13px;
  padding: 10px 18px; border-radius: 12px;
  background: #fff; color: var(--cpa-primary);
  font-size: 13px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .12);
}

/* ------------------------------------------------------- category bubbles */
.cpa-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 12px 8px;
}
.cpa-cat { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cpa-bubble {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--cpa-card);
  border: 1px solid var(--cpa-line);
  box-shadow: 0 3px 10px rgba(17, 24, 39, .05);
  font-size: 26px; line-height: 1;
}
.cpa-cat:active .cpa-bubble { transform: scale(.95); }
.cpa-cat-name {
  font-size: 11.5px; line-height: 1.25; text-align: center; color: var(--cpa-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------------------------ occasion tiles */
.cpa-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cpa-tile {
  position: relative; overflow: hidden;
  min-height: 86px; padding: 13px 14px;
  border-radius: 18px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .12);
}
.cpa-tile-ico { font-size: 26px; line-height: 1; }
.cpa-tile-name { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.cpa-tile-purple { background: linear-gradient(140deg, #7c3aed, #a855f7); }
.cpa-tile-pink   { background: linear-gradient(140deg, #db2777, #f472b6); }
.cpa-tile-cyan   { background: linear-gradient(140deg, #0e7490, #22d3ee); }
.cpa-tile-green  { background: linear-gradient(140deg, #047857, #34d399); }

/* ------------------------------------------------------------------ cards */
.cpa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cpa-rail {
  display: flex; gap: 10px; margin: 0 -14px; padding: 0 14px 2px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cpa-rail::-webkit-scrollbar { display: none; }
.cpa-rail > .cpa-card { flex: 0 0 144px; width: 144px; scroll-snap-align: start; }

.cpa-card {
  display: flex; flex-direction: column;
  background: var(--cpa-card);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
  /* the favourite heart is positioned against the card, not against the
     link that holds the picture — a <button> inside an <a> is invalid */
  position: relative;
}
.cpa-card.is-preview { border-style: dashed; border-color: var(--cpa-line-2); }
.cpa-card.is-out { opacity: .55; }
.cpa-card-img {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; background: #f8f9fb; overflow: hidden;
}
.cpa-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cpa-card-ph { font-size: 42px; line-height: 1; opacity: .9; }
/* Products with no photo yet show their initial on a tinted tile: a wall of
   identical emoji reads as unfinished, a letter reads as intentional. */
.cpa-card-ph-l {
  font-size: 48px; font-weight: 800; letter-spacing: -1px;
  color: var(--cpa-primary); opacity: .42;
}
.cpa-off {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 6px; border-radius: 8px;
  background: var(--cpa-hot); color: #fff;
  font-size: 10.5px; font-weight: 800;
}
.cpa-prev {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 6px; border-radius: 8px;
  background: rgba(17, 24, 39, .68); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.cpa-card-body { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px 11px; }
.cpa-card-name {
  font-size: 12.5px; line-height: 1.35; color: var(--cpa-ink); min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpa-card-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cpa-card-price strong { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--cpa-ink); }
.cpa-card-price s { font-size: 11.5px; color: var(--cpa-mute); }
.cpa-card-meta { display: flex; align-items: center; gap: 6px; }
.cpa-express {
  padding: 2px 5px; border-radius: 6px;
  background: #ecfdf5; color: var(--cpa-ok);
  font-size: 9.5px; font-weight: 700;
}
.cpa-iva { font-size: 9.5px; color: var(--cpa-mute); }

/* ------------------------------------------------------------------ trust */
.cpa-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-top: 16px; padding: 12px 6px;
  background: var(--cpa-card); border-radius: var(--cpa-r);
  border: 1px solid var(--cpa-line);
}
.cpa-trust > div { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.cpa-trust span { font-size: 18px; line-height: 1; }
.cpa-trust b { font-size: 10px; font-weight: 600; color: var(--cpa-ink-2); line-height: 1.25; }

/* -------------------------------------------------------- sticky filter bar */
.cpa-stickyhead {
  position: sticky;
  top: calc(var(--cpa-head-h, 52px) + var(--cpa-safe-t));
  z-index: 60;
  margin: 0 -14px;
  padding: 6px 14px 8px;
  background: var(--cpa-bg);
  box-shadow: 0 6px 12px -8px rgba(17, 24, 39, .18);
}
.cpa-chips {
  display: flex; gap: 8px; margin: 0 -14px 8px; padding: 0 14px 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cpa-chips::-webkit-scrollbar { display: none; }
.cpa-chip {
  flex: 0 0 auto; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line-2);
  color: var(--cpa-ink-2); font-size: 12.5px; font-weight: 600;
}
.cpa-chip.is-on {
  background: var(--cpa-primary); border-color: var(--cpa-primary);
  color: #fff; font-weight: 700;
}
.cpa-toolbar { display: flex; gap: 8px; }
.cpa-tool {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border-radius: 12px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line-2);
  color: var(--cpa-ink-2); font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpa-tool svg {
  width: 16px; height: 16px; flex: 0 0 16px;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
}
.cpa-tool:active { background: #f1f3f7; }

/* ------------------------------------------------------------------ sheet */
.cpa-sheet { position: fixed; inset: 0; z-index: 9995; }
.cpa-sheet[hidden] { display: none; }
.cpa-sheet-bd {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 0; transition: opacity .2s ease;
}
.cpa-sheet.is-open .cpa-sheet-bd { opacity: 1; }
.cpa-sheet-pnl {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(20px + var(--cpa-safe-b));
  background: #fff; border-radius: 20px 20px 0 0;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.22, .8, .3, 1);
}
.cpa-sheet.is-open .cpa-sheet-pnl { transform: translateY(0); }
.cpa-sheet-title { margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.cpa-sheet-note { margin-top: 10px; font-size: 11.5px; color: var(--cpa-mute); line-height: 1.5; }
.cpa-sheet-list li + li { border-top: 1px solid #f4f6f9; }
.cpa-sheet-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; font-size: 14px; color: var(--cpa-ink);
}
.cpa-sheet-list a.is-on { color: var(--cpa-primary); font-weight: 700; }
.cpa-filters { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.cpa-filters label {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; font-size: 14px; border-bottom: 1px solid #f4f6f9;
}
.cpa-filters input { width: 18px; height: 18px; accent-color: var(--cpa-primary); }

/* -------------------------------------------------------------- buttons */
.cpa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 20px; border: 0; border-radius: 13px;
  background: var(--cpa-primary); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
}
.cpa-btn-block { display: flex; width: 100%; }
.cpa-btn-ghost {
  display: block; margin-top: 9px; padding: 7px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: #64748b;
}

/* ------------------------------------------------------------------ empty */
.cpa-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 20px; text-align: center;
}
.cpa-empty-ico { font-size: 46px; line-height: 1; }
.cpa-empty p { font-size: 13.5px; color: #64748b; line-height: 1.55; }
.cpa-empty .cpa-cta { margin-top: 4px; }

/* ------------------------------------------------------------------- cart */
.cpa-ship {
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r);
}
.cpa-ship p { font-size: 12.5px; color: var(--cpa-ink-2); }
.cpa-ship p b { color: var(--cpa-ink); }
.cpa-ship-ok { color: var(--cpa-ok) !important; font-weight: 700; }
.cpa-ship-bar {
  height: 6px; margin-top: 9px; border-radius: 999px;
  background: var(--cpa-line); overflow: hidden;
}
.cpa-ship-bar i { display: block; height: 100%; border-radius: 999px; background: var(--cpa-primary); transition: width .3s ease; }

.cpa-cartlist { display: flex; flex-direction: column; gap: 10px; }
.cpa-cartrow {
  position: relative;
  display: grid; grid-template-columns: 74px 1fr auto; gap: 10px;
  padding: 10px; background: var(--cpa-card);
  border: 1px solid var(--cpa-line); border-radius: var(--cpa-r);
}
.cpa-cartrow-img {
  width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
  background: #f8f9fb; display: grid; place-items: center;
}
.cpa-cartrow-img img { width: 100%; height: 100%; object-fit: cover; }
.cpa-cartrow-img span { font-size: 28px; }
.cpa-cartrow-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpa-cartrow-name {
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--cpa-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpa-cartrow-attr { font-size: 11px; color: var(--cpa-mute); }
.cpa-stepper { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cpa-stepper button {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: grid; place-items: center;
  border: 1px solid var(--cpa-line-2); border-radius: 9px;
  background: #fff; color: var(--cpa-ink-2);
  font-size: 17px; line-height: 1;
}
.cpa-stepper button:active { background: #f1f3f7; }
.cpa-stepper input {
  width: 32px; height: 28px; padding: 0; text-align: center;
  border: 0; background: transparent; color: var(--cpa-ink);
  font-size: 13.5px; font-weight: 700; outline: none;
}
.cpa-cartrow-price { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--cpa-ink); }
.cpa-cartrow-del {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #f1f5f9; color: #94a3b8;
  font-size: 16px; line-height: 1;
}

.cpa-sum {
  margin-top: 14px; padding: 14px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: var(--cpa-r);
}
.cpa-sum > div { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.cpa-sum > div span { color: var(--cpa-ink-2); }
.cpa-sum > div b { font-weight: 700; }
.cpa-sum-total {
  margin-top: 7px; padding-top: 11px !important;
  border-top: 1px dashed var(--cpa-line-2);
}
.cpa-sum-total span { font-size: 14.5px; font-weight: 700; color: var(--cpa-ink) !important; }
.cpa-sum-total b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.cpa-sum-note { margin-top: 9px; font-size: 11px; color: var(--cpa-mute); line-height: 1.5; }

.cpa-sticky-cta {
  position: sticky;
  bottom: calc(var(--cpa-bar-h) + var(--cpa-safe-b) + 8px);
  z-index: 55;
  margin: 14px -14px -6px;
  padding: 12px 14px 4px;
  background: linear-gradient(180deg, rgba(245, 246, 248, 0), var(--cpa-bg) 32%);
}
.cpa-sticky-cta .cpa-btn { box-shadow: 0 8px 20px rgba(17, 24, 39, .16); }

/* ---------------------------------------------------------------- account */
.cpa-id {
  border-radius: 20px; padding: 16px;
  background: linear-gradient(135deg, var(--cpa-primary), #ff9f6b 58%, #ffc08a);
  box-shadow: 0 10px 26px rgba(255, 141, 79, .22);
  color: #fff;
}
.cpa-id-row { display: flex; align-items: center; gap: 12px; }
.cpa-avatar {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 19px; font-weight: 800; color: #fff;
  background: rgba(255, 255, 255, .22);
  border: 1.5px solid rgba(255, 255, 255, .5);
}
.cpa-id-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cpa-id-txt strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.cpa-id-txt span { font-size: 12px; opacity: .92; line-height: 1.4; }
.cpa-id-actions { display: flex; gap: 8px; margin-top: 14px; }
.cpa-id-actions a {
  flex: 1 1 0; padding: 11px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .96); color: var(--cpa-primary);
  font-size: 13px; font-weight: 800; text-align: center;
}

.cpa-qtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.cpa-q {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 14px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
}
.cpa-q span { font-size: 21px; line-height: 1; }
.cpa-q b { font-size: 10.5px; font-weight: 600; color: var(--cpa-ink-2); }
.cpa-q:active { background: #f7f8fb; }

.cpa-menu {
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r); overflow: hidden;
}
.cpa-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; font-size: 13.5px; color: var(--cpa-ink);
  border-bottom: 1px solid #f4f6f9;
}
.cpa-menu-item:last-child { border-bottom: 0; }
.cpa-menu-item:active { background: #f7f8fb; }
.cpa-menu-ico { width: 22px; flex: 0 0 22px; text-align: center; font-size: 16px; line-height: 1; }
.cpa-menu-arrow { margin-left: auto; color: #cbd5e1; font-size: 17px; line-height: 1; }
.cpa-menu-val { margin-left: auto; font-size: 12px; color: var(--cpa-mute); }
.cpa-menu-static { background: #fcfcfd; }

.cpa-legal {
  margin-top: 10px; padding: 13px 14px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r);
}
.cpa-legal-t {
  margin-bottom: 9px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; color: var(--cpa-ink);
}
.cpa-legal-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; }
.cpa-legal-dl dt { font-size: 11.5px; color: var(--cpa-mute); white-space: nowrap; }
.cpa-legal-dl dd { font-size: 12px; color: var(--cpa-ink-2); line-height: 1.5; word-break: break-word; }
.cpa-legal-dl dd a { color: var(--cpa-primary); font-weight: 600; }
.cpa-legal-note {
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid #f4f6f9;
  font-size: 11px; line-height: 1.6; color: var(--cpa-mute);
}

.cpa-copy { margin-top: 12px; text-align: center; }
.cpa-copy p { font-size: 11px; line-height: 1.7; color: var(--cpa-mute); }
.cpa-copy p + p { margin-top: 3px; color: #b6bdcb; }

.cpa-logout {
  display: block; margin-top: 16px; padding: 13px;
  text-align: center; font-size: 13.5px; font-weight: 700;
  color: var(--cpa-hot); background: var(--cpa-card);
  border: 1px solid #fee2e2; border-radius: 13px;
}
.cpa-logout:active { background: #fff5f6; }

/* ----------------------------------------------------------------- footer */
.cpa-foot { padding: 18px 14px 10px; text-align: center; }
.cpa-foot-brand {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; color: var(--cpa-mute); text-transform: uppercase;
}
.cpa-foot-note { margin-top: 5px; font-size: 10.5px; color: #b6bdcb; line-height: 1.55; }

/* ------------------------------------------------------------------ misc */
[data-cpa-noop] { cursor: default; }
body.cpa-sheet-open { overflow: hidden; }

/* --------------------------------------------------- room for the bottom bar
   cosptyappbar already pads body.ab-has-bar; the app shell keeps its own
   value in sync so the sticky CTA and the last card never sit under the bar. */
body.cpa-body.ab-has-bar { padding-bottom: calc(var(--cpa-bar-h) + var(--cpa-safe-b) + 12px) !important; }

/* ------------------------------------------------------------------ tablet */
@media (min-width: 620px) {
  .cpa-grid { grid-template-columns: repeat(3, 1fr); }
  .cpa-tiles { grid-template-columns: repeat(4, 1fr); }
  .cpa-rail > .cpa-card { flex: 0 0 164px; width: 164px; }
  .cpa-hero-t { font-size: 26px; }
  .cpa-hero-em { font-size: 96px; }
}

/* ------------------------------------------------ desktop: a phone in a frame
   App pages stay reachable on desktop (someone can paste a link), so they are
   centred at phone width instead of stretching the cards across the screen. */
@media (min-width: 992px) {
  body.cpa-body { background: #e9edf3; }
  .cpa-head {
    left: 50%; right: auto; width: 520px;
    transform: translateX(-50%);
    border-radius: 0 0 14px 14px;
  }
  .cpa-main, .cpa-foot, .cpa-stickyhead { width: 520px; margin-left: auto; margin-right: auto; }
  .cpa-stickyhead { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
  .cpa-main { padding-left: 0; padding-right: 0; --cpa-main-px: 0; }
  .cpa-rail { margin: 0 -6px; padding: 0 6px 2px; }
  .cpa-grid { grid-template-columns: repeat(3, 1fr); }
  .cpa-sticky-cta { margin: 14px 0 -6px; bottom: 8px; }
  .cpa-hero-em { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  body.cpa-body * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   v1.1 — single-row header, product detail, auth forms, account sub-pages,
   unified CMS pages. Same design language as v1.0.
   ========================================================================== */

/* ------------------------------------------------------- header, 1 row */
.cpa-head-row-single { padding: 0 10px; gap: 8px; }
.cpa-head-row-single .cpa-head-search {
  flex: 1 1 auto; margin: 0; height: 36px; min-width: 0;
}
.cpa-head-row-single .cpa-head-search svg { width: 16px; height: 16px; flex-basis: 16px; }
.cpa-head-row-single .cpa-brand { flex: 0 0 auto; }
.cpa-head-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 15px; font-weight: 700; color: var(--cpa-ink);
}

/* ------------------------------------------------------ product detail */
.cpa-pd { padding: 12px 12px 18px; }
.cpa-pd-gallery { position: relative; border-radius: var(--cpa-r); overflow: hidden; background: #fff; border: 1px solid var(--cpa-line); }
.cpa-pd-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cpa-pd-img.cpa-card-ph { display: flex; align-items: center; justify-content: center; background: #fff; }
.cpa-card-ph-xl span { font-size: 84px; font-weight: 800; color: var(--cpa-primary); opacity: .4; }
.cpa-pd-off {
  position: absolute; top: 10px; left: 10px;
  background: var(--cpa-hot); color: #fff; font-weight: 800; font-size: 12px;
  padding: 4px 9px; border-radius: 999px;
}
.cpa-pd-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.cpa-pd-thumbs::-webkit-scrollbar { display: none; }
.cpa-pd-thumb {
  flex: 0 0 54px; width: 54px; height: 54px; padding: 0;
  border: 2px solid var(--cpa-line-2); border-radius: 12px; overflow: hidden; background: #fff;
}
.cpa-pd-thumb.is-active { border-color: var(--cpa-primary); }
.cpa-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cpa-pd-buybox { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: var(--cpa-r); padding: 14px; margin-top: 12px; }
.cpa-pd-name { font-size: 17px; line-height: 1.35; }
.cpa-pd-prices { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.cpa-pd-price { font-size: 22px; font-weight: 800; color: var(--cpa-primary); }
.cpa-pd-regular { color: var(--cpa-mute); font-size: 14px; }
.cpa-pd-stock { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cpa-pd-ref { color: var(--cpa-mute); font-size: 12px; }
.cpa-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #eef2f6; color: var(--cpa-ink-2); }
.cpa-pill-ok { background: #e7f6ef; color: var(--cpa-ok); }
.cpa-pill-out { background: #fdeeee; color: var(--cpa-hot); }

.cpa-pd-opts { margin-top: 14px; }
.cpa-pd-opt + .cpa-pd-opt { margin-top: 10px; }
.cpa-pd-opt-name { font-size: 12.5px; font-weight: 700; color: var(--cpa-ink-2); margin-bottom: 6px; }
.cpa-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cpa-chip.is-active { border-color: var(--cpa-primary); color: var(--cpa-primary); background: #fff7f2; }

.cpa-pd-trust { margin-top: 10px; font-size: 12px; color: var(--cpa-mute); text-align: center; }

/* ------------------------------------------------- GLS shipping block */
.cpa-gls {
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r); padding: 13px 14px 11px; margin-top: 12px;
}
.cpa-gls-top { display: flex; align-items: center; gap: 9px; }
.cpa-gls-badge {
  flex: none; width: 46px; height: 27px; border-radius: 6px;
  background: #0F3E68; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
}
.cpa-gls-title { font-size: 14.5px; font-weight: 800; color: var(--cpa-ink); }
.cpa-gls-lead { margin-top: 7px; font-size: 12px; color: var(--cpa-ink-2); }
.cpa-gls-feats { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--cpa-line-2); }
.cpa-gls-feats li { display: flex; align-items: center; gap: 9px; padding: 3.5px 0; }
.cpa-gls-feats li + li { margin-top: 1px; }
.cpa-gls-feats li span { font-size: 12.5px; font-weight: 600; color: var(--cpa-ink-2); line-height: 1.35; }
.cpa-gls-feats svg {
  flex: none; width: 17px; height: 17px; display: block;
  stroke: #0F3E68; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* v2.6.7 — 商家店铺块（多商户店铺展示入口），位于物流模块上方 */
.cpa-shop {
  display: flex; align-items: center; gap: 12px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r); padding: 12px 14px; margin-top: 12px;
}
.cpa-shop-ava {
  flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
  background: var(--cpa-brand, #FF8D4F); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
}
.cpa-shop-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpa-shop-meta { flex: 1 1 auto; min-width: 0; }
.cpa-shop-name { font-size: 14px; font-weight: 800; color: var(--cpa-ink); }
.cpa-shop-info { margin-top: 3px; font-size: 12px; color: var(--cpa-ink-2); line-height: 1.4; }
.cpa-shop-go {
  flex: none; align-self: center;
  padding: 7px 13px; border-radius: 999px;
  background: var(--cpa-brand, #FF8D4F); color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}

.cpa-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--cpa-line-2); border-radius: 12px; overflow: hidden; background: #fff; }
.cpa-stepper button { width: 38px; height: 42px; border: 0; background: transparent; font-size: 18px; color: var(--cpa-ink); }
.cpa-stepper input { width: 38px; height: 42px; border: 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--cpa-ink); outline: none; }

.cpa-pd-desc,
.cpa-pd-card { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: var(--cpa-r); padding: 14px; margin-top: 12px; }
.cpa-pd-desc h2 { font-size: 15px; margin-bottom: 8px; }
.cpa-pd-short { color: var(--cpa-ink-2); font-weight: 600; margin-bottom: 8px; }

/* ----------------------------------------------------------- buttons */
.cpa-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 18px;
  border: 0; border-radius: 13px;
  background: var(--cpa-primary); color: #fff;
  font-size: 15px; font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}
.cpa-btn-primary:active { filter: brightness(.94); }
.cpa-btn-primary.is-disabled, .cpa-btn-primary[disabled] { opacity: .45; pointer-events: none; }
.cpa-btn-primary.cpa-block { display: flex; width: 100%; margin-top: 14px; }
.cpa-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 14px;
  border: 1.5px solid var(--cpa-line-2); border-radius: 10px; background: #fff;
  font-size: 13px; font-weight: 700; color: var(--cpa-ink-2);
}
.cpa-btn-ghost.is-danger { color: var(--cpa-hot); border-color: #f7cfd3; }

/* -------------------------------------------------------- form blocks */
.cpa-auth, .cpa-list, .cpa-doc { padding: 14px 12px 20px; }
.cpa-page-title { font-size: 20px; margin-bottom: 10px; }
.cpa-form { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: var(--cpa-r); padding: 14px; margin-top: 6px; }
.cpa-field { display: block; margin-bottom: 12px; }
.cpa-field span { display: block; font-size: 12.5px; font-weight: 700; color: var(--cpa-ink-2); margin-bottom: 5px; }
.cpa-field input, .cpa-field select {
  width: 100%; height: 46px; padding: 0 12px;
  border: 1.5px solid var(--cpa-line-2); border-radius: 12px;
  font-size: 15px; color: var(--cpa-ink); background: #fff; outline: none;
}
.cpa-field input:focus, .cpa-field select:focus { border-color: var(--cpa-primary); }
.cpa-check { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0; font-size: 13px; color: var(--cpa-ink-2); }
.cpa-check input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 18px; accent-color: var(--cpa-primary); }
.cpa-check a { color: var(--cpa-primary); font-weight: 700; }
.cpa-form-divider { margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--cpa-line); font-size: 12.5px; font-weight: 800; color: var(--cpa-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.cpa-form .cpa-btn-primary { width: 100%; margin-top: 4px; }

.cpa-alert { border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: 13.5px; }
.cpa-alert-err { background: #fdeeee; color: #b91c1c; border: 1px solid #f7cfd3; }
.cpa-alert-ok { background: #e7f6ef; color: var(--cpa-ok); border: 1px solid #bfe8d4; }
.cpa-alert-info { background: #eef4ff; color: #1f4bb8; border: 1px solid #d3e0fb; }
.cpa-alert p + p { margin-top: 5px; }
.cpa-auth-alt { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.cpa-auth-alt a { color: var(--cpa-primary); font-weight: 700; font-size: 14px; text-align: center; }

/* ------------------------------------------------ social sign-in row */
/* Google / Facebook / TikTok on the app's sign-in and sign-up screens.
   The handshake itself lives in the cosptysociallogin module — this is only
   the surface. Colours follow each provider's own brand guideline:
   Google stays white with the four-colour mark, Facebook and TikTok are
   solid brand surfaces. */
.cpa-social { margin-top: 20px; }
.cpa-social-sep {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--cpa-mute);
  text-transform: uppercase; letter-spacing: .05em;
}
.cpa-social-sep::before, .cpa-social-sep::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--cpa-line);
}
.cpa-social-sep span { flex: 0 0 auto; }
.cpa-social-row { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cpa-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative;
  height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1.5px solid transparent;
  font-size: 14.5px; font-weight: 700; line-height: 1;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, transform .06s ease;
}
.cpa-social-btn:active { transform: scale(.985); filter: brightness(.96); }
.cpa-social-ico { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; }
.cpa-social-ico svg { width: 20px; height: 20px; display: block; }
.cpa-social-txt { white-space: nowrap; }

/* Google — white surface is mandatory in their guidelines */
.cpa-social-btn--google { background: #fff; border-color: #dadce0; color: #3c4043; }
/* Facebook */
.cpa-social-btn--facebook { background: #1877f2; color: #fff; }
/* TikTok */
.cpa-social-btn--tiktok { background: #010101; color: #fff; }

/* Keys not filled in yet: still visible — it tells the merchant the method
   exists — but clearly inactive, and it opens an in-app notice instead of
   starting a handshake that cannot succeed. */
.cpa-social-btn.is-pending { opacity: .5; }
.cpa-social-btn.is-pending::after {
  content: '!';
  position: absolute; top: 6px; right: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(0, 0, 0, .28); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center;
}
.cpa-social-btn--google.is-pending::after { background: rgba(60, 64, 67, .3); }

.cpa-social-legal {
  margin-top: 12px; font-size: 11.5px; line-height: 1.5;
  color: var(--cpa-mute); text-align: center;
}
.cpa-social-hint { font-size: 12px; line-height: 1.55; opacity: .92; }
.cpa-social-hint code {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .06); font-size: 11.5px;
}

/* ------------------------------------------------- lists / sub-pages */
.cpa-subtle { color: var(--cpa-mute); font-size: 13px; margin: 4px 0; }
.cpa-cards { display: flex; flex-direction: column; gap: 10px; }
.cpa-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: 14px;
  padding: 12px 14px;
}
.cpa-item-static { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.cpa-item:first-child { border-radius: 14px 14px 0 0; }
.cpa-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cpa-item-main b { font-size: 14.5px; }
.cpa-item-main span { color: var(--cpa-mute); font-size: 12.5px; }
.cpa-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cpa-item-side b { font-size: 14px; }
.cpa-item-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 1px solid var(--cpa-line); flex: 0 0 46px; }
.cpa-item-thumb.cpa-card-ph { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--cpa-primary); opacity: .8; background: #fff; }

.cpa-card-box { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.cpa-card-box-t { font-size: 14.5px; }
.cpa-card-box-actions { display: flex; gap: 8px; margin-top: 10px; }

.cpa-totals { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: 14px; padding: 6px 14px; }
.cpa-totals dt { float: left; clear: left; padding: 7px 0; color: var(--cpa-ink-2); font-size: 13.5px; }
.cpa-totals dd { float: right; text-align: right; padding: 7px 0; font-weight: 700; font-size: 13.5px; }
.cpa-totals::after { content: ""; display: block; clear: both; }
.cpa-totals-grand { font-weight: 800 !important; color: var(--cpa-primary) !important; font-size: 15px !important; }
.cpa-addr { white-space: normal; }

.cpa-timeline { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: 14px; padding: 10px 14px; }
.cpa-timeline li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--cpa-line); }
.cpa-timeline li:last-child { border-bottom: 0; }
.cpa-timeline li b { font-size: 13.5px; }
.cpa-timeline li span { color: var(--cpa-mute); font-size: 12.5px; }

.cpa-empty { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: var(--cpa-r); padding: 30px 16px; text-align: center; color: var(--cpa-mute); }
.cpa-empty-ico { font-size: 40px; display: block; margin-bottom: 10px; }
.cpa-empty .cpa-btn-primary { margin-top: 14px; }

.cpa-country-row { margin-top: 8px; }
.cpa-country-row .cpa-chip { text-decoration: none; }

/* ------------------------------------------------- unified CMS pages */
.cpa-doc { background: var(--cpa-card); border-radius: 0; }
.cpa-doc .cpa-page-title { margin-top: 6px; }
.cpa-cms-body {
  margin-top: 10px; font-size: 14.5px; color: var(--cpa-ink-2); line-height: 1.75;
  word-wrap: break-word; overflow-wrap: break-word;
}
.cpa-cms-body h1, .cpa-cms-body h2, .cpa-cms-body h3 { margin: 18px 0 8px; font-size: 16.5px; color: var(--cpa-ink); }
.cpa-cms-body p { margin: 0 0 12px; }
.cpa-cms-body ul, .cpa-cms-body ol { margin: 0 0 12px; padding-left: 20px; list-style: revert; }
.cpa-cms-body a { color: var(--cpa-primary); font-weight: 600; }
.cpa-cms-body img { border-radius: 10px; margin: 8px 0; }
.cpa-cms-body table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.cpa-cms-body td, .cpa-cms-body th { border: 1px solid var(--cpa-line-2); padding: 6px 8px; font-size: 13px; }

.cpa-about-intro { color: var(--cpa-ink-2); margin: 2px 0 6px; }
.cpa-about-intro b { color: var(--cpa-ink); }
.cpa-doc .cpa-copy { margin-top: 16px; }

/* ==========================================================================
   v1.2 — the product page has no header bar: the picture owns the top edge
   and the actions live in a fixed buy bar (shop · support · add · buy now),
   which replaces the tab bar on this one page instead of stacking on it.
   ========================================================================== */

/* head=none pages start at y=0 — no bar, no gap */
body.cpa-hmode-none .cpa-main { padding: 0 0 6px; }

.cpa-pd-full { padding: 0 0 20px; }
/* full-bleed gallery: no card border, no radius, square corners on the edge */
.cpa-pd-full .cpa-pd-gallery { border: 0; border-radius: 0; }
/* the page padding is gone, so the cards carry their own side gutters */
.cpa-pd-full .cpa-pd-buybox,
.cpa-pd-full .cpa-pd-desc,
.cpa-pd-full .cpa-pd-card { margin-left: 12px; margin-right: 12px; }
.cpa-pd-thumbs { padding: 0 12px; }
/* the discount badge moves to the right: top-left now belongs to the back button */
.cpa-pd-full .cpa-pd-off { left: auto; right: 10px; }

/* the one piece of chrome allowed up there: a round button on the picture */
.cpa-pd-floatback {
  position: absolute; top: 10px; left: 10px;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(17, 24, 39, .42); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.cpa-pd-floatback:active { background: rgba(17, 24, 39, .62); }
.cpa-pd-floatback svg {
  width: 21px; height: 21px; display: block;
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.cpa-pd-qty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.cpa-pd-qty-label { font-size: 13px; font-weight: 700; color: var(--cpa-ink-2); }
.cpa-pd-short { margin-top: 0; font-weight: 600; color: var(--cpa-ink-2); }

/* ---------------------------------------------------------- fixed buy bar */
.cpa-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9988;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px calc(8px + var(--cpa-safe-b));
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--cpa-line);
  box-shadow: 0 -3px 16px rgba(17, 24, 39, .08);
  -webkit-user-select: none; user-select: none;
}
.cpa-buybar-ico {
  flex: 0 0 auto; width: 48px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; line-height: 1.15; color: var(--cpa-ink-2);
  -webkit-tap-highlight-color: transparent;
}
.cpa-buybar-ico svg {
  width: 21px; height: 21px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.cpa-buybar-ico span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpa-buybar-ico:active { opacity: .6; }

.cpa-buybar-btn {
  flex: 1 1 0; min-width: 0; height: 46px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 13px;
  font-size: 14px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
  text-align: center; white-space: normal;
  -webkit-tap-highlight-color: transparent;
}
.cpa-buybar-add { background: #fff3ea; color: var(--cpa-primary); box-shadow: inset 0 0 0 1.5px #ffd8c0; }
.cpa-buybar-add:active { background: #ffe9da; }
.cpa-buybar-buy {
  flex: 1.2 1 0;
  background: linear-gradient(135deg, var(--cpa-primary), #ff6a2b);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 141, 79, .32);
}
.cpa-buybar-buy:active { filter: brightness(.94); }
.cpa-buybar-btn.is-disabled, .cpa-buybar-btn[disabled] { opacity: .5; pointer-events: none; }

/* keep the last card and the footer clear of the bar */
body.cpa-body.cpa-has-buybar { padding-bottom: calc(62px + var(--cpa-safe-b) + 10px) !important; }

/* desktop: same phone-width frame the header and the tab bar use */
@media (min-width: 992px) {
  .cpa-buybar {
    left: 50%; right: auto; width: 520px;
    transform: translateX(-50%);
    border-radius: 14px 14px 0 0;
  }
}

/* very narrow phones (320–360px): give the two buttons more room by
   shrinking the icon entries, and drop the button type a size so the labels
   stay on one line */
@media (max-width: 360px) {
  .cpa-buybar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .cpa-buybar-ico { width: 44px; }
  .cpa-buybar-ico svg { width: 19px; height: 19px; }
  .cpa-buybar-ico span { font-size: 9.5px; }
  .cpa-buybar-btn { font-size: 13px; padding: 0 5px; }
}

/* ==========================================================================
   v1.3 — reviews and recommendations on the product page.

   The data is PrestaShop's own (productcomments); these rules only dress it.
   Every class is prefixed `cpa-rv-` / `cpa-pd-rel` on purpose: a body-level
   class that happens to match an element class is how the category page once
   ended up laid out as a flex row (see .cpa-hmode-*).
   ========================================================================== */

.cpa-rv-stars { display: inline-flex; align-items: center; gap: 2px; }
.cpa-rv-stars svg {
  width: 14px; height: 14px; display: block;
  fill: #dcdfe6;                                   /* empty star */
}
.cpa-rv-stars svg.is-on { fill: #f6a623; }         /* filled star */
.cpa-rv-sum .cpa-rv-stars svg,
.cpa-rv-sum-none .cpa-rv-stars svg { width: 17px; height: 17px; }

/* ---- inline block on the product page ---- */
.cpa-rv-inline .cpa-sec-head { margin-bottom: 8px; }
.cpa-rv-sum {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0 10px;
  -webkit-tap-highlight-color: transparent;
}
.cpa-rv-avg {
  font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--cpa-ink);
}
.cpa-rv-sum-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cpa-rv-sum-n { font-size: 12.5px; color: var(--cpa-mute); }
.cpa-rv-sum-none { gap: 10px; }
.cpa-rv-sum-none .cpa-rv-sum-col b { font-size: 14.5px; }

.cpa-rv-item { padding: 11px 0; border-top: 1px solid var(--cpa-line); }
.cpa-rv-item-head { display: flex; align-items: center; gap: 9px; }
.cpa-rv-ava {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff3ea; color: var(--cpa-primary);
  font-size: 14px; font-weight: 800;
}
.cpa-rv-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cpa-rv-who b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpa-rv-date { font-size: 11.5px; color: var(--cpa-mute); }
.cpa-rv-title { margin-top: 7px; font-size: 13.5px; font-weight: 800; }
/* posters write on several lines — keep them, but never render raw markup */
.cpa-rv-body { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--cpa-ink-2); white-space: pre-line; }

.cpa-rv-all {
  display: block; padding: 10px 0 2px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--cpa-primary);
}
.cpa-rv-empty {
  display: flex; align-items: center; gap: 10px; padding: 2px 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.cpa-rv-empty-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cpa-rv-empty-txt b { font-size: 13.5px; }
.cpa-rv-empty-txt span { font-size: 12.5px; color: var(--cpa-mute); }
.cpa-rv-note { margin-top: 2px; font-size: 12px; color: var(--cpa-mute); }

/* ---- full reviews page ---- */
.cpa-rv-prod {
  display: flex; align-items: center; gap: 11px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r); padding: 10px 12px;
}
.cpa-rv-prod:active { background: #fafbfc; }
.cpa-rv-prod-img {
  flex: 0 0 52px; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--cpa-line); background: #fff;
}
.cpa-rv-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.cpa-rv-prod-img .cpa-card-ph { font-size: 22px; }
.cpa-rv-prod-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cpa-rv-prod-txt b {
  font-size: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpa-rv-prod-txt span { font-size: 12.5px; color: var(--cpa-mute); }

.cpa-rv-sum-card {
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r); padding: 12px 14px 14px; margin-top: 10px;
}
.cpa-rv-sum-card .cpa-rv-sum { padding: 0 0 2px; }
.cpa-rv-open { margin-top: 12px; }
.cpa-rv-more { margin-top: 14px; }

.cpa-rv-form {
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r); padding: 14px; margin-top: 10px;
}
.cpa-rv-form-t { font-size: 12.5px; font-weight: 800; color: var(--cpa-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.cpa-rv-crit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.cpa-rv-crit-name { font-size: 13.5px; font-weight: 700; color: var(--cpa-ink-2); }
.cpa-rv-pick { display: inline-flex; align-items: center; gap: 2px; }
.cpa-rv-pick-star {
  padding: 2px; border: 0; background: transparent;
  font-size: 26px; line-height: 1; color: #dcdfe6;
  -webkit-tap-highlight-color: transparent;
}
.cpa-rv-pick-star.is-on { color: #f6a623; }

.cpa-rv-in {
  display: block; width: 100%; margin-top: 12px; padding: 0 12px;
  height: 46px; border: 1.5px solid var(--cpa-line-2); border-radius: 12px;
  font-size: 14.5px; color: var(--cpa-ink); background: #fff; outline: none;
  font-family: inherit;
}
.cpa-rv-in:focus { border-color: var(--cpa-primary); }
.cpa-rv-area { height: auto; padding: 11px 12px; resize: vertical; line-height: 1.5; }
.cpa-rv-send { display: flex; width: 100%; margin-top: 14px; }
.cpa-rv-msg { margin-top: 10px; font-size: 13px; }
.cpa-rv-msg.is-err { color: #b91c1c; }
.cpa-rv-msg.is-ok { color: var(--cpa-ok); }

.cpa-rv-list { margin-top: 4px; }
.cpa-rv-list .cpa-rv-item:first-child { border-top: 0; }
.cpa-rv-list { background: var(--cpa-card); border: 1px solid var(--cpa-line); border-radius: var(--cpa-r); padding: 4px 14px 0; }

/* ---- recommendation rail on the product page ----
   The page has no side padding (the gallery is full-bleed), so this block
   brings its own gutter and lets the rail bleed off the right edge only. */
.cpa-pd-rel { margin: 18px 0 4px; padding-left: 12px; }
.cpa-pd-rel .cpa-sec-head { margin-bottom: 10px; padding-right: 12px; }
.cpa-pd-rel .cpa-rail { margin: 0; padding: 0 12px 2px 0; }

/* ==========================================================================
   v1.4.7 — feedback toasts.

   The buy bar used window.alert() for "could not add" and the cart stepper
   for "could not update". On a phone that is a blocking browser dialog: it
   stops the page, cannot be styled, and looks like the site is broken even
   when it is telling the truth. These rules dress a real message in the
   shop's own type and colour instead.

   The colour pairs are the .cpa-alert-* rules above, reused rather than
   re-declared, so alert and toast can never drift apart.
   ========================================================================== */
.cpa-toasts {
  position: fixed;
  left: 12px; right: 12px;
  /* clear of the fixed buy bar / tab bar underneath */
  bottom: calc(88px + var(--cpa-safe-b));
  z-index: 9990;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.cpa-toast {
  margin: 0;
  padding: 11px 14px;
  border-radius: 13px;
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .16);
  animation: cpa-toast-in .22s ease-out;
  transition: opacity .24s ease, transform .24s ease;
}
.cpa-toast.is-out { opacity: 0; transform: translateY(6px); }
@keyframes cpa-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cpa-toast { animation: none; }
}
/* on the desktop frame the app is a centred 520px column, so the toast
   column has to be the same width and centred with it */
@media (min-width: 768px) {
  .cpa-toasts {
    left: 50%; right: auto; width: 520px; transform: translateX(-50%);
  }
}

/* ==========================================================================
   v1.5.0 — favourites (the heart) and sharing (the sheet)

   Two affordances, one rule: neither may cost a tap that was not already
   there. The heart is a toggle and never opens a dialog; the share sheet
   reuses the app's existing bottom-sheet mechanism, so there is no second
   sheet to keep in sync.
   ========================================================================== */

/* ------------------------------------------------- heart on a product card */
.cpa-card-fav {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #94a3b8;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .15);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, background .16s ease;
}
.cpa-card-fav:active { transform: scale(.88); }
.cpa-card-fav.is-on { color: var(--cpa-hot); background: #fff; }
.cpa-card-fav.is-busy { opacity: .5; pointer-events: none; }

/* --------------------------------------- heart + share on the product photo */
.cpa-pd-acts {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
}
.cpa-pd-act {
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(17, 24, 39, .42); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.cpa-pd-act:active { transform: scale(.92); }
.cpa-pd-fav .cpa-pd-fav-on { display: none; }
.cpa-pd-fav.is-on { color: #fff; background: rgba(225, 29, 72, .88); }
.cpa-pd-fav.is-on .cpa-pd-fav-on { display: block; }
.cpa-pd-fav.is-on .cpa-pd-fav-off { display: none; }
.cpa-pd-fav.is-busy { opacity: .55; pointer-events: none; }

/* a saved heart gives one short, physical confirmation */
@keyframes cpa-fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.cpa-pd-fav.just-on, .cpa-card-fav.just-on { animation: cpa-fav-pop .34s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cpa-pd-fav.just-on, .cpa-card-fav.just-on { animation: none; }
}

/* ------------------------------------------------------ share sheet pieces */
.cpa-share-head { display: flex; align-items: flex-start; gap: 10px; }
.cpa-share-head-txt { flex: 1 1 auto; min-width: 0; }
.cpa-share-head-txt .cpa-sheet-note { margin-top: 2px; }
.cpa-share-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: #f1f3f7; color: #64748b;
  cursor: pointer;
}

.cpa-share-card {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 14px; padding: 8px;
  border: 1px solid var(--cpa-line); border-radius: 14px; background: #fafbfd;
}
.cpa-share-card img {
  flex: 0 0 52px; width: 52px; height: 52px;
  object-fit: cover; border-radius: 10px; background: #f1f3f7;
}
.cpa-share-card-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cpa-share-card-name {
  font-size: 12.5px; font-weight: 700; color: var(--cpa-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpa-share-card-url {
  font-size: 10.5px; color: var(--cpa-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cpa-share-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px;
  margin-bottom: 14px;
}
.cpa-share-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cpa-share-ico {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px; background: var(--c, #64748b);
  box-shadow: 0 3px 10px rgba(17, 24, 39, .14);
  transition: transform .16s ease;
}
.cpa-share-item:active .cpa-share-ico { transform: scale(.92); }
.cpa-share-txt {
  font-size: 10.5px; font-weight: 600; color: var(--cpa-ink-2);
  text-align: center; line-height: 1.25;
}

.cpa-share-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 12px; margin-bottom: 12px;
  border: 1px dashed var(--cpa-line-2); border-radius: 12px; background: #fafbfd;
}
.cpa-share-link-txt {
  flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--cpa-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpa-share-link-copy {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: 0; border-radius: 9px;
  background: var(--cpa-primary); color: #fff;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.cpa-share-link-copy svg { width: 14px; height: 14px; }

/* ------------------------------------------------------- favourites page */
.cpa-fav-lead { margin-top: 6px !important; font-size: 12.5px !important; line-height: 1.5; }
.cpa-fav .cpa-note { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cpa-fav .cpa-note strong { font-size: 13px; }
.cpa-fav .cpa-note span { font-size: 12px; line-height: 1.5; }
.cpa-fav .cpa-note .cpa-cta { align-self: flex-start; }
.cpa-menu-item[href*="controller=favorites"] .cpa-menu-val { margin-left: auto; margin-right: 8px; }

/* --------------------------------------------------- news & offers page */
/* Reached from the "Suscripción" entry in My account. The subscribe card is
   the only place in the app with a form that is expected to be TYPED into, so
   it gets a tinted plate of its own: it has to read as the primary action on
   the page even though the product grids below are the louder content. */
.cpa-news-hero {
  padding: 14px;
  border: 1px solid #ffe2cd;
  border-radius: var(--cpa-r);
  background: linear-gradient(150deg, #fff7f1 0%, #ffffff 64%);
}
.cpa-news-hero-top { display: flex; align-items: flex-start; gap: 11px; }
.cpa-news-hero-ico {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  border-radius: 12px; background: #fff; border: 1px solid #ffe2cd;
}
.cpa-news-hero-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpa-news-hero-txt b { font-size: 15.5px; letter-spacing: -.01em; color: var(--cpa-ink); }
.cpa-news-hero-txt span { font-size: 12.5px; line-height: 1.5; color: var(--cpa-ink-2); }
/* the result / state rows sit inside the tinted card, so only their spacing
   is adjusted — the red/green/blue coding of .cpa-alert-* must survive */
.cpa-news-hero > .cpa-alert { margin: 12px 0 0; }

.cpa-news-form {
  margin-top: 13px; padding-top: 13px;
  border-top: 1px dashed #ffe2cd;
}
.cpa-news-form .cpa-field { margin-bottom: 10px; }
.cpa-news-form .cpa-check { margin: 0 0 12px; }
.cpa-news-form .cpa-alert { margin: 0 0 12px; }
.cpa-news-note { margin-top: 9px; font-size: 11px; line-height: 1.55; color: var(--cpa-mute); }

.cpa-news-off {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  background: #fff; border: 1px dashed #ffd0ae; color: #9a3412;
  font-size: 12.5px; line-height: 1.5;
}
.cpa-news-done {
  display: flex; align-items: center; gap: 11px;
  margin-top: 13px; padding: 12px 13px; border-radius: 12px;
  background: #fff; border: 1px solid #bfe8d4;
}
.cpa-news-done-ico { font-size: 20px; line-height: 1; }
.cpa-news-done-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cpa-news-done-txt b { font-size: 14px; color: var(--cpa-ok); }
.cpa-news-done-txt span { font-size: 12px; color: var(--cpa-ink-2); word-break: break-all; }

.cpa-news > .cpa-chips { margin-top: 14px; }

.cpa-news-list { display: flex; flex-direction: column; gap: 10px; }
.cpa-news-item {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 34px 13px 13px;
  background: var(--cpa-card); border: 1px solid var(--cpa-line);
  border-radius: 14px;
}
.cpa-news-item:active { background: #fafbfd; }
.cpa-news-item-date {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cpa-primary);
}
.cpa-news-item-t { font-size: 14.5px; line-height: 1.35; color: var(--cpa-ink); }
.cpa-news-item-x { font-size: 12.5px; line-height: 1.5; color: var(--cpa-mute); }
.cpa-news-item-a {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: #cbd5e1; font-size: 19px; line-height: 1;
}

.cpa-news-foot {
  margin-top: 18px; text-align: center;
  font-size: 12.5px; color: var(--cpa-mute);
}
.cpa-news-foot a { color: var(--cpa-primary); font-weight: 700; }



/* =====================================================================
   v1.8.0 — home decoration: vertical banner carousel, category grid
   (2 x 4), theme grid (2 x 3). All slots are merchant-configured.
   ===================================================================== */
/* v2.6.3.06 — 首页装修三模块。比例 / 圆角 / 卡片宽度走 CSS 变量
   （--cpa-diy-*），由前台 window.cosptyDiY 注入（视觉预设）；风格预设
   通过 section class 切换（diy-style-* / diy-fx-*）。 */

/* ---- 首页大图 hero ---- */
.cpa-hbanner { margin: var(--cpa-diy-hb-mt, 0) 0 var(--cpa-diy-hb-mb, 0); border-radius: 0; overflow: hidden; position: relative; background: transparent; }
.cpa-hbanner-track { display: flex; gap: var(--cpa-diy-hb-gap, 12px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px var(--cpa-diy-hb-px, 0); perspective: 1100px; } /* 压缩顶部留白；左右留白默认 0（全出血） */
.cpa-hbanner-track::-webkit-scrollbar { display: none; }
.cpa-hbanner-item { flex: 0 0 64%; scroll-snap-align: center; display: block; aspect-ratio: var(--cpa-diy-hb-ar, 3 / 4); border-radius: 16px; overflow: hidden; background: #f6f6f6; transform-origin: center center; transition: transform .35s ease, opacity .35s ease; opacity: .5; will-change: transform; }
.cpa-hbanner-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpa-hbanner-fb { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 44px; }
.cpa-hbanner-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; gap: 5px; justify-content: center; pointer-events: none; z-index: 5; }
.cpa-hbanner-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.18); transition: all .3s; }
.cpa-hbanner-dots span.on { background: var(--cpa-brand, #FF8D4F); width: 16px; border-radius: 3px; }
/* hero 风格预设 */
.cpa-hbanner.diy-style-classic .cpa-hbanner-track { perspective: none; }
.cpa-hbanner.diy-style-classic .cpa-hbanner-item { flex: 0 0 90%; }
.cpa-hbanner.diy-style-flat .cpa-hbanner-item { opacity: 1; }
/* hero 特效预设 */
.cpa-hbanner.diy-fx-shadow .cpa-hbanner-item { box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.cpa-hbanner.diy-fx-glow .cpa-hbanner-item { box-shadow: 0 0 0 2px var(--cpa-brand, #FF8D4F), 0 10px 30px rgba(255,141,79,.28); }

/* ---- 分类 cat ---- */
.cpa-hcats { margin: var(--cpa-diy-cat-mt, 8px) 0 var(--cpa-diy-cat-mb, 8px); background: transparent; border-radius: 0; padding: 4px 0; } /* 留白可由后台微调 */
/* v2.6.8 — 分类改为 4 列宫格、卡片放大到 72px（移动端 1 行 4 个，8 个即 2 行） */
.cpa-hcats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; overflow: visible; padding: 2px var(--cpa-diy-cat-px, 0); }
.cpa-hcat { flex: initial; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; min-width: 0; scroll-snap-align: auto; }
.cpa-hcat-img { width: 72px; height: 72px; border-radius: var(--cpa-diy-cat-radius, 14px); overflow: hidden; background: #f6f6f6; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cpa-hcat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpa-hcat-name { font-size: 12.5px; color: #333; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 分类风格预设：2 行 / 3 行宫格（覆盖横向滑动），统一 4 列 */
.cpa-hcats--grid2 .cpa-hcats-grid,
.cpa-hcats--grid3 .cpa-hcats-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 14px 8px; padding: 4px var(--cpa-diy-cat-px, 0); }
.cpa-hcats--grid2 .cpa-hcat,
.cpa-hcats--grid3 .cpa-hcat { flex: initial; scroll-snap-align: auto; }
.cpa-hcats.diy-fx-shadow .cpa-hcat-img { box-shadow: 0 3px 10px rgba(0,0,0,.10); }

/* ---- Temas ---- */
.cpa-hthemes.cpa-car { display: block; margin: var(--cpa-diy-th-mt, 0) 0 var(--cpa-diy-th-mb, 0); }
.cpa-car-track.cpa-hthemes-track { display: flex; gap: var(--cpa-diy-th-gap, 12px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px var(--cpa-diy-th-px, 0); perspective: 1000px; } /* 左右留白默认 0（全出血） */
.cpa-car-track.cpa-hthemes-track::-webkit-scrollbar { display: none; }
.cpa-hthemes .cpa-htheme { flex: 0 0 var(--cpa-diy-th-basis, 52%); min-width: 0; scroll-snap-align: center; display: block; background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; transform-origin: center center; transition: transform .35s ease, opacity .35s ease; opacity: .55; will-change: transform; } /* 更大卡片 */
.cpa-htheme-img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: var(--cpa-diy-th-ar, 3 / 4); background: #f6f6f6; font-size: 30px; } /* 竖版 3:4 默认 */
.cpa-htheme-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpa-htheme-name { display: none; }
/* Temas 风格预设：宫格平铺 / 画布平铺 */
.cpa-hthemes.diy-style-grid .cpa-car-track { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; perspective: none; gap: 10px; padding: 10px 0; }
.cpa-hthemes.diy-style-grid .cpa-htheme { flex: none; opacity: 1; transform: none !important; }
.cpa-hthemes.diy-style-flat .cpa-car-track { perspective: none; padding: 8px 0; }
.cpa-hthemes.diy-style-flat .cpa-htheme { flex: 0 0 80%; opacity: 1; }

/* v2.6.7 — 首页三大板块全出血（full-bleed）：大图 / 分类 / Temas 左右强制贴边。
   负外边距抵消 .cpa-main 的 14px 内边距（--cpa-main-px，桌面端为 0），
   并清零轨道左右内边距。!important 确保即便后台曾录入过左右留白值也一律全出血，
   满足"完全不留白"。上下内边距保留，仅左右贴边。 */
.cpa-hbanner,
.cpa-hcats,
.cpa-hthemes.cpa-car {
  margin-left: calc(-1 * var(--cpa-main-px, 14px));
  margin-right: calc(-1 * var(--cpa-main-px, 14px));
}
.cpa-hbanner-track,
.cpa-hcats-grid,
.cpa-car-track.cpa-hthemes-track,
.cpa-hthemes.diy-style-grid .cpa-car-track,
.cpa-hthemes.diy-style-flat .cpa-car-track {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* v1.9.0 - endless home feed */
#cpa-feed-more { display: flex; justify-content: center; align-items: center; padding: 8px 0 20px; min-height: 38px; }
.cpa-feed-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #eee; border-top-color: var(--cpa-brand, #FF8D4F); animation: cpa-feed-rot .8s linear infinite; }
@keyframes cpa-feed-rot { to { transform: rotate(360deg); } }
.cpa-feed-end { color: #9a9a9a; font-size: 12.5px; }

/* ====================================================================
   v2.0.0 — campaign landing pages + card quick actions
   ==================================================================== */

/* --- card: selling point + add / buy buttons --- */
.cpa-card-point { font-size: 11px; font-weight: 700; margin-top: 5px; line-height: 1.35; }
.cpa-card-point.pt-off { color: #e0552b; }
.cpa-card-point.pt-info { color: #0f8a4d; }
.cpa-card-point.pt-out { color: #b45309; }
.cpa-card-point.pt-pin { color: #6c5ce7; }
.cpa-card-act { display: flex; gap: 6px; margin-top: 8px; }
.cpa-card-add, .cpa-card-buy {
  flex: 1; border: 0; border-radius: 9px; padding: 8px 4px;
  font-size: 12px; font-weight: 700; cursor: pointer; min-width: 0;
}
.cpa-card-add { background: #fff1e8; color: #d84c1e; }
.cpa-card-buy { background: linear-gradient(90deg, #ff6a3d, #ff8d4f); color: #fff; }
.cpa-card-add:active, .cpa-card-buy:active { opacity: .85; }
.cpa-card-add.is-off, .cpa-card-buy.is-off { opacity: .4; cursor: default; }
.cpa-card-add.is-done { background: #e8f6ee; color: #0f8a4d; }
.cpa-pin-badge {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  background: #6c5ce7; color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 6px; letter-spacing: .5px;
}
.cpa-card-add.is-busy, .cpa-card-buy.is-busy { opacity: .55; pointer-events: none; }

/* quick-action toast */
.cpa-qtoast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 10px);
  background: #1c2330; color: #fff; font-size: 13px; padding: 10px 20px;
  border-radius: 999px; opacity: 0; transition: .25s; z-index: 99999; pointer-events: none;
}
.cpa-qtoast.on { opacity: 1; transform: translate(-50%, 0); }
.cpa-qtoast.err { background: #c0392b; }

/* --- campaign landing page --- */
.cpa-camp-hero {
  position: relative; margin: 10px 12px 0; border-radius: 16px; overflow: hidden;
  min-height: 158px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px 16px 14px; color: #fff;
  background: linear-gradient(160deg, #3d1d63 0%, #7b2ff7 55%, #f7369b 100%);
}
.cpa-camp-hero.st-san-patricio, .cpa-camp-hero.st-verano { background: linear-gradient(160deg, #04463c, #0f9d58 55%, #7ed957); }
.cpa-camp-hero.st-navidad { background: linear-gradient(160deg, #143a1e, #1f7a33 55%, #c0392b); }
.cpa-camp-hero.st-san-valentin { background: linear-gradient(160deg, #5e0b24, #c9184a 55%, #ff758f); }
.cpa-camp-hero.st-blackfriday { background: linear-gradient(160deg, #0b0c10, #23262e 55%, #ffd60a); }
.cpa-camp-hero.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cpa-camp-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.cpa-camp-hero > * { position: relative; }
.cpa-camp-ribbon {
  position: absolute; top: 10px; left: 0;
  background: #ffd60a; color: #3d2600; font-size: 10px; font-weight: 800;
  letter-spacing: 1.2px; padding: 3px 12px 3px 10px; border-radius: 0 999px 999px 0;
}
.cpa-camp-cd {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.92); color: #b34700; font-weight: 800;
  border-radius: 8px; padding: 4px 9px; font-size: 11px;
}
.cpa-camp-emoji { position: absolute; right: 14px; bottom: 44px; font-size: 44px; opacity: .9; }
.cpa-camp-title { font-size: 22px; font-weight: 800; line-height: 1.15; }
.cpa-camp-sub { font-size: 12px; opacity: .92; margin-top: 3px; }
.cpa-camp-hero.st-done { min-height: 110px; }
.cpa-camp-hero.st-done::after {
  content: 'Finalizado'; position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 8px;
}

/* entry tiles (Cumpleaños / IP) */
.cpa-camp-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 12px; }
.cpa-camp-entry {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; text-decoration: none;
  padding: 10px 12px; color: #fff; background-size: cover; background-position: center;
}
.cpa-camp-entry:first-child { background-image: linear-gradient(150deg, #b34700, #ff8d4f); }
.cpa-camp-entry:last-child { background-image: linear-gradient(150deg, #4a2472, #9d5cff); }
.cpa-camp-entry::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30)); }
.cpa-camp-entry * { position: relative; z-index: 1; }
.cpa-camp-entry-emoji { font-size: 26px; margin-bottom: auto; }
.cpa-camp-entry-label { font-size: 12.5px; font-weight: 800; }
.cpa-camp-entry-go { font-size: 11px; opacity: .85; }

/* chips */
.cpa-camp-chips { display: flex; gap: 7px; padding: 10px 12px 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cpa-camp-chips a {
  flex: 0 0 auto; background: #fff; border: 1px solid #eee; border-radius: 999px;
  padding: 6px 13px; font-size: 12px; color: #444; text-decoration: none;
}
.cpa-camp-chips a.on { background: #ff6a3d; border-color: #ff6a3d; color: #fff; font-weight: 700; }

/* =========================== v2.1.0 - videos =========================== */

/* Discover top tabs: Vídeos (live) / Comunidad (grey, under construction) */
.cpa-dtabs {
  display: flex; gap: 6px; align-items: center;
  margin: 2px 0 12px;
}
.cpa-dtab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: #fff; border: 1px solid var(--cpa-line); color: var(--cpa-ink);
  text-decoration: none;
}
.cpa-dtab.is-dim {
  color: #a3a3ae; background: #f4f4f7; border-style: dashed; cursor: pointer;
}
.cpa-dtab.is-dim i {
  font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase;
  background: #e4e4ea; border-radius: 999px; padding: 2px 7px; color: #8d8d99;
}

/* ▶ badge on every product card whose product has a main video */
.cpa-vid-badge {
  position: absolute; right: 8px; bottom: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; padding-left: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
}

/* Product page: main video as the first slide */
.cpa-pd-video { display: none; position: relative; }
.cpa-pd-video.is-active { display: block; }
.cpa-pd-video video {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #000;
}
.cpa-pd-vmute {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(20,20,24,.44); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.cpa-pd-img.is-hidden { display: none; }
.cpa-pd-thumb-vid {
  display: flex; align-items: center; justify-content: center;
  background: #16161a; color: #fff; font-size: 15px;
}
.cpa-pd-thumb-vid-ico { padding-left: 2px; }

/* ======================================================================
   v2.2.0 - discover: one immersive surface, two tabs, Douyin-style rail
   ======================================================================

   The Discover page is no longer a scrolling catalogue: it opens straight
   into a full-bleed vertical video rail, with a pill tab bar floating on
   top of it. Switching to Comunidad does NOT navigate — both panels live
   in the same stage element and only their `is-on` class moves, so the URL
   and the document stay put.

   Colour: the rail is always dark (the video is the background); the
   community wall is light, on the app background.
   ===================================================================== */

/* ---------------------------------------------------------- the surface */
.cpa-disc {
  position: relative;
  margin: -12px -14px 0;
}
/* Discover runs with head=none, where .cpa-main already has no side padding —
   the negative margins above would then push 14px past the viewport on each
   side and give the page a horizontal scrollbar. Cancel them there. */
body.cpa-hmode-none .cpa-disc { margin: 0; }

/* pills, floating over whatever the current panel paints */
.cpa-dtabs {
  position: fixed;
  top: calc(var(--cpa-safe-t) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  display: flex;
  gap: 4px;
  padding: 3px;
  margin: 0;
  border-radius: 999px;
  background: rgba(20, 20, 24, .44);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.cpa-dtab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: background .18s ease, color .18s ease;
}
.cpa-dtab.is-on {
  background: rgba(255, 255, 255, .94);
  color: #16161a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.cpa-dtab:active { transform: scale(.96); }

/* the community tab is light, so its pills must flip to dark-on-light */
.cpa-disc.is-community .cpa-dtabs {
  background: #ffffff;
  border: 1px solid var(--cpa-line);
  box-shadow: 0 4px 16px rgba(17, 24, 39, .08);
}
.cpa-disc.is-community .cpa-dtab { color: var(--cpa-ink-2); }
.cpa-disc.is-community .cpa-dtab.is-on {
  background: var(--cpa-primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 141, 79, .35);
}

/* ------------------------------------------------------------- the stage
   Only one panel is ever display:block; the other is display:none, which
   also parks its videos (a display:none video cannot keep playing). */
.cpa-stage { position: relative; }
.cpa-panel { display: none; }
.cpa-panel.is-on { display: block; }
/* a dark rail over a light body would flash black behind the community wall
   while it is the visible panel — pin the backdrop to the active panel */
.cpa-disc.is-community .cpa-stage { background: var(--cpa-bg); }

/* ============================ panel 1: video rail ==================== */
.cpa-panel-videos { position: relative; }

.cpa-vf {
  /* the bottom bar is kept (Discover is its centre button), so the rail
     owns the viewport MINUS that bar: 100dvh alone would slide the caption
     and the action rail underneath it. */
  height: calc(100vh - var(--cpa-bar-h) - var(--cpa-safe-b));
  height: calc(100dvh - var(--cpa-bar-h) - var(--cpa-safe-b));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: #0b0b0e;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cpa-vf::-webkit-scrollbar { width: 0; height: 0; }

.cpa-vf-item {
  position: relative;
  height: calc(100vh - var(--cpa-bar-h) - var(--cpa-safe-b));
  height: calc(100dvh - var(--cpa-bar-h) - var(--cpa-safe-b));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #0b0b0e;
}
.cpa-vf-item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cpa-vf-item.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpa-vf-item.is-empty video { display: none; }

/* a soft scrim under the caption + rail so white text survives any frame */
.cpa-vf-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
}
.cpa-vf-item.is-empty::after { display: none; }

.cpa-vf-empty {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #cfcfd6;
  padding: 0 32px;
}
.cpa-vf-empty-ico { font-size: 44px; display: block; margin-bottom: 10px; }
.cpa-vf-empty p { font-size: 14.5px; margin-bottom: 14px; }
.cpa-vf-empty-btn {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--cpa-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.cpa-vf-playmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  z-index: 3;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cpa-vf-item.is-paused .cpa-vf-playmark { display: flex; }
.cpa-vf-playmark svg { width: 26px; height: 26px; margin-left: 3px; }

/* ---- right-hand action rail (抖音式) ---- */
.cpa-vrail {
  position: absolute;
  right: 8px;
  bottom: calc(24px + var(--cpa-safe-b));
  z-index: 4;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cpa-vrail-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  -webkit-user-select: none;
  user-select: none;
}
.cpa-vrail-avatar span { transform: translateY(-.5px); }

.cpa-vrail-btn {
  position: relative;
  width: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
  transition: transform .16s ease;
}
.cpa-vrail-btn svg {
  width: 33px;
  height: 33px;
  transition: color .18s ease, transform .18s ease;
}
.cpa-vrail-btn b {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
/* a zero counter is noise, and TikTok hides it too */
.cpa-vrail-btn b.is-zero { display: none; }
.cpa-vrail-btn:active { transform: scale(.9); }

/* the like heart turns red, the bookmark amber — the one place the app
   breaks its own palette, because the gesture is the point */
.cpa-vrail-btn[data-cpa-act="like"].is-on svg {
  color: #ff2d55;
  animation: cpa-pop .28s ease;
}
.cpa-vrail-btn[data-cpa-act="fav"].is-on svg { color: #ffc93c; }
.cpa-vrail-btn.is-busy { opacity: .55; }

@keyframes cpa-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* mini product card, the "shop this look" tile */
.cpa-vrail-prod {
  width: 60px;
  background: rgba(255, 255, 255, .96);
  border-radius: 12px;
  padding: 5px 5px 6px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.cpa-vrail-prod img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto;
}
.cpa-vrail-prod-name {
  display: block;
  font-size: 9.5px;
  color: #333;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpa-vrail-prod-price {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--cpa-hot);
}

.cpa-vf-mute {
  position: absolute;
  right: 12px;
  top: 62px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 24, .44);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cpa-vf-info {
  position: absolute;
  left: 14px;
  right: 78px;
  bottom: calc(30px + var(--cpa-safe-b));
  z-index: 3;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.cpa-vf-author { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.cpa-vf-title { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.cpa-vf-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cpa-vf-date { font-size: 11.5px; color: rgba(255, 255, 255, .55); }

.cpa-vf-sentinel { height: 2px; }

/* floating "publish" button — clear of the rail and of the bottom bar */
.cpa-vf-post {
  position: fixed;
  right: 12px;
  bottom: calc(var(--cpa-bar-h) + var(--cpa-safe-b) + 14px);
  z-index: 9991;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cpa-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.cpa-vf-post svg { width: 24px; height: 24px; }

/* ========================= panel 2: community wall =================== */
.cpa-panel-community {
  background: var(--cpa-bg);
  min-height: 100vh;
  padding-top: 62px; /* room for the floating tabs */
  padding-bottom: 18px;
}

.cpa-comm-head { padding: 4px 14px 10px; }
.cpa-comm-h1 { font-size: 21px; letter-spacing: -.02em; }
.cpa-comm-sub { font-size: 13px; color: var(--cpa-mute); margin-top: 3px; }
.cpa-comm-write {
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--cpa-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255, 141, 79, .3);
}
.cpa-comm-soon {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #ececf1;
  color: #8d8d99;
  font-size: 13px;
  font-weight: 600;
}

.cpa-comm-list { padding: 0 14px; }

.cpa-comm-empty {
  text-align: center;
  color: var(--cpa-mute);
  padding: 40px 20px;
}
.cpa-comm-empty span { font-size: 34px; display: block; margin-bottom: 8px; }
.cpa-comm-empty p { font-size: 14px; }

.cpa-comm-sentinel { height: 2px; }
.cpa-comm-more { padding-bottom: 16px; }

/* --------------------------------------------------------- post cards */
.cpa-post {
  background: var(--cpa-card);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .04);
}
.cpa-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.cpa-post-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  -webkit-user-select: none;
  user-select: none;
}
.cpa-post-meta { display: flex; flex-direction: column; min-width: 0; }
.cpa-post-author { font-size: 13.5px; font-weight: 700; }
.cpa-post-date { font-size: 11.5px; color: var(--cpa-mute); }
.cpa-post-tag {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cpa-ok);
  background: rgba(4, 120, 87, .1);
  border-radius: 999px;
  padding: 3px 9px;
}
.cpa-post-stars {
  color: #f5a623;
  font-size: 14px;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.cpa-post-stars-off { color: #e2e2e8; }
.cpa-post-text {
  font-size: 14px;
  color: var(--cpa-ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.cpa-post-media {
  width: 100%;
  border-radius: 12px;
  margin-top: 10px;
  background: #000;
}
.cpa-post-prod {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cpa-ink-2);
  background: var(--cpa-bg);
  border: 1px solid var(--cpa-line);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------------------------------------------------- comment drawer */
.cpa-cd-veil {
  position: fixed;
  inset: 0;
  z-index: 9993;
  background: rgba(10, 10, 14, .48);
  opacity: 0;
  transition: opacity .22s ease;
}
.cpa-cd-veil.is-on { opacity: 1; }

.cpa-cd {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9994;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
  transform: translateY(102%);
  transition: transform .24s cubic-bezier(.32, .72, .24, 1);
  padding-bottom: var(--cpa-safe-b);
}
.cpa-cd.is-on { transform: translateY(0); }

.cpa-cd-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 9px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--cpa-line);
}
.cpa-cd-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #e2e2e8;
}
.cpa-cd-close {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--cpa-mute);
  line-height: 1;
  padding: 4px 6px;
}

.cpa-cd-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px 4px;
  -webkit-overflow-scrolling: touch;
}
.cpa-cd-loading,
.cpa-cd-empty {
  text-align: center;
  color: var(--cpa-mute);
  font-size: 13.5px;
  padding: 26px 12px;
}
.cpa-cd-empty span { font-size: 30px; display: block; margin-bottom: 8px; }

.cpa-cd-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
}
.cpa-cd-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  -webkit-user-select: none;
  user-select: none;
}
.cpa-cd-body { min-width: 0; }
.cpa-cd-body b { font-size: 13px; font-weight: 700; }
.cpa-cd-body p {
  font-size: 13.5px;
  color: var(--cpa-ink-2);
  line-height: 1.5;
  word-break: break-word;
  margin: 2px 0 3px;
}
.cpa-cd-date { font-size: 11px; color: var(--cpa-mute); }

.cpa-cd-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--cpa-line);
  background: #fff;
}
.cpa-cd-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--cpa-line-2);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cpa-bg);
  color: var(--cpa-ink);
}
.cpa-cd-form input:focus {
  outline: none;
  border-color: var(--cpa-primary);
  background: #fff;
}
.cpa-cd-form button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  background: var(--cpa-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* --------------------------------------------------- legacy tail bits
   The old Discover page content now lives at the bottom of the community
   tab; it reuses .cpa-quick / .cpa-sec / .cpa-catgrid / .cpa-occ / .cpa-grid
   unchanged, and simply needs breathing room. */
.cpa-comm-more .cpa-quick { padding: 0 14px; margin-top: 18px; }
.cpa-comm-more .cpa-sec { padding: 0 14px; }

@media (min-width: 720px) {
  .cpa-disc { margin-left: auto; margin-right: auto; max-width: 560px; }
}