@reference "tailwindcss";

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply m-0 bg-white;
  }

  img,
  svg {
    @apply block max-w-full;
  }

  a {
    color: inherit;
  }
}

@layer components {
  .kw-template {
    @apply min-w-0 overflow-x-hidden bg-white text-slate-950 antialiased;
    color: var(--text-heading);
    font-family: var(--font-sans);
  }

  .kw-mobile-summary {
    @apply hidden;
  }

  .kw-mobile-header {
    @apply hidden;
  }

  .kw-shell {
    @apply mx-auto w-full px-6;
    max-width: 1180px;
  }

  .kw-vehicle-bar {
    @apply flex min-h-16 items-center justify-between gap-6 border-b border-slate-200 py-3;
  }

  .kw-vehicle-facts {
    @apply flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2;
  }

  .kw-vehicle-primary {
    @apply border-b-2 border-blue-700 pb-1 text-sm font-bold text-blue-700 no-underline;
  }

  .kw-vehicle-fact {
    @apply text-sm text-slate-600;
  }

  .kw-button {
    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-6 py-3 text-center text-sm font-bold no-underline transition-colors duration-150;
  }

  .kw-button-primary {
    @apply bg-blue-700 text-white hover:bg-blue-800;
  }

  .kw-button-secondary {
    @apply border border-slate-200 bg-white text-slate-950 hover:bg-slate-100;
  }

  .kw-button-light {
    @apply bg-white text-blue-800 hover:bg-blue-50;
  }

  .kw-hero {
    @apply grid grid-cols-2 gap-11 py-10;
  }

  .kw-gallery {
    @apply min-w-0;
  }

  .kw-gallery-state,
  .kw-faq-state {
    @apply absolute -left-[10000px];
  }

  .kw-gallery-stage {
    @apply relative overflow-hidden rounded-3xl border border-slate-200 bg-white;
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow-card);
  }

  .kw-gallery-slide {
    @apply absolute inset-0 flex items-center justify-center p-8 opacity-0 transition-opacity duration-300;
  }

  .kw-gallery-slide img {
    @apply h-full w-full object-contain;
  }

  #kw-slide-1:checked ~ .kw-gallery-stage .kw-gallery-slide:nth-child(1),
  #kw-slide-2:checked ~ .kw-gallery-stage .kw-gallery-slide:nth-child(2),
  #kw-slide-3:checked ~ .kw-gallery-stage .kw-gallery-slide:nth-child(3) {
    @apply opacity-100;
  }

  .kw-fit-notice {
    @apply mt-4 flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3;
    box-shadow: var(--shadow-popover);
  }

  .kw-icon-disc {
    @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-700 text-white;
  }

  .kw-fit-notice-title {
    @apply m-0 text-sm font-bold text-slate-950;
  }

  .kw-fit-notice-copy {
    @apply m-0 text-xs leading-5 text-slate-500;
  }

  .kw-gallery-thumbs {
    @apply mt-4 grid grid-cols-4 gap-3;
  }

  .kw-gallery-thumb {
    @apply flex cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-slate-200 bg-white p-2 transition-colors duration-150;
    aspect-ratio: 1 / 1;
  }

  .kw-gallery-thumb img {
    @apply h-full w-full object-contain;
  }

  #kw-slide-1:checked ~ .kw-gallery-thumbs label:nth-child(1),
  #kw-slide-2:checked ~ .kw-gallery-thumbs label:nth-child(2),
  #kw-slide-3:checked ~ .kw-gallery-thumbs label:nth-child(3) {
    @apply border-2 border-blue-700;
  }

  .kw-product-intro {
    @apply flex min-w-0 flex-col items-start gap-5 pt-1;
  }

  .kw-pill {
    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-bold uppercase tracking-wider text-blue-700;
  }

  .kw-product-title {
    @apply m-0 text-5xl font-extrabold leading-[0.98] tracking-tight text-slate-950;
  }

  .kw-product-copy {
    @apply m-0 max-w-2xl text-base leading-7 text-slate-600;
  }

  .kw-feature-panel {
    @apply w-full rounded-2xl bg-slate-50 p-6;
  }

  .kw-eyebrow {
    @apply m-0 text-xs font-bold uppercase tracking-widest text-blue-700;
  }

  .kw-feature-list {
    @apply mt-4 grid gap-4;
  }

  .kw-feature-row {
    @apply flex items-start gap-3;
  }

  .kw-feature-icon {
    @apply mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center text-blue-700;
  }

  .kw-feature-title {
    @apply m-0 text-sm font-bold text-slate-950;
  }

  .kw-feature-copy {
    @apply m-0 text-xs leading-5 text-slate-500;
  }

  .kw-section {
    @apply py-12;
  }

  .kw-section-soft {
    @apply bg-slate-50;
  }

  .kw-section-heading {
    @apply m-0 text-center text-3xl font-bold tracking-tight text-slate-950;
  }

  .kw-section-subtitle {
    @apply mx-auto mt-3 max-w-2xl text-center text-sm leading-6 text-slate-500;
  }

  .kw-contained-grid {
    @apply mt-8 grid grid-cols-5 gap-4;
  }

  .kw-contained-card {
    @apply flex min-h-40 flex-col items-center justify-start rounded-2xl border border-slate-100 bg-white p-5 text-center;
  }

  .kw-contained-icon {
    @apply mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-50 text-indigo-500;
  }

  .kw-contained-title {
    @apply m-0 text-xs font-bold uppercase leading-5 tracking-wide text-slate-950;
  }

  .kw-contained-copy {
    @apply m-0 mt-1 text-xs leading-5 text-slate-500;
  }

  .kw-offers-wrap {
    @apply rounded-[2.5rem] bg-slate-100 px-16 py-14;
  }

  .kw-offer-grid {
    @apply mx-auto mt-8 grid max-w-4xl grid-cols-2 gap-5;
  }

  .kw-offer-card {
    @apply relative flex min-h-[390px] flex-col overflow-hidden rounded-2xl p-8;
  }

  .kw-offer-standard {
    @apply border-2 border-blue-700 bg-white;
    box-shadow: var(--shadow-card);
  }

  .kw-offer-premium {
    @apply border border-transparent text-white;
    background: var(--surface-premium-gradient);
    box-shadow: var(--shadow-brand-glow);
  }

  .kw-ribbon {
    @apply absolute right-6 top-0 bg-blue-700 px-5 py-2 text-[10px] font-bold uppercase tracking-widest text-white;
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
  }

  .kw-offer-eyebrow {
    @apply mb-2 mt-3 text-xs font-bold uppercase tracking-widest text-blue-700;
  }

  .kw-offer-premium .kw-offer-eyebrow {
    @apply text-blue-100;
  }

  .kw-offer-title {
    @apply m-0 text-2xl font-bold;
  }

  .kw-offer-subtitle {
    @apply m-0 mt-2 text-sm text-slate-500;
  }

  .kw-offer-premium .kw-offer-subtitle {
    @apply text-blue-100;
  }

  .kw-offer-features {
    @apply my-7 grid flex-1 gap-4 border-t border-slate-200 pt-6;
  }

  .kw-offer-premium .kw-offer-features {
    @apply border-white/20;
  }

  .kw-offer-feature {
    @apply flex items-center gap-3 text-sm font-medium;
  }

  .kw-offer-action {
    @apply mt-auto;
  }

  .kw-section-title-row {
    @apply mb-8 flex items-center gap-4;
  }

  .kw-section-title-row-subsection {
    @apply mt-12;
  }

  .kw-section-title-mark {
    @apply h-0.5 w-16 bg-blue-700;
  }

  .kw-section-title {
    @apply m-0 text-3xl font-bold tracking-tight text-slate-950;
  }

  .kw-product-detail-grid {
    @apply grid grid-cols-2 gap-8;
  }

  .kw-product-detail-card {
    @apply overflow-hidden rounded-2xl border border-slate-200 bg-white;
  }

  .kw-detail-media {
    @apply flex h-72 items-center justify-center bg-white p-7;
  }

  .kw-detail-media img {
    @apply h-full w-full object-contain;
  }

  .kw-detail-body {
    @apply border-t border-slate-100 p-6;
  }

  .kw-detail-kicker {
    @apply m-0 text-xs font-bold uppercase tracking-widest text-blue-700;
  }

  .kw-detail-title {
    @apply m-0 mt-2 text-2xl font-bold text-slate-950;
  }

  .kw-detail-copy {
    @apply m-0 mt-3 text-sm leading-6 text-slate-600;
  }

  .kw-compatibility-section {
    @apply scroll-mt-4;
  }

  .kw-compatibility-intro {
    @apply m-0 mb-6 max-w-2xl text-sm leading-6 text-slate-600;
  }

  .kw-compatibility-card {
    @apply overflow-hidden rounded-2xl border border-slate-200 bg-white;
    box-shadow: var(--shadow-card);
  }

  .kw-compatibility-table {
    @apply w-full table-fixed border-collapse text-left;
  }

  .kw-compatibility-table thead {
    @apply bg-blue-700 text-white;
  }

  .kw-compatibility-table th {
    @apply px-5 py-4 text-xs font-bold uppercase tracking-wide;
  }

  .kw-compatibility-table th:nth-child(1) {
    @apply w-[34%];
  }

  .kw-compatibility-table th:nth-child(2) {
    @apply w-[28%];
  }

  .kw-compatibility-table th:nth-child(3) {
    @apply w-[21%];
  }

  .kw-compatibility-table th:nth-child(4) {
    @apply w-[17%];
  }

  .kw-compatibility-table tbody tr:nth-child(even) {
    @apply bg-slate-50;
  }

  .kw-compatibility-table td {
    @apply border-t border-slate-100 px-5 py-4 align-top text-sm leading-6 text-slate-700;
  }

  .kw-compatibility-table td:first-child {
    @apply text-xs font-medium leading-5 text-slate-600;
  }

  .kw-compatibility-table td:nth-child(2) {
    @apply font-semibold text-slate-950;
  }

  .kw-spec-grid {
    @apply mt-8 grid grid-cols-2 gap-10;
  }

  .kw-spec-heading {
    @apply mb-4 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-blue-700;
  }

  .kw-spec-table {
    @apply w-full overflow-hidden rounded-2xl border-separate border-spacing-0 text-sm;
  }

  .kw-spec-table tr:nth-child(odd) {
    @apply bg-slate-100;
  }

  .kw-spec-table tr:nth-child(even) {
    @apply bg-white;
  }

  .kw-spec-table th,
  .kw-spec-table td {
    @apply px-5 py-4;
  }

  .kw-spec-table th {
    @apply text-left text-xs font-medium text-slate-600;
  }

  .kw-spec-table td {
    @apply text-right text-xs font-semibold text-slate-950;
  }

  .kw-notice-grid {
    @apply grid grid-cols-2 items-start gap-6;
  }

  .kw-notice-card {
    @apply rounded-2xl border border-slate-200 bg-slate-50 p-6;
  }

  .kw-notice-title {
    @apply mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-blue-700;
  }

  .kw-notice-copy {
    @apply m-0 text-sm leading-6 text-slate-600;
  }

  .kw-manual-links {
    @apply mt-5 flex flex-wrap gap-3;
  }

  .kw-manual-link {
    @apply inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-3 text-xs font-bold text-blue-700 no-underline hover:border-blue-700;
  }

  .kw-manual-panel {
    @apply mt-5 overflow-hidden rounded-xl border border-slate-200 bg-white;
  }

  .kw-manual-heading {
    @apply flex items-center px-4 py-3.5;
  }

  .kw-manual-summary-main {
    @apply flex min-w-0 items-center gap-3;
  }

  .kw-manual-summary-icon {
    @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-700;
  }

  .kw-manual-summary-copy {
    @apply flex min-w-0 flex-col;
  }

  .kw-manual-summary-title {
    @apply text-sm font-bold text-slate-950;
  }

  .kw-manual-summary-count {
    @apply mt-0.5 text-xs text-slate-500;
  }

  .kw-manual-list {
    @apply border-t border-slate-200;
  }

  .kw-manual-item {
    @apply flex min-w-0 items-center gap-3 border-t border-slate-100 px-4 py-3 text-xs font-semibold text-slate-700 no-underline transition-colors duration-150 first:border-t-0 hover:bg-blue-50 hover:text-blue-700;
  }

  .kw-manual-item-icon {
    @apply shrink-0 text-blue-700;
  }

  .kw-manual-item-icon .kw-icon,
  .kw-manual-item-action {
    @apply h-4 w-4;
  }

  .kw-manual-item-label {
    @apply min-w-0 flex-1;
  }

  .kw-manual-item-action {
    @apply shrink-0 text-slate-400;
  }

  .kw-more-offers-grid {
    @apply grid grid-cols-2 gap-6;
  }

  .kw-more-offer-card {
    @apply flex min-w-0 items-center gap-6 rounded-2xl border border-slate-200 bg-white p-6 no-underline transition-all duration-150 hover:border-blue-700;
    box-shadow: var(--shadow-card);
  }

  .kw-more-offer-card:hover {
    box-shadow: var(--shadow-card-hover);
  }

  .kw-more-offer-media {
    @apply flex h-40 w-40 shrink-0 items-center justify-center rounded-xl bg-slate-50 p-2;
  }

  .kw-more-offer-image {
    @apply h-full w-full object-contain;
  }

  .kw-more-offer-action {
    @apply flex min-w-0 items-center gap-2 text-sm font-bold text-blue-700;
  }

  .kw-brand-strip {
    @apply grid grid-cols-5 items-center gap-8 rounded-2xl border border-slate-100 bg-white px-10 py-10;
  }

  .kw-brand-logo {
    @apply h-8 w-full max-w-40 justify-self-center object-contain;
    filter: brightness(0);
    opacity: 0.35;
  }

  .kw-faq-list {
    @apply mx-auto mt-8 grid max-w-4xl gap-3;
  }

  .kw-faq-item {
    @apply overflow-hidden rounded-xl border border-slate-100 bg-white;
  }

  .kw-faq-label {
    @apply flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-sm font-semibold text-slate-950;
  }

  .kw-faq-label::after {
    @apply text-lg font-normal text-slate-500;
    content: "+";
  }

  .kw-faq-answer {
    @apply hidden border-t border-slate-100 px-6 py-5 text-sm leading-6 text-slate-600;
  }

  #kw-faq-1:checked ~ .kw-faq-label::after,
  #kw-faq-2:checked ~ .kw-faq-label::after,
  #kw-faq-3:checked ~ .kw-faq-label::after,
  #kw-faq-4:checked ~ .kw-faq-label::after {
    content: "−";
  }

  #kw-faq-1:checked ~ .kw-faq-answer,
  #kw-faq-2:checked ~ .kw-faq-answer,
  #kw-faq-3:checked ~ .kw-faq-answer,
  #kw-faq-4:checked ~ .kw-faq-answer {
    @apply block;
  }

  .kw-footer {
    @apply border-t border-slate-200 bg-slate-50 py-10 text-center;
  }

  .kw-wordmark {
    @apply text-2xl font-bold uppercase tracking-wide text-blue-700;
    font-family: var(--font-condensed);
  }

  .kw-footer-copy {
    @apply mx-auto mt-3 max-w-xl text-xs leading-5 text-slate-500;
  }

  .kw-tags {
    @apply hidden;
  }

  .kw-icon {
    @apply h-5 w-5 shrink-0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }
}

@media (max-width: 900px) {
  .kw-shell {
    @apply px-5;
  }

  .kw-vehicle-bar {
    @apply items-start;
  }

  .kw-vehicle-facts {
    @apply gap-x-4;
  }

  .kw-hero {
    @apply gap-7;
  }

  .kw-product-title {
    @apply text-4xl;
  }

  .kw-contained-grid {
    @apply grid-cols-3;
  }

  .kw-contained-card:nth-child(4),
  .kw-contained-card:nth-child(5) {
    @apply col-span-1;
  }

  .kw-offers-wrap {
    @apply px-8;
  }
}

@media (max-width: 700px) {
  .kw-template {
    @apply pb-0;
  }

  .kw-mobile-header {
    @apply flex min-h-16 items-center justify-between border-b border-slate-200 bg-white px-5;
  }

  .kw-mobile-header-icon {
    @apply text-slate-950;
  }

  .kw-vehicle-bar {
    @apply hidden;
  }

  .kw-shell {
    @apply px-4;
  }

  .kw-hero {
    @apply flex flex-col gap-6 py-5;
  }

  .kw-gallery {
    @apply order-1;
  }

  .kw-product-intro {
    @apply order-2 gap-4;
  }

  .kw-gallery-stage {
    @apply rounded-2xl;
    aspect-ratio: 1 / 1;
  }

  .kw-gallery-slide {
    @apply p-5;
  }

  .kw-fit-notice {
    @apply mt-3 px-3 py-3;
  }

  .kw-fit-notice-copy {
    @apply hidden;
  }

  .kw-gallery-thumbs {
    @apply grid-cols-2 gap-2;
  }

  .kw-product-title {
    @apply text-4xl leading-none;
  }

  .kw-product-copy {
    @apply text-sm leading-6;
  }

  .kw-feature-panel {
    @apply p-5;
  }

  .kw-section {
    @apply py-9;
  }

  .kw-section-heading,
  .kw-section-title {
    @apply text-2xl;
  }

  .kw-contained-grid {
    @apply grid-cols-2 gap-3;
  }

  .kw-contained-card {
    @apply min-h-36 p-4;
  }

  .kw-contained-card:last-child {
    @apply col-span-2;
  }

  .kw-offers-wrap {
    @apply rounded-none px-4 py-9;
  }

  .kw-offer-grid,
  .kw-product-detail-grid,
  .kw-spec-grid,
  .kw-notice-grid,
  .kw-more-offers-grid {
    @apply grid-cols-1 gap-5;
  }

  .kw-more-offer-card {
    @apply gap-4 p-4;
  }

  .kw-more-offer-media {
    @apply h-32 w-32;
  }

  .kw-offer-card {
    @apply min-h-0 p-6;
  }

  .kw-offer-premium {
    background: var(--surface-premium-solid);
  }

  .kw-section-title-row {
    @apply mb-6 gap-3;
  }

  .kw-section-title-mark {
    @apply w-9;
  }

  .kw-detail-media {
    @apply h-64;
  }

  .kw-compatibility-intro {
    @apply mb-5;
  }

  .kw-compatibility-table,
  .kw-compatibility-table tbody {
    @apply block w-full;
  }

  .kw-compatibility-table thead {
    @apply hidden;
  }

  .kw-compatibility-table tr {
    @apply block border-t border-slate-200 p-4;
  }

  .kw-compatibility-table tr:first-child {
    @apply border-t-0;
  }

  .kw-compatibility-table td,
  .kw-compatibility-table td:first-child,
  .kw-compatibility-table td:nth-child(2) {
    @apply grid grid-cols-[7rem_minmax(0,1fr)] gap-3 border-0 px-0 py-2 text-left text-sm font-normal leading-5 text-slate-700;
  }

  .kw-compatibility-table td::before {
    @apply text-[10px] font-bold uppercase leading-5 tracking-wide text-blue-700;
    content: attr(data-label);
  }

  .kw-spec-grid {
    @apply mt-6;
  }

  .kw-brand-strip {
    @apply grid-cols-2 gap-7 px-6 py-8;
  }

  .kw-brand-logo:last-child {
    @apply col-span-2;
  }

  .kw-faq-label {
    @apply px-5 py-4 text-left;
  }

  .kw-faq-answer {
    @apply px-5 py-4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .kw-gallery-slide,
  .kw-button {
    transition: none;
  }
}