/* ---------------------------------------------------------------------
   Candy AI Shorts: dedicated dark landing page.

   This page gets its own template rather than the shared article shell:
   no sidebar, no table of contents rail, full width for the poster wall,
   and a dark ground so the catalogue reads like the product it reviews.
   Scoped to body.aihub-cshorts so nothing leaks to other pages.
   --------------------------------------------------------------------- */

body.aihub-cshorts{background:#0A0A0A;color:#fff}
body.aihub-cshorts main,
body.aihub-cshorts main.wrap,
body.aihub-cshorts .site-content{max-width:none;background:transparent}

.cs{--edge:clamp(16px,4vw,40px);--maxw:1240px;--prose:820px}
.cs a{color:inherit}
.cs-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--edge)}
.cs-prose{max-width:var(--prose);margin-inline:auto}

/* ---- hero ---- */
.cs-hero{position:relative;overflow:hidden;padding:clamp(38px,6vw,74px) 0 clamp(28px,4vw,44px)}
.cs-hero::before{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background:
		radial-gradient(120% 90% at 78% 8%,rgba(249,47,187,.20) 0%,rgba(249,47,187,0) 58%),
		radial-gradient(90% 80% at 6% 96%,rgba(139,92,246,.16) 0%,rgba(139,92,246,0) 60%);
}
.cs-hero .cs-in{position:relative;z-index:1}
.cs-eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--pink,#F92FBB);color:#0A0A0A;
	font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
	padding:6px 13px;border-radius:999px;margin:0 0 16px;
}
.cs-h1{
	font-size:clamp(32px,6vw,60px);line-height:1.03;letter-spacing:-.03em;
	font-weight:800;margin:0 0 16px;max-width:16ch;color:#fff;
}
.cs-h1 em{font-style:normal;color:var(--pink,#F92FBB)}
.cs-lede{font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:rgba(255,255,255,.76);max-width:62ch;margin:0 0 26px}

.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin:0 0 26px;max-width:760px}
.cs-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px 16px}
.cs-stat b{display:block;font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.1;color:#fff}
.cs-stat span{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.62)}

.cs-btn{
	display:inline-block;background:var(--pink,#F92FBB);color:#0A0A0A !important;
	font-weight:800;font-size:15px;text-decoration:none;
	padding:14px 26px;border-radius:999px;line-height:1;
}
.cs-btn:hover{background:#ff57c8}
.cs-btn--ghost{background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,.28)}
.cs-btn--ghost:hover{background:rgba(255,255,255,.08)}
.cs-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cs-fine{font-size:12.5px;color:rgba(255,255,255,.5);margin:14px 0 0}

/* ---- sections ---- */
.cs-sec{padding:clamp(34px,5vw,58px) 0;border-top:1px solid rgba(255,255,255,.08)}
.cs-sec--flush{border-top:0}
.cs-kicker{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pink,#F92FBB);margin:0 0 10px}
.cs-h2{font-size:clamp(23px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:0 0 16px;color:#fff}
.cs-sec p{font-size:16px;line-height:1.68;color:rgba(255,255,255,.78);margin:0 0 15px}
.cs-sec p strong{color:#fff}
.cs-sec ul{margin:0 0 18px;padding-left:20px}
.cs-sec li{margin:0 0 9px;line-height:1.6;color:rgba(255,255,255,.78)}
.cs-sec li::marker{color:var(--pink,#F92FBB)}

/* price cards */
.cs-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;margin:0 0 20px}
.cs-price div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:18px}
.cs-price b{display:block;font-size:24px;font-weight:800;color:#fff}
.cs-price span{display:block;margin-top:4px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.5}

/* ---- poster wall ---- */
.cs-wall{padding:clamp(30px,4vw,48px) 0}
.cs-wallhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.cs-count{font-size:13.5px;color:rgba(255,255,255,.58);font-weight:600}
.cs-chips{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 22px;padding:0;list-style:none}
.cs-chip{
	appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
	color:rgba(255,255,255,.88);font:inherit;font-size:13.5px;font-weight:700;
	padding:11px 18px;border-radius:999px;cursor:pointer;line-height:1;min-height:44px;
	transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cs-chip:hover{background:rgba(255,255,255,.12)}
.cs-chip[aria-pressed="true"]{background:var(--pink,#F92FBB);border-color:var(--pink,#F92FBB);color:#0A0A0A}
.cs-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:clamp(12px,1.5vw,20px)}
.cs-card{margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.cs-card[hidden]{display:none}
.cs-shot{position:relative;border-radius:14px;overflow:hidden;background:#17151a;line-height:0;transition:transform .18s ease,box-shadow .18s ease}
.cs-card:hover .cs-shot{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.cs-shot img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;display:block}
.cs-badge{
	position:absolute;top:9px;left:9px;z-index:2;
	background:var(--pink,#F92FBB);color:#0A0A0A;
	font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
	padding:5px 9px;border-radius:999px;line-height:1;
}
.cs-name{font-size:14px;font-weight:700;line-height:1.32;color:#fff;overflow-wrap:anywhere}
.cs-by{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px;display:block}
.cs-empty{color:rgba(255,255,255,.7);font-size:15px;padding:20px 0 0}

/* rest of the library */
.cs-more{columns:3;column-gap:26px;padding:0;margin:0;list-style:none}
.cs-more li{break-inside:avoid;padding:7px 0;font-size:14.5px;color:rgba(255,255,255,.74);border-bottom:1px solid rgba(255,255,255,.07)}
@media(max-width:900px){.cs-more{columns:2}}
@media(max-width:560px){.cs-more{columns:1}}

/* tags */
.cs-tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 18px;list-style:none}
.cs-tags li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px;font-size:13px;color:rgba(255,255,255,.82)}

/* faq */
.cs-faq details{border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.04);margin:0 0 10px;overflow:hidden}
.cs-faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;font-size:15.5px;color:#fff;display:flex;justify-content:space-between;gap:14px;align-items:center}
.cs-faq summary::-webkit-details-marker{display:none}
.cs-faq summary::after{content:"+";font-size:20px;font-weight:800;color:var(--pink,#F92FBB);line-height:1}
.cs-faq details[open] summary::after{content:"\2212"}
.cs-faq summary:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.cs-faq p{padding:0 18px 16px;margin:0;color:rgba(255,255,255,.76);font-size:15px;line-height:1.62}

/* closing cta */
.cs-end{background:linear-gradient(180deg,rgba(249,47,187,.14),rgba(249,47,187,.04));border:1px solid rgba(249,47,187,.26);border-radius:22px;padding:clamp(24px,4vw,40px);text-align:center;margin:0 0 clamp(34px,5vw,58px)}
.cs-end h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 12px;color:#fff}
.cs-end p{max-width:56ch;margin:0 auto 20px;color:rgba(255,255,255,.76)}

/* ---------------------------------------------------------------------
   The theme paints html, body and main.wrap cream, and those rules load
   after this file. Force the dark ground for this page only.
   --------------------------------------------------------------------- */

/* ---- shell override: must outrank #inner-wrap / #wrapper (1,0,0) ---- */
html:has(body.aihub-cshorts){background:#0A0A0A !important}
body.aihub-cshorts{background:#0A0A0A !important;color:#fff !important}
body.aihub-cshorts :is(#inner-wrap,#wrapper,#primary,#main,#content,#page,.site,.wp-site-blocks,.site-container,.site-content,.content-area,.content-container,.entry-content-wrap,.entry-content,.entry,.hentry,main,article){background:transparent !important;background-color:transparent !important;background-image:none !important;box-shadow:none !important;color:#fff !important;max-width:none !important;padding-left:0 !important;padding-right:0 !important}
body.aihub-cshorts .cs a:not(.cs-btn){color:#fff}
body.aihub-cshorts .cs-h1,body.aihub-cshorts .cs-h2,body.aihub-cshorts .cs-name,body.aihub-cshorts .cs-stat b,body.aihub-cshorts .cs-faq summary,body.aihub-cshorts .cs-price b,body.aihub-cshorts .cs-end h2{color:#fff !important}
body.aihub-cshorts .cs-lede,body.aihub-cshorts .cs-sec p,body.aihub-cshorts .cs-sec li,body.aihub-cshorts .cs-faq p,body.aihub-cshorts .cs-more li,body.aihub-cshorts .cs-tags li,body.aihub-cshorts .cs-end p{color:rgba(255,255,255,.78) !important}
body.aihub-cshorts .cs-by,body.aihub-cshorts .cs-stat span,body.aihub-cshorts .cs-count,body.aihub-cshorts .cs-fine,body.aihub-cshorts .cs-price span{color:rgba(255,255,255,.62) !important}
body.aihub-cshorts .cs-chip{color:rgba(255,255,255,.88) !important}
body.aihub-cshorts .cs-chip[aria-pressed="true"],body.aihub-cshorts .cs-btn:not(.cs-btn--ghost),body.aihub-cshorts .cs-badge{color:#0A0A0A !important}
body.aihub-cshorts .cs-kicker,body.aihub-cshorts .cs-h1 em{color:var(--pink,#F92FBB) !important}

/* ---- chrome keeps the normal site container ---- */
body.aihub-cshorts .hdr .wrap,body.aihub-cshorts .ftr .wrap,body.aihub-cshorts .promo .wrap,body.aihub-cshorts .drw .wrap{max-width:var(--maxw) !important;margin-inline:auto !important;padding-inline:var(--gut) !important}

/* ---- card affiliate link ---- */
body.aihub-cshorts .cs-card{position:relative}
body.aihub-cshorts .cs-link{position:absolute;inset:0;z-index:3;border-radius:14px;text-decoration:none}
body.aihub-cshorts .cs-link:focus-visible{outline:3px solid var(--pink,#F92FBB);outline-offset:3px}
body.aihub-cshorts .cs-card:hover .cs-name{color:var(--pink,#F92FBB) !important}
body.aihub-cshorts .cs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- hero: copy left, vertical preview right ---- */
body.aihub-cshorts .cs-hero__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,56px);align-items:center}
body.aihub-cshorts .cs-hero__copy{min-width:0}
body.aihub-cshorts .cs-hero__media{min-width:0;display:flex;justify-content:center}
body.aihub-cshorts .cs-vid{position:relative;margin:0;width:100%;max-width:300px;border-radius:24px;overflow:hidden;background:#17151a;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(249,47,187,.16)}
body.aihub-cshorts .cs-vid__el{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#17151a}
body.aihub-cshorts .cs-vid__btn{position:absolute;appearance:none;cursor:pointer;font:inherit;font-weight:700;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,10,.68);color:#fff !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s ease,border-color .15s ease}
body.aihub-cshorts .cs-vid__btn:hover{background:rgba(10,10,10,.85);border-color:var(--pink,#F92FBB)}
body.aihub-cshorts .cs-vid__btn:focus-visible{outline:3px solid var(--pink,#F92FBB);outline-offset:2px}
body.aihub-cshorts .cs-vid__sound{right:10px;bottom:10px;font-size:12px;padding:7px 13px}
body.aihub-cshorts .cs-vid__play{left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;padding:13px 22px;background:var(--pink,#F92FBB);color:#0A0A0A !important;border-color:transparent}
body.aihub-cshorts .cs-vid__play:hover{background:#ff57c8}
body.aihub-cshorts .cs-vid__play[hidden]{display:none}
body.aihub-cshorts .cs-vid__cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 12px 10px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.72) !important;text-align:left;padding-right:96px;background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.82))}
@media (max-width:900px){
  body.aihub-cshorts .cs-hero__in{grid-template-columns:minmax(0,1fr);gap:28px}
  body.aihub-cshorts .cs-vid{max-width:260px}
}