/* ===== Kaassu Wishlist (scoped under .kwish) ===== */
 .kwish {
     --brand: #481088;
     --brand-2: #7a2bc9;
     --brand-3: #7a2bc9;
     --brand-dark: #350c66;
     --green: #f09028;
     --green-soft: #f7a63c;
     --ink: #15132b;
     --muted: #6b7280;
     --line: #ece9ff;
     --khbg: #f5f3fc;
     --radius: 22px;
     font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
     color: var(--ink);
     background: var(--khbg);
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }

 .kwish * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 .kwish .wrap {
     max-width: 1240px;
     margin: 0 auto;
     padding: 0 20px
 }

 .kwish a {
     text-decoration: none;
     color: inherit
 }

 .kwish img {
     max-width: 100%
 }

 /* cursor glow */
 .kwish .kh-cursor {
     position: fixed;
     top: 0;
     left: 0;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     opacity: 0;
     transition: opacity .4s ease;
     will-change: transform;
     background: radial-gradient(circle, rgba(122, 43, 201, .16), transparent 60%)
 }

 @media(hover:none) {
     .kwish .kh-cursor {
         display: none
     }
 }

 .kwish .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: .7s cubic-bezier(.2, .7, .3, 1)
 }

 .kwish .reveal.in {
     opacity: 1;
     transform: none
 }

 /* ===== HEAD BANNER ===== */
 .kwish .whead {
     position: relative;
     overflow: hidden;
     padding: 56px 0 96px;
     background: linear-gradient(125deg, #2a0a52 0%, #481088 42%, #7a2bc9 78%, #8a3bd6 100%)
 }

 .kwish .mesh {
     position: absolute;
     inset: 0;
     z-index: 0;
     opacity: .9
 }

 .kwish .mesh span {
     position: absolute;
     border-radius: 50%;
     filter: blur(60px);
     opacity: .55;
     mix-blend-mode: screen
 }

 .kwish .m1 {
     width: 400px;
     height: 400px;
     background: #7a2bc9;
     top: -90px;
     left: -60px;
     animation: kwFloat1 12s ease-in-out infinite
 }

 .kwish .m2 {
     width: 340px;
     height: 340px;
     background: #f7a63c;
     bottom: -130px;
     right: 8%;
     animation: kwFloat2 14s ease-in-out infinite
 }

 .kwish .m3 {
     width: 280px;
     height: 280px;
     background: #c084fc;
     top: 24%;
     right: -70px;
     animation: kwFloat1 16s ease-in-out infinite
 }

 @keyframes kwFloat1 {

     0%,
     100% {
         transform: translate(0, 0)
     }

     50% {
         transform: translate(30px, 40px)
     }
 }

 @keyframes kwFloat2 {

     0%,
     100% {
         transform: translate(0, 0)
     }

     50% {
         transform: translate(-40px, -30px)
     }
 }

 .kwish .grid-overlay {
     position: absolute;
     inset: 0;
     z-index: 0;
     opacity: .14;
     background-image: linear-gradient(rgba(255, 255, 255, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .4) 1px, transparent 1px);
     background-size: 46px 46px;
     -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
     mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%)
 }

 .kwish .whead .wrap {
     position: relative;
     z-index: 3
 }

 .kwish .crumb {
     color: rgba(255, 255, 255, .68);
     font-size: 12.5px;
     font-weight: 600;
     margin-bottom: 16px
 }

 .kwish .crumb a:hover {
     color: #fff
 }

 .kwish .crumb i {
     font-size: 9px;
     margin: 0 8px;
     opacity: .6
 }

 .kwish .pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 18px;
     border-radius: 30px;
     background: rgba(255, 255, 255, .14);
     border: 1px solid rgba(255, 255, 255, .25);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 18px;
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px)
 }

 .kwish .pill .live {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--green-soft);
     animation: kwPing 1.6s infinite
 }

 @keyframes kwPing {
     0% {
         box-shadow: 0 0 0 0 rgba(247, 166, 60, .6)
     }

     70% {
         box-shadow: 0 0 0 8px rgba(247, 166, 60, 0)
     }

     100% {
         box-shadow: 0 0 0 0 rgba(247, 166, 60, 0)
     }
 }

 .kwish .whead h1 {
     color: #fff;
     font-weight: 900;
     font-size: 44px;
     line-height: 1.08;
     letter-spacing: -1.3px;
     margin-bottom: 14px
 }

 .kwish .whead h1 .hl {
     background: linear-gradient(90deg, #f7a63c, #ffc879);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent
 }

 .kwish .whead .sub {
     color: rgba(255, 255, 255, .9);
     font-size: 17px;
     font-weight: 500;
     max-width: 560px
 }

 .kwish .wfeats {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 30px
 }

 .kwish .wfeat {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     padding: 11px 20px;
     border-radius: 40px;
     font-size: 13.5px;
     font-weight: 700;
     color: #fff;
     background: rgba(255, 255, 255, .11);
     border: 1px solid rgba(255, 255, 255, .2);
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px);
     transition: background .25s, transform .25s, border-color .25s
 }

 .kwish .wfeat:hover {
     background: rgba(255, 255, 255, .2);
     border-color: rgba(255, 255, 255, .42);
     transform: translateY(-2px)
 }

 .kwish .wfeat i {
     color: var(--green-soft);
     font-size: 14px
 }

 .kwish .wave {
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     line-height: 0;
     z-index: 2
 }

 .kwish .wave svg {
     width: 100%;
     height: 80px;
     display: block
 }

 /* ===== TOOLBAR ===== */
 .kwish .body {
     padding: 0 0 70px
 }

 .kwish .toolbar {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 20px;
     padding: 14px 18px;
     margin: -46px 0 28px;
     position: relative;
     z-index: 5;
     box-shadow: 0 22px 50px rgba(20, 10, 60, .14);
     display: flex;
     align-items: center;
     gap: 14px;
     flex-wrap: wrap
 }

 .kwish .tb-count {
     font-size: 14px;
     font-weight: 700;
     color: var(--ink);
     display: flex;
     align-items: center;
     gap: 9px
 }

 .kwish .tb-count .hb {
     width: 32px;
     height: 32px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 14px;
     background: linear-gradient(135deg, #ec4899, #db2777);
     box-shadow: 0 8px 16px rgba(219, 39, 119, .3)
 }

 .kwish .tb-count small {
     color: var(--muted);
     font-weight: 500
 }

 .kwish .tb-spacer {
     flex: 1
 }

 .kwish .tb-filters {
     display: flex;
     gap: 8px;
     flex-wrap: wrap
 }

 .kwish .tb-f {
     border: 1px solid var(--line);
     background: #f8f6ff;
     color: #6b6483;
     font-family: inherit;
     font-size: 12.5px;
     font-weight: 700;
     padding: 8px 16px;
     border-radius: 20px;
     cursor: pointer;
     transition: .2s
 }

 .kwish .tb-f:hover {
     border-color: #d9d2ff;
     color: var(--brand)
 }

 .kwish .tb-f.on {
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     border-color: transparent;
     color: #fff;
     box-shadow: 0 8px 18px rgba(72, 16, 136, .26)
 }

 .kwish .tb-sort {
     border: 1px solid var(--line);
     background: #f8f6ff;
     color: #6b6483;
     font-family: inherit;
     font-size: 12.5px;
     font-weight: 700;
     padding: 9px 14px;
     border-radius: 20px;
     cursor: pointer;
     outline: none
 }

 .kwish .tb-sort:focus {
     border-color: #d9d2ff
 }

 /* ===== GRID ===== */
 .kwish .pgrid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 22px
 }

 .kwish .card {
     background: #fff;
     border: 1px solid #efedf7;
     border-radius: var(--radius);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     box-shadow: 0 6px 20px rgba(30, 20, 80, .05);
     transition: transform .3s, box-shadow .3s, border-color .3s
 }

 .kwish .card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     z-index: 4;
     background: linear-gradient(90deg, var(--brand), var(--green));
     transform: scaleX(0);
     transform-origin: left;
     transition: .35s
 }

 .kwish .card:hover {
     transform: translateY(-8px);
     box-shadow: 0 26px 50px rgba(72, 16, 136, .17);
     border-color: #d9d2ff
 }

 .kwish .card:hover::before {
     transform: scaleX(1)
 }

 .kwish .card.gone {
     opacity: 0;
     transform: scale(.9) translateY(10px);
     pointer-events: none;
     transition: .35s
 }

 /* media */
 .kwish .pmedia {
     position: relative;
     background: #faf9ff;
     aspect-ratio: 1/1;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 1px solid #f4f2fb
 }

 /* .kwish .pmedia img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)} */
 .kwish .pmedia img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* fit whole image, no crop */
     object-position: center;
     padding: 14px;
     /* breathing room so it doesn't touch edges */
     background: #fff;
     transition: transform .55s cubic-bezier(.2, .7, .3, 1)
 }

 .kwish .card:hover .pmedia img {
     transform: scale(1.04)
 }

 .kwish .poff {
     position: absolute;
     top: 12px;
     left: 12px;
     z-index: 3;
     background: linear-gradient(135deg, var(--green), #e07818);
     color: #fff;
     font-size: 11.5px;
     font-weight: 800;
     letter-spacing: .2px;
     padding: 6px 11px;
     border-radius: 20px;
     box-shadow: 0 8px 18px rgba(240, 144, 40, .35)
 }

 .kwish .pstore {
     position: absolute;
     top: 12px;
     right: 52px;
     z-index: 3;
     background: rgba(21, 19, 43, .72);
     color: #fff;
     font-size: 10.5px;
     font-weight: 700;
     padding: 5px 10px;
     border-radius: 20px;
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px)
 }

 .kwish .premove {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 5;
     width: 34px;
     height: 34px;
     border: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, .94);
     color: #ec4899;
     font-size: 14px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 6px 16px rgba(20, 10, 60, .16);
     transition: .22s
 }

 .kwish .premove:hover {
     background: linear-gradient(135deg, #ec4899, #db2777);
     color: #fff;
     transform: scale(1.1)
 }

 /* body */
 .kwish .pbody {
     padding: 16px 17px 17px;
     display: flex;
     flex-direction: column;
     flex: 1
 }

 .kwish .ptitle {
     font-size: 14px;
     font-weight: 700;
     line-height: 1.42;
     color: var(--ink);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     min-height: 40px;
     transition: color .2s
 }

 .kwish .card:hover .ptitle {
     color: var(--brand)
 }

 /* rating */
 .kwish .prate {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 10px
 }

 .kwish .pstars {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     background: #f0edff;
     border-radius: 20px;
     padding: 4px 10px;
     font-size: 11px;
     color: #f5b301
 }

 .kwish .pstars b {
     font-size: 11.5px;
     font-weight: 800;
     color: var(--brand);
     margin-left: 2px
 }

 .kwish .prcount {
     font-size: 11.5px;
     color: var(--muted);
     font-weight: 600
 }

 /* price */
 .kwish .pprice {
     display: flex;
     align-items: baseline;
     gap: 9px;
     flex-wrap: wrap;
     margin-top: 12px
 }

 .kwish .psell {
     font-size: 21px;
     font-weight: 900;
     letter-spacing: -.6px;
     color: var(--ink)
 }

 .kwish .pmrp {
     font-size: 13px;
     font-weight: 600;
     color: #a29ac0;
     text-decoration: line-through
 }

 .kwish .pdisc {
     font-size: 12px;
     font-weight: 800;
     color: #1D9E75
 }

 .kwish .pmrpline {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .6px;
     text-transform: uppercase;
     color: #b3aecb;
     margin-top: 4px
 }

 /* actions */
 .kwish .pacts {
     display: flex;
     gap: 8px;
     margin-top: auto;
     padding-top: 14px;
     border-top: 1px dashed #eee
 }

 .kwish .pbody>.pmrpline {
     margin-bottom: 16px
 }

 .kwish .pbtn {
     border: 0;
     border-radius: 12px;
     font-family: inherit;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     padding: 11px 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     transition: .22s;
     white-space: nowrap
 }

 .kwish .pbtn-buy {
     flex: 1;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     color: #fff;
     box-shadow: 0 10px 20px rgba(72, 16, 136, .24)
 }

 .kwish .pbtn-buy:hover {
     transform: translateY(-2px);
     box-shadow: 0 14px 26px rgba(72, 16, 136, .34)
 }

 .kwish .pbtn-buy[disabled] {
     background: #e9e6f5;
     color: #a29ac0;
     box-shadow: none;
     cursor: not-allowed;
     transform: none
 }

 .kwish .pbtn-info {
     flex: 0 0 auto;
     width: 42px;
     padding: 11px 0;
     background: #f4f2fb;
     color: var(--brand)
 }

 .kwish .pbtn-info:hover {
     background: linear-gradient(135deg, var(--green), #e07818);
     color: #fff;
     box-shadow: 0 10px 20px rgba(240, 144, 40, .3);
     transform: translateY(-2px)
 }

 .kwish .pbtn-del {
     flex: 0 0 auto;
     width: 42px;
     padding: 11px 0;
     background: #f4f2fb;
     color: #db2777
 }

 .kwish .pbtn-del:hover {
     background: linear-gradient(135deg, #ec4899, #db2777);
     color: #fff;
     box-shadow: 0 10px 20px rgba(219, 39, 119, .3);
     transform: translateY(-2px)
 }

 /* ===== EMPTY STATE ===== */
 .kwish .empty {
     display: none;
     text-align: center;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 30px;
     padding: 64px 30px;
     box-shadow: 0 22px 50px rgba(20, 10, 60, .1)
 }

 .kwish .empty.on {
     display: block
 }

 .kwish .empty .eic {
     width: 92px;
     height: 92px;
     margin: 0 auto 22px;
     border-radius: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 36px;
     color: #fff;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     box-shadow: 0 18px 36px rgba(72, 16, 136, .3)
 }

 .kwish .empty h3 {
     font-size: 26px;
     font-weight: 800;
     letter-spacing: -.6px;
     margin-bottom: 10px
 }

 .kwish .empty p {
     color: var(--muted);
     font-size: 15.5px;
     max-width: 420px;
     margin: 0 auto 26px
 }

 .kwish .empty .ebtn {
     display: inline-block;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     color: #fff;
     font-weight: 700;
     font-size: 15px;
     padding: 14px 34px;
     border-radius: 40px;
     box-shadow: 0 16px 32px rgba(72, 16, 136, .28);
     transition: .2s
 }

 .kwish .empty .ebtn:hover {
     transform: translateY(-2px)
 }

 /* ===== CTA BAND ===== */
 .kwish .cta-sec {
     padding: 10px 0 72px
 }

 .kwish .cta {
     border-radius: 34px;
     padding: 58px 40px;
     text-align: center;
     position: relative;
     overflow: hidden;
     background: radial-gradient(600px 320px at 85% 0%, rgba(240, 144, 40, .28), transparent 60%), linear-gradient(135deg, #2a0a52, #8a3bd6)
 }

 .kwish .cta h2 {
     color: #fff;
     font-size: 36px;
     font-weight: 800;
     letter-spacing: -.9px;
     margin-bottom: 12px;
     position: relative;
     z-index: 2
 }

 .kwish .cta p {
     color: rgba(255, 255, 255, .9);
     font-size: 16px;
     margin-bottom: 28px;
     position: relative;
     z-index: 2
 }

 .kwish .cta .btn-w {
     background: #fff;
     color: var(--brand);
     font-weight: 700;
     font-size: 15.5px;
     padding: 15px 40px;
     border-radius: 40px;
     display: inline-block;
     position: relative;
     z-index: 2;
     box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
     transition: .2s
 }

 .kwish .cta .btn-w:hover {
     transform: translateY(-2px)
 }

 .kwish .cta .c-blob {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, .08)
 }

 .kwish .cta .cb1 {
     width: 320px;
     height: 320px;
     top: -150px;
     left: -80px
 }

 .kwish .cta .cb2 {
     width: 250px;
     height: 250px;
     bottom: -140px;
     right: -60px
 }

 /* toast */
 .kwish .ktoast {
     position: fixed;
     left: 50%;
     bottom: 28px;
     transform: translate(-50%, calc(100% + 60px));
     z-index: 10000;
     visibility: hidden;
     opacity: 0;
     background: #15132b;
     color: #fff;
     font-size: 13.5px;
     font-weight: 600;
     padding: 13px 22px;
     border-radius: 40px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: transform .4s cubic-bezier(.2, .7, .3, 1)
 }

 .kwish .ktoast.on {
     transform: translate(-50%, 0);
     visibility: visible;
     opacity: 1
 }

 .kwish .ktoast i {
     color: var(--green-soft)
 }

 .kwish .ktoast button {
     background: none;
     border: 0;
     color: var(--green-soft);
     font-family: inherit;
     font-size: 13px;
     font-weight: 800;
     cursor: pointer;
     padding: 0 0 0 4px
 }

 /* ===== RESPONSIVE ===== */
 @media(max-width:1080px) {
     .kwish .pgrid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(max-width:860px) {
     .kwish .pgrid {
         grid-template-columns: repeat(2, 1fr);
         gap: 18px
     }

     .kwish .whead {
         padding: 44px 0 84px
     }

     .kwish .whead h1 {
         font-size: 33px
     }

     .kwish .whead .sub {
         font-size: 15px
     }
 }

 @media(max-width:600px) {
     .kwish .whead {
         padding: 34px 0 70px
     }

     .kwish .whead h1 {
         font-size: 27px;
         letter-spacing: -.9px
     }

     .kwish .wfeats {
         gap: 7px;
         margin-top: 20px
     }

     .kwish .wfeat {
         padding: 9px 14px;
         font-size: 11.5px;
         gap: 7px
     }

     .kwish .wfeat i {
         font-size: 12px
     }

     .kwish .toolbar {
         margin: -34px 0 20px;
         padding: 12px 14px;
         border-radius: 18px
     }

     .kwish .tb-spacer {
         display: none
     }

     .kwish .tb-filters {
         width: 100%;
         overflow-x: auto;
         -ms-overflow-style: none;
         scrollbar-width: none
     }

     .kwish .tb-filters::-webkit-scrollbar {
         display: none
     }

     .kwish .tb-f {
         padding: 7px 13px;
         font-size: 11.5px
     }

     .kwish .pgrid {
         grid-template-columns: repeat(2, 1fr);
         gap: 12px
     }

     .kwish .pbody {
         padding: 12px 12px 14px
     }

     .kwish .ptitle {
         font-size: 12.5px;
         min-height: 36px
     }

     .kwish .psell {
         font-size: 17px
     }

     .kwish .pmrp {
         font-size: 11.5px
     }

     .kwish .pdisc {
         font-size: 11px
     }

     .kwish .pacts {
         gap: 6px;
         margin-top: 12px;
         padding-top: 11px
     }

     .kwish .pbtn {
         font-size: 12px;
         padding: 10px 8px;
         border-radius: 11px
     }

     .kwish .pbtn-info,
     .kwish .pbtn-del {
         width: 36px;
         padding: 10px 0
     }

     .kwish .pbtn-buy {
         font-size: 11.5px;
         padding: 10px 6px;
         gap: 5px
     }

     .kwish .pbtn-buy span {
         font-size: 11.5px
     }

     .kwish .pstore {
         display: none
     }

     .kwish .cta {
         padding: 40px 20px;
         border-radius: 26px
     }

     .kwish .cta h2 {
         font-size: 24px
     }

     .kwish .cta p {
         font-size: 14.5px
     }

     .kwish .empty {
         padding: 44px 20px;
         border-radius: 24px
     }

     .kwish .empty h3 {
         font-size: 21px
     }

     .kwish .empty p {
         font-size: 14px
     }

     .kwish .pmedia img {
         padding: 10px
     }
 }

 @media(prefers-reduced-motion:reduce) {

     .kwish .card,
     .kwish .pmedia img,
     .kwish .pbtn,
     .kwish .reveal {
         transition: none
     }

     .kwish .reveal {
         opacity: 1;
         transform: none
     }
 }