/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.6
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ============================================
   KINTO Tyres - Custom Styles
   ============================================ */

/* Global font */
body {
  font-family: 'Roboto', 'Sarabun', sans-serif;
}

/* ============================================
   Section 1: Hero Banner
   ============================================ */
.kinto-hero-section {
  min-height: 776px;
}

.kinto-hero-section .section-bg-overlay,
.kinto-hero-section iframe {
  pointer-events: none;
}

/* ============================================
   Section 2: About KINTO
   ============================================ */
.kinto-about h1 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  line-height: 1.2;
}

.kinto-about .kinto-subtitle {
  font-size: 34px;
  line-height: 1.5;
  margin-top: 5px;
}

.kinto-about .kinto-subtitle em {
  color: #fff;
}

.kinto-about .kinto-red {
  color: rgb(255, 0, 0) !important;
  font-style: italic;
  font-weight: 700;
}

.kinto-about p {
  color: #fff;
  line-height: 1.5;
  font-size: 18px;
}

/* About button */
.kinto-btn.button,
.kinto-about .button {
  background-color: rgb(255, 31, 10) !important;
  border-radius: 0 !important;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  border: 2px solid transparent !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.kinto-btn.button:hover,
.kinto-about .button:hover {
  background-color: rgb(200, 20, 5) !important;
  border-color: #fff !important;
}

/* Decorative line utility */
.kinto-line {
  display: block;
  margin: 0 auto 10px;
}

/* ============================================
   Section 3: OUR PRODUCTS
   ============================================ */
.kinto-products {
  overflow: hidden;
}

.kinto-products h2 {
  text-align: center;
  font-weight: 700;
  color: #fff;
}

/* --- Products Section Header --- */
.kinto-products__header {
  text-align: center;
  margin-bottom: 50px;
}

.kinto-products__divider {
  display: flex;
  width: 80px;
  margin: 16px auto 0;
}

.kinto-products__divider-red {
  flex: 2;
  height: 2px;
  background: #ff1f0a;
}

.kinto-products__divider-dark {
  flex: 1;
  height: 2px;
  background: #333;
}

/* --- Products Grid --- */
.kinto-products__grid {
  display: grid;
  gap: 0;
  width: 100%;
}

/* --- Product Card --- */
.kinto-product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 0;
}

/* Background image (vehicle silhouette) - stays static */
.kinto-product-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.kinto-product-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product image wrapper */
.kinto-product-card__link {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
}

.kinto-product-card__img-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

/* Product image with lift-up hover effect.
 * object-fit:contain keeps aspect ratio inside the bounded wrap so:
 *   - large source images shrink to fit the card (no overflow / huge tires)
 *   - small source images stay at natural size (no upscale / no blur)
 */
.kinto-product-card__img {
  max-width: 95%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center bottom;
  will-change: transform;
}

.kinto-product-card:hover .kinto-product-card__img {
  transform: translateY(-16px);
}

/* Placeholder when no image */
.kinto-product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: #222;
  color: #555;
  font-size: 14px;
}

/* Card title + arrow */
.kinto-product-card__title {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 8px 0 12px;
  width: 100%;
}

.kinto-product-card__title a {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.kinto-product-card__title a:hover {
  color: #ff1f0a;
}

.kinto-product-card__arrow {
  width: 26px;
  height: 19px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.kinto-product-card__title a:hover .kinto-product-card__arrow {
  transform: translateX(5px);
}

/* Legacy: Remove default banner text box bg */
.kinto-products .ux-banner .text-box-content {
  background: none !important;
}

/* ============================================
   Section 4: WHY KINTO TYRES
   ============================================ */
.kinto-why {
  background-color: #111;
}

.kinto-why h2 {
  text-align: center;
  font-weight: 700;
  color: #fff;
}

.kinto-why h4 {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}

/* --- kinto_why shortcode --- */
.kinto-why-section {
  position: relative;
  overflow: hidden;
}

.kinto-why__bg {
  position: absolute;
  bottom: 0;
  left: -4px;
  right: 4px;
  z-index: 0;
  pointer-events: none;
}

.kinto-why__bg img {
  width: 100%;
  height: auto;
  display: block;
  transform: scaleY(-1);
  opacity: 0.6;
}

.kinto-why__inner {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Heading */
.kinto-why__heading {
  text-align: center;
  margin-bottom: 50px;
}

.kinto-why__heading h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.5;
}

.kinto-why__divider {
  display: flex;
  width: 80px;
  margin: 0 auto;
}

.kinto-why__divider-red {
  flex: 2;
  height: 2px;
  background: #ff1f0a;
}

.kinto-why__divider-dark {
  flex: 1;
  height: 2px;
  background: #333;
}

/* Cards container — mobile-first: stacked, no horizontal offset */
.kinto-why__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0;
}

.kinto-why__card {
  flex: 1 1 100%;
  width: 100%;
  max-width: 320px;
  text-align: center;
}

/* Stagger offset only on tablet+ */
.kinto-why__card--offset,
.kinto-why__card:nth-child(2) {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 850px) {
  .kinto-why__cards {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 0 60px;
  }
  .kinto-why__card {
    max-width: none;
  }
  .kinto-why__card--offset      { padding-top: 120px; }
  .kinto-why__card:nth-child(2) { padding-bottom: 120px; }
}

/* Icon */
.kinto-why__icon {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.kinto-why__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: kintoIconFadeIn 0.8s ease-out forwards;
}

/* Label */
.kinto-why__label {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #fff;
  margin-top: 32px;
  line-height: 1.5;
  text-align: center;
}

/* slideInBlurredLeft effect (from Kinto HTML reference) */
.kinto-why__label--slidein {
  opacity: 0;
  transform: translateX(-80px);
  filter: blur(12px);
}

.kinto-why-section.is-in-view .kinto-why__label--slidein,
.kinto-why__label--slidein.animated {
  animation: kintoSlideInBlurredLeft 0.6s ease-out forwards;
}

.kinto-why__card:nth-child(2) .kinto-why__label--slidein {
  animation-delay: 0.2s;
}

.kinto-why__card:nth-child(3) .kinto-why__label--slidein {
  animation-delay: 0.4s;
}

/* Keyframes */
@keyframes kintoSlideInBlurredLeft {
  0% {
    transform: translateX(-80px) scaleX(1.4) scaleY(0.6);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleX(1) scaleY(1);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes kintoIconFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ============================================
   Section 5: NEWSROOM
   ============================================ */
.kinto-newsroom {
  background-color: #1F1F1F;
}

.kinto-newsroom h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}

.kinto-newsroom .view-more-link {
  color: rgb(255, 31, 10);
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.kinto-newsroom .view-more-link:hover {
  text-decoration: underline;
}

.kinto-newsroom .view-more-link i {
  margin-left: 5px;
  font-size: 14px;
}

/* News cards */
.kinto-newsroom .news-card {
  overflow: hidden;
}

.kinto-newsroom .news-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.kinto-newsroom .news-card:hover img {
  transform: scale(1.1);
}

.kinto-newsroom h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  margin-top: 15px;
  line-height: 1.5;
}

.kinto-newsroom h3 a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.kinto-newsroom h3 a:hover {
  color: rgb(255, 31, 10);
}

/* ============================================
   Section 5b: KINTO BLOG (kinto_blog shortcode)
   seco9jb-style: d-flex section + bg image + image-animate
   ============================================ */
.kinto-blog-section {
  position: relative;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
}

/* Background image layer (seco9jb style) */
.kinto-blog__bg-image {
  pointer-events: none;
}

/* Image animate fade-in on scroll (seco9jb style) */
.kinto-blog__card-img img {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out,
              transform 0.6s ease-out,
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kinto-blog__card.is-visible .kinto-blog__card-img img {
  opacity: 1;
  transform: translateY(0);
}

.kinto-blog__card.is-visible:hover .kinto-blog__card-img img {
  transform: scale(1.1);
}

/* Header row */
.kinto-blog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.kinto-blog__title {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

.kinto-blog__viewmore {
  color: rgb(255, 31, 10) !important;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.kinto-blog__viewmore:hover {
  text-decoration: underline !important;
  color: rgb(255, 31, 10) !important;
}

.kinto-blog__viewmore i {
  font-size: 14px;
}

/* Blog grid */
.kinto-blog__grid {
  display: grid;
}

/* Card */
.kinto-blog__card {
  overflow: hidden;
}

.kinto-blog__card-link {
  display: block;
  text-decoration: none;
}

/* Image container with zoom hover (matching secx6zj reference) */
.kinto-blog__card-img {
  overflow: hidden;
  position: relative;
  display: block;
}

.kinto-blog__card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder */
.kinto-blog__card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #333;
  color: #666;
  font-size: 14px;
}

/* Card content */

.kinto-blog__card-date {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin-bottom: 8px;
}

.kinto-blog__card-title {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.kinto-blog__card-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.kinto-blog__card-title a:hover {
  color: rgb(255, 31, 10);
}

.kinto-blog__card-excerpt {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ============================================
   Section: Kinto Section Image (seco9jb style)
   d-flex section + bg image + foreground image-animate
   ============================================ */
.kinto-si {
  position: relative;
  overflow: hidden;
}

.kinto-si__bg {
  pointer-events: none;
}

.kinto-si__img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* image-animate: start hidden, fade-in on scroll */
.kinto-si__img-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.kinto-si__img-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Kinto Warranty Section
   ============================================ */
.kinto-warranty {
  position: relative;
  overflow: hidden;
}
.kinto-warranty__content {
  width: 100%;
}
.kinto-warranty__btn {
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.kinto-warranty__btn:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================
   Section 6: Bottom Banner
   ============================================ */
.kinto-bottom-banner .ux-banner {
  border-radius: 0;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet */
@media only screen and (max-width: 64em) {
  .kinto-hero-section {
    min-height: 500px;
  }

  .kinto-about h1 {
    font-size: 32px;
  }

  .kinto-about .kinto-subtitle {
    font-size: 26px;
  }

  .kinto-product-card__title a {
    font-size: 18px;
  }

  .kinto-products__header h2 {
    font-size: 36px;
  }

  .kinto-newsroom h2,
  .kinto-blog__title {
    font-size: 32px;
  }

  .kinto-blog__viewmore {
    font-size: 16px;
  }

  /* Why section */
  .kinto-why__heading h2 {
    font-size: 36px;
  }

  .kinto-why__cards {
    padding: 0 20px;
    gap: 20px;
  }

  .kinto-why__card--offset {
    padding-top: 80px;
  }

  .kinto-why__card:nth-child(2) {
    padding-bottom: 80px;
  }

  .kinto-why__icon {
    width: 150px;
    height: 150px;
  }

  .kinto-why__label {
    font-size: 20px;
    margin-top: 20px;
  }
}

/* Mobile */
@media only screen and (max-width: 48em) {
  .kinto-hero-section {
    min-height: 211px;
  }

  .kinto-about h1 {
    font-size: 27px;
    text-align: center;
  }

  .kinto-about .kinto-subtitle {
    font-size: 22px;
    text-align: center;
  }

  .kinto-about .kinto-subtitle em {
    font-size: 22px;
  }

  .kinto-about p {
    text-align: center;
    font-size: 16px;
  }

  .kinto-about .button {
    display: block;
    margin: 0 auto;
    text-align: center;
  }

  /* Products - mobile */
  .kinto-product-card__title a {
    font-size: 16px;
  }

  .kinto-product-card__arrow {
    width: 20px;
    height: 15px;
  }

  .kinto-products__header h2 {
    font-size: 28px;
  }

  /* Why section */
  .kinto-why h4 {
    font-size: 14px;
  }

  .kinto-why__heading h2 {
    font-size: 28px;
  }

  .kinto-why__cards {
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 30px;
  }

  .kinto-why__card--offset {
    padding-top: 0;
  }

  .kinto-why__card:nth-child(2) {
    padding-bottom: 0;
  }

  .kinto-why__icon {
    width: 140px;
    height: 140px;
  }

  .kinto-why__label {
    font-size: 18px;
    margin-top: 16px;
  }

  /* Newsroom */
  .kinto-newsroom h2 {
    font-size: 27px;
  }

  .kinto-newsroom h3 {
    font-size: 16px;
  }

  .kinto-newsroom .view-more-link {
    font-size: 14px;
  }

  /* Blog section - mobile */
  .kinto-blog__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 25px;
  }

  .kinto-blog__title {
    font-size: 27px;
  }

  .kinto-blog__viewmore {
    font-size: 14px;
  }

  .kinto-blog__grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  .kinto-blog__card-title {
    font-size: 16px;
  }
}

/* Small mobile */
@media only screen and (max-width: 30em) {
  .kinto-hero-section {
    min-height: 180px;
  }

  .kinto-about h1 {
    font-size: 22px;
  }

  .kinto-about .kinto-subtitle {
    font-size: 18px;
  }

  .kinto-why h4 {
    font-size: 12px;
  }

  .kinto-why__heading h2 {
    font-size: 24px;
  }

  .kinto-why__label {
    font-size: 16px;
  }

  .kinto-product-card__title a {
    font-size: 14px;
  }
}

/* ============================================
   KINTO ARCHIVE / BLOG TEMPLATE
   Figma node 10001:1622
   ============================================ */

/* --- Hero Banner --- */
.kinto-archive__hero {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kinto-archive__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.kinto-archive__hero-title {
  position: relative;
  z-index: 2;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 60px;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

/* --- Main content area --- */
.kinto-archive__main {
  background-color: #1f1f1f;
  padding: 80px 0;
}

.kinto-archive__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* --- Breadcrumb --- */
.kinto-archive__breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.kinto-archive__breadcrumb-link {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #ff1f0a;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.kinto-archive__breadcrumb-link:hover {
  opacity: 0.8;
  color: #ff1f0a;
}

.kinto-archive__breadcrumb-sep {
  display: flex;
  align-items: center;
}

.kinto-archive__breadcrumb-current {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ff1f0a;
}

/* --- Blog Grid: 1 featured left + 2 small right --- */
.kinto-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

/* Featured card distinction removed — all 3 cards equal-size in 3-col grid */
.kinto-archive__card--featured {
  grid-row: auto;
}

/* --- Card --- */
.kinto-archive__card {
  position: relative;
  overflow: hidden;
}

.kinto-archive__card-link {
  display: block;
  position: relative;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

.kinto-archive__card-img {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Featured card sizing reset — kept for backward compat if class still in DOM */
.kinto-archive__card--featured .kinto-archive__card-img {
  aspect-ratio: 16 / 11;
  height: auto;
}

.kinto-archive__card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kinto-archive__card:hover .kinto-archive__card-img img {
  transform: scale(1.05);
}

.kinto-archive__card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #333;
}

/* Gradient overlay */
.kinto-archive__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

/* Title overlay on card */
.kinto-archive__card-title {
  position: absolute;
  bottom: 16px;
  left: 26px;
  right: 26px;
  z-index: 2;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

/* --- Pagination --- */
.kinto-archive__pagination {
  display: flex;
  align-items: center;
  border: 1px solid #dee3e6;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.kinto-archive__page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s ease;
}

.kinto-archive__page-btn:hover:not(.is-disabled) {
  background: #f0f0f0;
  color: #333;
}

.kinto-archive__page-btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.kinto-archive__page-current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 44px;
  padding: 0 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  background: #e9ecef;
  border-left: 1px solid #dee3e6;
  border-right: 1px solid #dee3e6;
}

/* --- Empty state --- */
.kinto-archive__empty {
  text-align: center;
  color: #888;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  padding: 60px 0;
}

/* --- Responsive --- */
@media (max-width: 64em) {
  .kinto-archive__hero {
    height: 300px;
  }

  .kinto-archive__hero-title {
    font-size: 40px;
  }

  .kinto-archive__main {
    padding: 60px 0;
  }

  .kinto-archive__container {
    gap: 40px;
  }

  .kinto-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kinto-archive__breadcrumb-link,
  .kinto-archive__breadcrumb-current {
    font-size: 16px;
  }
}

@media (max-width: 48em) {
  .kinto-archive__hero {
    height: 220px;
  }

  .kinto-archive__hero-title {
    font-size: 32px;
  }

  .kinto-archive__main {
    padding: 40px 0;
  }

  .kinto-archive__container {
    gap: 30px;
  }

  .kinto-archive__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .kinto-archive__card--featured {
    grid-row: auto;
  }

  .kinto-archive__card-img {
    aspect-ratio: 1 / 1;
  }

  .kinto-archive__card--featured .kinto-archive__card-img {
    aspect-ratio: 1 / 1;
  }

  .kinto-archive__breadcrumb-link,
  .kinto-archive__breadcrumb-current {
    font-size: 14px;
  }
}

/* ============================================
   KINTO SINGLE POST TEMPLATE
   Figma node 4015:1517
   ============================================ */

.kinto-single {
  background-color: #1f1f1f;
}

.kinto-single__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 160px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* --- Breadcrumb --- */
.kinto-single__breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kinto-single__breadcrumb-link {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #ff1f0a;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.kinto-single__breadcrumb-link:hover {
  opacity: 0.8;
  color: #ff1f0a;
}

.kinto-single__breadcrumb-sep {
  display: flex;
  align-items: center;
}

.kinto-single__breadcrumb-current {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ff1f0a;
}

/* --- Post Header (share + info) --- */
.kinto-single__header {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 0 60px;
}

/* Share sidebar */
.kinto-single__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.kinto-single__share-label {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
}

.kinto-single__share-icons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.kinto-single__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.kinto-single__share-btn:hover {
  opacity: 0.8;
}

.kinto-single__share-btn--fb {
  color: #fff;
  background: #1877f2;
}

.kinto-single__share-btn--x {
  color: #fff;
  background: #000;
}

.kinto-single__share-btn--line {
  color: #fff;
  background: #06c755;
}

/* Post info */
.kinto-single__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kinto-single__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

.kinto-single__meta {
  display: flex;
  align-items: center;
  gap: 24px;
}

.kinto-single__meta-date {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: #fff;
  line-height: 1.5;
  padding-right: 24px;
  border-right: 1px solid #fff;
}

.kinto-single__meta-views {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: #fff;
  line-height: 1.5;
}

.kinto-single__tag {
  display: inline-block;
  align-self: center;
  background: #333;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: 4px;
}

/* When tag sits inside meta flex row, align with date/views and use a smaller
 * size so the row feels balanced. */
.kinto-single__meta .kinto-single__tag {
  font-size: 16px;
  margin-right: 4px;
}

/* --- Post Content --- */
.kinto-single__content {
  padding: 0 164px 120px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.kinto-single__content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.kinto-single__content p {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

.kinto-single__content h2,
.kinto-single__content h3,
.kinto-single__content h4 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

.kinto-single__content blockquote {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  border-left: 3px solid #ff1f0a;
  padding-left: 20px;
  margin: 20px 0;
}

/* --- Related Content --- */
.kinto-single__related {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.kinto-single__related-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

.kinto-single__related-grid {
  display: flex;
  gap: 24px;
  width: 100%;
}

.kinto-single__related-card {
  flex: 1;
  overflow: hidden;
}

.kinto-single__related-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}

.kinto-single__related-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.kinto-single__related-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kinto-single__related-card:hover .kinto-single__related-img img {
  transform: scale(1.05);
}

.kinto-single__related-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #333;
}

.kinto-single__related-name {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  margin: 0;
  transition: color 0.3s ease;
}

.kinto-single__related-card:hover .kinto-single__related-name {
  color: #ff1f0a;
}

/* --- Single Post Responsive --- */
@media (max-width: 64em) {
  .kinto-single__container {
    padding: 60px 40px;
    gap: 40px;
  }

  .kinto-single__header {
    padding: 0 20px;
  }

  .kinto-single__title {
    font-size: 28px;
  }

  .kinto-single__meta-date,
  .kinto-single__meta-views {
    font-size: 16px;
  }

  .kinto-single__tag {
    font-size: 16px;
  }

  .kinto-single__content {
    padding: 0 20px 60px;
    gap: 40px;
  }

  .kinto-single__related-title {
    font-size: 36px;
  }

  .kinto-single__related-name {
    font-size: 20px;
  }

  .kinto-single__breadcrumb-link,
  .kinto-single__breadcrumb-current {
    font-size: 16px;
  }
}

@media (max-width: 48em) {
  .kinto-single__container {
    padding: 40px 15px;
    gap: 30px;
  }

  .kinto-single__header {
    flex-direction: column;
    padding: 0;
    gap: 20px;
  }

  .kinto-single__share {
    flex-direction: row;
    gap: 12px;
  }

  .kinto-single__share-icons {
    flex-direction: row;
  }

  .kinto-single__title {
    font-size: 24px;
  }

  .kinto-single__meta {
    flex-wrap: wrap;
    gap: 12px;
  }

  .kinto-single__meta-date,
  .kinto-single__meta-views {
    font-size: 14px;
  }

  .kinto-single__tag {
    font-size: 14px;
  }

  .kinto-single__content {
    padding: 0 0 40px;
    gap: 30px;
  }

  .kinto-single__content p {
    font-size: 16px;
  }

  .kinto-single__related-title {
    font-size: 28px;
  }

  .kinto-single__related-grid {
    flex-direction: column;
  }

  .kinto-single__related-name {
    font-size: 18px;
  }

  .kinto-single__breadcrumb-link,
  .kinto-single__breadcrumb-current {
    font-size: 14px;
  }
}


/* ============================================================
   KINTO TIRE INTRO (Product Type Archive – Section 2)
   ============================================================ */

.kinto-tire-intro__inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.kinto-tire-intro__left,
.kinto-tire-intro__right {
  flex: 1 1 50%;
  min-width: 0;
}

.kinto-tire-intro__right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}


/* ============================================================
   KINTO TIRE LISTING (Product Type Archive – Section 4)
   ============================================================ */

.kinto-tire-listing__group {
  margin-bottom: 60px;
}

.kinto-tire-listing__group:last-child {
  margin-bottom: 0;
}

.kinto-tire-listing__group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.kinto-tire-listing__group-name {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ff1f0a;
  line-height: normal;
}

.kinto-tire-listing__group-arrow {
  width: 26px;
  height: 19px;
  flex-shrink: 0;
}

.kinto-tire-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.kinto-tire-listing__separator {
  border: none;
  height: 2px;
  background: #ff1f0a;
  margin: 60px 0 0;
}


/* --- Tire Card --- */

.kinto-tire-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  overflow: hidden;
  background-image: url('/wp-content/uploads/2026/05/Card-lop.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kinto-tire-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kinto-tire-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kinto-tire-card__image {
  position: relative;
  z-index: 1;
}

.kinto-tire-card__image img {
  width: 100%;
  aspect-ratio: 164 / 249;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(.165, .84, .44, 1);
}

.kinto-tire-card:hover .kinto-tire-card__image img {
  transform: scale(1.1);
}

.kinto-tire-card__name {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

.kinto-tire-card__desc {
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
  /* Clamp to 2 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kinto-tire-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: #ff1f0a;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.kinto-tire-card__cta:hover {
  color: #ff1f0a;
  text-decoration: none;
}

.kinto-tire-card__cta svg {
  transition: transform 0.3s ease;
}

.kinto-tire-card__cta:hover svg {
  transform: translateX(4px);
}


/* --- Tire Card Animations --- */

.kinto-tire-card--hidden {
  opacity: 0;
  transform: translateY(30px);
}

.kinto-tire-card--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kinto-tire-listing__group-header--hidden {
  opacity: 0;
  transform: translateX(-30px);
}

.kinto-tire-listing__group-header--visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.165, .84, .44, 1);
}


/* --- Tire Listing Responsive --- */

@media (max-width: 849px) {
  .kinto-tire-listing__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .kinto-tire-card__name {
    font-size: 24px;
  }

  .kinto-tire-card__desc {
    font-size: 16px;
  }

  .kinto-tire-card__cta {
    font-size: 16px;
  }

  .kinto-tire-intro__inner {
    flex-direction: column;
  }
}

@media (max-width: 549px) {
  .kinto-tire-listing__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .kinto-tire-card__name {
    font-size: 20px;
  }

  .kinto-tire-card__desc {
    font-size: 14px;
  }

  .kinto-tire-card__cta {
    font-size: 14px;
  }

  .kinto-tire-listing__group-name {
    font-size: 24px;
  }

  .kinto-tire-intro__inner {
    gap: 16px;
  }
}

/* ============================================
   KINTO HEADER - Match Kinto Tyres Reference
   ============================================ */

/* --- Header Background: dark #111 --- */
.header-wrapper {
  background-color: #111111 !important;
}

.header-main {
  background-color: #111111 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.header-top {
  background-color: #111111 !important;
  border-bottom: none !important;
}

.header-bottom,
#wide-nav {
  background-color: #111111 !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Remove any header dividers */
.header-main .top-divider,
.header-top .top-divider,
.header-bottom .top-divider {
  display: none !important;
}

/* --- Header Height & Padding (match py-8 = ~2rem) --- */
.header-main .header-inner {
  min-height: auto !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* --- Logo sizing: 258px x 80px --- */
#logo img {
  max-height: 80px !important;
}

#logo {
  max-width: 258px;
}

/* --- Navigation: Roboto 18px, white text --- */
.header-nav .nav > li > a {
  font-family: 'Roboto', 'Tahoma', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  padding: 8px 15px !important;
  transition: color 0.3s ease !important;
}

/* --- Hover: red #ff1f0a --- */
.header-nav .nav > li > a:hover,
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a,
.header-nav .nav > li.current-menu-parent > a,
.header-nav .nav > li.current-menu-ancestor > a {
  color: rgb(255, 31, 10) !important;
}

/* --- Active underline: red --- */
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a,
.header-nav .nav > li.current-menu-parent > a,
.header-nav .nav > li.current-menu-ancestor > a {
  border-bottom: 2px solid rgb(255, 31, 10) !important;
}

/* Remove default Flatsome nav button styling */
.header-nav .nav > li > a > .label-nav-button,
.header-nav .nav > li > a .ubtn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* --- Dropdown submenu: dark #1F1F1F --- */
.header-nav .nav-dropdown {
  background-color: #1F1F1F !important;
  border: 1px solid #1F1F1F !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hide the white triangle arrow above dropdown */
.nav-dropdown-has-arrow li.has-dropdown:before,
.nav-dropdown-has-arrow li.has-dropdown:after,
.header-nav li.has-dropdown:before,
.header-nav li.has-dropdown:after {
  display: none !important;
}

/* --- Level 2: Category headers (direct children of .nav-dropdown) --- */
/* ALL direct li > a inside dropdown → red, bold */
.header-nav .nav-dropdown > li > a {
  font-family: 'Roboto', 'Tahoma', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgb(255, 31, 10) !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
  background-color: transparent !important;
  transition: color 0.3s ease !important;
}

.header-nav .nav-dropdown > li > a:hover {
  color: #fff !important;
  background-color: transparent !important;
}

/* Active category: bg đỏ, text trắng */
.header-nav .nav-dropdown > li.active > a,
.header-nav .nav-dropdown > li.current-menu-item > a,
.header-nav .nav-dropdown > li.current-menu-parent > a,
.header-nav .nav-dropdown > li.current-menu-ancestor > a {
  background-color: rgb(255, 31, 10) !important;
  color: #fff !important;
}

/* Table-cell columns: border-right thay vì border-bottom */
.header-nav .nav-dropdown > li.nav-dropdown-col {
  display: table-cell !important;
  vertical-align: top !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 0 !important;
}

.header-nav .nav-dropdown > li.nav-dropdown-col:last-child {
  border-right: none !important;
}

/* Non-column items (no children): cũng table-cell */
.header-nav .nav-dropdown > li:not(.nav-dropdown-col) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-nav .nav-dropdown > li:not(.nav-dropdown-col):last-child {
  border-bottom: none !important;
}

/* Hide sub-arrow on items inside dropdown */
.header-nav .nav-dropdown > li > a:after {
  display: none !important;
}

/* --- Dropdown arrow on level 1: chevron-down --- */
.header-nav .nav > li.has-dropdown > a:after {
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', FontAwesome !important;
  content: '\f078' !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  margin-left: 6px !important;
  color: inherit !important;
  display: inline !important;
}

/* ============================================
   Level 3: Sub-items inside .nav-column
   ============================================ */

.header-nav .nav-dropdown .nav-column {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: 160px;
  box-shadow: none !important;
  list-style: none !important;
}

/* Level 3 items: white, normal weight, 16px */
.header-nav .nav-dropdown .nav-column > li > a {
  font-family: 'Roboto', 'Tahoma', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: none !important;
  padding: 10px 20px !important;
  background-color: transparent !important;
  display: block !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.header-nav .nav-dropdown .nav-column > li {
  display: block !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-nav .nav-dropdown .nav-column > li:last-child {
  border-bottom: none !important;
}

/* Level 3 hover: bg đỏ */
.header-nav .nav-dropdown .nav-column > li > a:hover {
  background-color: rgb(255, 31, 10) !important;
  color: #fff !important;
}

/* Level 3 active */
.header-nav .nav-dropdown .nav-column > li.active > a,
.header-nav .nav-dropdown .nav-column > li.current-menu-item > a {
  background-color: rgb(255, 31, 10) !important;
  color: #fff !important;
}

/* Dropdown multi-column: dark bg */
.header-nav .nav-dropdown-default,
.header-nav .nav-dropdown-simple {
  background-color: #1F1F1F !important;
}

/* Nested .nav-dropdown inside .nav-dropdown (flyout) */
.header-nav .nav-dropdown .nav-dropdown {
  background-color: #1F1F1F !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove Flatsome dropdown border & shadow globally */
.nav-dropdown-has-border .nav-dropdown {
  border-color: #1F1F1F !important;
}

.nav-dropdown-has-shadow .nav-dropdown {
  box-shadow: none !important;
}

/* --- Sticky Header: same dark style --- */
.header-wrapper.stuck .header-main,
.header-wrapper.stuck {
  background-color: #111111 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.header-wrapper.stuck .header-nav .nav > li > a {
  color: #fff !important;
}

.header-wrapper.stuck .header-nav .nav > li > a:hover,
.header-wrapper.stuck .header-nav .nav > li.active > a,
.header-wrapper.stuck .header-nav .nav > li.current-menu-item > a {
  color: rgb(255, 31, 10) !important;
}

/* --- Top bar text: white --- */
.header-top .nav > li > a,
.header-top .nav > li > a span,
.top-bar-nav .nav > li > a {
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.header-top .nav > li > a:hover,
.top-bar-nav .nav > li > a:hover {
  color: rgb(255, 31, 10) !important;
}

/* --- Header icons (cart, search, account): white --- */
.header-nav .nav > li > a .icon-shopping-cart,
.header-nav .nav > li > a .icon-search,
.header-nav .nav > li > a .icon-user,
.header-main .icon-shopping-cart,
.header-main .icon-search,
.header-main .icon-user,
.header-main .cart-icon,
.header-main .header-search-icon {
  color: #fff !important;
}

/* Cart count badge: red */
.header-main .cart-icon .cart-count,
.cart-icon .cart-count {
  background-color: rgb(255, 31, 10) !important;
  color: #fff !important;
}

/* --- Mobile header: dark bg --- */
.header-main .mobile-nav a {
  color: #fff !important;
}

/* Mobile sidebar/off-canvas: dark */
#main-menu.mobile-sidebar-menu,
.off-canvas-left,
.off-canvas-right,
.mfp-content .mobile-sidebar-menu {
  background-color: #1F1F1F !important;
}

.off-canvas-left .nav-sidebar li a,
.off-canvas-right .nav-sidebar li a,
.mobile-sidebar-menu .nav-sidebar li a {
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
}

.off-canvas-left .nav-sidebar li a:hover,
.off-canvas-right .nav-sidebar li a:hover,
.mobile-sidebar-menu .nav-sidebar li a:hover {
  color: rgb(255, 31, 10) !important;
}

/* --- Remove any default Flatsome bg colors from header --- */
.header-bg-color,
.header-bg-image {
  background-color: #111111 !important;
}

/* --- Transparent header pages: override to dark --- */
.transparent .header-wrapper,
.transparent .header-main {
  background-color: #111111 !important;
}

/* --- Search dropdown: dark theme --- */
.header-search-dropdown {
  background-color: #1F1F1F !important;
  border: 1px solid #333 !important;
}

.header-search-dropdown input[type="text"],
.header-search-dropdown input[type="search"] {
  background-color: #333 !important;
  color: #fff !important;
  border: none !important;
}

.header-search-dropdown input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}