/* ============================================================
   NUTS ANIMATED WIDGET — Frontend CSS
   Version: 1.0.0
   ============================================================ */

/* ── KEYFRAMES ── */
@keyframes naw-fadeInDown  { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }
@keyframes naw-fadeInUp    { from{opacity:0;transform:translateY(32px)}  to{opacity:1;transform:translateY(0)} }
@keyframes naw-slideL      { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }
@keyframes naw-slideR      { from{opacity:0;transform:translateX(50px)}  to{opacity:1;transform:translateX(0)} }
@keyframes naw-scaleIn     { from{opacity:0;transform:scale(0.6)} to{opacity:1;transform:scale(1)} }
@keyframes naw-floatY      { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@keyframes naw-floatNut    { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.06)} }
@keyframes naw-pulse       { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes naw-saleWiggle  { 0%,100%{transform:rotate(-6deg) scale(1)} 50%{transform:rotate(6deg) scale(1.12)} }
@keyframes naw-starPop     { 0%{transform:scale(0) rotate(-30deg);opacity:0} 70%{transform:scale(1.3) rotate(5deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes naw-bounceBtn   { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} 70%{transform:translateY(-2px)} }
@keyframes naw-shimmerSlide{ 0%{left:-100%} 100%{left:200%} }
@keyframes naw-ticker      { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes naw-particleFly { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-80px) scale(0);opacity:0} }
@keyframes naw-glowRing    { 0%,100%{box-shadow:0 0 0 0 rgba(196,164,90,.4)} 50%{box-shadow:0 0 0 8px rgba(196,164,90,0)} }
@keyframes naw-countUp     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes naw-wave        { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(15deg)} 75%{transform:rotate(-15deg)} }
@keyframes naw-heartbeat   { 0%,100%{transform:scale(1)} 14%{transform:scale(1.3)} 28%{transform:scale(1)} 42%{transform:scale(1.3)} 70%{transform:scale(1)} }
@keyframes naw-slideUpIn   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes naw-orbitDot    { 0%{transform:rotate(0deg) translateX(28px) rotate(0deg)} 100%{transform:rotate(360deg) translateX(28px) rotate(-360deg)} }
@keyframes naw-waveIn      { to{transform:scaleX(1)} }
@keyframes naw-iconBounce  { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.1)} }

/* ── BASE ── */
.naw-wrap * { box-sizing:border-box; }
.naw-wrap   { font-family:system-ui,sans-serif; overflow:hidden; }

/* Disable all animations when toggled off */
.naw-no-anim * { animation:none !important; transition:none !important; }

/* ── PROMO BANNER ── */
.naw-promo {
    background:#c4a45a; color:#2d1f0a;
    padding:8px 16px; text-align:center;
    font-size:12px; font-weight:700;
    cursor:pointer; position:relative; overflow:hidden;
    animation:naw-fadeInDown .5s ease both;
}
.naw-promo::after {
    content:''; position:absolute; top:0; left:-100%;
    width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation:naw-shimmerSlide 2.5s ease-in-out infinite;
}
.naw-promo:hover { filter:brightness(1.08); }

/* ── TICKER ── */
.naw-ticker-wrap {
    background:#1a1200; overflow:hidden;
    padding:8px 0;
    animation:naw-fadeInDown .5s ease .05s both;
}
.naw-ticker-inner {
    display:flex; width:max-content;
    animation:naw-ticker 18s linear infinite;
}
.naw-ticker-item {
    display:flex; align-items:center; gap:8px;
    padding:0 28px; font-size:12px; color:#f5e6c8; white-space:nowrap;
}
.naw-ticker-dot {
    width:5px; height:5px; border-radius:50%; background:#c4a45a; flex-shrink:0;
    animation:naw-pulse 1.5s ease-in-out infinite;
}

/* ── TOPBAR ── */
.naw-topbar {
    background:#2d2a1e; display:flex; justify-content:center;
    gap:24px; padding:10px 16px; flex-wrap:wrap;
    animation:naw-fadeInDown .6s ease .1s both;
}
.naw-tb-item {
    display:flex; align-items:center; gap:8px;
    color:#f5e6c8; font-size:11px; cursor:pointer;
    transition:transform .2s;
}
.naw-tb-item:hover { transform:translateY(-3px); }
.naw-tb-icon {
    width:32px; height:32px; border-radius:50%;
    background:#5c4a1e; display:flex; align-items:center;
    justify-content:center; font-size:16px;
    position:relative; overflow:hidden; transition:background .3s;
}
.naw-tb-item:hover .naw-tb-icon { background:#c4a45a; }
.naw-tb-icon-emoji { animation:naw-iconBounce 2.5s ease-in-out infinite; }
.naw-tb-item:nth-child(2) .naw-tb-icon-emoji { animation-delay:.4s; }
.naw-tb-item:nth-child(3) .naw-tb-icon-emoji { animation-delay:.8s; }
.naw-tb-item:nth-child(4) .naw-tb-icon-emoji { animation-delay:1.2s; }
.naw-tb-text strong { display:block; font-size:11px; color:#fff; }

/* ── HERO ── */
.naw-hero {
    display:grid; grid-template-columns:1fr 2fr 1fr;
    gap:10px; padding:10px; background:#f5f0e6;
    animation:naw-fadeInUp .7s ease .2s both;
}
@media (max-width:768px) {
    .naw-hero { grid-template-columns:1fr; }
}
.naw-hero-card {
    border-radius:16px; padding:22px 16px;
    display:flex; flex-direction:column;
    justify-content:center; gap:10px;
    position:relative; overflow:hidden;
}
.naw-hero-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
    pointer-events:none;
}
.naw-hero-left  { background:#e8dfc8; }
.naw-hero-right { background:#f0e8d4; }
.naw-hero-card h2 {
    font-size:19px; font-weight:800; color:#2d1f0a; line-height:1.2;
    animation:naw-slideL .8s ease .3s both;
}
.naw-hero-right h2 { animation:naw-slideR .8s ease .3s both; }
.naw-hero-card p {
    font-size:11px; color:#7a5c2a;
    animation:naw-slideL .8s ease .45s both;
}
.naw-hero-right p { animation:naw-slideR .8s ease .45s both; }
.naw-hero-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:#2d2a1e; color:#f5e6c8; border:none; cursor:pointer;
    padding:9px 15px; border-radius:8px; font-size:11px; font-weight:700;
    width:fit-content; position:relative; overflow:hidden;
    transition:transform .2s, background .2s;
    animation:naw-bounceBtn 3s ease-in-out infinite;
}
.naw-hero-btn:hover { transform:scale(1.06); background:#5c4a1e; }

/* ── SECTION TITLE ── */
.naw-sec-title {
    text-align:center; font-size:17px; font-weight:800; color:#2d1f0a;
    padding:18px 12px 4px;
    animation:naw-slideUpIn .7s ease .5s both;
}
.naw-sec-title span { position:relative; display:inline-block; }
.naw-sec-title span::after {
    content:''; position:absolute; bottom:-3px; left:0; right:0;
    height:2px; background:#c4a45a;
    transform:scaleX(0); transform-origin:left;
    animation:naw-waveIn .6s ease .9s forwards;
}
.naw-sec-deco { color:#9b7d4a; margin:0 6px; display:inline-block; }

/* ── CATEGORIES ── */
.naw-cats {
    display:flex; justify-content:center; gap:14px;
    flex-wrap:wrap; padding:14px 12px 6px;
}
.naw-cat {
    display:flex; flex-direction:column; align-items:center;
    gap:5px; cursor:pointer; transition:transform .25s;
}
.naw-cat:hover { transform:translateY(-6px) scale(1.08); }
.naw-orbit-wrap { position:relative; width:64px; height:64px; }
.naw-cat-ring {
    width:64px; height:64px; border-radius:50%;
    background:#e8dfc8; border:2.5px solid #b8974a;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; position:relative;
    transition:border-color .3s, box-shadow .3s;
    animation:naw-glowRing 4s ease-in-out infinite;
}
.naw-cat:nth-child(2) .naw-cat-ring { animation-delay:.4s; }
.naw-cat:nth-child(3) .naw-cat-ring { animation-delay:.8s; }
.naw-cat:nth-child(4) .naw-cat-ring { animation-delay:1.2s; }
.naw-cat:nth-child(5) .naw-cat-ring { animation-delay:1.6s; }
.naw-cat:nth-child(6) .naw-cat-ring { animation-delay:2s; }
.naw-cat:nth-child(7) .naw-cat-ring { animation-delay:2.4s; }
.naw-cat:nth-child(8) .naw-cat-ring { animation-delay:2.8s; }
.naw-cat:hover .naw-cat-ring { border-color:#c4a45a; box-shadow:0 0 0 4px rgba(196,164,90,.25); }
.naw-cat-emoji { animation:naw-floatNut 3s ease-in-out infinite; display:block; }
.naw-cat:nth-child(odd) .naw-cat-emoji { animation-duration:2.8s; }
.naw-cat-arrow {
    position:absolute; bottom:1px; right:1px;
    width:18px; height:18px; background:#2d2a1e;
    border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:10px; color:#fff;
    transition:background .2s;
}
.naw-cat:hover .naw-cat-arrow { background:#c4a45a; }
.naw-cat-label { font-size:10px; font-weight:700; color:#4a3010; }
.naw-orbit-dot {
    position:absolute; top:50%; left:50%;
    width:7px; height:7px; border-radius:50%;
    background:#c4a45a; margin:-3.5px;
    animation:naw-orbitDot 3s linear infinite;
    opacity:0; transition:opacity .3s;
}
.naw-cat:hover .naw-orbit-dot { opacity:1; }

/* ── PRODUCTS TAB SECTION ── */
.naw-tabs-wrap {
    padding:10px; background:#f5f0e6;
    animation:naw-fadeInUp .7s ease .6s both;
}
.naw-tabs-row {
    display:flex; align-items:center;
    justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.naw-tabs { display:flex; gap:5px; flex-wrap:wrap; }
.naw-tab {
    padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700;
    cursor:pointer; border:1.5px solid #c4a45a;
    background:transparent; color:#6b4e24; transition:all .25s;
}
.naw-tab.active, .naw-tab:hover { background:#2d2a1e; color:#f5e6c8; border-color:#2d2a1e; }
.naw-va { font-size:11px; color:#9b7d4a; cursor:pointer; transition:color .2s; }
.naw-va:hover { color:#2d2a1e; }

.naw-products {
    display:flex; gap:10px;
    overflow-x:auto; padding:0 0 8px;
    scrollbar-width:none;
}
.naw-products::-webkit-scrollbar { display:none; }

/* ── PRODUCT CARD ── */
.naw-pcard {
    min-width:148px; background:#fff; border-radius:14px;
    padding:12px; border:1.5px solid #e8d9b8; flex-shrink:0;
    position:relative; cursor:pointer;
    transition:transform .28s, box-shadow .28s, border-color .28s;
    animation:naw-scaleIn .5s ease both;
}
.naw-pcard:nth-child(1) { animation-delay:.05s; }
.naw-pcard:nth-child(2) { animation-delay:.15s; }
.naw-pcard:nth-child(3) { animation-delay:.25s; }
.naw-pcard:nth-child(4) { animation-delay:.35s; }
.naw-pcard:nth-child(5) { animation-delay:.45s; }
.naw-pcard:hover { transform:translateY(-7px); box-shadow:0 12px 28px rgba(180,140,60,.22); border-color:#c4a45a; }
.naw-sale-badge {
    position:absolute; top:7px; left:7px;
    background:#e53935; color:#fff; font-size:9px; font-weight:800;
    padding:2px 7px; border-radius:4px; z-index:2;
    animation:naw-saleWiggle 2s ease-in-out infinite;
}
.naw-new-badge {
    position:absolute; top:7px; left:7px;
    background:#2e7d32; color:#fff; font-size:9px; font-weight:800;
    padding:2px 7px; border-radius:4px; z-index:2;
    animation:naw-pulse 2s ease-in-out infinite;
}
.naw-wish {
    position:absolute; top:7px; right:7px;
    background:#f5f0e6; border:none; border-radius:50%;
    width:26px; height:26px; display:flex; align-items:center;
    justify-content:center; cursor:pointer; font-size:13px;
    transition:transform .2s, background .2s; z-index:2;
}
.naw-wish:hover { transform:scale(1.35); background:#ffeaea; }
.naw-pimg {
    width:100%; height:88px; display:flex; align-items:center;
    justify-content:center; font-size:40px; margin-bottom:8px;
    position:relative; overflow:hidden;
}
.naw-pimg-emoji { animation:naw-floatNut 4s ease-in-out infinite; display:block; }
.naw-pcard:nth-child(2) .naw-pimg-emoji { animation-delay:.6s; }
.naw-pcard:nth-child(3) .naw-pimg-emoji { animation-delay:1.2s; }
.naw-pcard:nth-child(4) .naw-pimg-emoji { animation-delay:1.8s; }
.naw-pcard:nth-child(5) .naw-pimg-emoji { animation-delay:2.4s; }
.naw-pimg::after {
    content:''; position:absolute; top:0; left:-100%;
    width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    animation:naw-shimmerSlide 3s ease-in-out infinite;
}
.naw-pcard:nth-child(2) .naw-pimg::after { animation-delay:.6s; }
.naw-pcard:nth-child(3) .naw-pimg::after { animation-delay:1.2s; }
.naw-pname  { font-size:10px; color:#4a3010; margin-bottom:5px; font-weight:600; line-height:1.3; }
.naw-pprice { display:flex; align-items:center; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.naw-pnew   { font-size:13px; font-weight:800; color:#c0392b; }
.naw-pold   { font-size:10px; color:#bbb; text-decoration:line-through; }
.naw-pdiscount {
    font-size:9px; background:#ffeaea; color:#c0392b;
    border-radius:4px; padding:1px 4px; font-weight:700;
}
.naw-add-btn {
    width:100%; padding:7px; background:#2d2a1e; color:#f5e6c8;
    border:none; border-radius:8px; font-size:11px; font-weight:700;
    cursor:pointer; transition:background .2s, transform .15s;
    position:relative; overflow:hidden;
}
.naw-add-btn:hover { background:#5c4a1e; transform:scale(1.03); }
.naw-add-btn:active { transform:scale(0.97); }

/* ── BANNERS ── */
.naw-banners {
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:10px; background:#f5f0e6;
    animation:naw-fadeInUp .7s ease .8s both;
}
@media (max-width:600px) { .naw-banners { grid-template-columns:1fr; } }
.naw-bcard {
    border-radius:14px; padding:20px; position:relative;
    overflow:hidden; min-height:130px;
    display:flex; flex-direction:column; justify-content:flex-end;
    cursor:pointer; transition:transform .25s;
}
.naw-bcard:hover { transform:scale(1.02); }
.naw-bcard-dark { background:#3a2e1a; }
.naw-bcard-lite { background:#e8dfc8; }
.naw-bemoji {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    font-size:54px; animation:naw-floatY 4s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.naw-bcard-lite .naw-bemoji { animation-delay:1s; }
.naw-bcard h3 { font-size:15px; font-weight:800; color:#fff; position:relative; z-index:1; line-height:1.2; }
.naw-bcard-lite h3 { color:#2d1f0a; }
.naw-bcard p  { font-size:10px; color:#c4a45a; position:relative; z-index:1; margin-top:3px; }
.naw-bcard-lite p { color:#7a5c2a; }
.naw-exp-btn {
    display:inline-flex; align-items:center; gap:5px;
    margin-top:8px; padding:6px 14px; border-radius:8px;
    font-size:11px; font-weight:700; border:none; cursor:pointer;
    background:#c4a45a; color:#2d1f0a;
    transition:all .2s; width:fit-content; position:relative; z-index:1;
    animation:naw-bounceBtn 3.5s ease-in-out 1s infinite;
}
.naw-exp-btn:hover { background:#a07830; color:#fff; transform:scale(1.06); }

/* ── TRUST STRIP ── */
.naw-trust {
    display:flex; background:#1a1200; flex-wrap:wrap;
    animation:naw-fadeInUp .7s ease 1s both;
}
.naw-ti {
    flex:1; min-width:120px; display:flex; align-items:center;
    gap:8px; padding:14px 10px;
    border-right:1px solid rgba(255,255,255,.07);
    cursor:pointer; transition:background .2s;
}
.naw-ti:last-child { border-right:none; }
.naw-ti:hover { background:rgba(196,164,90,.1); }
.naw-ti-icon { font-size:22px; animation:naw-wave 3s ease-in-out infinite; display:inline-block; }
.naw-ti:nth-child(2) .naw-ti-icon { animation-delay:.5s; }
.naw-ti:nth-child(3) .naw-ti-icon { animation-delay:1s;  animation-name:naw-heartbeat; }
.naw-ti:nth-child(4) .naw-ti-icon { animation-delay:1.5s; }
.naw-ti strong { font-size:10px; font-weight:700; color:#f5e6c8; display:block; }
.naw-ti span   { font-size:9px; color:#9b7d4a; }

/* ── REVIEWS ── */
.naw-revs-wrap {
    padding:10px; background:#f5f0e6;
    animation:naw-fadeInUp .7s ease 1.1s both;
}
.naw-revs-head {
    display:flex; justify-content:space-between;
    align-items:center; margin-bottom:10px;
}
.naw-revs-head span:first-child { font-size:13px; font-weight:800; color:#2d1f0a; }
.naw-revs-head span:last-child  { font-size:11px; color:#9b7d4a; cursor:pointer; }
.naw-revs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:500px) { .naw-revs { grid-template-columns:1fr; } }
.naw-rcard {
    background:#fff; border-radius:12px; padding:12px;
    border:1.5px solid #e8d9b8;
    animation:naw-slideUpIn .5s ease both;
    transition:transform .2s, box-shadow .2s; cursor:pointer;
    position:relative; overflow:hidden;
}
.naw-rcard::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:#c4a45a; transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.naw-rcard:hover::before { transform:scaleX(1); }
.naw-rcard:nth-child(1) { animation-delay:.1s; }
.naw-rcard:nth-child(2) { animation-delay:.22s; }
.naw-rcard:nth-child(3) { animation-delay:.34s; }
.naw-rcard:nth-child(4) { animation-delay:.46s; }
.naw-rcard:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(180,140,60,.18); }
.naw-reviewer { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.naw-avatar {
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.naw-rname { font-size:11px; font-weight:700; color:#2d1f0a; }
.naw-rtime { font-size:9px; color:#bbb; }
.naw-stars { color:#f5a623; font-size:11px; margin-bottom:5px; }
.naw-star  { display:inline-block; animation:naw-starPop .4s ease both; }
.naw-rtext { font-size:10px; color:#6b4e24; line-height:1.5; }

/* ── FOOTER TRUST ── */
.naw-ftrust {
    display:flex; flex-wrap:wrap; justify-content:center;
    background:#e8dfc8; padding:12px;
    animation:naw-fadeInUp .7s ease 1.3s both;
}
.naw-ft {
    display:flex; align-items:center; gap:7px; padding:6px 14px;
    border-right:1px solid #c4a45a; cursor:pointer;
    transition:background .2s; border-radius:8px;
}
.naw-ft:last-child { border-right:none; }
.naw-ft:hover { background:rgba(196,164,90,.2); }
.naw-ft-icon {
    font-size:20px; transition:transform .2s; display:inline-block;
    animation:naw-iconBounce 3.5s ease-in-out infinite;
}
.naw-ft:nth-child(2) .naw-ft-icon { animation-delay:.5s; }
.naw-ft:nth-child(3) .naw-ft-icon { animation-delay:1s; }
.naw-ft:nth-child(4) .naw-ft-icon { animation-delay:1.5s; }
.naw-ft:nth-child(5) .naw-ft-icon { animation-delay:2s; }
.naw-ft:hover .naw-ft-icon { transform:scale(1.3) rotate(10deg); animation:none; }
.naw-ft strong { font-size:10px; font-weight:700; color:#2d1f0a; display:block; }
.naw-ft span   { font-size:9px; color:#7a5c2a; }

/* ── PARTICLE ── */
.naw-particle {
    position:absolute; pointer-events:none;
    font-size:16px;
    animation:naw-particleFly .8s ease forwards;
    z-index:99;
}