/* JOY enhance layer - additive styles, all scoped to #joy-dock / #joy-trust / .joy-dlg */
#joy-dock{position:fixed;z-index:80;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:6px;align-items:center;max-width:calc(100vw - 20px);font:600 13px/1 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif}
#joy-dock .joy-dock__btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid rgba(212,175,55,.55);background:rgba(10,10,16,.92);color:#fff;text-decoration:none;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.35)}
#joy-dock .joy-dock__btn span{max-width:38vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#joy-dock .joy-dock__btn.is-set{border-color:#d4af37}
#joy-dock .joy-dock__icon{width:40px;justify-content:center;padding:0}
#joy-dock .joy-dock__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){#joy-dock{bottom:calc(76px + env(safe-area-inset-bottom));left:8px;gap:5px}#joy-dock .joy-dock__btn{min-height:38px;padding:0 10px}#joy-dock .joy-dock__icon{width:38px}}
.joy-dlg{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;font:400 15px/1.4 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif}
@media (min-width:600px){.joy-dlg{align-items:center}}
.joy-dlg__card{background:#10101a;color:#fff;width:min(440px,100%);padding:20px;border-radius:16px 16px 0 0;border:1px solid rgba(212,175,55,.45);display:grid;gap:8px;max-height:90vh;overflow:auto}
@media (min-width:600px){.joy-dlg__card{border-radius:16px}}
.joy-dlg__card h2{margin:0 0 4px;font-size:18px}
.joy-dlg__card label{font-size:12px;opacity:.8;margin-top:4px}
.joy-dlg__card input,.joy-dlg__card select{min-height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:#181826;color:#fff;padding:0 12px;font:inherit}
.joy-dlg__hint{font-size:12px;opacity:.7;margin:4px 0}
.joy-dlg__links{display:grid;gap:6px}
.joy-dlg__links a{color:#f1d27a;text-decoration:underline}
.joy-dlg__actions{display:flex;gap:8px;margin-top:6px}
.joy-dlg__actions button{min-height:44px;padding:0 16px;border-radius:10px;border:0;background:#c8102e;color:#fff;font:600 14px/1 inherit;cursor:pointer}
.joy-dlg__actions .joy-ghost{background:transparent;border:1px solid rgba(255,255,255,.35)}
#joy-trust{padding:18px 14px;border-top:1px solid rgba(212,175,55,.3);background:rgba(10,10,16,.04);font:500 13px/1.4 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif}
#joy-trust .joy-trust__in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center}
#joy-trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
#joy-trust .joy-trust__k{opacity:.7;margin-right:6px}
#joy-trust .joy-trust__pay li{padding:4px 10px;border:1px solid currentColor;border-radius:6px;opacity:.85}
#joy-trust .joy-trust__quote{padding:8px 14px;border-radius:999px;border:1px solid #c8102e;color:inherit;text-decoration:none;font-weight:700}

/* Placeholder icon offset fix (additive): the round-2 placeholder artwork was painted on the 40px label strip and overlapped the label text.
   Paint it on the media box instead, centred in the area BELOW the label. Parts with real photos are untouched (only data-media-kind="placeholder"). */
.joy-product-media[data-media-kind="placeholder"] .marketplace-product__fallback{background-image:none!important}
/* Round 3: same artwork, same colour and position, but painted as a CSS mask on a pseudo-element instead of a background-image. Chrome/Lighthouse treat a
   background-image as a Largest Contentful Paint candidate (it arrived after the JS bundle + product API and pushed mobile LCP to ~5 s); a masked pseudo-element is not
   an LCP candidate, so the text (H1) that paints first stays the LCP. Looks identical (the artwork is a single colour #e11d48 with alpha). */
.joy-product-media[data-media-kind="placeholder"]{isolation:isolate}
.joy-product-media[data-media-kind="placeholder"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#e11d48;
  -webkit-mask:url("/joy-photo-pending.svg") no-repeat center calc(50% + 22px)/auto min(96px,52%);mask:url("/joy-photo-pending.svg") no-repeat center calc(50% + 22px)/auto min(96px,52%)}

/* Round 3: "Show parts for my car" chip (shown on /catalogue only when My car is set and no vehicle filter is applied). Sits just above the dock. */
.joy-carchip{position:fixed;z-index:79;left:max(10px,env(safe-area-inset-left));bottom:calc(58px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;max-width:calc(100vw - 20px);min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #d4af37;background:#c8102e;color:#fff;text-decoration:none;font:600 13px/1.2 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.joy-carchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.joy-carchip:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.joy-carchip{bottom:calc(76px + 38px + 8px + env(safe-area-inset-bottom));left:8px}}

/* Round 3: lift dock/chip above the cookie banner while it is showing (--joy-lift is set by joy-enhance.js, 0px when there is no banner). */
#joy-dock{bottom:calc(max(10px, var(--joy-lift,0px) + 8px) + env(safe-area-inset-bottom))}
.joy-carchip{bottom:calc(max(10px, var(--joy-lift,0px) + 8px) + 48px + env(safe-area-inset-bottom))}
@media (max-width:760px){#joy-dock{bottom:calc(max(76px, var(--joy-lift,0px) + 8px) + env(safe-area-inset-bottom))}.joy-carchip{bottom:calc(max(76px, var(--joy-lift,0px) + 8px) + 46px + env(safe-area-inset-bottom))}}
/* Round 3: the cookie banner is z-index 7900; the My car dialog (2000) used to open underneath it so Save/Clear/Close were covered. */
.joy-dlg{z-index:8000}

/* Round 3: minimise / "Quick options" tab for the dock. Same corner as the dock (bottom-left); the Oni assistant icon is untouched and sits elsewhere. */
#joy-dock[hidden],#joy-dock-tab[hidden]{display:none!important}
#joy-dock-tab{position:fixed;z-index:80;left:max(10px,env(safe-area-inset-left));bottom:calc(max(10px, var(--joy-lift,0px) + 8px) + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(212,175,55,.55);background:rgba(10,10,16,.92);color:#fff;font:600 12px/1 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#joy-dock-tab:focus-visible,#joy-dock-min:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){#joy-dock-tab{left:8px;bottom:calc(max(76px, var(--joy-lift,0px) + 8px) + env(safe-area-inset-bottom));min-height:34px;padding:0 10px}}
html.joy-dock-min .joy-carchip{bottom:calc(max(10px, var(--joy-lift,0px) + 8px) + 44px + env(safe-area-inset-bottom))}
@media (max-width:760px){html.joy-dock-min .joy-carchip{bottom:calc(max(76px, var(--joy-lift,0px) + 8px) + 42px + env(safe-area-inset-bottom))}}

/* ===== Round 3: "16K UHD digital LED screen" over the hero facade (only present when signageMode = "led"; see joy-led.js) ===== */
.joy-led{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.joy-led__stage{position:absolute;left:0;top:0;width:1500px;height:400px;transform-origin:0 0;contain:layout paint}
.joy-led__bezel{position:absolute;inset:0;padding:26px;border-radius:30px;background:linear-gradient(160deg,#2b2d33 0%,#0d0e12 38%,#1b1c22 70%,#050507 100%);box-shadow:0 0 0 3px #08080b,0 0 0 5px rgba(255,214,150,.38),0 0 70px 10px rgba(255,190,110,.22),0 0 26px 2px rgba(255,70,70,.18),inset 0 2px 3px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.8)}
.joy-led__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10px;background:radial-gradient(120% 140% at 50% 40%,#16181f 0%,#07080c 62%,#020204 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.9),inset 0 0 0 2px rgba(255,255,255,.05)}
.joy-led__slides,.joy-led__slide{position:absolute;inset:0}
.joy-led__slide{display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden}
.joy-led__slide.is-on{opacity:1;visibility:visible}
.joy-led__logo{display:block;width:auto;height:76%;max-width:78%;object-fit:contain;filter:drop-shadow(0 0 22px rgba(255,60,60,.45));-webkit-box-reflect:below 6px linear-gradient(transparent 62%,rgba(255,255,255,.16))}
.joy-led__img,.joy-led__video{width:100%;height:100%;object-fit:cover;display:block}
.joy-led__sweep{position:absolute;top:0;bottom:0;left:-30%;width:22%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);mix-blend-mode:screen;opacity:0;transform:skewX(-18deg)}
.joy-led__grid{position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(0,0,0,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.55) 1px,transparent 1px);background-size:6px 6px;mix-blend-mode:multiply}
.joy-led__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px)}
.joy-led__scan::after{content:"";position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07),transparent);animation:joyLedBand 7s linear infinite}
.joy-led__glare{position:absolute;inset:-20% -40%;pointer-events:none;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%);animation:joyLedGlare 11s ease-in-out infinite}
.joy-led__gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 30%,transparent 46%),radial-gradient(90% 60% at 50% 120%,rgba(255,90,90,.10),transparent 70%)}
/* transitions: each slide runs its "in" animation when .is-replay is set by the slideshow engine */
.joy-led__slide[data-tr="fade"].is-on.is-replay{animation:joyLedFade .9s ease both}
.joy-led__slide[data-tr="zoom"].is-on.is-replay{animation:joyLedZoom 1.2s cubic-bezier(.2,.7,.2,1) both}
.joy-led__slide[data-tr="slide"].is-on.is-replay{animation:joyLedSlide .8s cubic-bezier(.2,.7,.2,1) both}
.joy-led__slide[data-tr="reveal"].is-on.is-replay{animation:joyLedCycle 9s ease-in-out infinite both}
.joy-led__slide[data-tr="reveal"].is-on.is-replay .joy-led__logo{animation:joyLedLogo 9s ease-in-out infinite both}
.joy-led__slide[data-tr="reveal"].is-on.is-replay .joy-led__sweep{animation:joyLedSweep 9s ease-in-out infinite both}
@keyframes joyLedFade{from{opacity:0}to{opacity:1}}
@keyframes joyLedZoom{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}
@keyframes joyLedSlide{from{opacity:0;transform:translateX(12%)}to{opacity:1;transform:none}}
@keyframes joyLedCycle{0%{opacity:0}4%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes joyLedLogo{0%{opacity:0;transform:scale(1.14);filter:blur(16px) brightness(3) drop-shadow(0 0 22px rgba(255,60,60,.45));clip-path:inset(0 100% 0 0)}
 16%{opacity:1;transform:scale(1.02);filter:blur(2px) brightness(1.7) drop-shadow(0 0 30px rgba(255,60,60,.7));clip-path:inset(0 0 0 0)}
 24%{transform:scale(1);filter:blur(0) brightness(1) drop-shadow(0 0 22px rgba(255,60,60,.45))}
 55%{filter:blur(0) brightness(1.08) drop-shadow(0 0 34px rgba(255,70,70,.6))}
 88%{opacity:1;filter:blur(0) brightness(1) drop-shadow(0 0 22px rgba(255,60,60,.45));clip-path:inset(0 0 0 0)}
 100%{opacity:0;filter:blur(3px) brightness(1.4);clip-path:inset(0 0 0 0)}}
@keyframes joyLedSweep{0%,6%{left:-30%;opacity:0}8%{opacity:.9}22%{left:112%;opacity:.9}24%,100%{left:112%;opacity:0}}
@keyframes joyLedBand{from{transform:translateY(0)}to{transform:translateY(620%)}}
@keyframes joyLedGlare{0%,100%{transform:translateX(-18%)}50%{transform:translateX(18%)}}
.joy-led.is-paused *,.joy-led.is-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.joy-led *,.joy-led *::after{animation:none!important}.joy-led__slide.is-on{opacity:1}.joy-led__sweep,.joy-led__scan::after{display:none}}
.joy-led.is-static *,.joy-led.is-static *::after{animation:none!important}

/* ===== Round 3: richer quick options (distinct card per option, WhatsApp in its official green, labelled Minimise / Quick options) ===== */
#joy-dock{flex-wrap:wrap;gap:8px;max-width:min(calc(100vw - 20px),420px);align-items:flex-end}
#joy-dock .joy-dock__opt{--ac:#d4af37;position:relative;gap:8px;min-height:44px;padding:0 14px 0 6px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 26%,rgba(10,10,16,.9)) 0%,rgba(10,10,16,.88) 62%);box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:700 13px/1 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif;letter-spacing:.01em;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:joyDockIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
#joy-dock .joy-dock__opt .joy-dock__ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--ac) 22%,rgba(255,255,255,.04));color:var(--ac);flex:none}
#joy-dock .joy-opt--car{--ac:#e8c35a}
#joy-dock .joy-opt--wa{--ac:#25D366}
#joy-dock .joy-opt--wa .joy-dock__ic{background:rgba(37,211,102,.14)}
#joy-dock .joy-opt--lang{--ac:#58b8ff;min-width:0}
#joy-dock .joy-opt--lang .joy-dock__ic{color:#58b8ff}
@media (hover:hover){#joy-dock .joy-dock__opt:hover{transform:translateY(-2px);border-color:var(--ac);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent),0 0 18px color-mix(in srgb,var(--ac) 35%,transparent)}}
#joy-dock .joy-dock__opt:active{transform:scale(.96)}
#joy-dock .joy-dock__opt:focus-visible{outline:2px solid #fff;outline-offset:2px}
#joy-dock .joy-dock__min,#joy-dock-tab{gap:6px;min-height:36px;padding:0 12px 0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,16,.92);color:#fff;font:700 12px/1 Inter,system-ui,"Hind Siliguri","Noto Sans Bengali",sans-serif;animation:joyDockIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
#joy-dock .joy-dock__min{width:auto;justify-content:flex-start}
#joy-dock .joy-dock__min svg,#joy-dock-tab svg{flex:none;color:#e8c35a}
#joy-dock-tab{border-color:rgba(232,195,90,.7);box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 14px rgba(232,195,90,.22);min-height:38px;animation:joyDockIn .45s cubic-bezier(.2,.8,.2,1) both}
@media (hover:hover){#joy-dock .joy-dock__min:hover,#joy-dock-tab:hover{border-color:#e8c35a}}
@keyframes joyDockIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#joy-dock .joy-dock__opt,#joy-dock .joy-dock__min,#joy-dock-tab{animation:none!important;transition:none!important}}
@media (max-width:760px){#joy-dock{max-width:calc(100vw - 96px);gap:6px}#joy-dock .joy-dock__opt{min-height:42px;padding:0 12px 0 5px;font-size:12.5px}#joy-dock .joy-dock__opt .joy-dock__ic{width:30px;height:30px}}
#joy-trust[hidden]{display:none!important}
