/* TOM'S gift notification bar — enhances NotificationX bar #nx-bar-3
   Loaded always; only activates when JS adds .toms-gift-on (preview cookie or live flag). */

/* neutralize the original NX/Elementor wrappers when our bar is on */
#nx-bar-3.toms-gift-on .elementor-30800{display:none !important}
#nx-bar-3.toms-gift-on,
#nx-bar-3.toms-gift-on .nx-bar-inner,
#nx-bar-3.toms-gift-on .nx-bar-content-wrap{
  background:transparent !important;border:0 !important;margin:0 !important;padding:0 !important;
  max-width:none !important;width:100% !important;box-shadow:none !important;overflow:visible !important}

/* light close button on the dark bar */
#nx-bar-3.toms-gift-on .notificationx-close{color:#9a9aa0 !important}
#nx-bar-3.toms-gift-on .notificationx-close svg,
#nx-bar-3.toms-gift-on .notificationx-close path{fill:#c9c9cf !important;stroke:#c9c9cf !important}

/* ---------- our bar ---------- */
.toms-giftbar{--red:#E2231A;--red2:#ff3b2f;--gold:#ffd34d;--jp:#bc002d;
  position:relative;width:100%;min-height:108px;
  background:
    radial-gradient(120% 170% at 13% 45%, rgba(226,35,26,.24), rgba(226,35,26,0) 44%),
    linear-gradient(90deg,#0a0a0b 0%,#1b1b1e 50%,#0a0a0b 100%);
  border-top:3px solid var(--red);
  font-family:"Toms",Arial,Helvetica,sans-serif;font-weight:400;
  overflow:visible;display:flex;align-items:center;justify-content:center;box-sizing:border-box;z-index:4}
.toms-giftbar *{box-sizing:border-box}
.toms-giftbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, rgba(255,255,255,0) 2px 22px);mix-blend-mode:screen}
.toms-giftbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--red),#fff 50%,var(--red));opacity:.5}

.tgb-inner{position:relative;z-index:2;width:100%;max-width:1191px;
  display:flex;align-items:center;gap:24px;padding:4px 54px 4px 14px}

.tgb-cap{position:relative;flex:0 0 auto;width:218px;height:88px;overflow:visible;z-index:7}
.tgb-glow{position:absolute;left:50%;top:50%;width:264px;height:150px;transform:translate(-50%,-50%);
  background:radial-gradient(60% 60% at 50% 45%, rgba(226,35,26,.5), rgba(226,35,26,0) 70%);filter:blur(9px)}
.tgb-floor{display:none}
.tgb-capwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  animation:tgb-heart 2s ease-in-out infinite;will-change:transform}
.tgb-capwrap img{display:block;width:240px;max-width:none !important;height:auto;filter:drop-shadow(0 7px 11px rgba(0,0,0,.42))}
.tgb-gloss{display:none}
.tgb-sticker{position:absolute;right:2px;top:6px;z-index:5;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #ffe38a 42%, var(--gold) 72%, #e9a100);
  color:#7a1200;font-weight:900;font-family:"Toms",Arial Black,Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:.92;text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.65);transform:rotate(-12deg)}
.tgb-sticker .s-old{font-size:8px;font-weight:800;text-decoration:line-through;opacity:.8}
.tgb-sticker .s-now{font-size:16px}
.tgb-sticker small{font-size:7.5px;letter-spacing:.3px}

.tgb-copy{flex:1 1 auto;min-width:0;color:#fff;text-align:left}
.tgb-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.tgb-jp{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#111;
  font-weight:800;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tgb-jp .sun{width:9px;height:9px;border-radius:50%;background:var(--jp);box-shadow:0 0 0 2px rgba(188,0,45,.2)}
.tgb-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:2px;
  color:#ffb3ad;text-transform:uppercase}
.tgb-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(226,35,26,.6);animation:tgbblink 1.8s infinite}
.tgb-head{font-weight:800;text-transform:uppercase;font-size:28px;line-height:1.03;letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
.tgb-head .giftwrap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tgb-head .gi{width:25px;height:25px;color:var(--gold);flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(255,211,77,.5))}
.tgb-head .gift{color:var(--gold);text-shadow:0 0 18px rgba(255,211,77,.45)}
.tgb-scar{margin-top:7px;font-size:14px;color:#d7d7db;letter-spacing:.2px;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
.tgb-scar .price{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none}
.tgb-scar .old{color:#a2a2a8;text-decoration:line-through;font-weight:700;text-decoration-color:#ff5a4f}
.tgb-scar .free{color:var(--gold);font-weight:900;font-size:18px;text-shadow:0 0 12px rgba(255,211,77,.45)}
.tgb-scar .txt{color:#d7d7db}
.tgb-scar .n{color:#fff;font-weight:900;background:var(--red);padding:1px 8px;border-radius:4px;margin:0 2px;
  box-shadow:0 2px 8px rgba(226,35,26,.5)}
.tgb-scar .hurry{color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:1px}

.tgb-ctawrap{flex:0 0 auto}
.tgb-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#ff3b2f,#d41a10);color:#fff;text-decoration:none;
  font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:15px;padding:15px 28px;border-radius:9px;
  box-shadow:0 8px 22px rgba(226,35,26,.5), inset 0 1px 0 rgba(255,255,255,.4);white-space:nowrap;
  animation:tgbcta 2.2s ease-in-out infinite}
.tgb-cta .arrow{transition:transform .2s;font-size:18px}
.tgb-cta:hover .arrow{transform:translateX(4px)}
.tgb-cta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
  transform:skewX(-18deg);animation:tgbshine 3.4s ease-in-out infinite}

@keyframes tgb-heart{0%,58%,100%{transform:translate(-50%,-50%) scale(1)}16%{transform:translate(-50%,-50%) scale(1.03)}30%{transform:translate(-50%,-50%) scale(1.004)}44%{transform:translate(-50%,-50%) scale(1.018)}}
@keyframes tgbbob{0%,100%{margin-top:0}50%{margin-top:-11px}}
@keyframes tgbsheen{0%,100%{transform:translateX(-30%);opacity:0}45%{opacity:1}55%{opacity:1}70%,100%{transform:translateX(30%);opacity:0}}
@keyframes tgbfloor{0%,100%{opacity:.78;width:150px}50%{opacity:.5;width:126px}}
@keyframes tgbpop{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-12deg) scale(1.07)}}
@keyframes tgbblink{0%,100%{box-shadow:0 0 0 0 rgba(226,35,26,.6)}50%{box-shadow:0 0 0 6px rgba(226,35,26,0)}}
@keyframes tgbcta{0%,100%{box-shadow:0 8px 22px rgba(226,35,26,.5), inset 0 1px 0 rgba(255,255,255,.4)}50%{box-shadow:0 8px 30px rgba(226,35,26,.82), inset 0 1px 0 rgba(255,255,255,.4)}}
@keyframes tgbshine{0%{left:-120%}35%,100%{left:140%}}

@media (prefers-reduced-motion: reduce){
  .tgb-capwrap,.tgb-floor,.tgb-gloss,.tgb-sticker,.tgb-cta,.tgb-eyebrow .dot,.tgb-cta::after{animation:none !important}
  .tgb-capwrap{transform:translate(-50%,-50%)}
}

@media (max-width:768px){
  .toms-giftbar{min-height:0}
  .tgb-inner{flex-wrap:wrap;align-items:center;gap:9px 12px;padding:10px 40px 12px 6px}
  .tgb-cap{width:102px;height:60px;overflow:visible}
  .tgb-capwrap img{width:122px}
  .tgb-glow{width:140px;height:82px}
  .tgb-sticker{width:40px;height:40px;right:-4px;top:3px}
  .tgb-sticker .s-now{font-size:12px}.tgb-sticker .s-old{font-size:6.5px}.tgb-sticker small{font-size:6px}
  .tgb-eyebrow{display:none}
  .tgb-hide-m{display:none}
  .tgb-copy{flex:1 1 0;min-width:120px}
  .tgb-top{margin-bottom:4px}
  .tgb-jp{font-size:8.5px;padding:3px 8px;letter-spacing:.6px}
  .tgb-head{font-size:18px;line-height:1.05;gap:0 6px}
  .tgb-head .gi{width:17px;height:17px}
  .tgb-scar{font-size:11px;margin-top:5px;gap:0 6px}
  .tgb-scar .free{font-size:14px}
  .tgb-ctawrap{flex:1 1 100%;order:3}
  .tgb-cta{width:100%;justify-content:center;padding:12px;font-size:13px}
}
@media (max-width:430px){
  .tgb-head{font-size:16px}
  .tgb-cap{width:86px}
  .tgb-capwrap img{width:106px}
}