/* ===== JHANGO THEMES — STORE STYLES ===== */
/* Extends assets/css/main.css design tokens. Store-specific components only. */

/* ---- Store top bar (announcement) ---- */
.store-topbar {
    background: var(--black); color: #fff; text-align: center;
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    padding: 9px 16px; position: relative; z-index: 1001;
}
.store-topbar .gold { color: var(--gold-light); }

/* ---- Store nav (reuses .navbar base look) ---- */
.store-nav { position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border); }
.store-nav .nav-inner { height: 66px; }
.store-nav .nav-logo { font-size: 20px; }
.store-nav .nav-logo .tag { font-size: 11px; font-weight: 700; color: var(--green);
    border:1px solid var(--green-border); padding: 2px 7px; border-radius: var(--r-full); margin-left: 4px; }
.store-links { display: flex; align-items: center; gap: 4px; }
.store-links a { font-size: 13.5px; font-weight: 500; color: var(--text-body);
    padding: 8px 13px; border-radius: var(--r-full); transition: var(--transition); white-space: nowrap; }
.store-links a:hover { color: var(--black); background: var(--bg-alt); }
.store-nav-actions { display: flex; align-items: center; gap: 10px; }
.cart-btn { position: relative; width: 42px; height: 42px; border-radius: var(--r-full);
    border: 1px solid var(--border); background: #fff; display: grid; place-items: center;
    font-size: 16px; color: var(--black); transition: var(--transition); }
.cart-btn:hover { border-color: var(--green); color: var(--green); }
.cart-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
    background: var(--green); color: #fff; font-size: 11px; font-weight: 800; border-radius: var(--r-full);
    display: grid; place-items: center; }
.store-burger { display: none; width: 42px; height: 42px; border-radius: var(--r-full); border: 1px solid var(--border);
    background:#fff; font-size: 17px; color: var(--black); }

/* ---- Buttons (extend) ---- */
/* ensure brand buttons work standalone (without the base .btn class) */
.btn-green, .btn-black, .btn-outline, .btn-white {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 24px; border-radius: var(--r-full); font-size: 15px; font-weight: 600;
    border: none; font-family: var(--font); cursor: pointer; white-space: nowrap; transition: var(--transition);
}
/* outline buttons (incl. category filter tabs) keep a grey border even when inactive */
.btn-outline { border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--green); }
.btn-gold { display:inline-flex; align-items:center; gap:9px; background: var(--gold); color: #1a1400;
    font-weight: 700; font-size: 14.5px; padding: 14px 26px; border-radius: var(--r-full);
    border: none; transition: var(--transition); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 15.5px; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ===================================================================
   HOMEPAGE
   =================================================================== */

/* ---- Hero ---- */
.ts-hero { background: var(--black); color: #fff; padding: 88px 0 76px; position: relative; overflow: hidden; }
.ts-hero .container { position: relative; z-index: 2; }
.ts-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.ts-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light);
    border: 1px solid rgba(201,168,76,0.35); padding: 7px 15px; border-radius: var(--r-full); margin-bottom: 22px; }
.ts-hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.ts-hero h1 .grn { color: var(--green-light); }
.ts-hero p.sub { font-size: 17px; color: var(--text-on-dark); margin: 22px 0 30px; max-width: 520px; }
.ts-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.ts-hero-stats { display: flex; flex-wrap: wrap; row-gap: 18px; margin-top: 36px; }
.ts-hero-stats .st { display: flex; flex-direction: column; padding: 2px 26px; border-left: 1px solid rgba(255,255,255,0.14); }
.ts-hero-stats .st:first-child { padding-left: 0; border-left: none; }
.ts-hero-stats .st b { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.ts-hero-stats .st span { font-size: 12.5px; color: var(--text-muted); margin-top: 7px; }
.ts-hero-rating { display:flex; align-items:center; gap:10px; margin-top: 24px; font-size: 13.5px; color: var(--text-on-dark); }
.ts-hero-rating .stars { color: var(--gold); letter-spacing: 2px; }

/* hero mockup (browser frame, no shadow/gradient per design rules) */
.ts-mock { border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg); overflow: hidden; background: #111; }
.ts-mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #1a1a1a; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ts-mock-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ts-mock-bar .d1{background:#ff5f57}.ts-mock-bar .d2{background:#febc2e}.ts-mock-bar .d3{background:#28c840}
.ts-mock-bar .url { margin-left: 10px; font-size: 11.5px; color: #888; background:#0d0d0d; padding: 4px 12px; border-radius: var(--r-full); flex: 1; }
.ts-mock img { width: 100%; display: block; }

/* ---- hero scrolling theme wall ---- */
/* desktop: full-height, full-bleed on the right, vertical columns */
.hero-wall { position: absolute; top: 0; bottom: 0; right: max(24px, calc((100vw - 1240px) / 2));
    width: min(42vw, 560px); display: flex; align-items: flex-start; gap: 14px; overflow: hidden; z-index: 1; }
.hw-col { flex: 1; will-change: transform; }
.hw-col.up { animation: hw-up linear infinite; }
.hw-col.down { animation: hw-down linear infinite; }
.hw-item { margin-bottom: 14px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #111; }
.hw-item img { width: 100%; height: auto; display: block; }
/* mobile: horizontal rows */
.hero-wall.horiz { flex-direction: column; gap: 10px; }
.hw-row { display: flex; width: max-content; will-change: transform; }
.hw-row.left { animation: hw-left linear infinite; }
.hw-row.right { animation: hw-right linear infinite; }
.hero-wall.horiz .hw-item { margin: 0 10px 0 0; height: 320px; }   /* margin (not gap) keeps the -50% loop seamless */
.hero-wall.horiz .hw-item img { width: auto; height: 100%; }
@keyframes hw-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hw-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes hw-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hw-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .hw-col, .hw-row { animation: none !important; } }

/* ---- coded storefront mockup (CRO PDP) ---- */
.mock-store { background:#fff; padding:0; }
.mock-nav { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #eee; }
.mock-nav .ml { width:22px; height:22px; border-radius:6px; background:var(--green); }
.mock-nav b { font-size:13px; font-weight:800; color:#111; }
.mock-nav .mlinks { display:flex; gap:12px; margin-left:8px; }
.mock-nav .mlinks span { width:34px; height:7px; border-radius:4px; background:#e9e9e9; }
.mock-nav .mcart { margin-left:auto; width:26px; height:26px; border-radius:7px; background:var(--bg-alt); display:grid; place-items:center; color:#111; font-size:12px; }
.mock-pdp { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; position:relative; }
.mock-shot { border:1px solid #eee; border-radius:10px; overflow:hidden; height:196px; background:var(--bg-alt); position:relative; }
.mock-shot img { width:100%; height:auto; display:block; }
.mock-badge { position:absolute; top:10px; left:10px; background:var(--gold); color:#1a1400; font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; z-index:2; }
.mock-info h4 { font-size:15px; font-weight:800; color:#111; line-height:1.25; }
.mock-stars { color:var(--gold); font-size:11px; margin:5px 0 8px; }
.mock-stars small { color:#999; }
.mock-price { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.mock-price b { font-size:20px; font-weight:800; color:#111; }
.mock-price s { font-size:12px; color:#aaa; }
.mock-price .save { font-size:10px; font-weight:800; background:var(--green-bg); color:var(--green-dark); padding:2px 7px; border-radius:999px; }
.mock-atc { background:var(--green); color:#fff; text-align:center; font-size:12.5px; font-weight:800; padding:10px; border-radius:8px; margin-bottom:8px; }
.mock-atc2 { background:#111; color:#fff; text-align:center; font-size:11.5px; font-weight:700; padding:9px; border-radius:8px; }
.mock-trust { display:flex; gap:10px; margin-top:10px; }
.mock-trust span { font-size:9.5px; color:#888; display:inline-flex; align-items:center; gap:4px; }
.mock-trust i { color:var(--green); font-size:10px; }
.mock-upsell { border-top:1px solid #eee; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.mock-upsell .u-img { width:34px; height:34px; border-radius:7px; background:var(--bg-alt); border:1px solid #eee; }
.mock-upsell .u-t { flex:1; }
.mock-upsell .u-t .l1 { width:70%; height:7px; background:#ececec; border-radius:4px; margin-bottom:5px; }
.mock-upsell .u-t .l2 { width:40%; height:7px; background:#f2f2f2; border-radius:4px; }
.mock-upsell .u-add { font-size:10px; font-weight:800; color:var(--green); border:1px solid var(--green-border); padding:5px 10px; border-radius:999px; }
.mock-float { position:absolute; right:-14px; top:120px; background:#fff; border:1px solid #eee; border-radius:10px; padding:8px 11px; font-size:10px; font-weight:800; color:#111; display:flex; align-items:center; gap:7px; box-shadow:0 8px 24px rgba(0,0,0,.1); }
.mock-float i { color:var(--green); }

/* ---- PDP demo/preview snippet ---- */
.pdp-demo { display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; margin-bottom:18px; background:var(--bg-alt); }
.pdp-demo .d-ico { width:42px; height:42px; border-radius:var(--r-md); background:var(--black); color:#fff; display:grid; place-items:center; font-size:17px; flex-shrink:0; }
.pdp-demo .d-txt { flex:1; min-width:0; }
.pdp-demo .d-txt b { font-size:14px; display:block; }
.pdp-demo .d-txt span { font-size:12.5px; color:var(--text-muted); }
.pdp-demo .d-pw { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px dashed var(--border); border-radius:var(--r-full); padding:3px 10px; font-size:12px; font-weight:700; color:var(--text-dark); }
.pdp-demo .d-pw b { font-family:monospace; color:var(--green-dark); }
.pdp-demo .d-btn { flex-shrink:0; }

/* ---- store logo img ---- */
.nav-logo img.jlogo { height:40px; width:auto; }
.sf-brand img.jlogo { height:44px; width:auto; }

/* ---- Marquee strip ---- */
.ts-strip { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 20px 0; overflow: hidden; }
.ts-strip-track { display: flex; gap: 48px; align-items: center; white-space: nowrap; animation: ts-marq 28s linear infinite; }
.ts-strip-track span { font-size: 14px; font-weight: 700; color: var(--text-muted); display:inline-flex; align-items:center; gap:10px; }
.ts-strip-track span i { color: var(--green); }
@keyframes ts-marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- Section header ---- */
.ts-sec { padding: 92px 0; }
.ts-sec.alt { background: var(--bg-alt); }
.ts-sec.dark { background: var(--black); color: #fff; }
.ts-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.ts-head .tag { display:inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--green); margin-bottom: 14px; }
.ts-sec.dark .ts-head .tag { color: var(--gold-light); }
.ts-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ts-head p { font-size: 16.5px; color: var(--text-body); margin-top: 16px; }
.ts-sec.dark .ts-head p { color: var(--text-on-dark); }

/* ---- Theme grid / cards ---- */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.theme-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.theme-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
    transition: var(--transition); display: flex; flex-direction: column; }
.theme-card:hover { border-color: var(--green); transform: translateY(-4px); }
.theme-card-media { position: relative; height: var(--card-mh, 330px); background: var(--bg-alt); overflow: hidden; }
.theme-card-media img { width: 100%; height: auto; display: block; transition: transform 5s cubic-bezier(.15,0,.15,1); }
/* desktop: hover scrolls the full page  |  any device: tapping the eye toggles the scroll */
.theme-card:hover .theme-card-media img,
.theme-card.previewing .theme-card-media img { transform: translateY(calc(-100% + var(--card-mh, 330px))); }
.theme-card-badge { position: absolute; top: 12px; left: 12px; background: var(--black); color: #fff;
    font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-full); letter-spacing: .03em; }
.theme-card-off { position: absolute; top: 12px; right: 12px; background: var(--green); color: #fff;
    font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: var(--r-full); }
.theme-card-eye { position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.96); color: var(--black); display: none; place-items: center; font-size: 15px;
    border: 1px solid var(--border); transition: var(--transition); z-index: 3; }
.theme-card-eye:hover { background: var(--green); color: #fff; border-color: var(--green); transform: scale(1.08); }
.theme-card.previewing .theme-card-eye { background: var(--green); color: #fff; border-color: var(--green); }
.tcm-link { display:block; width:100%; height:100%; }
.tc-info-link { display:block; }
.theme-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.theme-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }
.tc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 8px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: var(--transition); border: none; cursor: pointer; }
.tc-demo { border: 1.5px solid var(--border); color: var(--text-dark); background: #fff; }
.tc-demo:hover { border-color: var(--green); color: var(--green); }
.tc-atc { background: var(--green); color: #fff; }
.tc-atc:hover { background: var(--green-dark); }
.lbl-short { display: none; }
.tc-pw { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px;
    font-size: 11px; font-weight: 600; color: var(--text-muted); }
.tc-pw i { font-size: 10px; color: var(--gold-dark); }
.tc-pw b { color: var(--text-dark); background: var(--bg-alt); border: 1px solid var(--border);
    padding: 2px 9px; border-radius: var(--r-full); font-weight: 700; letter-spacing: .03em;
    font-family: 'SF Mono', ui-monospace, monospace; }
.theme-card-niche { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.theme-card-name { font-size: 19px; font-weight: 800; margin: 6px 0 4px; color: var(--black); }
.theme-card-rating { font-size: 12.5px; color: var(--text-muted); display:flex; align-items:center; gap:6px; }
.theme-card-rating .stars { color: var(--gold); }
.theme-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.theme-card-price b { font-size: 20px; font-weight: 800; color: var(--black); }
.theme-card-price s { font-size: 13px; color: var(--text-muted); margin-left: 6px; }
.theme-card-price .from { display:block; font-size: 11px; color: var(--text-muted); }
.theme-card-cta { font-size: 13px; font-weight: 700; color: var(--green); display:inline-flex; align-items:center; gap:6px; }
.theme-card-cta i { transition: var(--transition); }
.theme-card:hover .theme-card-cta i { transform: translateX(3px); }

/* ---- Feature blocks (A+) ---- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; transition: var(--transition); }
.ts-sec.alt .feat-card { background:#fff; }
.feat-card:hover { border-color: var(--green); }
.feat-ico { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--green-bg); color: var(--green);
    display: grid; place-items: center; font-size: 19px; margin-bottom: 16px; }
.feat-card h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 8px; color: var(--black); }
.feat-card p { font-size: 13.8px; color: var(--text-body); line-height: 1.55; }

/* image feature grid — real flagship screenshots from the themes */
.featimg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.featimg-card { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), border-color .3s; display:flex; flex-direction:column; }
.featimg-card:hover { border-color: var(--green); transform: translateY(-4px); }
.featimg-media { position:relative; aspect-ratio: 4/3; background: var(--green-bg); overflow:hidden; }
.featimg-media img { width:100%; height:100%; object-fit:cover; display:block; }
.featimg-card.is-new .featimg-media::after { content:"NEW"; position:absolute; top:10px; left:10px;
    background: var(--green); color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em;
    padding:4px 8px; border-radius: 999px; }
.featimg-cap { padding: 13px 15px; font-size: 14px; font-weight: 700; color: var(--black); line-height:1.35; }
@media (max-width: 980px) { .featimg-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 680px) { .featimg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .featimg-cap { padding: 11px 12px; font-size: 13px; } }

/* ---- Comparison "save $1000/mo" ---- */
.cmp-wrap { max-width: 760px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background:#fff; }
.cmp-row { display: grid; grid-template-columns: 1fr 150px 150px; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.cmp-row:last-child { border-bottom: none; }
.cmp-row.head { background: var(--black); color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.cmp-row .app { font-weight: 600; color: var(--text-dark); }
.cmp-col-c { text-align: center; font-weight: 700; }
.cmp-x { color: #c0392b; } .cmp-tick { color: var(--green); }
.cmp-row.total { background: var(--green-bg); font-weight: 800; }
.cmp-total-cta { text-align:center; margin-top: 30px; }
.cmp-save { font-size: 15px; color: var(--text-body); margin-bottom: 18px; }
.cmp-save b { color: var(--green); }

/* ---- Video wall ---- */
.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vid-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 9/16; background:#111; border:1px solid rgba(255,255,255,0.08); }
.vid-card video { width: 100%; height: 100%; object-fit: cover; display:block; }
.vid-play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size: 34px; background: rgba(0,0,0,0.25); transition: var(--transition); cursor:pointer; }
.vid-play:hover { background: rgba(0,0,0,0.1); }
.vid-card.playing .vid-play { opacity: 0; pointer-events: none; }

/* ---- Speed / portfolio strips ---- */
.logo-row { display:flex; flex-wrap:wrap; gap: 18px 38px; align-items:center; justify-content:center; }
.logo-row img { height: 30px; opacity: .55; filter: grayscale(1); transition: var(--transition); }
.logo-row img:hover { opacity: 1; filter: none; }

/* ---- FAQ ---- */
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; background:#fff; overflow:hidden; }
.faq-q { display:flex; justify-content:space-between; align-items:center; gap:16px; padding: 18px 22px; cursor:pointer; font-weight:700; font-size:15.5px; color: var(--black); }
.faq-q i { transition: var(--transition); color: var(--green); }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 22px 20px; font-size: 14.5px; color: var(--text-body); line-height: 1.6; }

/* ===================================================================
   PRODUCT PAGE (A+)
   =================================================================== */
.pdp-top { padding: 34px 0 70px; }
/* breadcrumb kept in the DOM for SEO but visually hidden on the PDP */
.pdp-bc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pdp-bc a:hover { color: var(--green); }
.pdp-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
.pdp-gallery { }
.pdp-info { position: sticky; top: 84px; align-self: start; }
.pdp-main-img { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-alt); }
.pdp-main-img img { width:100%; height:auto; display:block; }
.pdp-scrollnote { display:none; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.pdp-thumb { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; cursor: pointer; background: var(--bg-alt); }
.pdp-thumb.active { border-color: var(--green); }
.pdp-thumb img { width:100%; height:100%; object-fit: cover; }

.pdp-niche { font-size: 12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--green); }
.pdp-title { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing:-0.02em; line-height: 1.08; margin: 8px 0 10px; }
.pdp-rating { display:flex; align-items:center; gap:8px; font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; }
.pdp-rating .stars { color: var(--gold); }
.pdp-tagline { font-size: 15.5px; color: var(--text-body); line-height: 1.6; margin-bottom: 22px; }
.pdp-timer { display:flex; align-items:center; gap:12px; background: var(--black); color:#fff; border-radius: var(--r-md); padding: 13px 18px; margin-bottom: 22px; font-size: 13.5px; }
.pdp-timer .t { margin-left:auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-light); letter-spacing:.04em; }
.pdp-launch { display:flex; align-items:center; gap:12px; background: var(--green-bg); border: 1px solid rgba(55,126,98,.28); border-radius: var(--r-md); padding: 12px 16px; margin: -6px 0 22px; }
.pdp-launch-ic { width:36px; height:36px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.pdp-launch-txt { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.pdp-launch-txt b { font-size:14px; font-weight:800; color:var(--green-dark); }
.pdp-launch-txt small { font-size:12px; color:var(--text-body); margin-top:2px; }
.pdp-launch-txt small b { font-size:12px; color:var(--green-dark); letter-spacing:.02em; }

/* license tiers */
.tier-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.tier { border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; cursor: pointer; display:flex; align-items:center; gap:14px; transition: var(--transition); }
.tier:hover { border-color: var(--green-light); }
.tier.sel { border-color: var(--green); background: var(--green-bg); }
.tier-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink:0; display:grid; place-items:center; }
.tier.sel .tier-radio { border-color: var(--green); }
.tier.sel .tier-radio::after { content:''; width:10px; height:10px; border-radius:50%; background: var(--green); }
.tier-info b { font-size: 15px; font-weight: 800; display:block; }
.tier-info span { font-size: 12.5px; color: var(--text-muted); }
.tier-price { margin-left:auto; text-align:right; }
.tier-price b { font-size: 17px; font-weight: 800; }
.tier-price s { display:block; font-size: 12px; color: var(--text-muted); }

.pdp-buy { display:flex; flex-direction:column; gap: 10px; margin-bottom: 14px; }
.pdp-trust { display:flex; gap: 18px; flex-wrap:wrap; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.pdp-trust span { display:inline-flex; align-items:center; gap:7px; }
.pdp-trust i { color: var(--green); }

/* ---- license tiers: 3 in a row ---- */
.tier-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tierx { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
    border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 17px 10px 13px; cursor: pointer; transition: var(--transition); }
.tierx:hover { border-color: var(--green-light); }
.tierx.sel { border-color: var(--green); background: var(--green-bg); }
.tierx-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--green); color:#fff; font-size:8.5px; font-weight:800; padding:3px 9px; border-radius:var(--r-full); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.tierx-check { position: absolute; top: 10px; right: 10px; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; font-size:7.5px; color:transparent; transition:var(--transition); }
.tierx.sel .tierx-check { background: var(--green); border-color: var(--green); color:#fff; }
.tierx-name { font-size: 12px; font-weight: 800; color: var(--black); margin-bottom: 3px; }
.tierx-price { font-size: 19px; font-weight: 800; color: var(--black); line-height: 1; }
.tierx-cmp { display:flex; align-items:center; gap:6px; justify-content:center; margin-top: 2px; }
.tierx-cmp s { font-size: 11px; color: var(--text-muted); }
.tierx-cmp em { font-style:normal; font-size:9.5px; font-weight:800; color: var(--green-dark); background: var(--green-bg); padding:1px 6px; border-radius:var(--r-full); }
.tierx.sel .tierx-cmp em { background: #fff; }
.tierx-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; margin-top: 4px; }
/* keep the 3 license cards fitting on narrow phones (long prices were overflowing) */
@media (max-width: 560px) {
  .tier-list { gap: 7px; }
  .tierx { padding: 16px 6px 11px; min-width: 0; }
  .tierx-name { font-size: 10.5px; }
  .tierx-price { font-size: 15px; }
  .tierx-cmp { flex-direction: column; gap: 2px; margin-top: 3px; }
  .tierx-cmp s { font-size: 9.5px; }
  .tierx-cmp em { font-size: 8.5px; padding: 1px 5px; }
  .tierx-desc { font-size: 9px; margin-top: 3px; }
  .tierx-badge { font-size: 7.5px; padding: 2px 6px; }
  .tierx-check { top: 7px; right: 7px; width: 14px; height: 14px; }
}

/* ---- sticky add-to-cart bar ---- */
.pdp-sticky { position: fixed; left:0; right:0; bottom:0; z-index: 1500; background:#fff; border-top:1px solid var(--border);
    transform: translateY(105%); transition: transform .32s cubic-bezier(.4,0,.2,1); }
.pdp-sticky.show { transform: translateY(0); }
.pdp-sticky-in { max-width: var(--container-max); margin:0 auto; padding: 11px 24px; display:flex; align-items:center; gap:14px; }
.ps-img { width:44px; height:44px; border-radius:8px; object-fit:cover; object-position:top center; border:1px solid var(--border); flex-shrink:0; background:var(--bg-alt); }
.ps-info { min-width:0; }
.ps-info b { font-size:14px; font-weight:800; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--black); }
.ps-info span { font-size:12px; color:var(--text-muted); }
.ps-price { font-size:18px; font-weight:800; margin-left:auto; color:var(--black); }
.pdp-sticky .btn-green { padding:11px 24px; }
@media (max-width:600px){ .ps-info span{display:none} .pdp-sticky-in{padding:9px 16px; gap:10px} .ps-price{font-size:16px} .pdp-sticky .btn-green{padding:10px 16px;font-size:13px} }

/* ---- tax / GST note ---- */
.pdp-note { display:flex; gap:10px; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-md); padding:11px 13px; margin-bottom:16px; font-size:11.8px; color:var(--text-body); line-height:1.5; }
.pdp-note i { color:var(--green); margin-top:1px; flex-shrink:0; }

/* ---- guarantees card ---- */
.pdp-trust2 { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding:16px 18px; margin-bottom:4px;
    border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-alt); }
.pdp-trust2 span { display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--text-dark); font-weight:700; }
.pdp-trust2 i { color:var(--green); font-size:14px; width:30px; height:30px; background:#fff; border:1px solid var(--border);
    border-radius:8px; display:grid; place-items:center; flex-shrink:0; }

/* ---- frequently bought together (upsell / bundle) ---- */
.pdp-fbt { border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; margin-top:18px; }
.fbt-title { font-size:13px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--black); }
.fbt-title i { color:var(--green); }
.fbt-row { display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid var(--border); cursor:pointer; }
.fbt-row.main { cursor:default; }
.fbt-chk { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border); flex-shrink:0; display:grid; place-items:center; color:transparent; font-size:10px; transition:var(--transition); }
.fbt-row.on .fbt-chk, .fbt-row.main .fbt-chk { background:var(--green); border-color:var(--green); color:#fff; }
.fbt-ic { width:34px; height:34px; border-radius:8px; background:var(--green-bg); color:var(--green); display:grid; place-items:center; font-size:14px; flex-shrink:0; }
.fbt-t { flex:1; min-width:0; }
.fbt-t b { font-size:13px; font-weight:700; display:block; color:var(--black); }
.fbt-t small { font-size:11px; color:var(--text-muted); }
.fbt-p { font-size:13px; font-weight:800; flex-shrink:0; color:var(--black); }
.fbt-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:12px; border-top:1px solid var(--border); }
.fbt-foot span { font-size:12.5px; color:var(--text-muted); }
.fbt-foot b { font-size:16px; color:var(--black); margin-left:4px; }
/* ---- license explainer snippet (with coded mockup) ---- */
.pdp-lic { margin-top:16px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:#fff; }
.pdp-lic-head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--black); padding:12px 16px; border-bottom:1px solid var(--border); }
.pdp-lic-head i { color:var(--green); }
.pdp-lic-mock { margin:14px 16px 4px; background:#0f1216; border:1px solid #23262e; border-radius:10px; padding:12px 13px; }
.plm-bar { display:flex; align-items:center; gap:5px; margin-bottom:10px; }
.plm-dot { width:8px; height:8px; border-radius:50%; background:#3a3f48; }
.plm-dot:nth-child(1){ background:#ef6b6b; } .plm-dot:nth-child(2){ background:#e2c76a; } .plm-dot:nth-child(3){ background:#35c98a; }
.plm-ttl { margin-left:6px; font-size:9.5px; color:#8a909c; font-weight:800; letter-spacing:.05em; flex:1; }
.plm-live { font-size:9.5px; color:#35c98a; font-weight:700; } .plm-live i { font-size:6px; vertical-align:middle; margin-right:3px; }
.plm-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:#8a909c; padding:6px 0; border-bottom:1px solid #1b1e24; }
.plm-row b { color:#e7e9ee; font-weight:700; }
.plm-btn { margin-top:11px; background:#377e62; color:#fff; border-radius:8px; padding:9px; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; }
.pdp-lic-pts { padding:8px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.plp { display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--text-body); }
.plp i { color:var(--green); width:16px; text-align:center; font-size:13px; }
.plp b { color:var(--black); font-weight:700; }
/* upsell info icon + delivery tag */
.fbt-info { background:none; border:none; padding:0 0 0 2px; color:var(--green); cursor:pointer; font-size:12.5px; vertical-align:middle; line-height:1; }
.fbt-info:hover { color:var(--green-dark); }
.fbt-deliv, .cu-deliv { display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:10.5px; font-weight:700; color:var(--green-dark); background:var(--green-bg); border-radius:var(--r-full); padding:2px 9px; }
.cu-deliv { margin-top:5px; }
/* add-on info popup */
.addon-modal { position:fixed; inset:0; z-index:3000; background:rgba(10,10,10,.55); display:none; align-items:center; justify-content:center; padding:20px; }
.addon-modal.open { display:flex; }
.addon-modal-card { position:relative; background:#fff; border-radius:var(--r-lg); max-width:440px; width:100%; max-height:88vh; overflow-y:auto; padding:26px; }
.addon-modal-x { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--text-muted); cursor:pointer; font-size:14px; }
.addon-modal-img { width:100%; height:150px; object-fit:cover; border-radius:var(--r-md); margin-bottom:16px; background:var(--bg-alt); }
.addon-modal-card h3 { font-size:20px; font-weight:800; color:var(--black); margin:0 0 8px; padding-right:34px; }
.addon-modal-tag { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--green-dark); background:var(--green-bg); border-radius:var(--r-full); padding:5px 12px; margin-bottom:12px; }
.addon-modal-card p { font-size:13.5px; line-height:1.6; color:var(--text-body); margin:0 0 16px; }
.addon-modal-sub { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:10px; }
.addon-modal-list { list-style:none; margin:0 0 20px; padding:0; }
.addon-modal-list li { display:flex; gap:9px; font-size:13px; line-height:1.5; color:var(--text-body); padding:5px 0; }
.addon-modal-list li i { color:var(--green); margin-top:3px; flex-shrink:0; font-size:12px; }
.addon-modal-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap; }
.addon-modal-price { font-size:13px; color:var(--text-muted); }
.addon-modal-price b { font-size:17px; color:var(--black); margin-left:4px; }
.addon-modal-price s { font-size:12px; }
.btn-sm { padding:9px 16px; font-size:13px; }
.fbt-img { width:44px; height:52px; border-radius:8px; object-fit:cover; object-position:top center; border:1px solid var(--border); flex-shrink:0; background:var(--bg-alt); }

/* ---- live demo (clean, single row) ---- */
.pdp-demo2 { display:flex; align-items:center; gap:13px; border:1.5px solid var(--border); border-radius:var(--r-md); padding:12px 15px; margin-bottom:16px; transition:var(--transition); }
.pdp-demo2:hover { border-color:var(--green); background:var(--green-bg); }
.pdp-demo2 .pd-ico { width:38px; height:38px; border-radius:50%; background:var(--black); color:#fff; display:grid; place-items:center; font-size:12px; flex-shrink:0; transition:var(--transition); }
.pdp-demo2:hover .pd-ico { background:var(--green); }
.pdp-demo2 .pd-txt { flex:1; min-width:0; }
.pdp-demo2 .pd-txt b { font-size:14px; font-weight:800; color:var(--black); display:block; }
.pdp-demo2 .pd-txt small { font-size:11.5px; color:var(--text-muted); }
.pdp-demo2 .pd-txt small b { display:inline; font-weight:800; color:var(--green-dark); font-family:'SF Mono',ui-monospace,monospace; }
.pdp-demo2 .pd-ext { color:var(--text-muted); font-size:12px; flex-shrink:0; }


/* A+ long body */
.aplus { }
.aplus-band { padding: 64px 0; border-top: 1px solid var(--border); }
.aplus-band.alt { background: var(--bg-alt); }
.aplus-band.dark { background: var(--black); color:#fff; border-top:none; }
.aplus-split { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.aplus-split.rev .aplus-text { order: 2; }
.aplus-text h3 { font-size: clamp(22px,2.6vw,30px); font-weight: 800; letter-spacing:-0.01em; margin-bottom: 14px; }
.aplus-text p { font-size: 15px; color: var(--text-body); line-height: 1.65; }
.aplus-band.dark .aplus-text p { color: var(--text-on-dark); }
.aplus-text ul { list-style:none; margin-top: 18px; display:flex; flex-direction:column; gap:11px; }
.aplus-text li { display:flex; gap:11px; font-size: 14.5px; color: var(--text-body); }
.aplus-band.dark .aplus-text li { color: var(--text-on-dark); }
.aplus-text li i { color: var(--green); margin-top: 3px; }
.aplus-band.dark .aplus-text li i { color: var(--gold-light); }
.aplus-media { border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden; background:var(--bg-alt); aspect-ratio: 4/3; }
.aplus-band.dark .aplus-media { border-color: rgba(255,255,255,0.1); background:#111; }
.aplus-media img { width:100%; height:100%; object-fit:cover; }

/* per-theme reviews */
.rv-summary { display:grid; grid-template-columns: 240px 1fr; gap: 40px; align-items:center; background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: 28px 32px; margin-bottom: 28px; }
.rv-avg { text-align:center; }
.rv-big { font-size: 52px; font-weight: 900; line-height:1; color: var(--black); }
.rv-avg .stars { font-size: 18px; color: var(--gold); display:block; margin: 8px 0 4px; }
.rv-count { font-size: 13px; color: var(--text-muted); }
.rv-bars { display:flex; flex-direction:column; gap: 8px; }
.rv-bar { display:flex; align-items:center; gap: 12px; font-size: 13px; color: var(--text-muted); }
.rv-bar > span { width: 26px; }
.rv-track { flex:1; height: 8px; background: var(--bg-alt); border-radius: 999px; overflow:hidden; }
.rv-track i { display:block; height:100%; background: var(--gold); border-radius:999px; }
.rv-bar > b { width: 26px; text-align:right; color: var(--text-body); font-weight:700; }
.rv-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rv-card { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.rv-card .stars { color: var(--gold); font-size: 14px; }
.rv-card-top { display:flex; align-items:center; gap: 11px; margin-bottom: 12px; }
.rv-av { width: 40px; height: 40px; border-radius:50%; background: var(--green-bg); color: var(--green-dark); font-weight: 800; font-size: 14px; display:grid; place-items:center; flex:none; }
.rv-name { font-size: 14px; font-weight: 700; color: var(--black); }
.rv-date { font-size: 12px; color: var(--text-muted); }
.rv-title { font-size: 14.5px; font-weight: 700; color: var(--black); margin: 10px 0 6px; }
.rv-text { font-size: 13.5px; color: var(--text-body); line-height: 1.6; }
@media (max-width: 860px) { .rv-summary { grid-template-columns: 1fr; gap: 22px; } .rv-grid { grid-template-columns: 1fr; } }

/* speed section — image 65% width on desktop, original ratio (no crop) */
.aplus-split.speed-split { grid-template-columns: 35fr 65fr; }
.aplus-split.speed-split .aplus-media { aspect-ratio: auto; background: transparent; border: 0; border-radius: var(--r-lg); }
.aplus-split.speed-split .aplus-media img { width: 100%; height: auto; object-fit: contain; display: block; }
@media (max-width: 900px) { .aplus-split.speed-split { grid-template-columns: 1fr; } }

/* ===================================================================
   FLAGSHIP FEATURES CAROUSEL (full-bleed)
   - first card aligns to content (space left, none right) at rest
   - cards run edge-to-edge while scrolling
   - last card aligns to content (space right) at the end
   - 3-up desktop / 1-up mobile, both with a peek
   =================================================================== */
.jcar-sec { --pad: max(20px, calc((100vw - 1300px) / 2)); padding: 66px 0; }
.jcar-head { padding-inline: var(--pad); margin-bottom: 32px; }
.jcar-head .tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
.jcar-head h2 { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.jcar { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-inline: var(--pad);   /* first/last card align to content; middle scrolls edge to edge */
    scroll-padding-inline: var(--pad);   /* snap respects the gutter (first card not glued to the edge) */
    scrollbar-width:none; -ms-overflow-style:none; }
.jcar::-webkit-scrollbar { display:none; }
.jcar-card { flex: 0 0 calc((100vw - var(--pad)*2 - 66px) / 3.3); scroll-snap-align:start;
    border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:var(--transition); }
.jcar-card:hover { border-color:var(--green); }
.jcar-img { aspect-ratio: 1624/1254; background:var(--bg-alt); overflow:hidden; }
.jcar-img img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.jcar-body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.jcar-body h3 { font-size:20px; font-weight:800; margin-bottom:10px; color:var(--black); line-height:1.22; letter-spacing:-0.01em; }
.jcar-body p { font-size:14px; color:var(--text-body); line-height:1.65; margin-bottom:20px; flex:1; }
.jcar-tag { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; font-size:12.5px; font-weight:700; padding:10px 18px; border-radius:var(--r-full); }
.jcar-tag i { font-size:10px; }
@media (max-width: 900px) {
    .jcar-sec { padding: 46px 0; }
    .jcar-card { flex-basis: 84vw; }   /* 1-up + peek on mobile */
}

/* ===================================================================
   A+ LISTING (below product main)
   =================================================================== */
/* ---- feature cards carousel ---- */
.apx-cards-sec { padding: 48px 0; }
.apx-cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* margin insets the scroll track from the screen, giving clear space on BOTH sides;
       cards start and peek at this gutter — never glued to the edge, never floating */
    margin-inline: clamp(24px, 5vw, 100px);
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.apx-cards::-webkit-scrollbar { display: none; }
.apx-card {
    flex: 0 0 clamp(270px, 27vw, 320px);
    scroll-snap-align: start;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #fff;
    transition: var(--transition);
}
.apx-card:hover { border-color: var(--green); }
.apx-card-img { aspect-ratio: 5/4; background: var(--bg-alt); overflow: hidden; }
.apx-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.apx-card-body { padding: 20px 20px 22px; }
.apx-card-body h4 { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: var(--black); }
.apx-card-body p { font-size: 13.8px; color: var(--text-body); line-height: 1.55; margin-bottom: 16px; }
.apx-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--green-bg); color: var(--green-dark); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-full); }
.apx-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* alternating hero rows */
.apx-row-sec { padding: 76px 0; }
.apx-row-sec.alt { background: var(--bg-alt); }
.apx-row-sec.dark { background: var(--black); color: #fff; }
.apx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* DOM order is always media→content, so mobile shows image first; desktop uses order to alternate */
.apx-row .apr-media { order: 1; }
.apx-row .apr-content { order: 2; }
.apx-row.rev .apr-media { order: 2; }
.apx-row.rev .apr-content { order: 1; }
.apr-media img { width: 100%; border-radius: var(--r-lg); display: block; }
.apx-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-full); margin-bottom: 20px; }
.apx-pill.green { background: var(--green-bg); color: var(--green-dark); }
.apx-pill.gold { background: rgba(201,168,76,0.16); color: var(--gold-light); }
.apr-content h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.apr-content h2 .grn { color: var(--green); }
.apr-content h2 .gld { color: var(--gold); }
.apr-content > p { font-size: 15.5px; color: var(--text-body); line-height: 1.65; margin: 16px 0 24px; }
.apx-row-sec.dark .apr-content > p { color: var(--text-on-dark); }
.apx-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 28px; }
.apx-checks span { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.apx-checks i { color: var(--green); font-size: 16px; flex-shrink: 0; }
.apx-feats { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; margin-bottom: 28px; }
.apx-feat { display: flex; gap: 14px; }
.apx-feat .fi { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--green-bg); color: var(--green); display: grid; place-items: center; font-size: 16px; }
.apx-feat h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.apx-feat p { font-size: 13.8px; color: var(--text-body); line-height: 1.5; }
.apx-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.apx-mini .m { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; background: #fff; }
.apx-mini .m i { color: var(--green); font-size: 18px; margin-bottom: 10px; display: block; }
.apx-mini .m b { font-size: 15px; font-weight: 800; display: block; margin-bottom: 5px; }
.apx-mini .m span { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.apx-steps { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }
.apx-step { display: flex; gap: 16px; }
.apx-step .n { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--gold-light); }
.apx-step h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.apx-step p { font-size: 13.8px; color: var(--text-on-dark); line-height: 1.55; }
.apx-btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .apx-row { grid-template-columns: 1fr; gap: 26px; }
  /* image always first on mobile, regardless of desktop side */
  .apx-row .apr-media, .apx-row.rev .apr-media { order: 1; }
  .apx-row .apr-content, .apx-row.rev .apr-content { order: 2; }
  .apx-checks, .apx-mini { grid-template-columns: 1fr; }
  .apx-card { flex-basis: 82%; }
  .apx-row-sec { padding: 50px 0; }
}

/* ===================================================================
   INTERACTIVE SECTIONS (myths / calculator / color switcher)
   =================================================================== */
/* 1. myth flip cards → visual proof */
.myth-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.myth-card { perspective:1400px; min-height:264px; cursor:pointer; }
.myth-inner { position:relative; width:100%; min-height:264px; transition:transform .65s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
@media (hover:hover){ .myth-card:hover .myth-inner { transform:rotateY(180deg); } }
.myth-card.flip .myth-inner { transform:rotateY(180deg); }
.myth-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column; gap:13px; overflow:hidden; }
.myth-front { background:#fff; justify-content:space-between; }
.myth-back { background:var(--black); color:#fff; transform:rotateY(180deg); border-color:var(--black); }
.myth-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; padding:5px 12px; border-radius:var(--r-full); text-transform:uppercase; letter-spacing:.04em; }
.myth-badge.x { background:#fbeaea; color:#c0392b; }
.myth-badge.c { background:var(--green); color:#fff; }
.myth-front p { font-size:16.5px; font-weight:800; line-height:1.35; color:var(--text-dark); }
.myth-back p { font-size:13px; font-weight:600; line-height:1.5; color:rgba(255,255,255,.82); }
.myth-cta { font-size:12px; color:var(--text-muted); font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.myth-viz { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); padding:14px; min-height:98px; }
.mv-editor { width:100%; display:flex; flex-direction:column; gap:10px; }
.mv-erow { display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:rgba(255,255,255,.72); font-weight:600; }
.mv-edots { display:flex; gap:5px; }
.mv-edots i { width:14px; height:14px; border-radius:50%; }
.mv-etog { width:30px; height:17px; border-radius:99px; background:rgba(255,255,255,.18); position:relative; }
.mv-etog::after { content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; transition:.3s; }
.mv-etog.on { background:var(--green); }
.mv-etog.on::after { left:15px; }
.mv-speed { text-align:center; }
.mv-gauge { position:relative; width:120px; margin:0 auto; }
.mv-gauge svg { width:120px; height:68px; display:block; }
.mv-gnum { position:absolute; bottom:-2px; left:0; right:0; font-size:24px; font-weight:800; }
.mv-gnum small { font-size:13px; }
.mv-schips { display:flex; gap:6px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.mv-schips span { font-size:9.5px; font-weight:700; background:rgba(74,158,126,.2); color:#7fdcb4; padding:3px 8px; border-radius:99px; }
.mv-palette { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.mv-palette span { aspect-ratio:1; border-radius:8px; }
.mv-apps { display:flex; flex-direction:column; gap:7px; width:100%; }
.mv-app { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.85); }
.mv-app i { color:var(--green); font-size:10px; }
.mv-app s { color:rgba(255,255,255,.4); margin-left:auto; font-weight:600; }
.mv-app b { color:#7fdcb4; }
.mv-ba { display:flex; align-items:center; gap:12px; width:100%; }
.mv-ba > i { color:rgba(255,255,255,.5); }
.mv-bacard { flex:1; background:rgba(255,255,255,.06); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:7px; }
.mv-bacard.live { border:1px solid var(--green); }
.mv-baline { height:8px; border-radius:4px; background:rgba(255,255,255,.25); }
.mv-baline.sm { width:60%; }
.mv-bacard.live .mv-baline { background:var(--green-light); }
.mv-batag { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.5); }
.mv-batag.on { color:#7fdcb4; }
.mv-tl { display:flex; flex-direction:column; gap:9px; width:100%; }
.mv-tls { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; color:rgba(255,255,255,.85); }
.mv-tld { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9px; background:rgba(255,255,255,.14); flex-shrink:0; }
.mv-tls.done .mv-tld { background:var(--green); color:#fff; }
.mv-tls.live .mv-tld { background:var(--gold); color:#1a1400; }
.mv-tls.live { color:#fff; }

/* 2. advanced ROI calculator */
.calc2 { display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:#fff; }
.calc2-in { padding:32px; }
.c2f { margin-bottom:20px; }
.c2l { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--text-dark); }
.c2l b { color:var(--green); font-size:16px; }
.c2hint { color:var(--text-muted); font-weight:500; font-size:11px; }
.c2f input[type=range] { width:100%; accent-color:var(--green); height:6px; cursor:pointer; }
.c2apps-lab { font-size:12.5px; font-weight:700; margin:24px 0 12px; color:var(--text-dark); }
.c2apps { display:flex; flex-wrap:wrap; gap:8px; }
.c2app { display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--border); background:#fff; border-radius:var(--r-full); padding:7px 13px; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:var(--transition); }
.c2app i { font-size:9px; opacity:0; }
.c2app s { color:var(--text-muted); font-weight:600; font-size:11px; }
.c2app.on { border-color:var(--green); background:var(--green-bg); color:var(--green-dark); }
.c2app.on i { opacity:1; color:var(--green); }
.c2app.on s { color:var(--green-dark); }
.calc2-out { background:var(--black); color:#fff; padding:32px; display:flex; flex-direction:column; }
.c2out-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-light); }
.c2total { font-size:clamp(34px,5vw,48px); font-weight:800; letter-spacing:-0.02em; margin:6px 0 22px; line-height:1; }
.c2bars { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.c2bar-t { display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.8); margin-bottom:7px; }
.c2bar-t i { margin-right:7px; color:var(--green-light); }
.c2bar-t b { color:#fff; font-weight:800; }
.c2track { height:8px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.c2fill { height:100%; width:0; border-radius:99px; background:var(--gold); transition:width .4s ease; }
.c2fill.rev { background:var(--green-light); }
.c2metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.c2m b { display:block; font-size:22px; font-weight:800; color:var(--green-light); }
.c2m span { font-size:10px; color:rgba(255,255,255,.6); font-weight:600; }
.c2foot { margin-top:18px; font-size:12px; color:rgba(255,255,255,.55); }
.c2foot b { color:#fff; }

/* 3. live customizer */
.cz-wrap { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start; }
.cz-mock { --acc:#377e62; --rad:10px; --bg:#fff; --fg:#0a0a0a; --card:#f6f7f9; --ln:#e6e8eb;
    --btn-bg:var(--acc); --btn-fg:#fff; --btn-bd:transparent;
    font-family:var(--font, inherit); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--bg); transition:background .35s; }
.cz-mock[data-btn="outline"] { --btn-bg:transparent; --btn-fg:var(--acc); --btn-bd:var(--acc); }
.cz-mock[data-btn="soft"] { --btn-bg:color-mix(in srgb, var(--acc) 16%, transparent); --btn-fg:var(--acc); --btn-bd:transparent; }
.cz-bar { display:flex; align-items:center; gap:6px; padding:11px 14px; background:var(--card); border-bottom:1px solid var(--ln); transition:.35s; }
.cz-bar > i { width:10px; height:10px; border-radius:50%; background:#c9ccd1; }
.cz-url { margin-left:8px; font-size:10.5px; color:var(--fg); opacity:.55; display:inline-flex; align-items:center; gap:5px; }
.cz-url i { width:auto; height:auto; background:none; }
.cz-body { padding:18px; }
.cz-nav { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.cz-logo { font-weight:800; font-size:15px; color:var(--acc); transition:color .35s; letter-spacing:.03em; }
.cz-lnk { display:flex; gap:9px; margin-left:6px; }
.cz-lnk span { width:34px; height:7px; border-radius:4px; background:var(--ln); }
.cz-cart { margin-left:auto; width:30px; height:30px; border-radius:calc(var(--rad) * .6); background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd); display:grid; place-items:center; font-size:12px; transition:.35s; }
.cz-hero { background:var(--acc); border-radius:var(--rad); padding:22px; margin-bottom:16px; transition:background .35s, border-radius .35s; color:#fff; }
.cz-hero b { font-size:18px; font-weight:800; display:block; }
.cz-hero small { font-size:12px; opacity:.85; display:block; margin:4px 0 12px; }
.cz-cta { display:inline-block; background:#fff; color:var(--acc); font-size:12px; font-weight:800; padding:8px 16px; border-radius:calc(var(--rad) * .7); transition:.35s; }
.cz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cz-card { border:1px solid var(--ln); border-radius:var(--rad); padding:10px; transition:.35s; }
.cz-img { aspect-ratio:1; background:var(--card); border-radius:calc(var(--rad) * .7); position:relative; margin-bottom:9px; transition:.35s; }
.cz-badge { position:absolute; top:7px; left:7px; background:var(--acc); color:#fff; font-size:8px; font-weight:800; padding:3px 7px; border-radius:99px; transition:background .35s; }
.cz-l { height:9px; background:var(--ln); border-radius:4px; margin-bottom:6px; transition:.35s; }
.cz-l.sm { width:60%; }
.cz-cft { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.cz-price { font-size:14px; font-weight:800; color:var(--acc); transition:color .35s; }
.cz-add { width:24px; height:24px; border-radius:calc(var(--rad) * .6); background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd); display:grid; place-items:center; font-size:10px; transition:.35s; }
.cz-group { margin-bottom:22px; }
.cz-row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cz-row2 .cz-group { margin-bottom:22px; }
.cz-seg { flex-wrap:wrap; }
.cz-lab { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:12px; }
.cz-swatches { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cz-sw { width:38px; height:38px; border-radius:50%; border:3px solid #fff; outline:1px solid var(--border); outline-offset:-3px; background:var(--sw); cursor:pointer; transition:transform .2s; }
.cz-sw:hover { transform:scale(1.1); }
.cz-sw.on { outline:2.5px solid var(--sw); outline-offset:2px; transform:scale(1.08); }
.cz-custom { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--text-body); cursor:pointer; position:relative; }
.cz-csw { width:26px; height:26px; border-radius:50%; border:2px solid var(--border); background:#377e62; }
.cz-custom input[type=color] { position:absolute; left:0; top:0; width:26px; height:26px; opacity:0; cursor:pointer; }
.cz-seg { display:inline-flex; border:1.5px solid var(--border); border-radius:var(--r-full); padding:3px; gap:2px; }
.cz-opt { border:none; background:transparent; border-radius:var(--r-full); padding:7px 13px; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.cz-opt.on { background:var(--black); color:#fff; }
.cz-surprise { display:inline-flex; align-items:center; gap:9px; background:var(--green); color:#fff; border:none; border-radius:var(--r-full); padding:12px 22px; font-size:13.5px; font-weight:700; cursor:pointer; transition:var(--transition); }
.cz-surprise:hover { background:var(--green-dark); transform:translateY(-2px); }

@media (max-width:900px){ .myth-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:820px){
    .calc2 { grid-template-columns:1fr; }
    .cz-wrap { grid-template-columns:1fr; gap:30px; }
}
@media (max-width:560px){ .myth-grid { grid-template-columns:1fr; } .c2metrics { grid-template-columns:1fr; gap:10px; } .cz-grid { grid-template-columns:1fr 1fr; } }

/* ===================================================================
   CART DRAWER
   =================================================================== */
.drawer-overlay { position: fixed; inset: 0; background: rgba(10,10,10,0.5); opacity:0; pointer-events:none; transition: opacity .3s ease; z-index: 2000; }
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.cart-drawer { position: fixed; top:0; right:0; height:100%; width: 410px; max-width: 92vw; background:#fff; z-index: 2001;
    transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.cart-drawer.open { transform: translateX(0); }
.cart-dh { display:flex; align-items:center; justify-content:space-between; padding: 20px 22px; border-bottom:1px solid var(--border); }
.cart-dh h3 { font-size: 17px; font-weight: 800; }
.cart-dh button { background:none; border:none; font-size: 19px; color: var(--text-muted); }
.cart-items { flex:1; overflow-y:auto; padding: 14px 22px; }
.cart-empty { text-align:center; color: var(--text-muted); padding: 60px 20px; font-size: 14.5px; }
.cart-empty i { font-size: 38px; color: var(--border); display:block; margin-bottom: 14px; }
.cart-item { display:flex; gap: 13px; padding: 14px 0; border-bottom:1px solid var(--border); }
.cart-item img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg-alt); border:1px solid var(--border); }
.cart-item .ci-b { flex:1; min-width:0; }
.cart-item .ci-name { font-size: 14px; font-weight: 700; }
.cart-item .ci-tier { font-size: 12px; color: var(--text-muted); }
.cart-item .ci-price { font-size: 14px; font-weight: 800; margin-top: 4px; }
.cart-item .ci-rm { background:none; border:none; color: var(--text-muted); font-size: 12px; margin-top:6px; }
.cart-item .ci-rm:hover { color: #c0392b; }
.cart-foot { padding: 18px 22px; border-top: 1px solid var(--border); }
.cart-foot .ct-row { display:flex; justify-content:space-between; font-size: 15px; margin-bottom: 6px; }
.cart-foot .ct-row.tot { font-size: 18px; font-weight: 800; margin: 10px 0 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.cart-foot .ct-row.disc { color: var(--green); font-weight: 700; }
.cart-promo { display:flex; gap: 8px; margin-bottom: 8px; }
.cart-promo input { flex:1; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; font-size: 14px; font-family: var(--font); text-transform: uppercase; letter-spacing: .03em; }
.cart-promo input:focus { outline:none; border-color: var(--green); }
.cart-promo button { border: 1.5px solid var(--black); background: var(--black); color:#fff; font-weight: 700; font-size: 13.5px; padding: 0 18px; border-radius: var(--r-md); cursor:pointer; }
.cart-promo button:hover { background: var(--green); border-color: var(--green); }
.cart-promo-msg { font-size: 12.5px; margin-bottom: 10px; min-height: 0; }
.cart-promo-msg:empty { display:none; }
.cart-foot .ct-note { font-size: 12px; color: var(--text-muted); text-align:center; margin-top: 10px; }

/* ===================================================================
   LICENSE ACTIVATION PAGE
   =================================================================== */
.lic-wrap { max-width: 720px; margin: 0 auto; }
.lic-steps { display:flex; gap: 8px; margin-bottom: 34px; justify-content:center; }
.lic-step { display:flex; align-items:center; gap:9px; font-size: 13px; font-weight:700; color: var(--text-muted); }
.lic-step .n { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; font-size:12.5px; }
.lic-step.active { color: var(--green); }
.lic-step.active .n { border-color: var(--green); background: var(--green); color:#fff; }
.lic-step .bar { width: 40px; height: 1.5px; background: var(--border); }
.lic-card { border: 1px solid var(--border); border-radius: var(--r-lg); background:#fff; padding: 32px; }
.lic-theme-pick { display:flex; align-items:center; gap: 14px; border:1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 24px; background: var(--bg-alt); }
.lic-theme-pick img { width:60px; height:60px; border-radius: var(--r-sm); object-fit:cover; }
.lic-theme-pick b { font-size: 15px; }
.lic-theme-pick span { font-size: 12.5px; color: var(--text-muted); }
.lic-field { margin-bottom: 20px; }
.lic-field label { display:block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.lic-field .hint { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.lic-field input { width:100%; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; font-size: 14.5px; font-family: var(--font); transition: var(--transition); }
.lic-field input:focus { outline: none; border-color: var(--green); }
.lic-domains-added { display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.lic-chip { display:inline-flex; align-items:center; gap:8px; background: var(--green-bg); color: var(--green-dark); font-size: 12.5px; font-weight:600; padding: 6px 12px; border-radius: var(--r-full); }
.lic-chip i { cursor:pointer; }
.lic-note { display:flex; gap:11px; background: var(--bg-alt); border-radius: var(--r-md); padding: 14px 16px; font-size: 13px; color: var(--text-body); margin: 22px 0; }
.lic-note i { color: var(--green); margin-top:2px; }
.lic-success { text-align:center; padding: 10px; }
.lic-success .chk { width: 72px; height:72px; border-radius:50%; background: var(--green-bg); color: var(--green); display:grid; place-items:center; font-size: 32px; margin: 0 auto 20px; }

/* install guide */
.lic-guide { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-alt); padding: 24px 26px; margin-bottom: 24px; }
.lic-guide-h { font-size: 16px; font-weight: 800; color: var(--black); display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
.lic-guide-h i { color: var(--green); }
.lic-guide-steps { margin: 0; padding-left: 20px; display:flex; flex-direction:column; gap:9px; }
.lic-guide-steps li { font-size: 14px; color: var(--text-body); line-height: 1.55; padding-left: 4px; }
.lic-guide-steps li::marker { color: var(--green); font-weight: 800; }
.lic-guide-note { display:flex; gap:9px; margin-top: 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.lic-guide-note i { color: var(--green); margin-top: 2px; }

/* activated (locked) card */
.lic-activated .lic-theme-pick { position: relative; }
.lic-active-badge { margin-left:auto; display:inline-flex; align-items:center; gap:6px; background: var(--green-bg); color: var(--green-dark); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-full); white-space:nowrap; }
.lic-locked { display:flex; flex-direction:column; gap:10px; border:1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 4px; }
.lic-locked > div { font-size: 13.5px; color: var(--text-muted); display:flex; align-items:center; gap:9px; }
.lic-locked b { color: var(--black); font-weight: 700; margin-left: 4px; }
.lic-locked i { color: var(--green); width: 16px; text-align:center; }
.lic-locked code { background: var(--bg-alt); padding: 2px 8px; border-radius: var(--r-sm); font-size: 12px; color: var(--green-dark); }
.lic-note-ok { background: var(--green-bg); }
.lic-note-ok i { color: var(--green); }
.lic-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top: 4px; }
.lic-acts .btn-outline { flex: 0 0 auto; }

/* dashboard → My Licenses (clean, one-activation model) */
.lic2-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .lic2-grid { grid-template-columns: 1fr; } }
.lic2-card { border:1px solid var(--border); border-radius: var(--r-lg); background:#fff; padding: 22px; }
.lic2-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 4px; }
.lic2-name { font-size: 17px; font-weight: 800; color: var(--black); }
.lic2-tier { font-size: 11px; font-weight: 700; color: var(--green-dark); background: var(--green-bg); padding: 5px 11px; border-radius: var(--r-full); white-space:nowrap; }
.lic2-slots { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 14px; }
.lic2-stores { display:flex; flex-direction:column; gap: 10px; margin-bottom: 14px; }
.lic2-store { border:1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; background: var(--bg-alt); }
.lic2-store-h { display:flex; align-items:center; gap: 9px; font-size: 14px; font-weight:700; color: var(--black); }
.lic2-dot { width:8px; height:8px; border-radius:50%; background: var(--green); flex:none; }
.lic2-dot.revoked { background:#e74c3c; }
.lic2-badge { margin-left:auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.lic2-badge.active { background: var(--green-bg); color: var(--green-dark); }
.lic2-badge.revoked { background: rgba(231,76,60,.1); color: #c0392b; }
.lic2-row { display:flex; align-items:center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-top: 9px; word-break:break-all; }
.lic2-row i { color: var(--green); width: 14px; text-align:center; flex:none; }
.lic2-row code { background:#fff; border:1px solid var(--border); padding: 2px 8px; border-radius: var(--r-sm); font-size: 11.5px; color: var(--green-dark); }
.lic2-acts { display:flex; gap: 8px; margin-top: 12px; flex-wrap:wrap; }
.lic2-empty { border:1px dashed var(--border); border-radius: var(--r-md); padding: 18px; text-align:center; color: var(--text-muted); font-size: 13px; }
.lic2-empty i { margin-right: 6px; color: var(--text-muted); }
.lic2-full { font-size: 12.5px; color: var(--text-muted); text-align:center; padding: 6px 4px; }
.lic2-full i { color: var(--green); margin-right: 5px; }
.btn-xs { font-size: 12px; padding: 8px 13px; border-radius: var(--r-sm); display:inline-flex; align-items:center; gap: 6px; }

/* ===================================================================
   FOOTER (store)
   =================================================================== */
.store-footer { background: var(--black); color: var(--text-on-dark); padding: 64px 0 30px; }
.sf-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.sf-col h4 { color:#fff; font-size: 13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom: 16px; }
.sf-col a { display:block; font-size: 14px; color: var(--text-on-dark); margin-bottom: 11px; }
.sf-col a:hover { color: var(--green-light); }
.sf-brand p { font-size: 14px; margin: 14px 0; max-width: 300px; }
.sf-bottom { border-top:1px solid var(--border-dark); padding-top: 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size: 13px; color: var(--text-muted); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
    .ts-hero { display: flex; flex-direction: column; }
    .ts-hero-grid, .pdp-grid, .aplus-split, .sf-grid { grid-template-columns: 1fr; }
    /* mobile: show the theme wall as a horizontal scrolling strip below the hero text */
    .hero-wall { position: static; width: 100%; right: auto; margin-top: 24px; order: 2; overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
    .hero-wall.horiz .hw-item { height: 160px; }
    .aplus-split.rev .aplus-text { order: 0; }
    .pdp-gallery { position: static; }
    .theme-grid, .theme-grid.cols-4, .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .vid-grid { grid-template-columns: repeat(2, 1fr); }
    .store-links { display: none; }
    .store-nav-cta { display: none; }   /* Browse Themes button — burger handles nav on mobile */
    .store-burger { display: grid; place-items:center; }
    .sf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    /* keep theme cards 2-per-row on mobile */
    .theme-grid, .theme-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .feat-grid { grid-template-columns: 1fr; }
    .cmp-row { grid-template-columns: 1fr 90px 90px; font-size: 13px; padding: 13px 14px; }
    /* compact card so 2-up isn't too tall */
    .theme-card-media { --card-mh: 260px; }
    .theme-card-body { padding: 13px 12px 15px; }
    .theme-card-niche { font-size: 10.5px; }
    .theme-card-name { font-size: 15.5px; margin: 5px 0 3px; }
    .theme-card-rating { font-size: 11.5px; }
    .theme-card-price b { font-size: 16px; }
    .theme-card-price s { font-size: 11px; }
    .theme-card-actions { flex-direction: row; gap: 6px; padding-top: 12px; }
    .tc-btn { padding: 9px 4px; font-size: 12px; gap: 5px; }
    .lbl-full { display: none; }
    .lbl-short { display: inline; }
    .theme-card-eye { display: grid; width: 34px; height: 34px; font-size: 13px; bottom: 10px; right: 10px; }
    .ts-sec { padding: 60px 0; }
    .ts-hero { padding: 56px 0 50px; }
    .sf-grid { grid-template-columns: 1fr; }
    .pdp-thumbs { grid-template-columns: repeat(4,1fr); }
    /* prevent horizontal overflow on mobile */
    html, body { overflow-x: hidden; max-width: 100%; }
    .ts-head h2 { font-size: 26px; }
    .ts-hero h1 { font-size: 27px; line-height: 1.12; }
    .ts-hero p.sub { font-size: 14.5px; }
    /* hero CTA buttons in one line (shrink to fit) */
    .ts-hero-cta { flex-wrap: nowrap; gap: 8px; }
    .ts-hero-cta .btn-lg { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 12.5px; white-space: nowrap; text-align: center; }
    /* hero stats (13+, <1s, 200+, 48hr) in one line (shrink to fit) */
    .ts-hero-stats { flex-wrap: nowrap; gap: 0; margin-top: 24px; }
    .ts-hero-stats .st { flex: 1 1 0; min-width: 0; padding: 0 7px; }
    .ts-hero-stats .st:first-child { padding-left: 0; }
    .ts-hero-stats .st b { font-size: 18px; }
    .ts-hero-stats .st span { font-size: 9.5px; margin-top: 4px; letter-spacing: -0.02em; white-space: nowrap; }
    /* neater mobile hero filmstrip (theme mockups are tall) */
    .hero-wall.horiz .hw-item { height: 150px; }
    /* demo password one line, smaller */
    .tc-pw { font-size: 10px; white-space: nowrap; gap: 4px; }
    .tc-pw b { padding: 1px 6px; font-size: 10px; }
    .tc-pw i { font-size: 9px; }
}
/* on touch devices there's no hover — hide the hover hint (auto-scroll takes over) */
@media (hover: none) {
    .theme-card-scrollhint { display: none; }
}

/* mobile menu drawer */
.store-mobile { position: fixed; inset: 0 0 0 auto; width: 320px; max-width: 86vw; background:#fff; z-index: 2001;
    transform: translateX(100%); transition: transform .28s ease; padding: 16px 18px 26px; display:flex; flex-direction:column; overflow-y: auto; }
.store-mobile.open { transform: translateX(0); }
.mm-top { display:flex; align-items:center; justify-content:space-between; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.mm-top .jlogo { height: 40px; width:auto; }
.mm-close { width: 38px; height: 38px; font-size: 18px; background: var(--bg-alt); border:none; border-radius: 50%; cursor:pointer; color: var(--black); display:grid; place-items:center; }
.store-mobile > a { padding: 14px 10px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--black); display: flex; align-items: center; gap: 12px; }
.store-mobile > a i { width: 18px; text-align:center; color: var(--green); font-size: 15px; }
.store-mobile > a:hover, .store-mobile > a:active { background: var(--bg-alt); }
.mm-themes-lbl { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin:14px 4px 12px; padding-top:14px; border-top:1px solid var(--border); }
.mm-cats { display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 18px; }
.mm-cat { padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--black); background:#fff; }
.mm-cat:hover, .mm-cat:active { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.store-mobile .btn-green { justify-content: center; margin-top: auto; }

/* ============ THEME GUIDES / BLOG ============ */
.blogc-sec{ background:var(--bg-alt); }
.jcar-head .jcar-sub{ margin-top:10px; color:var(--text-body); font-size:15px; max-width:560px; }

/* ---- blog cards (carousel) ---- */
.blog-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.blog-card .jcar-body{ padding:22px 22px 22px; }
.blog-head{ aspect-ratio:16/8; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:20px; overflow:hidden; position:relative; }
.blog-head i{ font-size:34px; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.blog-cat{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-full); }
.blog-green .blog-head{ background:linear-gradient(135deg,#0a3a2c,#377e62 60%,#4a9e7e); color:#fff; }
.blog-green .blog-cat{ background:rgba(255,255,255,.18); color:#fff; }
.blog-gold .blog-head{ background:linear-gradient(135deg,#0a0a0a,#1c1c1c 55%,#2a2620); color:#e2c76a; }
.blog-gold .blog-cat{ background:rgba(201,168,76,.18); color:#e2c76a; }
.blog-card:hover .blog-head i{ transform:scale(1.14) rotate(-4deg); }
.blog-card .jcar-body h3{ font-size:19px; margin-bottom:9px; }
.blog-card .jcar-body p{ font-size:13.5px; margin-bottom:16px; }
.blog-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:13px; border-top:1px solid rgba(0,0,0,.08); font-size:12.5px; color:var(--text-muted); }
.blog-read{ color:var(--green); font-weight:700; }
.blog-read i{ transition:transform .3s cubic-bezier(.4,0,.2,1); }
.blog-card:hover .blog-read i{ transform:translateX(4px); }

/* ---- reading progress bar ---- */
.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--green),var(--gold)); z-index:1200; transition:width .1s linear; }

/* ---- blog reader: hero ---- */
.blog-hero{ position:relative; overflow:hidden; padding:66px 0 54px; text-align:center; color:#fff; }
.blog-hero-green{ background:linear-gradient(135deg,#082a20,#1f5442 45%,#377e62); }
.blog-hero-gold{ background:linear-gradient(135deg,#000,#141414 45%,#2b2620); }
.bh-watermark{ position:absolute; right:-24px; bottom:-56px; font-size:280px; opacity:.06; color:#fff; pointer-events:none; }
.blog-hero .container{ position:relative; z-index:1; }
.blog-hero .pdp-bc{ display:flex; justify-content:center; gap:6px; margin-bottom:22px; font-size:12.5px; color:rgba(255,255,255,.65); }
.blog-hero .pdp-bc a{ color:rgba(255,255,255,.65); text-decoration:none; }
.blog-hero .pdp-bc a:hover{ color:#fff; }
.blog-hero .blog-cat2{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:8px 16px; border-radius:var(--r-full); background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px); }
.blog-hero-gold .blog-cat2{ color:#e2c76a; background:rgba(201,168,76,.16); }
.blog-hero h1{ color:#fff; font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-0.02em; line-height:1.14; max-width:820px; margin:18px auto 16px; }
.blog-meta-row{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.78); }
.blog-meta-row i{ margin-right:5px; opacity:.9; }

/* ---- blog reader: layout + TOC ---- */
.blog-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:60px; max-width:1200px; margin:0 auto; padding:44px 28px 56px; align-items:start; }
.blog-toc{ position:sticky; top:120px; align-self:start; max-height:calc(100vh - 140px); overflow-y:auto; }
.blog-toc::-webkit-scrollbar{ width:0; }
.toc-title{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.blog-toc nav a{ display:block; font-size:12.5px; color:var(--text-muted); text-decoration:none; padding:7px 0 7px 15px; border-left:2px solid rgba(0,0,0,.08); line-height:1.4; transition:all .2s; }
.blog-toc nav a:hover, .blog-toc nav a.active{ color:var(--green); border-left-color:var(--green); font-weight:600; }
.toc-cta{ display:inline-flex; margin-top:22px; padding:11px 18px !important; font-size:13px !important; }

/* ---- blog reader: article typography ---- */
.blog-wrap{ max-width:none; padding:0; min-width:0; }
.blog-article{ font-size:16.5px; line-height:1.78; color:var(--text-body); min-width:0; overflow-wrap:break-word; }
.blog-article pre,.blog-article .blog-tablewrap{ max-width:100%; }
.blog-article > p.lead{ font-size:20px; line-height:1.65; color:var(--black); font-weight:500; margin-bottom:26px; }
.blog-article h2{ position:relative; font-size:25px; font-weight:800; margin:44px 0 16px; color:var(--black); letter-spacing:-0.01em; line-height:1.25; scroll-margin-top:96px; }
.blog-article h2::before{ content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--green); margin-bottom:16px; }
.blog-article h3{ font-size:19.5px; font-weight:700; margin:32px 0 10px; color:var(--black); }
.blog-article h4{ font-size:16.5px; font-weight:700; margin:24px 0 8px; color:var(--black); }
.blog-article p{ margin:0 0 18px; }
.blog-article ul{ list-style:none; margin:0 0 20px; padding:0; }
.blog-article ul > li{ position:relative; padding-left:26px; margin-bottom:11px; }
.blog-article ul > li::before{ content:""; position:absolute; left:2px; top:10px; width:7px; height:7px; border-radius:2px; background:var(--green); }
.blog-article ol{ list-style:none; counter-reset:step; margin:0 0 22px; padding:0; }
.blog-article ol > li{ counter-increment:step; position:relative; padding-left:46px; margin-bottom:15px; min-height:30px; }
.blog-article ol > li::before{ content:counter(step); position:absolute; left:0; top:-1px; width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.blog-article a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.blog-article strong{ color:var(--black); font-weight:700; }
.blog-article code{ background:rgba(55,126,98,.1); color:#2a6350; padding:2px 7px; border-radius:5px; font-size:.88em; font-family:'SF Mono',ui-monospace,monospace; }
.blog-article pre{ background:#0a0a0a; color:#e8e8e8; padding:16px 18px; border-radius:12px; overflow:auto; margin:0 0 22px; font-size:13.5px; line-height:1.6; }
.blog-article pre code{ background:none; color:inherit; padding:0; }
.blog-article blockquote{ position:relative; border-left:3px solid var(--green); background:rgba(55,126,98,.07); padding:16px 18px 16px 46px; border-radius:0 12px 12px 0; margin:0 0 22px; color:var(--text-body); }
.blog-article blockquote::before{ content:"\f0eb"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:16px; top:16px; color:var(--green); font-size:16px; }
.blog-article hr{ border:none; border-top:1px solid rgba(0,0,0,.1); margin:36px 0; }
.blog-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 24px; border:1px solid rgba(0,0,0,.08); border-radius:12px; }
.blog-article table{ border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px; }
.blog-article th,.blog-article td{ border-bottom:1px solid rgba(0,0,0,.08); padding:11px 14px; text-align:left; vertical-align:top; word-break:normal; overflow-wrap:break-word; }
.blog-article td:first-child,.blog-article th:first-child{ white-space:nowrap; }
.blog-article th{ background:rgba(55,126,98,.08); font-weight:700; color:var(--black); border-bottom:1px solid rgba(55,126,98,.2); }
.blog-article tr:last-child td{ border-bottom:none; }
/* wide tables get their own bordered, horizontally-scrollable box so they stay readable and never overflow */
.blog-article .blog-tablewrap{ overflow-x:auto; margin:0 0 24px; border:1px solid rgba(0,0,0,.09); border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.03); }
.blog-article .blog-tablewrap table{ margin:0; min-width:560px; }
.blog-article .blog-tablewrap th:first-child,.blog-article .blog-tablewrap td:first-child{ padding-left:16px; }
.blog-article .blog-tablewrap th:last-child,.blog-article .blog-tablewrap td:last-child{ padding-right:16px; }

/* ---- CTA + next ---- */
.blog-cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:linear-gradient(135deg,rgba(55,126,98,.07),rgba(201,168,76,.06)); border:1px solid rgba(0,0,0,.07); border-radius:16px; padding:24px 26px; margin-top:38px; }
.blog-cta b{ display:block; font-size:17px; font-weight:800; color:var(--black); }
.blog-cta span{ font-size:13.5px; color:var(--text-muted); }
.blog-next{ display:block; margin-top:18px; padding:18px 22px; border:1px solid rgba(0,0,0,.1); border-radius:14px; text-decoration:none; transition:all .25s; }
.blog-next:hover{ border-color:var(--green); background:rgba(55,126,98,.04); }
.bn-lbl{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--green); margin-bottom:5px; }
.bn-title{ display:block; font-size:16px; font-weight:700; color:var(--black); }
@media(max-width:900px){
  .blog-layout{ grid-template-columns:minmax(0,1fr); gap:0; padding:30px 20px 44px; }
  .blog-toc{ display:none; }
  #blogRoot{ overflow-x:hidden; }                /* stop any child from forcing page-wide horizontal scroll */
  .blog-article > *{ max-width:100%; }           /* wide tables/code scroll inside their own box, not the page */
  .blog-article pre{ font-size:12.5px; }
  .blog-article table{ font-size:13px; }
  .blog-tablewrap{ -webkit-overflow-scrolling:touch; }
}
@media(max-width:600px){ .blog-cta{ flex-direction:column; align-items:flex-start; } .bh-watermark{ font-size:180px; } }

/* ============ MEGA MENU ============ */
.mega-wrap{ position:relative; }
.mega-trigger{ display:inline-flex; align-items:center; gap:6px; }
.mega-caret{ font-size:9px; transition:transform .25s; }
.mega-wrap:hover .mega-caret{ transform:rotate(180deg); }
.store-mega{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); width:min(760px,90vw); background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.16); padding:18px; opacity:0; visibility:hidden; transition:all .25s cubic-bezier(.4,0,.2,1); z-index:1200; }
.store-mega::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px; }
.mega-wrap:hover .store-mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:52vh; overflow-y:auto; }
.mega-card{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:11px; text-decoration:none; transition:background .2s; }
.mega-card:hover{ background:var(--bg-alt); }
.mega-thumb{ width:64px; height:46px; border-radius:8px; overflow:hidden; background:var(--bg-alt); flex-shrink:0; border:1px solid var(--border); }
.mega-thumb img{ width:100%; height:100%; object-fit:cover; }
.mega-meta{ display:flex; flex-direction:column; min-width:0; }
.mega-meta b{ font-size:13px; font-weight:700; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mega-meta span{ font-size:11px; color:var(--text-muted); }
.mega-viewall{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:12px; background:var(--green); color:#fff; border-radius:11px; font-size:13.5px; font-weight:700; text-decoration:none; transition:background .2s; }
.mega-viewall:hover{ background:var(--green-dark,#2a6350); }
.mega-viewall i{ transition:transform .25s; }
.mega-viewall:hover i{ transform:translateX(4px); }

/* ============ REVIEWS ============ */
.rv-sec{ background:var(--bg-alt); }
.rv-overall{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:10px 18px; background:#fff; border:1px solid var(--border); border-radius:var(--r-full); }
.rv-big{ font-size:24px; font-weight:800; color:var(--black); }
.rv-ostars{ color:var(--gold); font-size:16px; letter-spacing:1px; }
.rv-ocount{ font-size:13px; color:var(--text-muted); font-weight:600; }
.rv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.rv-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .25s, transform .25s; }
.rv-card:hover{ box-shadow:0 12px 30px rgba(0,0,0,.07); transform:translateY(-3px); }
.rv-stars{ color:var(--gold); font-size:15px; letter-spacing:1px; }
.rv-text{ font-size:14.5px; line-height:1.65; color:var(--text-body); flex:1; }
.rv-foot{ display:flex; align-items:center; gap:11px; }
.rv-av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#2a6350,#4a9e7e); color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.rv-who{ display:flex; flex-direction:column; min-width:0; flex:1; }
.rv-who b{ font-size:13.5px; font-weight:700; color:var(--black); }
.rv-who small{ font-size:11px; color:var(--text-muted); }
.rv-verified{ color:var(--green); font-size:15px; }
@media(max-width:900px){ .rv-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .rv-grid{ grid-template-columns:1fr; } .store-mega{ display:none; } }

/* ============ CART UPSELL ============ */
.cart-upsell{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }
.cu-title{ font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--green); margin-bottom:10px; }
.cu-item{ display:flex; align-items:center; gap:10px; padding:9px; border:1px solid var(--border); border-radius:11px; margin-bottom:8px; }
.cu-item img{ width:46px; height:46px; border-radius:8px; object-fit:cover; background:var(--bg-alt); flex-shrink:0; }
.cu-b{ flex:1; min-width:0; }
.cu-b b{ display:block; font-size:12.5px; font-weight:700; color:var(--black); }
.cu-b span{ font-size:11px; color:var(--text-muted); }
.cu-price{ font-size:12.5px; font-weight:800; color:var(--black); margin-top:2px; }
.cu-price s{ color:var(--text-muted); font-weight:500; margin-left:4px; }
.cu-add{ width:34px; height:34px; border-radius:9px; border:none; background:var(--green); color:#fff; font-size:14px; cursor:pointer; flex-shrink:0; transition:background .2s; }
.cu-add:hover{ background:var(--green-dark,#2a6350); }

/* ---- mega viewall white text fix (was overridden by .store-links a) ---- */
.store-links .mega-viewall{ color:#fff; }
/* ---- mobile themes menu ---- */
.mm-themes-lbl{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin:16px 0 10px; padding-top:16px; border-top:1px solid var(--border); }
.mm-themes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:46vh; overflow-y:auto; padding-bottom:6px; }
.mm-theme{ display:flex; flex-direction:column; gap:6px; text-decoration:none; padding:8px; border:1px solid var(--border); border-radius:11px; }
.mm-theme img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:7px; background:var(--bg-alt); }
.mm-theme span{ font-size:12px; font-weight:600; color:var(--black); }

/* ============ A+ LISTING PAGE ============ */
.aplus-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ast{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 14px; text-align:center; }
.ast b{ display:block; font-size:26px; font-weight:800; color:var(--green); }
.ast span{ font-size:12px; color:var(--text-muted); }
.aplus-work{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; }
.awk{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg-alt); }
.awk img{ width:100%; height:100%; object-fit:cover; display:block; }
.aplus-buy{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.aplus-ul{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.aplus-ul li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--text-body); }
.aplus-ul li i{ color:var(--green); }
.aplus-price-card{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px; box-shadow:var(--shadow-lg,0 8px 32px rgba(0,0,0,.08)); }
.apc-price{ display:flex; align-items:baseline; gap:10px; }
.apc-price b{ font-size:38px; font-weight:800; color:var(--black); }
.apc-price s{ font-size:18px; color:var(--text-muted); }
.apc-bundle{ font-size:14px; color:var(--text-muted); margin:6px 0 20px; }
.apc-bundle b{ color:var(--green); }
.apc-trust{ display:flex; gap:16px; justify-content:center; margin-top:16px; font-size:12.5px; color:var(--text-muted); }
.apc-trust i{ color:var(--green); margin-right:5px; }
@media(max-width:900px){ .aplus-stats{ grid-template-columns:repeat(3,1fr); } .aplus-work{ grid-template-columns:repeat(2,1fr); } .aplus-buy{ grid-template-columns:1fr; gap:24px; } }
@media(max-width:600px){ .aplus-stats{ grid-template-columns:repeat(2,1fr); } }

/* ============ REVIEW SUBMIT MODAL ============ */
.rv-modal{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; background:rgba(10,10,10,.5); backdrop-filter:blur(4px); padding:20px; }
.rv-modal.open{ display:flex; }
.rv-modal-card{ background:#fff; border-radius:18px; padding:28px; width:min(440px,94vw); position:relative; box-shadow:0 24px 60px rgba(0,0,0,.25); }
.rv-modal-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; color:var(--text-muted); }
.rv-modal-card h3{ font-size:21px; font-weight:800; color:var(--black); }
.rv-modal-sub{ font-size:13.5px; color:var(--text-muted); margin:6px 0 18px; }
.rv-form{ display:flex; flex-direction:column; gap:12px; }
.rv-stars-pick{ display:flex; gap:6px; font-size:26px; color:var(--border); }
.rv-stars-pick i{ cursor:pointer; transition:color .15s, transform .15s; }
.rv-stars-pick i.on{ color:var(--gold); }
.rv-stars-pick i:hover{ transform:scale(1.15); }
.rv-form input,.rv-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:14px; color:var(--black); outline:none; resize:vertical; }
.rv-form input:focus,.rv-form textarea:focus{ border-color:var(--green); }

/* ============ CUSTOMER ACCOUNT ============ */
.acc-loading{ text-align:center; padding:60px 0; color:var(--text-muted); font-size:15px; }
.acc-loading i{ margin-right:8px; color:var(--green); }
/* auth */
.acc-auth{ max-width:420px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px; box-shadow:0 16px 48px rgba(0,0,0,.06); }
.acc-auth-tabs{ display:flex; background:var(--bg-alt); border-radius:11px; padding:4px; margin-bottom:22px; }
.acc-auth-tabs button{ flex:1; padding:10px; border:none; background:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--text-muted); border-radius:8px; cursor:pointer; }
.acc-auth-tabs button.on{ background:#fff; color:var(--black); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.acc-auth h2{ font-size:22px; font-weight:800; color:var(--black); }
.acc-auth-sub{ font-size:13.5px; color:var(--text-muted); margin:6px 0 20px; }
.acc-auth input{ width:100%; padding:13px 15px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:14px; margin-bottom:12px; outline:none; }
.acc-auth input:focus{ border-color:var(--green); }
.acc-link{ background:none; border:none; color:var(--green); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; margin-top:12px; padding:0; }
.acc-msg{ font-size:13px; text-align:center; margin-top:12px; min-height:18px; }
/* dashboard */
.acc-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.acc-hello{ font-size:24px; font-weight:800; color:var(--black); }
.acc-email{ font-size:13.5px; color:var(--text-muted); }
.acc-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:26px; flex-wrap:wrap; }
.acc-tabs button{ padding:12px 18px; border:none; background:none; font-family:inherit; font-size:14px; font-weight:700; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.acc-tabs button.on{ color:var(--green); border-bottom-color:var(--green); }
.acc-tabs button i{ margin-right:6px; }
.acc-empty{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.acc-empty i{ font-size:40px; color:var(--border); margin-bottom:14px; }
.acc-empty h3{ font-size:18px; font-weight:800; color:var(--black); margin-bottom:6px; }
.acc-empty p{ font-size:14px; margin-bottom:18px; }
/* orders */
.ord-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:14px; }
.ord-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.ord-id{ font-size:14px; font-weight:800; color:var(--black); }
.ord-date{ font-size:12px; color:var(--text-muted); }
.ord-status{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:9999px; background:rgba(55,126,98,.1); color:var(--green); }
.ord-status.pending,.ord-status.unpaid{ background:rgba(230,126,34,.12); color:#c87f1e; }
.ord-items{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; margin-bottom:14px; }
.ord-item{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; color:var(--text-body); }
.ord-item b{ color:var(--black); }
.ord-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.ord-foot b{ font-size:17px; color:var(--black); }
/* licenses */
.lic-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.lic-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
.lic-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.lic-h b{ font-size:16px; color:var(--black); }
.lic-badge{ font-size:11px; font-weight:700; color:var(--green); background:rgba(55,126,98,.1); padding:4px 10px; border-radius:9999px; }
.lic-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.lic-row b{ color:var(--black); }
.lic-doms{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.lic-chip{ font-size:11px; background:var(--bg-alt); border:1px solid var(--border); padding:4px 9px; border-radius:7px; color:var(--text-body); }
/* support tickets */
.sup-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.sup-top h3{ font-size:18px; font-weight:800; color:var(--black); }
.tk-list{ display:flex; flex-direction:column; gap:10px; }
.tk-item{ display:flex; justify-content:space-between; align-items:center; gap:14px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px; cursor:pointer; transition:border-color .2s; }
.tk-item:hover{ border-color:var(--green); }
.tk-subj{ font-size:14.5px; font-weight:700; color:var(--black); }
.tk-prev{ font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.tk-meta{ text-align:right; flex-shrink:0; }
.tk-status{ font-size:10.5px; font-weight:800; text-transform:uppercase; padding:4px 9px; border-radius:9999px; background:rgba(55,126,98,.1); color:var(--green); }
.tk-status.open,.tk-status.pending{ background:rgba(230,126,34,.12); color:#c87f1e; }
.tk-status.closed{ background:var(--bg-alt); color:var(--text-muted); }
.tk-time{ display:block; font-size:11px; color:var(--text-muted); margin-top:5px; }
.tk-form{ max-width:560px; margin-top:14px; }
.tk-form h3{ font-size:18px; font-weight:800; margin-bottom:14px; }
.tk-form input,.tk-form textarea,.tk-reply textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:14px; margin-bottom:12px; outline:none; resize:vertical; }
.tk-file{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--green); cursor:pointer; margin-bottom:14px; font-weight:600; }
.tk-file.sm{ margin:0; }
.tk-thread-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 18px; }
.tk-thread-head h3{ font-size:19px; font-weight:800; }
.tk-assigned{ font-size:12px; color:var(--text-muted); }
.tk-thread{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.tk-msg{ max-width:80%; padding:12px 15px; border-radius:12px; }
.tk-msg.me{ align-self:flex-end; background:rgba(55,126,98,.08); border:1px solid rgba(55,126,98,.2); }
.tk-msg.team{ align-self:flex-start; background:#fff; border:1px solid var(--border); }
.tk-msg-who{ font-size:10.5px; color:var(--text-muted); margin-bottom:5px; font-weight:600; }
.tk-msg-txt{ font-size:14px; color:var(--text-body); line-height:1.55; white-space:pre-wrap; }
.tk-att{ display:block; max-width:220px; border-radius:8px; margin-top:8px; }
.tk-reply{ display:flex; gap:10px; align-items:flex-start; }
.tk-reply textarea{ flex:1; margin:0; }
.tk-closed{ text-align:center; color:var(--text-muted); font-size:13px; padding:14px; background:var(--bg-alt); border-radius:10px; }

/* ---- mega menu: perf + color + radius fixes (override) ---- */
.store-mega{ transform:translateX(-50%) !important; transition:opacity .15s ease, visibility 0s linear .15s !important; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.13); backdrop-filter:none; -webkit-backdrop-filter:none; padding:14px; will-change:opacity; }
.mega-wrap:hover .store-mega{ transition:opacity .15s ease !important; }
.mega-grid{ gap:4px; }
.mega-card{ padding:7px; border-radius:8px; transition:background .12s ease; }
.mega-card:hover{ background:var(--bg-alt); }
.mega-thumb{ width:52px; height:38px; border-radius:6px; }
.store-links .mega-card{ color:var(--black); }
.store-links .mega-card .mega-meta b, .mega-meta b{ color:var(--black); font-weight:700; }
.store-links .mega-card .mega-meta span, .mega-meta span{ color:var(--text-muted); }
.mega-viewall{ border-radius:10px; margin-top:12px; }
.store-links .mega-viewall{ color:#fff; }

/* ============ ADVANCED ACCOUNT — split auth ============ */
.account-btn:hover{ color:var(--green); border-color:var(--green); }
.acc-split{ display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 200px); }
.acc-aside{ background:linear-gradient(150deg,#082a20,#1f5442 45%,#377e62); color:#fff; display:flex; align-items:center; padding:60px; position:relative; overflow:hidden; }
.acc-aside::after{ content:"\f0e7"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:-30px; bottom:-40px; font-size:260px; opacity:.06; }
.acc-aside-in{ position:relative; z-index:1; max-width:440px; }
.acc-aside-badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.14); padding:8px 15px; border-radius:9999px; }
.acc-aside h2{ font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.2; margin:22px 0 26px; }
.acc-benefits{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:14px; }
.acc-benefits li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:rgba(255,255,255,.9); }
.acc-benefits i{ color:#8fe3bf; margin-top:3px; }
.acc-aside-trust{ font-size:13.5px; color:rgba(255,255,255,.75); }
.acc-aside-trust .stars{ color:var(--gold-light,#e2c76a); margin-right:6px; }
.acc-formwrap{ display:flex; align-items:center; justify-content:center; padding:50px 24px; }
.acc-form{ width:100%; max-width:400px; }
.acc-form h2{ font-size:24px; font-weight:800; color:var(--black); }
.acc-field{ position:relative; margin-bottom:12px; }
.acc-field i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; }
.acc-field input{ width:100%; padding:14px 15px 14px 42px; border:1px solid var(--border); border-radius:11px; font-family:inherit; font-size:14px; outline:none; }
.acc-field input:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(55,126,98,.1); }
.acc-fineprint{ font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:12px; }
@media(max-width:860px){ .acc-split{ grid-template-columns:1fr; } .acc-aside{ display:none; } }

/* ============ ADVANCED ACCOUNT — dashboard ============ */
.dash{ background:var(--bg-alt); min-height:calc(100vh - 160px); }
.dash-wrap{ display:grid; grid-template-columns:250px 1fr; gap:26px; padding:34px 24px 70px; align-items:start; }
.dash-side{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; position:sticky; top:90px; }
.dash-user{ display:flex; align-items:center; gap:12px; padding:6px 6px 16px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.dash-av{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#2a6350,#4a9e7e); color:#fff; font-size:15px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.dash-name{ font-size:14px; font-weight:800; color:var(--black); }
.dash-mail{ font-size:11.5px; color:var(--text-muted); word-break:break-all; }
.dash-nav{ display:flex; flex-direction:column; gap:3px; }
.dash-nav button{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:none; background:none; font-family:inherit; font-size:14px; font-weight:600; color:var(--text-body); border-radius:10px; cursor:pointer; text-align:left; }
.dash-nav button i{ width:18px; color:var(--text-muted); }
.dash-nav button:hover{ background:var(--bg-alt); }
.dash-nav button.on{ background:rgba(55,126,98,.1); color:var(--green); }
.dash-nav button.on i{ color:var(--green); }
.dash-logout{ display:flex; align-items:center; gap:10px; width:100%; margin-top:14px; padding:11px 13px; border:1px solid var(--border); background:none; border-radius:10px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.dash-logout:hover{ color:var(--danger,#c0392b); border-color:rgba(192,57,43,.3); }
.dash-main{ min-width:0; }
.dash-h2{ font-size:22px; font-weight:800; color:var(--black); margin-bottom:20px; }
.dash-muted{ color:var(--text-muted); font-size:13.5px; }
.dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.stat-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; }
.stat-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:15px; margin-bottom:12px; }
.stat-card.green .stat-ic{ background:rgba(55,126,98,.1); color:var(--green); }
.stat-card.gold .stat-ic{ background:rgba(201,168,76,.14); color:var(--gold-dark,#a88b3a); }
.stat-card.blue .stat-ic{ background:rgba(37,99,235,.1); color:#2563eb; }
.stat-val{ font-size:26px; font-weight:800; color:var(--black); line-height:1; }
.stat-lbl{ font-size:12.5px; color:var(--text-muted); margin-top:5px; }
.dash-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dash-panel{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
.dash-panel-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.dash-panel-h h3{ font-size:15px; font-weight:800; color:var(--black); }
.ord-mini{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.ord-mini:last-child{ border-bottom:none; }
.ord-mini b{ color:var(--black); }
.ord-mini span{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:400; }
@media(max-width:860px){
  .dash-wrap{ grid-template-columns:1fr; gap:16px; padding:20px 16px 60px; max-width:100%; overflow-x:hidden; }
  .dash-side{ position:static; padding:14px; min-width:0; }
  .dash-user{ padding:2px 2px 12px; margin-bottom:12px; }
  .dash-mail{ word-break:break-word; }
  /* compact 2×2 pill grid — never scrolls, never overflows */
  .dash-nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
  .dash-nav button{ justify-content:center; min-width:0; padding:10px 8px; background:var(--bg-alt); border-radius:10px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dash-nav button.on{ background:rgba(55,126,98,.12); }
  .dash-logout{ margin-top:12px; }
  .dash-stats{ grid-template-columns:1fr 1fr; }
  .dash-grid2{ grid-template-columns:1fr; }
}

/* ============ BUNDLE BUILDER ============ */
.bb-tiers{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.bb-tier{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 18px; }
.bb-tier b{ font-size:14px; color:var(--black); }
.bb-tier span{ font-size:12px; color:var(--green); font-weight:700; }
.bb-layout{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
.bb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bb-card{ background:#fff; border:2px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:border-color .18s, box-shadow .18s; display:flex; flex-direction:column; }
.bb-card:hover{ border-color:var(--green-border,rgba(55,126,98,.4)); }
.bb-card.on{ border-color:var(--green); box-shadow:0 0 0 3px rgba(55,126,98,.12); }
.bb-card-media{ position:relative; aspect-ratio:16/11; background:var(--bg-alt); overflow:hidden; }
.bb-card-media img{ width:100%; height:100%; object-fit:cover; }
.bb-check{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--border); display:grid; place-items:center; color:transparent; font-size:12px; transition:all .18s; }
.bb-card.on .bb-check{ background:var(--green); border-color:var(--green); color:#fff; }
.bb-card-body{ padding:13px 14px 6px; flex:1; }
.bb-card-niche{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green); }
.bb-card-name{ font-size:15px; font-weight:800; color:var(--black); margin:3px 0; }
.bb-card-price{ font-size:14px; font-weight:700; color:var(--black); }
.bb-card-price s{ color:var(--text-muted); font-weight:400; font-size:12px; margin-left:4px; }
.bb-toggle{ margin:8px 12px 12px; padding:9px; border:1px solid var(--border); background:#fff; border-radius:9px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--text-body); cursor:pointer; }
.bb-card.on .bb-toggle{ background:var(--green); border-color:var(--green); color:#fff; }
/* summary */
.bb-summary{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px; position:sticky; top:90px; }
.bb-sum-head{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; color:var(--black); padding-bottom:14px; border-bottom:1px solid var(--border); }
.bb-sum-head i{ color:var(--green); }
.bb-sum-head span{ margin-left:auto; font-size:12px; font-weight:600; color:var(--text-muted); }
.bb-sum-list{ display:flex; flex-direction:column; max-height:260px; overflow-y:auto; padding:12px 0; }
.bb-sum-empty{ font-size:13px; color:var(--text-muted); text-align:center; padding:24px 0; }
.bb-sum-row{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.bb-sum-row img{ width:38px; height:28px; border-radius:6px; object-fit:cover; background:var(--bg-alt); }
.bb-sum-row span{ flex:1; color:var(--text-dark); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-sum-row b{ color:var(--black); }
.bb-rm{ color:var(--text-muted); cursor:pointer; padding:4px; }
.bb-rm:hover{ color:var(--danger,#c0392b); }
.bb-nudge{ font-size:12.5px; color:var(--gold-dark,#a88b3a); background:rgba(201,168,76,.1); border-radius:9px; padding:9px 12px; margin-bottom:12px; }
.bb-nudge.on{ color:var(--green); background:rgba(55,126,98,.08); }
.bb-sum-totals{ border-top:1px solid var(--border); padding-top:14px; margin-bottom:16px; }
.bb-sum-totals > div{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-body); margin-bottom:8px; }
.bb-disc b{ color:var(--green); }
.bb-total{ font-size:17px !important; color:var(--black) !important; font-weight:800; padding-top:6px; border-top:1px solid var(--border); }
.bb-total b{ font-size:20px; }
.bb-sum-note{ font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:12px; }
.bb-sum-note i{ color:var(--green); }
@media(max-width:900px){ .bb-grid{ grid-template-columns:repeat(2,1fr); } .bb-layout{ grid-template-columns:1fr; } .bb-summary{ position:static; } }
@media(max-width:560px){ .bb-grid{ grid-template-columns:1fr 1fr; gap:10px; } }

/* ============ CHECKOUT ============ */
.co-grid{ display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start; }
.co-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:16px; position:relative; }
.co-card h3{ font-size:16px; font-weight:800; color:var(--black); margin-bottom:6px; }
.co-sub{ font-size:13px; color:var(--text-muted); margin-bottom:16px; }
.co-step{ position:absolute; top:22px; right:22px; width:26px; height:26px; border-radius:50%; background:var(--bg-alt); color:var(--text-muted); font-size:12px; font-weight:800; display:grid; place-items:center; }
.co-step.done{ background:var(--green); color:#fff; }
.co-loggedin{ font-size:13.5px; color:var(--text-body); }
.co-loggedin b{ color:var(--black); }
.co-secure{ text-align:center; font-size:12px; color:var(--text-muted); margin-top:12px; }
.co-secure i{ font-size:18px; margin:0 3px; color:var(--text-muted); vertical-align:middle; }
.co-summary{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; position:sticky; top:90px; }
.co-summary h3{ font-size:16px; font-weight:800; color:var(--black); margin-bottom:16px; }
.co-item{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.co-item img{ width:44px; height:34px; border-radius:7px; object-fit:cover; background:var(--bg-alt); }
.co-item-b{ flex:1; min-width:0; }
.co-item-b b{ display:block; color:var(--black); font-size:13px; }
.co-item-b span{ font-size:11px; color:var(--text-muted); }
.co-item s{ color:var(--text-muted); font-weight:400; font-size:11px; }
.co-promo{ display:flex; gap:8px; margin:16px 0 4px; }
.co-promo input{ flex:1; border:1.5px solid var(--border); border-radius:var(--r-md); padding:11px 13px; font-size:14px; font-family:var(--font); text-transform:uppercase; letter-spacing:.03em; }
.co-promo input:focus{ outline:none; border-color:var(--green); }
.co-promo button{ border:1.5px solid var(--black); background:var(--black); color:#fff; font-weight:700; font-size:13.5px; padding:0 18px; border-radius:var(--r-md); cursor:pointer; }
.co-promo button:hover{ background:var(--green); border-color:var(--green); }
.co-promo-msg{ font-size:12.5px; margin-bottom:8px; }
.co-promo-msg:empty{ display:none; }
.co-line{ display:flex; justify-content:space-between; font-size:14px; color:var(--text-body); padding:5px 0; }
.co-line.disc{ color:var(--green); font-weight:700; }
.co-total{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:6px; border-top:1px solid var(--border); font-size:15px; }
.co-total b{ font-size:20px; font-weight:800; color:var(--black); }
.co-tax{ font-size:11.5px; color:var(--text-muted); margin-top:12px; line-height:1.5; }
.co-tax i{ color:var(--green); }
@media(max-width:860px){ .co-grid{ grid-template-columns:1fr; } .co-summary{ position:static; order:-1; } }

/* ---- license slots (activate later / multiple stores) ---- */
.lic-card-lg{ display:flex; flex-direction:column; }
.lic-slots{ margin:10px 0 14px; }
.lic-slots span{ font-size:12.5px; font-weight:700; color:var(--text-body); }
.lic-bar{ height:6px; background:var(--bg-alt); border-radius:3px; margin-top:7px; overflow:hidden; }
.lic-bar i{ display:block; height:100%; background:var(--green); border-radius:3px; }
.lic-stores{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.lic-store{ background:var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:11px 13px; }
.lic-store-h{ font-size:13px; font-weight:700; color:var(--black); }
.lic-store-h i{ color:var(--green); margin-right:6px; font-size:11px; }
.lic-store .lic-doms{ margin:8px 0 6px; }
.lic-none{ font-size:12.5px; color:var(--text-muted); font-style:italic; padding:4px 0; }
.lic-full{ font-size:12px; color:var(--text-muted); text-align:center; padding:8px; background:var(--bg-alt); border-radius:9px; }
.lic-full i{ color:var(--green); margin-right:5px; }
.lic-full a{ color:var(--green); font-weight:700; }

/* ---- license status + manage ---- */
.lic-st{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:9999px; margin-left:6px; }
.lic-st.active{ background:rgba(55,126,98,.12); color:var(--green); }
.lic-st.revoked{ background:rgba(192,57,43,.1); color:var(--danger,#c0392b); }
.lic-store-actions{ margin-top:8px; font-size:12px; color:var(--text-muted); }
.lic-key{ font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.lic-key code{ background:var(--bg-alt); padding:3px 8px; border-radius:6px; color:var(--black); font-weight:700; letter-spacing:.5px; }

/* ---- dashboard "need a hand" help card ---- */
.dash-help{ background:linear-gradient(150deg,rgba(55,126,98,.06),rgba(201,168,76,.05)); border:1px solid rgba(55,126,98,.15); display:flex; flex-direction:column; align-items:flex-start; }
.dash-help-ic{ width:48px; height:48px; border-radius:13px; background:var(--green); color:#fff; display:grid; place-items:center; font-size:20px; margin-bottom:14px; box-shadow:0 6px 16px rgba(55,126,98,.25); }
.dash-help h3{ font-size:17px; font-weight:800; color:var(--black); margin-bottom:8px; }
.dash-help p{ font-size:13.5px; color:var(--text-body); line-height:1.6; margin-bottom:18px; }
.dash-help-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }

/* ---- bundle builder: offer tier cards (redesign) ---- */
.bb-tiers{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.bb-tier{ position:relative; flex:1; min-width:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:20px 16px; text-align:center; transition:transform .2s, box-shadow .2s; }
.bb-tier:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.bb-tier-buy{ font-size:14px; font-weight:700; color:var(--text-body); }
.bb-tier-pct{ font-size:40px; font-weight:900; color:var(--green); line-height:1; margin:4px 0; letter-spacing:-0.02em; }
.bb-tier-pct small{ font-size:20px; font-weight:800; }
.bb-tier-off{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--text-muted); }
.bb-tier-top{ background:linear-gradient(160deg,#0a3a2c,#377e62); border-color:transparent; box-shadow:0 12px 30px rgba(55,126,98,.28); }
.bb-tier-top .bb-tier-buy{ color:rgba(255,255,255,.85); }
.bb-tier-top .bb-tier-pct{ color:#fff; }
.bb-tier-top .bb-tier-off{ color:rgba(255,255,255,.7); }
.bb-tier-flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gold,#c9a84c); color:#0a0a0a; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 12px; border-radius:9999px; white-space:nowrap; }
@media(max-width:560px){ .bb-tiers{ gap:8px; } .bb-tier{ min-width:0; padding:16px 8px; } .bb-tier-pct{ font-size:30px; } }

/* ---- bundle builder HERO (premium dark) ---- */
.bb-hero{ position:relative; overflow:hidden; background:linear-gradient(155deg,#050505,#0d2b21 52%,#1f5442); color:#fff; text-align:center; padding:64px 0 48px; }
.bb-hero-wm{ position:absolute; right:-30px; top:-30px; font-size:230px; opacity:.05; color:#fff; pointer-events:none; }
.bb-hero .container{ position:relative; z-index:1; }
.bb-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8fe3bf; background:rgba(143,227,191,.12); padding:8px 16px; border-radius:9999px; }
.bb-hero h1{ color:#fff; font-size:clamp(30px,4.6vw,52px); font-weight:800; letter-spacing:-0.02em; line-height:1.12; margin:20px auto 0; max-width:760px; }
.bb-hero h1 span{ background:linear-gradient(90deg,#8fe3bf,#e2c76a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bb-hero p{ color:rgba(255,255,255,.72); font-size:16px; max-width:560px; margin:16px auto 0; }
.bb-hero .bb-tiers{ justify-content:center; max-width:660px; margin:34px auto 0; }
.bb-hero .bb-tier{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.bb-hero .bb-tier .bb-tier-buy{ color:rgba(255,255,255,.85); }
.bb-hero .bb-tier .bb-tier-pct{ color:#fff; }
.bb-hero .bb-tier .bb-tier-off{ color:rgba(255,255,255,.55); }
.bb-hero .bb-tier-top{ background:linear-gradient(160deg,#c9a84c,#e2c76a); border-color:transparent; box-shadow:0 12px 30px rgba(201,168,76,.3); }
.bb-hero .bb-tier-top .bb-tier-buy{ color:rgba(10,10,10,.7); }
.bb-hero .bb-tier-top .bb-tier-pct,.bb-hero .bb-tier-top .bb-tier-off{ color:#0a0a0a; }
.bb-hero .bb-tier-top .bb-tier-off{ color:rgba(10,10,10,.65); }
.bb-hero .bb-tier-flag{ background:#0a0a0a; color:#e2c76a; }

/* ---- bundle hero: tighter/smaller (override) ---- */
.bb-hero{ padding:40px 0 32px; }
.bb-hero-wm{ display:none; }
.bb-hero-eyebrow{ font-size:11px; padding:6px 13px; }
.bb-hero h1{ font-size:clamp(24px,3.2vw,34px); margin-top:14px; max-width:620px; }
.bb-hero p{ font-size:14px; margin-top:10px; max-width:500px; }
.bb-hero .bb-tiers{ max-width:520px; margin-top:24px; gap:10px; }
.bb-tier{ padding:14px 12px; border-radius:13px; min-width:0; }
.bb-tier-buy{ font-size:12.5px; }
.bb-tier-pct{ font-size:30px; margin:2px 0; }
.bb-tier-pct small{ font-size:15px; }
.bb-tier-off{ font-size:10px; letter-spacing:.1em; }
.bb-tier-flag{ font-size:9px; padding:3px 9px; top:-9px; }

/* ---- bundle offers: minimal solid pills (no gradients) ---- */
.bb-offers{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.bb-pill{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text-body); background:#fff; border:1px solid var(--border); padding:9px 15px; border-radius:9999px; }
.bb-pill b{ color:var(--black); font-weight:800; }
.bb-pill-top{ background:var(--green); border-color:var(--green); color:#fff; }
.bb-pill-top b{ color:#fff; }
/* kill the old gradient tier cards + gradient card select highlight */
.bb-tier,.bb-hero{ background:#fff !important; }
.bb-card.on{ box-shadow:none; }