/* ═══════════════════════════════════════════════════════════════
   Print templates  (printTemplates.js)
   ───────────────────────────────────────────────────────────────
   The 4×6 flyers and 6.25×9 postcards from the Marketing materials
   designs. Every measurement is the Figma frame's own pixel times
   --u, the frame's pixel as a share of the container's width:
   flyers are drawn on a 1271 × 1871 frame, postcards on a 2775 × 1950
   one (both bleed included). The same rules therefore hold at any
   preview size and at print resolution.

   A postcard's vertical spacing is in --v, the frame's pixel as a share
   of the container's height, so a page of slightly different proportions
   (the 9 × 6.25 trim) shares the difference out through the layout the way
   the design spaces it, instead of collecting it in one gap.
   ═══════════════════════════════════════════════════════════════ */

/* Self-hosted so the printed artwork is set in the font it was designed
   in: dom-to-image embeds @font-face fonts into the capture, and a system
   fallback would reflow every headline. Variable font, 100–900. */
@font-face {
    font-family: 'SD Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'SD Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-italic.woff2') format('woff2');
}

.pt-wrap {
    container-type: inline-size;
    width: 100%;
    height: 100%;
}

/* Sized on both axes, for --v. Every box a postcard is drawn in has a set height. */
.pt-wrap--postcard { container-type: size; }

.pt.flyer-preview {
    --u: calc(100cqw / 1271);
    position: relative;
    height: 100%;
    font-family: 'SD Inter', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    /* Transparent: the page is the design's colour, all of it. A white sheet
       under a dark page showed through as a light rim wherever an edge fell
       between pixels — the rounded corners and the bottom of a scaled preview. */
    background: transparent;
    /* Its rounded corners as one clip of everything in it. Rounding with
       overflow + radius clips each layer on its own, so where a coloured band
       sits on a white page (a postcard's back) the white showed at the curve. */
    clip-path: inset(0 round 8px);
    border-radius: 0;   /* the clip-path rounds it; a radius too would round each layer again */
    text-align: left;
}

/* White unless the template colours the page (its own class or inline style win). */
:where(.pt-page) { background-color: #FFFFFF; }

/* --pt-bleed is set on a print capture (FlyerController._withOffscreenPreview):
   the page is the trim plus bleed, and the design is laid out on the trim
   inside it, so its margins are still there once the printer cuts the bleed
   off. Backgrounds and photos that meet an edge run on into the bleed. */
.pt.pt--postcard {
    --pt-b: var(--pt-bleed, 0px);
    --u: calc((100cqw - 2 * var(--pt-b)) / 2775);
    --v: calc((100cqh - 2 * var(--pt-b)) / 1950);
}

.pt--postcard .pt-page { padding: var(--pt-b); }

.pt-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.pt b { font-weight: 600; }

/* ─── Logo lock-up ─── */
.pt-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(31.6 * var(--u));
    height: calc(112 * var(--u));
    padding-left: calc(8.23 * var(--u));
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.pt-brand--start  { align-self: flex-start; }
.pt-brand--center { align-self: center; }

.pt-brand-mark {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: calc(94.77 * var(--u));
}

.pt-brand-logo {
    display: block;
    width: auto;
    height: 100%;
    max-width: calc(300 * var(--u));
    object-fit: contain;
    border-radius: calc(16 * var(--u));
}

svg.pt-brand-logo { width: calc(94.86 * var(--u)); border-radius: 0; }

.pt-brand-name {
    overflow: hidden;
    font-size: calc(55.28 * var(--u));
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ─── Shared text ─── */
.pt-headline {
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.pt-headline--offer  { font-size: calc(82 * var(--u)); line-height: 1.1; }
.pt-headline--center {
    align-self: center;
    width: calc(1118.48 * var(--u));
    font-size: calc(94 * var(--u));
    line-height: 1.2;
    text-align: center;
}

.pt-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: calc(108 * var(--u));
    padding: 0 calc(38.13 * var(--u));
    border-radius: calc(19.065 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: 1.4;
    color: #0A0A0A;
    white-space: nowrap;
}

.pt-terms { font-size: calc(28 * var(--u)); line-height: 1.5; white-space: nowrap; }

.pt-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: calc(136 * var(--u));
    margin: 0 calc(-72 * var(--u));
    padding: calc(40 * var(--u)) calc(72 * var(--u)) calc(48 * var(--u));
    text-align: center;
}

.pt-footer .pt-terms { font-size: calc(32 * var(--u)); }

/* ─── Photo ─── */
.pt-photo {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    background-size: cover !important;
    background-position: center !important;
}

.pt-photo .flyer-preview-photo-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* A photo wholly inside the page (Photo first, Offer first) is rounded like the QR box.
   Those that run to the page edge (--bleed, --side) stay square, so the trim isn't notched. */
.pt-photo--inset { overflow: hidden; border-radius: calc(20 * var(--u)); }

/* ─── QR ─── */
.pt .flyer-preview-qr-placeholder {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: #FFFFFF;
}

.pt .flyer-preview-qr-placeholder canvas,
.pt .flyer-preview-qr-placeholder img { border-radius: 0; }

/* No link yet (FlyerController._drawQRPlaceholder): the QR's white square, asking for the website. */
.pt .flyer-qr-empty,
.flyer-preview-qr-placeholder .flyer-qr-empty {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10%;
    border: calc(4 * var(--u, 1px)) dashed #D4D4D4;
    border-radius: calc(12 * var(--u, 1px));
    background: #FFFFFF;
    font-family: inherit;
    font-size: calc(28 * var(--u, 0.3px));
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: #737373;
    overflow: hidden;
}

/* A bare code on white, with the quiet zone a scanner needs. */
.pt-qr {
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(320 * var(--u));
    height: calc(320 * var(--u));
    padding: calc(16 * var(--u));
    /* Rounded as the postcard's QR is; the corners stay inside the quiet zone, so no module is cut. */
    border-radius: calc(20 * var(--u));
    background: #FFFFFF;
}

.pt-qr-card {
    position: absolute;
    right: calc(50.84 * var(--u));
    bottom: calc(33 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(3.18 * var(--u));
    padding: calc(19.065 * var(--u));
    border-radius: calc(19.065 * var(--u));
    background: #FFFFFF;
}

.pt-qr-card-label {
    font-size: calc(31.78 * var(--u));
    font-weight: 500;
    line-height: 1.4;
    color: #262626;
}

.pt-qr-card .flyer-preview-qr-placeholder {
    width: calc(305.04 * var(--u));
    height: calc(305.04 * var(--u));
}

/* ═══ Flyer: photo first (Figma 21675:249982) ═══ */
.pt-photo-top { padding: calc(63 * var(--u)) calc(72 * var(--u)) calc(96 * var(--u)); }
.pt-photo-top .pt-photo { margin-top: calc(60 * var(--u)); }
.pt-photo-top .pt-offer { margin-top: calc(96 * var(--u)); }
.pt-photo-top .pt-chip { width: calc(485 * var(--u)); }

.pt-offer {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    gap: calc(49 * var(--u));
}

.pt-offer-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(88 * var(--u));
    min-width: 0;
}

.pt-promo-details { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }

/* ═══ Flyer: offer first (Figma 21676:250007) ═══ */
.pt-photo-bottom { padding: calc(72 * var(--u)) calc(72 * var(--u)) 0; }
.pt-photo-bottom .pt-offer { margin-top: calc(98 * var(--u)); }
.pt-photo-bottom .pt-photo { margin-top: calc(110 * var(--u)); }
.pt-photo-bottom .pt-chip { width: calc(500 * var(--u)); }

/* ═══ Flyer: centred offer (Figma 21674:249742, 21676:250055) ═══ */
.pt-centered { padding: calc(100 * var(--u)) calc(72 * var(--u)) 0; }
.pt-centered .pt-headline { margin-top: calc(77 * var(--u)); }

.pt-chip--center {
    align-self: center;
    height: auto;
    margin-top: calc(77.5 * var(--u));
    padding: calc(38.13 * var(--u));
    font-size: calc(38.13 * var(--u));
}

.pt-message {
    align-self: center;
    width: calc(871 * var(--u));
    margin-top: calc(40 * var(--u));
    font-size: calc(44.485 * var(--u));
    line-height: calc(62.28 * var(--u));
    color: var(--pt-sub, #262626);
    text-align: center;
}

.pt-centered .pt-photo { margin: calc(105 * var(--u)) calc(-72 * var(--u)) 0; }
.pt-centered--message .pt-photo { margin-top: calc(121 * var(--u)); }
.pt-centered--message .pt-qr-card { right: calc(47.83 * var(--u)); bottom: calc(47.65 * var(--u)); }

.pt-centered .pt-footer { min-height: calc(148 * var(--u)); padding: calc(48 * var(--u)) calc(8 * var(--u)); }
.pt-centered .pt-footer .pt-terms { font-size: calc(34.95 * var(--u)); }
.pt-centered--message .pt-footer { min-height: calc(136 * var(--u)); padding: calc(40 * var(--u)) calc(72 * var(--u)) calc(48 * var(--u)); }
.pt-centered--message .pt-footer .pt-terms { font-size: calc(32 * var(--u)); }

/* ═══ Postcard front (Figma 21595:134547, 21643:135887) ═══ */
.pt-postcard-front { flex-direction: row; }
.pt-photo--side {
    flex: 0 0 calc(1109 * var(--u) + var(--pt-b));
    margin: calc(-1 * var(--pt-b)) 0 calc(-1 * var(--pt-b)) calc(-1 * var(--pt-b));
}

.pt-side {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding-top: calc(113 * var(--v));
}

.pt-side .pt-brand {
    height: calc(120 * var(--u));
    gap: calc(33.8 * var(--u));
    padding-left: calc(8.82 * var(--u));
}

.pt-side .pt-brand-mark { height: calc(101.54 * var(--u)); }
.pt-side svg.pt-brand-logo { width: calc(101.63 * var(--u)); }
.pt-side .pt-brand-name { font-size: calc(59.23 * var(--u)); }

.pt-side-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(1440 * var(--u));
    margin-top: calc(120 * var(--v));
}

.pt-headline--postcard {
    width: 100%;
    font-size: calc(136 * var(--u));
    line-height: 1.15;
    text-align: center;
}

.pt-sub {
    margin-top: calc(48 * var(--v));
    font-size: calc(48 * var(--u));
    line-height: 1.5;
    text-align: center;
    opacity: 0.9;
}

.pt-qr--postcard {
    width: calc(500 * var(--u));
    height: calc(500 * var(--u));
    margin-top: calc(136 * var(--v));
    padding: calc(23.6 * var(--u));
    border-radius: calc(27 * var(--u));
}

.pt-or-text {
    margin-top: calc(56 * var(--v));
    font-size: calc(40 * var(--u));
    font-weight: 500;
    line-height: 1.4;
    color: var(--pt-sub, #D4D4D4);
    text-align: center;
    white-space: nowrap;
}

.pt-or-text b { font-weight: 700; color: var(--pt-ink, #FFFFFF); }

.pt-fine {
    margin-top: auto;
    max-width: calc(1440 * var(--u));
    padding: calc(80 * var(--v)) 0 calc(84 * var(--v));
    font-size: calc(34 * var(--u));
    line-height: 1.5;
    text-align: center;
    opacity: 0.9;
}

/* Steps variant */
.pt-postcard-front--steps .pt-side-body { width: calc(1386 * var(--u)); margin-top: calc(162 * var(--v)); }
.pt-postcard-front--steps .pt-headline--postcard { font-size: calc(132 * var(--u)); }

.pt-steps-card {
    display: flex;
    align-items: center;
    gap: calc(56 * var(--u));
    box-sizing: border-box;
    width: 100%;
    height: calc(520 * var(--u));
    margin-top: calc(157 * var(--v));
    padding: calc(40 * var(--u));
    border-radius: calc(32 * var(--u));
    background: #FFFFFF;
    color: #0A0A0A;
}

.pt-steps-card .pt-steps-qr {
    flex-shrink: 0;
    width: calc(440 * var(--u));
    height: calc(440 * var(--u));
    padding: calc(20.8 * var(--u));
    box-sizing: border-box;
    border-radius: calc(27 * var(--u));
}

.pt-steps { position: relative; top: calc(-16 * var(--u)); display: flex; flex-direction: column; gap: calc(48 * var(--u)); min-width: 0; }
.pt-steps-title { margin-bottom: calc(-10 * var(--u)); font-size: calc(52 * var(--u)); font-weight: 600; line-height: 1.5; }

.pt-step {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
    font-size: calc(38 * var(--u));
    line-height: 1.4;
    color: #262626;
}

.pt-step-num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    border-radius: 50%;
    background: #0A0A0A;
    font-size: calc(32 * var(--u));
    font-weight: 600;
    color: #FFFFFF;
}

.pt-postcard-front--steps .pt-or-text { margin-top: calc(44 * var(--v)); font-size: calc(44 * var(--u)); }

/* ═══ Postcard back (Figma 22457:219067, the 4x6 back, in the 2775 × 1950
   frame's units) ═══
   The brand panel ends 726 of 1950 down the trim, above the mail house's
   ink-free area (PrintTemplates.inkFree): 1.49" down a 4×6, where Lob's
   2.375" tall area starts at 1.5", and 2.23" down a 6×9 (3.5"). */
/* The white is the mail area's, below the brand panel, not the page's: a white page
   under the panel showed at the preview's rounded top corners. A print file keeps the
   page white too, for the bleed around the mail area (its corners are square). */
.pt-postcard-back { background: transparent; }
.pt-postcard-back .pt-mail,
.flyer-print-capture .pt-postcard-back { background: #FFFFFF; }

.pt-back-brand {
    display: flex;
    flex: 0 0 calc(726 * var(--v) + var(--pt-b));
    flex-direction: column;
    box-sizing: border-box;
    margin: calc(-1 * var(--pt-b)) calc(-1 * var(--pt-b)) 0;
    padding: calc(113 * var(--v) + var(--pt-b)) calc(113 * var(--u) + var(--pt-b)) 0;
}

.pt-back-brand .pt-brand {
    height: calc(130 * var(--u));
    gap: calc(36.7 * var(--u));
    padding-left: calc(9.56 * var(--u));
}

.pt-back-brand .pt-brand-mark { height: calc(110 * var(--u)); }
.pt-back-brand svg.pt-brand-logo { width: calc(110.1 * var(--u)); }
.pt-back-brand .pt-brand-name { font-size: calc(64.17 * var(--u)); }

.pt-back-text { display: flex; flex-direction: column; gap: calc(32 * var(--u)); margin-top: calc(120 * var(--v)); }

.pt-website {
    overflow: hidden;
    font-size: calc(132 * var(--u));
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pt-tagline {
    display: flex;
    align-items: center;
    gap: calc(32 * var(--u));
    font-size: calc(56 * var(--u));
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0.9;
}

.pt-tagline-rule {
    flex-shrink: 0;
    width: calc(80 * var(--u));
    height: calc(5 * var(--u));
    background: var(--pt-rule, #6AEBBE);
}

/* The mailing panel, positioned as the Figma frame places it, from the bottom. */
.pt-mail { position: relative; flex: 1 1 0; color: #333333; }

/* The mail house's ink-free area; placed and sized inline (PrintTemplates.inkFree). */
.pt-mail-inkfree {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(120 * var(--u));
    border: calc(3.5 * var(--u)) dashed #CCCCCC;
    font-size: calc(44 * var(--u));
    font-style: italic;
    line-height: 1.4;
    color: #AAAAAA;
    text-align: center;
}

/* An EDDM card (Print to neighborhoods), as the mail house's 6.25×9 guide
   (EDDM-6.25x9) draws it, in the trim's units (2775 × 1950 for 9 × 6.25"):
   the ECRWSS box and the "Local Postal Customer" box in the top right of the
   safe area (0.25" inside the trim), from 7.10" across to its right edge. The
   ECRWSS box runs from the safe area's top to 0.92" with a rule on its left and
   bottom; the address box from 1.01" to 1.52" with rules on its left, top and
   bottom. All of the back is the design's colour (inline, so a print capture's
   white page doesn't override it), the boxes white on it; the brand panel only
   keeps its text clear of them. */
.pt-postcard-back--eddm { position: relative; }
.pt-postcard-back--eddm .pt-mail { background: transparent; }

.pt-postcard-back--eddm .pt-back-brand {
    align-self: flex-start;
    width: calc(2129 * var(--u) + var(--pt-b));
    margin: calc(-1 * var(--pt-b)) 0 0 calc(-1 * var(--pt-b));
}

.pt-eddm-indicia,
.pt-eddm-address {
    position: absolute;
    right: calc(77 * var(--u) + var(--pt-b));
    width: calc(509 * var(--u));
    box-sizing: border-box;
    border: 0 solid #000000;
    border-left-width: calc(5.7 * var(--u));
    background: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(39.5 * var(--u));
    font-weight: 700;
    line-height: 1.05;
    color: #000000;
}

.pt-eddm-indicia {
    top: calc(78 * var(--v) + var(--pt-b));
    height: calc(209 * var(--v));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(41 * var(--v));
    border-bottom-width: calc(5.7 * var(--u));
}

.pt-eddm-address {
    top: calc(315 * var(--v) + var(--pt-b));
    height: calc(159 * var(--v));
    display: flex;
    align-items: center;
    padding-left: calc(21 * var(--u));
    border-top-width: calc(5.7 * var(--u));
    border-bottom-width: calc(5.7 * var(--u));
}

/* ═══ Ticket designs, no photo (Figma 21990:9895, 22015:70887 flyers;
   21922:1319, 21975:8571 postcards) ═══ */
.pt-brand--lg { height: calc(120 * var(--u)); gap: calc(33.8 * var(--u)); padding-left: calc(8.82 * var(--u)); }
.pt-brand--lg .pt-brand-mark { height: calc(101.54 * var(--u)); }
.pt-brand--lg svg.pt-brand-logo { width: calc(101.63 * var(--u)); }
.pt-brand--lg .pt-brand-name { font-size: calc(59.23 * var(--u)); }

/* The ticket. --tk-page is the page colour (the notches), --tk-stub the stub's. */
.pt-ticket {
    position: relative;
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    background: #FFFFFF;
    color: #262626;
    text-align: center;
}

.pt-ticket-stub { display: flex; flex-direction: column; box-sizing: border-box; background: var(--tk-stub); }
.pt-ticket-title { font-weight: 700; letter-spacing: -0.02em; overflow-wrap: break-word; }
.pt-ticket-body { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; min-height: 0; }

.pt-ticket-qr {
    flex-shrink: 0;
    box-sizing: border-box;
    background: #FFFFFF;
    border-style: solid;
    border-color: #E3E4EB;
}

/* The tear line: dashes in the stub's colour, a notch in the page's colour at each end. */
.pt-ticket-tear { position: absolute; }
.pt-ticket-tear::before,
.pt-ticket-tear::after { content: ''; position: absolute; border-radius: 50%; background: var(--tk-page); }

.pt-tk-nocam { color: #515151; }
.pt-tk-nocam b,
.pt-tk-phone { font-weight: 600; color: #262626; }

/* On its side (flyer): stub left, tear line down, notches top and bottom. */
.pt-ticket--side {
    flex-direction: row;
    width: calc(1095 * var(--u));
    height: calc(604 * var(--u));
    border-radius: calc(32 * var(--u));
}

.pt-ticket--side .pt-ticket-stub {
    width: calc(434 * var(--u));
    padding: calc(188 * var(--u)) calc(56 * var(--u)) 0;
    border-radius: calc(32 * var(--u)) 0 0 calc(32 * var(--u));
    text-align: left;
}

.pt-ticket--side .pt-ticket-label { font-size: calc(36 * var(--u)); line-height: calc(50 * var(--u)); }
.pt-ticket--side .pt-ticket-title { margin-top: calc(8 * var(--u)); font-size: calc(63 * var(--u)); line-height: calc(73 * var(--u)); }

.pt-ticket--side .pt-ticket-tear {
    top: 0;
    bottom: 0;
    left: calc(434 * var(--u));
    width: calc(4 * var(--u));
    background: repeating-linear-gradient(to bottom, var(--tk-stub) 0 calc(12 * var(--u)), transparent calc(12 * var(--u)) calc(24 * var(--u)));
}

.pt-ticket--side .pt-ticket-tear::before,
.pt-ticket--side .pt-ticket-tear::after { left: calc(-33 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); }
.pt-ticket--side .pt-ticket-tear::before { top: calc(-35 * var(--u)); }
.pt-ticket--side .pt-ticket-tear::after  { bottom: calc(-35 * var(--u)); }

.pt-ticket--side .pt-ticket-qr {
    width: calc(340 * var(--u));
    height: calc(340 * var(--u));
    margin-top: calc(80 * var(--u));
    padding: calc(31 * var(--u));
    border-width: calc(6 * var(--u));
    border-radius: calc(20 * var(--u));
}

.pt-ticket--side .pt-ticket-msg { width: calc(501 * var(--u)); margin-top: calc(40 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(48 * var(--u)); }

/* Upright (postcard): stub on top, tear line across, notches left and right. */
.pt-ticket--upright {
    flex-direction: column;
    width: calc(962 * var(--u));
    height: calc(1383 * var(--u));
    max-height: 100%;
    border-radius: calc(40 * var(--u));
}

.pt-ticket--upright .pt-ticket-stub {
    flex-shrink: 0;
    justify-content: center;
    height: calc(272 * var(--u));
    border-radius: calc(40 * var(--u)) calc(40 * var(--u)) 0 0;
}

.pt-ticket--upright .pt-ticket-label { font-size: calc(40 * var(--u)); line-height: calc(56 * var(--u)); }
.pt-ticket--upright .pt-ticket-title { margin-top: calc(8 * var(--u)); font-size: calc(80 * var(--u)); line-height: calc(96 * var(--u)); }

.pt-ticket--upright .pt-ticket-tear {
    left: 0;
    right: 0;
    top: calc(272 * var(--u));
    height: calc(4 * var(--u));
    background: repeating-linear-gradient(to right, var(--tk-stub) 0 calc(12 * var(--u)), transparent calc(12 * var(--u)) calc(24 * var(--u)));
}

.pt-ticket--upright .pt-ticket-tear::before,
.pt-ticket--upright .pt-ticket-tear::after { top: calc(-38 * var(--u)); width: calc(79 * var(--u)); height: calc(79 * var(--u)); }
.pt-ticket--upright .pt-ticket-tear::before { left: calc(-40 * var(--u)); }
.pt-ticket--upright .pt-ticket-tear::after  { right: calc(-40 * var(--u)); }

.pt-ticket--upright .pt-ticket-body { justify-content: space-between; padding: calc(120 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); }

.pt-ticket--upright .pt-ticket-qr {
    width: calc(615 * var(--u));
    height: calc(615 * var(--u));
    padding: calc(62 * var(--u));
    border-width: calc(6 * var(--u));
    border-radius: calc(32 * var(--u));
}

.pt-ticket--upright .pt-ticket-msg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: calc(882 * var(--u));
    height: calc(216 * var(--u));
    border-radius: calc(24 * var(--u));
    background: #F4F4F8;
    font-size: calc(42 * var(--u));
    line-height: calc(64 * var(--u));
}

.pt-ticket--upright .pt-tk-phone { margin-top: calc(24 * var(--u)); font-size: calc(44 * var(--u)); font-weight: 700; }

.pt-tk-keyword {
    display: inline-block;
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    border-radius: calc(8 * var(--u));
    background: #A4F6D4;   /* drawn in the background's own tint (TICKET_KEYWORDS) */
    line-height: 1.2;
    color: #0A0A0A;
}

/* ═══ Flyer back (1271 × 1871): white, centred on the page at any trim ═══ */
.pt-flyer-back {
    align-items: center;
    justify-content: center;
    padding: 0 calc(120 * var(--u));
    background: #FFFFFF;
    color: #0A0A0A;
    text-align: center;
}

.pt-brand--back { max-width: 100%; }

.pt-flyer-back-rule {
    width: calc(800 * var(--u));
    max-width: 100%;
    height: calc(2.5 * var(--u));
    margin: calc(56 * var(--u)) 0 calc(48 * var(--u));
    background: #E5E5E5;
}

.pt-flyer-back-line {
    max-width: 100%;
    overflow: hidden;
    margin-top: calc(14 * var(--u));
    font-size: calc(36 * var(--u));
    line-height: 1.5;
    color: #6B6B6B;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pt-flyer-back-qr {
    box-sizing: border-box;
    width: calc(260 * var(--u));
    height: calc(260 * var(--u));
    margin-top: calc(70 * var(--u));
    padding: calc(30 * var(--u));
    border-radius: calc(20 * var(--u));
    background: #F5F5F7;
}

.pt-flyer-back-qr .flyer-preview-qr-placeholder { background: #F5F5F7; }

.pt-flyer-back-caption {
    margin-top: calc(48 * var(--u));
    font-size: calc(34 * var(--u));
    line-height: 1.4;
    color: #6B6B6B;
}

/* Flyer page (1271 × 1871). The legal line keeps to the foot of any page size. */
.pt-tk-flyer { align-items: center; padding: calc(100 * var(--u)) calc(88 * var(--u)) 0; text-align: center; }
.pt-tk-flyer-headline { width: 100%; margin-top: calc(165 * var(--u)); font-size: calc(100 * var(--u)); line-height: calc(120 * var(--u)); }
.pt-tk-flyer-body { width: 100%; margin-top: calc(36 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(60 * var(--u)); }
.pt-tk-flyer .pt-ticket { margin-top: calc(142 * var(--u)); }

.pt-tk-flyer-legal {
    width: 100%;
    margin-top: auto;
    padding: calc(40 * var(--u)) 0 calc(52 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(36 * var(--u));
}

.pt-tk-flyer-legal b,
.pt-tk-post-legal b { font-weight: 700; }

/* Postcard front (2775 × 1950): the offer in the left 1493, the ticket centred in the rest. */
.pt-tk-post { flex-direction: row; }

.pt-tk-post-main {
    display: flex;
    flex: 0 0 calc(1493 * var(--u));
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 0;
    padding: calc(120 * var(--v)) calc(120 * var(--u)) 0;
}

.pt-tk-badge {
    flex-shrink: 0;
    margin-top: calc(200 * var(--v));
    padding: calc(12 * var(--u)) calc(40 * var(--u));
    border-radius: calc(16 * var(--u));
    font-size: calc(48 * var(--u));
    font-weight: 500;
    line-height: calc(72 * var(--u));
    white-space: nowrap;
}

.pt-tk-post-headline { width: 100%; margin-top: calc(64 * var(--v)); font-size: calc(164 * var(--u)); line-height: calc(189 * var(--u)); }
.pt-tk-post-body { width: 100%; margin-top: calc(56 * var(--v)); font-size: calc(56 * var(--u)); line-height: calc(84 * var(--u)); }

.pt-tk-post-legal {
    width: 100%;
    margin-top: auto;
    padding: calc(40 * var(--v)) 0 calc(88 * var(--v));
    font-size: calc(32 * var(--u));
    line-height: calc(48 * var(--u));
}

.pt-tk-post-side { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; }

/* Guides are for the merchant, not the press. */
.flyer-print-capture .pt-guide { visibility: hidden; }
/* A "text WELCOME to" line still showing the sample number is a guide too. */
.pt-sample { opacity: 0.55; }
.flyer-print-capture .pt-nophone { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════
   Preview boxes and thumbnails for the two shapes. The flyers are
   400 × 589 at the 400px preview width (Figma 1271 × 1871); the
   postcards 400 × 281 (Figma 2775 × 1950). Mirrors the --discount rules
   in settings.v11.css.
   ═══════════════════════════════════════════════════════════════ */
.flyer-preview-box--tall     { height: 589px; }
.flyer-preview-box--postcard { height: 281px; }

.flyer-editor-preview-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.flyer-editor-preview-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--flyer-text-muted);
}

.flyer-design-thumb--tall .flyer-design-thumb-sheet     { height: 589px; }
.flyer-design-thumb--postcard .flyer-design-thumb-sheet { height: 281px; }

/* My designs card (220 × 200) and the template picker (180 tall): a
   postcard is shown whole, centred, instead of cropped to its top. */
.flyer-design-thumb--card.flyer-design-thumb--postcard .flyer-design-thumb-sheet {
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center;
}

.flyer-design-thumb--picker.flyer-design-thumb--postcard .flyer-design-thumb-sheet,
.pc-thumb--pick-template.flyer-design-thumb--postcard .flyer-design-thumb-sheet,
.pc-thumb--pick-design.flyer-design-thumb--postcard .flyer-design-thumb-sheet {
    top: 50%;
    transform: translate(-50%, -50%) scale(0.52);
    transform-origin: center;
}

/* Whole-design boxes: each exactly its design's scaled size, so nothing behind
   shows along an edge (a box a fraction of a pixel bigger left a faint line). */
.flyer-design-thumb--dialog.flyer-design-thumb--tall { width: calc(400px * 0.81494); }
.flyer-design-thumb--dialog.flyer-design-thumb--tall .flyer-design-thumb-sheet { transform: scale(0.81494); }
.flyer-design-thumb--dialog.flyer-design-thumb--postcard { width: 480px; height: 337px; }
.flyer-design-thumb--dialog.flyer-design-thumb--postcard .flyer-design-thumb-sheet { transform: scale(1.2); }

.flyer-design-thumb--saved.flyer-design-thumb--tall { width: 244px; }
.flyer-design-thumb--saved.flyer-design-thumb--tall .flyer-design-thumb-sheet { transform: scale(0.61121); }
.flyer-design-thumb--saved.flyer-design-thumb--postcard { width: 360px; height: calc(281px * 0.9); }
.flyer-design-thumb--saved.flyer-design-thumb--postcard .flyer-design-thumb-sheet { transform: scale(0.9); }

.pc-thumb--small.flyer-design-thumb--tall { width: calc(400px * 0.12224); }
.pc-thumb--small.flyer-design-thumb--tall .flyer-design-thumb-sheet { transform: translateX(-50%) scale(0.12224); }
.pc-thumb--small.flyer-design-thumb--postcard { width: 72px; height: calc(281px * 0.18); }
.pc-thumb--small.flyer-design-thumb--postcard .flyer-design-thumb-sheet { transform: translateX(-50%) scale(0.18); }

.pc-thumb--preview.flyer-design-thumb--tall { width: calc(400px * 0.74703); }
.pc-thumb--preview.flyer-design-thumb--tall .flyer-design-thumb-sheet { transform: translateX(-50%) scale(0.74703); }
.pc-thumb--preview.flyer-design-thumb--postcard { width: 360px; height: calc(281px * 0.9); }
.pc-thumb--preview.flyer-design-thumb--postcard .flyer-design-thumb-sheet { transform: translateX(-50%) scale(0.9); }
/* Front above back, so the pair fits the pane at laptop heights. */
.pc-preview-stack--sides { gap: 20px; }
.pc-preview-stack--sides .pc-thumb--preview { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05); }

.pc-thumb--pick-design.flyer-design-thumb--tall .flyer-design-thumb-sheet { transform: translateX(-50%) scale(0.3056); }

/* A section heading inside the editor's field list ("Back of the postcard"). */
.flyer-editor-field-heading {
    margin: 8px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--flyer-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--flyer-text);
}