/* Poster rendering. Everything is sized in --u (1% of poster width) so all formats scale together. */
.poster {
  --u: 12.4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  font-family: var(--cardFont), 'Be Vietnam Pro', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.poster * { box-sizing: border-box; }

.p-pattern { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-repeat: repeat; }
.p-pattern.fade-top { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%); }
.p-pattern.fade-bottom { -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.5) 35%, transparent 70%); mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.5) 35%, transparent 70%); }
.p-pattern.fade-edges { -webkit-mask-image: radial-gradient(ellipse at center, transparent 35%, #000 85%); mask-image: radial-gradient(ellipse at center, transparent 35%, #000 85%); }

.p-layer { position: absolute; inset: 0; pointer-events: none; }
.p-layer.back { z-index: 1; }
.p-layer.front { z-index: 4; }
.p-header, .p-panel, .p-footer { z-index: 3; }
.p-bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; pointer-events: none; }
.p-hero { position: absolute; z-index: 2; }
.p-hero img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; display: block; pointer-events: none; -webkit-user-drag: none; }

/* Header */
.p-header { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.p-logo {
  position: absolute; top: 0; left: calc(var(--u) * 4.6);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.2) calc(var(--u) * 1.2);
  display: flex; align-items: center; gap: calc(var(--u) * 1.1);
}
.p-logo.badge { background: #fff; border-radius: 0 0 calc(var(--u) * 1.8) calc(var(--u) * 1.8); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * 1.2) rgba(0,0,0,.08); }
.p-logo.right { left: auto; right: calc(var(--u) * 4.6); }
.p-logo.center { left: 50%; transform: translateX(-50%); }
.p-logo img { height: calc(var(--u) * 5.4); width: auto; display: block; }
.p-logo img.lg-icon { height: calc(var(--u) * 4.4); }
.lg-text { display: flex; flex-direction: column; line-height: 1; }
.lg-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: calc(var(--u) * 2.75); color: #3d9150; letter-spacing: .03em; }
.lg-tag { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: calc(var(--u) * 1.02); color: #3d9150; margin-top: calc(var(--u) * .45); letter-spacing: .01em; }
.p-logo:not(.badge) .lg-name, .p-logo:not(.badge) .lg-tag { color: var(--headBg); }

.p-headline { position: absolute; display: flex; align-items: center; }
.p-headline.al-left { justify-content: flex-start; }
.p-headline.al-center { justify-content: center; }
.p-headline.al-right { justify-content: flex-end; }
.hl { position: relative; display: inline-flex; flex-direction: column; align-items: center; color: var(--headInk); font-family: var(--headFont), sans-serif; font-weight: 800; text-transform: uppercase; line-height: .98; transform-origin: center; }
.hl > span { position: relative; display: block; white-space: nowrap; letter-spacing: -.01em; }
.hl-l1 { font-size: calc(var(--hs) * .56); }
.hl-l2 { font-size: var(--hs); line-height: .92 !important; }
.hl-l3 { font-size: calc(var(--hs) * .3); letter-spacing: .02em !important; margin-top: calc(var(--hs) * .08); font-weight: 700; }
.hl > span { text-shadow: 0 calc(var(--u) * .18) calc(var(--u) * .5) rgba(0,0,0,.16); }
.hl-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--u) * .3) calc(var(--u) * .6) rgba(0,0,0,.12)); }
.hl-bg path { stroke: none; } /* the editor's global svg{stroke} must not outline the brush */
.hl-frame { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.hl.hs-brush, .hl.hs-frame { padding: calc(var(--hs) * .36) calc(var(--hs) * .56) calc(var(--hs) * .4); }
.hl.hs-pill { padding: calc(var(--hs) * .28) calc(var(--hs) * .48) calc(var(--hs) * .32); background: var(--headBg); border-radius: calc(var(--hs) * .32); box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0,0,0,.12); }
.hl.hs-tag { padding: calc(var(--hs) * .26) calc(var(--hs) * .46) calc(var(--hs) * .3); background: var(--headBg); border-radius: calc(var(--hs) * .1); box-shadow: calc(var(--u) * .9) calc(var(--u) * .9) 0 rgba(0,0,0,.18); }
.hl.hs-ribbon { padding: calc(var(--hs) * .26) calc(var(--hs) * .9) calc(var(--hs) * .3); background: var(--headBg);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--hs) * .42) 50%, 100% 100%, 0 100%, calc(var(--hs) * .42) 50%); }
.hl.hs-stamp { padding: calc(var(--hs) * .34) calc(var(--hs) * .5) calc(var(--hs) * .38); background: var(--headBg); border-radius: calc(var(--hs) * .16);
  outline: calc(var(--hs) * .045) dashed var(--headInk); outline-offset: calc(var(--hs) * -.17); box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0,0,0,.14); }
.hl.hs-split { gap: calc(var(--hs) * .08); }
.hl.hs-split > span { background: var(--headBg); padding: calc(var(--hs) * .03) calc(var(--hs) * .22) calc(var(--hs) * .05); border-radius: calc(var(--hs) * .1); margin: 0 !important; box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0,0,0,.14); }
.hl.hs-split > .hl-l1 { background: var(--headInk); color: var(--headBg); text-shadow: none; transform: rotate(-2deg); }
.hl.hs-split > .hl-l3 { background: var(--accent); color: #fff; transform: rotate(1.5deg); }
.hl.hs-outline { color: var(--headInk); }
.hl.hs-outline > span { -webkit-text-stroke: .075em var(--headBg); paint-order: stroke fill;
  text-shadow: 0 .03em 0 var(--headBg), 0 .06em 0 var(--headBg), 0 .09em 0 var(--headBg), 0 .12em 0 var(--headBg), 0 .16em .06em rgba(0,0,0,.28); }
.hl.hs-stack { padding: calc(var(--hs) * .26) calc(var(--hs) * .5) calc(var(--hs) * .5); background: var(--headBg); border-radius: calc(var(--hs) * .28); box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0,0,0,.14); margin-bottom: calc(var(--hs) * .3); }
.hl.hs-stack > .hl-l3 { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 55%); margin: 0; background: var(--head2); color: #fff; padding: .22em .9em .26em; border-radius: 999px; box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0,0,0,.18); }
.hl.hs-marker { color: var(--headBg); }
.hl.hs-marker > span { text-shadow: none; padding: 0 calc(var(--hs) * .08);
  background: linear-gradient(transparent 56%, var(--headInk) 56%, var(--headInk) 88%, transparent 88%); }
.hl.hs-none { color: var(--headBg); }
.hl.hs-none > span { text-shadow: 0 calc(var(--u) * .25) 0 rgba(255,255,255,.55); }

/* Product panel */
.p-panel { position: absolute; left: calc(var(--u) * 3.6); right: calc(var(--u) * 3.6); background: var(--panel); border-radius: calc(var(--u) * 2.2); pointer-events: none; }
.p-grid { position: absolute; inset: calc(var(--u) * 1.3); }
.p-empty { position: absolute; inset: 0; display: grid; place-items: center; border: calc(var(--u) * .25) dashed rgba(0,0,0,.18); border-radius: calc(var(--u) * 1.6); color: rgba(0,0,0,.4); font-size: calc(var(--u) * 2.4); font-weight: 700; text-align: center; padding: 4%; }

.card {
  position: absolute; background: var(--card); border-radius: var(--cr); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 calc(var(--u) * .12) calc(var(--u) * .5) rgba(0,0,0,.07);
}
.c-top { flex: none; padding: .72em .78em 0; display: flow-root; }
.c-tab {
  float: right; margin: -.72em -.78em .25em .45em; padding: .5em .66em .55em 1.05em;
  background: var(--accent); color: #fff; text-align: right; line-height: 1.05;
  border-bottom-left-radius: 2.1em 2.5em; min-width: 3.8em;
}
.c-price { font-weight: 800; font-size: 1.16em; white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.c-price small { font-size: .62em; margin-left: .08em; font-weight: 700; }
.c-unit { font-size: .6em; font-weight: 700; margin-top: .3em; letter-spacing: .04em; opacity: .95; white-space: nowrap; }
.card.tab-pill .c-tab { margin: -.35em -.4em .3em .45em; border-radius: 999px; padding: .4em .75em .42em; min-width: 0; box-shadow: 0 .15em .4em rgba(0,0,0,.12); }
.card.tab-pill .c-unit { margin-top: .18em; }
.card.tab-flag .c-tab { margin: -.72em .1em .3em .45em; border-radius: 0; padding: .55em .55em 1em; min-width: 3.4em; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.card.tab-circle .c-tab { width: 4.3em; height: 4.3em; margin: -.35em -.35em .2em .35em; border-radius: 50%; padding: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 .15em .45em rgba(0,0,0,.15); }
.card.tab-circle .c-price { font-size: .98em; }
.card.tab-circle .c-unit { margin-top: .12em; font-size: .52em; }
.c-bar { flex: none; display: flex; align-items: baseline; justify-content: center; gap: .3em; background: var(--accent); color: #fff; padding: .38em .6em .42em; }
.c-bar .c-price { font-size: 1.2em; }
.c-bar .c-unit { margin: 0; font-size: .62em; }
.c-name { font-weight: 700; color: var(--ink); line-height: 1.17; letter-spacing: -.005em; }
.c-sub { font-size: .56em; color: #6b7280; margin-top: .32em; line-height: 1.25; font-weight: 500; }
.c-img { flex: 1; min-height: 0; padding: .35em .7em .65em; }
.c-img img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.c-img .noimg { width: 100%; height: 100%; display: grid; place-items: center; color: #c0c4bb; font-size: .7em; border: .1em dashed #dfe2da; border-radius: .5em; }

/* Footer */
.p-footer.in-panel { z-index: 4; }
.p-footer { --fk: 1; position: absolute; left: calc(var(--u) * 3.6); right: calc(var(--u) * 3.6); display: flex; align-items: center; gap: calc(var(--u) * 3);
  font-family: 'Be Vietnam Pro', sans-serif; font-size: calc(var(--u) * 2.25 * var(--fk)); pointer-events: none; overflow: hidden; }
.p-footer.fa-center { justify-content: center; }
.p-footer.fa-left { justify-content: flex-start; }
.p-footer.fa-between { justify-content: space-between; }
.p-footer.note-below { flex-direction: column; justify-content: center; gap: calc(var(--u) * .7); }
.p-footer.note-below.fa-left { align-items: flex-start; }
.f-row { display: flex; gap: calc(var(--u) * 1.4); height: var(--row); align-items: stretch; flex: none; max-width: 100%; }
.p-footer.fa-between:not(.note-below) .f-row { flex: 1; }
.p-footer.fa-between .f-group { flex: 1; justify-content: space-around; }
.f-group, .f-chip { display: flex; align-items: center; gap: calc(var(--u) * 3.6 * var(--fk)); background: var(--footBg); color: var(--footInk); padding: 0 calc(var(--u) * 3) 0 calc(var(--u) * .9); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.f-chip { padding-right: calc(var(--u) * 2.4); }
.shape-round .f-group, .shape-round .f-chip { border-radius: 999px; }
.shape-soft .f-group, .shape-soft .f-chip { border-radius: calc(var(--u) * 1.6); }
.shape-square .f-group, .shape-square .f-chip { border-radius: 0; }
.fs-card .f-group { padding: 0 calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * 1.2) rgba(0,0,0,.14); }
.fs-card.shape-round .f-group { border-radius: calc(var(--u) * 2.4); }
.fs-plain .f-group { background: none; color: var(--footBg); padding: 0; }
.fs-plain .f-ico { background: var(--footBg); color: var(--footInk); }
.fs-bar { left: 0; right: 0; background: var(--footBg); padding: 0 calc(var(--u) * 4.6); }
.fs-bar .f-group { background: none; padding: 0; }
.fs-bar .f-note { color: var(--footInk); opacity: .9; }
.f-item { display: flex; align-items: center; gap: calc(var(--u) * 1.1); white-space: nowrap; }
.f-ico { width: calc(var(--u) * 4.2 * var(--fk)); height: calc(var(--u) * 4.2 * var(--fk)); border-radius: 50%; background: var(--footInk); color: var(--footBg); display: grid; place-items: center; flex: none; }
.f-ico svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-ico svg.fill { fill: currentColor; stroke: none; }
.f-txt { display: flex; flex-direction: column; line-height: 1.08; }
.f-txt small { font-size: .52em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .82; margin-bottom: .12em; }
.f-txt b { font-weight: 700; }
.f-note { font-size: .84em; font-weight: 700; color: var(--note); white-space: nowrap; }

/* Stickers */
.stk { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
.stk img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.stk.txt { white-space: pre; line-height: 1.04; padding: .22em .5em .26em; border-radius: .32em; text-align: center; text-transform: uppercase; }
.export .stk { cursor: default; }

/* Editing affordances (removed while exporting / in thumbnails) */
.poster.editing [data-section] { pointer-events: auto; cursor: pointer; }
.poster.editing [data-section]:hover { outline: calc(2px * var(--inv, 1)) dashed rgba(47, 143, 70, .75); outline-offset: calc(3px * var(--inv, 1)); }
.poster.editing .sec-on { outline: calc(2.5px * var(--inv, 1)) solid #2f8f46 !important; outline-offset: calc(3px * var(--inv, 1)); }
.poster.editing .p-panel .card { pointer-events: auto; }
.poster.editing .card.item-on { outline: calc(3px * var(--inv, 1)) solid #2f8f46; outline-offset: calc(2px * var(--inv, 1)); }
.poster.editing .p-hero.sec-on { cursor: move; }