/**
 * TOPSHOP 顶部幻灯片样式
 *
 * CSS 变量（由 PHP inline style 注入）：
 *   --slider-height : 容器高度
 *   --slider-speed  : 过渡时长
 *   --slider-w      : 容器宽度（由 JS 注入，用于 flip 的 translateZ）
 *   --topshop-primary / --topshop-radius : 主题级变量
 *
 * 8 种效果：fade / slide / cube / flip / wheel / morph / zoom / parallax
 *
 * 效果亮点（每种效果使用完全不同的 CSS 技术，杜绝雷同）：
 *   - fade：光影溶解（clip-path 圆形扩散揭示）
 *   - slide：3D 流转（Swiper Coverflow 风格 rotateY+translateX+scale）
 *   - cube：3D 魔方滚筒翻转（精确复刻 jQuery.slicebox，不改动）
 *   - flip：3D 翻书（边缘锚点 transform-origin+box-shadow 翻页阴影）
 *   - wheel：3D 滚筒（rotateX+translateZ+motion blur 垂直滚筒）
 *   - morph：液态溶解（SVG feTurbulence+feDisplacementMap 像素级液态扭曲，JS RAF 动画）
 *   - zoom：超光速穿梭（极端 scale 0.1→3+重模糊 20-24px）
 *   - parallax：深度视差（背景/内容 3:1 差速+强模糊+方向感知）
 */

/* ============ 基础布局 ============ */

.topshop-slider {
    position: relative;
    width: 100%;
    height: var(--slider-height, 500px);
    overflow: hidden;
    background: #111;
    --slider-speed: 800ms;
    --slider-w: 1200px;
}

.topshop-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.topshop-slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--slider-speed) ease;
    backface-visibility: hidden;
}

.topshop-slider-slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* ============ 背景层 ============ */

.topshop-slider-bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #222;
}

.topshop-slider-bg--pending {
    background: linear-gradient(110deg, #1a1a1a 8%, #2a2a2a 18%, #1a1a1a 33%);
    background-size: 200% 100%;
    animation: topshop-slider-shimmer 1.5s linear infinite;
}

@keyframes topshop-slider-shimmer {
    to { background-position: -200% 0; }
}

.topshop-slider-bg--loaded {
    animation: topshop-slider-bg-fade-in 0.6s ease forwards;
}

@keyframes topshop-slider-bg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Ken Burns 效果 */
.topshop-slider-slide.is-active .topshop-slider-bg {
    animation: topshop-slider-kenburns 8s ease-out forwards;
}

@keyframes topshop-slider-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* ============ 遮罩 ============ */

.topshop-slider-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
}

/* ============ 内容容器 ============ */

.topshop-slider-content {
    position: relative;
    z-index: 3;
    height: 100%;
    max-width: var(--topshop-container, 1200px);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.topshop-slider-content--left   { align-items: flex-start; text-align: left; }
.topshop-slider-content--center { align-items: center;     text-align: center; }
.topshop-slider-content--right  { align-items: flex-end;   text-align: right; }

.topshop-slider-title {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.topshop-slider-subtitle {
    margin: 0 0 24px;
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.5;
    max-width: 640px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.topshop-slider-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--topshop-radius, 6px);
    border: 2px solid var(--topshop-primary, #0057A0);
    background: var(--topshop-primary, #0057A0);
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.topshop-slider-btn:hover,
.topshop-slider-btn:focus {
    transform: translateY(-2px);
    opacity: 0.92;
    color: #fff;
}

/* 内容阶梯式 3D 立体入场（模糊+缩放+位移，电影感） */
.topshop-slider-content--animated .topshop-slider-title,
.topshop-slider-content--animated .topshop-slider-subtitle,
.topshop-slider-content--animated .topshop-slider-btn {
    opacity: 0;
    animation: topshop-slider-content-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.topshop-slider-content--animated .topshop-slider-title    { animation-delay: 0.2s; }
.topshop-slider-content--animated .topshop-slider-subtitle { animation-delay: 0.4s; }
.topshop-slider-content--animated .topshop-slider-btn      { animation-delay: 0.6s; }

@keyframes topshop-slider-content-in {
    from { opacity: 0; transform: translateY(35px) scale(0.94); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ============ 导航按钮 ============ */

.topshop-slider-prev,
.topshop-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.topshop-slider-prev:hover,
.topshop-slider-next:hover,
.topshop-slider-prev:focus,
.topshop-slider-next:focus {
    background: rgba(0, 0, 0, 0.6);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.topshop-slider-prev { left: 16px; }
.topshop-slider-next { right: 16px; }

/* ============ 分页圆点 ============ */

.topshop-slider-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
}

.topshop-slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.topshop-slider-dot:hover { background: rgba(255, 255, 255, 0.85); }

.topshop-slider-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

/* ============ fade 效果（光影溶解 — clip-path 圆形扩散） ============ */
/* 新 slide 从中心向外圆形扩散揭示，旧 slide 在下层逐渐溶解
 * 与 zoom/morph 的缩放类效果完全不同的视觉语言：遮罩揭示 */

.topshop-slider--fade .topshop-slider-slide {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    transition: opacity var(--slider-speed) ease,
                clip-path var(--slider-speed) cubic-bezier(0.4, 0, 0.2, 1),
                filter var(--slider-speed) ease;
    filter: brightness(0.6);
}

.topshop-slider--fade .topshop-slider-slide.is-active {
    opacity: 1;
    clip-path: circle(150% at 50% 50%);
    filter: brightness(1);
    z-index: 3;
}

.topshop-slider--fade .topshop-slider-slide.is-leaving {
    opacity: 0;
    clip-path: circle(150% at 50% 50%);
    filter: brightness(0.3) blur(6px);
    z-index: 2;
    transition: opacity calc(var(--slider-speed) * 0.7) ease,
                filter var(--slider-speed) ease;
}

/* ============ slide 效果（3D 流转 — Swiper Coverflow 风格） ============ */
/* 新 slide 从右侧带 rotateY 倾斜推入，旧 slide 向左倾斜推出
 * 配合 translateX + scale 营造 3D 流转纵深感，方向感知由 data-direction 控制 */

.topshop-slider--slide {
    perspective: 1400px;
}

/* 默认（正向）：新 slide 从右侧待入，倾斜 -40° */
.topshop-slider--slide .topshop-slider-slide {
    opacity: 0;
    transform: translateX(80%) rotateY(-40deg) scale(0.85);
    transform-origin: left center;
    transition: transform 0s, opacity 0s, filter 0s;
    backface-visibility: hidden;
    filter: brightness(0.5) saturate(0.7);
}

.topshop-slider--slide .topshop-slider-slide.is-active {
    opacity: 1;
    transform: translateX(0) rotateY(0deg) scale(1);
    filter: brightness(1) saturate(1);
    z-index: 3;
    transition: transform var(--slider-speed) cubic-bezier(0.7, 0, 0.3, 1),
                opacity var(--slider-speed) ease,
                filter var(--slider-speed) ease;
    will-change: transform;
}

.topshop-slider--slide .topshop-slider-slide.is-leaving {
    opacity: 0;
    transform: translateX(-80%) rotateY(40deg) scale(0.85);
    transform-origin: right center;
    filter: brightness(0.4) saturate(0.6);
    z-index: 2;
    transition: transform var(--slider-speed) cubic-bezier(0.7, 0, 0.3, 1),
                opacity calc(var(--slider-speed) * 0.5) ease calc(var(--slider-speed) * 0.5),
                filter var(--slider-speed) ease;
    will-change: transform;
}

/* 反向（prev）：新 slide 从左侧待入，倾斜 +40° */
.topshop-slider--slide[data-direction="backward"] .topshop-slider-slide {
    transform: translateX(-80%) rotateY(40deg) scale(0.85);
    transform-origin: right center;
}

.topshop-slider--slide[data-direction="backward"] .topshop-slider-slide.is-active {
    transform: translateX(0) rotateY(0deg) scale(1);
    transform-origin: right center;
}

.topshop-slider--slide[data-direction="backward"] .topshop-slider-slide.is-leaving {
    transform: translateX(80%) rotateY(-40deg) scale(0.85);
    transform-origin: left center;
}

/* ============ cube 效果（3D 魔方滚筒翻转，精确复刻 jQuery.slicebox） ============ */
/* 垂直切割成竖条，每条是完整立方体（深度=高度），绕后轴向前翻 90°
 * 下一张图贴在顶面，翻转后顶面转到正面露出下一张图
 * --slider-cube-h 由 JS 注入（= 容器高度），用于所有 translateZ 计算
 */

.topshop-slider--cube {
    perspective: 1200px;
}

/* 魔方翻转网格容器（JS 动态创建/移除）
 * 不可设 overflow:hidden，否则强制 transform-style 为 flat，破坏 3D
 */
.topshop-slider-rubik {
    position: absolute;
    inset: 0;
    z-index: 50;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* 单个立方体条（竖条）
 * 初始变换 translateZ(-h/2)：将立方体后推，使前面在 z=0，旋转轴在后部
 * 翻转变换 rotateX(-90deg)：绕后轴向前翻 90°，顶面（下一张图）转到正面
 * 这是 slicebox 的滚筒效果——立方体绕后轴滚动，而非绕中心翻转
 */
.topshop-slider-rubik-tile {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform var(--slider-cube-speed, 600ms) ease;
    transform: translateZ(calc(var(--slider-cube-h, 500px) / -2));
    will-change: transform;
}

.topshop-slider-rubik--flipping .topshop-slider-rubik-tile {
    transform: translateZ(calc(var(--slider-cube-h, 500px) / -2)) rotateX(-90deg);
}

/* 立方体面通用：每个面都是 width × height（与正面同尺寸）
 * backface-visibility:hidden 保证只看到朝向观众的面
 */
.topshop-slider-rubik-face {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* front 面：当前图，立方体前方 h/2 处 */
.topshop-slider-rubik-front {
    transform: translateZ(calc(var(--slider-cube-h, 500px) / 2));
}

/* top 面：下一张图，立方体上方 h/2 处
 * 翻转 -90° 后转到正面，露出下一张图 */
.topshop-slider-rubik-top {
    transform: rotateX(90deg) translateZ(calc(var(--slider-cube-h, 500px) / 2));
}

/* back 面：下一张图，立方体后方 h/2 处（翻转时不可见） */
.topshop-slider-rubik-back {
    transform: rotateX(180deg) translateZ(calc(var(--slider-cube-h, 500px) / 2));
}

/* bottom 面：当前图，立方体下方 h/2 处（翻转时不可见） */
.topshop-slider-rubik-bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--slider-cube-h, 500px) / 2));
}

/* cube 模式下 slide 无特殊样式，靠网格覆盖实现翻转 */
.topshop-slider--cube .topshop-slider-slide {
    transition: opacity var(--slider-speed) ease;
}

/* ============ flip 效果（3D 翻书 — 边缘锚点翻页） ============ */
/* 旧 slide 从左边缘翻出（0° → -90°），新 slide 从右边缘翻入（90° → 0°）
 * transform-origin 在边缘而非中心，形成真正的书页翻转效果
 * 翻转时叠加 box-shadow 模拟书页阴影，强透视 1800px */

.topshop-slider--flip {
    perspective: 1800px;
}

.topshop-slider--flip .topshop-slider-slide {
    opacity: 0;
    transform: rotateY(90deg);
    transform-origin: right center;
    transition: transform 0s, opacity 0s, filter 0s, box-shadow 0s;
    backface-visibility: hidden;
    filter: brightness(0.4) saturate(0.6);
    box-shadow: -30px 0 40px rgba(0, 0, 0, 0.3);
}

.topshop-slider--flip .topshop-slider-slide.is-active {
    opacity: 1;
    transform: rotateY(0deg);
    transform-origin: right center;
    z-index: 3;
    filter: brightness(1) saturate(1);
    box-shadow: none;
    transition: transform var(--slider-speed) cubic-bezier(0.83, 0, 0.17, 1),
                opacity var(--slider-speed) ease,
                filter var(--slider-speed) ease,
                box-shadow var(--slider-speed) ease;
    will-change: transform;
}

.topshop-slider--flip .topshop-slider-slide.is-leaving {
    opacity: 1;
    transform: rotateY(-90deg);
    transform-origin: left center;
    z-index: 2;
    filter: brightness(0.5) saturate(0.5);
    box-shadow: 30px 0 40px rgba(0, 0, 0, 0.3);
    transition: transform var(--slider-speed) cubic-bezier(0.83, 0, 0.17, 1),
                opacity calc(var(--slider-speed) * 0.3) ease calc(var(--slider-speed) * 0.7),
                filter var(--slider-speed) ease,
                box-shadow var(--slider-speed) ease;
    will-change: transform;
}

/* ============ wheel 效果（3D 滚筒 — 垂直旋转+运动模糊） ============ */
/* slide 绕水平轴旋转，从底部滚入/向顶部滚出
 * 旋转过程叠加 motion blur，模拟高速滚筒的视觉残影
 * translateZ 形成圆柱体深度，ease-out-expo 急停缓动 */

.topshop-slider--wheel {
    perspective: 1000px;
}

.topshop-slider--wheel .topshop-slider-slide {
    opacity: 0;
    transform: translateY(100%) rotateX(90deg) translateZ(calc(var(--slider-height, 500px) / 2));
    transform-origin: center bottom;
    transition: transform 0s, opacity 0s, filter 0s;
    backface-visibility: hidden;
    filter: brightness(0.2) blur(6px);
}

.topshop-slider--wheel .topshop-slider-slide.is-active {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) translateZ(calc(var(--slider-height, 500px) / 2));
    z-index: 3;
    filter: brightness(1) blur(0);
    transition: transform var(--slider-speed) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--slider-speed) ease,
                filter var(--slider-speed) ease;
    will-change: transform;
}

.topshop-slider--wheel .topshop-slider-slide.is-leaving {
    opacity: 0;
    transform: translateY(-100%) rotateX(-90deg) translateZ(calc(var(--slider-height, 500px) / 2));
    transform-origin: center top;
    z-index: 2;
    filter: brightness(0.15) blur(6px);
    transition: transform var(--slider-speed) cubic-bezier(0.16, 1, 0.3, 1),
                opacity calc(var(--slider-speed) * 0.4) ease calc(var(--slider-speed) * 0.6),
                filter var(--slider-speed) ease;
    will-change: transform;
}

/* ============ morph 效果（液态溶解 — SVG 像素级液态扭曲） ============ */
/* 切换由 JS morphTo() 驱动：
 *   - SVG feTurbulence 生成 Perlin 噪声纹理
 *   - feDisplacementMap 按噪声对像素位移，形成液态扭曲
 *   - feGaussianBlur 叠加涂抹感
 *   - requestAnimationFrame 钟形曲线动画 scale/frequency/blur
 *   - 同时交叉溶解旧/新 slide 透明度
 * CSS 仅提供基础状态（非 active 的 slide 透明度为 0），
 * 实际滤镜与透明度由 JS inline style 控制，避免与 CSS transition 冲突。
 */

.topshop-slider--morph .topshop-slider-slide {
    opacity: 0;
    /* 无 CSS transition：滤镜参数由 JS 逐帧更新，CSS transition 会与之冲突 */
    transition: none;
}

.topshop-slider--morph .topshop-slider-slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* ============ zoom 效果（超光速穿梭 — 极端缩放+重模糊） ============ */
/* 新 slide 从极小处（scale 0.1）伴随重模糊高速放大进入
 * 旧 slide 放大至 scale 3+ 模糊消散，模拟穿越光速的视觉
 * 与 morph(旋转+圆角) 完全不同：纯轴向缩放 + 亮度闪变 */

.topshop-slider--zoom {
    perspective: 1200px;
}

.topshop-slider--zoom .topshop-slider-slide {
    opacity: 0;
    transform: scale(0.1);
    filter: brightness(0.3) blur(20px) saturate(0.5);
    transition: transform var(--slider-speed) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--slider-speed) ease,
                filter var(--slider-speed) ease;
}

.topshop-slider--zoom .topshop-slider-slide.is-active {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0) saturate(1);
    z-index: 2;
}

.topshop-slider--zoom .topshop-slider-slide.is-leaving {
    opacity: 0;
    transform: scale(3);
    filter: brightness(0.1) blur(24px) saturate(0.3);
    z-index: 1;
}

/* ============ parallax 效果（深度视差 — 多层强差速移动） ============ */
/* 背景与内容以显著不同速度位移 + 模糊，形成强烈层次视差
 * 背景层：translateX 30% + scale 1.35（慢速）+ 入场轻微模糊
 * 内容层：translateX 100%（快速），与背景形成 3:1 差速比
 * 方向感知由 data-direction 控制 */

.topshop-slider--parallax .topshop-slider-slide {
    opacity: 0;
    transition: opacity var(--slider-speed) ease;
}

.topshop-slider--parallax .topshop-slider-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.topshop-slider--parallax .topshop-slider-slide.is-leaving {
    opacity: 0;
    z-index: 1;
}

/* 背景层：正向默认从右侧待入，大 scale 放大确保不留白 */
.topshop-slider--parallax .topshop-slider-bg {
    transition: transform var(--slider-speed) cubic-bezier(0.16, 1, 0.3, 1),
                filter var(--slider-speed) ease;
    transform: scale(1.35) translateX(30%);
    filter: blur(3px);
}

.topshop-slider--parallax .topshop-slider-slide.is-active .topshop-slider-bg {
    transform: scale(1.18) translateX(0);
    filter: blur(0);
}

.topshop-slider--parallax .topshop-slider-slide.is-leaving .topshop-slider-bg {
    transform: scale(1.5) translateX(-35%);
    filter: blur(14px);
}

/* 内容层：差速比 3:1（100% vs 30%），正向从右待入 */
.topshop-slider--parallax .topshop-slider-content {
    transition: transform var(--slider-speed) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--slider-speed) ease;
    transform: translateX(100%);
    opacity: 0;
}

.topshop-slider--parallax .topshop-slider-slide.is-active .topshop-slider-content {
    transform: translateX(0);
    opacity: 1;
}

.topshop-slider--parallax .topshop-slider-slide.is-leaving .topshop-slider-content {
    transform: translateX(-100%);
    opacity: 0;
}

/* 反向（prev）：背景和内容从左侧待入 */
.topshop-slider--parallax[data-direction="backward"] .topshop-slider-bg {
    transform: scale(1.35) translateX(-30%);
}

.topshop-slider--parallax[data-direction="backward"] .topshop-slider-slide.is-active .topshop-slider-bg {
    transform: scale(1.18) translateX(0);
}

.topshop-slider--parallax[data-direction="backward"] .topshop-slider-slide.is-leaving .topshop-slider-bg {
    transform: scale(1.5) translateX(35%);
}

.topshop-slider--parallax[data-direction="backward"] .topshop-slider-content {
    transform: translateX(-100%);
}

.topshop-slider--parallax[data-direction="backward"] .topshop-slider-slide.is-active .topshop-slider-content {
    transform: translateX(0);
}

.topshop-slider--parallax[data-direction="backward"] .topshop-slider-slide.is-leaving .topshop-slider-content {
    transform: translateX(100%);
}

/* parallax 模式下关闭 Ken Burns（bg 已有自定义 transform） */
.topshop-slider--parallax .topshop-slider-slide.is-active .topshop-slider-bg {
    animation: none;
}

/* ============ 响应式 ============ */

@media (max-width: 768px) {
    .topshop-slider {
        height: calc(var(--slider-height, 500px) * 0.7);
        min-height: 260px;
    }

    .topshop-slider-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    .topshop-slider-subtitle {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        margin-bottom: 16px;
    }

    .topshop-slider-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .topshop-slider-prev,
    .topshop-slider-next {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .topshop-slider-prev { left: 8px; }
    .topshop-slider-next { right: 8px; }

    .topshop-slider-content {
        padding: 0 16px;
    }

    .topshop-slider-dots {
        bottom: 10px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .topshop-slider-subtitle { display: none; }
    .topshop-slider-dots { padding: 4px 8px; }
    .topshop-slider-dot { width: 8px; height: 8px; }
}

/* ============ 无障碍 / 减少动画偏好 ============ */

@media (prefers-reduced-motion: reduce) {
    .topshop-slider-slide,
    .topshop-slider-track,
    .topshop-slider-bg,
    .topshop-slider-content,
    .topshop-slider--fade .topshop-slider-slide,
    .topshop-slider--slide .topshop-slider-slide,
    .topshop-slider--morph .topshop-slider-slide,
    .topshop-slider--zoom .topshop-slider-slide,
    .topshop-slider--parallax .topshop-slider-slide,
    .topshop-slider--parallax .topshop-slider-bg,
    .topshop-slider--parallax .topshop-slider-content,
    .topshop-slider--cube .topshop-slider-slide,
    .topshop-slider--flip .topshop-slider-slide,
    .topshop-slider--wheel .topshop-slider-slide {
        transition: opacity 0.001s ease !important;
        transform: none !important;
        animation: none !important;
        filter: none !important;
        clip-path: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

.topshop-slider:focus {
    outline: 2px solid var(--topshop-primary, #0057A0);
    outline-offset: -2px;
}