/* Najdeah design system - shared by every custom page.
   Generated from the home-v5 block stylesheet; edit here, not in page content. */

.nv{--or:#FF5A1F;--ink:#0F1115;--mut:#6E7379;--line:#EAEAEC;--bg:#F7F7F8;--star:#FFB800;
 direction:ltr;text-align:left;color:var(--ink);font-size:15px;line-height:1.6;
 font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif}
.nv *{box-sizing:border-box}
.nv a{text-decoration:none;color:inherit}
.nv section{position:relative;width:auto!important;max-width:none!important;
 margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.nv .w{max-width:1240px;margin:0 auto;padding:0 22px}
body.home .entry-header,body.home .page-title,
.page .entry-header,.page .page-title,.page .hero-section{display:none!important}
body.home .site-main,body.home .ct-container-full,body.home article.page,
.page .site-main,.page article.page{padding-top:0!important;margin-top:0!important}
body.njd-blank #main-container,body.njd-blank .site-main,
body.njd-blank .entry-content,body.njd-blank article.page,
body.njd-blank .ct-container-full{padding:0!important;margin:0!important}
body.njd-blank .entry-content > *:first-child{margin-top:0!important}
body.home .ct-container,body.home .ct-container-narrow,.page .ct-container,.page .ct-container-narrow,
body.home .entry-content,.page .entry-content{padding-top:0!important;margin-top:0!important}

.nv-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
.nv-h h2{font-size:19px;font-weight:800;letter-spacing:-.025em;margin:0}
.nv-h a{font-size:12.5px;font-weight:600;color:var(--mut)}
.nv-h a:hover{color:var(--or)}
.nv .btn{display:inline-block;background:var(--or);color:#fff!important;font-size:13.5px;
 font-weight:700;padding:12px 24px;border-radius:7px;transition:background .18s}
.nv .btn:hover{background:var(--ink)}
.nv .btn.gh{background:transparent;color:var(--ink)!important;border:1.5px solid var(--line)}
.nv .btn.gh:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}
.nv .btn.dk{background:var(--ink)}
.nv .btn.dk:hover{background:var(--or)}

/* ---- hero: orange blob + floating price chips ---- */
.nv-hero{background:linear-gradient(180deg,#FAFAFB 0%,#F1F1F3 100%);position:relative;
 overflow:hidden;padding:56px 0 64px}
.nv-hg{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;
 align-items:center;position:relative;z-index:2}
.nv-eye{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--or);text-transform:uppercase}
.nv-hero h1{font-size:56px;font-weight:800;letter-spacing:-.045em;line-height:1.02;margin:18px 0 0}
.nv-hero .lede{font-size:16px;color:#5C6169;margin:20px 0 30px;max-width:370px;line-height:1.6}
.nv-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nv-btns .btn{padding:15px 30px;font-size:14px;border-radius:9px}
.nv-soc{display:flex;align-items:center;gap:12px;margin-top:36px}
.nv-faces{display:flex}
.nv-faces i{width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px;
 font-style:normal;font-size:12px;font-weight:800;color:#fff;display:flex;align-items:center;
 justify-content:center;box-shadow:0 3px 8px rgba(15,17,21,.14)}
.nv-faces i:first-child{margin-left:0}
.nv-soc > span:last-child{font-size:13px;color:var(--mut)}
.nv-stagew{position:relative;min-height:520px;display:flex;align-items:center;
 justify-content:center}
.nv-blob{position:absolute;left:50%;top:52%;width:500px;height:470px;
 transform:translate(-50%,-50%) rotate(-14deg);z-index:1;
 border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
 background:radial-gradient(120% 120% at 30% 25%,#FF8A5C 0%,#F4542A 48%,#D93B12 100%);
 box-shadow:0 40px 80px rgba(217,59,18,.28)}
.nv-main{position:relative;z-index:2;width:80%;max-width:520px;margin:0 auto;display:block}
.nv-main img{display:block;width:100%;height:auto}
.nv-chip{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:11px;width:150px;
 box-shadow:0 16px 34px rgba(15,17,21,.14);text-align:left}
.nv-chip img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:9px;
 margin-bottom:8px;background:#FAFAFB}
.nv-chip b{display:block;font-size:12px;font-weight:700;line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-chip span{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-top:4px}
.nv-c1{left:-1%;top:4%}
.nv-c2{right:-1%;top:12%}
.nv-c3{right:4%;bottom:2%}

/* ---- trust bar ---- */
.nv-bar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nv-barg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:20px 0}
/* the child combinator matters: the inner text wrapper must stack, not sit in a row */
.nv-barg > div{display:flex;gap:11px;align-items:flex-start;justify-content:flex-start}
.nv-barg > div > div{display:block;min-width:0}
.nv-barg em{font-size:19px;font-style:normal;display:flex;color:var(--ink);flex:none;margin-top:1px}
.nv-barg b{display:block;font-size:13px;font-weight:800;line-height:1.35}
.nv-barg i{display:block;font-size:11.5px;font-style:normal;color:var(--mut);line-height:1.45;margin-top:2px}

/* ---- categories: dark label overlay ---- */
.nv-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.nv-cat{position:relative;border-radius:12px;overflow:hidden;background:var(--bg);display:block}
.nv-cat img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
.nv-cat:hover img{transform:scale(1.06)}
.nv-cat .ov{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px;
 background:linear-gradient(transparent,rgba(15,17,21,.80));color:#fff}
.nv-cat b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.nv-cat span{display:flex;align-items:center;justify-content:space-between;font-size:11px;
 opacity:.8;margin-top:3px}

/* ---- product cards ---- */
.nv-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.nv-p{border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px;
 position:relative;display:flex;flex-direction:column;transition:box-shadow .18s}
.nv-p:hover{box-shadow:0 14px 28px rgba(15,17,21,.10)}
.nv-p .im{border-radius:8px;overflow:hidden;background:var(--bg);margin-bottom:10px}
.nv-p .im img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.nv-tag{position:absolute;left:18px;top:18px;z-index:2;font-size:10px;font-weight:800;
 padding:4px 8px;border-radius:5px;background:var(--ink);color:#fff}
.nv-tag.of{background:var(--or)}
.nv-heart{position:absolute;right:18px;top:18px;z-index:2;font-size:14px;line-height:1;
 color:var(--mut);background:none;border:0;padding:2px;cursor:pointer;transition:.15s}
.nv-heart:hover{color:var(--or);transform:scale(1.15)}
.nv-heart.on{color:var(--or)}
.nv-p h3{font-size:13px;font-weight:700;line-height:1.35;margin:0 0 6px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nv-pr{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.nv-pr b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.nv-pr del{font-size:11.5px;color:#9AA0A8}
.nv-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.nv-foot .st{color:var(--star);font-size:10.5px;letter-spacing:.5px}
.nv-foot .st i{font-style:normal;color:var(--mut);margin-left:4px}
.nv-cartb{width:30px;height:30px;border-radius:7px;background:var(--ink);color:#fff!important;
 display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;
 transition:background .18s}
.nv-cartb:hover{background:var(--or)}

/* ---- best sellers: wide split cards ---- */
.nv-best{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nv-bs{background:var(--bg);border-radius:12px;padding:16px;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center;position:relative}
.nv-bs .im{border-radius:9px;overflow:hidden;background:#fff}
.nv-bs .im img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.nv-bs .bdg{position:absolute;left:26px;top:26px;z-index:2;background:#FFE7C2;color:#8A4B00;
 font-size:10px;font-weight:800;padding:4px 8px;border-radius:5px}
.nv-bs h3{font-size:14.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0 0 6px}
.nv-bs .pr{font-size:16px;font-weight:800;color:var(--or);margin-bottom:6px}
.nv-bs .st{color:var(--star);font-size:11px;letter-spacing:.5px;margin-bottom:8px}
.nv-bs .st i{font-style:normal;color:var(--mut);margin-left:4px}
.nv-bs p{font-size:12px;color:var(--mut);line-height:1.5;margin:0 0 12px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nv-bs .row{display:flex;gap:8px;align-items:center}
.nv-bs .qa{background:var(--ink);color:#fff!important;font-size:12px;font-weight:700;
 padding:9px 18px;border-radius:7px;transition:background .18s}
.nv-bs .qa:hover{background:var(--or)}

/* ---- two promo panels ---- */
.nv-promos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.nv-pr1,.nv-pr2{border-radius:14px;padding:32px;color:#fff;position:relative;overflow:hidden;
 min-height:230px;display:flex;flex-direction:column;justify-content:center}
.nv-pr1{background:linear-gradient(120deg,#FF7A45,#FF3D00)}
.nv-pr2{background:linear-gradient(120deg,#22252C,#0B0C0F)}
/* Two flat gradients next to each other look printed on. A pair of soft radial
   lights drifting behind the text gives them depth without pulling attention
   off the headline - hence the low opacity and the very slow loop. The text
   sits above both layers on its own stacking context. */
.nv-pr1::before,.nv-pr2::before{content:"";position:absolute;inset:-30%;pointer-events:none;
 background:
  radial-gradient(38% 46% at 22% 24%,rgba(255,255,255,.30),transparent 62%),
  radial-gradient(34% 42% at 82% 78%,rgba(255,255,255,.16),transparent 60%);
 animation:njd-glow 18s ease-in-out infinite}
.nv-pr2::before{background:
  radial-gradient(40% 48% at 20% 20%,rgba(255,122,69,.34),transparent 64%),
  radial-gradient(36% 44% at 84% 82%,rgba(120,150,255,.16),transparent 60%)}
/* a faint diagonal weave on top, so the light has something to sit on */
.nv-pr1::after,.nv-pr2::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 1px,transparent 1px 9px);
 mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent)}
.nv-pr1 > *,.nv-pr2 > *{position:relative;z-index:1}
@keyframes njd-glow{0%,100%{transform:translate3d(0,0,0) scale(1)}
 50%{transform:translate3d(4%,-5%,0) scale(1.12)}}
.nv-pr1 .lbl,.nv-pr2 .lbl{font-size:11.5px;font-weight:800;letter-spacing:.1em;
 text-transform:uppercase;opacity:.85}
.nv-pr1 h3,.nv-pr2 h3{font-size:28px;font-weight:800;letter-spacing:-.035em;margin:8px 0 8px;
 color:#fff;max-width:300px;line-height:1.1}
.nv-pr1 p,.nv-pr2 p{font-size:13px;opacity:.8;margin:0 0 18px;max-width:290px;line-height:1.55}
.nv-pr1 .btn{background:#fff;color:#FF3D00!important}
.nv-pr1 .btn:hover{background:var(--ink);color:#fff!important}
.nv-clock{display:flex;gap:8px;margin:4px 0 18px}
.nv-clock div{background:rgba(255,255,255,.16);border-radius:7px;padding:8px 4px;width:54px;
 text-align:center}
.nv-clock b{display:block;font-size:17px;font-weight:800}
.nv-clock span{display:block;font-size:9.5px;opacity:.75;margin-top:1px}
.nv-art{position:absolute;right:-20px;bottom:-20px;width:200px;opacity:.9;
 border-radius:12px;overflow:hidden}
.nv-art img{display:block;width:100%}
.nv-pr1 .btn,.nv-pr2 .btn{align-self:flex-start}

/* ---- content panels ---- */
.nv-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.nv-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:24px}
.nv-card > h3{font-size:16px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.nv-tst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nv-q{border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px;
 display:flex;flex-direction:column}
.nv-q .st{color:var(--star);font-size:12px;letter-spacing:2px;margin-bottom:11px}
.nv-q p{font-size:13.5px;line-height:1.62;color:#4B5058;margin:0 0 16px}
.nv-who{display:flex;gap:11px;align-items:center;margin-top:auto}
.nv-av{width:38px;height:38px;border-radius:50%;flex:none;background:var(--ink);color:#fff;
 font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.nv-who b{display:block;font-size:13.5px;font-weight:800}
.nv-who i{display:block;font-size:11.5px;font-style:normal;color:var(--or);font-weight:700}
/* ---- how it works: a timeline that draws itself on scroll ----
   Three cards side by side read as three separate things; buying is one
   sequence, so the steps run down a single rail instead. The rail is an
   inline-start border on the track, which puts it on the right in Arabic and
   the left in English with no separate RTL rule, and the numbered markers sit
   on top of it. Each .nv-st carries data-rv, so they arrive one after another
   as the reader comes down the page. */
.nv-steps{position:relative;counter-reset:s}
.nv-st{position:relative;padding:0 0 30px;padding-inline-start:58px;background:none;border-radius:0}
/* the rail belongs to each step rather than to the block, so it stops at the
   last marker instead of trailing off under the final paragraph */
.nv-st::after{content:"";position:absolute;top:42px;bottom:-4px;inset-inline-start:19px;
 width:2px;background:linear-gradient(rgba(255,61,0,.55),rgba(255,61,0,.16));border-radius:2px}
.nv-steps .nv-st:last-child{padding-bottom:0}
.nv-steps .nv-st:last-child::after{display:none}
.nv-st::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-2px;
 inset-inline-start:0;width:40px;height:40px;border-radius:50%;margin:0;
 display:flex;align-items:center;justify-content:center;
 background:#fff;border:2px solid var(--or);color:var(--or);
 font-size:13.5px;font-weight:800;letter-spacing:-.02em;
 box-shadow:0 0 0 5px #fff}
.nv-st b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;
 margin:8px 0 7px}
.nv-st p{font-size:13.5px;line-height:1.68;color:#565B62;margin:0;max-width:620px}
/* the marker rides in with the card rather than sitting there waiting for it */
.nv .nv-st[data-rv]::before{transform:scale(.7);opacity:0;
 transition:transform .5s cubic-bezier(.34,1.56,.64,1) .12s,opacity .4s ease .12s}
.nv .nv-st[data-rv].in::before{transform:none;opacity:1}
.nv-faq details{border-bottom:1px solid var(--line)}
.nv-faq details:last-child{border-bottom:0}
.nv-faq summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:600;
 padding:15px 30px 15px 0;position:relative}
.nv-faq summary::-webkit-details-marker{display:none}
.nv-faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:19px;
 color:var(--mut);font-weight:400}
.nv-faq details[open] summary::after{content:"\2013"}
.nv-faq details[open] summary{color:var(--or)}
.nv-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nv-nums div{background:var(--bg);border-radius:11px;padding:20px}
.nv-nums b{display:block;font-size:25px;font-weight:800;letter-spacing:-.035em;color:var(--or)}
.nv-nums span{display:block;font-size:12.5px;color:#565B62;margin-top:4px;line-height:1.45}
.nv-faq p{font-size:13px;line-height:1.68;color:#4B5058;margin:0 0 16px}
.nv-news{background:var(--ink);border-radius:14px;padding:40px;text-align:center;color:#fff}
.nv-news h3{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff;margin:0 0 10px}
.nv-news p{font-size:14px;opacity:.72;margin:0 auto 22px;max-width:440px;line-height:1.6}
.nv-form{display:flex;max-width:440px;margin:0 auto;border-radius:8px;overflow:hidden}
.nv-form input{flex:1;border:0;padding:14px 16px;font-size:13.5px;font-family:inherit;outline:0;
 min-width:0;background:#fff;color:var(--ink)}
.nv-form button{border:0;background:var(--or);color:#fff;font-size:13.5px;font-weight:700;
 padding:0 26px;cursor:pointer;font-family:inherit;transition:background .18s}
.nv-form button:hover{background:#fff;color:var(--ink)}
.nv-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nv-bl .im{border-radius:11px;overflow:hidden;background:var(--bg);margin-bottom:11px}
.nv-bl img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .3s}
.nv-bl:hover img{transform:scale(1.05)}
.nv-bl time{display:block;font-size:11px;color:var(--mut);margin-bottom:5px}
.nv-bl h4{font-size:14px;font-weight:700;line-height:1.4;margin:0 0 7px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nv-bl span{font-size:12px;font-weight:700;color:var(--or)}

@media (max-width:1100px){
 .nv-cats,.nv-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
 .nv-best{grid-template-columns:1fr}
 .nv-hg{grid-template-columns:1fr;gap:34px}
 .nv-hero h1{font-size:38px}
 .nv-stagew{min-height:430px}
 .nv-blob{width:380px;height:360px}

  .nv-2,.nv-promos{grid-template-columns:1fr}
 .nv-barg{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .nv-tst,.nv-blog{grid-template-columns:1fr}

}
@media (max-width:680px){
 .nv-cats,.nv-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nv-hero h1{font-size:30px}
 .nv-chip{width:112px;padding:8px}
 .nv-blob{width:280px;height:270px}
 .nv-stagew{min-height:340px}
 .nv-topg{font-size:11.5px}
 .nv-topg span{padding:0 14px}
 .nv-logo img{height:34px}
 .nv-chip{width:96px}
 /* a full-width square thumbnail makes these cards a screen tall, so the
    image keeps its own narrow column on phones */
 .nv-bs{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px;align-items:start}
 .nv-bs .bdg{left:18px;top:18px}
 .nv-bs p{display:none}
 .nv-news{padding:28px 20px}
 .nv-news h3{font-size:21px}
 .nv-form{flex-direction:column;gap:8px;background:transparent}
 .nv-form input,.nv-form button{border-radius:8px;padding:14px}
}

/* ============ scroll reveal + hero motion ============ */
.nv [data-rv]{opacity:0;transform:translateY(26px);
 transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.nv [data-rv].in{opacity:1;transform:none}
.nv [data-rv="l"]{transform:translateX(-30px)}
.nv [data-rv="r"]{transform:translateX(30px)}
.nv [data-rv="s"]{transform:scale(.94)}
.nv [data-rv].in{transform:none}

@keyframes njd-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-15px,0)}}
@keyframes njd-float-s{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
 50%{transform:translate3d(0,-11px,0) rotate(-1.2deg)}}
@keyframes njd-blob{0%,100%{border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
  transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
 50%{border-radius:44% 56% 46% 54%/56% 44% 56% 44%;
  transform:translate(-50%,-52%) rotate(-9deg) scale(1.035)}}

.nv-main{animation:njd-float 7s ease-in-out infinite;will-change:transform}
.nv-blob{animation:njd-blob 16s ease-in-out infinite;will-change:transform,border-radius}
.nv-chip{animation:njd-float-s 6s ease-in-out infinite;will-change:transform}
.nv-c1{animation-duration:6.4s;animation-delay:-1.1s}
.nv-c2{animation-duration:7.2s;animation-delay:-2.6s}
.nv-c3{animation-duration:5.8s;animation-delay:-3.9s}
.nv-chip:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
 .nv [data-rv]{opacity:1!important;transform:none!important;transition:none}
 .nv .nv-st[data-rv]::before{opacity:1!important;transform:none!important;transition:none}
 .nv-main,.nv-blob,.nv-chip,.nv-pr1::before,.nv-pr2::before{animation:none!important}
}

/* ============ page hero (shop / categories / about / contact / account) ============ */
.nv-ph{background:linear-gradient(180deg,#FAFAFB 0%,#F1F1F3 100%);position:relative;overflow:hidden;
 padding:52px 0 54px}
.nv-ph::after{content:"";position:absolute;right:-130px;top:-150px;width:360px;height:340px;z-index:0;
 border-radius:56% 44% 62% 38%/48% 58% 42% 52%;opacity:.1;
 background:radial-gradient(120% 120% at 30% 25%,#FF8A5C 0%,#F4542A 48%,#D93B12 100%);
 animation:njd-blob 18s ease-in-out infinite}
.nv-ph .w{position:relative;z-index:1}
.nv-ph h1{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1.06;margin:14px 0 0;
 max-width:760px}
.nv-ph .lede{font-size:16px;color:#5C6169;margin:16px 0 0;max-width:600px}
.nv-crumb{font-size:12.5px;color:var(--mut);margin-top:20px}
.nv-crumb a:hover{color:var(--or)}
.nv-crumb span{color:var(--ink);font-weight:600}

/* ============ shop ============ */
.nv-shop{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;align-items:start;
 padding:38px 0 10px}
.nv-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:22px}
.nv-fbox{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 18px}
.nv-fbox h4{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
 color:var(--mut);margin:0 0 12px}
.nv-fbox label{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;cursor:pointer;
 color:#3A3F45}
.nv-fbox label:hover{color:var(--or)}
.nv-fbox input{accent-color:var(--or);width:15px;height:15px;margin:0;cursor:pointer}
.nv-fbox label em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--mut)}
.nv-fclear{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:700;
 color:var(--or);cursor:pointer}
.nv-fclear:hover{text-decoration:underline}
.nv-shead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;
 flex-wrap:wrap}
.nv-shead p{margin:0;font-size:12.5px;color:var(--mut)}
.nv-shead p b{color:var(--ink)}
.nv-sort{border:1px solid var(--line)!important;border-radius:8px!important;padding:9px 34px 9px 12px!important;
 font:inherit;font-size:13px;background:#fff;color:var(--ink);cursor:pointer;
 width:auto!important;min-width:180px;flex:none;height:auto!important;
 -webkit-appearance:none;appearance:none;
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7379' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 12px center}
.nv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.nv-empty{border:1px dashed var(--line);border-radius:13px;padding:44px;text-align:center;
 color:var(--mut);font-size:14px}
.nv-mfil{display:none;width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;
 padding:12px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;margin-bottom:16px}

/* ============ categories ============ */
.nv-cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:38px 0 0}
.nv-cg{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;background:#fff;
 border:1px solid var(--line);border-radius:15px;padding:18px;transition:box-shadow .22s,transform .22s}
.nv-cg:hover{box-shadow:0 18px 38px rgba(15,17,21,.09);transform:translateY(-3px)}
.nv-cg .im{border-radius:11px;overflow:hidden;background:var(--bg);aspect-ratio:1}
.nv-cg .im img{display:block;width:100%;height:100%;object-fit:cover}
.nv-cg h3{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:2px 0 7px}
.nv-cg p{font-size:13.5px;color:#5C6169;margin:0 0 12px;line-height:1.55}
.nv-cg .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.nv-cg .meta span{font-size:11.5px;font-weight:700;background:var(--bg);border-radius:20px;
 padding:5px 11px;color:#4A5057}
.nv-cg .go{font-size:12.5px;font-weight:700;color:var(--or)}

/* ============ about ============ */
.nv-abt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;
 padding:44px 0 0}
.nv-abt h2{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:0 0 18px}
.nv-abt p{font-size:15px;color:#4A5057;line-height:1.72;margin:0 0 14px}
.nv-port{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
/* an absolutely positioned flex child takes its static position from the start of
   the row, not the centre, so centre it explicitly or it drifts over the text */
.nv-port .bl{position:absolute;inset:0;margin:auto;width:392px;height:376px;z-index:1;
 border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
 background:radial-gradient(120% 120% at 30% 25%,#FF8A5C 0%,#F4542A 48%,#D93B12 100%);
 box-shadow:0 34px 64px rgba(217,59,18,.24);animation:njd-blob-c 16s ease-in-out infinite}
/* njd-blob carries a translate(-50%,-50%) meant for a top/left positioned hero blob;
   this one is already centred by margin:auto, so it needs a translate free variant */
@keyframes njd-blob-c{0%,100%{border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
  transform:rotate(-14deg) scale(1)}
 50%{border-radius:44% 56% 46% 54%/56% 44% 56% 44%;transform:rotate(-9deg) scale(1.035)}}
.nv-port img{position:relative;z-index:2;width:78%;max-width:330px;height:auto;display:block;
 animation:njd-float 8s ease-in-out infinite}
/* the author portrait is a cut out with a transparent background, so it stands on
   the blob rather than sitting inside a photo frame: contain, not cover, or a 4/5
   crop would slice the shoulders off a landscape source */
.nv-port.is-photo{align-items:flex-end;padding-bottom:58px}
.nv-port.is-photo img{width:78%;max-width:344px;height:auto;aspect-ratio:auto;
 object-fit:contain;border:0;border-radius:0;
 /* the source is cropped square at the chest, so fade the last strip out instead
    of leaving a straight cut sitting on the blob */
 -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,0) 97%);
 mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,0) 97%);
 filter:drop-shadow(0 18px 30px rgba(15,17,21,.18))}
.nv-ppl{position:relative;z-index:2;width:74%;max-width:300px;aspect-ratio:4/5;border-radius:20px;
 border:6px solid #fff;background:var(--ink);box-shadow:0 26px 54px rgba(15,17,21,.22);
 display:flex;align-items:center;justify-content:center;
 animation:njd-float 8s ease-in-out infinite}
.nv-ppl img{width:56%;max-width:none;filter:brightness(0) invert(1);opacity:.9;animation:none}
.nv-creds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0}
.nv-cr{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px 18px}
.nv-cr b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--or);
 margin-bottom:4px}
.nv-cr span{font-size:12.5px;color:var(--mut);line-height:1.45;display:block}
.nv-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.nv-vl{background:var(--bg);border-radius:14px;padding:24px 22px}
.nv-vl svg{color:var(--or);margin-bottom:12px}
.nv-vl b{display:block;font-size:15.5px;font-weight:800;margin-bottom:7px}
.nv-vl p{margin:0;font-size:13.5px;color:#5C6169;line-height:1.62}
.nv-tl{border-left:2px solid var(--line);padding-left:26px;margin-left:8px}
.nv-tl > div{position:relative;padding-bottom:26px}
.nv-tl > div:last-child{padding-bottom:0}
.nv-tl > div::before{content:"";position:absolute;left:-33px;top:5px;width:12px;height:12px;
 border-radius:50%;background:var(--or);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--or)}
.nv-tl b{display:block;font-size:15.5px;font-weight:800;margin-bottom:5px}
.nv-tl p{margin:0;font-size:13.5px;color:#5C6169;line-height:1.62}

/* ============ contact ============ */
.nv-ct{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;
 align-items:start;padding:40px 0 0}
.nv-fwrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.nv-fwrap h2{font-size:21px;font-weight:800;letter-spacing:-.025em;margin:0 0 6px}
.nv-fwrap > p{font-size:13.5px;color:var(--mut);margin:0 0 20px}
.nv-side2{display:flex;flex-direction:column;gap:14px}
.nv-cbox{background:var(--bg);border-radius:14px;padding:20px}
.nv-cbox h4{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
 color:var(--mut);margin:0 0 12px}
.nv-cbox a,.nv-cbox p{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:#3A3F45;
 margin:0 0 11px;line-height:1.5}
.nv-cbox a:last-child,.nv-cbox p:last-child{margin-bottom:0}
.nv-cbox a:hover{color:var(--or)}
.nv-cbox > a svg,.nv-cbox > p svg{flex:none;color:var(--or);margin-top:1px}
.nv-cbox b{display:block;color:var(--ink);font-weight:700}
.nv-socs{display:flex;gap:9px;flex-wrap:wrap}
.nv-socs a{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);
 display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.18s}
.nv-socs a svg{color:inherit}
.nv-socs a:hover{background:var(--or);border-color:var(--or);color:#fff;transform:translateY(-2px);
 box-shadow:0 6px 16px rgba(255,90,31,.28)}

/* Fluent Forms, dressed to match the rest of the design */
.nv .fluentform .ff-el-group{margin-bottom:16px}
.nv .fluentform .ff-el-input--label label{font-size:12.5px;font-weight:700;color:var(--ink);
 margin-bottom:6px}
.nv .fluentform .ff-el-form-control{border:1px solid var(--line);border-radius:9px;padding:12px 14px;
 font:inherit;font-size:14px;color:var(--ink);background:var(--bg);box-shadow:none;transition:.16s;
 width:100%;height:auto;line-height:1.5}
.nv .fluentform .ff-el-form-control:focus{border-color:var(--or);background:#fff;
 box-shadow:0 0 0 3px rgba(255,90,31,.13);outline:none}
.nv .fluentform textarea.ff-el-form-control{min-height:130px;resize:vertical}
.nv .fluentform .ff-btn-submit{background:var(--or);border:0;border-radius:9px;padding:14px 30px;
 font:inherit;font-weight:700;font-size:14px;color:#fff;cursor:pointer;transition:background .18s;
 width:auto;box-shadow:none}
.nv .fluentform .ff-btn-submit:hover{background:var(--ink)}
.nv .fluentform .ff-el-is-error .ff-el-form-control{border-color:#D93B12}
.nv .fluentform .error-text,.nv .fluentform .text-danger{color:#D93B12;font-size:12.5px}
.nv .ff-message-success{background:#F0FAF2;border:1px solid #BCE5C6;border-radius:11px;padding:18px;
 color:#1E6B33;font-size:14px}

/* ============ my account ============ */
.nv-acct{padding:38px 0 0}
.nv-acct .woocommerce{font-size:14.5px}
/* a two column shell only when the nav is actually rendered (not on the login screen) */
.nv-acct .woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;
 grid-template-columns:222px minmax(0,1fr);gap:24px;align-items:start}
.nv-acct .woocommerce-MyAccount-navigation{float:none!important;width:auto!important;margin:0!important}
.nv-acct .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
 display:flex;flex-direction:column;gap:8px}
.nv-acct .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:10px;
 padding:11px 16px;border-radius:9px;
 background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink);
 transition:.16s}
/* Blocksy fills the hovered account tab with the palette accent, and the accent
   is the same orange this rule was tinting the label - the tab went blank on
   hover. The fill is declared here so the pair is always chosen together. */
.nv-acct .woocommerce-MyAccount-navigation li a:hover,
.nv-acct .woocommerce-MyAccount-navigation li a:focus-visible{
 background:#FFF3ED!important;border-color:var(--or)!important;color:var(--or)!important}
.nv-acct .woocommerce-MyAccount-navigation li a:hover *,
.nv-acct .woocommerce-MyAccount-navigation li a:focus-visible *{color:inherit!important}
.nv-acct .woocommerce-MyAccount-navigation li.is-active a,
.nv-acct .woocommerce-MyAccount-navigation li.is-active a:hover,
.nv-acct .woocommerce-MyAccount-navigation li.is-active a:focus-visible{
 background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
.nv-acct .woocommerce-MyAccount-navigation li.is-active a *{color:#fff!important}
.nv-acct .woocommerce-MyAccount-content{background:#fff;border:1px solid var(--line);
 border-radius:16px;padding:28px;margin:0!important;float:none!important;width:auto!important;
 min-width:0;overflow-x:auto}
.nv-acct .woocommerce-MyAccount-content p{color:#4A5057;line-height:1.7}
.nv-acct .woocommerce-MyAccount-content a{color:var(--or);font-weight:600}
/* Woo's section wrappers (order-downloads, order-details) are sized to the viewport
   upstream, which drags their tables past the panel edge */
.nv-acct .woocommerce-MyAccount-content > *{max-width:100%!important}
.nv-acct .woocommerce-MyAccount-content > section,
.nv-acct .woocommerce-MyAccount-content > div{width:auto!important;
 margin-left:0!important;margin-right:0!important;left:auto!important;right:auto!important}
/* something upstream sizes account tables to the viewport, not to their panel */
.nv-acct .woocommerce-MyAccount-content table{width:100%!important;max-width:100%!important;
 border-collapse:collapse;font-size:13.5px;table-layout:auto}
/* download labels are whole file names: keep each button on one line and let the
   name truncate, otherwise a narrow column stacks it letter by letter */
.nv-acct .woocommerce-MyAccount-content td .button{display:inline-block;max-width:230px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
 padding:9px 14px!important;font-size:12.5px!important;line-height:1.35}
.nv-acct .woocommerce-MyAccount-content .download-remaining,
.nv-acct .woocommerce-MyAccount-content .download-expires{width:1%;white-space:nowrap;text-align:center}
.nv-acct .woocommerce-MyAccount-content .download-file{width:1%;white-space:nowrap}
.nv-acct .woocommerce-MyAccount-content td.download-remaining,
.nv-acct .woocommerce-MyAccount-content td.download-expires{white-space:nowrap;text-align:center}
.nv-acct .woocommerce-MyAccount-content th.download-remaining,
.nv-acct .woocommerce-MyAccount-content th.download-expires{text-align:center}
.nv-acct .woocommerce-MyAccount-content th{text-align:left;font-size:11.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--mut);padding:10px 12px;border-bottom:1px solid var(--line)}
.nv-acct .woocommerce-MyAccount-content td{padding:14px 12px;border-bottom:1px solid var(--line)}
.nv-acct .button,.nv-acct .woocommerce-Button{background:var(--or)!important;color:#fff!important;
 border-radius:9px!important;padding:12px 24px!important;font-weight:700!important;font-size:13.5px!important;
 border:0!important}
.nv-acct .button:hover,.nv-acct .woocommerce-Button:hover{background:var(--ink)!important}
.nv-acct input[type=text],.nv-acct input[type=email],.nv-acct input[type=password],
.nv-acct input[type=tel]{border:1px solid var(--line)!important;border-radius:9px!important;
 padding:12px 14px!important;background:var(--bg)!important;font-size:14px!important}
.nv-acct input:focus{border-color:var(--or)!important;background:#fff!important;outline:none!important}
.nv-acct .woocommerce-info,.nv-acct .woocommerce-message,.nv-acct .woocommerce-error{
 border-radius:11px;border:1px solid var(--line);background:var(--bg);padding:15px 18px;
 border-top:2px solid var(--or);list-style:none;margin:0 0 18px;
 display:flex;align-items:center;gap:14px;flex-wrap:wrap;line-height:1.5}
.nv-acct .woocommerce-info::before,.nv-acct .woocommerce-message::before,
.nv-acct .woocommerce-error::before{position:static!important;flex:none;margin:0!important;
 top:auto!important;left:auto!important;color:var(--or)!important}
.nv-acct .woocommerce-info .button,.nv-acct .woocommerce-message .button{margin-left:auto;flex:none}
.nv-hlp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:34px 0 0}
.nv-hp{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff}
.nv-hp svg{color:var(--or);margin-bottom:11px}
.nv-hp b{display:block;font-size:15px;font-weight:800;margin-bottom:6px}
.nv-hp p{margin:0 0 12px;font-size:13.5px;color:#5C6169;line-height:1.6}
.nv-hp a{font-size:12.5px;font-weight:700;color:var(--or)}

/* ============ responsive ============ */
@media (max-width:1100px){
 .nv-ph h1{font-size:34px}
 .nv-shop{grid-template-columns:1fr;gap:0}
 .nv-side{position:static;display:none;margin-bottom:22px}
 .nv-side.open{display:flex}
 .nv-mfil{display:block}
 .nv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nv-cgrid,.nv-abt,.nv-ct{grid-template-columns:1fr}
 .nv-abt{gap:30px}
 .nv-port{min-height:300px;order:-1}
 .nv-creds{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nv-vals,.nv-hlp{grid-template-columns:1fr}
}
@media (max-width:680px){
 .nv-ph{padding:38px 0 40px}
 .nv-ph h1{font-size:28px}
 .nv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .nv-cg{grid-template-columns:1fr}
 .nv-creds{grid-template-columns:1fr}
 .nv-fwrap{padding:20px}
 .nv-acct .woocommerce-MyAccount-content{padding:18px}
}

/* orders table: Woo stretches the action buttons to fill the column, which turns a
   two word "View" into a banner. Keep the column to its content and the rows aligned. */
.nv-acct .woocommerce-MyAccount-content table td,
.nv-acct .woocommerce-MyAccount-content table th{vertical-align:middle}
.nv-acct .woocommerce-orders-table__cell-order-actions{width:1%;white-space:nowrap;text-align:left}
.nv-acct .woocommerce-orders-table__cell-order-actions .button{width:auto;min-width:0;
 display:inline-block}

/* the filter script hides cards with the hidden attribute, and [hidden] loses the
   cascade to any class that sets a display, so state it once with weight */
.nv [hidden]{display:none!important}

/* motion is a home page treatment only: elsewhere the sections are static and the
   decorative shapes hold still */
body:not(.njd-motion) .nv [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
body:not(.njd-motion) .nv-ph::after,
body:not(.njd-motion) .nv-port .bl,
body:not(.njd-motion) .nv-port img,
body:not(.njd-motion) .nv-ppl{animation:none!important}
body:not(.njd-motion) .nv-pr1::before,body:not(.njd-motion) .nv-pr2::before{animation:none!important}

/* core reserves contain-intrinsic-size for sizes="auto" images; on a percentage
   width that placeholder wins over the real ratio, so opt the portrait out */
.nv-port img{contain-intrinsic-size:auto!important}

/* ==========================================================================
   My Account - the designed dashboard and downloads screens.
   Both render inside .woocommerce-MyAccount-content, which already carries the
   card's own padding and border, so these rules only style what is inside it.
   Logical properties throughout so the Arabic side mirrors without a second
   ruleset.
   ========================================================================== */

.njd-dash{display:grid;gap:26px}

.njd-dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
 padding-bottom:20px;border-bottom:1px solid var(--line)}
.njd-dhead span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:var(--or)}
.njd-dhead h3{margin:6px 0 0;font-size:25px;font-weight:800;letter-spacing:-.03em}
.njd-dout{font-size:12.5px;font-weight:600;color:var(--mut)!important;white-space:nowrap}
.njd-dout:hover{color:var(--or)!important}

.njd-dstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.njd-dstat{background:var(--bg);border-radius:12px;padding:16px 18px}
.njd-dstat em{display:flex;color:var(--or)}
.njd-dstat b{display:block;margin-top:10px;font-size:23px;font-weight:800;letter-spacing:-.035em;
 line-height:1.1}
.njd-dstat i{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--mut)}

.njd-dsh{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.njd-dsh h4{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.njd-dsh a{font-size:12.5px;font-weight:600;color:var(--mut)!important}
.njd-dsh a:hover{color:var(--or)!important}

/* ---- newest files, a compact row rather than a card ---- */
.njd-dlist{display:grid;gap:10px}
.njd-drow{display:flex;align-items:center;gap:14px;padding:12px 14px;
 border:1px solid var(--line);border-radius:12px;background:#fff}
.njd-drow .th{flex:0 0 46px;width:46px;height:46px;border-radius:9px;overflow:hidden;
 background:var(--bg);display:flex}
.njd-drow .th img{width:100%;height:100%;object-fit:cover}
.njd-drow .tx{flex:1;min-width:0}
.njd-drow .tx b{display:block;font-size:14px;font-weight:700;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.njd-drow .tx i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--mut)}
.njd-dbtn{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
 background:var(--ink);color:#fff!important;font-size:12.5px;font-weight:700;
 padding:10px 16px;border-radius:8px;transition:background .18s}
.njd-dbtn:hover{background:var(--or)}

/* ---- what they have not bought yet ---- */
.njd-dsug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.njd-dcard{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;
 display:flex;flex-direction:column}
.njd-dcard .im{display:block;background:var(--bg);border-radius:9px;overflow:hidden;margin-bottom:12px}
.njd-dcard .im img{width:100%;height:auto;display:block}
.njd-dcard b{font-size:13.5px;font-weight:700;line-height:1.4}
.njd-dcard .pr{display:block;margin:8px 0 12px;font-size:15px;font-weight:800}
.njd-dcard .pr del{margin-inline-start:7px;font-size:12.5px;font-weight:500;color:var(--mut)}
.njd-dbuy{margin-top:auto;display:block;text-align:center;background:var(--or);color:#fff!important;
 font-size:12.5px;font-weight:700;padding:10px 12px;border-radius:8px;transition:background .18s}
.njd-dbuy:hover{background:var(--ink)}

/* ---- the four routes out of the dashboard ---- */
.njd-dlinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
 padding-top:22px;border-top:1px solid var(--line)}
.njd-dlink{border:1px solid var(--line);border-radius:12px;padding:16px;display:block;
 transition:border-color .18s,transform .18s}
.njd-dlink:hover{border-color:var(--or);transform:translateY(-2px)}
.njd-dlink em{display:flex;color:var(--or)}
.njd-dlink b{display:block;margin-top:11px;font-size:13.5px;font-weight:700}
.njd-dlink i{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--mut)}

/* ---- empty state, shared by both screens ---- */
.njd-dempty{text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:14px}
.njd-dempty em{display:inline-flex;color:var(--or)}
.njd-dempty b{display:block;margin-top:12px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.njd-dempty p{max-width:440px;margin:8px auto 18px;font-size:13.5px;color:var(--mut)}
.njd-dcta{display:inline-block;background:var(--or);color:#fff!important;font-size:13px;
 font-weight:700;padding:12px 24px;border-radius:8px}
.njd-dcta:hover{background:var(--ink)}

/* ---- downloads: one card per product, its files listed inside ---- */
.njd-dlnote{margin:0 0 18px;font-size:13px;color:var(--mut)}
.njd-dls{display:grid;gap:14px}
.njd-dl{display:flex;gap:18px;border:1px solid var(--line);border-radius:14px;padding:16px;
 background:#fff}
.njd-dl .cv{flex:0 0 96px;width:96px;height:96px;border-radius:11px;overflow:hidden;
 background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.njd-dl .cv img{width:100%;height:100%;object-fit:cover}
.njd-dl .bd{flex:1;min-width:0}
.njd-dl .tag{display:inline-block;background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;
 letter-spacing:.1em;padding:4px 9px;border-radius:5px}
.njd-dl h4{margin:9px 0 0;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.njd-dl h4 a{color:inherit!important}
.njd-dl h4 a:hover{color:var(--or)!important}
.njd-dl .mt{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mut)}
.njd-dl .mt span{display:inline-flex;align-items:center}
.njd-dl .mt span + span::before{content:"";width:3px;height:3px;border-radius:50%;
 background:currentColor;margin-inline-end:14px;opacity:.55}
.njd-dl .fl{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);
 display:grid;gap:8px}
.njd-dl .fl li{display:flex;align-items:center;gap:10px;font-size:13px}
.njd-dl .fl em{display:flex;color:var(--mut)}
.njd-dl .fl b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.njd-dl .fl i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.08em;
 color:var(--mut);background:var(--bg);padding:3px 7px;border-radius:4px}
.njd-dl .fl a{flex:0 0 auto;background:var(--or);color:#fff!important;font-size:12px;
 font-weight:700;padding:8px 15px;border-radius:7px;transition:background .18s}
.njd-dl .fl a:hover{background:var(--ink)}

@media (max-width:900px){
 .njd-dstats,.njd-dlinks{grid-template-columns:repeat(2,minmax(0,1fr))}
 .njd-dsug{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
 .njd-dstats,.njd-dlinks,.njd-dsug{grid-template-columns:1fr}
 .njd-dl{flex-direction:column}
 .njd-dl .cv{width:100%;flex-basis:auto;height:140px}
 .njd-drow{flex-wrap:wrap}
 .njd-dbtn{width:100%;justify-content:center}
}

/* Arabic reads right to left, and these blocks are laid out with logical
   properties - only the few places that hard-code a direction need mirroring. */
.njd-ar .njd-dash,.njd-ar .njd-dls,.njd-ar .njd-dlnote,.njd-ar .njd-dempty{direction:rtl;text-align:right}
.njd-ar .njd-dempty{text-align:center}
.njd-dl .tag + .tag{margin-inline-start:5px}
.njd-dl .tag.gh{background:transparent;color:var(--mut);border:1px solid var(--line)}

/* ============================================================ Invoices ==== */
/* The Orders tab is presented as Invoices: a list of documents, and one full
   invoice on the store's letterhead that prints to a clean A4 page. */

.njd-gbtn{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:10px;
 border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:700;
 text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.njd-gbtn:hover{border-color:var(--ink);background:#fff}
.njd-gbtn svg{width:15px;height:15px}

.njd-invs{display:grid;gap:12px}
.njd-inv-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;
 gap:10px 26px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.njd-inv-row .hd{grid-column:1;display:flex;align-items:center;gap:10px}
.njd-inv-row .no{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.njd-inv-row .mt{grid-column:1;grid-row:2;margin:5px 0 0;font-size:13px;color:var(--mut);
 display:flex;flex-wrap:wrap;gap:6px 14px}
.njd-inv-row .mt span+span::before{content:"·";margin-inline-end:14px;color:var(--line)}
.njd-inv-row .tt{grid-row:1/3;text-align:end}
.njd-inv-row .tt b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.njd-inv-row .tt span{font-size:12px;color:var(--mut)}
.njd-inv-row .ax{grid-row:1/3;display:flex;gap:8px;align-items:center}

.njd-inv-row .st,.njd-inv .st{display:inline-block;padding:4px 10px;border-radius:100px;
 font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
 background:#EEF1F5;color:var(--mut)}
.st.is-completed{background:#E4F4EC;color:#0F7B4A}
.st.is-processing{background:#FEEDE4;color:#C2410C}
.st.is-on-hold{background:#FEF3C7;color:#92400E}
.st.is-cancelled,.st.is-failed,.st.is-refunded{background:#FCE7EC;color:#BE123C}

.njd-invpg{display:flex;gap:10px;margin-top:18px}
.njd-invpg a{padding:10px 16px;border:1px solid var(--line);border-radius:10px;
 font-size:14px;font-weight:700;text-decoration:none;color:var(--ink)}

/* ---- the document ---- */
.njd-invbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
 margin-bottom:18px}
.njd-inv{border:1px solid var(--line);border-radius:18px;background:#fff;padding:38px 40px 30px}
.njd-inv .ih{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
 padding-bottom:26px;border-bottom:2px solid var(--ink)}
.njd-inv .br img{display:block;height:44px;width:auto;margin-bottom:14px}
.njd-inv .br p{margin:0;font-size:12.5px;line-height:1.7;color:var(--mut)}
.njd-inv .ti{text-align:end}
.njd-inv .ti h3{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.njd-inv .ti b{display:block;margin:6px 0 9px;font-size:14px;font-weight:700;color:var(--mut);
 font-variant-numeric:tabular-nums}

.njd-inv .im{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
 padding:24px 0 28px;border-bottom:1px solid var(--line)}
.njd-inv .im i{display:block;font-style:normal;font-size:11.5px;font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.njd-inv .im b{display:block;font-size:14.5px;font-weight:700;line-height:1.4}
.njd-inv .im u{display:block;margin-top:3px;font-size:13px;color:var(--mut);text-decoration:none;
 word-break:break-word}

.njd-inv .it{width:100%;border-collapse:collapse;margin-top:8px}
.njd-inv .it th{padding:16px 10px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
 text-transform:uppercase;color:var(--mut);text-align:start;border-bottom:1px solid var(--line)}
.njd-inv .it td{padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.njd-inv .it td b{display:block;font-size:15px;font-weight:700;line-height:1.4}
.njd-inv .it td i{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--mut)}
.njd-inv .it .c{text-align:center;width:80px}
.njd-inv .it .n{text-align:end;width:150px;font-variant-numeric:tabular-nums;font-weight:700}
.njd-inv .it tfoot td{border-bottom:none;padding:9px 10px;font-size:14px;color:var(--mut)}
.njd-inv .it tfoot tr:first-child td{padding-top:18px}
.njd-inv .it tfoot .gr td{padding-top:14px;border-top:2px solid var(--ink);margin-top:8px;
 font-size:19px;font-weight:800;color:var(--ink)}

.njd-inv .nt{margin:22px 0 0;padding:16px 18px;border-radius:12px;background:var(--bg);
 font-size:13.5px;line-height:1.6}
.njd-inv .nt b{display:block;font-weight:800;margin-bottom:4px}
.njd-inv .if{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.njd-inv .if p{margin:0 0 6px;font-size:12.5px;line-height:1.7;color:var(--mut)}
.njd-invdl{margin-top:18px}

@media (max-width:900px){
 .njd-inv-row{grid-template-columns:1fr auto}
 .njd-inv-row .ax{grid-column:1/-1;grid-row:auto}
 .njd-inv .im{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
 .njd-inv{padding:26px 20px 22px}
 .njd-inv .ih{flex-direction:column}
 .njd-inv .ti{text-align:start}
 .njd-inv-row{grid-template-columns:1fr}
 .njd-inv-row .tt{grid-row:auto;text-align:start}
}

/* ---- print ----
   The sheet is printed from its own page (?njd-print=1), which carries nothing
   but the invoice, so printing needs no chrome-hiding here - only the ink
   adjustments a printer wants. An earlier version hid the account page with
   visibility:hidden, which left every hidden box occupying its space and pushed
   the invoice across three sheets. */
@media print{
 .njd-invbar,.njd-invdl{display:none}
 .njd-inv{border:none;border-radius:0;padding:0;break-inside:auto}
 .njd-inv .ih,.njd-inv .im{break-inside:avoid}
 .njd-inv .it tr{break-inside:avoid}
 .njd-inv .st{border:1px solid currentColor}
 .njd-inv img{max-width:180px}
 @page{margin:16mm}
}

/* No RTL tail: every axis above is a logical keyword (start/end, inset-inline,
   margin-inline), so the invoice mirrors on its own under .njd-ar. */
/* the theme's global table rules draw column separators; an invoice wants only
   the horizontal rules it declares above */
.njd-inv .it th,.njd-inv .it td{border-inline:none}

/* ============================================ my account, small screens ====
   These used to live up with the layout breakpoints near the top of the file,
   which put them BEFORE the .nv-acct base rules - same specificity, so the
   222px sidebar column won at every width and the account pages never
   collapsed. Kept here, after everything they override. */
@media (max-width:900px){
 .nv-acct .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr;gap:18px}
 .nv-acct .woocommerce-MyAccount-navigation ul{flex-direction:row;flex-wrap:wrap}
 .nv-acct .woocommerce-MyAccount-navigation li{flex:1 1 auto}
 .nv-acct .woocommerce-MyAccount-navigation li a{justify-content:center;padding:10px 14px}
}

@media (max-width:600px){
 .nv-acct .woocommerce-MyAccount-navigation li a{font-size:13.5px;gap:7px}

 .njd-dhead{flex-wrap:wrap;gap:10px}
 .njd-dl .fl li{flex-wrap:wrap;row-gap:8px}
 .njd-dl .fl li a{margin-inline-start:auto}

 .njd-invbar{flex-direction:column;align-items:stretch}
 .njd-invbar>*{justify-content:center}
 .njd-inv .im{grid-template-columns:1fr;gap:16px}
 .njd-inv .it th,.njd-inv .it td{padding:12px 6px}
 .njd-inv .it .n{width:auto}
 .njd-inv .it .c{width:44px}
}

/* ================================================ sign in / register ====== */

/* checkout is not wrapped in .nv, where these tokens are defined, so the two
   blocks that also render there carry their own copy */
.njd-auth,.njd-telrow{--or:#FF5A1F;--ink:#0F1115;--mut:#6E7379;--line:#EAEAEC}

.njd-auth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.njd-auth.one{grid-template-columns:minmax(0,460px);justify-content:center}
.njd-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 30px 28px}
.njd-card h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.03em}
.njd-card .sb{margin:6px 0 22px;font-size:13.5px;color:var(--mut);line-height:1.6}

.njd-auth .form-row{display:block;margin:0 0 16px;padding:0}
.njd-auth label{display:block;margin:0 0 7px;font-size:12.5px;font-weight:700;
 letter-spacing:.02em;color:var(--ink)}
.njd-auth label .required,.njd-telrow label .required{color:var(--or);text-decoration:none;
 margin-inline-start:2px}
.njd-auth input[type=text],.njd-auth input[type=email],.njd-auth input[type=password],
.njd-tel input[type=tel]{width:100%;padding:12px 14px;border:1px solid var(--line);
 border-radius:10px;font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
 outline:0;transition:border-color .18s,box-shadow .18s}
/* the theme fills form controls grey; the card wants them white so the field
   edges read as one system with the phone control next to them */
.njd-card .form-row input,.njd-tel input[type=tel]{background:#fff!important}
.njd-auth input:focus,.njd-tel input:focus{border-color:var(--or);
 box-shadow:0 0 0 3px rgba(255,90,31,.13)}
.njd-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}

.njd-lrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
 margin:2px 0 18px;font-size:13px}
.njd-lrow a{color:var(--or);font-weight:700;text-decoration:none}
.njd-check{display:flex!important;align-items:center;gap:8px;margin:0!important;
 font-weight:600!important;font-size:13px!important;color:var(--mut)!important;cursor:pointer}
.njd-check input{accent-color:var(--or);width:15px;height:15px}

.njd-dbtn.wide{width:100%;justify-content:center;padding:13px 18px;border:0;
 font-size:14.5px;font-family:inherit;cursor:pointer}

/* the Google button is deliberately not orange: people scan for the familiar
   white pill with the coloured G, and dressing it in brand colour hides it */
.njd-gbutton{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
 padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;
 color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none;
 transition:border-color .18s,box-shadow .18s}
.njd-gbutton:hover{border-color:#B9BEC4;box-shadow:0 2px 10px rgba(15,17,21,.07)}
.njd-gbutton svg{flex:none}

.njd-or{display:flex;align-items:center;gap:12px;margin:18px 0;
 font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.njd-or::before,.njd-or::after{content:"";flex:1;height:1px;background:var(--line)}

.njd-fine{margin:14px 0 0;font-size:11.5px;line-height:1.65;color:var(--mut)}
.njd-lerr{margin:0 0 18px;padding:13px 16px;border-radius:11px;font-size:13.5px;
 background:#FCE7EC;color:#BE123C;border:1px solid rgba(190,18,60,.18)}

/* ---- the phone control ----
   A native <select> laid transparently over the flag and dial code: no custom
   dropdown to build, and on a phone it opens the OS picker. */
.njd-telrow{margin:0 0 16px}
.njd-tel{display:flex;gap:8px;align-items:stretch}
.njd-tel .cc{position:relative;display:flex;align-items:center;gap:6px;flex:none;
 padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
 cursor:pointer;transition:border-color .18s}
.njd-tel .cc:hover{border-color:#B9BEC4}
.njd-tel .cc::after{content:"";width:0;height:0;margin-inline-start:2px;
 border:4px solid transparent;border-top-color:var(--mut)}
.njd-tel .fg{font-size:17px;line-height:1}
/* +962 is a Latin string: without isolation the bidi algorithm moves the plus
   to the far end when the page reads right to left, giving "962+" */
.njd-tel .dl{font-style:normal;font-size:14px;font-weight:700;direction:ltr;
 unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
.njd-tel input[type=tel]{direction:ltr}
.njd-tel .cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;
 border:0;cursor:pointer;font-size:16px}
.njd-tel input[type=tel]{flex:1;min-width:0}
.njd-telrow .description{display:block;margin-top:7px;font-size:11.5px;line-height:1.6;
 color:var(--mut)}

@media (max-width:820px){
 .njd-auth{grid-template-columns:1fr}
}
@media (max-width:600px){
 .njd-card{padding:24px 20px 22px}
 .njd-two{grid-template-columns:1fr}
}

/* ============ Woo notices ============
   Blocksy paints its notices white on a coloured banner. Ours are a light card,
   so the inherited white text was invisible - the error above the sign-in form
   read as an empty box. Colour is forced here, on the children too, because the
   theme sets it on the inner elements as well. */
.nv .woocommerce-info,.nv .woocommerce-message,.nv .woocommerce-error,
.njd-auth .woocommerce-info,.njd-auth .woocommerce-message,.njd-auth .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error{
 --ink:#0F1115;--or:#FF5A1F;--line:#EAEAEC;--bg:#F7F7F8;
 color:var(--ink)!important;background:var(--bg)!important;
 border:1px solid var(--line)!important;border-top:2px solid var(--or)!important;
 border-radius:11px!important;padding:15px 18px!important;margin:0 0 18px!important;
 list-style:none!important;font-size:14px;line-height:1.6;
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 gap:12px;flex-wrap:wrap;text-align:start!important}
.nv .woocommerce-info *,.nv .woocommerce-message *,.nv .woocommerce-error *,
.njd-auth .woocommerce-info *,.njd-auth .woocommerce-message *,.njd-auth .woocommerce-error *,
.woocommerce-notices-wrapper .woocommerce-info *,
.woocommerce-notices-wrapper .woocommerce-message *,
.woocommerce-notices-wrapper .woocommerce-error *{color:inherit!important}
.nv .woocommerce-info a,.nv .woocommerce-message a,.nv .woocommerce-error a,
.njd-auth .woocommerce-info a,.njd-auth .woocommerce-message a,.njd-auth .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-info a{color:var(--or)!important;font-weight:700}
.nv .woocommerce-error li,.njd-auth .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-error li{margin:0}

/* ============ Wishlist ============
   The list itself is held in the visitor's browser, so the page renders every
   product and the script hides the ones that were not saved. Everything below
   is the chrome around that grid; the cards are the shop's own. */
.njd-wl .njd-wlbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
 flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.njd-wl .njd-wlbar .ct{font-size:13.5px;font-weight:700;color:var(--mut)}
.njd-wlclear{background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;
 padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--ink);font-family:inherit;transition:.15s}
.njd-wlclear:hover{border-color:var(--or);color:var(--or)}
.njd-wlempty{text-align:center;padding:56px 20px;border:1px dashed var(--line);border-radius:14px}
.njd-wlempty em{font-style:normal;font-size:38px;line-height:1;color:var(--or)}
.njd-wlempty b{display:block;margin-top:14px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.njd-wlempty p{max-width:460px;margin:9px auto 20px;font-size:13.5px;color:var(--mut);line-height:1.7}

/* ============ Notice buttons ============
   The two rules in the Woo notices block above sweep every child of a notice -
   including the notice's own action, which WooCommerce renders as
   <a class="button"> on a filled background. Forcing that link to the brand
   orange painted the label onto its own fill and the button read as an empty
   orange slab. Buttons are dressed here instead of inheriting. */
:is(.nv,.nv-acct,.njd-auth,.woocommerce-notices-wrapper)
 :is(.woocommerce-info,.woocommerce-message,.woocommerce-error)
 :is(a.button,button.button,.wp-element-button,button[type=submit]){
 color:#fff!important;background:#FF5A1F!important;border:0!important;
 border-radius:9px!important;padding:9px 18px!important;
 font-size:13.5px!important;font-weight:700!important;line-height:1.45!important;
 text-decoration:none!important;box-shadow:none!important;
 margin-inline-start:auto!important;flex:none!important;transition:.16s}
:is(.nv,.nv-acct,.njd-auth,.woocommerce-notices-wrapper)
 :is(.woocommerce-info,.woocommerce-message,.woocommerce-error)
 :is(a.button,button.button,.wp-element-button,button[type=submit]):is(:hover,:focus-visible){
 background:#E24A12!important;color:#fff!important}
/* the label inside a button is a child too, so the inherit rule reaches it */
:is(.nv,.nv-acct,.njd-auth,.woocommerce-notices-wrapper)
 :is(.woocommerce-info,.woocommerce-message,.woocommerce-error)
 :is(a.button,button.button,.wp-element-button,button[type=submit]) *{color:#fff!important}

/* ============ Thank you (order received) ============
   Stock Woo opens with one sentence and a five-line definition list, which for
   a store selling files buries the download the buyer came for. The mark is
   drawn rather than loaded: a Lottie needs a player script and a JSON pulled
   from a third party on every order, and this draws the same burst in CSS. */
.njd-ty{--or:#FF5A1F;--ink:#0F1115;--mut:#6E7379;--line:#EAEAEC;--bg:#F7F7F8;--ok:#1E9E4A;
 max-width:760px;margin:0 auto;padding:8px 0 12px;
 font-size:14.5px;color:var(--ink);text-align:start}
.njd-ty *{box-sizing:border-box}

.njd-tyhero{text-align:center;padding:14px 0 30px}
.njd-tyhero h1{margin:0 0 10px;font-size:30px;line-height:1.3;font-weight:800;color:var(--ink)}
.njd-tysub{margin:0 auto;max-width:520px;color:var(--mut);font-size:15px;line-height:1.75}

/* --- the mark --- */
.njd-tymark{position:relative;width:122px;height:122px;margin:0 auto 14px;
 display:grid;place-items:center;color:var(--ok)}
.njd-tymark--wait{color:var(--or)}
.njd-tymark--bad{color:#D93B12}
.njd-tyring{position:absolute;width:104px;height:104px;border-radius:50%;
 background:color-mix(in srgb,currentColor 12%,#fff);
 transform:scale(.3);opacity:0;
 animation:njd-typop .5s cubic-bezier(.2,.85,.3,1.45) .04s forwards}
.njd-tymark em{position:relative;display:grid;place-items:center;
 opacity:0;transform:scale(.5);animation:njd-typop .45s cubic-bezier(.2,.85,.3,1.45) .2s forwards}
.njd-tysvg{position:relative;width:78px;height:78px;overflow:visible}
.njd-tysvg circle{stroke-dasharray:145;stroke-dashoffset:145;
 transform:rotate(-92deg);transform-origin:50% 50%;
 animation:njd-tydraw .62s cubic-bezier(.5,.1,.2,1) .1s forwards}
.njd-tysvg path{stroke-dasharray:48;stroke-dashoffset:48;
 animation:njd-tydraw .38s cubic-bezier(.4,.1,.3,1) .58s forwards}
@keyframes njd-tydraw{to{stroke-dashoffset:0}}
@keyframes njd-typop{to{opacity:1;transform:scale(1)}}

/* --- the confetti --- */
.njd-tyc{position:absolute;inset:0;pointer-events:none}
.njd-tyc i{position:absolute;top:50%;left:50%;width:7px;height:11px;
 margin:-5px 0 0 -3px;border-radius:2px;background:var(--c);opacity:0;
 animation:njd-tyfly 1.05s cubic-bezier(.12,.72,.3,1) var(--d) forwards}
.njd-tyc i.rd{width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px}
@keyframes njd-tyfly{
 0%  {opacity:0;transform:rotate(var(--a)) translateY(-6px) rotate(0) scale(.3)}
 14% {opacity:1}
 70% {opacity:1}
 100%{opacity:0;transform:rotate(var(--a)) translateY(calc(0px - var(--r))) rotate(520deg) scale(1)}
}

/* --- shared section chrome --- */
.njd-tysec{background:#fff;border:1px solid var(--line);border-radius:18px;
 padding:22px 24px;margin:0 0 18px}
.njd-tysh{display:flex;align-items:center;justify-content:space-between;gap:14px;
 flex-wrap:wrap;margin:0 0 16px}
.njd-tysh h2{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.njd-tysh a{color:var(--or);font-weight:700;font-size:13.5px;text-decoration:none}
.njd-tysh a:hover{text-decoration:underline}
.njd-tyno{font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.02em;
 background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
 direction:ltr;unicode-bidi:isolate}

/* --- the files --- */
.njd-tyfiles{border-color:#D8EEDF;background:linear-gradient(180deg,#F5FBF7,#fff 120px)}
.njd-tyfile{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;
 align-items:center;padding:14px;background:#fff;border:1px solid var(--line);
 border-radius:14px;margin:0 0 10px}
.njd-tyfile:last-child{margin:0}
.njd-tyfile .cv{width:64px;height:64px;border-radius:11px;overflow:hidden;background:var(--bg);
 display:grid;place-items:center;color:var(--mut)}
.njd-tyfile .cv img{width:100%;height:100%;object-fit:cover;display:block}
.njd-tyfile .bd{min-width:0}
.njd-tyfile h3{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
.njd-tyfile .mt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
 margin:0;font-size:12.5px;color:var(--mut)}
.njd-tyfile .tag{background:var(--bg);border:1px solid var(--line);border-radius:6px;
 padding:2px 7px;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--ink)}
.njd-tydl{display:inline-flex;align-items:center;gap:7px;flex:none;
 background:var(--ok);color:#fff;border-radius:10px;padding:11px 18px;
 font-size:13.5px;font-weight:800;text-decoration:none;transition:.16s}
.njd-tydl:hover{background:#188A3F;color:#fff}
.njd-tyfile .fl{grid-column:1/-1;list-style:none;margin:4px 0 0;padding:12px 0 0;
 border-top:1px dashed var(--line)}
.njd-tyfile .fl li{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px}
.njd-tyfile .fl em{color:var(--mut);display:flex}
.njd-tyfile .fl b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.njd-tyfile .fl i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--mut);
 border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.njd-tyfile .fl a{margin-inline-start:auto;color:var(--or);font-weight:700;text-decoration:none}
.njd-tyfile .fl a:hover{text-decoration:underline}

/* --- the receipt --- */
.njd-tymeta{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:10px;list-style:none;margin:0 0 18px!important;padding:0!important;border:0!important}
.njd-tymeta li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
 gap:0 10px;align-items:center;background:var(--bg);border:1px solid var(--line);
 border-radius:12px;padding:12px 14px;margin:0!important;border-inline-end:1px solid var(--line)!important;
 float:none!important;width:auto!important}
.njd-tymeta li em{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;
 border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--or)}
.njd-tymeta li i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--mut)}
.njd-tymeta li b{font-size:13.5px;font-weight:800;color:var(--ink);
 min-width:0;overflow-wrap:anywhere;line-height:1.35}
/* an address is long and rarely read character by character - it gets the
   smaller size so the four cards keep one height */
.njd-tymeta li.sm b{font-size:12px;font-weight:700;direction:ltr;unicode-bidi:isolate;
 text-align:start}

.njd-tytable{width:100%;border-collapse:collapse;font-size:14px}
.njd-tytable td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.njd-tytable .am{text-align:end;white-space:nowrap;font-weight:700;
 direction:ltr;unicode-bidi:isolate}
.njd-tytable .q{color:var(--mut);font-size:12.5px;margin-inline-start:6px}
.njd-tytable tfoot td{color:var(--mut);font-weight:600;border-bottom:0;padding:8px 0}
.njd-tytable tfoot .gt td{color:var(--ink);font-size:16px;font-weight:800;
 border-top:1px solid var(--line);padding-top:12px}
.njd-tytable tfoot .gt td.am{color:var(--or)}

.njd-tyacts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.njd-tyhero .njd-tyacts{justify-content:center}
.njd-tybtn{display:inline-flex;align-items:center;gap:8px;
 background:var(--or);color:#fff;border-radius:10px;padding:11px 20px;
 font-size:13.5px;font-weight:800;text-decoration:none;transition:.16s}
.njd-tybtn:hover{background:#E24A12;color:#fff}
.njd-tybtn.gh{background:#fff;color:var(--ink);border:1px solid var(--line)}
.njd-tybtn.gh:hover{background:var(--bg);border-color:#D6D6DA;color:var(--ink)}
.njd-tymail{display:flex;align-items:center;gap:8px;margin:16px 0 0;
 font-size:13px;color:var(--mut)}
.njd-tymail b{color:var(--ink);direction:ltr;unicode-bidi:isolate}

.njd-ty--plain .njd-tycard{background:#fff;border:1px solid var(--line);border-radius:18px;
 padding:34px 26px;text-align:center}
.njd-ty--plain h2{margin:0 0 10px;font-size:22px;font-weight:800}
.njd-ty--plain p{color:#6E7379}

/* Woo prints its own order table after the hooks on some setups; ours is above */
.njd-ty .woocommerce-order-details,
.njd-ty .woocommerce-customer-details{display:none}

@media (max-width:600px){
 .njd-ty{font-size:14px}
 .njd-tyhero h1{font-size:24px}
 .njd-tymark{width:126px;height:126px}
 .njd-tysec{padding:18px 16px;border-radius:15px}
 .njd-tyfile{grid-template-columns:52px minmax(0,1fr);gap:12px}
 .njd-tyfile .cv{width:52px;height:52px}
 .njd-tydl{grid-column:1/-1;justify-content:center}
 .njd-tyacts .njd-tybtn{flex:1 1 auto;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
 .njd-tyc{display:none}
 .njd-tyring,.njd-tymark em{animation:none;opacity:1;transform:none}
 .njd-tysvg circle,.njd-tysvg path{animation:none;stroke-dashoffset:0}
}

/* ============ Cart ============
   The cart and checkout pages are not in najdeah_designed_pages(), so they keep
   Blocksy's container and never get the .nv wrapper - the tokens are declared
   again on each root here rather than inherited. */
.njd-bag,.njd-co,.njd-cempty{
 --or:#FF5A1F;--ink:#0F1115;--mut:#6E7379;--line:#EAEAEC;--bg:#F7F7F8;--ok:#1E9E4A;
 color:var(--ink);font-size:14.5px;text-align:start}

.njd-bag{max-width:1080px;margin:0 auto;padding:4px 0 8px}
.njd-chd{margin:0 0 20px}
.njd-chd h1{margin:0 0 5px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
.njd-chd p{margin:0;font-size:13.5px;color:var(--mut)}

.njd-cgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.njd-citems{display:flex;flex-direction:column;gap:12px;min-width:0}

.njd-cit{display:grid;grid-template-columns:78px minmax(0,1fr) auto auto;gap:16px;align-items:center;
 background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.njd-cit .cv{width:78px;height:78px;border-radius:10px;overflow:hidden;background:var(--bg);
 display:grid;place-items:center;color:var(--mut)}
.njd-cit .cv img{width:100%;height:100%;object-fit:cover;display:block}
.njd-cit .bd{min-width:0}
.njd-cit .tag{display:inline-block;margin:0 0 6px;margin-inline-end:5px;padding:2px 8px;
 border-radius:999px;background:var(--bg);border:1px solid var(--line);
 font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--mut)}
.njd-cit h3{margin:0 0 5px;font-size:15px;font-weight:700;line-height:1.45}
.njd-cit h3 a{color:var(--ink);text-decoration:none}
.njd-cit h3 a:hover{color:var(--or)}
.njd-cit .mt{margin:0;font-size:12.5px;color:var(--mut)}
.njd-cit .mt span{opacity:.8}
.njd-cit .ln{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.njd-cit .ln b{font-size:15.5px;font-weight:800}
.njd-cit .rm{font-size:12px;color:var(--mut);text-decoration:none;border-bottom:1px solid transparent}
.njd-cit .rm:hover{color:#D93B12;border-bottom-color:currentColor}

/* Woo's stepper is a bare number input; this is the same control at card scale */
.njd-cit .quantity{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;
 overflow:hidden;background:#fff}
.njd-cit .quantity input.qty{width:52px;height:38px;border:0;text-align:center;
 font-size:14px;font-weight:700;color:var(--ink);background:transparent;
 -moz-appearance:textfield;padding:0}
.njd-cit .quantity input.qty::-webkit-outer-spin-button,
.njd-cit .quantity input.qty::-webkit-inner-spin-button{opacity:1;height:38px}
.njd-cit .quantity label{display:none}

.njd-cact{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
 background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.njd-cact .coupon{display:flex;gap:8px;flex:1 1 260px;min-width:0}
.njd-cact input.input-text{flex:1 1 auto;min-width:0;height:40px;padding:0 12px;
 border:1px solid var(--line);border-radius:9px;background:#fff;
 font-size:13.5px;color:var(--ink)}
.njd-cact input.input-text:focus{outline:0;border-color:var(--or);
 box-shadow:0 0 0 3px rgba(255,90,31,.13)}
.njd-cgh{height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--line);
 background:#fff;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:.16s}
.njd-cgh:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.njd-cgh.upd{margin-inline-start:auto}
.njd-cgh[disabled]{opacity:.45;cursor:default}
.njd-cgh[disabled]:hover{background:#fff;color:var(--ink);border-color:var(--line)}

.njd-csum{position:sticky;top:96px}
.njd-csum .bx{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px}
.njd-csum h2{margin:0 0 12px;font-size:16px;font-weight:800}
.njd-csum .rows{list-style:none;margin:0;padding:0 0 12px;border-bottom:1px solid var(--line)}
.njd-csum .rows li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
 padding:6px 0;font-size:13.5px;color:var(--mut)}
.njd-csum .rows li b{color:var(--ink);font-weight:700}
.njd-csum .rows li.dc,.njd-csum .rows li.dc b{color:var(--ok)}
.njd-csum .rows li.gt{padding-top:11px;margin-top:5px;border-top:1px solid var(--line);
 font-size:15px;color:var(--ink);font-weight:700}
.njd-csum .rows li.gt b{font-size:19px;font-weight:800}
.njd-csum .go{margin:14px 0 0}
.njd-csum .pts{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.njd-csum .pts li,.njd-copts li{display:flex;gap:9px;align-items:center;
 padding:4px 0;font-size:12.5px;color:var(--mut)}
.njd-csum .pts em,.njd-copts em{display:grid;place-items:center;color:var(--or);flex:none}
.njd-csum .cont{display:block;margin:12px 0 0;text-align:center;font-size:13px;
 color:var(--mut);text-decoration:none}
.njd-csum .cont:hover{color:var(--or)}

/* the proceed button comes from a Woo hook, so it is dressed rather than built */
.njd-csum .go .checkout-button,.njd-csum .go .button{display:block;width:100%;
 padding:14px 18px!important;border-radius:11px!important;border:0!important;
 background:var(--or)!important;color:#fff!important;text-align:center;
 font-size:15px!important;font-weight:800!important;text-decoration:none!important;
 box-shadow:0 8px 20px -12px rgba(255,90,31,.85);transition:.16s}
.njd-csum .go .checkout-button:hover,.njd-csum .go .button:hover{background:#E24A12!important}

.njd-cxs:empty{display:none}
.njd-cxs{margin:26px 0 0}
.njd-cxs .cross-sells>h2{margin:0 0 14px;font-size:18px;font-weight:800;color:var(--ink)}
.njd-cxs ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
 gap:16px;margin:0;padding:0;list-style:none;float:none!important}
.njd-cxs ul.products li{width:auto!important;margin:0!important;float:none!important}

.njd-cempty{max-width:520px;margin:26px auto;padding:34px 26px;text-align:center;
 background:#fff;border:1px solid var(--line);border-radius:18px}
.njd-cempty em{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;
 border-radius:50%;background:var(--bg);color:var(--or)}
.njd-cempty b{display:block;margin:0 0 8px;font-size:18px;font-weight:800}
.njd-cempty p{margin:0 0 18px;font-size:13.5px;color:var(--mut);line-height:1.75}
.njd-cempty .alt{display:block;margin:12px 0 0;font-size:13px;color:var(--mut);text-decoration:none}
.njd-cempty .alt:hover{color:var(--or)}

/* ============ Checkout ============
   Two columns: details on the reading side, the order and the payment on the
   other, so the whole purchase fits one screen and the place-order button sits
   under the total it charges. Below 900px they stack in working order. */
.njd-co{max-width:1140px;margin:0 auto;padding:4px 0 8px;
 display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
/* the coupon box cannot live inside the checkout <form> - a nested form is
   dropped by the parser - so the form dissolves into the page grid instead and
   the coupon sits in the order column under the total, where it belongs */
.njd-cogrid{display:contents!important}
.njd-cohd{grid-column:1/-1}
.njd-comain{grid-column:1}
.njd-coside{grid-column:2}

.njd-comain,.njd-coside{min-width:0}
.njd-coside{position:sticky;top:20px}
.njd-coorder{padding-bottom:6px}
.njd-coorder .njd-copay{margin:18px 0 0;padding:18px 0 16px;border-top:1px solid var(--line)}
.njd-coorder .njd-copay>h3{display:flex;align-items:center;gap:10px;margin:0;
 font-size:15.5px;font-weight:800;color:var(--ink)}
.njd-coorder .njd-copay>h3 i{display:grid;place-items:center;width:24px;height:24px;
 border-radius:50%;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;
 font-style:normal;flex:none}
.njd-cohd{margin:0 0 18px}
.njd-cohd h1{margin:0 0 12px;font-size:26px;font-weight:800;line-height:1.3}
.njd-costeps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.njd-costeps li{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
 border:1px solid var(--line);background:#fff;font-size:12.5px;color:var(--mut)}
.njd-costeps li b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
 background:var(--bg);color:var(--mut);font-size:11.5px;font-weight:800}
.njd-costeps li.dn{border-color:#D8EEDF;background:#F5FBF7;color:var(--ok)}
.njd-costeps li.dn b{background:var(--ok);color:#fff}
.njd-costeps li.on{border-color:var(--or);background:#FFF3ED;color:var(--or);font-weight:700}
.njd-costeps li.on b{background:var(--or);color:#fff}

.njd-cocard{background:#fff;border:1px solid var(--line);border-radius:18px;
 padding:22px 24px;margin:0 0 16px}
.njd-cocard>h2{display:flex;align-items:center;gap:10px;margin:0 0 4px;
 font-size:17px;font-weight:800;color:var(--ink)}
.njd-cocard>h2 i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
 background:var(--ink);color:#fff;font-size:13px;font-weight:800;font-style:normal;flex:none}
.njd-cocard>.sb{margin:0 0 16px;font-size:13px;color:var(--mut)}
.njd-cocard h3{margin:0 0 12px;font-size:14.5px;font-weight:700}
.njd-cocard .col-2:empty{display:none}

/* Woo's own field markup, at our scale */
.njd-co .form-row{display:block;margin:0 0 14px;padding:0}
.njd-co .form-row label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--ink)}
.njd-co .form-row .required,.njd-co .form-row .optional{color:var(--or);text-decoration:none;border:0}
.njd-co .input-text,.njd-co select,.njd-co textarea,
.njd-co .select2-container .select2-selection--single{
 width:100%;min-height:46px;height:auto;padding:12px 14px;box-sizing:border-box;
 border:1px solid var(--line);border-radius:11px;background:#fff;
 font-size:14px;color:var(--ink);line-height:1.4}
.njd-co textarea{min-height:90px;resize:vertical}
.njd-co .input-text:focus,.njd-co select:focus,.njd-co textarea:focus{outline:0;
 border-color:var(--or);box-shadow:0 0 0 3px rgba(255,90,31,.13)}
.njd-co .select2-container .select2-selection--single{display:flex;align-items:center}
.njd-co .select2-container--default .select2-selection--single .select2-selection__rendered{
 padding:0;color:var(--ink);line-height:1.4}
.njd-co .select2-container--default .select2-selection--single .select2-selection__arrow{
 height:44px;inset-inline-end:8px;inset-inline-start:auto;left:auto;right:8px}
.njd-co .form-row.woocommerce-invalid .input-text{border-color:#D93B12}
.njd-co .description,.njd-co .njd-tel-note{margin:6px 0 0;font-size:11.5px;color:var(--mut)}
.njd-co .form-row-first,.njd-co .form-row-last{width:100%;float:none}
.njd-co .woocommerce-privacy-policy-text p{margin:14px 0 0;font-size:11.5px;
 color:var(--mut);line-height:1.7}
.njd-co .woocommerce-privacy-policy-text a{color:var(--or)}
.njd-co .create-account,.njd-co .woocommerce-account-fields{margin:6px 0 0}
.njd-co .woocommerce-form__label-for-checkbox{display:flex!important;align-items:center;gap:9px;
 font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.njd-co .woocommerce-form__label-for-checkbox input{width:17px;height:17px;accent-color:var(--or);margin:0}
.njd-co .woocommerce-form__label-for-checkbox span{font-weight:600}

/* coupon: Woo ships it as a hidden form behind a notice link */

/* order review - the node checkout.js swaps on every refresh */
.njd-corev{width:100%;border-collapse:collapse;margin:0}
.njd-corev td,.njd-corev th{border:0;padding:12px 0;vertical-align:middle}
.njd-corev tbody tr+tr td{border-top:1px solid var(--line)}
.njd-corev .product-name:has(>.cv){display:flex;gap:12px;align-items:center}
.njd-corev .product-name .cv{width:52px;height:52px;flex:none;border-radius:9px;overflow:hidden;
 background:var(--bg);display:grid;place-items:center;color:var(--mut)}
.njd-corev .product-name .cv img{width:100%;height:100%;object-fit:cover;display:block}
.njd-corev .product-name .tx b{display:block;font-size:14px;font-weight:700;line-height:1.45}
.njd-corev .product-name .tx i{display:block;margin:3px 0 0;font-size:11.5px;
 font-style:normal;color:var(--mut);letter-spacing:.02em}
.njd-corev .product-total{text-align:end;font-size:14px;font-weight:700;white-space:nowrap}
.njd-corev tfoot{border-top:1px solid var(--line)}
.njd-corev tfoot tr:first-child th,.njd-corev tfoot tr:first-child td{padding-top:14px}
.njd-corev tfoot th{text-align:start;font-size:13.5px;font-weight:600;color:var(--mut)}
.njd-corev tfoot td{text-align:end;font-size:14px;font-weight:700}
.njd-corev tfoot .cart-discount th,.njd-corev tfoot .cart-discount td{color:var(--ok)}
.njd-corev tfoot .order-total th{color:var(--ink);font-size:15px;font-weight:700}
.njd-corev tfoot .order-total td{font-size:20px;font-weight:800}
.njd-corev tfoot .order-total th,.njd-corev tfoot .order-total td{
 padding-top:13px;border-top:1px solid var(--line)}
.njd-copts{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.njd-comain>.njd-copts{margin:0;padding:2px 4px 0;border-top:0}

/* payment */
.njd-copay .woocommerce-checkout-payment{background:transparent!important;border-radius:0!important}
.njd-copay ul.payment_methods{list-style:none;margin:16px 0 0!important;padding:0!important;
 border:0!important;display:flex;flex-direction:column;gap:10px}
.njd-copay ul.payment_methods li{margin:0;padding:0;background:transparent;
 border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:.16s}
.njd-copay ul.payment_methods li:has(input:checked){border-color:var(--or);background:#FFF9F6}
.njd-copay ul.payment_methods li>label{display:flex!important;align-items:center;gap:10px;
 margin:0!important;padding:14px 16px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.njd-copay ul.payment_methods li>input[type=radio]{width:18px;height:18px;margin:0 16px;
 accent-color:var(--or);flex:none;float:none}
.njd-copay ul.payment_methods li>label img{max-height:26px;width:auto;margin:0;
 margin-inline-start:auto;display:inline-block}
.njd-copay ul.payment_methods li>label>a.about_paypal{display:none}
.njd-copay .payment_box{position:relative;margin:0!important;padding:0 16px 15px!important;
 background:transparent!important;border-radius:0!important;
 font-size:12.5px;color:var(--mut);line-height:1.7}
.njd-copay .payment_box::before{display:none!important}
.njd-copay .payment_box p:last-child{margin-bottom:0}
.njd-copay .woocommerce-terms-and-conditions-wrapper{margin:16px 0 0;font-size:12px;color:var(--mut)}
.njd-copay .place-order{margin:16px 0 0;padding:0;float:none}
.njd-copay #place_order{display:block;width:100%;padding:15px 20px;border:0;border-radius:12px;
 background:var(--or);color:#fff;font-size:16px;font-weight:800;cursor:pointer;
 box-shadow:0 10px 24px -14px rgba(255,90,31,.9);transition:.16s}
.njd-copay #place_order:hover{background:#E24A12}
.njd-copay #place_order[disabled]{opacity:.55;cursor:default}

/* the sign-in panel above the form */
.njd-coauth{background:#fff;border:1px solid var(--line);border-radius:16px;
 padding:16px 18px;margin:0 0 16px}
.njd-coauth.open{border-color:var(--or)}
.njd-coauth .hd{display:flex;align-items:center;gap:12px}
.njd-coauth .hd em{display:grid;place-items:center;width:40px;height:40px;flex:none;
 border-radius:50%;background:#FFF3ED;color:var(--or)}
.njd-coauth .hd b{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.njd-coauth .hd i{display:block;margin:2px 0 0;font-size:12.5px;font-style:normal;color:var(--mut)}
.njd-coauth .tg{margin-inline-start:auto;flex:none;padding:9px 16px;border-radius:9px;
 border:1px solid var(--line);background:#fff;color:var(--ink);
 font-size:13px;font-weight:700;cursor:pointer;transition:.16s}
.njd-coauth .tg:hover{border-color:var(--or);background:#FFF3ED;color:var(--or)}
.njd-coauth .bd{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.njd-coauth .bd[hidden]{display:none}
.njd-coauth .njd-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.njd-coauth .gs{margin:14px 0 0;font-size:12px;color:var(--mut)}
.njd-coauth .njd-dbtn.wide{width:100%;justify-content:center;margin-top:4px}

@media(max-width:900px){
 .njd-cgrid{grid-template-columns:1fr}
 .njd-csum{position:static}
 .njd-coside{position:static}
}
@media(max-width:620px){
 .njd-chd h1,.njd-cohd h1{font-size:22px}
 .njd-cit{grid-template-columns:60px minmax(0,1fr);gap:12px}
 .njd-cit .cv{width:60px;height:60px}
 .njd-cit .qt{grid-column:1/-1}
 .njd-cit .ln{grid-column:1/-1;flex-direction:row;align-items:center;
  justify-content:space-between;width:100%}
 .njd-cact .njd-cgh.upd{margin-inline-start:0;width:100%}
 .njd-cocard{padding:18px 16px;border-radius:15px}
 .njd-coauth .njd-two{grid-template-columns:1fr}
 .njd-coauth .hd{flex-wrap:wrap}
 .njd-coauth .tg{width:100%;margin-inline-start:0}
 .njd-corev .product-total{font-size:13.5px}
}

/* ============ Cart / checkout - parent theme overrides ============
   Blocksy lays the checkout out as its own two column grid and gives the cart
   page a sidebar. Both are replaced here rather than fought field by field:
   the form is one flow again, and our own grid does the columns. */
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout.woocommerce-checkout{
 display:contents!important;max-width:none!important;margin:0!important}
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set{display:block!important;width:auto!important;float:none!important}
.woocommerce-checkout #order_review{width:auto!important;float:none!important;
 padding:0!important;border:0!important;background:transparent!important}
.njd-co .col-1,.njd-co .col-2{width:auto!important;float:none!important;padding:0!important}
.woocommerce-cart .njd-bag,.woocommerce-checkout .njd-co{width:100%}
/* Blocksy's own order-review modules block, when it still slips through */
.njd-co .ct-order-review-modules:empty,.njd-csum .ct-cart-totals-modules:empty{display:none}

/* the ghost footer row Blocksy keeps for a footer this store does not use */
.njd-woo-page .ct-footer [data-row="middle"]{display:none}

/* the coupon toggle: Woo prints it as a notice with the link inside */

/* Blocksy rewrites each review row into .ct-checkout-cart-item and puts a live
   quantity stepper in it - worth keeping, so it is dressed rather than removed */
.njd-co .ct-order-review{background:transparent!important;border:0!important;
 padding:0!important;margin:0!important;box-shadow:none!important;border-radius:0!important}
.njd-corev .ct-checkout-cart-item{display:flex;gap:12px;align-items:center}
.njd-corev .ct-media-container{width:52px;height:52px;flex:none;margin:0;border-radius:9px;
 overflow:hidden;background:var(--bg)}
.njd-corev .ct-media-container img{width:100%;height:100%;object-fit:cover;display:block}
.njd-corev .ct-checkout-cart-item-content{min-width:0;display:flex;flex-direction:column;gap:7px;
 align-items:flex-start}
.njd-corev .ct-checkout-cart-item-title{font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)}

/* one stepper, used by the cart cards and by the checkout review rows */
.njd-corev .quantity,.njd-cit .quantity{position:relative;display:inline-flex;align-items:center;
 border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}
.njd-corev .quantity input.qty,.njd-cit .quantity input.qty{
 width:44px;height:34px;border:0;padding:0;text-align:center;background:transparent;
 font-size:13.5px;font-weight:700;color:var(--ink);-moz-appearance:textfield}
.njd-corev .quantity input.qty::-webkit-outer-spin-button,
.njd-corev .quantity input.qty::-webkit-inner-spin-button,
.njd-cit .quantity input.qty::-webkit-outer-spin-button,
.njd-cit .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.njd-corev .ct-increase,.njd-corev .ct-decrease,
.njd-cit .ct-increase,.njd-cit .ct-decrease{position:static!important;width:32px;height:34px;
 display:grid;place-items:center;cursor:pointer;color:var(--mut);order:1;
 background:var(--bg);transition:.14s}
.njd-corev .ct-decrease,.njd-cit .ct-decrease{order:-1}
.njd-corev .ct-increase:hover,.njd-corev .ct-decrease:hover,
.njd-cit .ct-increase:hover,.njd-cit .ct-decrease:hover{background:#FFF3ED;color:var(--or)}
.njd-corev .ct-increase::before,.njd-cit .ct-increase::before{content:"+";font-size:16px;font-weight:700}
.njd-corev .ct-decrease::before,.njd-cit .ct-decrease::before{content:"−";font-size:16px;font-weight:700}
.njd-corev .quantity label,.njd-cit .quantity label{display:none}

/* the sign-in panel prints above .njd-co, so it is centred on the same column */
.njd-coauth{max-width:780px;margin-inline:auto}
.woocommerce-checkout .njd-lerr{max-width:780px;margin:0 auto 14px}

.njd-coauth{background:linear-gradient(180deg,#FBFBFC,#fff 60px)}

/* ============ Checkout - account dialog and card marks ============
   Signing in must not move the checkout: the panel is one slim strip and the
   forms live in a modal above the page, so the two columns behind it keep
   their place and their scroll position. */
/* the panel prints before .njd-co, so it carries the tokens itself */
.njd-coauth,.njd-authmodal,.njd-lerr{--or:#FF5A1F;--ink:#0F1115;--mut:#6E7379;
 --line:#EAEAEC;--bg:#F7F7F8;--ok:#1E9E4A}
.njd-coauth .ac{display:flex;gap:8px;margin-inline-start:auto;flex:none}
.njd-coauth .tg.gh{background:var(--or);border-color:var(--or);color:#fff}
.njd-coauth .tg.gh:hover{background:#E24A12;border-color:#E24A12;color:#fff}

.njd-authmodal{width:min(480px,calc(100vw - 32px));max-height:88vh;padding:0;border:0;
 border-radius:18px;background:transparent;overflow:visible;color:var(--ink);
 --or:#FF5A1F;--ink:#0F1115;--mut:#6E7379;--line:#EAEAEC;--bg:#F7F7F8}
.njd-authmodal::backdrop{background:rgba(15,17,21,.55);backdrop-filter:blur(2px)}
.njd-authmodal .in{position:relative;max-height:88vh;overflow:auto;
 background:#fff;border-radius:18px;padding:26px 24px 22px;
 box-shadow:0 24px 60px rgba(15,17,21,.22)}
.njd-authmodal .x{position:absolute;inset-inline-end:14px;top:12px;width:32px;height:32px;
 border:0;border-radius:50%;background:var(--bg);color:var(--mut);font-size:20px;
 line-height:1;cursor:pointer}
.njd-authmodal .x:hover{background:#FFF3ED;color:var(--or)}
.njd-authmodal .tabs{display:flex;gap:6px;margin:0 0 18px;padding:4px;
 border-radius:12px;background:var(--bg);width:fit-content}
.njd-authmodal .tabs button{border:0;background:transparent;border-radius:9px;
 padding:8px 16px;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer}
.njd-authmodal .tabs button.on{background:#fff;color:var(--ink);
 box-shadow:0 1px 3px rgba(15,17,21,.1)}
.njd-authmodal .pane[hidden]{display:none}
.njd-authmodal .form-row{display:block;margin:0 0 14px;padding:0}
.njd-authmodal label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:700}
.njd-authmodal .input-text{width:100%;min-height:46px;padding:11px 14px;
 border:1px solid var(--line);border-radius:11px;background:#fff;font-size:14px}
.njd-authmodal .input-text:focus{outline:0;border-color:var(--or);
 box-shadow:0 0 0 3px rgba(255,90,31,.14)}
.njd-authmodal .njd-lrow{display:flex;align-items:center;justify-content:space-between;
 gap:12px;margin:0 0 14px;font-size:12.5px}
.njd-authmodal .njd-lrow a{color:var(--or)}
.njd-authmodal .njd-check{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.njd-authmodal .njd-check input{width:16px;height:16px;accent-color:var(--or);margin:0}
.njd-authmodal .njd-dbtn.wide{width:100%;justify-content:center;
 background:var(--or);border-color:var(--or);color:#fff}
.njd-authmodal .njd-dbtn.wide:hover{background:#E24A12;border-color:#E24A12;color:#fff}
.njd-authmodal .njd-lnote{margin:0 0 14px;font-size:12px;color:var(--mut)}
/* the register pane is the signup page's form, so it carries the same paired
   name row and phone control - the dialog widens to hold them */
.njd-authmodal .njd-two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.njd-authmodal .njd-telrow{margin:0 0 14px}
.njd-authmodal .njd-telrow .description{font-size:11px}
.njd-authnotes{margin:0 0 16px}
.njd-authnotes ul{margin:0;padding:0;list-style:none}
.njd-authnotes li,.njd-authnotes .woocommerce-error li{margin:0 0 8px;padding:11px 14px;
 border:1px solid #F6CFC2;border-radius:11px;background:#FFF4F0;
 font-size:12.5px;line-height:1.6;color:#B4310B}
.njd-authnotes li:last-child{margin-bottom:0}
@media(max-width:420px){
 .njd-authmodal .njd-two{grid-template-columns:1fr}
}

.njd-authmodal .gs{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
 font-size:12px;color:var(--mut);text-align:center}

/* the card marks on the card method's own row */
.njd-pmicons{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;flex:none}
.njd-pmicons svg{display:block;height:25px;width:auto}
.njd-copay ul.payment_methods li>label .njd-pmicons svg{max-height:25px}

/* the stack, last so it beats the parent-theme override above it */
@media(max-width:900px){
 .njd-co{grid-template-columns:minmax(0,1fr);gap:16px}
 /* the columns are placed by hand at desktop width, and a grid-column:2 that
    outlives its column does not fall back to the first one - it makes the grid
    grow an implicit second column, squeezing the fields into a strip a few
    pixels wide and stacking the Arabic labels one letter per line. Every child
    goes back to the single column here. */
 .njd-cohd,.njd-comain,.njd-coside{grid-column:1/-1}

 .njd-coside{position:static}
 .njd-comain>.njd-copts{padding-bottom:2px}
}
@media(max-width:620px){
 .njd-coauth .hd{flex-wrap:wrap}
 .njd-coauth .ac{width:100%;margin-inline-start:0}
 .njd-coauth .ac .tg{flex:1 1 0;text-align:center}
}

/* Suggested files, on the cart and on the checkout. The cart gets a three-up
   grid under the table; the checkout column is 380px, so .sl narrows it to a
   single stack of rows that read like the order lines directly above them. */
.njd-sug{margin:30px 0 0}
.njd-sug .hd{margin:0 0 16px}
.njd-sug .hd h2{margin:0 0 5px;font-size:19px;font-weight:800;color:var(--ink)}
.njd-sug .hd p{margin:0;font-size:14px;line-height:1.7;color:var(--mut)}
.njd-sug .gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}

.njd-sugc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;
 background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.njd-sugc:hover{border-color:var(--or);box-shadow:0 6px 20px rgba(15,17,21,.07)}
.njd-sugc .im{display:flex;align-items:center;justify-content:center;
 aspect-ratio:16/10;background:var(--card);color:var(--mut-2);overflow:hidden}
.njd-sugc .im img{width:100%;height:100%;object-fit:cover}
.njd-sugc .bd{display:flex;flex-direction:column;gap:7px;padding:13px 14px 14px}
.njd-sugc .tag{display:inline-block;margin-inline-end:5px;padding:2px 7px;border-radius:5px;
 background:var(--card);color:var(--mut);font-size:10.5px;font-weight:800;letter-spacing:.03em}
.njd-sugc h3{margin:0;font-size:14.5px;font-weight:700;line-height:1.5}
.njd-sugc h3 a{color:var(--ink)}
.njd-sugc h3 a:hover{color:var(--or)}
.njd-sugc .pr{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:800;color:var(--ink)}
.njd-sugc .pr del{font-size:13px;font-weight:600;color:var(--mut-2)}
.njd-sugc .add{margin-top:auto;display:block;padding:9px 12px;border-radius:9px;
 background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;text-align:center;
 transition:background .15s}
.njd-sugc .add:hover{background:var(--or)}

/* the checkout variant */
.njd-sug.sl{margin:16px 0 0}
.njd-sug.sl .hd h2{font-size:16px}
.njd-sug.sl .hd p{font-size:13px}
.njd-sug.sl .gr{grid-template-columns:1fr;gap:10px}
.njd-sug.sl .njd-sugc{flex-direction:row;align-items:stretch;border-radius:12px}
.njd-sug.sl .njd-sugc .im{flex:0 0 84px;aspect-ratio:auto}
.njd-sug.sl .njd-sugc .bd{flex:1 1 auto;gap:5px;padding:10px 12px}
.njd-sug.sl .njd-sugc h3{font-size:13.5px}
.njd-sug.sl .njd-sugc .pr{font-size:14.5px}
.njd-sug.sl .njd-sugc .add{padding:7px 10px;font-size:12.5px;border-radius:8px}

@media(max-width:520px){
 .njd-sug .gr{grid-template-columns:1fr}
 .njd-sug .njd-sugc{flex-direction:row}
 .njd-sug .njd-sugc .im{flex:0 0 96px;aspect-ratio:auto}
}

/* ============ Checkout - the coupon field ============
   In the order card now, on the row above the subtotal, because a discount
   belongs beside the number it changes. Woo's own box is a <form> and could
   never sit inside the checkout form; this is a plain field on the same AJAX
   endpoints - see najdeah_coupon_row(). */
.njd-corev .njd-cocp td{padding:12px 0 4px}
.njd-cp{position:relative}
.njd-cp.is-busy{opacity:.55;pointer-events:none}

.njd-cp .in{display:flex;gap:8px}
.njd-cp .fld{flex:1 1 auto;min-width:0;height:42px;padding:0 13px;
 border:1px solid var(--line);border-radius:10px;background:#fff;
 font-size:13.5px;font-family:inherit;color:var(--ink);
 transition:border-color .15s,box-shadow .15s}
.njd-cp .fld::placeholder{color:var(--mut-2)}
.njd-cp .fld:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(255,90,31,.14)}
.njd-cp .go{flex:0 0 auto;height:42px;padding:0 17px;border:0;border-radius:10px;
 background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;font-family:inherit;
 cursor:pointer;transition:background .15s}
.njd-cp .go:hover{background:var(--or)}

/* codes already on the order */
.njd-cp .on{list-style:none;margin:0 0 9px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.njd-cp .on li{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 10px;
 border-radius:999px;background:#EAF7EE;color:#177A3C}
.njd-cp .on em{display:grid;place-items:center;color:#177A3C}
.njd-cp .on b{font-size:12px;font-weight:800;letter-spacing:.03em}
.njd-cp .on .rm{border:0;background:none;padding:0;width:16px;height:16px;line-height:1;
 color:#177A3C;font-size:15px;cursor:pointer;opacity:.6;transition:opacity .15s}
.njd-cp .on .rm:hover{opacity:1}

.njd-cp .msg{margin:8px 0 0;font-size:12.5px;line-height:1.5}
.njd-cp .msg.bad{color:#C0341A}
.njd-cp .msg.good{color:#177A3C}

/* the suggestions moved into the wide column, under the customer details */
.njd-comain>.njd-sug{margin:22px 0 0}

/* ============ Cart - tightening the vertical rhythm ============
   Everything on this page competes for the first screen: the shopper has to see
   the line items, the total and the checkout button without scrolling, or the
   button may as well not exist. Nothing here changes the design, it only takes
   back the padding that was pushing the summary below the fold - and the
   reservation timer, which Blocksy ships as a two-line block with a card's worth
   of padding around a single sentence, becomes one line. */
.woocommerce-cart .njd-bag{padding-top:0}
.woocommerce-cart .ct-container-full>.entry-content,
.woocommerce-cart .site-main{padding-top:0}

.njd-chd{margin:0 0 14px}
.njd-chd h1{font-size:24px}

.njd-citems{gap:10px}
.njd-cit{padding:12px 14px;gap:14px}
.njd-cit .cv{width:68px;height:68px}
.njd-cit{grid-template-columns:68px minmax(0,1fr) auto auto}

.njd-cact{padding:10px 12px}

/* Blocksy's reservation timer: one line, no card */
.ct-cart-reserved-timer-cart{margin:0!important;padding:0!important;
 border:0!important;background:none!important}
.ct-cart-reserved-timer-cart .ct-cart-reserved-timer-message{margin:0!important;
 padding:9px 13px!important;border:1px solid var(--line)!important;border-radius:11px!important;
 background:#fff!important}
.ct-cart-reserved-timer-cart p{margin:0!important;font-size:12.5px!important;
 line-height:1.5!important;color:var(--mut)!important}
.ct-cart-reserved-timer-cart p br{display:none}
.ct-cart-reserved-timer-cart p strong{color:var(--ink);font-weight:700}
.ct-cart-reserved-timer-cart p strong::after{content:" · ";color:var(--mut);font-weight:400}
.ct-cart-reserved-timer-cart time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}

.njd-csum .bx{padding:16px 16px 14px}
.njd-csum h2{margin:0 0 10px}
.njd-csum .rows{padding-bottom:10px}
.njd-csum .go{margin:12px 0 0}
.njd-csum .pts{margin:12px 0 0;padding:12px 0 0}
.njd-csum .cont{margin:10px 0 0}

/* the suggestions sit below the fold by design - they should not add to the gap */
.njd-cxs .njd-sug,.njd-bag .njd-sug{margin-top:22px}
/* Woo prints its own "[remove]" link inside the discount row. The applied-coupon
   chip above the subtotal already carries a remove control, and two of them for
   one coupon reads as a bug - so the row keeps the number and loses the link. */
.njd-corev .cart-discount .woocommerce-remove-coupon{display:none}
.njd-corev .cart-discount th{font-weight:600;color:#177A3C}
.njd-corev .cart-discount td{color:#177A3C;white-space:nowrap}

/* ============ Product - the language picker ============
   Woo's own <select> for the language attribute stays in the form, because it is
   what the form posts and what Woo's variation script drives; it is only taken
   off the screen. What the reader sees is two buttons, and a book whose second
   language has not been written yet says so rather than failing on selection. */
.variations_form .njd-pick{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 0}
.variations_form td.value>select[name^="attribute_pa_language"]{position:absolute;
 width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
 clip-path:inset(50%);white-space:nowrap;border:0}
/* "clear" reads as an escape hatch from a choice the reader did not make - the
   picker selects the only available language on load, and unselecting it just
   disables the buy button */
.variations_form .reset_variations{display:none!important}

.njd-pk{display:inline-flex;align-items:center;gap:7px;min-height:44px;
 padding:0 18px;border:1px solid #E8E8EA;border-radius:12px;background:#fff;
 color:#0F1115;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
 transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.njd-pk:hover:not([disabled]){border-color:#0F1115}
.njd-pk.on{border-color:#FF5A1F;background:#FFF3EE;color:#E8430A;
 box-shadow:0 0 0 3px rgba(255,90,31,.13)}
.njd-pk[disabled]{cursor:not-allowed;color:#8A9099;background:#F7F7F8;border-style:dashed}
.njd-pk i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.03em;
 padding:3px 8px;border-radius:999px;background:#EFEFF1;color:#6E7379}

/* the picker is what a card links to, so it must not land under a sticky header */
#njd-pick{scroll-margin-top:110px}

/* the pair, on the picker: an upgrade rather than a third equal choice */
.njd-pk.both{border-style:solid}
.njd-pk i.sv{background:#EAF7EE;color:#177A3C}

/* ============ The "add the other language" offer ============
   Shown on the cart above the summary and inside the checkout order card, on the
   row above the totals - the shopper is looking at the number it changes. The
   link swaps the line for the bundle rather than adding a second one; see
   najdeah_lang_do_upgrade(). */
.njd-up{margin:0 0 14px;padding:14px 16px;border:1px solid #FFD9C9;border-radius:14px;
 background:linear-gradient(180deg,#FFF6F2,#fff)}
.njd-up b{display:block;font-size:14.5px;font-weight:800;color:#0F1115}
.njd-up p{margin:5px 0 11px;font-size:13px;line-height:1.6;color:#6E7379}
.njd-up a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;
 border-radius:10px;background:#0F1115;color:#fff;font-size:13.5px;font-weight:700;
 text-decoration:none;transition:background .15s}
.njd-up a:hover{background:#FF5A1F;color:#fff}
.njd-corev .njd-coup td{padding:4px 0 12px}
.njd-corev .njd-coup .njd-up{margin:0}
/* the order card is a narrow column and "English" was breaking across lines
   mid-word; a latin value in an Arabic paragraph wraps between words only */
.njd-corev .variation,.njd-corev .variation dd,.njd-corev .variation dt{
 overflow-wrap:normal;word-break:normal}
.njd-corev .variation dd p{margin:0}

/* ============ The pair deal (book + Excel model) ============
   Same card as the language upgrade, so a basket holding both offers reads as
   one voice. The applied state is green rather than orange: nothing is being
   asked for any more, it is only being confirmed. */
.njd-up.done{border-color:#CDEBD8;background:linear-gradient(180deg,#F1FAF4,#fff)}
.njd-up.done b{color:#177A3C}
.njd-up.done p{margin-bottom:0}

/* on the product page, under the price - one line, not a card, because the
   reader has not committed to anything yet */
.njd-pairnote{margin:14px 0 0;padding:11px 14px;border:1px dashed #FFD9C9;
 border-radius:12px;background:#FFF9F6;font-size:13.5px;line-height:1.7;color:#6E7379}
.njd-pairnote a{color:#E8430A;font-weight:700;text-decoration:none;white-space:nowrap}
.njd-pairnote a:hover{text-decoration:underline}