/* DEJOIY Joy homepage — scoped to body.djx so nothing leaks into other pages. */
body.djx{margin:0;background:#F3F2EE;color:#121212;font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.djx *,body.djx *::before,body.djx *::after{box-sizing:border-box}
body.djx a{color:#121212}
body.djx img{max-width:100%}
body.djx h1,body.djx h2,body.djx h3,body.djx p{margin:0}
.djx-wrap{max-width:1360px;margin:0 auto;padding:0 32px}
.djx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.djx-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#121212;color:#D4FF3A !important;padding:12px 16px;border-radius:12px}
.djx-skip:focus{left:8px}
.djx :focus-visible{outline:3px solid #121212;outline-offset:3px}
.djx-bg-ink :focus-visible,.djx-footer :focus-visible{outline-color:#D4FF3A}

.djx-disp{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.05em;line-height:.9;text-wrap:balance}
.djx-t-hero{font-size:clamp(46px,6.4vw,92px)}
.djx-t-xl{font-size:clamp(38px,5.6vw,80px)}
.djx-t-l{font-size:clamp(34px,4.6vw,60px)}
.djx-t-m{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.04em}
.djx-t-mega{font-size:clamp(60px,9.5vw,140px);line-height:.82;letter-spacing:-.06em;word-break:break-word}
.djx-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;margin-top:20px !important;max-width:44ch}
.djx-label{font-weight:700;margin:24px 0 12px !important;display:block}
.djx-small{font-size:15px;font-weight:600;margin:22px 0 12px !important}
.djx-lime{color:#D4FF3A !important}
.djx-mt{margin-top:28px}

.djx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border:0;border-radius:999px;font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .18s ease;white-space:nowrap}
.djx-btn:hover{transform:translateY(-2px)}
.djx-btn:active{transform:translateY(1px) scale(.98)}
.djx-btn-lg{height:60px;padding:0 30px;font-size:18px}
.djx-btn-ink,body.djx a.djx-btn-ink{background:#121212;color:#F3F2EE}
.djx-btn-lime,body.djx a.djx-btn-lime{background:#D4FF3A;color:#121212}
.djx-btn-dark{background:#2C2C29;color:#F3F2EE;font-weight:600;font-size:15px;height:46px}
.djx-btn-yellow{background:#FFD43B;color:#121212;height:46px}
.djx-link{font-weight:700;text-underline-offset:6px}
.djx-row{display:flex;gap:12px;align-items:center}
.djx-wrap-row{flex-wrap:wrap}

/* top strip + header */
.djx-strip{background:#121212;color:#F3F2EE;font-size:14px}
.djx-strip-in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.djx-strip nav{display:flex;gap:24px}
body.djx .djx-strip a{color:#F3F2EE;text-decoration:none}
.djx-header{background:#F3F2EE;position:sticky;top:0;z-index:50}
body.admin-bar .djx-header{top:32px}
.djx-hdr{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px}
.djx-word{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.045em;text-decoration:none;white-space:nowrap;line-height:1}
.djx-word span{background:#D4FF3A;padding:0 6px;margin-left:2px;border-radius:8px}
.djx-search{flex:1 1 380px;display:flex;align-items:center;background:#fff;border-radius:999px;padding:6px 6px 6px 20px;gap:10px;min-width:0}
.djx-search input[type=search]{flex:1;min-width:0;height:40px;border:0;outline:none;background:transparent;font:inherit;font-size:16px;color:#121212;padding:0;box-shadow:none}
.djx-search .djx-btn{height:44px;padding:0 20px;font-size:15px}
.djx-icons{display:flex;align-items:center;gap:8px;margin-left:auto}
.djx-round{width:48px;height:48px;display:grid;place-items:center;border-radius:999px;background:#E6E4DD}
.djx-cartbtn{height:48px;padding:0 16px 0 14px;font-weight:700}
.djx-count{background:#D4FF3A;color:#121212;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:13px;padding:0 6px}
.djx-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:14px}
.djx-chips::-webkit-scrollbar{display:none}
body.djx .djx-chips a{flex:0 0 auto;display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;padding:10px 16px;border-radius:999px;background:#E6E4DD;color:#121212}
.djx-chips i{width:10px;height:10px;border-radius:3px;display:block}
body.djx .djx-chips a.djx-chip-deal{background:#FF7A1A;font-weight:700}
body.djx .djx-chips a.djx-chip-joi{background:#121212;color:#D4FF3A;font-weight:700}

/* hero */
.djx-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding-top:20px;padding-bottom:clamp(64px,8vw,96px)}
.djx-hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:16px 0}
.djx-hero-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.djx-spot{border-radius:32px;padding:36px;min-height:400px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;overflow:hidden}
.djx-spot[hidden]{display:none}
.djx-spot-copy{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-width:0}
.djx-tag{align-self:flex-start;font-size:16px;font-weight:600;background:#121212;color:#F3F2EE;padding:8px 14px;border-radius:12px}
.djx-spot-label{font-size:14px;font-weight:600}
.djx-spot-name{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;margin:4px 0 14px !important}
.djx-spot-img{width:clamp(180px,22vw,300px);border-radius:24px;overflow:hidden;background:#F3F2EE;display:block}
.djx-spot-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.djx-spot-img:hover img{transform:scale(1.05)}
.djx-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.djx-tile{height:108px;border:0;border-radius:20px;padding:14px;cursor:pointer;text-align:left;font:inherit;color:#121212;display:flex;flex-direction:column;justify-content:space-between;outline:3px solid transparent;outline-offset:3px;transition:transform .2s ease}
.djx-tile:hover{transform:translateY(-4px) rotate(-1deg)}
.djx-tile[aria-selected=true]{outline-color:#121212}
.djx-tile b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em}
.djx-tile span{font-size:13px;font-weight:600}

/* sections */
.djx-sec{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}
.djx-nobottom{padding-bottom:0}
.djx-gap{padding-bottom:clamp(64px,9vw,120px)}
.djx-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin-bottom:32px;flex-wrap:wrap}
.djx-bg-orange{background:#FF7A1A}
.djx-bg-ink{background:#121212;color:#F3F2EE}
.djx-bg-sky{background:#9FD8FF;overflow:hidden}
.djx-bg-pink{background:#FF9BCB}
.djx-bg-mint{background:#7DEBB5}
.djx-bg-yellow{background:#FFD43B}
.djx-bg-lime{background:#D4FF3A}
.djx-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.djx-split-end{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.djx-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,48px);align-items:center}

.djx-pills{display:flex;flex-wrap:wrap;gap:10px}
body.djx .djx-pills a{background:#fff;text-decoration:none;font-weight:600;font-size:clamp(16px,1.6vw,19px);padding:14px 24px;border-radius:999px;transition:transform .18s ease}
.djx-pills a:hover{transform:translateY(-2px)}

/* product cards */
.djx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:20px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.djx-rail::-webkit-scrollbar{display:none}
.djx-card{background:#F3F2EE;border-radius:28px;padding:12px;display:flex;flex-direction:column;gap:14px;scroll-snap-align:start;transition:transform .2s ease}
.djx-card:hover{transform:translateY(-4px)}
.djx-card-img{display:block;aspect-ratio:1/1;border-radius:20px;overflow:hidden;position:relative;background:#fff}
.djx-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.djx-card:hover .djx-card-img img{transform:scale(1.05)}
.djx-badge{position:absolute;top:12px;left:12px;background:#121212;color:#D4FF3A;font-weight:800;font-size:14px;padding:6px 10px;border-radius:10px}
.djx-card-body{padding:0 6px;display:flex;flex-direction:column;gap:6px;flex:1}
.djx-card-cat{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.djx-card h3{font-size:18px;line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.djx .djx-card h3 a{text-decoration:none}
.djx-price{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums;margin-top:4px !important}
.djx-price span{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800}
.djx-price s{font-size:16px}
.djx-card .djx-btn{height:50px}

/* JOI */
.djx-joibox{background:#1E1E1C;border-radius:32px;padding:clamp(20px,3vw,28px)}
.djx-joiform label{display:block;font-weight:600;margin-bottom:12px}
.djx-joiform .djx-row{flex-wrap:wrap}
.djx-joiform input{flex:1 1 240px;min-width:0;height:60px;border:0;border-radius:18px;padding:0 20px;font:inherit;font-size:18px;background:#F3F2EE;color:#121212}
.djx-joiform .djx-btn{height:60px;border-radius:18px;font-size:18px;flex:1 0 auto}

/* Nexus shelf */
.djx-shelf{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:8px 0 clamp(48px,6vw,80px);scroll-snap-type:x mandatory}
.djx-shelf::-webkit-scrollbar{display:none}
body.djx .djx-book{flex:0 0 clamp(140px,15vw,190px);display:flex;flex-direction:column;gap:8px;text-decoration:none;scroll-snap-align:start;transition:transform .2s ease}
.djx-book:hover{transform:translateY(-8px)}
.djx-book img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;display:block;background:#121212}
.djx-book-name{font-family:'Mukta','DM Sans',sans-serif;font-weight:700;font-size:16px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.djx-book-price{font-weight:800;font-size:14px}

/* Studio */
.djx-teebox{background:#F3F2EE;border-radius:36px;aspect-ratio:1/1;display:grid;place-items:center;padding:24px}
.djx-teebox svg{width:88%;height:auto}
.djx-tee{transition:fill .3s ease}
.djx-swatch{width:52px;height:52px;border-radius:16px;border:0;cursor:pointer;outline:3px solid transparent;outline-offset:4px;transition:transform .18s ease}
.djx-swatch:hover{transform:translateY(-2px)}
.djx-swatch[aria-pressed=true]{outline-color:#121212}
.djx-input{width:100%;height:60px;border:0;border-radius:18px;padding:0 20px;font:inherit;font-size:20px;font-weight:700;background:#F3F2EE;color:#121212}

/* Renew / Hire */
.djx-panel{border-radius:36px;padding:44px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:32px;min-height:480px;align-self:stretch}
.djx-panel .djx-label{margin-top:0 !important}
body.djx .djx-hirecard{display:block;width:100%;background:#121212;color:#F3F2EE;border-radius:24px;overflow:hidden;text-decoration:none;transition:transform .2s ease}
.djx-hirecard:hover{transform:translateY(-4px)}
.djx-hireimg{display:block;aspect-ratio:16/8;overflow:hidden}
.djx-hireimg img{width:100%;height:100%;object-fit:cover;display:block}
.djx-hirebody{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px}
.djx-hirebody b{display:block;font-size:18px}

/* Trending */
.djx-trend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
body.djx .djx-tcard{background:#fff;border-radius:24px;padding:12px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:transform .2s ease}
.djx-tcard:hover{transform:translateY(-4px)}
.djx-timg{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#F3F2EE}
.djx-timg img{width:100%;height:100%;object-fit:cover;display:block}
.djx-tbody{padding:0 6px 6px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.djx-tbody b{display:block;font-size:17px;line-height:1.25}
.djx-tbody small{font-size:14px;font-weight:600}
.djx-tprice{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;white-space:nowrap}

/* footer */
.djx-footer{background:#121212;color:#F3F2EE;padding:clamp(56px,7vw,80px) 0 32px;overflow:hidden}
body.djx .djx-footer a{color:#F3F2EE;text-decoration:none}
.djx-foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
body.djx .djx-logo{background:#F3F2EE;border-radius:28px;padding:22px 28px;display:block;width:clamp(180px,20vw,240px)}
.djx-logo img{width:100%;height:auto;display:block}
.djx-foot-nav{display:flex;gap:clamp(32px,5vw,72px);flex-wrap:wrap}
.djx-foot-nav div{display:flex;flex-direction:column;gap:12px}
.djx-foot-nav p{font-weight:700;color:#D4FF3A}
.djx-foot-word{font-size:clamp(64px,17vw,270px);line-height:.8;letter-spacing:-.07em;margin:clamp(48px,7vw,72px) 0 28px !important;color:#D4FF3A}
.djx-foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.djx-foot-base span:last-child{display:flex;gap:20px}
body.djx .djx-foot-base a{text-decoration:underline}

.djx-botnav{display:none}

@media (max-width:1100px){
.djx-hero,.djx-split,.djx-split-end{grid-template-columns:1fr}
.djx-trend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.djx-wrap{padding-left:16px;padding-right:16px}
.djx-hdr{flex-wrap:wrap;gap:12px}
.djx-search{order:3;flex:1 1 100%}
.djx-word{font-size:26px}
.djx-hide-sm{display:none !important}
.djx-spot{padding:24px;min-height:300px;border-radius:24px;grid-template-columns:1fr}
.djx-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.djx-tile{height:84px;padding:10px}
.djx-duo{grid-template-columns:1fr}
.djx-trend{grid-template-columns:1fr}
.djx-rail{grid-auto-columns:78%;gap:12px}
.djx-panel{padding:28px;min-height:0}
.djx-botnav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:#121212;border-radius:22px;padding:8px;justify-content:space-around}
body.djx .djx-botnav a{color:#F3F2EE;text-decoration:none;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;padding:6px 0}
body.djx{padding-bottom:88px}
body.djx .joi-fab{display:none}
}
@media (max-width:782px){body.admin-bar .djx-header{top:46px}}
@media (max-width:600px){body.admin-bar .djx-header{top:0}}
@media (prefers-reduced-motion:reduce){.djx *{transition:none !important}}

/* footer: centred logo + links */
.djx-foot-top{flex-direction:column;align-items:center;text-align:center;gap:36px}
body.djx .djx-logo{margin:0 auto;width:clamp(200px,24vw,260px)}
.djx-foot-nav{justify-content:center;text-align:center}
.djx-foot-nav div{align-items:center}
.djx-foot-word{text-align:center}
.djx-foot-base{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:12px}

/* :Dejoiy brand lockup in the header */
.djx-word picture,.djx-word img{display:block}
.djx-word img{height:38px;width:auto}
@media (max-width:760px){.djx-word img{height:24px}}

/* animated :Dejoiy footer logo on the plaque */
html body .djx-footer .djx-logo{color:#121212 !important}
body.djx .djx-logo .djb-word{height:auto;width:100%}

/* live search results under header search boxes (djx-search.js) */
.djs-on{position:relative}
html body .djs-pop{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:10050;background:#fff;color:#121212;border-radius:20px;box-shadow:0 2px 0 rgba(18,18,18,.06),0 20px 48px rgba(18,18,18,.18);padding:8px;max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;font:400 15px/1.35 'DM Sans',system-ui,sans-serif;text-align:left;letter-spacing:0;text-transform:none}
html body .djs-pop[hidden]{display:none}
html body .djw-search .djs-pop{left:auto;width:min(460px,calc(100vw - 32px))}
html body .djs-pop .djs-h{margin:0;padding:12px 12px 6px;font:700 12px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6B6B66}
html body .djs-pop a.djs-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border-radius:14px;color:#121212 !important;text-decoration:none !important;background:none}
html body .djs-pop a.djs-item:hover,html body .djs-pop a.djs-item[aria-selected=true]{background:#F1F0EA}
html body .djs-pop .djs-img{flex:none;width:48px;height:48px;border-radius:12px;object-fit:cover;background:#F1F0EA}
html body .djs-pop .djs-text{display:flex;flex-direction:column;gap:3px;min-width:0}
html body .djs-pop .djs-t{font-weight:600;color:#121212;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .djs-pop .djs-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:#4A4A46}
html body .djs-pop .djs-world{display:inline-flex;align-items:center;gap:6px;font-weight:600}
html body .djs-pop .djs-world::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--djs-c,#D4FF3A);box-shadow:0 0 0 1px rgba(18,18,18,.25)}
html body .djs-pop .djs-page .djs-t{flex:1}
html body .djs-pop .djs-kind{flex:none;font-size:12px;font-weight:600;color:#4A4A46;border:1px solid #DDDCD4;border-radius:999px;padding:3px 9px}
html body .djs-pop a.djs-all{margin-top:4px;border-top:1px solid #ECEBE4;border-radius:0 0 14px 14px}
html body .djs-pop a.djs-all .djs-t{font-weight:700}
html body .djs-pop .djs-note{margin:0;padding:14px 12px;color:#4A4A46}
@media (max-width:760px){html body .djs-pop{max-height:60vh}html body .djw-search .djs-pop{left:0;width:auto}}

/* cart menu + cart bar (djx-carts.php) */
.djc-menu{position:relative;display:inline-flex}
html body .djc-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:10060;width:min(320px,calc(100vw - 32px));background:#fff;color:#121212;border-radius:20px;padding:8px;box-shadow:0 2px 0 rgba(18,18,18,.06),0 20px 48px rgba(18,18,18,.18);font:400 15px/1.35 'DM Sans',system-ui,sans-serif;text-align:left;text-transform:none;letter-spacing:0}
html body .djc-pop[hidden]{display:none}
html body .djc-menu .djc-pop a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border-radius:14px;color:#121212 !important;text-decoration:none !important}
html body .djc-menu .djc-pop a:hover,html body .djc-menu .djc-pop a:focus-visible{background:#F1F0EA;outline:none}
html body .djc-menu .djc-pop a + a{margin-top:2px}
.djc-pop-t{font-weight:700;font-size:16px}
.djc-pop-n{grid-row:span 2;font-size:14px;min-width:32px;height:32px;padding:0 9px;border-radius:999px;background:#D4FF3A;color:#121212;font-weight:700;display:grid;place-items:center}
.djc-pop-s{font-size:13px;color:#55544F}
.djx-botnav .djc-menu{display:flex;justify-content:center}
html body .djx-botnav .djc-pop{top:auto;bottom:calc(100% + 12px);right:50%;transform:translateX(50%)}
html body .djx-botnav-cart{display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;text-decoration:none}
html body .djc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;background:#F3F2EE;color:#121212;border-radius:20px;padding:14px 18px;margin:0 0 20px}
.djc-bar-now{margin:0;font-size:16px}
.djc-bar-links{display:flex;flex-wrap:wrap;gap:8px}
html body .djc-bar-links a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:#fff;color:#121212 !important;font-weight:600;font-size:14px;text-decoration:none !important}
html body .djc-bar-links a:hover{background:#121212;color:#F3F2EE !important}
.djc-bar-links a span{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#D4FF3A;color:#121212;font-size:12px;font-weight:700;display:inline-grid;place-items:center}