|
1
|
|
-:root{--fct-carousel-primary: #111827;--fct-carousel-primary-light: #1f2937;--fct-carousel-secondary: #374151;--fct-carousel-border: #e5e7eb;--fct-carousel-border-subtle: #f3f4f6;--fct-carousel-border-emphasis: #d1d5db;--fct-carousel-bg: #ffffff;--fct-carousel-bg-gradient-start: #f9fafb;--fct-carousel-bg-gradient-end: #ffffff;--fct-carousel-active-color: #111827;--fct-carousel-hover-border: #111827;--fct-carousel-dot-inactive: #d1d5db;--fct-carousel-dot-hover: #9ca3af;--fct-carousel-dot-active: #111827;--fct-carousel-pagination-bg: rgba(255, 255, 255, .95);--fct-carousel-pagination-border: rgba(229, 231, 235, .5);--fct-carousel-arrow-bg-start: #ffffff;--fct-carousel-arrow-bg-end: #f9fafb;--fct-carousel-arrow-border: #e5e7eb;--fct-carousel-arrow-color: #111827;--fct-carousel-arrow-hover-bg-start: #111827;--fct-carousel-arrow-hover-bg-end: #1f2937;--fct-carousel-arrow-hover-color: #ffffff;--fct-carousel-shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--fct-carousel-shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);--fct-carousel-shadow-lg: 0 8px 20px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .08);--fct-carousel-arrow-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);--fct-carousel-border-radius: 12px;--fct-carousel-border-radius-sm: 6px;--fct-carousel-arrow-size-sm: 30px;--fct-carousel-arrow-size-md: 38px;--fct-carousel-arrow-size-lg: 46px;--fct-carousel-dot-size: 10px;--fct-carousel-dot-gap: 8px;--fct-carousel-transition-duration: .3s;--fct-carousel-transition-timing: cubic-bezier(.4, 0, .2, 1);--fct-carousel-hover-lift: -2px;--fct-carousel-hover-scale: 1.05;--fct-carousel-overlay-gradient: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, .1) 100%)}.fct-product-carousel-wrapper{width:100%;position:relative;padding:16px 0 36px}.fct-product-carousel{width:100%;position:relative;overflow:hidden;box-sizing:border-box;padding:8px 0 32px}.fct-product-carousel .swiper-wrapper{display:flex;box-sizing:border-box}.fct-product-carousel .swiper-slide{display:flex;justify-content:center;align-items:stretch;padding:4px;flex-shrink:0;height:auto;cursor:pointer;transition:transform var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing)}.fct-product-carousel .fct-product-card{width:100%;height:100%;border-radius:var(--fct-carousel-border-radius);overflow:hidden;background:var(--fct-carousel-bg);border:1px solid var(--fct-carousel-border);box-shadow:var(--fct-carousel-shadow-sm);transition:transform var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing),box-shadow var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing),border-color var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing);position:relative}.fct-product-carousel .swiper-slide:hover .fct-product-card{transform:translateY(var(--fct-carousel-hover-lift));box-shadow:var(--fct-carousel-shadow-md);border-color:var(--fct-carousel-hover-border)}.fct-product-carousel .fct-product-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--fct-carousel-overlay-gradient);opacity:0;transition:opacity var(--fct-carousel-transition-duration) ease;pointer-events:none;z-index:1}.fct-product-carousel .swiper-slide:hover .fct-product-card:before{opacity:1}.fct-product-carousel .swiper-slide-active .fct-product-card{border-color:var(--fct-carousel-active-color);border-width:2px}.fct-product-carousel img.fct-product-card-image,.fct-product-carousel .fct-product-image,.fct-product-carousel .fct-media-carousel-product-image img{width:100%;height:auto;max-width:100%;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;display:block;transition:transform .4s var(--fct-carousel-transition-timing)}.fct-product-carousel .swiper-slide:hover img.fct-product-card-image,.fct-product-carousel .swiper-slide:hover .fct-product-image,.fct-product-carousel .swiper-slide:hover .fct-media-carousel-product-image img{transform:scale(var(--fct-carousel-hover-scale))}.fct-product-carousel .swiper-button-prev,.fct-product-carousel .swiper-button-next{position:absolute;top:50%;transform:translateY(-50%);width:var(--fct-carousel-arrow-size-md);height:var(--fct-carousel-arrow-size-md);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--fct-carousel-arrow-bg-start) 0%,var(--fct-carousel-arrow-bg-end) 100%);color:var(--fct-carousel-arrow-color);border:2px solid var(--fct-carousel-arrow-border);box-shadow:var(--fct-carousel-arrow-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;transition:all var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing)}.fct-product-carousel .swiper-button-prev:after,.fct-product-carousel .swiper-button-next:after{display:none}.fct-product-carousel .swiper-button-prev:hover,.fct-product-carousel .swiper-button-next:hover{background:linear-gradient(135deg,var(--fct-carousel-arrow-hover-bg-start) 0%,var(--fct-carousel-arrow-hover-bg-end) 100%);border-color:var(--fct-carousel-arrow-hover-bg-start);color:var(--fct-carousel-arrow-hover-color);transform:translateY(-50%) scale(1.1);box-shadow:var(--fct-carousel-shadow-lg)}.fct-product-carousel .swiper-button-prev:active,.fct-product-carousel .swiper-button-next:active{transform:translateY(-50%) scale(.95)}.fct-product-carousel .swiper-button-prev svg,.fct-product-carousel .swiper-button-next svg{transition:transform .2s ease}.fct-product-carousel .swiper-button-prev:hover svg,.fct-product-carousel .swiper-button-next:hover svg{transform:scale(1.1)}.fct-product-carousel .swiper-button-prev{left:clamp(8px,2%,12px)}.fct-product-carousel .swiper-button-next{right:clamp(8px,2%,12px)}.fct-arrows-sm .swiper-button-prev,.fct-arrows-sm .swiper-button-next{width:var(--fct-carousel-arrow-size-sm);height:var(--fct-carousel-arrow-size-sm)}.fct-arrows-sm svg{width:14px;height:14px}.fct-arrows-sm .swiper-button-prev:hover,.fct-arrows-sm .swiper-button-next:hover{transform:translateY(-50%) scale(1.15)}.fct-arrows-md .swiper-button-prev,.fct-arrows-md .swiper-button-next{width:var(--fct-carousel-arrow-size-md);height:var(--fct-carousel-arrow-size-md)}.fct-arrows-md svg{width:18px;height:18px}.fct-arrows-lg .swiper-button-prev,.fct-arrows-lg .swiper-button-next{width:var(--fct-carousel-arrow-size-lg);height:var(--fct-carousel-arrow-size-lg)}.fct-arrows-lg svg{width:22px;height:22px}.fct-arrows-lg .swiper-button-prev:hover,.fct-arrows-lg .swiper-button-next:hover{transform:translateY(-50%) scale(1.08)}.fct-product-carousel .swiper-button-disabled{opacity:.35;cursor:not-allowed!important;pointer-events:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:none!important}.fct-product-carousel .swiper-pagination{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--fct-carousel-dot-gap);margin-top:24px;padding:8px 14px;background:var(--fct-carousel-pagination-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;box-shadow:var(--fct-carousel-arrow-shadow);border:1px solid var(--fct-carousel-pagination-border);width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto;pointer-events:auto}.fct-product-carousel .swiper-pagination-bullet{width:var(--fct-carousel-dot-size);height:var(--fct-carousel-dot-size);border-radius:50%;background:var(--fct-carousel-dot-inactive);opacity:1;margin:0!important;cursor:pointer;transition:all var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing);position:relative}.fct-product-carousel .swiper-pagination-bullet:hover{background:var(--fct-carousel-dot-hover);transform:scale(1.3)}.fct-product-carousel .swiper-pagination-bullet-active{background:var(--fct-carousel-dot-active);transform:scale(1.2);box-shadow:0 0 0 2px #11182733}.fct-carousel-pagination{display:flex;margin-top:16px}.fct-pagination-inside{position:absolute;bottom:12px}.fct-pagination-outside{position:relative}.fct-pagination-bottom{margin-top:20px}.fct-pagination-align-left{justify-content:flex-start}.fct-pagination-align-center{justify-content:center}.fct-pagination-align-right{justify-content:flex-end}.fct-pagination-fraction .swiper-pagination{font-size:12px;font-weight:600;color:var(--fct-carousel-primary);letter-spacing:.5px}.fct-pagination-progress .swiper-pagination{padding:0;width:180px;height:8px;background:transparent;border-radius:0;box-shadow:none;border:none}.fct-pagination-progress .swiper-pagination-progressbar{position:relative;width:100%;height:8px;background:var(--fct-carousel-border-emphasis);border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 3px #00000026}.fct-pagination-progress .swiper-pagination-progressbar-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--fct-carousel-primary) 0%,var(--fct-carousel-primary-light) 100%);border-radius:8px;transition:width var(--fct-carousel-transition-duration) cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px #11182780;overflow:hidden}.fct-pagination-progress .swiper-pagination-progressbar-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:progressShimmer 2s ease-in-out infinite}@keyframes progressShimmer{0%{left:-100%}to{left:200%}}.fct-pagination-segmented .swiper-pagination{padding:10px 16px;min-width:150px;max-width:90%;display:flex;gap:6px;align-items:center;background:var(--fct-carousel-pagination-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;box-shadow:0 4px 12px #0000001a,0 2px 4px #0000000f;border:1px solid var(--fct-carousel-pagination-border)}.fct-pagination-segmented .swiper-pagination-segment{flex:1;height:4px;background:var(--fct-carousel-border-emphasis);border-radius:8px;position:relative;overflow:hidden;min-width:40px;max-width:80px;transition:all .3s cubic-bezier(.4,0,.2,1)}.fct-pagination-segmented .swiper-pagination-segment.is-active{background:linear-gradient(90deg,var(--fct-carousel-primary) 0%,var(--fct-carousel-primary-light) 50%,var(--fct-carousel-primary) 100%);background-size:200% 100%;animation:segmentShimmer 2s ease-in-out infinite}.fct-pagination-segmented .swiper-pagination-segment.is-active:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:segmentGloss 2s ease-in-out infinite}.fct-pagination-segmented .swiper-pagination-segment.is-completed{background:var(--fct-carousel-primary);box-shadow:0 0 6px #11182733}.fct-pagination-segmented .swiper-pagination-segment:hover{transform:scaleY(1.3);cursor:pointer}.fct-pagination-segmented .segment-counter{margin-left:8px;font-size:11px;font-weight:600;color:var(--fct-carousel-secondary);white-space:nowrap;letter-spacing:.3px}@keyframes segmentShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes segmentGloss{0%{transform:translate(-100%)}to{transform:translate(100%)}}.fct-hover-zone{position:absolute;top:0;width:50%;height:100%;z-index:10}.fct-hover-left{left:0;cursor:w-resize}.fct-hover-right{right:0;cursor:e-resize}.fct-product-carousel[data-slides-per-view]:not([data-slides-per-view="1"]) .fct-hover-zone{display:none}@media (max-width: 768px){.fct-product-carousel .swiper-button-prev,.fct-product-carousel .swiper-button-next{width:32px;height:32px}.fct-product-carousel .swiper-button-prev svg,.fct-product-carousel .swiper-button-next svg{width:14px;height:14px}.fct-product-carousel .swiper-pagination{padding:6px 10px}}@media (max-width: 480px){:root{--fct-carousel-dot-size: 8px;--fct-carousel-dot-gap: 6px}.fct-product-carousel .swiper-button-prev,.fct-product-carousel .swiper-button-next{width:28px;height:28px}} |
|
1
|
+:root{--fct-carousel-primary: var(--fct-btn-bg-color, #111827);--fct-carousel-primary-light: var(--fct-btn-hover-bg-color, var(--fct-btn-bg-color, #1f2937));--fct-carousel-text: var(--fct-primary-text-color, #111827);--fct-carousel-secondary: var(--fct-secondary-text-color, #374151);--fct-carousel-border: var(--fct-border-color, #e5e7eb);--fct-carousel-border-subtle: #f3f4f6;--fct-carousel-border-emphasis: var(--fct-divider-color, #d1d5db);--fct-carousel-bg: var(--fct-card-bg-color, #ffffff);--fct-carousel-bg-gradient-start: #f9fafb;--fct-carousel-bg-gradient-end: #ffffff;--fct-carousel-active-color: var(--fct-active-border-color, #111827);--fct-carousel-hover-border: var(--fct-active-border-color, #111827);--fct-carousel-dot-inactive: var(--fct-border-color, #d1d5db);--fct-carousel-dot-hover: var(--fct-secondary-text-color, #9ca3af);--fct-carousel-dot-active: var(--fct-btn-bg-color, #111827);--fct-carousel-pagination-bg: var(--fct-card-bg-color, rgba(255, 255, 255, .95));--fct-carousel-pagination-border: var(--fct-border-color, rgba(229, 231, 235, .5));--fct-carousel-arrow-bg-start: var(--fct-card-bg-color, #ffffff);--fct-carousel-arrow-bg-end: var(--fct-card-bg-color, #f9fafb);--fct-carousel-arrow-border: var(--fct-border-color, #e5e7eb);--fct-carousel-arrow-color: var(--fct-secondary-text-color, #111827);--fct-carousel-arrow-hover-bg-start: var(--fct-btn-hover-bg-color, var(--fct-btn-bg-color, #111827));--fct-carousel-arrow-hover-bg-end: var(--fct-btn-hover-bg-color, var(--fct-btn-bg-color, #1f2937));--fct-carousel-arrow-hover-color: var(--fct-btn-hover-text-color, var(--fct-btn-text-color, #ffffff));--fct-carousel-shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--fct-carousel-shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);--fct-carousel-shadow-lg: 0 8px 20px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .08);--fct-carousel-arrow-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);--fct-carousel-border-radius: var(--fct-container-radius, 12px);--fct-carousel-border-radius-sm: 6px;--fct-carousel-arrow-size-sm: 30px;--fct-carousel-arrow-size-md: 38px;--fct-carousel-arrow-size-lg: 46px;--fct-carousel-dot-size: 10px;--fct-carousel-dot-gap: 8px;--fct-carousel-transition-duration: .3s;--fct-carousel-transition-timing: cubic-bezier(.4, 0, .2, 1);--fct-carousel-hover-lift: -2px;--fct-carousel-hover-scale: 1.05;--fct-carousel-overlay-gradient: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, .1) 100%)}.fct-product-carousel-wrapper{width:100%;position:relative;padding:16px 0 36px}.fct-product-carousel{width:100%;position:relative;overflow:hidden;box-sizing:border-box;padding:8px 0 32px;--swiper-theme-color: var(--fct-btn-bg-color, #007aff)}.fct-product-carousel .swiper-wrapper{display:flex;box-sizing:border-box}.fct-product-carousel .swiper-slide{display:flex;justify-content:center;align-items:stretch;padding:4px;flex-shrink:0;height:auto;cursor:pointer;transition:transform var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing)}.fct-product-carousel .fct-product-card{width:100%;height:100%;border-radius:var(--fct-carousel-border-radius);overflow:hidden;background:var(--fct-carousel-bg);border:1px solid var(--fct-carousel-border);box-shadow:var(--fct-carousel-shadow-sm);transition:transform var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing),box-shadow var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing),border-color var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing);position:relative}.fct-product-carousel .swiper-slide:hover .fct-product-card{transform:translateY(var(--fct-carousel-hover-lift));box-shadow:var(--fct-carousel-shadow-md);border-color:var(--fct-carousel-hover-border)}.fct-product-carousel .fct-product-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--fct-carousel-overlay-gradient);opacity:0;transition:opacity var(--fct-carousel-transition-duration) ease;pointer-events:none;z-index:1}.fct-product-carousel .swiper-slide:hover .fct-product-card:before{opacity:1}.fct-product-carousel .swiper-slide-active .fct-product-card{border-color:var(--fct-carousel-active-color);border-width:2px}.fct-product-carousel img.fct-product-card-image,.fct-product-carousel .fct-product-image,.fct-product-carousel .fct-media-carousel-product-image img{width:100%;height:auto;max-width:100%;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;display:block;transition:transform .4s var(--fct-carousel-transition-timing)}.fct-product-carousel .swiper-slide:hover img.fct-product-card-image,.fct-product-carousel .swiper-slide:hover .fct-product-image,.fct-product-carousel .swiper-slide:hover .fct-media-carousel-product-image img{transform:scale(var(--fct-carousel-hover-scale))}.fct-product-carousel .swiper-button-prev,.fct-product-carousel .swiper-button-next{position:absolute;top:50%;transform:translateY(-50%);width:var(--fct-carousel-arrow-size-md);height:var(--fct-carousel-arrow-size-md);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--fct-carousel-arrow-bg-start) 0%,var(--fct-carousel-arrow-bg-end) 100%);color:var(--fct-carousel-arrow-color);border:2px solid var(--fct-carousel-arrow-border);box-shadow:var(--fct-carousel-arrow-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;transition:all var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing)}.fct-product-carousel .swiper-button-prev:after,.fct-product-carousel .swiper-button-next:after{display:none}.fct-product-carousel .swiper-button-prev:hover,.fct-product-carousel .swiper-button-next:hover{background:linear-gradient(135deg,var(--fct-carousel-arrow-hover-bg-start) 0%,var(--fct-carousel-arrow-hover-bg-end) 100%);border-color:var(--fct-carousel-arrow-hover-bg-start);color:var(--fct-carousel-arrow-hover-color);transform:translateY(-50%) scale(1.1);box-shadow:var(--fct-carousel-shadow-lg)}.fct-product-carousel .swiper-button-prev:active,.fct-product-carousel .swiper-button-next:active{transform:translateY(-50%) scale(.95)}.fct-product-carousel .swiper-button-prev svg,.fct-product-carousel .swiper-button-next svg{transition:transform .2s ease}.fct-product-carousel .swiper-button-prev:hover svg,.fct-product-carousel .swiper-button-next:hover svg{transform:scale(1.1)}.fct-product-carousel .swiper-button-prev{left:clamp(8px,2%,12px)}.fct-product-carousel .swiper-button-next{right:clamp(8px,2%,12px)}.fct-arrows-sm .swiper-button-prev,.fct-arrows-sm .swiper-button-next{width:var(--fct-carousel-arrow-size-sm);height:var(--fct-carousel-arrow-size-sm)}.fct-arrows-sm svg{width:14px;height:14px}.fct-arrows-sm .swiper-button-prev:hover,.fct-arrows-sm .swiper-button-next:hover{transform:translateY(-50%) scale(1.15)}.fct-arrows-md .swiper-button-prev,.fct-arrows-md .swiper-button-next{width:var(--fct-carousel-arrow-size-md);height:var(--fct-carousel-arrow-size-md)}.fct-arrows-md svg{width:18px;height:18px}.fct-arrows-lg .swiper-button-prev,.fct-arrows-lg .swiper-button-next{width:var(--fct-carousel-arrow-size-lg);height:var(--fct-carousel-arrow-size-lg)}.fct-arrows-lg svg{width:22px;height:22px}.fct-arrows-lg .swiper-button-prev:hover,.fct-arrows-lg .swiper-button-next:hover{transform:translateY(-50%) scale(1.08)}.fct-product-carousel .swiper-button-disabled{opacity:.35;cursor:not-allowed!important;pointer-events:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:none!important}.fct-product-carousel .swiper-pagination{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--fct-carousel-dot-gap);margin-top:24px;padding:8px 14px;background:var(--fct-carousel-pagination-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;box-shadow:var(--fct-carousel-arrow-shadow);border:1px solid var(--fct-carousel-pagination-border);width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto;pointer-events:auto}.fct-product-carousel .swiper-pagination-bullet{width:var(--fct-carousel-dot-size);height:var(--fct-carousel-dot-size);border-radius:50%;background:var(--fct-carousel-dot-inactive);opacity:1;margin:0!important;cursor:pointer;transition:all var(--fct-carousel-transition-duration) var(--fct-carousel-transition-timing);position:relative}.fct-product-carousel .swiper-pagination-bullet:hover{background:var(--fct-carousel-dot-hover);transform:scale(1.3)}.fct-product-carousel .swiper-pagination-bullet-active{background:var(--fct-carousel-dot-active);transform:scale(1.2);box-shadow:0 0 0 2px color-mix(in srgb,var(--fct-carousel-dot-active) 20%,transparent)}.fct-carousel-pagination{display:flex;margin-top:16px}.fct-pagination-inside{position:absolute;bottom:12px}.fct-pagination-outside{position:relative}.fct-pagination-bottom{margin-top:20px}.fct-pagination-align-left{justify-content:flex-start}.fct-pagination-align-center{justify-content:center}.fct-pagination-align-right{justify-content:flex-end}.fct-pagination-fraction .swiper-pagination{font-size:12px;font-weight:600;color:var(--fct-carousel-text);letter-spacing:.5px}.fct-pagination-progress .swiper-pagination{padding:0;width:180px;height:8px;background:transparent;border-radius:0;box-shadow:none;border:none}.fct-pagination-progress .swiper-pagination-progressbar{position:relative;width:100%;height:8px;background:var(--fct-carousel-border-emphasis);border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 3px #00000026}.fct-pagination-progress .swiper-pagination-progressbar-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--fct-carousel-primary) 0%,var(--fct-carousel-primary-light) 100%);border-radius:8px;transition:width var(--fct-carousel-transition-duration) cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px color-mix(in srgb,var(--fct-carousel-primary) 50%,transparent);overflow:hidden}.fct-pagination-progress .swiper-pagination-progressbar-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:progressShimmer 2s ease-in-out infinite}@keyframes progressShimmer{0%{left:-100%}to{left:200%}}.fct-pagination-segmented .swiper-pagination{padding:10px 16px;min-width:150px;max-width:90%;display:flex;gap:6px;align-items:center;background:var(--fct-carousel-pagination-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;box-shadow:0 4px 12px #0000001a,0 2px 4px #0000000f;border:1px solid var(--fct-carousel-pagination-border)}.fct-pagination-segmented .swiper-pagination-segment{flex:1;height:4px;background:var(--fct-carousel-border-emphasis);border-radius:8px;position:relative;overflow:hidden;min-width:40px;max-width:80px;transition:all .3s cubic-bezier(.4,0,.2,1)}.fct-pagination-segmented .swiper-pagination-segment.is-active{background:linear-gradient(90deg,var(--fct-carousel-primary) 0%,var(--fct-carousel-primary-light) 50%,var(--fct-carousel-primary) 100%);background-size:200% 100%;animation:segmentShimmer 2s ease-in-out infinite}.fct-pagination-segmented .swiper-pagination-segment.is-active:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:segmentGloss 2s ease-in-out infinite}.fct-pagination-segmented .swiper-pagination-segment.is-completed{background:var(--fct-carousel-primary);box-shadow:0 0 6px color-mix(in srgb,var(--fct-carousel-primary) 20%,transparent)}.fct-pagination-segmented .swiper-pagination-segment:hover{transform:scaleY(1.3);cursor:pointer}.fct-pagination-segmented .segment-counter{margin-left:8px;font-size:11px;font-weight:600;color:var(--fct-carousel-secondary);white-space:nowrap;letter-spacing:.3px}@keyframes segmentShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes segmentGloss{0%{transform:translate(-100%)}to{transform:translate(100%)}}.fct-hover-zone{position:absolute;top:0;width:50%;height:100%;z-index:10}.fct-hover-left{left:0;cursor:w-resize}.fct-hover-right{right:0;cursor:e-resize}.fct-product-carousel[data-slides-per-view]:not([data-slides-per-view="1"]) .fct-hover-zone{display:none}@media (max-width: 768px){.fct-product-carousel .swiper-button-prev,.fct-product-carousel .swiper-button-next{width:32px;height:32px}.fct-product-carousel .swiper-button-prev svg,.fct-product-carousel .swiper-button-next svg{width:14px;height:14px}.fct-product-carousel .swiper-pagination{padding:6px 10px}}@media (max-width: 480px){:root{--fct-carousel-dot-size: 8px;--fct-carousel-dot-gap: 6px}.fct-product-carousel .swiper-button-prev,.fct-product-carousel .swiper-button-next{width:28px;height:28px}} |
