/* Fantech extra homepage sections: dark Categories carousel + Top 3D product slider.
   Every size is multiplied by --s, which grows on large / high-resolution screens (32" 2K/4K, ultrawide). */
.ft-home .ftx { --s: 1; --ftx-bg: #202020; --ftx-red: var(--ft-red, #ed1c24); background: var(--ftx-bg); color: #fff; padding: calc(70px * var(--s)) 0 calc(60px * var(--s)); overflow: hidden; }
@media (min-width: 1800px) { .ft-home .ftx { --s: 1.3; } }
@media (min-width: 2300px) { .ft-home .ftx { --s: 1.7; } }
@media (min-width: 3000px) { .ft-home .ftx { --s: 2.1; } }
@media (min-width: 3700px) { .ft-home .ftx { --s: 2.6; } }
.ft-home .ftx + .ftx { padding-top: calc(20px * var(--s)); }
.ft-home .ftx * { box-sizing: border-box; color: inherit; }
.ft-home .ftx a, .ft-home .ftx a:visited { color: inherit; text-decoration: none; }
.ft-home .ftx-wrap { max-width: calc(1420px * var(--s)); margin: 0 auto; padding: 0 calc(55px * var(--s)); }
.ft-home .ftx-heading { position: relative; margin: 0 0 calc(40px * var(--s)); padding-bottom: calc(20px * var(--s)); font-size: calc(36px * var(--s)); font-weight: 800; letter-spacing: .5px; line-height: 1.1; text-transform: uppercase; }
.ft-home .ftx-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(62px * var(--s)); height: calc(4px * var(--s)); background: var(--ftx-red); }

/* Categories carousel */
.ft-home .ftx-track { display: flex; gap: calc(38px * var(--s)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 6px; }
.ft-home .ftx-track::-webkit-scrollbar { display: none; }
.ft-home .ftx-card { flex: 0 0 calc((100% - 4 * 38px * var(--s)) / 5); min-width: calc(220px * var(--s)); display: block; scroll-snap-align: start; }
.ft-home .ftx-card-image { display: block; aspect-ratio: 1; overflow: hidden; background: #0d0d0e; }
.ft-home .ftx-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.ft-home .ftx-card:hover .ftx-card-image img, .ft-home .ftx-card:focus-visible .ftx-card-image img { transform: scale(1.06); }
.ft-home .ftx-card-name { display: block; margin-top: calc(20px * var(--s)); font-size: calc(21px * var(--s)); font-weight: 700; letter-spacing: .3px; line-height: 1.25; text-transform: uppercase; }
.ft-home .ftx-card:hover .ftx-card-name { color: var(--ftx-red); }
.ft-home .ftx-dashes { display: flex; justify-content: center; margin-top: calc(44px * var(--s)); }
.ft-home .ftx-dashes:not([hidden]) { display: flex; }
.ft-home .ftx-dashes div { display: inline-flex; border: calc(2px * var(--s)) solid #b9b9b9; background: #ececec; }
.ft-home .ftx-dash { width: calc(74px * var(--s)); height: calc(22px * var(--s)); padding: 0; border: 0; border-right: calc(2px * var(--s)) solid #b9b9b9; background: #f4f4f4; cursor: pointer; display: grid; place-items: center; }
.ft-home .ftx-dash:last-child { border-right: 0; }
.ft-home .ftx-dash::before { content: ""; width: calc(34px * var(--s)); height: calc(4px * var(--s)); border-radius: 2px; background: var(--ftx-red); }
.ft-home .ftx-dash[aria-current="true"]::before { background: #7f8c8d; }
.ft-home .ftx-dash:focus-visible { outline: 3px solid var(--ftx-red); outline-offset: 2px; }

/* Top 3D slider. Sized from its own width (cqw): the centre slide is half the stage, the neighbours fill the rest. */
.ft-home .ftx-stage { position: relative; width: min(calc(100% - 110px * var(--s)), calc(1310px * var(--s))); margin: 0 auto; container-type: inline-size; perspective: calc(1700px * var(--s)); overflow: hidden; }
.ft-home .ftx-stage::before { content: ""; display: block; padding-top: 42%; }
.ft-home .ftx-slide { --p: 0; --w: 50cqw; position: absolute; top: 0; left: 50%; width: var(--w); height: calc(var(--w) * .81); overflow: hidden; background: linear-gradient(135deg, #26262a, #19191b); will-change: transform; backface-visibility: hidden;
  transform: translateX(calc(-50% + var(--w) * var(--p) * .8)) rotateY(calc(var(--p) * -26deg)) scale(calc(1 - var(--p) * var(--p) * .14));
  transition: transform .42s cubic-bezier(.22,.8,.3,1), opacity .25s; z-index: calc(10 - var(--p) * var(--p)); }
.ft-home .ftx-slide::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--p) * var(--p) * .55); pointer-events: none; }
.ft-home .ftx-slide[data-ftx-far] { opacity: 0; pointer-events: none; }
.ft-home .ftx-badge { position: absolute; top: 4%; left: 4.5%; width: 6.4cqw; height: 6.4cqw; color: #b8923a; z-index: 2; }
/* The photo sits in its own panel and fades into the dark card, so the (white) title never lands on a light photo background. */
.ft-home .ftx-slide-image { position: absolute; right: 0; top: 0; width: 60%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
.ft-home .ftx-slide-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ft-home .ftx-slide-copy { position: absolute; left: 5.5%; bottom: 7%; right: 57%; z-index: 2; }
.ft-home .ftx-slide-copy h3 { margin: 0 0 2.4cqw; font-size: 1.9cqw; font-weight: 800; line-height: 1.22; letter-spacing: .3px; text-transform: uppercase; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.ft-home .ftx-shop { display: inline-block; padding: .9cqw 1.9cqw; background: #f00; font-size: 1.3cqw; font-weight: 600; line-height: 1.2; transition: background .2s, transform .2s; }
.ft-home .ftx-shop:hover { background: var(--ft-red-hover, #c10b16); transform: translateY(-2px); }
.ft-home .ftx-nav { position: absolute; top: 50%; z-index: 30; transform: translateY(-50%); width: 7cqw; height: 12cqw; padding: 0; border: 0; background: none; color: #fff; font-size: 6cqw; line-height: 1; font-weight: 200; opacity: .7; cursor: pointer; text-shadow: 0 2px 10px #000; transition: opacity .2s, transform .2s; }
.ft-home .ftx-nav:hover { opacity: 1; }
.ft-home .ftx-nav--prev { left: 6cqw; }
.ft-home .ftx-nav--next { right: 6cqw; }
.ft-home .ftx-nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.ft-home .ftx-nav--next:hover { transform: translateY(-50%) translateX(3px); }
.ft-home .ftx-controls { display: flex; align-items: center; justify-content: center; margin-top: calc(26px * var(--s)); }
.ft-home .ftx-dots { display: flex; gap: calc(8px * var(--s)); flex-wrap: wrap; justify-content: center; }
.ft-home .ftx-dots button { width: calc(11px * var(--s)); height: calc(11px * var(--s)); padding: 0; border: 0; border-radius: 50%; background: #ffffff55; cursor: pointer; }
.ft-home .ftx-dots button[aria-current="true"] { background: var(--ftx-red); }
.ft-home .ftx button:focus-visible { outline: 3px solid var(--ftx-red); outline-offset: 3px; }
.ft-home .ftx-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

@media (max-width: 1100px) {
  .ft-home .ftx-wrap { padding: 0 24px; }
  .ft-home .ftx-stage { width: calc(100% - 48px); }
  .ft-home .ftx-slide { --w: 64cqw; }
  .ft-home .ftx-stage::before { padding-top: 56%; }
  .ft-home .ftx-slide-image { width: 54%; }
  .ft-home .ftx-slide-copy { right: 51%; }
  .ft-home .ftx-slide-copy h3 { font-size: 2.6cqw; }
  .ft-home .ftx-shop { font-size: 1.8cqw; }
  .ft-home .ftx-badge { width: 9cqw; height: 9cqw; }
  .ft-home .ftx-card { flex-basis: calc((100% - 2 * 28px) / 3); }
  .ft-home .ftx-track { gap: 28px; }
}
@media (max-width: 760px) {
  .ft-home .ftx { padding: 46px 0 40px; }
  .ft-home .ftx-card { flex-basis: 62%; min-width: 0; }
  .ft-home .ftx-track { gap: 18px; }
  .ft-home .ftx-stage { width: calc(100% - 32px); perspective: none; overflow: visible; container-type: normal; }
  .ft-home .ftx-stage::before { display: none; }
  .ft-home .ftx-slide { --w: 100%; position: relative; left: auto; width: 100%; height: 520px; transform: none; display: none; }
  .ft-home .ftx-slide::after { display: none; }
  .ft-home .ftx-slide.is-active { display: block; }
  .ft-home .ftx-badge { top: 14px; left: 14px; width: 64px; height: 64px; }
  .ft-home .ftx-slide-image { width: 100%; height: 56%; -webkit-mask-image: none; mask-image: none; }
  .ft-home .ftx-slide-copy { left: 22px; right: 22px; bottom: 26px; }
  .ft-home .ftx-slide-copy h3 { font-size: 20px; margin-bottom: 16px; -webkit-line-clamp: 4; }
  .ft-home .ftx-shop { padding: 12px 22px; font-size: 15px; }
  .ft-home .ftx-nav { width: 44px; height: 70px; font-size: 44px; top: 28%; }
  .ft-home .ftx-nav--prev { left: 2px; }
  .ft-home .ftx-nav--next { right: 2px; }
  .ft-home .ftx-dash { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-home .ftx-slide, .ft-home .ftx-card-image img { transition: none; }
}
.ft-home.ft-motion-paused .ftx-slide, .ft-home.ft-motion-paused .ftx-card-image img { transition: none; }

/* Top slider: smaller title that always stays inside the dark panel (the photo panel starts at 40%) */
.ft-home .ftx-slide-copy { right: 62%; }
.ft-home .ftx-slide-copy h3 { font-size: 1.35cqw; line-height: 1.28; margin-bottom: 1.6cqw; overflow-wrap: break-word; -webkit-line-clamp: 4; }
.ft-home .ftx-shop { font-size: 1.1cqw; padding: .8cqw 1.6cqw; }
@media (max-width: 1100px) {
  .ft-home .ftx-slide-copy { right: 62%; }
  .ft-home .ftx-slide-copy h3 { font-size: 1.9cqw; }
  .ft-home .ftx-shop { font-size: 1.5cqw; }
}
@media (max-width: 760px) {
  .ft-home .ftx-slide-copy { left: 22px; right: 22px; }
  .ft-home .ftx-slide-copy h3 { font-size: 16px; line-height: 1.3; margin-bottom: 14px; -webkit-line-clamp: 3; }
  .ft-home .ftx-shop { padding: 11px 20px; font-size: 14px; }
}
/* side cards show only the picture: their half-hidden titles looked broken */
.ft-home .ftx-slide .ftx-slide-copy, .ft-home .ftx-slide .ftx-badge { transition: opacity .3s ease; }
@media (min-width: 761px) { .ft-home .ftx-slide:not(.is-active) .ftx-slide-copy, .ft-home .ftx-slide:not(.is-active) .ftx-badge { opacity: 0; pointer-events: none; } }