/* Separate the product orbit, central collection control and selected item. */
.category-halo.clock-popover{--clock-accent:#d7e7b3;--clock-base:#15382e;--clock-surface:#2c4939;--clock-soft:#f3f6e5;background-color:var(--clock-base);border-color:color-mix(in srgb,var(--clock-accent) 45%,transparent);transition:background-color .35s,border-color .35s;overflow-anchor:none}
.category-halo.clock-popover:popover-open{display:flex;flex-direction:column;gap:0;height:auto;max-height:var(--halo-height);overflow-x:hidden;overflow-y:auto;padding:22px;border-radius:26px}
.category-halo.clock-popover .clock-ambient{background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--clock-accent) 12%,transparent),transparent 65%)}
.category-halo.clock-popover .clock-heading{flex:none;gap:12px;min-width:0}.clock-heading>div{min-width:0}.category-halo.clock-popover .clock-heading small{font-size:9px;letter-spacing:1.3px;color:var(--clock-accent)}
.category-halo.clock-popover .clock-heading h3{font-size:28px;margin:4px 0 0;line-height:1.5}.category-halo.clock-popover .clock-close{width:38px;height:38px;flex-basis:38px;padding:10px}
.category-halo.clock-popover .clock-instruction{flex:none;font-size:12px;line-height:1.8;margin:10px 0 0;color:#e1e5d8}
.category-halo.clock-popover .category-clock{flex:none;width:min(100%,max(220px,calc(100dvh - 340px)));max-width:570px;aspect-ratio:1;height:auto;margin:16px auto 20px;min-width:0}
.category-halo.clock-popover .clock-piece{width:23%;max-width:128px;gap:0;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none}
.category-halo.clock-popover .clock-piece-0{--cx:50%;--cy:12%}.category-halo.clock-popover .clock-piece-1{--cx:83%;--cy:30%}.category-halo.clock-popover .clock-piece-2{--cx:83%;--cy:72%}.category-halo.clock-popover .clock-piece-3{--cx:50%;--cy:88%}.category-halo.clock-popover .clock-piece-4{--cx:17%;--cy:72%}.category-halo.clock-popover .clock-piece-5{--cx:17%;--cy:30%}
.category-halo.clock-popover .category-clock[data-count="4"] .clock-piece-1{--cx:86%;--cy:50%}.category-halo.clock-popover .category-clock[data-count="4"] .clock-piece-2{--cx:50%;--cy:88%}.category-halo.clock-popover .category-clock[data-count="4"] .clock-piece-3{--cx:14%;--cy:50%}
.category-halo.clock-popover .clock-product-frame{position:relative;width:100%;aspect-ratio:1;box-sizing:border-box;padding:8%;border:2px solid #f0ecd245;background:#f4f0e6;transition:background-color .3s,border-color .3s,box-shadow .3s,transform .24s}
.category-halo.clock-popover .clock-product-frame img{width:100%;height:100%;object-fit:contain;border-radius:0;mix-blend-mode:normal}
.category-halo.clock-popover .clock-product-name,.category-halo.clock-popover .clock-product-code,.category-halo.clock-popover .clock-piece>strong{display:none}
.category-halo.clock-popover .clock-piece.is-selected .clock-product-frame{background:var(--clock-soft);border-color:var(--clock-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--clock-accent) 22%,transparent);transform:scale(1.035)}
.category-halo.clock-popover .clock-piece.is-selected:after{content:'✓';position:absolute;bottom:1px;left:1px;width:20px;height:20px;display:grid;place-items:center;border:2px solid var(--clock-base);border-radius:50%;background:var(--clock-accent);color:#17382b;font:700 12px Arial}
.category-halo.clock-popover .clock-logo{top:50%;width:34%;max-width:190px;box-sizing:border-box;padding:10px;gap:6px;justify-content:center;background:var(--clock-surface);border:1px solid color-mix(in srgb,var(--clock-accent) 60%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--clock-accent) 6%,transparent);transition:background-color .35s,border-color .35s}
.category-halo.clock-popover .clock-logo img{display:block;flex:0 1 auto;width:65%;height:auto;max-height:40%;object-fit:contain;filter:brightness(0) invert(1)}
.category-halo.clock-popover .clock-logo .clock-center-cta{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:5px;max-width:100%;min-height:28px;box-sizing:border-box;padding:4px 10px;border-radius:30px;background:var(--clock-accent);color:#17382b;font:700 12px/1.5 NEArabic,sans-serif;white-space:nowrap;transition:background-color .35s}
.clock-center-cta svg{width:14px;height:14px;flex:none}
.category-halo.clock-popover .clock-logo-ring{inset:-8px;border-color:color-mix(in srgb,var(--clock-accent) 45%,transparent);border-right-color:var(--clock-accent)}
.category-halo.clock-popover .clock-logo-ring:before{background:var(--clock-accent);box-shadow:none}
.category-halo.clock-popover .clock-logo:after{inset:-10px;background:radial-gradient(circle,transparent 56%,color-mix(in srgb,var(--clock-accent) 23%,transparent) 70%,transparent 72%)}
.category-halo.clock-popover .clock-dial,.category-halo.clock-popover .clock-minute-marks,.category-halo.clock-popover .clock-core-ring,.category-halo.clock-popover .clock-inner-orbit{stroke:color-mix(in srgb,var(--clock-accent) 35%,transparent);transition:stroke .35s}
.category-halo.clock-popover .clock-sweep{display:none}
.category-halo.clock-popover .clock-selection{flex:none;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;min-width:0;border-radius:16px;background:var(--clock-surface);border:1px solid color-mix(in srgb,var(--clock-accent) 45%,transparent);transition:background-color .35s,border-color .35s}
.category-halo.clock-popover .clock-selection>img{width:56px;height:64px;object-fit:contain;border-radius:10px;background:var(--clock-soft)}
.category-halo.clock-popover .clock-selection>div{min-width:0}.category-halo.clock-popover .clock-selection h4{display:block;max-height:none;white-space:normal;overflow-wrap:anywhere;font-size:15px;line-height:1.6;margin:3px 0;color:#fffdf4}.category-halo.clock-popover .clock-selection small{font-size:11px;color:var(--clock-accent)}.category-halo.clock-popover .clock-selection strong{font-size:15px;color:var(--clock-accent)}
.category-halo.clock-popover .clock-selection>a{margin:0;min-height:44px;justify-content:center;background:var(--clock-accent);color:#17382b;border-radius:12px;font-size:12px;transition:background-color .35s}
@media(prefers-reduced-motion:no-preference){.clock-popover.is-open .clock-center-cta{animation:clock-center-invite 3.4s ease-in-out infinite}@keyframes clock-center-invite{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--clock-accent) 18%,transparent)}}}
@media(max-width:700px){.category-halo.clock-popover:popover-open{padding:16px;border-radius:22px}.category-halo.clock-popover .clock-heading small{font-size:8px;letter-spacing:1px}.category-halo.clock-popover .clock-heading h3{font-size:25px}.category-halo.clock-popover .clock-instruction{font-size:11px;margin-top:8px}.category-halo.clock-popover .category-clock{margin:12px auto 16px}.category-halo.clock-popover .clock-logo{padding:7px;gap:5px}.category-halo.clock-popover .clock-logo .clock-center-cta{font-size:10px;min-height:24px;padding:3px 7px;gap:4px}.clock-center-cta svg{width:12px;height:12px}.category-halo.clock-popover .clock-selection{grid-template-columns:46px minmax(0,1fr);gap:8px 10px;padding:11px}.category-halo.clock-popover .clock-selection>img{width:46px;height:56px}.category-halo.clock-popover .clock-selection h4{font-size:13px;line-height:1.5}.category-halo.clock-popover .clock-selection strong{font-size:13px}.category-halo.clock-popover .clock-selection>a{grid-column:1/-1;width:100%;box-sizing:border-box;min-height:42px;justify-content:space-between;padding-inline:13px}.category-halo.clock-popover .clock-piece.is-selected:after{width:16px;height:16px;font-size:10px}}
@media(max-width:360px){.category-halo.clock-popover .clock-logo{padding:6px;gap:4px}.category-halo.clock-popover .clock-logo .clock-center-cta{font-size:9px;min-height:22px;padding:3px 5px;gap:3px}.clock-center-cta svg{width:11px;height:11px}.category-halo.clock-popover .clock-product-frame{padding:7%}}
@media(prefers-reduced-motion:reduce){.category-halo.clock-popover,.category-halo.clock-popover *{transition:none!important}.clock-popover.is-open .clock-center-cta{animation:none!important}}

/* A full circular photo window removes the rectangular inset from each thumbnail. */
.category-halo.clock-popover .clock-product-frame{padding:0;overflow:hidden;border-radius:50%}
.clock-image-window{position:relative;display:block;width:100%;height:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate}
.category-halo.clock-popover .clock-image-window>img{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;mix-blend-mode:normal;transition:opacity .32s ease,transform .4s ease}
.clock-image-window .clock-image-front{opacity:1;transform:scale(1)}
.clock-image-window .clock-image-next{opacity:0;transform:scale(1.035);pointer-events:none}
.clock-popover .clock-piece.is-image-preview .clock-image-front{opacity:0}
.clock-popover .clock-piece.is-image-preview .clock-image-next{opacity:1;transform:scale(1)}
@media(hover:hover) and (pointer:fine){.clock-piece:has(.clock-image-next):hover .clock-image-front{opacity:0}.clock-piece:hover .clock-image-next{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.category-halo.clock-popover .clock-image-window>img{transition:none;transform:none}}