.carousel-frame { overflow: hidden; }
.carousel-slide { position: absolute; inset: 0; }
.carousel-slide[hidden] { display: none !important; }
.carousel-control { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; border-radius: 50%; }
.carousel-control:hover { background: transparent; }
.carousel-control:focus-visible { outline: 3px solid #edc4ce; outline-offset: 4px; }

.canvas-stage .mail-club-hover-part { pointer-events: auto; transition: filter 220ms ease; }
.mail-club-hover-part.mail-club-hover-active { filter: brightness(1.09) drop-shadow(0 3px 5px rgb(237 196 206 / 45%)); }
.mail-club-hover-part:focus-visible { outline: 3px dashed #edc4ce; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .canvas-stage .mail-club-hover-part { transition: none; } }

/* Canva sprite parents ignore pointers; restore hit testing on the buttons. */
.canvas-stage .carousel-control { pointer-events: auto; touch-action: manipulation; }
.carousel-news { position: absolute; inset: 0; pointer-events: none; animation: news-breathe 4.2s ease-in-out infinite; }
@keyframes news-breathe {
  0%, 100% { transform: scale(1) rotate(-.6deg); }
  50% { transform: scale(1.045) rotate(.6deg); }
}
.art-paused .carousel-news { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .carousel-news { animation: none; } }

.mail-club-assembly { position: absolute; inset: 0; pointer-events: none; transition: transform 300ms ease; }
.mail-club-assembly-active { transform: scale(1.025) rotate(-.65deg); }
.mail-club-link { position: absolute; inset: 0; z-index: 20; pointer-events: auto; cursor: pointer; }
.mail-club-link:focus-visible { outline: 3px dashed #edc4ce; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .mail-club-assembly { transition: none; } .mail-club-assembly-active { transform: none; } }

.news-card-motion { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform 300ms ease, filter 220ms ease; }
.news-card-link { position: absolute; inset: 0; z-index: 10; pointer-events: auto; cursor: pointer; }
.news-card-link:focus-visible { outline: 3px dashed #edc4ce; outline-offset: 4px; }
.news-card:focus-within > .news-card-motion { transform: scale(1.025) rotate(-.65deg); filter: brightness(1.09) drop-shadow(0 3px 5px rgb(237 196 206 / 45%)); }
@media (hover: hover) and (pointer: fine) {
  .news-card:has(> .news-card-link:hover) > .news-card-motion { transform: scale(1.025) rotate(-.65deg); filter: brightness(1.09) drop-shadow(0 3px 5px rgb(237 196 206 / 45%)); }
}
@media (prefers-reduced-motion: reduce) {
  .news-card-motion { transition: none; }
  .news-card:focus-within > .news-card-motion, .news-card:has(> .news-card-link:hover) > .news-card-motion { transform: none; }
}

/* White glow follows the actual arrow artwork, not a circular button overlay. */
.canvas-stage .carousel-arrow-highlight { filter: drop-shadow(0 0 9px rgba(247, 242, 234, .55)); }

.shop-connector-link { position: absolute; inset: 0; pointer-events: auto; z-index: 10; cursor: pointer; }
.shop-connector-link:focus-visible { outline: 3px dashed #edc4ce; outline-offset: 4px; }
.shop-connector-hover { transition: filter 180ms ease; }
.shop-carousel-hover .news-card > .news-card-motion { transform: translateY(-3px) scale(1.015) rotate(-.65deg); filter: drop-shadow(0 0 9px rgba(247, 242, 234, .55)); }
.shop-carousel-hover .shop-connector-hover { filter: drop-shadow(0 0 9px rgba(247, 242, 234, .55)); }
.shop-carousel-hover .art-interactive:has(> .art-link[aria-label="Shop"]) > .art-motion { translate: 0 -3px; scale: 1.015; filter: drop-shadow(0 0 9px rgba(247, 242, 234, .55)); }
@media (prefers-reduced-motion: reduce) {
  .shop-carousel-hover .news-card > .news-card-motion { transform: none; }
  .shop-carousel-hover .art-interactive:has(> .art-link[aria-label="Shop"]) > .art-motion { translate: none; scale: none; }
  .shop-connector-hover { transition: none; }
}

/* The hanging Shop sign keeps its original size in every hover state. */
.canva-layout .art-interactive:has(> .art-link[aria-label="Shop"]):is(.art-hovered, .art-focused, :has(> .art-link:active)) > .art-motion,
.shop-carousel-hover .art-interactive:has(> .art-link[aria-label="Shop"]) > .art-motion {
  scale: none;
}

/* Hover changes only the Shop sign's glow, never its position or orientation. */
.canva-layout .art-interactive:has(> .art-link[aria-label="Shop"]):is(.art-hovered, .art-focused, :has(> .art-link:active)) > .art-motion,
.shop-carousel-hover .art-interactive:has(> .art-link[aria-label="Shop"]) > .art-motion {
  translate: none;
  scale: none;
  rotate: none;
}

/* Emphasise the three connector arrows with the shared Shop hover. */
.shop-connector-hover { transform-origin: 50% 50%; transition: filter 180ms ease, scale 220ms ease; }
.shop-carousel-hover .shop-connector-hover { scale: none; }
@media (prefers-reduced-motion: reduce) {
  .shop-connector-hover { transition: none; }
  .shop-carousel-hover .shop-connector-hover { scale: none; }
}

/* Zoom the drawing inside its fixed Canva frame; leave its position untouched. */
.shop-connector-hover { scale: none !important; }
.shop-connector-hover img { transform-origin: 50% 50%; transition: scale 220ms ease; }
.shop-carousel-hover .shop-connector-hover img { scale: 1.08; }
.shop-connector-hover div { overflow: visible; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .shop-connector-hover img { transition: none; }
  .shop-carousel-hover .shop-connector-hover img { scale: none; }
}