/* appearance.css : Phase 4 (banner slider, collapsible services, hover glow). index.html e shobar shesh e load hobe */
:root{--ap-blur:28px;--ap-spread:6px;--ap-pct:45%;--ap-dur:300ms;--ap-fb:#4f46e5}
body.ap-on #app>.hero,body.ap-on #app>.slider{display:none}

/* banner slider (fade) */
.ap-slider{position:relative;width:100%;max-width:100%;border-radius:24px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow);aspect-ratio:16/6;min-height:180px;background:var(--surface2)}
.ap-slider>.arw,.slider>.arw{display:none!important}
@media(max-width:700px){.ap-slider{aspect-ratio:16/10;min-height:210px;border-radius:18px}}
.ap-home-stage{position:relative;isolation:isolate;margin-bottom:26px}
.ap-home-stage>.ap-slider{position:sticky;top:var(--site-header-height,0px);z-index:0;transform:none}
.ap-home-stage>.ap-slider>.ap-track{filter:blur(var(--ap-scroll-blur,0px));opacity:var(--ap-scroll-dim,1);transform:scale(calc(1 + var(--ap-scroll-progress,0)*.025));transition:filter .08s linear,opacity .08s linear,transform .08s linear;will-change:filter,opacity;}
.ap-home-stage>.ap-slider>.arw,.ap-home-stage>.ap-slider>.dots{opacity:var(--ap-scroll-dim,1);transition:opacity .08s linear}
.ap-home-stage>.ap-handle{position:relative;z-index:2;margin-top:0;padding:2px 0 8px}
.ap-home-stage>.ap-svc,.ap-home-stage>.sec{position:relative;z-index:2}
.ap-home-stage>.ap-svc.open{background:var(--bg);border-radius:22px;padding:8px 14px}
.ap-home-stage>.sec{margin-top:-8px;padding:22px 18px 0;background:var(--bg);border-radius:24px 24px 0 0;box-shadow:0 -14px 32px rgba(10,16,36,.07)}
@media(min-width:701px){.ap-home-stage>.sec{margin-top:14px}}
@media(max-width:700px){.ap-home-stage>.ap-handle{margin-top:0;padding:2px 0 8px}.ap-home-stage>.sec{margin-top:10px;padding:18px 12px 0;border-radius:18px 18px 0 0}}
.ap-track{display:grid;height:100%}
.ap-slide{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;background:var(--grad);color:var(--tc,#fff);display:flex;overflow:hidden}
.ap-slide.on{opacity:1;visibility:visible;z-index:1}
.ap-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 65%);pointer-events:none}
.ap-slide.noimg::before{display:none}
.ap-cap{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:clamp(16px,3vw,32px);width:100%;justify-content:var(--jp,flex-end);align-items:var(--ja,flex-start);text-align:var(--ta,left)}
.ap-cap h2{margin:0;font-size:var(--fs);font-weight:var(--fw);color:var(--tc);letter-spacing:-.5px;line-height:1.1;max-width:720px}
.ap-cap .ap-sub{font-size:clamp(14px,2vw,18px);font-weight:600;color:var(--tc)}
.ap-cap p{margin:0;color:var(--tc);opacity:.92;max-width:560px;font-size:clamp(13px,1.6vw,16px)}
.ap-cap .btn{margin-top:6px}
.ap-slide.ap-default .ap-cap .btn{position:relative;overflow:hidden;border:1px solid transparent;transition:transform .28s ease,background .35s ease,border-color .3s ease,box-shadow .35s ease,backdrop-filter .35s ease}
@media(hover:hover){.ap-slide.ap-default .ap-cap .btn:hover{transform:translateY(-2px) scale(1.035);border-color:rgba(255,255,255,.82);background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(136,216,255,.34) 52%,rgba(255,255,255,.14));backdrop-filter:blur(9px) saturate(165%);-webkit-backdrop-filter:blur(9px) saturate(165%);box-shadow:inset 0 1px 0 rgba(255,255,255,.64),inset 0 -8px 18px rgba(125,211,252,.16),0 8px 24px rgba(80,190,255,.32)}.ap-slide.ap-default .ap-cap .btn:hover::before{transform:translateX(155%)}.ap-slide.ap-default .ap-cap .btn::before{content:"";position:absolute;inset:-30% auto -30% -65%;z-index:0;width:42%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.36),transparent);transform:translateX(0) skewX(-18deg);transition:transform .62s cubic-bezier(.2,.7,.2,1)}}
.ap-slide.ap-default{isolation:isolate;background:linear-gradient(120deg,color-mix(in srgb,var(--ap-base,#123569) 68%,#07152e) 0%,var(--ap-base,#123569) 54%,color-mix(in srgb,var(--ap-base,#123569) 56%,#7c4fd1) 100%)}
.ap-slide.ap-default.noimg{background:radial-gradient(ellipse at 78% 47%,color-mix(in srgb,var(--ap-light-color,#65d9ff) 34%,transparent),transparent 32%),linear-gradient(112deg,color-mix(in srgb,var(--ap-base,#123569) 55%,#030817) 0%,var(--ap-base,#123569) 56%,color-mix(in srgb,var(--ap-base,#123569) 55%,#342568) 100%)}
.ap-slide.ap-default::before{display:block;z-index:0;background:linear-gradient(90deg,rgba(4,13,31,.62) 0%,rgba(8,22,50,.25) 52%,rgba(8,14,37,.08) 100%)}
.ap-slide.ap-default.noimg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 72% 48%,transparent 10%,rgba(5,12,30,.12) 48%,rgba(3,8,24,.54) 100%),linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--ap-light-color,#65d9ff) 15%,transparent) 52%,transparent 64%);}
.ap-slide.ap-texture-grid.noimg::after{background-image:radial-gradient(ellipse at 72% 48%,transparent 10%,rgba(5,12,30,.12) 48%,rgba(3,8,24,.54) 100%),linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--ap-light-color,#65d9ff) 15%,transparent) 52%,transparent 64%),linear-gradient(color-mix(in srgb,var(--ap-texture-color,#9bdcff) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ap-texture-color,#9bdcff) 10%,transparent) 1px,transparent 1px);background-size:auto,auto,34px 34px,34px 34px;mask-image:linear-gradient(90deg,transparent 18%,#000 100%)}
.ap-slide.ap-texture-grid.noimg::after{background-image:radial-gradient(ellipse at 72% 48%,transparent 8%,rgba(5,12,30,.12) 48%,rgba(3,8,24,.45) 100%),radial-gradient(ellipse at 73% 50%,color-mix(in srgb,var(--ap-texture-color,#9bdcff) 9%,transparent),transparent 52%);background-size:auto;mask-image:none}
.ap-slide.ap-texture-diagonal.noimg::after{background-image:radial-gradient(ellipse at 72% 48%,transparent 10%,rgba(5,12,30,.12) 48%,rgba(3,8,24,.54) 100%),repeating-linear-gradient(135deg,transparent 0 24px,color-mix(in srgb,var(--ap-texture-color,#9bdcff) 13%,transparent) 25px 26px);mask-image:linear-gradient(90deg,transparent 18%,#000 100%)}
.ap-slide.ap-texture-orbit.noimg::after{background-image:radial-gradient(ellipse at 72% 48%,transparent 10%,rgba(5,12,30,.12) 48%,rgba(3,8,24,.54) 100%),repeating-radial-gradient(ellipse at 75% 52%,transparent 0 24px,color-mix(in srgb,var(--ap-texture-color,#9bdcff) 15%,transparent) 25px 26px);mask-image:linear-gradient(90deg,transparent 18%,#000 100%)}
.ap-slide.ap-texture-none.noimg::after{background:radial-gradient(ellipse at 72% 48%,transparent 10%,rgba(5,12,30,.12) 48%,rgba(3,8,24,.54) 100%)}
.ap-default .ap-cap{z-index:2;width:min(62%,700px);padding-left:clamp(22px,6vw,72px);text-shadow:0 3px 18px rgba(2,8,23,.42)}
.ap-diorama{position:absolute;z-index:1;right:3%;top:4%;width:min(43%,480px);height:92%;display:grid;place-items:center;pointer-events:none}
.ap-box-glow{position:absolute;width:82%;height:72%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--ap-light-color,#65d9ff) 52%,transparent),color-mix(in srgb,var(--ap-light-color,#65d9ff) 24%,transparent) 38%,rgba(255,255,255,.06) 58%,transparent 74%);filter:blur(12px);animation:ap-glow-pulse 5s ease-in-out infinite}
.ap-cube-scene{position:relative;width:clamp(175px,24vw,260px);aspect-ratio:1;perspective:950px;animation:ap-box-hover 6s ease-in-out infinite}
.ap-cube{--depth:clamp(70px,9.6vw,104px);position:absolute;inset:10%;transform-style:preserve-3d;animation:ap-box-rotate 22s linear infinite;will-change:transform}
.ap-cube-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:18px;color:#fff;text-align:center;backface-visibility:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 18px 30px rgba(10,22,58,.24)}
.ap-cube-face.front{transform:translateZ(var(--depth));background:linear-gradient(145deg,#fff 0%,#f1f5ff 58%,#ccd8ff 100%);color:var(--ap-box-text-color,#17346e)}
.ap-cube-face.right{transform:rotateY(90deg) translateZ(var(--depth));background:linear-gradient(145deg,#fd8ab5,#d62478 70%,#9f155b)}
.ap-cube-face.back{transform:rotateY(180deg) translateZ(var(--depth));background:linear-gradient(145deg,#ffe5a4,#f4a33d 70%,#da6c35);color:#5b2d42}
.ap-cube-face.left{transform:rotateY(-90deg) translateZ(var(--depth));background:linear-gradient(145deg,#76e1d2,#279eaa 70%,#226b96)}
.ap-cube-face.top{transform:rotateX(90deg) translateZ(var(--depth));background:linear-gradient(145deg,#b7c5ff,#7665cf 70%,#514596)}
.ap-cube-face.bottom{transform:rotateX(-90deg) translateZ(var(--depth));background:linear-gradient(145deg,#284e91,#142b59)}
.ap-shop-symbol{width:25%;height:25%;fill:none;stroke:var(--ap-box-text-color,#17346e);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 4px rgba(29,50,112,.16))}
.ap-cube-face.front>b{max-width:86%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10px,1.3vw,15px);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ap-cube-face.front>small,.ap-cube-face.right>small,.ap-cube-face.back>small,.ap-cube-face.left>small{font-size:clamp(6px,.8vw,9px);font-weight:800;letter-spacing:.11em;opacity:.82}
.ap-cube-face.front>i{padding:4px 8px;border-radius:99px;background:#f6b84e;color:#573b19;font-size:clamp(6px,.75vw,8px);font-style:normal;font-weight:900;letter-spacing:.06em}
.ap-cube-face.right>strong,.ap-cube-face.left>strong,.ap-cube-face.back>b{font-size:clamp(10px,1.35vw,15px);line-height:1.25;letter-spacing:.06em}
.ap-mini-icons{display:flex;gap:8px}.ap-mini-icons b{width:27px;height:27px;display:grid;place-items:center;border:1px solid #ffffff99;border-radius:9px;background:#ffffff24;font-size:15px}
.ap-back-seal{width:43px;height:43px;display:grid;place-items:center;border:2px solid #723e4c;border-radius:50%;font-size:24px;font-weight:900;transform:rotate(-9deg)}
.ap-left-spark{font-size:40px;line-height:1;text-shadow:0 5px 16px #16365866}
.ap-cube-face.top span,.ap-cube-face.bottom span{font-size:22px;letter-spacing:.2em}.ap-cube-face.top b{font-size:13px;letter-spacing:.2em}
.ap-box-floor{position:absolute;bottom:5%;width:61%;height:13%;border-radius:50%;background:radial-gradient(ellipse,rgba(6,18,49,.45),rgba(255,255,255,.1) 55%,transparent 72%);filter:blur(7px)}
@keyframes ap-box-rotate{from{transform:rotateX(-13deg) rotateY(0)}to{transform:rotateX(-13deg) rotateY(360deg)}}
@keyframes ap-box-hover{0%,100%{transform:translateY(4px)}50%{transform:translateY(-7px)}}
@keyframes ap-glow-pulse{0%,100%{opacity:.68;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@media(max-width:700px){.ap-default .ap-cap{width:60%;padding:12px 10px 16px 16px;gap:5px}.ap-default .ap-cap h2{font-size:clamp(20px,5.3vw,30px);max-width:100%}.ap-default .ap-cap p{max-width:26ch;font-size:12px;line-height:1.35}.ap-diorama{right:0;width:42%;opacity:.98}.ap-cube-scene{width:clamp(100px,28vw,132px)}.ap-cube{--depth:clamp(40px,11.2vw,53px)}.ap-cube-face{gap:4px;padding:3px;border-radius:14px}.ap-cube-face.front>b{max-width:92%;font-size:clamp(7px,2vw,9px);letter-spacing:.035em}.ap-cube-face.front>small,.ap-cube-face.right>small,.ap-cube-face.back>small,.ap-cube-face.left>small{font-size:6px;letter-spacing:.035em}.ap-cube-face.front>i{padding:3px 5px;font-size:6px;letter-spacing:.015em}.ap-cube-face.right>strong,.ap-cube-face.left>strong,.ap-cube-face.back>b{max-width:94%;font-size:clamp(7px,2.15vw,9px);line-height:1.15;letter-spacing:.015em;overflow-wrap:anywhere}.ap-back-seal{width:28px;height:28px;font-size:15px}.ap-mini-icons{gap:4px}.ap-mini-icons b{width:18px;height:18px;font-size:10px}.ap-left-spark{font-size:22px}.ap-cube-face.top span,.ap-cube-face.bottom span{font-size:12px;letter-spacing:.08em}.ap-cube-face.top b{font-size:9px;letter-spacing:.08em}.ap-box-glow{width:96%;height:82%;filter:blur(10px)}}
.ap-welcome{padding:18px 2px 6px}.ap-welcome h1{margin:0;font-size:clamp(24px,4vw,34px)}.ap-welcome p{margin:4px 0 0;color:var(--muted)}

/* collapsible service section */
.ap-handle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:none;border:0;padding:2px 0 10px;cursor:pointer;color:var(--muted)}
.ap-handle .ln{flex:0 0 36px;height:1px;background:var(--border)}
.ap-handle .chev{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;transition:transform .3s,border-color .2s}
.ap-handle:hover .chev,.ap-handle:focus-visible .chev{border-color:var(--primary);color:var(--primary)}
.ap-handle[aria-expanded=true] .chev{transform:rotate(180deg)}
.ap-svc{display:grid;grid-template-rows:0fr;min-height:0;overflow:hidden;transition:grid-template-rows .48s cubic-bezier(.22,.75,.25,1),padding .48s cubic-bezier(.22,.75,.25,1)}
.ap-svc.open{grid-template-rows:1fr}
.ap-svc-in{overflow:hidden;min-height:0;opacity:0;transform:translateY(-5px);transition:opacity .24s ease,transform .36s cubic-bezier(.22,.75,.25,1)}
.ap-svc.open .ap-svc-in{opacity:1;transform:translateY(0)}
.ap-svc .feats{margin:4px 0 18px}
@media(max-width:700px){
 .ap-handle .chev{width:26px;height:26px}
 .ap-handle .chev .ic{width:15px;height:15px}
 .ap-svc .feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;margin:2px 0 10px}
 .ap-svc .ft{min-width:0;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:start;gap:7px;padding:7px 4px;border:0;border-radius:10px;background:transparent;box-shadow:none}
 .ap-svc .ft .ic{width:26px;height:26px;padding:6px;border-radius:8px}
 .ap-svc .ft b{font-size:10.5px;line-height:1.2}
 .ap-svc .ft small{font-size:9px;line-height:1.25}
 .ap-svc .shop-cat-section{margin-top:2px;padding-top:4px;border-top:1px solid var(--border)}
 .ap-svc .shop-cat-section .sh{margin-bottom:8px}
 .ap-svc .shop-cat-section .sh h2{font-size:14px}
 .ap-svc .shop-cat-section .cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px}
 .ap-svc .shop-cat-section .cat3d{width:100%;min-width:0;min-height:0;padding:3px 1px;gap:3px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
 .ap-svc .shop-cat-section .cat-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:12px;font-size:16px;box-shadow:0 5px 12px hsl(var(--h) 60% 60%/.22);transform:none}
 .ap-svc .shop-cat-section .cat3d.has-image .cat-icon{background:transparent;box-shadow:none}
 .ap-svc .shop-cat-section .cat-icon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
 .ap-svc .shop-cat-section .cat3d b{display:-webkit-box;width:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;font-size:9px;line-height:1.15;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .ap-svc .shop-cat-section .cat3d small{font-size:8px;line-height:1.1}
 .ap-svc .shop-cat-section .cat3d:active .cat-icon{animation:cat-icon-tap .38s cubic-bezier(.2,.8,.25,1)}
}
@keyframes cat-icon-tap{0%{transform:scale(1)}35%{transform:scale(.86)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Category shortcuts are a clean icon row, without individual card boxes. */
@media(min-width:701px){
 .ap-svc .shop-cat-section .cats{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px}
 .ap-svc .shop-cat-section .cats::-webkit-scrollbar{display:none}
 .ap-svc .shop-cat-section .cat3d{flex:0 0 auto;min-width:96px;min-height:0;padding:6px 8px;display:flex;align-items:center;gap:9px;border:0;border-radius:14px;background:transparent;box-shadow:none;transform:none}
 .ap-svc .shop-cat-section .cat3d:hover{background:transparent;box-shadow:none}
 .ap-svc .shop-cat-section .cat-icon{width:48px;height:48px;flex:none;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:14px;overflow:hidden;display:grid;place-items:center;box-shadow:0 5px 12px hsl(var(--h) 55% 52%/.18);transform:scale(1);transition:transform .2s cubic-bezier(.2,.75,.25,1)}
 .ap-svc .shop-cat-section .cat3d.has-image .cat-icon{background:var(--surface)}
 .ap-svc .shop-cat-section .cat-icon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
 .ap-svc .shop-cat-section .cat3d b{font-size:13px;white-space:nowrap}
 .ap-svc .shop-cat-section .cat3d small{display:none}
 .ap-svc .shop-cat-section .cat3d:active .cat-icon{animation:cat-icon-tap .38s cubic-bezier(.2,.8,.25,1)}
}
@media(hover:hover) and (min-width:701px){.ap-svc .shop-cat-section .cat3d:hover .cat-icon{transform:scale(1.1)}}

/* product-card dominant-colour glow */
html.ap-glow .card{transition:translate .25s,box-shadow var(--ap-dur) ease}
html.ap-glow .card:hover,html.ap-glow .card:focus-within{box-shadow:0 10px var(--ap-blur) var(--ap-spread) color-mix(in srgb,var(--glow,var(--ap-fb)) var(--ap-pct),transparent)}
@media(hover:none){html.ap-glow .card:active{box-shadow:0 8px var(--ap-blur) var(--ap-spread) color-mix(in srgb,var(--glow,var(--ap-fb)) var(--ap-pct),transparent)}}
@media(prefers-reduced-motion:reduce){.ap-slide{transition:none}.ap-svc,.ap-svc-in{transition:none}.ap-cube,.ap-cube-scene{animation:none}}
@media(prefers-reduced-motion:reduce){.ap-home-stage>.ap-slider>.ap-track{filter:none!important;opacity:1!important;transform:none!important;transition:none!important}.ap-home-stage>.ap-slider>.arw,.ap-home-stage>.ap-slider>.dots{opacity:1!important;transition:none!important}}