/* ================================================================
   1. CONTINUOUS MARQUEE — NOW DRAG/SWIPE-ABLE VIA JS
   ================================================================
   NOTE: animation-name / animation-delay are intentionally NOT
   using the `animation` shorthand and are NOT !important. The JS
   needs to be able to switch the animation off (inline style) while
   the user is dragging, and hand it back afterwards from the exact
   spot the user left it via the --tekno-delay custom property.
   ================================================================ */

.tkt-fm--carousel .tkt-fm__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.tkt-fm--carousel .tkt-fm__viewport.is-dragging {
  cursor: grabbing;
}

/* Continuous marquee track */
.tkt-fm--carousel .tekno-featured-track {
  --tekno-gap: 16px;
  --tekno-delay: 0s;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tekno-gap);
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  animation-name: tekno-marquee;
  animation-duration: var(--tekno-speed, 25s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--tekno-delay, 0s);
  will-change: transform;
  backface-visibility: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Same hover-to-pause behavior as before, for mouse/desktop users.
   While actively dragging the animation is fully removed via JS
   (animation-name: none), so this rule only matters once autoplay
   has resumed and the pointer is still hovering the viewport. */
.tkt-fm__viewport:hover .tekno-featured-track {
  animation-play-state: paused;
}

/* Prevent the browser's native drag-ghost on images/links while swiping */
.tkt-fm--carousel .tekno-featured-track img,
.tkt-fm--carousel .tekno-featured-track a {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/*
 * The JS creates 3 identical sets of products.
 * Moving by exactly one set gives a seamless reset:
 * 0%   -> first set
 * 100% -> one full set to the left
 *
 * With 3 sets, one set = 33.333% of the total track.
 */
@keyframes tekno-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(
      calc(-33.333% - (var(--tekno-gap) / 3)),
      0,
      0
    );
  }
}

/* Hide native prev/next UI for the continuous marquee - dragging replaces it */
.tkt-fm--carousel .tkt-fm__nav,
.tkt-fm--carousel .tkt-fm__progress {
  display: none;
}


/* ================================================================
   2. BRAND VARIABLES & SCOPED STYLES
   ================================================================ */

.tkt-fm {
  --tkt-navy: #0b2545;
  --tkt-navy-dark: #071a33;
  --tkt-amber: #e8912b;
  --tkt-amber-dark: #c4750f;
  --tkt-ink: #1c2530;
  --tkt-ink-soft: #5a6472;
  --tkt-line: #e3e6ea;
  --tkt-surface: #ffffff;
  --tkt-surface-soft: #f6f7f9;
  --tkt-success-bg: #e7f5ea;
  --tkt-success-text: #1d7a34;
  --tkt-warning-bg: #fdf1de;
  --tkt-warning-text: #a3620a;
  --tkt-danger-bg: #fbe9e9;
  --tkt-danger-text: #b32424;
  --tkt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tkt-fm-columns: 3;
  --tkt-fm-card-width: 360px;
  --tekno-speed: 25s; /* Default speed variable */

  box-sizing: border-box;
  font-family: var(--tkt-font);
  color: var(--tkt-ink);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2.5rem 0;
}

.tkt-fm *,
.tkt-fm *::before,
.tkt-fm *::after {
  box-sizing: inherit;
}

.tkt-fm__title {
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--tkt-navy);
  text-align: center;
  letter-spacing: 0.01em;
}

.tkt-fm__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.65rem auto 0;
  background: var(--tkt-amber);
  border-radius: 2px;
}

/* Clean viewport edges — no side fade/shading */
.tkt-fm--carousel .tkt-fm__viewport {
  mask-image: none;
  -webkit-mask-image: none;
}

/* Card Sizing in Carousel — driven by the card_width shortcode attribute */
.tkt-fm--carousel .tkt-fm-card {
  flex: 0 0 auto;
  width: var(--tkt-fm-card-width, 360px);
  max-width: 88vw;
  border-radius: 4px;
  box-shadow: none;
}

/* ================================================================
   3. GRID LAYOUT (non-scrolling, wraps to new rows)
   ================================================================ */

.tkt-fm--grid .tkt-fm__viewport {
  width: 100%;
  overflow: visible;
}

.tkt-fm--grid .tkt-fm__grid {
  display: grid;
  grid-template-columns: repeat(var(--tkt-fm-columns, 3), minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* ---------------- Card Component ---------------- */

.tkt-fm-card {
  display: flex;
  flex-direction: column;
  background: var(--tkt-surface);
  border: 1px solid var(--tkt-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 37, 69, 0.04), 0 10px 24px rgba(11, 37, 69, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.tkt-fm-card:hover {
  border-color: var(--tkt-navy);
  box-shadow: 0 18px 36px rgba(11, 37, 69, 0.16);
  transform: translateY(-5px);
}

.tkt-fm-card__media {
  position: relative;
  display: block;
  background: var(--tkt-surface-soft);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tkt-fm-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0.75rem;
  transition: transform 0.35s ease;
}

.tkt-fm-card:hover .tkt-fm-card__img {
  transform: scale(1.06);
}

.tkt-fm-card__body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.tkt-fm-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tkt-fm-card__name a {
  color: var(--tkt-navy);
  text-decoration: none;
}

.tkt-fm-card__name a:hover {
  color: var(--tkt-amber-dark);
  text-decoration: underline;
}

.tkt-fm-card__desc {
  margin: 0.15rem 0 0.3rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tkt-ink-soft);
  min-height: calc(1.55em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tkt-fm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  font-size: 0.82rem;
}

.tkt-fm-card__meta-label {
  color: var(--tkt-ink-soft);
  font-weight: 600;
}

.tkt-fm-card__meta-value {
  color: var(--tkt-ink);
}

.tkt-fm-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tkt-line);
}

.tkt-fm-card__price {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tkt-navy);
}

.tkt-fm-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.tkt-fm-badge.is-instock {
  background: var(--tkt-success-bg);
  color: var(--tkt-success-text);
}

.tkt-fm-badge.is-backorder {
  background: var(--tkt-warning-bg);
  color: var(--tkt-warning-text);
}

.tkt-fm-badge.is-outofstock {
  background: var(--tkt-danger-bg);
  color: var(--tkt-danger-text);
}

.tkt-fm-card__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.tkt-fm-btn {
  flex: 1;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.65rem 0.9rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tkt-fm-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tkt-fm-btn--primary {
  background: var(--tkt-amber);
  border-color: var(--tkt-amber);
  color: #fff;
  box-shadow: 0 6px 14px rgba(232, 145, 43, 0.28);
}

.tkt-fm-btn--primary:hover:not(:disabled) {
  background: var(--tkt-amber-dark);
  border-color: var(--tkt-amber-dark);
  box-shadow: 0 8px 18px rgba(196, 117, 15, 0.32);
  transform: translateY(-1px);
}

.tkt-fm-btn--ghost {
  background: #fff;
  border-color: #26313d;
  color: #26313d;
  box-shadow: none;
}

.tkt-fm-btn--ghost:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #17202a;
  color: #17202a;
  box-shadow: none;
  transform: translateY(-1px);
}

.tkt-fm-btn.is-added {
  background: var(--tkt-success-bg);
  border-color: var(--tkt-success-text);
  color: var(--tkt-success-text);
}

.tkt-fm-btn.is-loading {
  opacity: 0.75;
  cursor: progress;
}

.tkt-fm-empty {
  text-align: center;
  color: var(--tkt-ink-soft);
  padding: 2rem 0;
}

/* Toast */
.tkt-fm-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 12px);
  background: var(--tkt-navy);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(11, 37, 69, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

.tkt-fm-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.tkt-fm-toast.is-error {
  background: var(--tkt-danger-text);
}

/* ================================================================
   4. RESPONSIVE BREAKPOINTS
   ================================================================
   Desktop keeps the columns/card_width configured on the shortcode.
   Below these breakpoints we scale things down so cards, text and
   touch targets stay comfortable on tablets and phones.
   ================================================================ */

/* Tablets / small laptops */
@media (max-width: 1024px) {
  .tkt-fm {
    padding: 2rem 0;
  }

  .tkt-fm--grid .tkt-fm__grid {
    grid-template-columns: repeat(min(var(--tkt-fm-columns, 3), 2), minmax(0, 1fr));
  }

  .tkt-fm--carousel .tkt-fm-card {
    width: min(var(--tkt-fm-card-width, 360px), 320px);
  }
}

/* Large phones / small tablets */
@media (max-width: 720px) {
  .tkt-fm__title {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
  }

  .tkt-fm--grid .tkt-fm__grid {
    grid-template-columns: repeat(min(var(--tkt-fm-columns, 3), 2), minmax(0, 1fr));
    gap: 1rem;
  }

  .tkt-fm--carousel .tekno-featured-track {
    --tekno-gap: 12px;
  }

  .tkt-fm--carousel .tkt-fm-card {
    width: min(var(--tkt-fm-card-width, 360px), 78vw);
  }

  .tkt-fm-card__body {
    padding: 1rem 1.1rem 1.1rem;
  }
}

/* Phones */
@media (max-width: 480px) {
  .tkt-fm {
    padding: 1.5rem 0;
  }

  .tkt-fm__title {
    font-size: 1.25rem;
  }

  .tkt-fm--grid .tkt-fm__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .tkt-fm--carousel .tkt-fm-card {
    width: min(var(--tkt-fm-card-width, 360px), 84vw);
  }

  .tkt-fm-card__name {
    font-size: 0.98rem;
  }

  .tkt-fm-card__desc {
    font-size: 0.85rem;
  }

  .tkt-fm-card__actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tkt-fm-btn {
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
  }

  .tkt-fm-card__footer {
    flex-wrap: wrap;
  }
}

/* Respect reduced-motion preference: JS also disables the autoplay
   animation entirely in this case, but this is a CSS-only backstop. */
@media (prefers-reduced-motion: reduce) {
  .tkt-fm--carousel .tekno-featured-track {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}