/* ==========================================================================
   TORIKO TAB SWITCHER
   Homepage category tab widget — 6 tabs with crossfade content panels.
   ========================================================================== */

.toriko-tabs {
  width: 100%;
}

/* ── Tab Bar — NO borders, just text ──────────────────────────────────── */

.toriko-tabs__bar {
  display: flex;
  align-items: center;
  background: transparent !important;
  height: 60px;
  max-width: 1624px;
  margin: 0 auto;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.toriko-tabs__trigger {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--toriko-white, #FFFFFF);
  font-family: var(--toriko-font-heading, 'Montserrat', sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.3s ease, font-weight 0.3s ease;
  padding: 0 8px;
  text-transform: uppercase;
}

.toriko-tabs__trigger.is-active {
  color: var(--toriko-green, #5EE200);
  font-weight: 700;
}

.toriko-tabs__trigger:hover:not(.is-active) {
  color: var(--toriko-body, #D9D9D9);
}

/* ── Dot + Line Indicator Row ─────────────────────────────────────────── */

.toriko-tabs__indicator {
  display: flex;
  align-items: center;
  max-width: 1624px;
  margin: 0 auto;
  height: 16px;
  padding: 0;
  position: relative;
  z-index: 2;
}

.toriko-tabs__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--toriko-border-gray, #616161);
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.toriko-tabs__dot.is-active {
  background-color: var(--toriko-green, #5EE200);
}

.toriko-tabs__line {
  height: 2px;
  flex: 1;
  background-color: var(--toriko-border-gray, #616161);
  transition: background-color 0.3s ease;
}

.toriko-tabs__line.is-active {
  background-color: var(--toriko-green, #5EE200);
}

/* ── Content Panels ────────────────────────────────────────────────────── */

.toriko-tabs__content {
  position: relative;
  min-height: 460px;
  margin-top: 60px;
}

.toriko-tabs__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.toriko-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}

.toriko-tabs__panel-inner {
  display: grid;
  grid-template-columns: minmax(280px, 520px) 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1624px;
  margin: 0 auto;
}

/* ── Description Column ────────────────────────────────────────────────── */

.toriko-tabs__description {
  font-family: var(--toriko-font-body, 'Open Sans', sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  color: var(--toriko-body, #D9D9D9);
}

/* ── Learn More Button ────────────────────────────────────────────────── */

.toriko-tabs__learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 212px;
  height: 76px;
  padding: 0 32px;
  margin-top: 32px;
  border: 2px solid var(--toriko-green, #5EE200);
  background: rgba(94, 226, 0, 0.41);
  color: #FFFFFF !important;
  font-family: var(--toriko-font-heading, 'Montserrat', sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  overflow: visible;
}

.toriko-tabs__learn-more:hover {
  background: var(--toriko-green, #5EE200) !important;
  color: #000000 !important;
}

.toriko-tabs__learn-more .toriko-cta-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--toriko-green, #5EE200);
  pointer-events: none;
  z-index: 2;
}

.toriko-tabs__learn-more .toriko-cta-dot.tl { top: -7px;    left: -7px; }
.toriko-tabs__learn-more .toriko-cta-dot.tr { top: -7px;    right: -7px; }
.toriko-tabs__learn-more .toriko-cta-dot.bl { bottom: -7px; left: -7px; }
.toriko-tabs__learn-more .toriko-cta-dot.br { bottom: -7px; right: -7px; }

/* ── Product Cards Grid with Shared Dots ──────────────────────────────── */

.toriko-tabs__cards {
  display: grid;
  grid-template-columns: repeat(var(--toriko-card-count, 3), 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0;
  position: relative;
}

/* Dot rows span all columns.
   Extended 7px (half a dot) beyond each side so the first/last dots center
   exactly on the outer corners and the middle dots land on the column dividers. */
.toriko-tabs__card-dots-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0;
  margin-left: -7px;
  margin-right: -7px;
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.toriko-tabs__card-dots-row.top {
  grid-row: 1;
  top: 0;
}

.toriko-tabs__card-dots-row.bottom {
  grid-row: 3;
  bottom: 0;
}

/* Shared dots */
.toriko-tabs__card-dot-shared {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--toriko-border-gray, #616161);
  flex-shrink: 0;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.toriko-tabs__card-dot-shared.is-hover {
  background-color: var(--toriko-green, #5EE200);
}

/* Card cells */
.toriko-tabs__card {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 2px solid var(--toriko-border-gray, #616161);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease;
}

/* Shared borders: non-first cards drop their left border */
.toriko-tabs__card + .toriko-tabs__card {
  border-left: none;
}

.toriko-tabs__card.is-hovered {
  border-color: var(--toriko-green, #5EE200);
}

/* When the card to the right is hovered, the left card's right border turns green */
.toriko-tabs__card.is-neighbor-right {
  border-right-color: var(--toriko-green, #5EE200);
}

/* ── Card Image — blurred by default, clear only on hover ─────────────── */

.toriko-tabs__card-img {
  flex: 1;
  overflow: hidden;
}

.toriko-tabs__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1.5px) brightness(0.8);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.toriko-tabs__card:hover .toriko-tabs__card-img img {
  filter: none;
  transform: scale(1.05);
}

/* ── Card Text + Arrow ─────────────────────────────────────────────────── */

.toriko-tabs__card-name {
  padding: 12px 16px 6px;
  font-family: var(--toriko-font-heading, 'Montserrat', sans-serif);
  font-size: var(--toriko-text-card, 24px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--toriko-white, #FFFFFF);
  transition: color 0.2s ease;
}

.toriko-tabs__card:hover .toriko-tabs__card-name {
  color: var(--toriko-green, #5EE200);
}

.toriko-tabs__card-arrow {
  position: absolute;
  bottom: 12px;
  right: 16px;
  display: inline-flex;
  color: var(--toriko-white, #FFFFFF);
  transition: color 0.2s ease;
}

.toriko-tabs__card-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
}

.toriko-tabs__card:hover .toriko-tabs__card-arrow {
  color: var(--toriko-green, #5EE200);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .toriko-tabs__bar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px !important;
  }

  .toriko-tabs__trigger {
    flex: 1 1 33.33%;
    padding: 12px 8px;
    font-size: 16px;
  }

  .toriko-tabs__panel-inner {
    grid-template-columns: 1fr;
  }

  .toriko-tabs__cards {
    grid-template-columns: repeat(var(--toriko-card-count, 3), 1fr);
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .toriko-tabs__trigger {
    flex: 1 1 50%;
    font-size: 14px;
  }

  .toriko-tabs__content {
    min-height: 0;
    margin-top: 40px;
  }

  .toriko-tabs__panel-inner {
    gap: 28px;
  }

  .toriko-tabs__description {
    font-size: 16px;
    line-height: 1.8;
  }

  .toriko-tabs__learn-more {
    width: 100%;
    min-width: 0;
    height: 64px;
    font-size: 18px;
  }

  /* Cards: normal single-column flow — drop the shared-dot grid entirely so
     cards no longer overlap in the same grid cell. */
  .toriko-tabs__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .toriko-tabs__card,
  .toriko-tabs__card + .toriko-tabs__card {
    grid-row: auto;
    aspect-ratio: 16 / 10;
    border: 2px solid var(--toriko-border-gray, #616161);
  }

  /* No hover on touch devices — keep every product photo sharp and visible. */
  .toriko-tabs__card-img img {
    filter: none;
    transform: none;
  }

  .toriko-tabs__card-name {
    font-size: 20px;
    padding: 10px 14px 6px;
  }

  .toriko-tabs__card-arrow svg {
    width: 18px;
    height: 18px;
  }

  .toriko-tabs__card-dots-row,
  .toriko-tabs__card-dot-shared {
    display: none;
  }
}