/* Shoppi "Vendi su Shoppi" — light refresh (persona review 10/11/2026).
   Loaded AFTER sell.css (and wholesale.css) on /sell only. Overrides only, no
   new HTML. Every selector is prefixed with body.sl so it wins regardless of
   load order against sell.css (0,1,0) and wholesale.css (0,2,0 / 0,3,0).
   GZ = Gen Z finding, BB = Baby Boomer finding. Contrast notes are on white
   (#fff) or navy (#0B1B33) unless stated. */

:root {
    --sl-ink-2:   #46536B;   /* 7.6:1 on white: body copy */
    --sl-ink-3:   #5B6679;   /* was #6B7689 (4.6:1); now ~5.8:1, AA with margin on #F8FAFC too */
    --sl-pink:    #FF3D6E;
    --sl-violet:  #7C3AED;
    --sl-on-navy: rgba(255,255,255,.88); /* ~13:1 on navy */
    --sl-on-navy-2: rgba(255,255,255,.80); /* ~11:1 on navy, fine print */
}

/* ---------- base readability (BB: "testo piccolo e grigio"; GZ: 13-13.5px grey unreadable in sun) ---------- */
body.sl .sl-lead { font-size: 17.5px; line-height: 1.6; color: var(--sl-ink-2); }
body.sl .sl-eye { font-size: 13.5px; letter-spacing: .06em; }
body.sl .sl-h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.015em; }
/* Template sets style="font-size:28px" inline on 4 h2s; !important is the only way past it. */
body.sl .sl-h2[style] { font-size: clamp(26px, 3vw, 34px) !important; }

body.sl .sl-point p,
body.sl .sl-step p,
body.sl .sl-card p { font-size: 16px; line-height: 1.65; color: var(--sl-ink-2); }
body.sl .sl-point-title { font-size: 17px; }
body.sl .sl-card-title,
body.sl .sl-step-title { font-size: 17.5px; }

/* BB: menu grey 14px hard to read, "Quanto costa" must be found at once */
body.sl .sl-nav-links a { font-size: 15px; color: var(--sl-ink); }
body.sl .sl-nav-links a.sl-nav-cta { color: #fff; }

/* ---------- buttons (BB: bigger, easier to tap; GZ: primary must pop) ---------- */
body.sl .sl-btn { font-size: 16px; padding: 15px 28px; min-height: 50px; border-radius: 12px; }
body.sl .sl-btn-red {
    background: linear-gradient(135deg, #F0164A 0%, var(--sl-red) 55%, var(--sl-red-dark) 100%);
    box-shadow: 0 10px 26px rgba(232,17,60,.32);
    transition: transform .15s ease, box-shadow .15s ease, background .18s ease;
}
body.sl .sl-btn-red:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(232,17,60,.40); }
/* GZ + BB: second hero button was dark-grey on navy and read as a box, not a button */
body.sl .sl-btn-glass {
    background: transparent;
    border: 2px solid rgba(255,255,255,.72);
    color: #fff;
}
body.sl .sl-btn-glass:hover { background: rgba(255,255,255,.10); border-color: #fff; color: #fff; }

/* ---------- hero: warmer, more vivid, still navy (GZ: "app bancaria 2019") ---------- */
body.sl .sl-hero {
    background:
        radial-gradient(60% 70% at 100% 0%, rgba(232,17,60,.30) 0%, rgba(232,17,60,0) 60%),
        radial-gradient(45% 55% at 85% 100%, rgba(255,176,32,.18) 0%, rgba(255,176,32,0) 65%),
        linear-gradient(180deg, var(--sl-navy-top) 0%, var(--sl-navy-mid) 55%, var(--sl-navy) 100%);
}
/* GZ + BB: uppercase spaced badge unread; BB: English line puts him off (copy changed too) */
body.sl .sl-badge {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255,176,32,.18);
    padding: 7px 15px;
}
/* GZ + BB: 9-line grey .72 paragraph; price must jump out (amber on navy ~10:1) */
body.sl .sl-hero-sub { font-size: 18px; line-height: 1.6; color: var(--sl-on-navy); max-width: 50ch; }
body.sl .sl-hero-sub strong { color: var(--sl-amber); }
/* BB: the three ticks (money, cancel) were 13px at 60% */
body.sl .sl-hero-trust { font-size: 14.5px; font-weight: 500; color: var(--sl-on-navy); gap: 12px 22px; }

/* GZ: the video in the mock-up was an empty grey rectangle, the deadest spot of the page */
body.sl .sl-feed-media {
    background: linear-gradient(160deg, var(--sl-pink) 0%, var(--sl-red) 42%, var(--sl-amber) 100%);
}
body.sl .sl-feed-media::after {
    background:
        radial-gradient(circle at 28% 30%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 45%),
        radial-gradient(circle at 78% 78%, rgba(11,27,51,.22) 0%, rgba(11,27,51,0) 50%);
}
/* keep the red YouTube chip readable on the red reel */
body.sl .sl-feed-chip { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.18); }
body.sl .sl-feed-meta,
body.sl .sl-feed-label,
body.sl .sl-feed-row-kind { color: var(--sl-ink-3); }

/* ---------- why it works ---------- */
body.sl .sl-point-ico { background: rgba(232,17,60,.09); }
body.sl .sl-story-name { color: var(--sl-ink-2); font-size: 11.5px; }
body.sl .sl-quote-role { color: var(--sl-ink-3); font-size: 13px; }

/* GZ: stats too small on desktop; BB: labels unreadable, source invisible */
body.sl .sl-stat-val { font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; }
body.sl .sl-stat-lbl { font-size: 14px; line-height: 1.45; color: var(--sl-ink-2); max-width: 24ch; margin-top: 4px; }
body.sl .sl-source { font-size: 12.5px; color: var(--sl-ink-3); }

/* ---------- pricing ---------- */
/* GZ: 5 € was 34px and lost to "0 €"; BB: "/mese + 10%" is part of the price, was 60% white */
body.sl .sl-plan-num { font-size: 56px; line-height: 1; color: var(--sl-amber); }
body.sl .sl-plan-per { font-size: 15px; color: var(--sl-on-navy); }
body.sl .sl-plan-head p { font-size: 15px; color: var(--sl-on-navy); }
body.sl .sl-plan-note { font-size: 14px; }
body.sl .sl-plan-feats li { font-size: 15px; color: rgba(255,255,255,.92); }
body.sl .sl-plan-fine { font-size: 13px; color: var(--sl-on-navy-2); }
body.sl .sl-plan-badge { font-size: 12px; letter-spacing: .04em; }
body.sl .sl-plan-cta { font-size: 16px; padding: 15px; }
body.sl .sl-plan:not(.ws-plan) {
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(232,17,60,.22) 0%, rgba(232,17,60,0) 60%),
        var(--sl-navy);
}

/* GZ + BB: Wholesale card was a twin of the main plan and "0 €" read as a free plan.
   Light secondary card: the 5 € plan stays the only full navy + red one. */
body.sl .sl-plan.ws-plan {
    background: #fff;
    color: var(--sl-ink);
    border: 1.5px solid var(--sl-line-2);
    box-shadow: 0 12px 32px rgba(11,27,51,.07);
}
body.sl .sl-plan.ws-plan h3,
body.sl .sl-plan.ws-plan .sl-plan-num { color: var(--sl-ink); }
body.sl .sl-plan.ws-plan .sl-plan-num { font-size: 34px; }
body.sl .sl-plan.ws-plan .sl-plan-head p,
body.sl .sl-plan.ws-plan .sl-plan-feats li,
body.sl .sl-plan.ws-plan .sl-plan-per,
body.sl .sl-plan.ws-plan .sl-plan-fine { color: var(--sl-ink-2); }
body.sl .sl-plan.ws-plan .sl-plan-fine a { color: var(--sl-red); font-weight: 600; }
body.sl .sl-plan.ws-plan .sl-tick { color: var(--sl-green-dk); }
body.sl .sl-plan.ws-plan .sl-btn-red {
    background: #fff;
    color: var(--sl-ink);
    border: 1.5px solid var(--sl-navy);
    box-shadow: none;
}
body.sl .sl-plan.ws-plan .sl-btn-red:hover { background: var(--sl-navy); color: #fff; transform: none; }

/* ---------- calculator (BB: the excluded-costs note looked hidden on purpose) ---------- */
body.sl .sl-calc { border-color: var(--sl-line-2); }
body.sl .sl-calc-title { font-size: 17px; }
body.sl .sl-calc-hint { font-size: 14.5px; color: var(--sl-ink-2); }
body.sl .sl-calc-big span { font-size: 14px; color: var(--sl-ink-3); }
body.sl .sl-calc-row { font-size: 15px; }
body.sl .sl-calc-net { font-size: 18px; align-items: baseline; }
body.sl .sl-calc-net #sl-calc-keep { font-size: 26px; }
body.sl .sl-calc-note {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sl-ink-2);
    background: var(--sl-surface-2);
    padding: 10px 12px;
    border-radius: 10px;
}

/* ---------- tiles (BB: labels grey; GZ: 4 full-width tiles on mobile) ---------- */
body.sl .sl-tile { border-color: var(--sl-line-2); }
body.sl .sl-tile-val { color: var(--sl-ink); }
body.sl .sl-tile:nth-child(odd) .sl-tile-val { color: var(--sl-red); }
body.sl .sl-tile-lbl { font-size: 13.5px; line-height: 1.45; color: var(--sl-ink-2); }

body.sl .sl-cloud-desc { font-size: 14px; color: var(--sl-ink-2); }

/* ---------- advertising ---------- */
body.sl .sl-card-ico { background: rgba(232,17,60,.09); }
body.sl .sl-panel-cta small { font-size: 13.5px; color: var(--sl-ink-2); }

/* ---------- what you can sell (GZ: six identical red icons look like a template) ---------- */
body.sl .sl-kind-title { font-size: 15px; }
body.sl .sl-kind:nth-child(1) .sl-kind-ico { background: rgba(232,17,60,.10);  color: var(--sl-red); }
body.sl .sl-kind:nth-child(2) .sl-kind-ico { background: rgba(255,176,32,.16); color: #B86E00; }
body.sl .sl-kind:nth-child(3) .sl-kind-ico { background: rgba(11,95,217,.10);  color: var(--sl-blue); }
body.sl .sl-kind:nth-child(4) .sl-kind-ico { background: rgba(47,191,131,.14); color: var(--sl-green-dk); }
body.sl .sl-kind:nth-child(5) .sl-kind-ico { background: rgba(124,58,237,.10); color: var(--sl-violet); }
body.sl .sl-kind:nth-child(6) .sl-kind-ico { background: rgba(255,61,110,.12); color: #D61F55; }

/* ---------- Tap to Pay block (BB: "solo Android, non iPhone" must read well on navy) ---------- */
body.sl .sl-dark {
    background:
        radial-gradient(60% 80% at 0% 100%, rgba(255,176,32,.14) 0%, rgba(255,176,32,0) 60%),
        linear-gradient(160deg, var(--sl-navy-top) 0%, var(--sl-navy) 80%);
}
body.sl .sl-dark-lead { font-size: 17px; color: var(--sl-on-navy); }
body.sl .sl-dark-fine { font-size: 13px; color: var(--sl-on-navy-2); }
body.sl .sl-dark-item-title { font-size: 16px; }
body.sl .sl-dark-item p { font-size: 15px; color: var(--sl-on-navy-2); }
body.sl .sl-dark-ico { background: rgba(255,176,32,.16); }

/* ---------- steps (GZ + BB: number repeated twice; copy drops "1." and the circle carries it) ---------- */
body.sl .sl-step-n { background: var(--sl-red); box-shadow: 0 6px 16px rgba(232,17,60,.28); }

/* ---------- FAQ (BB: the part he reads most carefully, questions about money) ---------- */
body.sl .sl-faq-q { font-size: 16.5px; }
body.sl .sl-faq-a { font-size: 16px; color: var(--sl-ink); }
body.sl .sl-faq-chev { color: var(--sl-ink-3); }

/* ---------- final CTA (GZ: light-grey box with no energy right where I decide) ----------
   Dark red gradient keeps white text >= 4.5:1 everywhere (#E8113C is 4.6:1, the rest darker). */
body.sl .sl-final {
    background:
        radial-gradient(55% 80% at 100% 0%, rgba(255,176,32,.20) 0%, rgba(255,176,32,0) 60%),
        linear-gradient(135deg, #A80B2C 0%, var(--sl-red-dark) 45%, var(--sl-red) 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(196,14,50,.25);
}
body.sl .sl-final h2 { color: #fff; }
body.sl .sl-final p { font-size: 17px; color: #fff; }
body.sl .sl-final .sl-btn-red {
    background: #fff;
    color: var(--sl-red-dark);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
body.sl .sl-final .sl-btn-red:hover { background: var(--sl-navy); color: #fff; }
body.sl .sl-final .sl-btn-line {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.80);
}
body.sl .sl-final .sl-btn-line:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ---------- section rhythm (clearer breathing between blocks on desktop) ---------- */
@media (min-width: 992px) {
    body.sl .sl-sec { padding-top: 80px; }
    body.sl .sl-sec-lg { padding-top: 88px; }
    body.sl .sl-sec-last { padding-top: 88px; padding-bottom: 72px; }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    body.sl .sl-lead { font-size: 16.5px; }
    body.sl .sl-hero-sub { font-size: 17px; }
    body.sl .sl-point p,
    body.sl .sl-step p,
    body.sl .sl-card p { font-size: 15.5px; }
    body.sl .sl-plan-num { font-size: 48px; }
    body.sl .sl-final p { font-size: 16px; }
}
@media (max-width: 600px) {
    /* GZ: the two hero buttons had different widths and looked random; full width = thumb friendly */
    body.sl .sl-hero-actions { gap: 10px; }
    body.sl .sl-hero-actions .sl-btn,
    body.sl .sl-final-actions .sl-btn { width: 100%; text-align: center; padding: 15px; }
    body.sl .sl-hero-trust { flex-direction: column; gap: 8px; }

    /* GZ: 3 stats in a column left half the screen empty. Number left, label right:
       compact like a row of 3 but labels stay readable for BB (no 11px text). */
    body.sl .sl-stats { display: grid; grid-template-columns: 1fr; gap: 14px; }
    body.sl .sl-stats > div { display: flex; align-items: center; gap: 14px; }
    body.sl .sl-stat-val { font-size: 32px; min-width: 92px; flex-shrink: 0; }
    body.sl .sl-stat-lbl { margin-top: 0; max-width: none; }

    /* GZ: 4 stacked full-width tiles took a whole screen for 4 words → 2×2 */
    body.sl .sl-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    body.sl .sl-tile { padding: 14px 10px; min-width: 0; }
    body.sl .sl-tile-val { font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
    body.sl .sl-tile-lbl { font-size: 13px; }

    body.sl .sl-calc-net #sl-calc-keep { font-size: 22px; }
}

/* 10/11/2026: AI-generated photos (gpt-image-2) in the feed mock-up instead of the gradient */
body.sl .sl-feed-media picture { position: absolute; inset: 0; }
body.sl .sl-feed-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sl .sl-feed-media:has(.sl-feed-photo)::after {
    background: linear-gradient(180deg, rgba(11,27,51,.28) 0%, rgba(11,27,51,0) 38%, rgba(11,27,51,0) 70%, rgba(11,27,51,.22) 100%);
}
@media (min-width: 992px) { body.sl .sl-feed-media { height: 210px; } }

/* Panel 10/11/2026: wholesale lane next to the hero CTA (brand persona) + written contact under the FAQ */
body.sl .sl-hero-brand { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.45); }
body.sl .sl-hero-brand:hover { text-decoration-color: #fff; }
body.sl .sl-hero-brand i { color: var(--sl-amber); }
body.sl .sl-faq-contact { margin: 22px auto 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--sl-ink-2); max-width: 60ch; }
body.sl .sl-faq-contact a { color: var(--sl-red); font-weight: 600; }
body.sl .sl-faq-contact i { margin-right: 6px; }