/* Polish layer for all skinned product pages (loaded last). Guided by the ui-ux-pro-max checklist:
   no left-title/right-content splits that waste width, consistent inner padding, readable contrast
   (muted text >= slate-600 equivalent), 44px touch targets, cursor-pointer on interactive cards. */

/* ---------- 1. One consistent spacing scale ---------- */
body:has(.pp-hero[class*="skin-"]) main {
    --pl-pad-card: 24px; --pl-pad-panel: clamp(24px, 3vw, 36px); --pl-gap: 16px; --pl-radius: 20px;
    --pl-text: color-mix(in srgb, var(--pd) 92%, #000); --pl-muted: color-mix(in srgb, var(--pd) 72%, #fff);
}
body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap > .sv-intro { margin-bottom: 0; }
body:has(.pp-hero[class*="skin-"]) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc-card, .pp-plans > *, .pp-result, .sv-why-card, .sv-tech-group, .sv-tl-card) { padding: var(--pl-pad-card) !important; border-radius: var(--pl-radius) !important; }
body:has(.pp-hero[class*="skin-"]) main :is(.pp-tile, .pp-opts li, .pp-svc-card, .sv-why-card, .pp-plans > *) { cursor: default; }
body:has(.pp-hero[class*="skin-"]) main :is(.pp-tile p, .pp-opts span, .pp-svc-card p, .sv-why-card p, .sv-tl-card p, .pp-steps p, .pp-roles-copy p, .pp-panel p, .sv-intro) { color: var(--pl-muted) !important; line-height: 1.6; }

/* ---------- 2. No wasted split layouts: titles on top, content full width ---------- */
/* FAQ: always a centred, readable single column (or the card grid variant). */
@media (min-width: 900px) {
    body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap.narrow:has(.sv-faq) { display: block !important; max-width: 920px; }
    body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap.narrow:has(.sv-faq) > :not(.sv-faq) { text-align: center !important; margin-inline: auto !important; }
    body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap.narrow:has(.sv-faq) .sv-title::before { margin-inline: auto !important; }
    body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap.narrow:has(.sv-faq) > .sv-faq { margin-top: 28px !important; }
    body:has(.pp-hero:is(.theme-zest, .theme-ride, .theme-jobs)) main .sv-sec > .wrap.narrow:has(.sv-faq) { max-width: 1100px; }
}
/* Story skin: chapter label stays, but the heading sits above full-width content. */
@media (min-width: 1000px) {
    body:has(.skin-story) main .sv-sec > .wrap { display: block !important; }
    body:has(.skin-story) main .sv-sec > .wrap > * { grid-column: auto !important; grid-row: auto !important; }
    body:has(.skin-story) main .sv-sec > .wrap > .sv-title { max-width: 28ch; }
    body:has(.skin-story) main .sv-sec > .wrap > .sv-intro { max-width: 62ch; margin-bottom: 28px; }
    body:has(.skin-story) main .sv-sec > .wrap :is(.pp-opts, .pp-bento) { grid-template-columns: revert !important; }
    body:has(.skin-story) main .pp-steps { display: grid !important; grid-template-columns: repeat(var(--n), minmax(0, 1fr)) !important; }
}
/* Numbered list and tracker headings: centred block instead of a narrow side column. */
body:has(.pp-hero[class*="skin-"]) main .pp-numlist { display: block !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-numlist-head { text-align: center; max-width: 720px; margin: 0 auto 28px !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-numlist-head .sv-title { margin-inline: auto !important; text-align: center !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-numlist-head .sv-title::before { margin-inline: auto !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-numlist ol { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--pl-gap) !important; padding: 0; }
body:has(.pp-hero[class*="skin-"]) main .pp-numlist ol:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { body:has(.pp-hero[class*="skin-"]) main .pp-numlist ol { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { body:has(.pp-hero[class*="skin-"]) main .pp-numlist ol { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- 3. Feature bento: no half-empty giant tile ---------- */
body:has(.pp-hero[class*="skin-"]) main .pp-bento { grid-auto-rows: minmax(170px, auto) !important; gap: var(--pl-gap) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big { grid-row: span 1 !important; display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-content: center; }
body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big .pp-fig { grid-row: 1 / span 3; align-self: center; font-size: clamp(2.2rem, 3.6vw, 3rem) !important; line-height: 1; margin: 0 !important; padding-right: 20px; border-right: 1px solid color-mix(in srgb, var(--pa) 25%, transparent); }
body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big :is(h3, p, .pp-tile-ic) { grid-column: 2; margin-top: 0; }
body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big .pp-tile-ic { margin-bottom: 10px; }
@media (max-width: 640px) { body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big { grid-template-columns: 1fr; } body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big .pp-fig { grid-row: auto; border: 0; padding: 0 0 8px; } body:has(.pp-hero[class*="skin-"]) main .pp-tile.size-big :is(h3, p, .pp-tile-ic) { grid-column: 1; } }

/* ---------- 4. Roles: phone + a solid feature panel that fills the width ---------- */
body:has(.pp-hero[class*="skin-"]) main .pp-roles-box { padding: var(--pl-pad-panel) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-tabs { margin-bottom: 28px !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-tabs button { min-height: 44px; cursor: pointer; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-panel { grid-template-columns: 260px minmax(0, 1fr) !important; gap: 40px !important; max-width: none !important; align-items: center; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-copy h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; color: var(--pl-text) !important; margin-bottom: 6px !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-copy .pp-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 18px; padding: 0; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-copy .pp-checks li { padding: 14px 14px 14px 44px !important; border-radius: 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--pa) 16%, rgba(0,0,0,.06)); color: var(--pl-text) !important; font-weight: 600; font-size: .92rem; position: relative; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-copy .pp-checks li::before { content: "✓" !important; position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--pa) !important; color: var(--pi) !important; font: 700 .65rem/1 system-ui, sans-serif; }
@media (max-width: 900px) { body:has(.pp-hero[class*="skin-"]) main .pp-roles-panel { grid-template-columns: minmax(0, 1fr) !important; } body:has(.pp-hero[class*="skin-"]) main .pp-roles-panel .pp-phone { display: none; } }
@media (max-width: 560px) { body:has(.pp-hero[class*="skin-"]) main .pp-roles-copy .pp-checks { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- 5. Dual panels: tighter padding, no oversized decorative blobs ---------- */
body:has(.pp-hero[class*="skin-"]) main .pp-dual { gap: var(--pl-gap) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel { padding: var(--pl-pad-panel) !important; display: flex; flex-direction: column; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel::after { width: 120px !important; height: 120px !important; opacity: .5; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; color: var(--pl-text) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel :is(.sv-btn, .pp-btn, a[class*="btn"]):last-child { margin-top: auto; align-self: flex-start; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel ul { margin: 14px 0 22px; }

/* ---------- 6. Section rhythm and readable widths ---------- */
body:has(.pp-hero[class*="skin-"]) main .sv-sec .sv-intro { max-width: 62ch; }
body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap > .sv-title + .sv-intro + * , body:has(.pp-hero[class*="skin-"]) main .sv-sec > .wrap > .sv-title + :not(.sv-intro) { margin-top: 28px !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-credits { padding-block: 18px !important; }

/* ---------- 7. Interaction & accessibility ---------- */
body:has(.pp-hero[class*="skin-"]) main :is(button, [role="tab"], summary, .mo-arc-card) { cursor: pointer; }
body:has(.pp-hero[class*="skin-"]) main :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--pa) 75%, #000); outline-offset: 3px; border-radius: 10px; }
body:has(.pp-hero[class*="skin-"]) main .sv-faq summary { min-height: 44px; display: flex; align-items: center; }
body:has(.pp-hero[class*="skin-"]) main .pp-roles-tabs { margin-inline: auto !important; width: fit-content; }
body:has(.pp-hero[class*="skin-"]) main .pp-bento { grid-auto-flow: row dense !important; }
.mo-arc-on .sv-ttabs-nav, .mo-arc-on .sv-ftabs-panel { display: none !important; }
body:has(.pp-hero[class*="skin-"]) main .mo-arc-on :is(.sv-ttabs-nav, .sv-ftabs-panel) { display: none !important; }
/* Bento without holes: flexible rows that always fill the width */
body:has(.pp-hero[class*="skin-"]) main .pp-bento { display: flex !important; flex-wrap: wrap; gap: var(--pl-gap) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-bento > .pp-tile { flex: 1 1 250px; min-height: 170px; }
body:has(.pp-hero[class*="skin-"]) main .pp-bento > .pp-tile.size-big { flex: 2 1 520px; }
body:has(.pp-hero[class*="skin-"]) main .pp-bento > .pp-tile.size-wide { flex: 2 1 420px; }

/* ---------- 8. Neutral, professional page backgrounds ----------
   Page and section backgrounds stay white / soft grey on every product page.
   Theme colours are used only for highlights: buttons, chips, icons, active states,
   CTA panels and feature cards. */
body:has(.pp-hero[class*="skin-"]) { background: #fff !important; }
body:has(.pp-hero[class*="skin-"]) main { --pl-bg: #ffffff; --pl-bg-alt: #f7f8fa; --pl-line: #e7e9ee; background: var(--pl-bg) !important; background-image: none !important; }
body:has(.pp-hero[class*="skin-"]) main > .sv-wrap,
body:has(.pp-hero[class*="skin-"]) main > .sv-wrap > section:not(.pp-hero):not(.pp-cta-sec) { background: var(--pl-bg) !important; background-image: none !important; }
body:has(.pp-hero[class*="skin-"]) main > .sv-wrap:nth-of-type(even) > section:not(.pp-hero):not(.pp-cta-sec) { background: var(--pl-bg-alt) !important; }
body:has(.pp-hero[class*="skin-"]) main > .sv-wrap + .sv-wrap > section:not(.pp-hero)::after { background: var(--pl-line) !important; width: 100% !important; opacity: 1; }
body:has(.pp-hero[class*="skin-"]) main .style-dark { background: var(--pl-bg) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-cta-sec { background: transparent !important; }

/* Hero: clean white with one soft accent glow (photo heroes keep their photo). */
.pp-hero[class*="skin-"]:not(.lay-photo):not(.lay-map) { background: radial-gradient(700px 420px at 85% 20%, color-mix(in srgb, var(--pa) 9%, transparent), transparent 70%), #fff !important; animation: none !important; }
.pp-hero[class*="skin-"].lay-map { background-color: #f7f8fa !important; animation: none !important; }
.pp-hero[class*="skin-"]:not(.lay-photo)::before { opacity: .5; }

/* Cards on neutral backgrounds: white surfaces with a hairline border. */
body:has(.pp-hero[class*="skin-"]) main :is(.pp-tile:not(.size-big), .pp-opts li, .sv-why-card, .sv-tech-group, .sv-tl-card, .pp-svc-card, .pp-plans > *, .pp-roles-box, .pp-panel, .sv-faq details, .sv-form, .pp-steps li, .pp-numlist li) { border-color: var(--pl-line) !important; }
body:has(.pp-hero[class*="skin-"]) main > .sv-wrap:nth-of-type(even) :is(.pp-tile:not(.size-big), .sv-why-card, .sv-tech-group, .sv-tl-card, .pp-svc-card, .pp-roles-box, .pp-panel, .sv-faq details) { background: #fff !important; }

/* Marquee band: neutral strip, accent only on the separators. */
body:has(.pp-hero[class*="skin-"]) .at-marquee { background: #fff !important; color: #1f2430 !important; border-block: 1px solid var(--pl-line) !important; }
body:has(.pp-hero[class*="skin-"]) .at-marquee span:nth-of-type(even) { color: #8a909c !important; }
body:has(.pp-hero[class*="skin-"]) .at-marquee i { color: var(--pa) !important; }

/* Light hero: dark, readable text on every layout except photo heroes */
.pp-hero[class*="skin-"]:not(.lay-photo) { color: #141821 !important; }
.pp-hero[class*="skin-"]:not(.lay-photo) :is(h1, .pp-stats strong) { color: #141821 !important; -webkit-text-fill-color: #141821 !important; }
.pp-hero[class*="skin-"]:not(.lay-photo) :is(.pp-lead, .pp-stats span, .pp-trending, .pp-trending span) { color: #4b5160 !important; }
.pp-hero[class*="skin-"]:not(.lay-photo) .pp-eyebrow { color: color-mix(in srgb, var(--pa) 70%, #000) !important; }
.pp-hero[class*="skin-"]:not(.lay-photo) .pp-btn-ghost { color: #141821 !important; background: #fff !important; border: 1px solid #e2e5ea !important; }
.pp-hero[class*="skin-"]:not(.lay-photo) .pp-trending span { background: #fff; border: 1px solid #e2e5ea; }
/* Job cards in the JobMela hero were built for a dark background */
.pp-hero[class*="skin-"] .pp-jobcard { background: #fff !important; border: 1px solid #e2e5ea !important; box-shadow: 0 14px 30px -20px rgba(20,24,33,.35); }
.pp-hero[class*="skin-"] .pp-jobcard :is(b, strong, span, small, em:not([class])) { color: #141821 !important; }
.pp-hero[class*="skin-"] .pp-jobcard small { color: #5b6170 !important; }

/* Dual panels: both light, the first one highlighted with the accent (no dark slab) */
body:has(.pp-hero[class*="skin-"]) main .pp-panel { background: #fff !important; color: #141821 !important; border: 1px solid var(--pl-line) !important; box-shadow: 0 18px 40px -32px rgba(20,24,33,.35) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel:first-child { border-color: color-mix(in srgb, var(--pa) 45%, var(--pl-line)) !important; box-shadow: inset 0 4px 0 var(--pa), 0 18px 40px -30px color-mix(in srgb, var(--pa) 45%, transparent) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel :is(h3, li, b, strong) { color: #141821 !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel :is(p, li) { color: #4b5160 !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel .pp-panel-eyebrow { color: color-mix(in srgb, var(--pa) 72%, #000) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel a:not([class*="btn"]) { color: color-mix(in srgb, var(--pa) 72%, #000) !important; }
/* Accent cards keep light text */
body:has(.skin-atelier) main .pp-opts.style-tickets li :is(span, b) { color: #f4f7f2 !important; }
body:has(.skin-atelier) main .pp-opts.style-tickets li span { opacity: .82; }
/* Step phase labels: darker for contrast */
body:has(.pp-hero[class*="skin-"]) main .pp-steps span { color: color-mix(in srgb, var(--pa) 55%, #000) !important; }
body:has(.pp-hero:is(.theme-headx, .theme-jobs, .theme-print)) main .pp-steps li:hover span { color: var(--pi) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel > a:last-of-type { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--pa) !important; color: var(--pi) !important; font-weight: 600; text-decoration: none; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel:not(:first-child) > a:last-of-type { background: #141821 !important; color: #fff !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-panel .pp-panel-eyebrow { color: color-mix(in srgb, var(--pa) 50%, #000) !important; }
body:has(.skin-story) main .pp-steps span { color: var(--pi) !important; }
body:has(.skin-story) main .pp-steps span { background: #141821 !important; color: #fff !important; }

/* ---------- 9. Hero collage: real photo + floating product mock-up ---------- */
.pp-hero:has(> .pp-hero-collage) { position: relative; overflow: hidden; }
.pp-hero-collage { position: absolute; z-index: 0; margin: 0; top: clamp(28px, 4vw, 48px); bottom: clamp(28px, 4vw, 48px);
    right: max(16px, calc((100vw - 1180px) / 2)); width: min(36%, 470px); border-radius: 28px; overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(20, 24, 33, .45); }
.pp-hero-collage img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); animation: heroKen 18s ease-in-out infinite alternate; }
.pp-hero-collage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 45%, rgba(20,24,33,.35)); }
.pp-hero-collage figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
    border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); color: #141821; font: 600 .8rem/1.2 system-ui, sans-serif; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); }
.pp-hero-collage figcaption i { width: 8px; height: 8px; border-radius: 50%; background: var(--pa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa) 25%, transparent); }
@keyframes heroKen { to { transform: scale(1.12) translate(-1.5%, -1.5%); } }
/* The mock-up floats over the photo's left edge */
.pp-hero:has(> .pp-hero-collage) .pp-hero-grid { position: relative; z-index: 1; }
.pp-hero:has(> .pp-hero-collage) .pp-hero-grid > :not(.pp-hero-copy) { position: relative; z-index: 2; transform: translateX(-14%) scale(.9); transform-origin: 70% 50%; filter: drop-shadow(0 30px 40px rgba(20,24,33,.28)); }
.pp-hero:has(> .pp-hero-collage) .pp-phone-wrap::before { opacity: 0 !important; }
@media (max-width: 900px) {
    .pp-hero-collage { position: relative; inset: auto; width: auto; height: 260px; margin: 0 16px 24px; order: 2; }
    .pp-hero:has(> .pp-hero-collage) { display: flex; flex-direction: column-reverse; }
    .pp-hero:has(> .pp-hero-collage) .pp-hero-grid > :not(.pp-hero-copy) { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-hero-collage img { animation: none; } }

/* Designed key visuals: keep their full composition (no cropping of the designed text) */
body:has(.pp-hero[class*="skin-"]) main .sv-why img[src*="/products/designed/"] { aspect-ratio: 7 / 5; height: auto !important; max-height: none !important; object-fit: cover; scale: 1 !important; translate: none !important; border-radius: 24px; }
body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; align-items: center; }
body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) { display: flex !important; flex-direction: column; gap: 22px; }
body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) > :not(.sv-why-list) { width: 100%; max-width: 1060px; margin: 0 auto; }
body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) img { width: 100%; box-shadow: 0 40px 80px -45px rgba(20,24,33,.55); }
body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) .sv-why-list { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body:has(.pp-hero[class*="skin-"]) main .sv-why-card { padding-top: 54px !important; }
@media (max-width: 900px) { body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) .sv-why-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { body:has(.pp-hero[class*="skin-"]) main .sv-why:has(img[src*="/products/designed/"]) .sv-why-list { grid-template-columns: minmax(0, 1fr) !important; } }
body:has(.pp-hero[class*="skin-"]) main .sv-why-list > .sv-why-card.sv-why-card { padding-top: 56px !important; }

/* ===== Print on Demand audit fixes (apply to every skinned product page) ===== */
/* 1. Showcase slider (tabs + browser panel) must not inherit the app-showcase two-column grid */
body:has(.pp-hero[class*="skin-"]) main .pp-show:not([data-showcase]) { display: block !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-show:not([data-showcase]) .pp-show-tabs:not(:has(button + button)) { display: none !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-show-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; gap: 40px !important; padding: var(--pl-pad-panel) !important; border-radius: 24px; background: #fff !important; border: 1px solid var(--pl-line); }
body:has(.pp-hero[class*="skin-"]) main .pp-show-panel .pp-show-img { width: 100%; }
body:has(.pp-hero[class*="skin-"]) main .pp-show-copy dl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { body:has(.pp-hero[class*="skin-"]) main .pp-show-panel { grid-template-columns: minmax(0, 1fr) !important; } }

/* 2. Option cards: balanced rows (never a lone card) */
body:has(.pp-hero[class*="skin-"]) main .pp-opts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--pl-gap) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(6):last-child),
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(3):last-child),
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(5):last-child),
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-opts:has(> li:nth-child(7):last-child) > li:last-child { grid-column: span 2; }
body:has(.pp-hero[class*="skin-"]) main .pp-opts li b { word-break: normal; overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 900px) { body:has(.pp-hero[class*="skin-"]) main .pp-opts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.pp-hero[class*="skin-"]) main .pp-opts > li:last-child { grid-column: auto; } }

/* 3. Headings truly centred over their intro (Story skin keeps its left-aligned chapters) */
body:has(.pp-hero[class*="skin-"]:not(.skin-story)) main .sv-sec > .wrap > .sv-title,
body:has(.pp-hero[class*="skin-"]:not(.skin-story)) main .sv-sec > .wrap > .sv-intro { margin-inline: auto !important; text-align: center !important; }
body:has(.pp-hero[class*="skin-"]:not(.skin-story)) main .sv-sec .sv-title::before { margin-inline: auto !important; text-align: center; }

/* 5. Badges sit inside the card corner, never clipped */
body:has(.pp-hero[class*="skin-"]) main :is(.pp-opts li, .pp-svc-card) > em { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; transform: none !important; z-index: 2; white-space: nowrap; }

/* 6. Support timeline: a 4-step row instead of a zig-zag that wastes half the width */
@media (min-width: 900px) {
    body:has(.pp-hero[class*="skin-"]) main .sv-timeline { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pl-gap); padding-top: 34px; }
    body:has(.pp-hero[class*="skin-"]) main .sv-timeline::before { left: 4% !important; right: 4% !important; top: 18px !important; bottom: auto !important; width: auto !important; height: 3px !important; transform: none !important; }
    body:has(.pp-hero[class*="skin-"]) main .sv-timeline li { width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; position: relative; }
    body:has(.pp-hero[class*="skin-"]) main .sv-timeline li .sv-tl-dot { position: absolute !important; left: 20px !important; right: auto !important; top: -34px !important; }
    body:has(.pp-hero[class*="skin-"]) main .sv-timeline .sv-tl-card { height: 100%; margin-top: 18px; }
}

/* 7. Large hero widgets: shrink and shift so the collage photo stays visible */
.pp-hero:is(.lay-printshop, .lay-plots, .lay-form):has(> .pp-hero-collage) .pp-hero-grid > :not(.pp-hero-copy) { transform: translateX(-26%) scale(.78) !important; }
.pp-hero:is(.lay-printshop, .lay-plots, .lay-form) > .pp-hero-collage { width: min(40%, 520px); }
@media (max-width: 900px) { .pp-hero:is(.lay-printshop, .lay-plots, .lay-form):has(> .pp-hero-collage) .pp-hero-grid > :not(.pp-hero-copy) { transform: none !important; } }

/* 8. One card frame everywhere: hairline border, no thick white frame */
body:has(.skin-gallery) main :is(.pp-tile, .pp-opts li, .pp-roles-box, .pp-tracker, .pp-numlist li, .pp-steps li, .pp-case, .sv-form, .pp-svc-card, .pp-plans > *, .pp-col, .pp-panel, .pp-result, .pp-listing, .pp-show, .sv-tech-group, .sv-why-card, .sv-tl-card) { border: 1px solid var(--pl-line) !important; outline: 0 !important; }
body:has(.pp-hero[class*="skin-"]) main .sv-tech-group { overflow: hidden; }
body:has(.pp-hero[class*="skin-"]) main .sv-tech-group::before { left: 0; right: 0; border-radius: 0; }

/* 10. Minimum readable sizes */
body:has(.pp-hero[class*="skin-"]) main :is(.pp-eyebrow, .pp-show-label, .pp-credits, .pp-credits *, .sv-form small, .sv-form .form-status) { font-size: max(13px, 1em) !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-eyebrow { font-size: 13px !important; }
body:has(.pp-hero[class*="skin-"]) main .pp-credits { font-size: 13px !important; }

/* 11. Comfortable tap targets */
body:has(.pp-hero[class*="skin-"]) main .pp-credits a { display: inline-flex; align-items: center; min-height: 44px; }
body:has(.pp-hero[class*="skin-"]) main .pp-show-tabs button { min-height: 44px; }

body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo .sv-icard2 { overflow: hidden; transition: transform .3s, box-shadow .3s; }
body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo .sv-icard2 img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo .sv-icard2:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(20,24,33,.45); }
body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo .sv-icard2:hover img { transform: scale(1.06); }
@media (max-width: 640px) { body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo .sv-icard2 h3 { font-size: 15px !important; } body:has(.pp-hero[class*="skin-"]) main .sv-icards.style-photo .sv-icard2 p { font-size: 13px !important; } }

.pp-hero.lay-printshop .pp-hero-grid > :not(.pp-hero-copy) { transform: none !important; filter: none !important; }
.pp-hero.lay-printshop .pp-hero-grid > .p3.tilt-on:hover { transform: none !important; }

/* ---- Food delivery (Zesteat) page fixes ---- */
/* No "01, 02…" number pills above section titles. */
body:has(.theme-zest) main .sv-sec .sv-title::before { content: none !important; display: none !important; }
/* Bento: small tiles were cramped; the tiny app screenshot fought with the title and the body text was hard to read on the photo. */
body:has(.theme-zest) main .pp-pb-card:not(.size-big) { min-height: 320px; }
body:has(.theme-zest) main .pp-pb-card:not(.size-big) .pp-pb-shot { display: none !important; }
body:has(.theme-zest) main .pp-pb-card:not(.size-big) .pp-pb-copy { padding: 22px !important; background: linear-gradient(to top, rgba(18,10,6,.9) 0%, rgba(18,10,6,.7) 45%, rgba(18,10,6,0) 85%); }
body:has(.theme-zest) main .pp-pb-card:not(.size-big) .pp-pb-photo { opacity: 1 !important; filter: none !important; }
body:has(.theme-zest) main .pp-pb-card .pp-pb-eyebrow { background: rgba(255,255,255,.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.3) !important; }
body:has(.theme-zest) main .pp-pb-card .pp-pb-copy p { color: rgba(255,255,255,.86) !important; opacity: 1 !important; }
/* Live Proof: back app screens slid out over the text panel. */
body:has(.theme-zest) main .pp-show-media { overflow: hidden !important; border-radius: 24px; }
body:has(.theme-zest) main .pp-show .pp-eyebrow { display: block; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; line-height: 1.5; }

/* ---- Why-choose live module switcher (photo backdrop + real tabs) ---- */
main .sv-why:has(.why-mods) { display: flex !important; flex-direction: column; gap: 22px; }
.why-mods { position: relative; isolation: isolate; width: 100%; max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 28px; overflow: hidden; color: #fff; box-shadow: 0 40px 80px -45px rgba(20,24,33,.55); }
.why-mods-bg { position: absolute; inset: 0; z-index: -2; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; border-radius: 0 !important; }
.why-mods::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(28,14,6,.88) 0%, rgba(28,14,6,.6) 50%, rgba(28,14,6,.15) 100%); }
.why-mods-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 .8rem var(--sv-font); letter-spacing: .04em; color: rgba(255,255,255,.85); }
.why-mods-kicker b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--pa); color: #fff; font-size: .78rem; }
.why-mods-copy h3 { margin: 0 0 22px; font: 800 clamp(1.6rem, 3.2vw, 2.5rem)/1.08 var(--sv-font); letter-spacing: -.02em; color: #fff !important; }
.why-mods-tabs { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.why-mods-tabs button { min-height: 40px; padding: 8px 14px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.88); font: 600 .86rem var(--sv-font); cursor: pointer; transition: background .2s, color .2s; }
.why-mods-tabs button:hover { background: rgba(255,255,255,.14); color: #fff; }
.why-mods-tabs button[aria-selected="true"] { background: #fff; color: #1d120b; }
.why-mods-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.why-mods-card { grid-column: 2; grid-row: 1; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.96); color: #1d120b; box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); animation: whyIn .35s ease both; }
.why-mods-eyebrow { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font: 700 .7rem var(--sv-font); letter-spacing: .12em; text-transform: uppercase; color: #6b625c; }
.why-mods-eyebrow span { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pa) 12%, #fff); color: var(--pa); letter-spacing: 0; text-transform: none; }
.why-mods-card h4 { margin: 0 0 14px; font: 800 1.35rem var(--sv-font); color: #1d120b; }
.why-mods-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.why-mods-card li { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px 10px 40px; border-radius: 12px; background: #faf7f5; font: 600 .9rem var(--sv-font); }
.why-mods-card li::before { content: "\2713"; position: absolute; left: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pa); color: #fff; font: 700 .65rem/1 system-ui, sans-serif; }
.why-mods-card li em { font: 600 .68rem var(--sv-font); font-style: normal; color: #1f7a45; background: #e7f6ec; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.why-mods-foot { display: flex; justify-content: space-between; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eee5df; font-size: .78rem; color: #6b625c; }
.why-mods-foot b { color: #1d120b; }
@keyframes whyIn { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 820px) {
  .why-mods { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; }
  .why-mods::before { background: linear-gradient(180deg, rgba(28,14,6,.85), rgba(28,14,6,.55)); }
  .why-mods-card { grid-column: 1; grid-row: auto; padding: 18px; }
  .why-mods-tabs { border-radius: 18px; flex-wrap: wrap; }
  .why-mods-tabs button { flex: 1 1 calc(50% - 4px); }
}
@media (prefers-reduced-motion: reduce) { .why-mods-card { animation: none; } }