/* Zinkly Shop — design v2 (premium marketplace layer, loaded after shop.css). */
:root {
  --bg: #f4f5fa; --bg-2: #eceef6; --surface: #ffffff; --raised: #ffffff; --border: #e4e6ef; --border-strong: #cdd1df;
  --text: #0f1020; --text-2: #3f4459; --muted: #6a6f86;
  --violet: #6a48ff; --violet-2: #5735f0; --cyan: #0aa5c8;
  --grad: linear-gradient(135deg, #7c5cff 0%, #5b8cff 45%, #22d3ee 100%);
  --card-shadow: 0 1px 2px rgba(15, 16, 32, .04), 0 8px 24px -12px rgba(15, 16, 32, .14);
  --card-shadow-hover: 0 2px 4px rgba(15, 16, 32, .05), 0 22px 44px -18px rgba(76, 52, 200, .35);
  --radius: 18px; --radius-sm: 12px;
  --mesh: radial-gradient(900px 420px at 8% -10%, rgba(124, 92, 255, .20), transparent 60%), radial-gradient(800px 380px at 100% 0%, rgba(34, 211, 238, .16), transparent 60%);
}
:root[data-theme="dark"] {
  --bg: #07080c; --bg-2: #0e1018; --surface: #11131c; --raised: #161926; --border: #1f2232; --border-strong: #2d3145;
  --text: #f1f2f8; --text-2: #bcc0d0; --muted: #80859c;
  --violet: #8d70ff; --violet-2: #7c5cff; --violet-bg: rgba(141, 112, 255, .14);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .9);
  --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 26px 50px -22px rgba(124, 92, 255, .55);
  --mesh: radial-gradient(1000px 460px at 0% -10%, rgba(124, 92, 255, .28), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(34, 211, 238, .14), transparent 60%);
}
body { position: relative; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 620px; background: var(--mesh); pointer-events: none; z-index: -1; }
h1, h2, h3 { letter-spacing: -.022em; font-weight: 800; }
.wrap { max-width: 1320px; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
.card { border-radius: var(--radius); box-shadow: var(--card-shadow); }
.btn { border-radius: 12px; font-weight: 650; }
.btn-primary { background: var(--violet); border-color: var(--violet); box-shadow: 0 8px 22px -8px rgba(106, 72, 255, .7); }
.btn-grad { background: var(--grad); box-shadow: 0 10px 26px -10px rgba(91, 140, 255, .8); }
.text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-bg); }

/* header */
.topbar { background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--border); }
.topbar-inner { height: 70px; gap: 18px; }
.brand { font-size: 1.15rem; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.search-v2 { flex: 1; max-width: 640px; display: flex; align-items: stretch; height: 46px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.search-v2:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-bg); }
.search-v2 select { border: 0; border-right: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); font: 600 .84rem inherit; font-family: inherit; padding: 0 10px; max-width: 160px; cursor: pointer; }
.search-v2 input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); padding: 0 14px; font: inherit; }
.search-v2 input:focus, .search-v2 select:focus { outline: none; }
.search-v2 button { border: 0; background: var(--violet); color: #fff; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: 700 .95rem inherit; font-family: inherit; }
.search-v2 button:hover { background: var(--violet-2); }
.subnav-inner { height: 50px; gap: 2px; }
.subnav a, .subnav button { position: relative; color: var(--text-2); font-weight: 600; }
.subnav a.active { background: transparent; color: var(--text); }
.subnav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -8px; height: 3px; border-radius: 3px; background: var(--grad); }
.subnav .spacer { flex: 1; }
.subnav .sell-link { color: var(--violet); }
@media (max-width: 860px) { .search-v2.desktop { display: none; } .mobile-search .search-v2 { max-width: none; } }
@media (max-width: 560px) { .hide-mobile-sm { display: none; } }

/* hero */
.hero2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 60px 0 44px; }
.hero2 h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.03; letter-spacing: -.04em; margin: 16px 0 18px; }
.hero2 .lead { font-size: 1.14rem; line-height: 1.6; color: var(--text-2); max-width: 560px; margin: 0; }
.hero2 .search-v2 { height: 58px; max-width: 600px; margin-top: 28px; border-radius: 16px; box-shadow: var(--card-shadow); }
.hero2 .search-v2 button { padding: 0 22px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.hero-tags > span { color: var(--muted); font-size: .85rem; margin-right: 2px; }
.hero-proof { list-style: none; padding: 0; margin: 32px 0 0; display: inline-flex; flex-wrap: wrap; max-width: 600px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: var(--card-shadow); }
.hero-proof li { display: flex; align-items: center; gap: 11px; padding: 12px 18px; flex: 1 1 auto; }
.hero-proof li + li { border-left: 1px solid var(--border); }
.hero-proof li > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.hero-proof .hp-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.hero-proof .hp-star { color: #f5a524; background: rgba(245, 165, 36, .14); }
.hero-proof .hp-star .icon { fill: currentColor; }
.hero-proof .hp-ok { color: #22c55e; background: rgba(34, 197, 94, .13); }
.hero-proof b { font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.hero-proof b i { font-style: normal; font-weight: 500; font-size: .8rem; color: var(--muted); margin-left: 1px; }
.hero-proof small { color: var(--muted); font-size: .78rem; white-space: nowrap; }
@media (max-width: 560px) { .hero-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; } .hero-proof li > span:last-child { min-width: 0; } .hero-proof small { overflow: hidden; text-overflow: ellipsis; } .hero-proof li { padding: 12px 14px; } .hero-proof li + li { border-left: 0; } .hero-proof li:nth-child(even) { border-left: 1px solid var(--border); } .hero-proof li:nth-child(n+3) { border-top: 1px solid var(--border); } }
.showcase { position: relative; height: 440px; }
.showcase .glow { position: absolute; inset: 12% 8%; background: var(--grad); filter: blur(80px); opacity: .33; border-radius: 50%; }
.showcase .sc { position: absolute; width: 72%; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 34px 70px -30px rgba(20, 10, 60, .6); transition: transform .45s cubic-bezier(.2, .8, .2, 1); color: var(--text); }
.showcase .sc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.showcase .sc-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; font-size: .9rem; }
.showcase .sc-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.showcase .sc-meta b { flex: none; white-space: nowrap; }
.showcase .sc:nth-of-type(1) { top: 0; right: 0; transform: rotate(3deg); z-index: 1; }
.showcase .sc:nth-of-type(2) { top: 96px; left: 0; transform: rotate(-4deg); z-index: 2; }
.showcase .sc:nth-of-type(3) { bottom: 0; right: 10%; transform: rotate(1.5deg); z-index: 3; }
.showcase:hover .sc:nth-of-type(1) { transform: rotate(5deg) translateY(-8px); }
.showcase:hover .sc:nth-of-type(2) { transform: rotate(-6deg) translateX(-8px); }
.showcase:hover .sc:nth-of-type(3) { transform: rotate(0deg) translateY(6px); }
.showcase-empty { position: relative; height: 100%; border-radius: 26px; border: 1px dashed var(--border-strong); display: grid; place-items: center; text-align: center; color: var(--muted); padding: 30px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
@media (max-width: 980px) { .hero2 { grid-template-columns: 1fr; padding-top: 36px; gap: 28px; } .showcase { height: 340px; } }
@media (max-width: 560px) {
  .showcase { display: none; }
  .hero2 { padding: 24px 0 28px; gap: 0; }
  .hero2 > div { min-width: 0; }
  .hero2 h1 { font-size: clamp(1.85rem, 8.6vw, 2.5rem); line-height: 1.08; margin: 12px 0 12px; overflow-wrap: break-word; }
  .hero2 .lead { font-size: 1rem; line-height: 1.55; }
  .hero2 .search-v2 { height: 52px; margin-top: 20px; border-radius: 14px; }
  .hero2 .search-v2 input { padding: 0 12px; font-size: 16px; }
  .hero2 .search-v2 button { padding: 0 16px; }
  .hero-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; }
  .hero-tags::-webkit-scrollbar { display: none; }
  .hero-tags > span { display: none; }
  .hero-tags .pill { flex: none; }
  .hero-proof { margin-top: 20px; }
}

/* trust bar */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 6px 0; }
.trust > div { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.trust .ti { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--violet-bg); color: var(--violet); flex: none; }
.trust strong { display: block; font-size: .92rem; }
.trust small { color: var(--muted); font-size: .8rem; line-height: 1.35; display: block; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust { gap: 10px; } .trust > div { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .trust .ti { width: 36px; height: 36px; border-radius: 10px; } .trust strong { font-size: .88rem; } .trust small { font-size: .76rem; } }

/* sections */
.section { margin: 60px 0; }
.section-head { margin-bottom: 22px; align-items: flex-end; }
.section-head h2 { font-size: 1.6rem; margin: 6px 0 0; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.see-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--text-2); font-size: .9rem; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.see-all:hover { background: var(--bg-2); color: var(--text); }

/* category tiles */
.cat-tiles { --gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cat-tiles > .cat-tile { flex: 0 0 calc((100% - (var(--cols, 4) - 1) * var(--gap)) / var(--cols, 4)); min-width: 0; }
@media (max-width: 900px) { .cat-tiles > .cat-tile { flex-basis: calc((100% - (var(--cols-md, 2) - 1) * var(--gap)) / var(--cols-md, 2)); } }
@media (max-width: 560px) { .cat-tiles { --gap: 10px; } .cat-tiles > .cat-tile { flex-basis: calc((100% - var(--gap)) / 2); } }
.cat-tile { padding: 18px; border-radius: 18px; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 136px; position: relative; overflow: hidden; box-shadow: var(--card-shadow); }
.cat-tile .ico { width: 48px; height: 48px; border-radius: 14px; color: #fff; background: var(--tile); box-shadow: 0 10px 22px -10px var(--tile-shadow); }
.cat-tile .ico .icon { width: 22px; height: 22px; }
.cat-tile .t { font-weight: 750; font-size: 1rem; line-height: 1.25; }
.cat-tile .c { color: var(--muted); font-size: .82rem; font-weight: 500; }
.cat-tile::after { content: ""; position: absolute; right: -44px; top: -44px; width: 124px; height: 124px; border-radius: 50%; background: var(--tile); opacity: .09; transition: transform .35s; }
.cat-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); }
.cat-tile:hover::after { transform: scale(1.5); }
.cat-tile:nth-child(8n+1), .catx:nth-child(8n+1) { --tile: linear-gradient(135deg, #7c5cff, #5b8cff); --tile-shadow: rgba(124, 92, 255, .7); }
.cat-tile:nth-child(8n+2), .catx:nth-child(8n+2) { --tile: linear-gradient(135deg, #ff5cad, #ff8a5c); --tile-shadow: rgba(255, 92, 173, .6); }
.cat-tile:nth-child(8n+3), .catx:nth-child(8n+3) { --tile: linear-gradient(135deg, #10b981, #22d3ee); --tile-shadow: rgba(16, 185, 129, .6); }
.cat-tile:nth-child(8n+4), .catx:nth-child(8n+4) { --tile: linear-gradient(135deg, #f59e0b, #ef4444); --tile-shadow: rgba(245, 158, 11, .6); }
.cat-tile:nth-child(8n+5), .catx:nth-child(8n+5) { --tile: linear-gradient(135deg, #3b82f6, #22d3ee); --tile-shadow: rgba(59, 130, 246, .6); }
.cat-tile:nth-child(8n+6), .catx:nth-child(8n+6) { --tile: linear-gradient(135deg, #a855f7, #ec4899); --tile-shadow: rgba(168, 85, 247, .6); }
.cat-tile:nth-child(8n+7), .catx:nth-child(8n+7) { --tile: linear-gradient(135deg, #14b8a6, #84cc16); --tile-shadow: rgba(20, 184, 166, .6); }
.cat-tile:nth-child(8n+8), .catx:nth-child(8n+8) { --tile: linear-gradient(135deg, #64748b, #7c5cff); --tile-shadow: rgba(100, 116, 139, .6); }

/* product card */
.grid-products { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 22px; }
.pcard { border-radius: 20px; box-shadow: var(--card-shadow); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); }
.pcard-media { margin: 8px 8px 0; border-radius: 14px; }
.pcard-media .placeholder { opacity: .35; }
.pcard-badges { top: 10px; left: 10px; gap: 5px; }
.pcard-badges .badge { height: 24px; border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45); }
.pcard-badges .badge-watching, .pcard-badges .badge-new { background: rgba(10, 11, 18, .62); color: #fff; backdrop-filter: blur(8px); }
.pcard-fav { position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; border: 0; display: grid; place-items: center; background: rgba(10, 11, 18, .58); color: #fff; backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, color .15s; }
.pcard:hover .pcard-fav, .pcard-fav:focus-visible, .pcard-fav.on { opacity: 1; transform: none; }
.pcard-fav.on { color: #ff5cad; }
.pcard-fav.on .icon { fill: currentColor; }
.pcard-body { padding: 14px 16px 16px; gap: 9px; }
.pcard-title { font-size: 1rem; letter-spacing: -.012em; line-height: 1.32; }
.pcard-vendor { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; min-width: 0; }
.pcard-vendor span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { width: 22px; height: 22px; border-radius: 7px; background: var(--grad); color: #fff; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 800; flex: none; overflow: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.pcard-stats { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: .8rem; }
.pcard-stats .star { color: #f5a524; display: inline-flex; align-items: center; gap: 3px; font-weight: 750; }
.pcard-stats .star .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.pcard-stats .star span { color: var(--muted); font-weight: 500; }
.pcard-foot { border-top: 1px solid var(--border); margin-top: auto; padding-top: 12px; align-items: center; }
.pcard-foot .price { font-size: 1.15rem; letter-spacing: -.02em; }
.pcard-cat { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.countdown { background: var(--danger-bg); padding: 4px 9px; border-radius: 8px; font-size: .78rem; align-self: flex-start; }

/* creators */
.creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.creator { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform .15s, border-color .15s; }
.creator:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 50%, var(--border)); color: var(--text); }
.creator .avatar { width: 50px; height: 50px; border-radius: 15px; font-size: .95rem; }
.creator small { color: var(--muted); display: block; font-size: .8rem; }
.creator .go { margin-left: auto; color: var(--muted); }

/* bundles */
.bundle-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.bcard { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform .18s, box-shadow .18s; color: var(--text); }
.bcard:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); color: var(--text); }
.bcard-stack { position: relative; height: 176px; background: var(--grad); overflow: hidden; }
.bcard-stack img, .bcard-stack .ph { position: absolute; width: 56%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .2); }
.bcard-stack > :nth-child(1) { left: 5%; top: 40px; transform: rotate(-7deg); }
.bcard-stack > :nth-child(2) { left: 22%; top: 18px; transform: rotate(2deg); z-index: 2; }
.bcard-stack > :nth-child(3) { right: 5%; top: 44px; transform: rotate(8deg); z-index: 1; }
.bcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.bcard-save { position: absolute; top: 14px; right: 14px; z-index: 3; }

/* bands */
.band { position: relative; overflow: hidden; border-radius: 26px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.band::before { content: ""; position: absolute; inset: 0; background: var(--mesh); pointer-events: none; }
.band > * { position: relative; }
.band h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 6px; }
.band p { color: var(--text-2); margin: 0; max-width: 580px; }
.band-grad { background: var(--grad); border: 0; color: #fff; }
.band-grad::before { background: radial-gradient(600px 300px at 90% 120%, rgba(255, 255, 255, .28), transparent 60%); }
.band-grad p { color: rgba(255, 255, 255, .9); }
.band-grad .eyebrow { color: #fff; }
.band-grad .btn { background: #fff; color: #2a1a7a; border: 0; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
@media (max-width: 640px) { .band { padding: 26px; } }

/* product page */
.p-hero { padding: 22px 0 4px; }
.p-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 12px 0 10px; letter-spacing: -.03em; }
.p-sub { color: var(--text-2); font-size: 1.06rem; max-width: 760px; margin: 0 0 14px; }
.p-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--muted); font-size: .9rem; }
.p-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.p-meta .star { color: #f5a524; font-weight: 750; display: inline-flex; gap: 4px; align-items: center; }
.p-meta .star .icon { fill: currentColor; stroke: none; width: 15px; height: 15px; }
.p-head { margin-top: 18px; }
.gallery-main { border-radius: 20px; box-shadow: var(--card-shadow); }
.thumbs button { border-radius: 12px; width: 104px; }
.buybox .card { border-radius: 22px; position: relative; }
.buybox .card::before { content: ""; position: absolute; inset: -1px; border-radius: 23px; padding: 1px; background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 75%, transparent), transparent 42%, color-mix(in srgb, var(--cyan) 55%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.big-price { font-size: 2.3rem; letter-spacing: -.035em; }
.license-opt { border-radius: 14px; padding: 13px 14px; transition: border-color .15s, background .15s; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .87rem; color: var(--text-2); }
.perks li { display: flex; gap: 8px; align-items: center; }
.perks .icon { color: var(--success); width: 16px; height: 16px; flex: none; }
.vendor-mini { display: flex; gap: 12px; align-items: center; }
.vendor-mini .avatar { width: 46px; height: 46px; border-radius: 14px; }
.tabs { gap: 4px; }
.tabs button, .tabs a { padding: 14px 16px; font-size: .95rem; }
.tabs button[aria-selected="true"], .tabs a.active { border-bottom: 3px solid transparent; border-image: var(--grad) 1; }
.mobile-buy { display: none; }
@media (max-width: 1000px) {
  .mobile-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
  .mobile-buy .price { font-size: 1.2rem; }
  body.has-mobile-buy { padding-bottom: 74px; }
  body.has-mobile-buy .ai-fab { bottom: 86px; }
}

/* listing */
.listing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 0; }
.listing-head h1 { margin: 8px 0 4px; }
.filters { border-radius: 20px; position: sticky; top: 136px; max-height: calc(100vh - 152px); overflow: auto; }
.cat-list a { padding: 7px 10px; border-radius: 10px; }
@media (max-width: 960px) { .filters { position: static; max-height: none; } }

/* account / vendor / admin shells */
.side-nav { border-radius: 20px; }
.side-nav a { border-radius: 12px; padding: 10px 12px; }
.stat { border-radius: 18px; }
.stat .v { font-size: 1.65rem; }
.table th { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }

/* footer */
.footer { background: transparent; border-top: 1px solid var(--border); padding: 56px 0 26px; margin-top: 80px; }
.footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer strong { color: var(--text); font-size: .92rem; display: block; margin-bottom: 8px; }
.footer a { padding: 4px 0; font-size: .9rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); }
.pay-logos { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-logos span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); font-weight: 650; font-size: .78rem; color: var(--text-2); background: var(--surface); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.empty { padding: 64px 20px; }
.empty .ico { border-radius: 20px; }

/* buy box price */
.buybox [data-price-display] .price { font-size: 2.3rem; letter-spacing: -.035em; }
.buybox [data-price-display] .price-old { font-size: 1rem; }
.buybox .license-opt .price { font-size: 1rem; }

/* ---- header v3: calm, typographic ---- */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); }
.hdr-row { display: flex; align-items: center; gap: 20px; height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--text); flex: none; }
.wordmark:hover { color: var(--text); }
.wordmark img { width: 30px; height: 30px; object-fit: contain; }
.wordmark b { font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; }
.wordmark i { font-style: normal; font-weight: 500; font-size: 1.12rem; letter-spacing: -.02em; color: var(--muted); margin-left: 4px; }
.hdr-search { position: relative; flex: 1; max-width: 560px; display: flex; align-items: center; }
.hdr-search > .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.hdr-search input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); padding: 0 40px 0 40px; font: inherit; font-size: .93rem; transition: border-color .12s, background .12s; }
.hdr-search input::placeholder { color: var(--muted); }
.hdr-search input:focus { outline: none; border-color: var(--border-strong); background: var(--surface); }
.hdr-search kbd { position: absolute; right: 10px; font: 600 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; background: var(--surface); }
.hdr-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hdr-link { padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: .92rem; color: var(--text-2); }
.hdr-link:hover { color: var(--text); background: var(--bg-2); }
.hdr-cta { background: var(--text); color: var(--bg); border-color: var(--text); margin-left: 4px; }
.hdr-cta:hover { background: var(--text-2); border-color: var(--text-2); color: var(--bg); }
.hdr .icon-btn { width: 38px; height: 38px; border-radius: 10px; color: var(--text-2); }
.hdr .icon-btn .icon { width: 19px; height: 19px; stroke-width: 1.7; }
.dot-count { position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.dot-count[hidden], .count-dot[hidden] { display: none !important; }
.hdr-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); padding: 0; overflow: hidden; cursor: pointer; background: var(--bg-2); margin-left: 6px; display: grid; place-items: center; color: var(--text-2); font-weight: 700; font-size: .78rem; }
.hdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hdr-nav { border-top: 1px solid var(--border); }
.hdr-nav-row { display: flex; align-items: center; gap: 2px; height: 44px; overflow-x: auto; scrollbar-width: none; }
.hdr-nav-row::-webkit-scrollbar { display: none; }
.hdr-nav a, .hdr-browse { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 11px; color: var(--text-2); font-weight: 500; font-size: .9rem; white-space: nowrap; background: none; border: 0; font-family: inherit; cursor: pointer; }
.hdr-nav a:hover, .hdr-browse:hover { color: var(--text); }
.hdr-nav a.active { color: var(--text); font-weight: 600; }
.hdr-nav a.active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; background: var(--text); }
.hdr-browse { font-weight: 650; color: var(--text); padding-left: 0; }
.hdr-sep { width: 1px; height: 18px; background: var(--border); margin: 0 8px; flex: none; }
.hdr-mega { min-width: 520px; padding: 10px; }
.hdr-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.hdr-mega-grid a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; color: var(--text-2); font-size: .92rem; height: auto; }
.hdr-mega-grid a:hover { background: var(--bg-2); color: var(--text); }
.hdr-mega-grid small { color: var(--muted); font-size: .78rem; }
.hdr-mega-all { display: block; margin-top: 6px; padding: 10px 11px; border-top: 1px solid var(--border); font-weight: 600; font-size: .9rem; color: var(--text) !important; height: auto !important; }
.hdr .mobile-search { padding-bottom: 12px; }
.hdr .mobile-search .hdr-search { max-width: none; }
@media (max-width: 860px) { .hdr-search.desktop { display: none; } .hdr-row { gap: 10px; height: 58px; } }
@media (max-width: 420px) { .wordmark b, .wordmark i { font-size: 1rem; } .wordmark { gap: 7px; } .wordmark i { display: none; } .hdr-row { gap: 6px; } .hdr-actions { gap: 0; } .hdr .icon-btn { width: 36px; height: 36px; } .hdr-avatar { margin-left: 4px; } }
@media (max-width: 340px) { .wordmark span { display: none; } }
/* mobile header: pull the menu button and the action icons toward the screen edges
   (the 36-38px buttons pad their icons, which made both groups look inset) */
@media (max-width: 860px) {
  .hdr-row.wrap { padding-left: 12px; padding-right: 12px; }
  .hdr-row > .icon-btn:first-child { margin-left: -8px; }
  .hdr-row > .wordmark { margin-left: -2px; }
  .hdr-actions { margin-right: -4px; }
  .hdr-actions .icon-btn + .icon-btn, .hdr-actions .icon-btn + .menu { margin-left: 0; }
}
html, body { overflow-x: clip; }
.filters { top: 124px; max-height: calc(100vh - 140px); }
.side-nav { top: 124px; }
.buybox { top: 124px; }
.hdr-nav-row { overflow: visible; }

/* code sample blocks (licences page, docs) */
.code-block{background:var(--bg-2);border:1px solid var(--border);padding:12px 14px;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;margin:10px 0}


/* support conversations */
.ticket-row{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--text);border-bottom:1px solid var(--border)}
.ticket-row:last-child{border-bottom:0}
.ticket-row:hover{background:var(--bg-2)}
.ticket-ico{width:40px;height:40px;border-radius:10px;flex:none;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--muted)}
.ticket-ico.round{border-radius:50%}
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--violet);margin-right:6px;vertical-align:middle}
.ticket-thread{display:flex;flex-direction:column;gap:12px}
.tmsg{max-width:85%;padding:12px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border);align-self:flex-start}
.tmsg.mine{align-self:flex-end;background:color-mix(in srgb,var(--violet) 9%,transparent);border-color:color-mix(in srgb,var(--violet) 30%,transparent)}
.tmsg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.tmsg-body{white-space:pre-line;overflow-wrap:anywhere}
.text-right{text-align:right;flex:none}
@media (max-width:640px){.tmsg{max-width:100%}}

[data-show-for][hidden],.check[hidden]{display:none!important}


/* option grid (size x colour) */
.option-grid-box{border:1px dashed var(--border);border-radius:12px;padding:14px;margin:12px 0}
.option-grid-row{margin-top:8px}
.opt-pick{margin-bottom:10px}
.opt-pick .opt-vals{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.opt-pick button{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;padding:7px 12px;font:inherit;font-size:.9rem;cursor:pointer;min-width:44px}
.opt-pick button[aria-pressed="true"]{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);font-weight:600}
.opt-pick button.na{opacity:.45;text-decoration:line-through}
.opt-status{font-size:.85rem;color:var(--muted)}

/* ---- vendor overview v2 ---- */
.ov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ov-head h1{font-size:1.65rem;letter-spacing:-.02em}
.ov-range{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;padding:3px}
.seg a{padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--muted)}
.seg a:hover{color:var(--text)}
.seg a.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ov-custom{position:relative}
.ov-custom summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--muted)}
.ov-custom summary::-webkit-details-marker{display:none}
.ov-custom summary.on,.ov-custom[open] summary{color:var(--text);border-color:var(--border-strong)}
.ov-custom-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;padding:14px;display:grid;gap:6px;min-width:230px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.ov-label{display:block;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.01em}
.ov-top{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px}
.ov-money{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;position:relative}
.ov-money::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 60%);pointer-events:none}
.ov-money-main{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative}
.ov-big{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.ov-money-side{margin:0;padding:18px 22px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative}
.ov-money-side div{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 10px}
.ov-money-side dt{color:var(--muted);font-size:.85rem}
.ov-money-side dd{margin:0;font-weight:700}
.ov-money-side span{grid-column:1/-1;color:var(--muted);font-size:.72rem}
.ov-todo{padding:18px 20px}
.ov-todo h2{font-size:1.05rem}
.ov-task{display:flex;align-items:center;gap:10px;padding:10px 8px;margin:0 -8px;border-radius:10px;color:var(--text)}
.ov-task:hover{background:var(--bg-2);color:var(--text)}
.ov-task-ico{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--violet-bg);color:var(--violet);flex:none}
.ov-count{min-width:24px;padding:2px 8px;border-radius:999px;background:var(--violet);color:#fff;font-size:.78rem;font-weight:700;text-align:center}
.ov-clear{display:flex;gap:12px;align-items:center;padding:14px;border-radius:12px;background:var(--success-bg);color:var(--success)}
.ov-clear div{display:flex;flex-direction:column;color:var(--text)}
.ov-progress{height:6px;border-radius:99px;background:var(--bg-2);margin:12px 0 6px;overflow:hidden}
.ov-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:99px}
.ov-steps{list-style:none;margin:0;padding:0}
.ov-steps li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.92rem}
.ov-steps li a{color:var(--text);font-weight:600}
.ov-steps li a:hover{color:var(--violet)}
.ov-steps li.done span:last-child{color:var(--muted);text-decoration:line-through}
.ov-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ov-steps li.done .ov-check{background:var(--success);border-color:var(--success);color:#fff}
.ov-perf{padding:0;margin-bottom:16px;overflow:hidden}
.ov-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.ov-kpi{padding:18px 20px;border-right:1px solid var(--border)}
.ov-kpi:last-child{border-right:0}
.ov-kpi-v{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;margin:2px 0}
.ov-delta{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:999px}
.ov-delta.up{background:var(--success-bg);color:var(--success)}
.ov-delta.down{background:var(--danger-bg);color:var(--danger)}
.ov-chart{position:relative;padding:18px 20px 14px}
.ov-chart>svg{width:100%;height:230px;display:block;overflow:visible}
.ov-chart .grid{stroke:var(--border);stroke-dasharray:3 5}
.ov-chart .mbar{fill:url(#ovg)}
.ov-chart .hit:hover~.mbar{opacity:1}
.ov-chart .money{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ov-chart .views{fill:none;stroke:var(--cyan);stroke-width:2;opacity:.85;vector-effect:non-scaling-stroke}
.ov-chart .hit{fill:transparent}
.ov-chart .hit:hover{fill:color-mix(in srgb,var(--violet) 8%,transparent)}
.ov-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;margin-top:4px}
.ov-legend{display:flex;gap:16px;margin-top:10px;color:var(--muted);font-size:.78rem;flex-wrap:wrap}
.ov-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.lg-money{background:var(--violet);height:10px!important;width:10px!important;border-radius:3px!important}
.lg-views{background:var(--cyan)}
.ov-chart-empty{position:absolute;inset:18px 20px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.9rem;text-align:center;z-index:1;pointer-events:none;padding:0 16px}
.ov-chart-empty svg{width:34px;height:34px;flex:none;opacity:.7}
.ov-chart-empty span{max-width:340px;line-height:1.45}
.ov-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ov-card{padding:18px 20px}
.ov-card h3{font-size:1rem}
.ov-bar-row{margin-top:12px}
.ov-bar{height:6px;border-radius:99px;background:var(--bg-2);margin:5px 0 2px;overflow:hidden}
.ov-bar span{display:block;height:100%;border-radius:99px;background:var(--violet)}
.ov-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ov-flow{margin:0}
.ov-flow div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.ov-flow dt{color:var(--text-2)}
.ov-flow dd{margin:0;font-weight:600;white-space:nowrap}
.ov-flow .minus dd{color:var(--muted)}
.ov-flow .total{border-bottom:0;padding-top:12px}
.ov-flow .total dt{font-weight:700;color:var(--text)}
.ov-flow .total dd{color:var(--success);font-size:1.15rem;font-weight:800}
.ov-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ov-mini div{display:flex;flex-direction:column;gap:2px}
.ov-mini strong{font-size:1.25rem;display:inline-flex;align-items:center;gap:4px}
.ov-mini strong .icon-sm{color:var(--warning)}
.ov-prod{display:flex;align-items:center;gap:12px;padding:10px 8px;margin:0 -8px;border-radius:10px;color:var(--text)}
.ov-prod:hover{background:var(--bg-2);color:var(--text)}
.ov-prod img,.ov-prod-ph{width:36px;height:36px;border-radius:9px;object-fit:cover;flex:none;background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
@media (max-width:1100px){.ov-top{grid-template-columns:1fr}.ov-cols{grid-template-columns:1fr 1fr}.ov-cols .ov-card:last-child{grid-column:1/-1}}
@media (max-width:720px){.ov-money{grid-template-columns:1fr}.ov-money-side{border-left:0;border-top:1px solid var(--border)}.ov-kpis{grid-template-columns:1fr 1fr}.ov-kpi:nth-child(2){border-right:0}.ov-kpi:nth-child(-n+2){border-bottom:1px solid var(--border)}.ov-cols{grid-template-columns:1fr}.ov-big{font-size:2.1rem}.ov-custom-pop{right:auto;left:0}}
.ov-bar-row .row-between{flex-wrap:nowrap;gap:10px}
.ov-bar-row .ov-ellipsis{flex:1}
.layout-side>*{min-width:0}
@media (max-width:960px){.side-nav{scrollbar-width:none}.side-nav::-webkit-scrollbar{display:none}.side-nav>.row{display:none}}
.ov-range{max-width:100%}

/* ---- store page v2 ---- */
.store-hero{border:1px solid var(--border);border-radius:22px;background:var(--surface);overflow:hidden;margin:24px 0 8px}
.store-cover{height:240px;background:var(--grad);background-size:cover;background-position:center;position:relative}
.store-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35))}
.store-cover-edit{position:absolute;right:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;font-weight:600;backdrop-filter:blur(6px)}
.store-cover-edit:hover{color:#fff;background:rgba(0,0,0,.7)}
.store-id{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;padding:0 24px;margin-top:-52px;position:relative;z-index:1}
.store-avatar{width:124px;height:124px;border-radius:50%;border:5px solid var(--surface);background:var(--bg-2);position:relative;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.store-avatar img,.store-avatar span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;color:var(--violet);background:var(--violet-bg)}
.store-dot{position:absolute;right:6px;bottom:8px;width:20px;height:20px;border-radius:50%;border:4px solid var(--surface);background:var(--success)}
.store-dot.busy{background:var(--warning)}.store-dot.away{background:var(--muted)}.store-dot.vacation{background:var(--info)}
.store-name{padding-top:60px;min-width:0}
.store-name h1{margin:0;font-size:1.75rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.store-verified{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;align-items:center;justify-content:center}
.store-verified .icon-sm{width:13px;height:13px}
.store-tagline{margin:2px 0 0;color:var(--text-2)}
.store-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;color:var(--muted);font-size:.84rem}
.store-meta span{display:inline-flex;align-items:center;gap:5px}
.store-status{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--success)}
.store-status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.store-status.busy{color:var(--warning)}.store-status.away{color:var(--muted)}.store-status.vacation{color:var(--info)}
.store-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-bottom:4px}
.store-note{margin:16px 24px 0;padding:10px 14px;border-radius:12px;display:flex;gap:10px;align-items:center;font-size:.9rem;background:var(--violet-bg);color:var(--text)}
.store-note.busy{background:var(--warning-bg)}.store-note.vacation{background:var(--info-bg)}.store-note.away{background:var(--bg-2)}
.store-stats{display:flex;flex-wrap:wrap;margin:18px 24px 0;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.store-stats div{flex:1 1 110px;padding:12px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.store-stats div:last-child{border-right:0}
.store-stats strong{font-size:1.2rem;font-weight:800;display:inline-flex;align-items:center;gap:4px}
.store-stats strong .icon-sm{color:var(--warning)}
.store-stats span{color:var(--muted);font-size:.78rem}
.store-tabs{display:flex;gap:4px;padding:14px 18px 0;overflow-x:auto;scrollbar-width:none}
.store-tabs::-webkit-scrollbar{display:none}
.store-tabs a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;font-size:.92rem;white-space:nowrap}
.store-tabs a:hover{color:var(--text)}
.store-tabs a.on{color:var(--text);border-bottom-color:var(--violet)}
.store-tabs em{font-style:normal;font-size:.72rem;padding:1px 7px;border-radius:999px;background:var(--bg-2);color:var(--muted)}
.store-tabs a.on em{background:var(--violet-bg);color:var(--violet)}
.store-reviews{display:grid;grid-template-columns:280px 1fr;gap:18px;margin:18px 0 32px;align-items:start}
.store-score{padding:20px;position:sticky;top:130px}
.store-score-big{font-size:3rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.store-score-row{display:flex;align-items:center;gap:10px;padding:5px 6px;margin:0 -6px;border-radius:8px;color:var(--text);font-size:.85rem}
.store-score-row:hover,.store-score-row.on{background:var(--bg-2);color:var(--text)}
.store-score-row>span:first-child{display:inline-flex;align-items:center;gap:3px;width:34px}
.store-score-row .icon-sm{color:var(--warning);width:13px;height:13px}
.store-score-row .ov-bar{margin:0}
.store-about{display:grid;grid-template-columns:1fr 340px;gap:18px;margin:18px 0 32px;align-items:start}
.store-bio{white-space:pre-line;color:var(--text-2);line-height:1.65}
.store-links{display:flex;flex-wrap:wrap;gap:8px}
.store-links a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text);font-size:.85rem;font-weight:600}
.store-links a:hover{border-color:var(--violet);color:var(--violet)}
.store-facts{margin:0}
.store-facts div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.store-facts div:last-child{border-bottom:0}
.store-facts dt{color:var(--muted)}
.store-facts dd{margin:0;font-weight:600;text-align:right}
@media (max-width:900px){.store-id{grid-template-columns:auto 1fr}.store-actions{grid-column:1/-1;justify-content:flex-start}.store-reviews,.store-about{grid-template-columns:1fr}.store-score{position:static}}
@media (max-width:600px){.store-cover{height:160px}.store-id{grid-template-columns:1fr;padding:0 16px;margin-top:-48px;gap:10px}.store-avatar{width:96px;height:96px}.store-name{padding-top:0}.store-name h1{font-size:1.4rem}.store-note,.store-stats{margin-left:16px;margin-right:16px}.store-stats div{flex-basis:33%;border-bottom:1px solid var(--border)}.store-tabs{padding:10px 8px 0}}

/* ---- store profile editor ---- */
.pf-section{scroll-margin-top:120px}
.pf-preview{border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:16px}
.pf-preview-cover{height:130px;background:var(--grad);background-size:cover;background-position:center}
.pf-preview-id{display:flex;align-items:flex-end;gap:12px;padding:0 16px 14px;margin-top:-36px}
.pf-preview-id img,.pf-preview-id .pf-ph{width:72px;height:72px;border-radius:50%;border:4px solid var(--surface);object-fit:cover;background:var(--violet-bg);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--violet)}
.pf-media{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf-media fieldset{border:1px solid var(--border);border-radius:14px;padding:14px;margin:0;display:grid;gap:10px}
.pf-media legend{font-weight:700;padding:0 6px}
.pf-choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;cursor:pointer}
.pf-choice:has(input:checked){border-color:var(--violet);background:var(--violet-bg)}
.pf-choice input{margin-top:3px}
.pf-choice small{display:block;color:var(--muted)}
.pf-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--bg-2);font-size:.85rem}
.pf-avail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pf-avail label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;cursor:pointer;font-weight:600;font-size:.88rem}
.pf-avail label:has(input:checked){border-color:var(--violet);background:var(--violet-bg)}
.pf-avail input{position:absolute;opacity:0;pointer-events:none}
.pf-socials{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:720px){.pf-media,.pf-socials{grid-template-columns:1fr}.pf-avail{grid-template-columns:1fr 1fr}}
#privacy .switch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pf-save{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:flex-end;margin-top:4px}
.pf-save .btn{box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* mobile tab bar */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; height: 64px; padding: 0 6px; display: flex; align-items: center; border-radius: 20px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .7); }
  .tabbar .tab { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 650; -webkit-tap-highlight-color: transparent; }
  button.tab { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
  .tabbar .tab-ico { position: relative; width: 48px; height: 28px; border-radius: 999px; display: grid; place-items: center; transition: background .2s; }
  .tabbar .tab .icon { width: 21px; height: 21px; stroke-width: 1.8; }
  .tabbar .tab-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar .tab:hover { color: var(--text-2); }
  .tabbar .tab.on { color: var(--text); }
  .tabbar .tab.on .tab-ico { color: var(--violet); background: color-mix(in srgb, var(--violet) 18%, transparent); }
  .tabbar .tab-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: .6rem; font-weight: 800; color: var(--text); background: var(--bg-2); }
  .tabbar .tab.on .tab-avatar { box-shadow: 0 0 0 2px var(--violet); }
  .tabbar .tab-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .tabbar .tab-dot { position: absolute; top: -3px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .6rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
  .tabbar .tab-dot[hidden] { display: none; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ai-fab, .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-mobile-buy .tabbar { display: none; }
  body.has-mobile-buy { padding-bottom: 74px; }
}

/* mobile polish */
@media (hover: none) { .pcard-fav { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .footer { margin-top: 48px; padding: 36px 0 22px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 12px; }
  .footer strong { font-size: .84rem; white-space: nowrap; }
  .footer-grid a { font-size: .82rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; margin-top: 26px; }
}
@media (max-width: 560px) {
  .section { margin: 40px 0; }
  .section-head { margin-bottom: 16px; gap: 12px; flex-wrap: nowrap; }
  .section-head > div { min-width: 0; }
  .section-head h2 { font-size: 1.35rem; margin-bottom: 2px; }
  .section-head p { font-size: .86rem; }
  .see-all { padding: 6px 0 6px 8px; font-size: .85rem; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row > * { flex: none; }

  .cat-tile { gap: 10px; min-height: 0; padding: 13px; border-radius: 16px; }
  .cat-tile .ico { width: 38px; height: 38px; border-radius: 11px; }
  .cat-tile .ico .icon { width: 18px; height: 18px; }
  .cat-tile > span:last-child { min-width: 0; }
  .cat-tile .t { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cat-tile .c { font-size: .74rem; }
  .cat-tile::after { width: 80px; height: 80px; right: -34px; top: -34px; }

  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-products .pcard { border-radius: 16px; }
  .grid-products .pcard-media { margin: 6px 6px 0; border-radius: 11px; }
  .grid-products .pcard-body { padding: 10px 11px 12px; gap: 6px; }
  .grid-products .pcard-cat { font-size: .64rem; }
  .grid-products .pcard-title { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .grid-products .pcard-vendor { font-size: .74rem; gap: 6px; }
  .grid-products .mini { width: 18px; height: 18px; border-radius: 6px; }
  .grid-products .pcard-stats { font-size: .72rem; gap: 8px; flex-wrap: wrap; }
  .grid-products .pcard-foot { padding-top: 8px; }
  .grid-products .pcard-foot .price { font-size: 1rem; }
  .grid-products .pcard-badges { top: 7px; left: 7px; }
  .grid-products .pcard-badges .badge { height: 21px; font-size: .66rem; padding: 0 7px; }
  .grid-products .pcard-fav { top: 11px; right: 11px; width: 30px; height: 30px; }

  /* horizontal rails on the homepage */
  .rail, .grid-products.rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; min-width: 0; }
  .bundle-row.rail { grid-auto-columns: 86%; }
  .grid-products.rail .pcard-title { font-size: .95rem; }
  .grid-products.rail .pcard-body { padding: 12px 13px 14px; gap: 7px; }

  .creators { gap: 10px; }
  .creator { padding: 12px 14px; border-radius: 16px; }
  .creator .avatar { width: 44px; height: 44px; border-radius: 13px; }

  .band { padding: 22px 20px; border-radius: 22px; gap: 18px; }
  .band h2 { font-size: 1.3rem; }
  .band p { font-size: .9rem; }
  .band .btn { width: 100%; justify-content: center; }
}

/* categories page */
.catx-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 6px 0 22px; }
.catx-grid { --gap: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.catx-grid > .catx { flex: 0 0 calc((100% - (var(--cols, 4) - 1) * var(--gap)) / var(--cols, 4)); min-width: 0; }
.catx { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: border-color .15s, transform .15s; }
.catx:hover { border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); transform: translateY(-2px); }
.catx::after { content: ""; position: absolute; right: -50px; top: -50px; width: 140px; height: 140px; border-radius: 50%; background: var(--tile); opacity: .09; pointer-events: none; }
.catx-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; color: var(--text); }
.catx-main:hover { color: var(--text); }
.catx .ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--tile); box-shadow: 0 10px 22px -10px var(--tile-shadow); }
.catx .ico .icon { width: 22px; height: 22px; }
.catx-text { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 3px; }
.catx-text strong { font-size: 1.05rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.25; }
.catx-text small { color: var(--muted); font-size: .82rem; font-weight: 500; }
.catx-sublist { display: none; }
.catx .go { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: var(--bg-2); transition: transform .15s, color .15s; }
.catx-main:hover .go { color: var(--text); transform: translateX(2px); }
.catx-subs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; padding: 0 18px 18px; }
.catx-subs a { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--bg-2); color: var(--text-2); font-size: .76rem; font-weight: 600; white-space: nowrap; max-width: 100%; }
.catx-subs a:hover { color: var(--text); background: color-mix(in srgb, var(--violet) 14%, var(--bg-2)); }
.catx-subs a span { font-size: .68rem; font-weight: 700; color: var(--muted); }
.catx-subs a.empty { color: var(--muted); }
@media (max-width: 900px) { .catx-grid > .catx { flex-basis: calc((100% - (var(--cols-md, 2) - 1) * var(--gap)) / var(--cols-md, 2)); } }
@media (max-width: 560px) {
  .catx-grid { --gap: 10px; }
  .catx-grid > .catx { flex-basis: calc((100% - var(--gap)) / 2); }
  .catx-head h1 { margin-bottom: 16px; }
  .catx { border-radius: 16px; }
  .catx-main { padding: 13px; gap: 10px; }
  .catx .ico { width: 40px; height: 40px; border-radius: 12px; }
  .catx .ico .icon { width: 19px; height: 19px; }
  .catx .go { top: 13px; right: 13px; width: 26px; height: 26px; border-radius: 8px; }
  .catx-text strong { font-size: .9rem; }
  .catx-text small { font-size: .74rem; }
  .catx-subs { display: none; }
  .catx-sublist { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; color: var(--text-2); font-size: .72rem; font-weight: 500; line-height: 1.4; opacity: .8; }
}

/* "Me" account sheet (mobile tab bar) */
.sheet { display: none; }
@media (max-width: 860px) {
  body:not(.has-mobile-buy) .hdr-actions > .menu:not(.notif-menu):not(.cart-menu) { display: none; }
  html.sheet-lock { overflow: hidden; }
  .sheet { position: fixed; inset: 0; z-index: 90; display: block; visibility: hidden; pointer-events: none; }
  .sheet.open { visibility: visible; pointer-events: auto; }
  .sheet .shade { position: absolute; inset: 0; background: rgba(4, 5, 9, .6); opacity: 0; transition: opacity .2s; }
  .sheet.open .shade { opacity: 1; }
  .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .7); transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  .sheet.open .sheet-panel { transform: none; }
  .sheet-grip { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--border-strong); }
  .me-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; }
  .me-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; color: var(--text); background: var(--bg-2); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--violet); }
  .me-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .me-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .me-name strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .me-name small { color: var(--muted); font-size: .8rem; }
  .me-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 -4px 14px; }
  .me-quick a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 0 8px; border-radius: 14px; background: none; border: 0; color: var(--text-2); font-size: .7rem; letter-spacing: -.01em; font-weight: 650; min-width: 0; text-align: center; }
  .me-quick .ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); }
  .me-quick .ico .icon { width: 19px; height: 19px; }
  .me-quick a > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .me-list { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; }
  .me-list > a, .me-list > button, .me-list form button { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 14px; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text-2); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
  .me-list form { margin: 0; }
  .me-list form button { border-bottom: 0; }
  .me-list > a > span, .me-list button > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .me-list .icon { width: 19px; height: 19px; flex: none; color: var(--muted); }
  .me-list .go { width: 15px; height: 15px; }
  .me-list > a:active, .me-list button:active { background: var(--bg-2); }
  .me-list .me-out, .me-list .me-out .icon { color: var(--danger); }
}
@media (max-width: 340px) { .hero-proof li { gap: 8px; padding: 10px; } .hero-proof .hp-ico { width: 28px; height: 28px; border-radius: 8px; } .hero-proof .hp-ico .icon { width: 15px; height: 15px; } .hero-proof b { font-size: 1rem; } .hero-proof small { font-size: .72rem; } }

/* header notifications popup */
.notif-panel { width: 380px; max-width: calc(100vw - 20px); padding: 0; overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.notif-head strong { font-size: .98rem; }
.notif-new { font-size: .72rem; font-weight: 700; color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); padding: 3px 8px; border-radius: 999px; }
.notif-list { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.notif-panel .notif { display: flex; align-items: flex-start; gap: 11px; padding: 10px; border-radius: 12px; color: var(--text-2); position: relative; }
.notif-panel .notif:hover { background: var(--bg-2); color: var(--text); }
.notif-panel .notif.unread { background: color-mix(in srgb, var(--violet) 9%, transparent); }
.notif-panel .notif.unread::after { content: ""; position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.notif-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 14px; }
.notif-body strong { font-size: .86rem; color: var(--text); line-height: 1.3; }
.notif-body small { font-size: .8rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-body time { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 20px; }
.notif-empty strong { color: var(--text); font-size: .92rem; margin-top: 4px; }
.notif-empty small { color: var(--muted); font-size: .8rem; max-width: 260px; }
.notif-loading { display: flex; justify-content: center; gap: 6px; padding: 30px; }
.notif-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: notifdot 1s infinite ease-in-out; }
.notif-loading span:nth-child(2) { animation-delay: .15s; } .notif-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes notifdot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
.notif-panel .notif-all { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 13px; border-top: 1px solid var(--border); border-radius: 0; color: var(--violet); font-weight: 700; font-size: .88rem; }
.notif-panel .notif-all:hover { background: var(--bg-2); color: var(--violet); }
@media (max-width: 860px) {
  .notif-menu { position: static; }
  .notif-panel { position: fixed; top: 62px; left: 10px; right: 10px; width: auto; max-width: none; border-radius: 18px; }
  .notif-list { max-height: calc(100vh - 64px - 200px); }
}

/* header cart popup (shares the notifications panel shell) */
.cart-panel .notif-list { padding: 4px 6px; }
.mini-cart-warn { display: flex; align-items: center; gap: 8px; margin: 6px 6px 2px; padding: 9px 11px; border-radius: 10px; font-size: .8rem; color: var(--warning, #f5a524); background: color-mix(in srgb, #f5a524 12%, transparent); }
.mini-line { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 12px; }
.mini-line + .mini-line { border-top: 1px solid var(--border); border-radius: 0; }
.mini-thumb { flex: none; width: 64px; height: 42px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-panel .mini-thumb { display: grid; flex: none; width: 64px; height: 42px; padding: 0; border-radius: 9px; }
.cart-panel .mini-info a { width: auto; }
.cart-panel .mini-total, .cart-panel .mini-actions { position: sticky; background: var(--raised); z-index: 1; }
.cart-panel .mini-total { bottom: 58px; }
.cart-panel .mini-actions { bottom: -4px; padding-bottom: 10px; }
.mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cart-panel .mini-info a { display: block; padding: 0; color: var(--text); }
.cart-panel .mini-info a:hover { background: none; color: var(--violet); }
.mini-info strong { display: block; font-size: .84rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info small { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-price { font-size: .86rem; font-weight: 750; color: var(--text); }
.mini-price s { margin-left: 6px; color: var(--muted); font-weight: 500; font-size: .76rem; }
.mini-line form { margin: 0; }
.cart-panel .mini-remove { width: 30px; height: 30px; padding: 0; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: none; border: 0; cursor: pointer; }
.cart-panel .mini-remove:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.mini-total { margin: 4px 8px 0; padding: 12px 0 4px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--text-2); }
.mini-total > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mini-total .ok { color: var(--success, #22c55e); font-weight: 650; }
.mini-total .grand { color: var(--text); }
.mini-total .grand small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.mini-total .grand strong { font-size: 1.15rem; letter-spacing: -.02em; }
.mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 8px 8px; }
.mini-actions.single { grid-template-columns: 1fr; }
.cart-panel .mini-actions .btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 0 12px; height: 42px; border-radius: 12px; font-weight: 700; }
.cart-panel .mini-actions .btn { background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--text); }
.cart-panel .mini-actions .btn:hover { background: color-mix(in srgb, var(--text) 8%, var(--bg-2)); }
.cart-panel .mini-actions .btn-primary, .cart-panel .mini-actions .btn-primary:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.cart-panel .mini-actions .btn-primary:hover { background: var(--violet-2); }
.mini-price .free { color: var(--success, #22c55e); }
.cart-panel .notif-empty .btn { display: inline-flex; width: auto; padding: 0 14px; }
@media (max-width: 860px) { .cart-menu { position: static; } }

/* vendor: customers */
.cust-head { margin-bottom: 18px; }
.cust-head p { margin-top: 4px; }
.cust-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cust-stats > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.cust-stats .ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.cust-stats .ico.ok { color: #22c55e; background: rgba(34, 197, 94, .13); }
.cust-stats .ico.warn { color: #f5a524; background: rgba(245, 165, 36, .14); }
.cust-stats b { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; }
.cust-stats small { color: var(--muted); font-size: .78rem; }
.cust-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 14px; }
.cust-search { position: relative; }
.cust-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cust-search .input { width: 100%; padding-left: 34px; }
.cust-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; margin-bottom: 16px; }
.cust-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px 18px; align-items: center; padding: 14px 16px; }
.cust-row + .cust-row { border-top: 1px solid var(--border); }
.cust-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cust-who .avatar { width: 40px; height: 40px; flex: none; }
.cust-name, .cust-item, .cust-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-name strong, .cust-item a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-name strong { font-size: .92rem; }
.cust-item a { color: var(--text); font-weight: 650; font-size: .88rem; }
.cust-item a:hover { color: var(--violet); }
.cust-name small, .cust-item small, .cust-status small { color: var(--muted); font-size: .76rem; }
.cust-revoked { color: var(--danger); font-weight: 650; }
.cust-status { align-items: flex-start; }
.cust-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.ok-pill { color: #22c55e; background: rgba(34, 197, 94, .13); }
.warn-pill { color: #f5a524; background: rgba(245, 165, 36, .14); }
.muted-pill { color: var(--text-2); background: var(--bg-2); }
.cust-history { grid-column: 1 / -1; margin-top: 2px; }
.cust-history summary { cursor: pointer; width: max-content; font-size: .8rem; font-weight: 650; color: var(--violet); }
.cust-history ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.cust-history li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--bg-2); font-size: .8rem; color: var(--text-2); }
.cust-history li span { color: var(--muted); }
.cust-history .v { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--violet); }
@media (max-width: 900px) {
  .cust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cust-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cust-search { grid-column: 1 / -1; }
  .cust-filters .btn { display: none; }
  .cust-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cust-item { padding-left: 51px; }
  .cust-status { padding-left: 51px; }
}
@media (max-width: 420px) { .cust-stats > div { padding: 12px; column-gap: 10px; } .cust-stats .ico { width: 34px; height: 34px; } .cust-stats b { font-size: 1.1rem; } }

/* Vendor invite bar (header, members without a store) */
.vbar { background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 16%, var(--surface)), color-mix(in srgb, var(--cyan) 12%, var(--surface))); border-bottom: 1px solid var(--border); font-size: .86rem; }
.vbar-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.vbar-ico { display: inline-flex; color: var(--violet); flex: none; }
.vbar p { margin: 0; color: var(--text-2); flex: 1; min-width: 0; }
.vbar p strong { color: var(--text); }
.vbar-more { display: inline-flex; align-items: center; gap: 4px; color: var(--violet); font-weight: 650; white-space: nowrap; }
.vbar-more:hover { text-decoration: underline; }
.vbar-x { display: inline-flex; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; flex: none; }
.vbar-x:hover { color: var(--text); background: var(--bg-2); }
.vbar-short { display: none; }
@media (max-width: 560px) { .vbar-long { display: none; } .vbar-short { display: inline; } }

/* Become-a-vendor portal */
.vp-bar { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; }
.vp-bar + .vp-bar { border-top: 1px solid var(--border); }
.vp-bar span { grid-column: 1 / -1; order: 3; display: block; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.vp-bar b { font-weight: 650; } .vp-bar em { font-style: normal; color: var(--text-2); font-size: .9rem; }
.vp-bar-us span { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.vp-bar-us b, .vp-bar-us em { color: var(--violet); font-weight: 750; }
.vp-keep { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.vp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vp-grid { grid-template-columns: 1fr; } }
.vp-feature h3, .vp-steps h3 { margin: 10px 0 4px; font-size: 1rem; }
.vp-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--violet-bg); color: var(--violet); flex: none; }
.vp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vp-steps li { display: flex; align-items: flex-start; gap: 14px; }
.vp-steps h3 { margin-top: 2px; }
.vp-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); color: #fff; font-weight: 800; font-size: .85rem; flex: none; margin-top: 7px; }
.vp-subs h2 { margin: 8px 0 14px; }
.vp-subs .feature-list li { color: #fff; font-weight: 550; } .vp-subs .feature-list .icon { color: #fff; } .vp-subs .hint { color: rgba(255, 255, 255, .88); }
@media (max-width: 560px) { .vp-hero { padding: 30px 20px; } .vp-hero .row .btn { flex: 1 1 100%; justify-content: center; } }
.vp-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 28px; align-items: start; }
.vp-calc-in { display: grid; gap: 0; }
.vp-calc .table-wrap, .vp-calc > .hint { grid-column: 1 / -1; }
.vp-money { position: relative; } .vp-money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 650; pointer-events: none; } .vp-money .input { padding-left: 34px; font-size: 1.1rem; font-weight: 650; }
.vp-calc-total { align-self: center; padding: 22px; border-radius: 18px; background: var(--violet-bg); border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); }
.vp-calc-total .big-price { color: var(--violet); margin: 4px 0; overflow-wrap: anywhere; }
.vp-calc-table tr.on td { background: var(--violet-bg); }
.vp-calc-table td, .vp-calc-table th { white-space: nowrap; }
@media (max-width: 720px) { .vp-calc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vp-calc-table .c-gross { display: none; } .vp-calc-table th, .vp-calc-table td { padding-left: 6px; padding-right: 6px; font-size: .82rem; } .vp-calc-table th { letter-spacing: .02em; } }
@media (max-width: 560px) { .vp-calc.card-body { padding: 16px 12px; } .vp-calc-table { min-width: 0; } .vp-calc-table th, .vp-calc-table td { padding-left: 4px; padding-right: 4px; font-size: .76rem; } }
/* Calculator headings line up with their numbers (the generic .table th rule forces left). */
.vp-calc-table th.right, .vp-calc-table td.right { text-align: right; }
.vp-calc-table th:first-child, .vp-calc-table td:first-child { width: 1%; padding-right: 24px; }

/* Cookie consent (analytics) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin: 0 auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55); font-size: .88rem; }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 260px; color: var(--text-2); }
.consent p a { color: var(--violet); text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }

/* Author subscription tier cards */
.asub-grid { grid-template-columns: repeat(var(--asub-cols, 3), minmax(0, 1fr)); gap: 18px; padding-top: 12px; }
@media (max-width: 1100px) { .asub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .asub-grid { grid-template-columns: 1fr; } }
.asub-card { gap: 14px; padding: 24px 20px 20px; background: var(--surface); }
.asub-card.is-featured { background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 12%, var(--surface)), var(--surface) 55%); }
.asub-top { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.asub-name { font-size: 1.05rem; color: var(--text-2); font-weight: 700; }
.asub-price strong { font-size: 2.1rem; }
.asub-worth { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--success) 14%, transparent); }
.asub-desc { margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.5em * 3); }
.asub-desc strong { color: var(--text); font-weight: 650; }
.asub-label { font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.asub-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.asub-inc li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--text); }
.asub-inc-ico { width: 28px; height: 28px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.asub-inc-ico img { width: 100%; height: 100%; object-fit: cover; }
.asub-inc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asub-inc-more, .asub-more { color: var(--muted) !important; font-weight: 600; font-size: .82rem !important; padding-left: 38px; }
.asub-benefits .asub-more { padding-left: 24px; }
.asub-card .asub-benefits { padding-top: 14px; border-top: 1px solid var(--border); }
.asub-card .btn-block { margin-top: auto; }
/* Same height for every card's item list (4 rows + "more"), so the rows below line up across plans. */
@media (min-width: 621px) { .asub-grid .asub-block { min-height: calc(18px + 4 * 34px + 22px); } }
.asub-inc li { min-height: 28px; }

/* Plan cards: "+ N more" items / perks open in place */
.asub-more-box { display: grid; margin-top: -14px; }
.asub-block .asub-more-box { margin-top: 0; }
.asub-block .asub-more-body ul { padding-top: 6px !important; }
.asub-more-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; }
.asub-more-body > div { overflow: hidden; min-height: 0; }
.asub-more-body ul { padding-top: 8px !important; border-top: 0 !important; }
.asub-more-box.open .asub-more-body { grid-template-rows: 1fr; opacity: 1; }
.asub-more-box.open .asub-more-body li { animation: asub-more-in .3s ease both; }
.asub-more-box.open .asub-more-body li:nth-child(2) { animation-delay: .04s; }
.asub-more-box.open .asub-more-body li:nth-child(3) { animation-delay: .08s; }
.asub-more-box.open .asub-more-body li:nth-child(n+4) { animation-delay: .12s; }
@keyframes asub-more-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.asub-more-btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 10px 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--bg-2); color: var(--text-2); font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.asub-more-btn:hover, .asub-more-btn:focus-visible { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); color: var(--text); background: var(--violet-bg); }
.asub-more-btn .icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.asub-more-box.open .asub-more-btn .icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .asub-more-body, .asub-more-btn .icon { transition: none; } .asub-more-box.open .asub-more-body li { animation: none; } }

/* Buy box refreshed live (claim done, price changed). */
.buybox-note { margin: 0; animation: buybox-in .35s cubic-bezier(.2, .7, .2, 1); }
.buybox.buybox-flash .card { animation: buybox-flash 1.4s ease-out; }
@keyframes buybox-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes buybox-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .buybox-note, .buybox.buybox-flash .card { animation: none; } }

/* Phones: the first table column (item + thumb) keeps room for its name; the table scrolls sideways instead. */
@media (max-width: 720px) {
  table.table td:first-child > .row { min-width: 220px; }
  table.table td:first-child a { overflow-wrap: anywhere; }
  /* An empty table's message stays in view instead of centring on the full scroll width. */
  .table-wrap td > .empty { position: sticky; left: 0; width: calc(100vw - 32px); max-width: 100%; box-sizing: border-box; }
}