/* Arken picture display for the home picture: 2 s per picture, click stops, arrows / swipe / thumbnails move it (MDCC, 7 Nov 2026) */
.akd-on{position:relative}
.plate.akd-on>:not(.akd-host):not(.bdg){visibility:hidden}
figure.akd-on>img{visibility:hidden}
.akd-on~.platecap{display:none}
.akd-host{position:absolute;inset:0;z-index:1}
.akd-stage{position:relative;width:100%;height:100%;overflow:hidden;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#fff}
.akd-stage img.akd-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5% 8% 12%;box-sizing:border-box;background:transparent;border:0;border-radius:0;opacity:0;transition:opacity .6s ease;max-width:none;-webkit-user-drag:none}
.akd-stage img.akd-img.on{opacity:1}
.akd-stage img.akd-img.akd-cover{object-fit:cover;padding:0}
.akd-ai{position:absolute;z-index:4;top:12px;inset-inline-start:12px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#1B5E20;border:1px solid #A5D6A7;font:600 11px/1 var(--f-mono,monospace)}
html[lang="ar"] .akd-ai{font-family:var(--f-ar,inherit);font-size:12px}
.akd-arrow{position:absolute;top:50%;z-index:5;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#14171C;cursor:pointer;box-shadow:0 4px 14px rgba(20,23,28,.22);padding:0}
.akd-arrow:hover{background:#fff;transform:scale(1.06)}
.akd-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.akd-prev{inset-inline-start:10px}.akd-next{inset-inline-end:10px}
html[dir="rtl"] .akd-arrow svg{transform:scaleX(-1)}
.akd-ctl{position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
.akd-pp{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:#14171C;cursor:pointer;box-shadow:0 4px 12px rgba(20,23,28,.2);padding:0}
.akd-pp svg{width:15px;height:15px;fill:currentColor}
.akd-st{padding:6px 10px;border-radius:999px;background:rgba(20,23,28,.72);color:#fff;font-size:12.5px;white-space:nowrap}
.akd-ov{position:absolute;inset:0;z-index:3;pointer-events:none}
.akd-ov a{pointer-events:auto}
.akd-open{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;max-width:86%;padding:9px 16px;border-radius:999px;background:#14171C;color:#fff!important;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 18px rgba(20,23,28,.25)}
.akd-open:hover{filter:brightness(1.15)}
.akd-thumbs-host{min-width:0;max-width:100%}
.akd-wrap{min-width:0;display:flex;flex-direction:column}
.akd-thumbs{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding:10px 2px 4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.akd-thumbs button{position:relative;flex:none;width:92px;aspect-ratio:1/1;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s,transform .2s;box-shadow:0 1px 3px rgba(20,23,28,.12)}
.akd-thumbs button:hover{opacity:.9}
.akd-thumbs button[aria-current="true"]{opacity:1;border-color:var(--accent,#4E7A1B);transform:translateY(-2px)}
.akd-thumbs button img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box;display:block;border:0;border-radius:0}
.akd-thumbs button img.akd-cover{object-fit:cover;padding:0}
.akd-thumbs button span{position:absolute;inset:auto 0 0 0;padding:10px 5px 3px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:10.5px;line-height:1.15;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:700px){.akd-arrow{width:34px;height:34px;margin-top:-17px}.akd-thumbs button{width:72px}.akd-open{font-size:13px;padding:8px 13px}}
@media (prefers-reduced-motion:reduce){.akd-stage img.akd-img{transition:none}.akd-thumbs{scroll-behavior:auto}}

/* v3: the top banner (#reel) becomes the main display; its title and button stay under the pictures */
.reel.akd-r{aspect-ratio:auto!important;display:flex!important;flex-direction:column}
.reel.akd-r>video,.reel.akd-r>img,.reel.akd-r>.ai,.reel.akd-r>.rp{display:none!important}
.reel.akd-r>.akd-rhost{position:relative;inset:auto;width:100%;aspect-ratio:2/1;z-index:1}
.reel.akd-r>.akd-rhost .akd-stage{background:#0E1013}
.reel.akd-r.akd-rabs>.rc{position:relative!important;inset:auto!important;max-width:none!important;width:100%;border-radius:0!important;background:#14171C!important}
.akd-rthumbs{margin-top:6px}
.akd-hide{display:none!important}
.akd-1col.akd-1col.akd-1col{grid-template-columns:1fr!important}
@media (max-width:640px){.reel.akd-r>.akd-rhost{aspect-ratio:4/3}}

/* v4: big display at the top of every store page, title and buttons under it */
.akd-top{padding-top:clamp(14px,2.5vw,28px)}
.akd-big{position:relative;width:100%;aspect-ratio:2/1;border-radius:14px;overflow:hidden;background:#0E1013;box-shadow:0 10px 30px rgba(20,23,28,.14)}
.akd-big>.akd-bhost{position:absolute;inset:0}
.akd-big .akd-stage{background:#0E1013}

@media (max-width:640px){.akd-big{aspect-ratio:4/3;border-radius:10px}}
/* v4b: same style on every store - display, thumbnails, then the page's own title/text/buttons (the dark banner text is not repeated) */
.reel.akd-r>.rc{display:none!important}
.reel.akd-r{border:0!important;background:transparent!important}
.akd-hide~*,.akd-1col>*{min-width:0}

/* v5: title, text and buttons on top, then the big display (same size) */
.akd-above{padding-bottom:clamp(8px,1.6vw,18px)!important;min-height:0!important}
.akd-above .akd-1col{max-width:900px}
.akd-top,section.akd-below,.reeltop.akd-below{padding-top:0!important}
/* v6: smaller title block so the display stays big and both show together */
.akd-above{padding-top:clamp(14px,2.2vw,30px)!important}
.akd-above h1{font-size:clamp(26px,3.1vw,40px)!important;line-height:1.08!important;max-width:none!important;margin-top:4px!important;margin-bottom:10px!important;letter-spacing:-.01em}
.akd-above .lead,.akd-above h1~p{font-size:clamp(13.5px,1.15vw,15.5px)!important;line-height:1.5!important;margin-top:0!important;margin-bottom:12px!important;max-width:760px}
.akd-above .ctas,.akd-above .btns,.akd-above .cta{margin-top:10px!important}
.akd-above .eyebrow{margin-bottom:6px!important}
/* v7: no badge on the pictures (owner's request, 7 Nov 2026) */
.akd-ai{display:none!important}