/* ============================================================
   WahahStore — Homepage builder: hero / category / promo variants
   ============================================================ */

/* ---------- Shared hero base ---------- */
.hv__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hv__copy--center { align-items: center; text-align: center; }
.hv__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 700; font-size: .9rem; }
.hv__chip--light { background: rgba(255, 255, 255, .18); color: #fff; }
.hv__chip .material-symbols-outlined { font-size: 1.1rem; }
.hv__title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.1; font-weight: 800; color: var(--on-surface); }
.hv__sub { color: var(--on-surface-variant); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 48ch; }
.hv__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hv__btns--center { justify-content: center; }
.hv__media { position: relative; display: grid; place-items: center; min-height: 300px; }
.hv__img { position: relative; z-index: 2; width: 100%; max-width: 520px; height: auto; animation: floaty 8s ease-in-out infinite; filter: drop-shadow(0 26px 28px rgba(0, 69, 228, .14)); }
.hv__blob { position: absolute; border-radius: 46% 54% 57% 43% / 50% 45% 55% 50%; z-index: 1; }
.hv__blob.b1 { width: 46%; aspect-ratio: 1; background: color-mix(in srgb, var(--primary) 20%, transparent); inset-block-start: -6%; inset-inline-end: -4%; animation: floaty 7s ease-in-out infinite; }
.hv__blob.b2 { width: 38%; aspect-ratio: 1; background: color-mix(in srgb, var(--secondary) 24%, transparent); inset-block-end: -8%; inset-inline-start: -4%; animation: floaty 9s ease-in-out 1s infinite; }

/* v1 — split */
.hero-v1 { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }

/* v2 — centered */
.hero-v2 { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.hero-v2 .hv__sub { max-width: 60ch; }
.hv__media--wide { width: 100%; max-width: 620px; }

/* v3 — full image + glass overlay */
.hero-v3 { min-height: 460px; border-radius: var(--radius-2xl); overflow: hidden; background-color: var(--surface-container); background-image: var(--hero-img); background-size: cover; background-position: center; display: flex; align-items: center; padding: clamp(20px, 4vw, 48px); }
.hv3__overlay { max-width: 540px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-xl); }

/* v4 — reversed split */
.hero-v4 { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; }

/* v5 — solid colour panel */
.hv5__panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; background: var(--primary); border-radius: var(--radius-2xl); padding: clamp(28px, 4vw, 56px); box-shadow: var(--cloud, 0 26px 50px -16px rgba(0,69,228,.22)); overflow: hidden; }
.hero-v5 .hv__title, .hero-v5 .hv__sub { color: #fff; }
.hero-v5 .hv__sub { opacity: .9; }
.hv5__ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.hv5__media { display: grid; place-items: center; }
.hv5__media .hv__img { filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .2)); }

/* v6 — big typographic, no image */
.hero-v6 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding: clamp(30px, 6vw, 70px) 0; }
.hv6__title { font-size: clamp(2.4rem, 7vw, 5rem); max-width: 16ch; }
.hv6__sub { max-width: 56ch; }
.hv6__dot { position: absolute; border-radius: 50%; z-index: 0; }
.hv6__dot.d1 { width: 90px; height: 90px; background: color-mix(in srgb, var(--primary) 12%, transparent); inset-block-start: 6%; inset-inline-start: 8%; }
.hv6__dot.d2 { width: 60px; height: 60px; background: color-mix(in srgb, var(--secondary) 18%, transparent); inset-block-start: 18%; inset-inline-end: 12%; }
.hv6__dot.d3 { width: 120px; height: 120px; background: color-mix(in srgb, var(--primary) 8%, transparent); inset-block-end: 0; inset-inline-end: 22%; }
.hero-v6 > * { position: relative; z-index: 1; }

/* v7 — glass card over colour band */
.hero-v7 { position: relative; padding: 40px 0; }
.hv7__band { position: absolute; inset-block: 0; inset-inline: -50vw; background: var(--surface-container); border-radius: var(--radius-2xl); z-index: 0; }
.hv7__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.hv7__card { padding: clamp(24px, 3vw, 42px); border-radius: var(--radius-xl); }
.hv7__media { display: grid; place-items: center; }

/* v8 — blob image, asymmetric */
.hero-v8 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hv8__media { position: relative; display: grid; place-items: center; min-height: 340px; }
.hv8__blob { width: 80%; aspect-ratio: 1; border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%; overflow: hidden; background: var(--surface-container); display: grid; place-items: center; box-shadow: 0 30px 50px -18px rgba(0, 69, 228, .25); animation: morph8 12s ease-in-out infinite; }
.hv8__blob .hv__img { width: 86%; max-width: none; animation: none; filter: none; }
@keyframes morph8 { 0%, 100% { border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%; } 50% { border-radius: 45% 55% 45% 55% / 50% 45% 55% 50%; } }
.hv8__ring { position: absolute; width: 92%; aspect-ratio: 1; border: 3px dashed color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 50%; z-index: 0; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hv8__star { position: absolute; color: var(--secondary); font-size: 1.6rem; z-index: 3; }
.hv8__star.s1 { inset-block-start: 6%; inset-inline-end: 12%; }
.hv8__star.s2 { inset-block-end: 10%; inset-inline-start: 8%; }

/* ---------- Hero responsive ---------- */
@media (max-width: 900px) {
    .hero-v1, .hero-v4, .hero-v8, .hv5__panel, .hv7__inner { grid-template-columns: 1fr; }
    .hero-v1 .hv__media, .hero-v8 .hv8__media { order: -1; }
    .hero-v4 .hv__media { order: -1; }
    .hv__copy { align-items: flex-start; }
    .hero-v3 { min-height: 380px; }
}
@media (max-width: 560px) {
    .hv__btns .btn { flex: 1; justify-content: center; }
}

/* ============ CATEGORY VARIANTS ============ */
/* v2 bubbles */
.cat-bubbles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 22px; }
.cbub { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cbub__img { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--outline-variant); display: grid; place-items: center; padding: 14px; box-shadow: var(--cloud-sm); transition: transform .3s, box-shadow .3s; }
.cbub:hover .cbub__img { transform: translateY(-6px) scale(1.03); box-shadow: var(--cloud); }
.cbub__img img { width: 100%; height: 100%; object-fit: contain; }
.cbub__name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--on-surface); }
/* v3 image tiles */
.cat-imgtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.citile { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; display: block; box-shadow: var(--cloud-sm); }
.citile__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--surface-low); transition: transform .5s; }
.citile:hover .citile__img { transform: scale(1.08); }
.citile__scrim { position: absolute; inset: 0; background: rgba(12, 18, 32, .42); transition: background .3s; }
.citile:hover .citile__scrim { background: rgba(12, 18, 32, .55); }
.citile__label { position: absolute; inset-inline: 16px; inset-block-end: 14px; color: #fff; font-family: var(--font-display); font-weight: 700; z-index: 2; display: flex; flex-direction: column; text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.citile__label small { font-weight: 400; opacity: .9; font-size: .78rem; }
/* v4 bento */
.cat-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; gap: 16px; }
.cben { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; box-shadow: var(--cloud-sm); }
.cben--lg { grid-column: span 2; grid-row: span 2; }
.cben__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--surface-low); transition: transform .5s; }
.cben:hover .cben__img { transform: scale(1.07); }
.cben__scrim { position: absolute; inset: 0; background: rgba(12, 18, 32, .4); }
.cben__label { position: absolute; inset-inline: 16px; inset-block-end: 14px; color: #fff; font-family: var(--font-display); font-weight: 700; z-index: 2; display: flex; flex-direction: column; text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.cben--lg .cben__label { font-size: 1.4rem; }
.cben__label small { font-weight: 400; opacity: .9; font-size: .78rem; }
/* v5 scroll */
.cat-scroll > .catcard--scroll { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
/* v6 list */
.cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.clist { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--outline-variant); transition: transform .25s, box-shadow .25s, border-color .25s; }
.clist:hover { transform: translateY(-3px); box-shadow: var(--cloud-sm); border-color: var(--primary); }
.clist__img { width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-low); flex-shrink: 0; display: grid; place-items: center; }
.clist__img img { width: 100%; height: 100%; object-fit: cover; }
.clist__body { flex: 1; display: flex; flex-direction: column; }
.clist__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.clist__count { color: var(--on-surface-variant); font-size: .82rem; }
.clist__arrow { color: var(--primary); }
/* v7 feature */
.cat-feature { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.cfeat { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.cfeat:hover { transform: translateY(-6px); box-shadow: var(--cloud); }
.cfeat__img { aspect-ratio: 16/10; background: var(--surface-low); overflow: hidden; }
.cfeat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cfeat:hover .cfeat__img img { transform: scale(1.06); }
.cfeat__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: 16px 18px 0; }
.cfeat__cta { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; padding: 8px 18px 18px; }
/* v8 chips */
.cat-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cchip { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--outline-variant); transition: transform .25s, box-shadow .25s; }
.cchip:hover { transform: translateY(-4px); box-shadow: var(--cloud-sm); }
.cchip__icon { width: 46px; height: 46px; border-radius: var(--radius); display: grid; place-items: center; color: #fff; background: var(--c); flex-shrink: 0; }
.cchip__name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.cchip__count { color: var(--on-surface-variant); font-weight: 700; font-size: .85rem; }

/* ============ PROMO VARIANTS ============ */
.pb { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--cloud); }
.pb__eye { font-weight: 700; font-size: .85rem; background: rgba(255, 255, 255, .16); padding: 6px 14px; border-radius: var(--radius-full); align-self: flex-start; }
.pb__eye--dark { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.pb h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.pb1 { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; background: var(--primary); color: #fff; }
.pb1__content { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; position: relative; z-index: 2; }
.pb1__content p { opacity: .9; max-width: 40ch; }
.pb1__content .btn--light { margin-top: 6px; }
.pb1__art { align-self: stretch; min-height: 200px; }
.pb1__art img { width: 100%; height: 100%; object-fit: cover; }
.pb__shape { position: absolute; inset-block: -30% auto; inset-inline-end: 30%; width: 40%; aspect-ratio: 1; background: rgba(255, 255, 255, .06); border-radius: 50%; z-index: 1; }
.pb2 { background: var(--primary); color: #fff; text-align: center; padding: clamp(36px, 6vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pb2 .pb__eye { align-self: center; }
.pb2 p { opacity: .9; max-width: 50ch; }
.pb2__c { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.pb2__c.c1 { width: 200px; height: 200px; inset-block-start: -60px; inset-inline-start: -40px; }
.pb2__c.c2 { width: 150px; height: 150px; inset-block-end: -50px; inset-inline-end: -30px; }
.pb3 { min-height: 300px; background-color: var(--primary); background-image: var(--pb-img); background-size: cover; background-position: center; display: flex; align-items: center; }
.pb3::before { content: ''; position: absolute; inset: 0; background: rgba(8, 16, 40, .55); }
.pb3__content { position: relative; z-index: 2; padding: clamp(28px, 5vw, 56px); color: #fff; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 560px; }
.pb3__content p { opacity: .92; }
.pb4 { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--surface); border: 1px solid var(--outline-variant); align-items: center; }
.pb4__text { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pb4__text h2 { color: var(--on-surface); }
.pb4__text p { color: var(--on-surface-variant); max-width: 40ch; }
.pb4__img { align-self: stretch; min-height: 220px; background: var(--surface-low); }
.pb4__img img { width: 100%; height: 100%; object-fit: cover; }
.pb5 { display: flex; align-items: center; gap: 20px; background: var(--primary); color: #fff; padding: 22px clamp(24px, 3vw, 40px); flex-wrap: wrap; }
.pb5__icon { width: 52px; height: 52px; border-radius: var(--radius); background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex-shrink: 0; }
.pb5__icon .material-symbols-outlined { font-size: 1.6rem; }
.pb5__body { flex: 1; min-width: 200px; }
.pb5__body h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.pb5__body p { opacity: .9; font-size: .9rem; }
.pb6 { background: var(--primary); color: #fff; padding: clamp(32px, 5vw, 60px); text-align: center; }
.pb6__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pb6__inner .pb__eye { align-self: center; }
.pb6__inner p { opacity: .9; max-width: 48ch; }
.pb6__blob { position: absolute; border-radius: 50%; z-index: 1; background: rgba(255, 255, 255, .08); }
.pb6__blob.bl1 { width: 160px; height: 160px; inset-block-start: -40px; inset-inline-start: 10%; }
.pb6__blob.bl2 { width: 100px; height: 100px; inset-block-end: -30px; inset-inline-start: 40%; background: rgba(254, 107, 0, .25); }
.pb6__blob.bl3 { width: 130px; height: 130px; inset-block-start: 20%; inset-inline-end: 6%; }
.pb7 { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; background: var(--primary); color: #fff; }
.pb7__img { align-self: stretch; min-height: 240px; }
.pb7__img img { width: 100%; height: 100%; object-fit: cover; }
.pb7__text { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pb7__text p { opacity: .9; max-width: 40ch; }
.pb8 { background: var(--surface-container); padding: clamp(32px, 5vw, 60px); }
.pb8__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.pb8__badge { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: var(--cloud-sm); }
.pb8__badge .material-symbols-outlined { font-size: 2rem; }
.pb8__inner h2 { color: var(--on-surface); }
.pb8__inner p { color: var(--on-surface-variant); max-width: 48ch; }

@media (max-width: 760px) {
    .pb1, .pb4, .pb7 { grid-template-columns: 1fr; }
    .pb1__art, .pb4__img, .pb7__img { min-height: 160px; }
    .pb7__img { order: -1; }
    .cat-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .cat-list { grid-template-columns: 1fr; }
}