/* =========================================================
   CONFIGURADOR DE BASE
   ========================================================= */

#kit-base-page,
#kit-base-page * {
  box-sizing: border-box;
}

#kit-base-page [hidden] {
  display: none !important;
}

#kit-base-page {
  --kb-blue: #075ff5;
  --kb-blue-dark: #064fc9;
  --kb-navy: #07183f;
  --kb-text: #172342;
  --kb-muted: #687592;

  --kb-line: #d9dde4;
  --kb-soft-line: #e5e8ed;

  --kb-gray-50: #f7f8f9;
  --kb-gray-100: #f1f2f4;
  --kb-gray-150: #edeef1;
  --kb-gray-200: #e7e8eb;
  --kb-gray-300: #d8dbe0;

  --kb-render-top: #ebecef;
  --kb-render-mid: #e7e8eb;
  --kb-render-bottom: #e9eaed;

  --kb-panel-soft: #f7f8fa;
  --kb-success: #4267c4;

  --kb-radius: 18px;

  --kb-shadow-soft:
    0 15px 45px
    rgba(45, 51, 61, 0.09);

  --kb-shadow-card:
    0 10px 25px
    rgba(45, 51, 61, 0.09);

  --kb-shadow-card-hover:
    0 13px 30px
    rgba(45, 51, 61, 0.12);

  --kb-shadow-control:
    0 7px 20px
    rgba(45, 51, 61, 0.10);

  --kb-shadow-small:
    0 4px 12px
    rgba(45, 51, 61, 0.09);

  width: 100%;

  padding:
    clamp(12px, 2vw, 28px);

  color:
    var(--kb-text);

  font-family:
    "Montserrat",
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  background:
    linear-gradient(
      180deg,
      #f2f4f7 0%,
      #f0f2f5 100%
    );
}

  

/* =========================================================
   RESET LOCAL
   ========================================================= */

#kit-base-page button,
#kit-base-page input {
  font: inherit;
}

#kit-base-page button,
#kit-base-page a {
  -webkit-tap-highlight-color:
    transparent;
}

#kit-base-page img {
  display: block;
  max-width: 100%;
}

  /* =========================================================
CONTROLE DE SCROLL DOS MODAIS
========================================================= */

html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

body.kb-modal-open {
    overflow: hidden;
}
  /* Remove o contorno preto ao clicar */
#kit-base-page .kb-kit-inline-details:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

#kit-base-page .kb-shell {
  width:
    min(1460px, 100%);

  margin:
    0 auto;

  padding:
    clamp(18px, 2.2vw, 34px);

  border:
    1px solid
    #dde1e7;

  border-radius:
    24px;

  background:
    rgba(255, 255, 255, 0.98);

  box-shadow:
    var(--kb-shadow-soft);
}
/* =========================================================
   BANNER TOPO
   ========================================================= */

#kit-base-page .kb-top-banner {
  width: min(1460px, 100%);

  margin:
    0 auto 20px;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    #ffffff;

  box-shadow:
    0 10px 30px
    rgba(45, 51, 61, 0.08);
}


#kit-base-page .kb-top-banner picture {
  display:
    block;

  width:
    100%;
}


#kit-base-page .kb-top-banner img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  object-fit:
    cover;
}

  #kit-base-page [data-kit-simulation-main],
#kit-base-page .kb-kit-simulation-thumb img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

  /* =========================================================
   PROTEÇÃO DAS IMAGENS DO RESUMO FINAL
   ========================================================= */

#kit-base-page [data-kit-summary] img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
  

/* =========================================================
   BANNER MOBILE
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page .kb-top-banner {
    width: 100%;
    margin: 4% 0;
    border-radius: 0;
  }

}

/* =========================================================
   CABEÇALHO
   ========================================================= */

#kit-base-page .kb-heading {
  display: flex;

  align-items:
    flex-start;

  gap:
    18px;

  margin-bottom:
    24px;
}


#kit-base-page .kb-step-number {
  display: grid;

  flex:
    0 0 54px;

  width:
    54px;

  height:
    54px;

  place-items:
    center;

  border-radius:
    50%;

  color:
    #fff;

  font-size:
    27px;

  line-height:
    1;

  background:
    linear-gradient(
      145deg,
      #1675ff,
      #004bd5
    );

  box-shadow:
    0 8px 20px
    rgba(45, 51, 61, 0.15);
}


#kit-base-page .kb-heading h1,
#kit-base-page .kb-personalizer h2,
#kit-base-page .kb-control-group h3,
#kit-base-page p {
  margin: 0;
}


#kit-base-page .kb-heading h1 {
  color:#1a3068;
  font-size:
    clamp(25px, 2.5vw, 38px);
  font-weight: 500;
}


#kit-base-page .kb-heading p {
  color:
    var(--kb-muted);

  font-size:
    clamp(14px, 1.25vw, 18px);
}


/* =========================================================
   LISTA DE BASES
   ========================================================= */

#kit-base-page .kb-base-list {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    14px;

  margin-bottom:
    20px;
}


#kit-base-page .kb-base-card {
  position:
    relative;
  display:
    flex;
  min-width:
    0;
  min-height:
    228px;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    space-between;
  padding: 9px 8px 10px;
  overflow:
    hidden;
  border:
    1px solid
    #d8dde5;
  border-radius:
    15px;
  color:
    var(--kb-text);
  text-align:
    center;
  cursor:
    pointer;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fa 100%
    );
  box-shadow:
    0 4px 12px
    rgba(45, 51, 61, 0.035);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


#kit-base-page .kb-base-card:hover {
  border-color:
    #bcc3cd;

  transform:
    translateY(-3px);

  background:
    #fff;

  box-shadow:
    var(--kb-shadow-card-hover);
}

  

/* =========================================================
   FOCUS
   ========================================================= */

#kit-base-page .kb-base-card:focus-visible,
#kit-base-page .kb-choice-button:focus-visible,
#kit-base-page .kb-color-button:focus-visible,
#kit-base-page .kb-viewer-action:focus-visible,
#kit-base-page .kb-details-link:focus-visible,
#kit-base-page .kb-media-thumbnail:focus-visible {
  outline:
    3px solid
    rgba(7, 95, 245, 0.22);

  outline-offset:
    3px;
}


/* =========================================================
   BASE SELECIONADA
   ========================================================= */

#kit-base-page
.kb-base-card.is-selected {
  border: 2px solid #4267c4;
  background:
    #fff;
  box-shadow:
    0 10px 25px
    rgba(45, 51, 61, 0.12);
}

  #kit-base-page
.kb-product-hole-number {
  color: #1a3068;
  font-weight: 700;
}

/* =========================================================
   IMAGEM DOS CARDS
   ========================================================= */

#kit-base-page
.kb-base-card-image {
  display:
    grid;

  width:
    100%;

  height:
    160px;

  place-items:
    center;

  padding:
    3px;
}


#kit-base-page
.kb-base-card-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  mix-blend-mode:
    multiply;

  transition:
    transform 200ms ease;
}


#kit-base-page
.kb-base-card:hover
.kb-base-card-image img {
  transform:
    scale(1.035);
}


/* =========================================================
   TEXTO DOS CARDS
   ========================================================= */

#kit-base-page
.kb-base-card-title {
  display:
    block;

  min-height:
    25px;

  color:
    #35415a;

  font-size:
    clamp(14px, 1.15vw, 18px);

  font-weight:
    700;

  line-height:
    1.2;
}


#kit-base-page
.kb-base-card.is-selected
.kb-base-card-title {
  color: #1a3068;
}


#kit-base-page
.kb-base-card-meta {
  display:
    block;

  color:
    #737e93;

  font-size:
    15px;

  line-height:
    1.25;
}


/* =========================================================
   CHECK DOS CARDS
   ========================================================= */

#kit-base-page
.kb-base-card-check {
  position:
    absolute;
  top:
    10px;
  right:
    10px;
  display:
    none;
  width:
    30px;
  height:
    30px;
  padding:
    6px;
  border-radius:
    50%;
  color:
    #fff;
  background: #1a3068;
  box-shadow:
    0 7px 18px
    rgba(45, 51, 61, 0.18);
}


#kit-base-page .kb-base-card-check svg,
#kit-base-page .kb-viewer-action svg,
#kit-base-page .kb-drag-hint svg,
#kit-base-page .kb-add-cart svg {
  width:
    100%;

  height:
    100%;

  fill:
    currentColor;
}


#kit-base-page
.kb-base-card.is-selected
.kb-base-card-check {
  display:
    block;
}


/* =========================================================
   PERSONALIZAÇÃO
   ========================================================= */

#kit-base-page
.kb-personalizer {
  display:
    grid;

  grid-template-columns:
    minmax(320px, 38%)
    minmax(0, 62%);

  overflow:
    hidden;

  border:
    1.5px solid
    #b7c0cd;

  border-radius:
    var(--kb-radius);

  background:
    #f1f2f4;

  box-shadow:
    0 2px 13px
    rgba(55, 51, 61, 0.07);
}


/* =========================================================
   CONTROLES
   ========================================================= */

#kit-base-page
.kb-controls {
  padding: clamp(22px, 2.3vw, 34px);
  border-right:
    1px solid
    #dfe2e7;
  background:
    rgba(255, 255, 255, 0.90);
}


#kit-base-page
.kb-personalizer-heading h2 {
  color: #1a3068;
  font-size:
    clamp(24px, 2.2vw, 30px) !important;
  line-height:
    1.1;
  padding: 1% 0 0;
  text-align: justify;
}


#kit-base-page
.kb-personalizer-heading p {
  color:
    var(--kb-muted);

  font-size:
    clamp(13px, 1.1vw, 16px);

  line-height:
    1.45;
}


#kit-base-page
.kb-control-group {
  padding-top: 5px;
}


#kit-base-page
.kb-control-group
+
.kb-control-group {
  margin-top:
    18px;

  padding-top:
    20px;

  border-top:
    1px solid
    #dfe2e7;
}


#kit-base-page
.kb-control-group h3 {
  color: #1a3068;
  font-size: 17px;
  font-weight:
    700;
}


#kit-base-page
.kb-color-type {
  color:
    #8b95a8;
  font-size: 17px;
  font-weight:
    500;
  line-height:
    1.35;
}


#kit-base-page
.kb-color-heading {
  display:
    flex;
  flex-direction:
    column;
  gap:
    6px;
  margin-bottom: 4px;
}


#kit-base-page
.kb-color-type {
  margin-top:
    -1px;
}


/* =========================================================
   ENCAIXES
   ========================================================= */

#kit-base-page
.kb-choice-row {
  display:
    flex;
  flex-wrap:
    wrap;
  gap:
    10px;
  margin-top: 0;
}


#kit-base-page
.kb-choice-button {
  min-width:
    62px;

  height:
    46px;

  padding:
    0 16px;

  border:
    1px solid
    #d7dbe2;

  border-radius:
    10px;

  color:
    #243453;

  font-weight:
    700;

  cursor:
    pointer;

  background:
    #fff;

  box-shadow:
    0 2px 6px
    rgba(45, 51, 61, 0.035);

  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


#kit-base-page
.kb-choice-button:hover {
  border-color:
    #aeb5bf;

  box-shadow:
    var(--kb-shadow-small);
}


#kit-base-page
.kb-choice-button.is-selected {
  border-color: #4267c4;
  color: #1a3068;
  background:
    #fff;
  box-shadow: inset 0 0 0 1px #4267c4;
}


/* =========================================================
   CORES / ACABAMENTOS
   ========================================================= */

#kit-base-page
.kb-color-list {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(62px, 1fr));

  gap:
    16px 10px;
}


#kit-base-page
.kb-color-list.is-formica {
  grid-template-columns:
    repeat(5, minmax(62px, 1fr));
}


#kit-base-page
.kb-color-list.is-adhesive {
  grid-template-columns:
    repeat(5, minmax(72px, 1fr));
}


#kit-base-page
.kb-color-button {
  display:
    flex;
  min-width:
    0;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    flex-start;
  gap: 10px;
  padding:
    4px 2px;
  border:
    0;
  color:
    #596375;
  font-size:
    13px;
  line-height:
    1.2;
  text-align:
    center;
  cursor:
    pointer;
  background:
    transparent;
}


#kit-base-page
.kb-color-swatch {
  position:
    relative;

  display:
    block;

  width:
    78px;

  height:
    78px;

  flex:
    0 0 58px;

  overflow:
    hidden;

  border:
    1px solid
    #cfd4db;

  border-radius:
    8px;

  background-color:
    var(--swatch-color, #ddd);

  background-image:
    var(--swatch-image, none);

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;

  box-shadow:
    inset 0 1px 1px
      rgba(255, 255, 255, 0.32),

    0 4px 10px
      rgba(45, 51, 61, 0.10);

  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}


#kit-base-page
.kb-color-button:hover
.kb-color-swatch {
  transform:
    translateY(-2px);

  box-shadow:
    0 6px 14px
    rgba(45, 51, 61, 0.14);
}


#kit-base-page
.kb-color-button.is-selected {
  color: #1a3068;
  font-weight:
    700;
}


#kit-base-page
.kb-color-button.is-selected
.kb-color-swatch {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #4267c4, 0 6px 14px rgba(45, 51, 61, 0.14);
}


/* =========================================================
   VISUALIZADOR
   ========================================================= */

#kit-base-page
.kb-viewer {
  position:
    relative;

  display:
    flex;

  min-width:
    0;

  min-height:
    550px;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    28px;

  overflow:
    hidden;

  background:
    linear-gradient(
      180deg,
      #ebecef 0%,
      #eaebee 22%,
      #e8e9ec 40%,
      #e7e8eb 58%,
      #e8e9ec 78%,
      #e9eaed 100%
    );
}


/* =========================================================
   STAGE
   ========================================================= */

#kit-base-page
.kb-preview-stage {
  position:
    relative;

  display:
    grid;

  width:
    100%;

  min-width:
    0;

  min-height:
    420px;

  place-items:
    center;

  background:
    transparent;

  user-select:
    none;

  -webkit-user-select:
    none;
}


#kit-base-page
.kb-preview-object {
  position:
    relative;

  display:
    flex;

  width:
    min(580px, 96%);

  max-width:
    100%;

  min-width:
    0;

  height:
    420px;

  min-height:
    0;

  flex-direction:
    column;

  gap:
    14px;

  background:
    transparent;
}


/* =========================================================
   MINIATURAS
   ========================================================= */

#kit-base-page
.kb-media-thumbnails {
  position:
    relative;

  z-index:
    4;

  display:
    flex;

  width:
    100%;

  min-width:
    0;

  min-height:
    66px;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    9px;

  padding:
    4px 4px 8px;

  overflow-x:
    auto;

  scrollbar-width:
    thin;

  scroll-snap-type:
    x proximity;
}


#kit-base-page
.kb-media-thumbnail {
  position:
    relative;

  display:
    block;

  flex:
    0 0 78px;

  width:
    78px;

  height:
    58px;

  padding:
    4px;

  overflow:
    hidden;

  border:
    1px solid
    #ccd2da;

  border-radius:
    9px;

  cursor:
    pointer;

  background:
    linear-gradient(
      180deg,
      #ebecef 0%,
      #eaebee 22%,
      #e8e9ec 40%,
      #e7e8eb 58%,
      #e8e9ec 78%,
      #e9eaed 100%
    );

  box-shadow:
    0 3px 8px
    rgba(45, 51, 61, 0.055);

  scroll-snap-align:
    center;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}


#kit-base-page
.kb-media-thumbnail:hover {
  border-color:
    #aeb6c0;

  transform:
    translateY(-2px);

  box-shadow:
    0 6px 14px
    rgba(45, 51, 61, 0.12);
}


#kit-base-page
.kb-media-thumbnail.is-selected {
  border: 2px solid #4267c4;
}


#kit-base-page
.kb-media-thumbnail img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  border-radius:
    5px;

  background:
    transparent;

  mix-blend-mode:
    normal;

  pointer-events:
    none;
}


/* =========================================================
   MINIATURA 360
   ========================================================= */

#kit-base-page
.kb-media-thumbnail.is-360::after {
  content:
    "360�";

  position:
    absolute;

  right:
    4px;

  bottom:
    4px;

  padding:
    2px 5px;

  border-radius:
    999px;

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    800;

  background:
    rgba(52, 57, 66, 0.88);

  box-shadow:
    0 2px 5px
    rgba(45, 51, 61, 0.16);

  pointer-events:
    none;
}


/* =========================================================
   VíDEO - THUMB
   ========================================================= */

#kit-base-page
.kb-media-thumbnail-play {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    5;

  display:
    grid;

  width:
    30px;

  height:
    30px;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(52, 57, 66, 0.88);

  box-shadow:
    0 4px 10px
    rgba(45, 51, 61, 0.22);

  transform:
    translate(-50%, -50%);

  pointer-events:
    none;
}


#kit-base-page
.kb-media-thumbnail-play::before {
  content:
    "";

  width:
    0;

  height:
    0;

  margin-left:
    3px;

  border-top:
    6px solid transparent;

  border-bottom:
    6px solid transparent;

  border-left:
    9px solid #fff;
}


/* =========================================================
   MíDIA PRINCIPAL
   ========================================================= */

#kit-base-page
.kb-media-main {
  position:
    relative;

  display:
    grid;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  min-height:
    0;

  flex:
    1;

  place-items:
    center;

  overflow:
    hidden;

  background:
    transparent;
}


#kit-base-page
.kb-media-main.is-360 {
  cursor:
    ew-resize;

  touch-action:
    pan-y;
}


#kit-base-page
.kb-media-main.is-360.is-dragging {
  cursor:
    grabbing;
}


/* =========================================================
   IMAGEM PRINCIPAL
   ========================================================= */

#kit-base-page
.kb-media-image {
  display:
    block;

  width:
    auto;

  max-width:
    80%;

  height:
    100%;

  max-height:
    380px;

  object-fit:
    contain;

  background:
    transparent;

  mix-blend-mode:
    normal;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  pointer-events:
    none;
}


#kit-base-page
.kb-media-main.is-360
.kb-media-image {
  filter:
    none !important;
}


/* =========================================================
   VíDEO
   ========================================================= */

#kit-base-page
.kb-media-video {
  display:
    block;

  width:
    100%;

  height:
    100%;

  max-height:
    380px;

  border:
    0;

  object-fit:
    contain;

  background:
    #202124;

  box-shadow:
    0 8px 22px
    rgba(45, 51, 61, 0.16);
}


#kit-base-page
.kb-media-youtube {
  width:
    min(580px, 100%);

  height:
    auto;

  aspect-ratio:
    16 / 9;

  max-height:
    330px;

  border:
    0;

  border-radius:
    8px;

  background:
    #202124;

  box-shadow:
    0 10px 28px
    rgba(45, 51, 61, 0.18);
}


/* =========================================================
   INDICADOR 360
   ========================================================= */

#kit-base-page
.kb-360-indicator {
  position:
    absolute;

  left:
    50%;

  bottom:
    10px;

  z-index:
    5;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    3px 10px;

  border:
    1px solid
    #d4d8df;

  border-radius:
    999px;

  color:
    #5a6270;

  font-size:
    11px;

  font-weight:
    700;

  background:
    rgba(255, 255, 255, 0.93);

  box-shadow:
    var(--kb-shadow-small);

  transform:
    translateX(-50%);

  pointer-events:
    none;

  backdrop-filter:
    blur(4px);
}


#kit-base-page
.kb-360-indicator svg {
  width:
    21px;

  height:
    21px;

  fill:
    currentColor;
}


/* =========================================================
   LOADING 360
   ========================================================= */

#kit-base-page
.kb-360-loading {
  position:
    absolute;

  inset:
    0;

  z-index:
    7;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  color:
    #636b78;

  font-size:
    12px;

  font-weight:
    600;

  background:
    rgba(232, 233, 236, 0.86);

  backdrop-filter:
    blur(2px);

  pointer-events:
    none;
}


#kit-base-page
.kb-360-spinner {
  width:
    23px;

  height:
    23px;

  border:
    3px solid
    #d1d4d9;

  border-top-color:
    #747b85;

  border-radius:
    50%;

  animation:
    kb-360-spin
    0.75s
    linear
    infinite;
}


@keyframes kb-360-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   BADGE
   ========================================================= */

#kit-base-page
.kb-preview-badge {
  position:
    absolute;

  right:
    0;

  bottom:
    8px;

  padding:
    7px 10px;

  border:
    1px solid
    #d5d9df;

  border-radius:
    999px;

  color:
    #626a77;

  font-size:
    11px;

  font-weight:
    700;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 3px 10px
    rgba(45, 51, 61, 0.07);
}


/* =========================================================
   DICA DE ARRASTE
   ========================================================= */

#kit-base-page
.kb-drag-hint {
  position:
    absolute;

  bottom:
    26px;

  left:
    34px;

  z-index:
    6;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #666f7e;

  font-size:
    13px;

  pointer-events:
    none;
}


#kit-base-page
.kb-drag-hint svg {
  width:
    25px;

  height:
    25px;
}


/* =========================================================
   PAINEL INFERIOR / RESUMO
   ========================================================= */

#kit-base-page
.kb-product-panel {
  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    18px;

  margin-top:
    16px;

  padding:
    16px 18px;

  border:
    1px solid
    #cbd1da;

  border-radius:
    15px;

  background:
    #fff;

  box-shadow:
    0 8px 24px
    rgba(45, 51, 61, 0.10);
}


/* =========================================================
   MINIATURA DO PRODUTO
   ========================================================= */

#kit-base-page
.kb-product-thumb {
  display:
    grid;
  width:
    72px;
  height:
    72px;
  place-items:
    center;
  overflow:
    hidden;
  border:
    1px solid
    #dce0e6;
  border-radius:
    14px;
  background: #ffffff;
  box-shadow:
    0 3px 9px
    rgba(45, 51, 61, 0.06);
}


#kit-base-page
.kb-product-thumb img {
  width:
    88%;

  height:
    88%;

  object-fit:
    contain;

  background:
    transparent;

  mix-blend-mode:
    normal;
}


#kit-base-page
.kb-product-content {
  min-width:
    0;
}


/* =========================================================
   TíTULO DO RESUMO
   ========================================================= */

#kit-base-page
.kb-product-summary-title {
  margin:
    0 0 3px;
  color:
    #657085;
  font-size: clamp(24px, 2vw, 30px)!important;
  font-weight:
    700;
  line-height:
    1;
  text-align: left;
  padding: 0;
}


/* =========================================================
   INFORMAçõES DO RESUMO
   ========================================================= */

#kit-base-page
.kb-product-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    5px 12px;

  color:
    #3d4657;

  font-size:
    clamp(13px, 1.1vw, 17px);
}


#kit-base-page
.kb-product-meta strong {
  color: #1a3068;
  font-weight:
    700;
}


#kit-base-page
.kb-product-content p {
  margin-top:
    4px;

  color:
    #8a95a8;

  font-size:
    13px;

  line-height:
    1.35;
}


/* =========================================================
   AçES DO PRODUTO
   ========================================================= */

#kit-base-page
.kb-product-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


#kit-base-page
.kb-add-cart,
#kit-base-page
.kb-details-link {
  display:
    inline-flex;

  min-height:
    46px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    10px 16px;

  border-radius:
    9px;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


/* =========================================================
   BOTãO CARRINHO
   ========================================================= */

#kit-base-page
.kb-add-cart {
  border:
    0;
  color:
    #fff;
  cursor:
    pointer;
  background: linear-gradient(
      135deg,   
      #1a3068
    );
  box-shadow:
    0 8px 20px
    rgba(45, 51, 61, 0.16);
}


#kit-base-page
.kb-add-cart:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 25px
    rgba(45, 51, 61, 0.20);
}


#kit-base-page
.kb-add-cart svg {
  width:
    20px;

  height:
    20px;
}


/* =========================================================
   MAIS DETALHES
   ========================================================= */

#kit-base-page
.kb-details-link {
  border:
    1px solid
    #c9ced7;

  color:
    #1a3068;

  background:
    #fff;

  box-shadow:
    0 3px 9px
    rgba(45, 51, 61, 0.055);
}


#kit-base-page
.kb-details-link:hover {
  background:
    #f4f5f7;

  box-shadow:
    0 5px 12px
    rgba(45, 51, 61, 0.10);
}


/* =========================================================
   DESKTOP COMPACTO
   769px ATé 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page {
    padding:
      10px;
    margin-top: 7%;
  }


  #kit-base-page
  .kb-shell {
    padding:
      16px;

    border-radius:
      18px;
  }


  #kit-base-page
  .kb-heading {
    gap:
      12px;

    margin-bottom:
      16px;
  }


  #kit-base-page
  .kb-step-number {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;

    font-size:
      22px;
  }


  #kit-base-page
  .kb-heading h1 {
    font-size:
      26px;
  }


  #kit-base-page
  .kb-heading p {
    font-size:
      13px;
  }


  #kit-base-page
  .kb-base-list {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap:
      7px;

    margin-bottom:
      14px;
  }


  #kit-base-page
  .kb-base-card {
    min-height:
      166px;

    padding:
      8px 5px 9px;

    border-radius:
      11px;
  }


  #kit-base-page
  .kb-base-card-image {
    height:
      100px;

    padding:
      1px;
  }


  #kit-base-page
  .kb-base-card-title {
    min-height:
      17px;

    font-size:
      14px;

    line-height:
      1.15;
  }


  #kit-base-page
  .kb-base-card-meta {
    margin-top:
      2px;
    font-size: 11px;
    line-height:
      1.15;
  }


  #kit-base-page
  .kb-base-card-check {
    top:
      6px;

    right:
      6px;

    width:
      22px;

    height:
      22px;

    padding:
      4px;
  }


  #kit-base-page
  .kb-personalizer {
    grid-template-columns:
      minmax(285px, 39%)
      minmax(0, 61%);
  }


  #kit-base-page
  .kb-controls {
    min-width:
      0;

    padding:
      18px 14px;

    overflow:
      hidden;
  }


  #kit-base-page
  .kb-personalizer-heading h2 {
    padding:
      0;

    font-size:
      21px !important;
  }


  #kit-base-page
  .kb-personalizer-heading p {
    font-size:
      11px;
  }


  #kit-base-page
  .kb-control-group {
    padding-top:
      16px;
  }


  #kit-base-page
  .kb-control-group
  +
  .kb-control-group {
    margin-top:
      13px;

    padding-top:
      14px;
  }


  #kit-base-page
  .kb-control-group h3 {
    font-size:
      12px;
  }


  #kit-base-page
  .kb-color-type {
    font-size:
      10px;
  }


  #kit-base-page
  .kb-color-heading {
    gap:
      4px;

    margin-bottom:
      10px;
  }


  #kit-base-page
  .kb-choice-row {
    display:
      grid;

    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap:
      4px;

    width:
      100%;

    margin-top:
      9px;
  }


  #kit-base-page
  .kb-choice-button {
    width:
      100%;

    min-width:
      0;

    height:
      38px;

    padding:
      0 1px;

    border-radius:
      7px;

    font-size:
      12px;
  }


  #kit-base-page
  .kb-color-list,
  #kit-base-page
  .kb-color-list.is-formica {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    gap:
      11px 3px;
  }


  #kit-base-page
  .kb-color-list.is-adhesive {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap:
      12px 4px;
  }


  #kit-base-page
  .kb-color-button {
    gap:
      5px;

    padding:
      2px 0;

    font-size:
      10px;
  }


  #kit-base-page
  .kb-color-swatch {
    width:
      53px;

    height:
      53px;

    flex-basis:
      50px;

    border-radius:
      6px;
  }


  #kit-base-page
  .kb-viewer {
    min-height:
      410px;

    padding:
      16px;
  }


  #kit-base-page
  .kb-preview-stage {
    min-height:
      335px;
  }


  #kit-base-page
  .kb-preview-object {
    width:
      100%;

    max-width:
      100%;

    height:
      335px;

    gap:
      7px;
  }


  #kit-base-page
  .kb-media-thumbnails {
    min-height:
      54px;

    gap:
      4px;

    padding:
      3px 0 5px;

    overflow:
      hidden;
  }


  #kit-base-page
  .kb-media-thumbnail {
    flex:
      0 0 57px;

    width:
      57px;

    height:
      45px;

    padding:
      3px;

    border-radius:
      7px;
  }


  #kit-base-page
  .kb-media-thumbnail.is-360::after {
    right:
      2px;

    bottom:
      2px;

    padding:
      1px 3px;

    font-size:
      7px;
  }


  #kit-base-page
  .kb-media-thumbnail-play {
    width:
      23px;

    height:
      23px;
  }


  #kit-base-page
  .kb-media-image {
    max-height:
      285px;
  }


  #kit-base-page
  .kb-media-video {
    max-height:
      285px;
  }


  #kit-base-page
  .kb-media-youtube {
    max-height:
      275px;
  }


  #kit-base-page
  .kb-360-indicator {
    bottom:
      5px;

    padding:
      3px 8px;

    font-size:
      9px;
  }


  #kit-base-page
  .kb-360-indicator svg {
    width:
      18px;

    height:
      18px;
  }


  #kit-base-page
  .kb-product-panel {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    gap:
      9px;

    margin-top:
      12px;

    padding:
      10px 11px;

    border-radius:
      12px;
  }


  #kit-base-page
  .kb-product-thumb {
    width:
      54px;

    height:
      54px;

    border-radius:
      10px;
  }


  #kit-base-page
  .kb-product-summary-title {
    margin-bottom:
      2px;

    font-size:
      20px;
  }


  #kit-base-page
  .kb-product-meta {
    gap:
      3px 6px;

    font-size:
      14px;
  }


  #kit-base-page
  .kb-product-content p {
    margin-top:
      3px;

    font-size:
      12px;
  }


  #kit-base-page
  .kb-product-actions {
    grid-column:
      auto;

    gap:
      5px;

    justify-content:
      flex-end;
  }


  #kit-base-page
  .kb-add-cart,
  #kit-base-page
  .kb-details-link {
    min-height:
      38px;

    padding:
      7px 9px;

    border-radius:
      7px;

    font-size:
      12px;

    white-space:
      nowrap;
  }


  #kit-base-page
  .kb-add-cart svg {
    width:
      16px;

    height:
      16px;
  }

}


/* =========================================================
   MOBILE / TABLET RETRATO
   768px OU MENOS
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page {
    width:
      100%;

    max-width:
      100%;

    padding:
      0;

    overflow-x:
      hidden;

    background:
      #ffffff;
  }


  #kit-base-page
  .kb-shell {
    width:
      90%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      18px 14px 24px;

    overflow:
      hidden;

    border:
      0;

    border-radius:
      0;

    box-shadow:
      none;

    background:
      #fff;
  }


  #kit-base-page
  .kb-heading {
    gap:
      12px;

    margin-bottom:
      18px;
  }


  #kit-base-page
  .kb-step-number {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;

    font-size:
      22px;
  }


  #kit-base-page
  .kb-heading h1 {
    font-size:
      25px;
  }


  #kit-base-page
  .kb-heading p {
    font-size:
      13px;
  }


  #kit-base-page
  .kb-base-list {
    display:
      grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      8px;

    width:
      100%;

    max-width:
      100%;

    margin:
      0 0 20px;

    padding:
      0;

    overflow:
      visible;

    scroll-snap-type:
      none;
  }


  #kit-base-page
  .kb-base-card {
    width:
      100%;

    min-width:
      0;

    min-height:
      221px;

    flex:
      none;

    padding:
      9px 6px 10px;

    border-radius:
      12px;
  }


  #kit-base-page
  .kb-base-card-image {
    width:
      100%;

    height:
      96px;

    padding:
      2px;
  }


  #kit-base-page
  .kb-base-card-image img {
    width:
      100%;

    height:
      100%;

    object-fit:
      contain;
  }


  #kit-base-page
  .kb-base-card-title {
    min-height:
      0;

    font-size:
      16px;

    line-height:
      1.15;
  }


  #kit-base-page
  .kb-base-card-meta {
    margin-top:
      3px;

    font-size:
      14px;

    line-height:
      1.15;
  }


  #kit-base-page
  .kb-base-card-check {
    top:
      7px;

    right:
      7px;

    width:
      25px;

    height:
      25px;

    padding:
      5px;
  }


  #kit-base-page
  .kb-personalizer {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    grid-template-columns:
      1fr;
  }


  #kit-base-page
  .kb-controls {
    width:
      100%;

    min-width:
      0;

    padding:
      22px 18px;

    overflow:
      hidden;

    border-right:
      0;

    border-bottom:
      1px solid
      #dfe2e7;
  }


  #kit-base-page
  .kb-personalizer-heading h2 {
    padding:
      0;

    font-size:
      23px !important;

    text-align:
      left;
  }


  #kit-base-page
  .kb-personalizer-heading p {
    font-size:
      13px;
  }


  #kit-base-page
  .kb-choice-row {
    display:
      grid;

    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap:
      6px;

    width:
      100%;

    max-width:
      100%;

    margin-top:
      12px;
  }


  #kit-base-page
  .kb-choice-button {
    width:
      100%;

    min-width:
      0;

    height:
      40px;

    padding:
      0 2px;

    border-radius:
      8px;

    font-size:
      14px;
  }


  #kit-base-page
  .kb-color-list,
  #kit-base-page
  .kb-color-list.is-formica {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    gap:
      14px 5px;
  }


  #kit-base-page
  .kb-color-list.is-adhesive {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap:
      16px 6px;
  }


  #kit-base-page
  .kb-color-swatch {
    width:
      70px;

    height:
      57px;

    flex-basis:
      61px;

    border-radius:
      7px;
  }


  #kit-base-page
  .kb-color-button {
    min-width:
      0;

    font-size:
      12px;
  }


  #kit-base-page
  .kb-viewer {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      405px;

    padding:
      14px 12px 42px;

    overflow:
      hidden;

    background:
      linear-gradient(
        180deg,
        #ebecef 0%,
        #eaebee 22%,
        #e8e9ec 40%,
        #e7e8eb 58%,
        #e8e9ec 78%,
        #e9eaed 100%
      );
  }


  #kit-base-page
  .kb-preview-stage {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      320px;

    overflow:
      hidden;

    background:
      transparent;
  }


  #kit-base-page
  .kb-preview-object {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    height:
      320px;

    min-height:
      0;

    gap:
      8px;

    overflow:
      hidden;

    background:
      transparent;
  }


  #kit-base-page
  .kb-media-thumbnails {
    display:
      grid;

    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap:
      10px;

    width:
      75%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      49px;

    padding:
      3px 0 6px;

    overflow:
      hidden;

    scrollbar-width:
      none;

    scroll-snap-type:
      none;
  }


  #kit-base-page
  .kb-media-thumbnails::-webkit-scrollbar {
    display:
      none;
  }


  #kit-base-page
  .kb-media-thumbnail {
    width:
      100%;

    min-width:
      0;

    height:
      45px;

    flex:
      none;

    padding:
      3px;

    border-radius:
      7px;

    scroll-snap-align:
      none;
  }


  #kit-base-page
  .kb-media-thumbnail img {
    width:
      100%;

    height:
      100%;

    object-fit:
      contain;

    border-radius:
      4px;

    background:
      transparent;

    mix-blend-mode:
      normal;
  }


  #kit-base-page
  .kb-media-thumbnail.is-360::after {
    right:
      2px;

    bottom:
      2px;

    padding:
      1px 3px;

    font-size:
      7px;
  }


  #kit-base-page
  .kb-media-thumbnail-play {
    width:
      24px;

    height:
      24px;
  }


  #kit-base-page
  .kb-media-thumbnail-play::before {
    margin-left:
      2px;

    border-top-width:
      5px;

    border-bottom-width:
      5px;

    border-left-width:
      7px;
  }


  #kit-base-page
  .kb-media-main {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      0;

    flex:
      1;

    overflow:
      hidden;

    background:
      transparent;
  }


  #kit-base-page
  .kb-media-image {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    height:
      auto;

    max-height:
      258px;

    margin:
      auto;

    object-fit:
      contain;

    object-position:
      center;

    background:
      transparent;
  }


  #kit-base-page
  .kb-media-main.is-360
  .kb-media-image {
    width:
      100%;

    max-width:
      100%;

    height:
      auto;

    max-height:
      258px;

    object-fit:
      contain;

    object-position:
      center;
  }


  #kit-base-page
  .kb-media-video {
    width:
      100%;

    max-width:
      100%;

    height:
      auto;

    max-height:
      258px;
  }


  #kit-base-page
  .kb-media-youtube {
    width:
      100%;

    max-width:
      100%;

    height:
      auto;

    max-height:
      258px;
  }


  #kit-base-page
  .kb-360-indicator {
    bottom:
      5px;

    padding:
      3px 8px;

    font-size:
      10px;
  }


  #kit-base-page
  .kb-360-indicator svg {
    width:
      18px;

    height:
      18px;
  }


  #kit-base-page
  .kb-drag-hint {
    bottom:
      14px;

    left:
      14px;

    max-width:
      calc(100% - 90px);

    font-size:
      10px;
  }


  #kit-base-page
  .kb-drag-hint svg {
    width:
      21px;

    height:
      21px;
  }


  #kit-base-page
  .kb-preview-badge {
    right:
      4px;

    bottom:
      4px;

    padding:
      5px 8px;

    font-size:
      9px;
  }


  /* =====================================================
     PAINEL INFERIOR MOBILE
     ===================================================== */

  #kit-base-page
  .kb-product-panel {
    position:
      relative;

    z-index:
      1;

    right:
      auto;

    bottom:
      auto;

    left:
      auto;

    display:
      grid;

    grid-template-columns:
      auto
      minmax(0, 1fr);

    align-items:
      center;

    gap:
      10px;

    width:
      100%;

    max-width:
      100%;

    margin:
      14px 0 0;

    padding:
      10px 12px;

    border:
      1px solid
      #cbd1da;

    border-radius:
      12px;

    background:
      #fff;

    box-shadow:
      0 5px 18px
      rgba(45, 51, 61, 0.08);
  }


  #kit-base-page
  .kb-product-thumb {
    width:
      54px;

    height:
      54px;

    border-radius:
      10px;
  }


  #kit-base-page
  .kb-product-content {
    min-width:
      0;
  }


  #kit-base-page
  .kb-product-summary-title {
    margin-bottom:
      2px;

    font-size:
      19px;

    line-height:
      1;
  }


  #kit-base-page
  .kb-product-meta {
    gap:
      3px 6px;

    font-size:
      15px;

    line-height:
      1.3;
  }


  #kit-base-page
  .kb-product-content p {
    display:
      block;

    margin-top:
      2px;

    font-size:
      11px;

    line-height:
      1.25;
  }


  /* =====================================================
     A��ES MOBILE
     ===================================================== */

  #kit-base-page
  .kb-product-actions {
    grid-column:
      1 / -1;

    display:
      flex;

    width:
      100%;

    min-width:
      0;

    align-items:
      center;

    justify-content:
      center;

    gap:
      8px;

    margin-top:
      2px;
  }


  #kit-base-page
  .kb-add-cart {
    flex:
      1 1 0;

    min-width:
      0;

    min-height:
      44px;

    padding:
      9px 10px;

    font-size:
      12px;

    white-space:
      nowrap;
  }


  #kit-base-page
  .kb-details-link {
    display:
      inline-flex;

    flex:
      1 1 0;

    min-width:
      0;

    min-height:
      44px;

    padding:
      9px 10px;

    font-size:
      12px;

    white-space:
      nowrap;
  }

}


/* =========================================================
   CELULARES MENORES
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page
  .kb-shell {
    padding-left: 3px;
    padding-right: 3px;
    width: 93%;
    padding-top: 10px;
  }


  #kit-base-page
  .kb-heading {
    gap:
      9px;
  }


  #kit-base-page
  .kb-step-number {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;

    font-size:
      20px;
  }


  #kit-base-page
  .kb-heading h1 {
    font-size:
      22px;
  }


  #kit-base-page
  .kb-heading p {
    font-size:
      12px;
  }


  #kit-base-page
  .kb-base-list {
    gap:
      6px;
  }


  #kit-base-page
  .kb-base-card {
    min-height:
      152px;

    padding:
      7px 4px 8px;
  }


  #kit-base-page
  .kb-base-card-image {
    height:
      86px;
  }


  #kit-base-page
  .kb-base-card-title {
    font-size:
      12px;
  }


  #kit-base-page
  .kb-base-card-meta {
    font-size: 9px;
  }


  #kit-base-page
  .kb-controls {
    padding:
      20px 14px;
  }


  #kit-base-page
  .kb-personalizer-heading h2 {
    font-size:
      21px !important;
  }


  #kit-base-page
  .kb-choice-row {
    gap:
      4px;
  }


  #kit-base-page
  .kb-choice-button {
    height:
      38px;

    font-size:
      13px;
  }


  #kit-base-page
  .kb-color-swatch {
    width:
      52px;

    height:
      52px;

    flex-basis:
      52px;
  }


  #kit-base-page
  .kb-color-button {
    font-size:
      11px;
  }


  #kit-base-page
  .kb-viewer {
    min-height:
      380px;

    padding:
      8px 8px;
  }


  #kit-base-page
  .kb-media-thumbnails {
    gap:
      3px;

    width:
      100%;
  }


  #kit-base-page
  .kb-product-panel {
    gap:
      7px;

    padding-left:
      8px;

    padding-right:
      8px;
  }


  #kit-base-page
  .kb-product-thumb {
    width:
      90px;

    height:
      90px;
  }


  #kit-base-page
  .kb-product-summary-title {
    font-size:
      17px;
  }


  #kit-base-page
  .kb-product-meta {
    font-size:
      13px;
  }


  #kit-base-page
  .kb-product-content p {
    font-size:
      10px;
  }


  #kit-base-page
  .kb-product-actions {
    gap:
      6px;
  }


  #kit-base-page
  .kb-add-cart {
    flex:
      1.35 1 0;

    min-height:
      42px;

    padding:
      8px 8px;

    font-size:
      12px;

    white-space:
      nowrap;
  }


  #kit-base-page
  .kb-details-link {
    flex:
      0.85 1 0;

    min-height:
      42px;

    padding:
      8px 7px;

    font-size:
      12px;

    white-space:
      nowrap;
  }


  #kit-base-page
  .kb-add-cart svg {
    width:
      17px;

    height:
      17px;
  }

}



/* =========================================================
   BOT�O MINI - MET�LICA PREMIUM
   ========================================================= */

#kit-base-page
.kb-choice-button-mini {
  min-width: 82px;
}

@media (min-width: 769px) and (max-width: 1024px) {
  #kit-base-page
  .kb-choice-button-mini {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  #kit-base-page
  .kb-choice-button-mini {
    min-width: 0;
  }
}

/* =========================================================
   REDU��O DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #kit-base-page *,
  #kit-base-page *::before,
  #kit-base-page *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}


/* =========================================================
   REMOVER BORDA PRETA DO BOT�O CARRINHO
   ========================================================= */

#kit-base-page .kb-add-cart,
#kit-base-page .kb-add-cart:hover,
#kit-base-page .kb-add-cart:focus,
#kit-base-page .kb-add-cart:focus-visible,
#kit-base-page .kb-add-cart:active {
  border:
    0 !important;

  outline:
    none !important;
}

/* =========================================================
   KIT BASE + MASTRO - ETAPAS
   Mant�m a mesma identidade visual da p�gina somente Base.
   ========================================================= */

/* =========================================================
   CABE�ALHO DO KIT
   ========================================================= */

#kit-base-page .kb-kit-heading {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid #e1e5eb;
}

#kit-base-page .kb-kit-heading > div:first-child {
  min-width: 0;
  margin-left: 1.3%;
}

#kit-base-page .kb-kit-eyebrow,
#kit-base-page .kb-step-label,
#kit-base-page .kb-collapsed-label,
#kit-base-page .kb-kit-summary-label {
  color: #1a3068;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  padding: 0;
}

#kit-base-page .kb-kit-heading h1 {
  margin: 0;
  color: #1a3068;
  font-size: clamp(25px, 2.5vw, 41px);
  font-weight: 700;
  line-height: 1.1;
}

#kit-base-page .kb-kit-heading p {
  margin: 3px 0 0;
  color: var(--kb-muted);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.4;
}


/* =========================================================
   INDICADOR DAS ETAPAS
   ========================================================= */

#kit-base-page .kb-kit-progress {
  display: grid;
  grid-template-columns: auto minmax(72px, 130px) auto;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  padding-top: 2px;
}

#kit-base-page .kb-kit-progress > i {
  height: 2px;
  background: #cfd6e1;
  margin-bottom: 15%;
}

#kit-base-page .kb-kit-progress-item {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #7e899c;
}

#kit-base-page .kb-kit-progress-item > span {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid #c7ced9;
  border-radius: 50%;
  color: #687592;
  font-size: 30px;
  font-weight: 700;
  background: #fff;
}

#kit-base-page .kb-kit-progress-item small {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 1rem;
}

#kit-base-page .kb-kit-progress-item.is-active,
#kit-base-page .kb-kit-progress-item.is-complete {
  color: #1a3068;
}

#kit-base-page .kb-kit-progress-item.is-active > span,
#kit-base-page .kb-kit-progress-item.is-complete > span {
  border-color: #4267c4;
  color: #fff;
  background: #1a3068;
  box-shadow: 0 6px 16px rgba(45, 51, 61, 0.14);
}


/* =========================================================
   ESPA�AMENTO ENTRE ETAPAS
   ========================================================= */

#kit-base-page .kb-step + .kb-step,
#kit-base-page .kb-kit-summary {
  margin-top: 16px;
}


/* =========================================================
   ETAPA 1 - CABE�ALHO
   ========================================================= */

#kit-base-page .kb-base-step .kb-heading {
  margin-bottom: 18px;
  margin-left: 1.3%;
}

#kit-base-page .kb-base-step .kb-heading h2 {
  margin: 0;
  color: #1a3068;
  font-size: clamp(25px, 2.5vw, 38px)!important;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
  padding: 0;
}

#kit-base-page .kb-base-step .kb-heading p {
  margin: 0;
  color: var(--kb-muted);
  font-size: clamp(14px, 1.25vw, 18px);
  padding: 0 0.4%;
}


/* =========================================================
   BOT�ES DAS ETAPAS
   Mesmo padr�o do bot�o principal da vers�o somente Base
   ========================================================= */

#kit-base-page .kb-confirm-base,
#kit-base-page .kb-confirm-mast,
#kit-base-page .kb-add-kit {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: #234293;
  box-shadow: 0 8px 20px rgba(45, 51, 61, 0.16);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

#kit-base-page .kb-confirm-base:hover,
#kit-base-page .kb-confirm-mast:hover,
#kit-base-page .kb-add-kit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(45, 51, 61, 0.20);
}

#kit-base-page .kb-confirm-base svg,
#kit-base-page .kb-confirm-mast svg,
#kit-base-page .kb-add-kit svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}


/* =========================================================
   ETAPA 1 RECOLHIDA
   ========================================================= */

#kit-base-page .kb-collapsed-summary {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #cbd1da;
  border-radius: 15px;
  color: var(--kb-text);
  text-align: left;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 8px 24px rgba(45, 51, 61, 0.10);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#kit-base-page .kb-collapsed-summary:hover {
  border-color: #aeb5bf;
  box-shadow: 0 10px 25px rgba(45, 51, 61, 0.12);
  transform: translateY(-1px);
}

#kit-base-page .kb-collapsed-thumb {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce0e6;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #ebecef 0%,
      #eaebee 22%,
      #e8e9ec 40%,
      #e7e8eb 58%,
      #e8e9ec 78%,
      #e9eaed 100%
    );
  box-shadow: 0 3px 9px rgba(45, 51, 61, 0.06);
}

#kit-base-page .kb-collapsed-thumb img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  background: transparent;
}

#kit-base-page .kb-collapsed-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

#kit-base-page .kb-collapsed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 12px;
  color: #3d4657;
  font-size: clamp(13px, 1.1vw, 17px);
}

#kit-base-page .kb-collapsed-meta strong {
  color: #1a3068;
  font-weight: 700;
}

#kit-base-page .kb-collapsed-description {
  margin-top: 1px;
  color: #8a95a8;
  font-size: 13px;
  line-height: 1.35;
}

#kit-base-page .kb-collapsed-chevron {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #1a3068;
  background: #f7f8fa;
}

#kit-base-page .kb-collapsed-chevron svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}


/* =========================================================
   ETAPA 2 - MASTROS
   ========================================================= */

#kit-base-page .kb-mast-step {
  padding: clamp(22px, 2.3vw, 22px);
  border: 1.5px solid #b7c0cd;
  border-radius: var(--kb-radius);
  background: #fff;
  box-shadow: 0 2px 13px rgba(55, 51, 61, 0.07);
}

#kit-base-page .kb-mast-heading {
  margin-bottom: 16px;
}

#kit-base-page .kb-mast-heading h2 {
    margin: 0;
    color: #1a3068;
    font-size: clamp(25px, 2.5vw, 38px) !important;
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    padding: 0;
}  

#kit-base-page .kb-mast-heading p {
  margin: 4px 0 0;
  color: var(--kb-muted);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
}

#kit-base-page .kb-mast-heading p strong {
  color: #1a3068;
  font-weight: 700;
}


/* =========================================================
   CARDS DOS MASTROS
   Mesmo padr�o visual dos cards das bases
   ========================================================= */

#kit-base-page .kb-mast-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#kit-base-page .kb-mast-list.is-single {
  grid-template-columns: minmax(280px, 1fr);
  max-width: 520px;
}

#kit-base-page .kb-mast-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 180px;
  grid-template-columns: minmax(130px, 37%) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid #d8dde5;
  border-radius: 15px;
  color: var(--kb-text);
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fa 100%
    );
  box-shadow: 0 4px 12px rgba(45, 51, 61, 0.035);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

#kit-base-page .kb-mast-card:hover {
  border-color: #bcc3cd;
  transform: translateY(-3px);
  background: #fff;
  box-shadow: var(--kb-shadow-card-hover);
}

#kit-base-page .kb-mast-card.is-selected {
  border: 2px solid #234293;
  background: #fff;
  box-shadow: 0 10px 25px rgba(45, 51, 61, 0.12);
}

#kit-base-page .kb-mast-card-image {
  display: grid;
  width: 100%;
  height: 150px;
  place-items: center;
  padding: 3px;
  overflow: hidden;
}

#kit-base-page .kb-mast-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 200ms ease;
}

#kit-base-page .kb-mast-card:hover .kb-mast-card-image img {
  transform: scale(1.035);
}

#kit-base-page .kb-mast-card-title {
  display: block;
  min-height: 25px;
  color: #35415a;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}

#kit-base-page .kb-mast-card.is-selected .kb-mast-card-title {
  color: #1a3068;
}

#kit-base-page .kb-mast-card-meta {
  display: block;
  margin-top: 3px;
  color: #737e93;
  font-size: 15px;
  line-height: 1.25;
}

#kit-base-page .kb-mast-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  color: #fff;
  background: #1a3068;
  box-shadow: 0 7px 18px rgba(45, 51, 61, 0.18);
}

#kit-base-page .kb-mast-card-check svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#kit-base-page .kb-mast-card.is-selected .kb-mast-card-check {
  display: block;
}

#kit-base-page .kb-mast-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

#kit-base-page .kb-confirm-mast {
  min-width: 245px;
}


/* =========================================================
   RESUMO FINAL DO KIT
   Destaque maior, por�m usando a mesma paleta do configurador
   ========================================================= */

#kit-base-page .kb-kit-summary {
  position: relative;
  padding: 18px 20px;
  border: 1.5px solid var(--kb-blue);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fa 100%
    );
  box-shadow:
    0 12px 34px rgba(45, 51, 61, 0.13),
    0 0 0 3px rgba(7, 95, 245, 0.04);
}

#kit-base-page .kb-kit-summary::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 22px;
  left: 22px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #1a3068;
}

#kit-base-page .kb-kit-summary > h2 {
  margin: 0 0 12px;
  padding: 0;
  color: #657085;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  line-height: 1;
  text-align: left;
}

#kit-base-page .kb-kit-summary-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    1px
    minmax(0, 1fr)
    1px
    minmax(250px, 0.75fr);
  align-items: center;
  gap: 18px;
}

#kit-base-page .kb-kit-summary-item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

#kit-base-page .kb-kit-summary-thumb {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce0e6;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #ebecef 0%,
      #eaebee 22%,
      #e8e9ec 40%,
      #e7e8eb 58%,
      #e8e9ec 78%,
      #e9eaed 100%
    );
  box-shadow: 0 3px 9px rgba(45, 51, 61, 0.06);
}

#kit-base-page .kb-kit-summary-thumb img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  background: transparent;
}

#kit-base-page .kb-kit-summary-item strong {
  display: block;
  margin-top: 3px;
  color: #1a3068;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1.25;
}

#kit-base-page .kb-kit-summary-item p {
  margin-top: 4px;
  color: #8a95a8;
  font-size: 13px;
  line-height: 1.35;
}

#kit-base-page .kb-kit-summary-divider {
  width: 1px;
  height: 76px;
  background: #d2dae6;
}

#kit-base-page .kb-kit-actions {
  display: grid;
  gap: 8px;
}

#kit-base-page .kb-add-kit {
  width: 100%;
}

#kit-base-page .kb-kit-details {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid #c9ced7;
  border-radius: 9px;
  color: #1a3068;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 3px 9px rgba(45, 51, 61, 0.055);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

#kit-base-page .kb-kit-details:hover {
  background: #f4f5f7;
  box-shadow: 0 5px 12px rgba(45, 51, 61, 0.10);
}

#kit-base-page .kb-kit-details[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

#kit-base-page .kb-kit-map-warning {
  margin: 12px 0 0;
  padding: 8px 10px;
  border: 1px solid #d9dde4;
  border-radius: 8px;
  color: #687592;
  font-size: 12px;
  background: #f7f8f9;
}


/* =========================================================
   FOCUS - NOVOS CONTROLES
   ========================================================= */

#kit-base-page .kb-mast-card:focus-visible,
#kit-base-page .kb-confirm-base:focus-visible,
#kit-base-page .kb-confirm-mast:focus-visible,
#kit-base-page .kb-add-kit:focus-visible,
#kit-base-page .kb-collapsed-summary:focus-visible,
#kit-base-page .kb-kit-details:focus-visible {
  outline: 3px solid rgba(7, 95, 245, 0.22);
  outline-offset: 3px;
}

#kit-base-page .kb-mast-card-height {
  display: block;
  margin-top: 2px;
}

#kit-base-page .kb-mast-card-height strong {
  font-size: inherit;
  font-weight: 700;
  color: inherit;
}
/* =========================================================
   DESKTOP COMPACTO - NOVAS ETAPAS
   769px AT� 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page .kb-kit-heading {
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }

  #kit-base-page .kb-kit-heading h1 {
    font-size: 26px;
  }

  #kit-base-page .kb-kit-heading p {
    font-size: 13px;
  }

  #kit-base-page .kb-kit-progress {
    min-width: 210px;
    grid-template-columns: auto minmax(55px, 95px) auto;
    gap: 7px;
  }

  #kit-base-page .kb-kit-progress-item > span {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  #kit-base-page .kb-kit-progress-item small {
    font-size: 10px;
  }

  #kit-base-page .kb-base-step .kb-heading h2 {
    font-size: 26px;
  }

  #kit-base-page .kb-base-step .kb-heading p {
    font-size: 13px;
  }

  #kit-base-page .kb-collapsed-summary {
    gap: 9px;
    padding: 10px 11px;
    border-radius: 12px;
  }

  #kit-base-page .kb-collapsed-thumb {
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }

  #kit-base-page .kb-collapsed-meta {
    gap: 3px 6px;
    font-size: 14px;
  }

  #kit-base-page .kb-collapsed-description {
    font-size: 12px;
  }

  #kit-base-page .kb-collapsed-chevron {
    width: 32px;
    height: 32px;
  }

  #kit-base-page .kb-mast-step {
    padding: 18px 14px;
  }

  #kit-base-page .kb-mast-heading h2 {
    font-size: 21px;
  }

  #kit-base-page .kb-mast-heading p {
    font-size: 11px;
  }

  #kit-base-page .kb-mast-list {
    gap: 7px;
  }

  #kit-base-page .kb-mast-card {
    min-height: 166px;
    grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
    gap: 7px;
    padding: 8px 6px 9px;
    border-radius: 11px;
  }

  #kit-base-page .kb-mast-card-image {
    height: 100px;
    padding: 1px;
  }

  #kit-base-page .kb-mast-card-title {
    min-height: 17px;
    font-size: 14px;
    line-height: 1.15;
  }

  #kit-base-page .kb-mast-card-meta {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.15;
  }

  #kit-base-page .kb-mast-card-check {
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 4px;
  }

  #kit-base-page .kb-confirm-base,
  #kit-base-page .kb-confirm-mast,
  #kit-base-page .kb-add-kit,
  #kit-base-page .kb-kit-details {
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 12px;
  }

  #kit-base-page .kb-kit-summary {
    padding: 14px 14px;
    border-radius: 12px;
  }

  #kit-base-page .kb-kit-summary > h2 {
    margin-bottom: 9px;
    font-size: 20px;
  }

  #kit-base-page .kb-kit-summary-grid {
    grid-template-columns:
      minmax(0, 1fr)
      1px
      minmax(0, 1fr)
      1px
      minmax(210px, 0.8fr);
    gap: 10px;
  }

  #kit-base-page .kb-kit-summary-thumb {
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }

  #kit-base-page .kb-kit-summary-item strong {
    font-size: 14px;
  }

  #kit-base-page .kb-kit-summary-item p {
    font-size: 12px;
  }

  #kit-base-page .kb-kit-summary-divider {
    height: 58px;
  }

}

  

/* =========================================================
   MOBILE / TABLET RETRATO - NOVAS ETAPAS
   768px OU MENOS
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page .kb-kit-heading {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  #kit-base-page .kb-kit-heading h1 {
    font-size: 25px;
  }

  #kit-base-page .kb-kit-heading p {
    font-size: 13px;
  }

  #kit-base-page .kb-kit-progress {
    width: min(330px, 92%);
    min-width: 0;
    margin: 18px auto 0;
  }

  #kit-base-page .kb-base-step .kb-heading h2 {
    font-size: 25px;
  }

  #kit-base-page .kb-base-step .kb-heading p {
    font-size: 13px;
  }

  #kit-base-page .kb-base-product-panel .kb-product-actions {
    grid-column: 1 / -1;
  }

  #kit-base-page .kb-confirm-base {
    width: 100%;
  }

  #kit-base-page .kb-collapsed-summary {
    grid-template-columns: 54px minmax(0, 1fr) 30px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  #kit-base-page .kb-collapsed-thumb {
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }

  #kit-base-page .kb-collapsed-label {
    font-size: 11px;
  }

  #kit-base-page .kb-collapsed-meta {
    gap: 3px 6px;
    font-size: 15px;
    line-height: 1.3;
  }

  #kit-base-page .kb-collapsed-description {
    font-size: 11px;
    line-height: 1.25;
  }

  #kit-base-page .kb-collapsed-chevron {
    width: 30px;
    height: 30px;
  }

  #kit-base-page .kb-mast-step {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 22px 18px;
    border-radius: var(--kb-radius);
  }

  #kit-base-page .kb-mast-heading h2 {
    font-size: 23px;
  }

  #kit-base-page .kb-mast-heading p {
    font-size: 13px;
  }

  #kit-base-page .kb-mast-list,
  #kit-base-page .kb-mast-list.is-single {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 8px;
  }

  #kit-base-page .kb-mast-card {
    width: 100%;
    min-width: 0;
    min-height: 118px;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
  }

  #kit-base-page .kb-mast-card-image {
    width: 100%;
    height: 96px;
    padding: 2px;
  }

  #kit-base-page .kb-mast-card-title {
    min-height: 0;
    font-size: 16px;
    line-height: 1.15;
  }

  #kit-base-page .kb-mast-card-meta {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.15;
  }

  #kit-base-page .kb-mast-card-check {
    top: 7px;
    right: 7px;
    width: 25px;
    height: 25px;
    padding: 5px;
  }

  #kit-base-page .kb-confirm-mast {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    font-size: 12px;
  }

  #kit-base-page .kb-kit-summary {
    padding: 15px 12px 13px;
    border-radius: 12px;
  }

  #kit-base-page .kb-kit-summary::before {
    right: 14px;
    left: 14px;
  }

  #kit-base-page .kb-kit-summary > h2 {
    margin-bottom: 10px;
    font-size: 19px;
  }

  #kit-base-page .kb-kit-summary-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #kit-base-page .kb-kit-summary-divider {
    width: 100%;
    height: 1px;
  }

  #kit-base-page .kb-kit-summary-item {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }

  #kit-base-page .kb-kit-summary-thumb {
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }

  #kit-base-page .kb-kit-summary-item strong {
    font-size: 15px;
    line-height: 1.3;
  }

  #kit-base-page .kb-kit-summary-item p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  #kit-base-page .kb-kit-actions {
    margin-top: 2px;
  }

  #kit-base-page .kb-add-kit,
  #kit-base-page .kb-kit-details {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    font-size: 12px;
  }

}


/* =========================================================
   CELULARES MENORES - NOVAS ETAPAS
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page .kb-kit-heading h1 {
    font-size: 22px;
  }

  #kit-base-page .kb-kit-heading p {
    font-size: 12px;
  }

  #kit-base-page .kb-kit-progress-item > span {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  #kit-base-page .kb-base-step .kb-heading h2 {
    font-size: 22px;
  }

  #kit-base-page .kb-base-step .kb-heading p {
    font-size: 12px;
  }

  #kit-base-page .kb-collapsed-summary {
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    gap: 7px;
    padding: 8px;
  }

  #kit-base-page .kb-collapsed-thumb {
    width: 48px;
    height: 48px;
  }

  #kit-base-page .kb-collapsed-label {
    font-size: 10px;
  }

  #kit-base-page .kb-collapsed-meta {
    font-size: 13px;
  }

  #kit-base-page .kb-collapsed-description {
    font-size: 10px;
  }

  #kit-base-page .kb-mast-step {
    padding: 20px 14px;
  }

  #kit-base-page .kb-mast-heading h2 {
    font-size: 21px;
  }

  #kit-base-page .kb-mast-heading p {
    font-size: 13px;
  }

  #kit-base-page .kb-mast-card {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 104px;
    gap: 6px;
    padding: 7px 4px 8px;
  }

  #kit-base-page .kb-mast-card-image {
    height: 86px;
  }

  #kit-base-page .kb-mast-card-title {
    font-size: 12px;
  }

  #kit-base-page .kb-mast-card-meta {
    font-size: 9px;
  }

  #kit-base-page .kb-mast-card-check {
    top: 7px;
    right: 7px;
    width: 25px;
    height: 25px;
    padding: 5px;
  }

  #kit-base-page .kb-kit-summary {
    padding: 12px 8px 10px;
  }

  #kit-base-page .kb-kit-summary > h2 {
    font-size: 17px;
  }

  #kit-base-page .kb-kit-summary-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 7px;
  }

  #kit-base-page .kb-kit-summary-thumb {
    width: 48px;
    height: 48px;
  }

  #kit-base-page .kb-kit-summary-item strong {
    font-size: 13px;
  }

  #kit-base-page .kb-kit-summary-item p {
    font-size: 10px;
  }

  #kit-base-page .kb-add-kit,
  #kit-base-page .kb-kit-details {
    min-height: 42px;
    padding: 8px 8px;
    font-size: 12px;
  }

}


/* =========================================================
   REMOVER BORDA PRETA DOS NOVOS BOT�ES
   ========================================================= */

#kit-base-page .kb-confirm-base,
#kit-base-page .kb-confirm-base:hover,
#kit-base-page .kb-confirm-base:focus,
#kit-base-page .kb-confirm-base:focus-visible,
#kit-base-page .kb-confirm-base:active,
#kit-base-page .kb-confirm-mast,
#kit-base-page .kb-confirm-mast:hover,
#kit-base-page .kb-confirm-mast:focus,
#kit-base-page .kb-confirm-mast:focus-visible,
#kit-base-page .kb-confirm-mast:active,
#kit-base-page .kb-add-kit,
#kit-base-page .kb-add-kit:hover,
#kit-base-page .kb-add-kit:focus,
#kit-base-page .kb-add-kit:focus-visible,
#kit-base-page .kb-add-kit:active {
  border: 0 !important;
  outline: none !important;
}

/* =========================================================
   FLUXO DAS ETAPAS - BASE ABERTA / MASTRO RECOLHIDO
   ========================================================= */

/*
   O JS anima altura, opacidade e deslocamento durante a troca
   das etapas. Esta regra evita cortes visuais e deixa os alvos
   de rolagem com uma pequena margem no topo.
*/

#kit-base-page [data-base-editor],
#kit-base-page [data-base-collapsed],
#kit-base-page [data-mast-collapsed],
#kit-base-page [data-mast-defined-summary],
#kit-base-page [data-mast-editor],
#kit-base-page [data-kit-summary] {
  will-change:
    max-height,
    opacity,
    transform;
}

#kit-base-page [data-base-editor],
#kit-base-page .kb-mast-step-shell,
#kit-base-page .kb-kit-summary {
  scroll-margin-top: 22px;
}


/* =========================================================
   ETAPA 2 RECOLHIDA
   Aparece desde o primeiro carregamento.
   ========================================================= */

#kit-base-page .kb-mast-step-shell {
  width: 100%;
  min-width: 0;
}

#kit-base-page .kb-mast-collapsed {
  display: grid;
  width: 100%;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #cbd1da;
  border-radius: 15px;
  color: var(--kb-text);
  text-align: left;
  cursor: pointer;
  background: #fff;
  box-shadow:
    0 8px 24px
    rgba(45, 51, 61, 0.08);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

#kit-base-page .kb-mast-collapsed:hover:not(.is-locked) {
  border-color: #aeb5bf;
  transform: translateY(-1px);
  box-shadow:
    0 10px 25px
    rgba(45, 51, 61, 0.12);
}

#kit-base-page .kb-mast-collapsed.is-locked {
  cursor: not-allowed;
  border-color: #d9dde4;
  color: #7d8799;
  background:
    linear-gradient(
      180deg,
      #f8f9fa 0%,
      #f3f4f6 100%
    );
  box-shadow:
    0 4px 12px
    rgba(45, 51, 61, 0.045);
}

#kit-base-page .kb-mast-collapsed-number {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border: 1px solid #bfc7d2;
  border-radius: 50%;
  color: #687592;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  background: #fff;
}

#kit-base-page .kb-mast-collapsed:not(.is-locked)
.kb-mast-collapsed-number {
  border-color: #1a3068;
  color: #fff;
  background: #1a3068;
}

#kit-base-page .kb-mast-collapsed-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

#kit-base-page .kb-mast-collapsed-content
.kb-step-label {
  color: #1a3068;
  font-size: 13px;
  font-weight: 700;
}

#kit-base-page .kb-mast-collapsed.is-locked
.kb-step-label {
  color: #7d8799;
}

#kit-base-page .kb-mast-collapsed-content > strong {
  display: block;
  color: #35415a;
  font-size:
    clamp(14px, 1.15vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}

#kit-base-page .kb-mast-collapsed.is-locked
.kb-mast-collapsed-content > strong {
  color: #657085;
}

#kit-base-page .kb-mast-collapsed-status {
  display: block;
  margin-top: 2px;
  color: #8a95a8;
  font-size: 13px;
  line-height: 1.35;
}

#kit-base-page .kb-mast-collapsed-action {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #1a3068;
  background: #f7f8fa;
}

#kit-base-page .kb-mast-collapsed.is-locked
.kb-mast-collapsed-action {
  color: #8b95a8;
  background: #eceef1;
}

#kit-base-page .kb-mast-collapsed-action svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}


/* =========================================================
   FOCUS DA ETAPA 2 RECOLHIDA
   ========================================================= */

#kit-base-page .kb-mast-collapsed:focus-visible {
  outline:
    3px solid
    rgba(7, 95, 245, 0.22);
  outline-offset: 3px;
}


/* =========================================================
   DESKTOP COMPACTO - ETAPA 2 RECOLHIDA
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page .kb-mast-collapsed {
    gap: 10px;
    padding: 10px 11px;
    border-radius: 12px;
  }

  #kit-base-page .kb-mast-collapsed-number {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 18px;
  }

  #kit-base-page .kb-mast-collapsed-content
  .kb-step-label {
    font-size: 10px;
  }

  #kit-base-page .kb-mast-collapsed-content > strong {
    font-size: 14px;
  }

  #kit-base-page .kb-mast-collapsed-status {
    font-size: 12px;
  }

  #kit-base-page .kb-mast-collapsed-action {
    width: 32px;
    height: 32px;
  }

}


/* =========================================================
   MOBILE - ETAPA 2 RECOLHIDA
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page .kb-mast-collapsed {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      30px;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
  }

  #kit-base-page .kb-mast-collapsed-number {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 18px;
  }

  #kit-base-page .kb-mast-collapsed-content
  .kb-step-label {
    font-size: 11px;
  }

  #kit-base-page .kb-mast-collapsed-content > strong {
    font-size: 16px;
    line-height: 1.15;
  }

  #kit-base-page .kb-mast-collapsed-status {
    font-size: 11px;
    line-height: 1.25;
  }

  #kit-base-page .kb-mast-collapsed-action {
    width: 30px;
    height: 30px;
  }

  #kit-base-page .kb-mast-collapsed-action svg {
    width: 18px;
    height: 18px;
  }

}


/* =========================================================
   CELULARES MENORES - ETAPA 2 RECOLHIDA
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page .kb-mast-collapsed {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      28px;
    gap: 7px;
    padding: 9px 8px;
  }

  #kit-base-page .kb-mast-collapsed-number {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 16px;
  }

  #kit-base-page .kb-mast-collapsed-content
  .kb-step-label {
    font-size: 10px;
  }

  #kit-base-page .kb-mast-collapsed-content > strong {
    font-size: 12px;
  }

  #kit-base-page .kb-mast-collapsed-status {
    font-size: 10px;
  }

}

/* =========================================================
   RESUMO FINAL DO KIT - VERS�O 2
   Sobrescreve apenas o resumo final antigo.
   ========================================================= */

#kit-base-page .kb-kit-summary {
  position: relative;
  margin-top: 16px;
  padding: 24px 28px 26px;
  border: 1px solid #d9dde4;
  border-radius: 18px;
  background: #edf3ff;
  box-shadow: 0 8px 24px rgba(45, 51, 61, 0.07);
}

#kit-base-page .kb-kit-summary::before {
  display: none;
}

#kit-base-page .kb-kit-summary-header {
  margin-bottom: 18px;
}

#kit-base-page .kb-kit-summary-header h2 {
  margin: 0;
  padding: 0;
  color: #1a3068;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}

#kit-base-page .kb-kit-summary-header p {
  margin: 4px 0 0;
  color: #687592;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.4;
}

#kit-base-page .kb-kit-composition {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    42px
    minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

#kit-base-page .kb-kit-card {
  display: grid;
  min-width: 0;
  min-height: 210px;
  grid-template-columns: minmax(160px, 34%) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 20px;
  row-gap: 3px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #d9dde4;
  border-radius: 14px;
  background: #eaebee;
}

#kit-base-page .kb-kit-card-label {
  grid-column: 2;
  grid-row: 1;
  align-self: auto;
  color: #687592;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

#kit-base-page .kb-kit-card-image {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  height: 170px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #eaebee;
}

#kit-base-page .kb-kit-card-image img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  background: transparent;
}

#kit-base-page .kb-kit-card-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

#kit-base-page .kb-kit-card-content > strong {
  display: block;
  color: #1a3068;
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 700;
  line-height: 1.2;
}

#kit-base-page .kb-kit-card-meta,
#kit-base-page .kb-kit-card-height {
  margin: 7px 0 0;
  color: #59667d;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.35;
}

#kit-base-page .kb-kit-card-meta b {
  margin: 0 4px;
  color: #8a95a8;
  font-weight: 500;
}

#kit-base-page .kb-kit-card-height {
  margin-top: 5px;
}

#kit-base-page .kb-kit-inline-details {
  display: inline-flex;
  grid-column: 2;
  grid-row: 3;
  width: max-content;
  min-height: 30px;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  align-self: start;
  padding: 3px 0;
  border: 0;
  color: #1a3068;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

#kit-base-page .kb-kit-inline-details:hover {
  color: #075ff5;
  transform: translateX(2px);
}

#kit-base-page .kb-kit-inline-details:disabled,
#kit-base-page .kb-kit-inline-details[aria-disabled="true"] {
  opacity: 1;
  color: #1a3068;
  cursor: default;
}

#kit-base-page .kb-kit-plus {
  display: grid;
  place-items: center;
  align-self: center;
  color: #075ff5;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

#kit-base-page .kb-kit-summary-actions-row {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #d9dde4;
}

#kit-base-page .kb-kit-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

#kit-base-page .kb-kit-summary .kb-add-kit {
  width: min(460px, 46%);
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 9px;
  font-size: 16px;
}

#kit-base-page .kb-kit-summary .kb-kit-details {
  width: min(340px, 34%);
  min-height: 52px;
  padding: 12px 20px;
  border: 1.5px solid #1a3068;
  border-radius: 9px;
  color: #1a3068;
  font-size: 16px;
  font-weight: 700;
  background: #ffffff;
  box-shadow: none;
}

#kit-base-page .kb-kit-summary .kb-kit-details:hover {
  color: #1a3068;
  border-color: #234293;
  background: #f4f7ff;
  box-shadow: none;
}

#kit-base-page .kb-kit-summary .kb-kit-details[aria-disabled="true"] {
  opacity: 0.45;
}

#kit-base-page .kb-kit-map-warning {
  margin-top: 12px;
}


/* =========================================================
   MODAL - DETALHES DA BASE
   ========================================================= */

body.kb-modal-open {
  overflow: hidden !important;
}

#kit-base-page .kb-details-modal {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

#kit-base-page .kb-details-modal.is-open {
  opacity: 1;
  visibility: visible;
}

#kit-base-page .kb-details-dialog {
  position: relative;
  width: min(480px, calc(100vw - 40px));
  max-height: calc(100vh - 50px);
  padding: 28px 31px 30px;
  overflow-y: auto;
  border: 1px solid #e1e4e8;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

#kit-base-page .kb-details-modal.is-open .kb-details-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#kit-base-page .kb-details-close {
  position: absolute;
  top: 20px;
  right: 21px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #075ff5;
  cursor: pointer;
  background: transparent;
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

#kit-base-page .kb-details-close:hover {
  color: #1a3068;
  background: transparent;
  transform: scale(1.08);
}

#kit-base-page .kb-details-close svg {
  width: 22px;
  height: 22px;
  fill: #1a3068;
}

#kit-base-page .kb-details-eyebrow {
  display: block;
  margin: 0 45px 5px 0;
  color: #1a3068;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

#kit-base-page .kb-details-dialog h2 {
  margin: 0 45px 17px 0;
  padding: 0;
  color: #1a3068;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
}

#kit-base-page .kb-details-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#kit-base-page .kb-details-list li {
  position: relative;
  margin: 0 0 5px;
  padding-left: 13px;
  color: #222222;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

#kit-base-page .kb-details-list li:last-child {
  margin-bottom: 0;
}

#kit-base-page .kb-details-list li::before {
  content: "�";
  position: absolute;
  top: -3px;
  left: 3px;
  width: auto;
  height: auto;
  border-radius: 0;
  color: #222222;
  font-size: 15px;
  background: transparent;
  transform: none;
  font-weight: 900;
}

#kit-base-page .kb-details-separator {
  width: 100%;
  height: 1px;
  margin: 21px 0 17px;
  background: #dfe3e8;
}

#kit-base-page .kb-details-size h3 {
  margin: 0 0 10px;
  color: #1a3068;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

#kit-base-page .kb-details-size-image-wrap {
  display: flex;
  width: 100%;
  min-height: 205px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#kit-base-page .kb-details-size-image-wrap img {
  display: block;
  width: auto;
  max-width: 280px;
  height: auto;
  max-height: 245px;
  object-fit: contain;
}

#kit-base-page .kb-kit-inline-details:focus-visible,
#kit-base-page .kb-details-close:focus-visible {
  outline: 3px solid rgba(7, 95, 245, 0.22);
  outline-offset: 3px;
}


/* =========================================================
   DESKTOP COMPACTO - RESUMO V2 / MODAL
   769px AT� 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page .kb-kit-summary {
    padding: 18px;
  }

  #kit-base-page .kb-kit-summary-header {
    margin-bottom: 14px;
  }

  #kit-base-page .kb-kit-composition {
    grid-template-columns:
      minmax(0, 1fr)
      28px
      minmax(0, 1fr);
    gap: 10px;
  }

  #kit-base-page .kb-kit-card {
    min-height: 170px;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 12px;
    padding: 13px;
  }

  #kit-base-page .kb-kit-card-image {
    height: 126px;
  }

  #kit-base-page .kb-kit-card-label {
    font-size: 12px;
  }

  #kit-base-page .kb-kit-card-content > strong {
    font-size: 16px;
  }

  #kit-base-page .kb-kit-card-meta,
  #kit-base-page .kb-kit-card-height {
    font-size: 12px;
  }

  #kit-base-page .kb-kit-inline-details {
    font-size: 11px;
  }

  #kit-base-page .kb-kit-plus {
    font-size: 26px;
  }

  #kit-base-page .kb-kit-summary-actions-row {
    margin-top: 17px;
    padding-top: 17px;
  }

  #kit-base-page .kb-kit-actions {
    gap: 16px;
  }

  #kit-base-page .kb-kit-summary .kb-add-kit,
  #kit-base-page .kb-kit-summary .kb-kit-details {
    min-height: 44px;
    font-size: 13px;
  }

}


/* =========================================================
   MOBILE / TABLET RETRATO - RESUMO V2 / MODAL
   768px OU MENOS
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page .kb-kit-summary {
    padding: 18px 14px 16px;
    border-radius: 14px;
  }

  #kit-base-page .kb-kit-summary-header {
    margin-bottom: 15px;
  }

  #kit-base-page .kb-kit-summary-header h2 {
    font-size: 21px;
  }

  #kit-base-page .kb-kit-summary-header p {
    font-size: 12px;
  }

  #kit-base-page .kb-kit-composition {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #kit-base-page .kb-kit-plus {
    height: 24px;
    font-size: 27px;
  }

  #kit-base-page .kb-kit-card {
    min-height: 132px;
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 13px;
    padding: 12px;
    border-radius: 12px;
  }

  #kit-base-page .kb-kit-card-image {
    height: 106px;
    border-radius: 9px;
  }

  #kit-base-page .kb-kit-card-label {
    font-size: 12px;
  }

  #kit-base-page .kb-kit-card-content > strong {
    font-size: 16px;
  }

  #kit-base-page .kb-kit-card-meta,
  #kit-base-page .kb-kit-card-height {
    margin-top: 4px;
    font-size: 12px;
  }

  #kit-base-page .kb-kit-inline-details {
    min-height: 24px;
    font-size: 11px;
  }

  #kit-base-page .kb-kit-summary-actions-row {
    margin-top: 16px;
    padding-top: 16px;
  }

  #kit-base-page .kb-kit-actions {
    flex-direction: column;
    gap: 9px;
  }

  #kit-base-page .kb-kit-summary .kb-add-kit,
  #kit-base-page .kb-kit-summary .kb-kit-details {
    width: 100%;
    min-height: 46px;
    font-size: 13px;
  }

  #kit-base-page .kb-details-modal {
    place-items: center;
    padding: 14px;
  }

  #kit-base-page .kb-details-dialog {
    width: 100%;
    max-height: calc(100vh - 28px);
    padding: 25px 20px 24px;
    border-radius: 16px;
    transform: translateY(20px) scale(0.985);
  }

  #kit-base-page .kb-details-close {
    top: 17px;
    right: 17px;
  }

  #kit-base-page .kb-details-eyebrow {
    margin-right: 40px;
    font-size: 12px;
  }

  #kit-base-page .kb-details-dialog h2 {
    margin-right: 40px;
    margin-bottom: 15px;
    font-size: 22px;
  }

  #kit-base-page .kb-details-list li {
    font-size: 12px;
    line-height: 1.45;
  }

  #kit-base-page .kb-details-size h3 {
    font-size: 13px;
  }

  #kit-base-page .kb-details-size-image-wrap {
    min-height: 165px;
  }

  #kit-base-page .kb-details-size-image-wrap img {
    max-width: 100%;
    max-height: 215px;
  }

}


/* =========================================================
   CELULARES MENORES - RESUMO V2 / MODAL
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page .kb-kit-summary {
    padding: 15px 9px 13px;
  }

  #kit-base-page .kb-kit-summary-header h2 {
    font-size: 19px;
  }

  #kit-base-page .kb-kit-card {
    min-height: 118px;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 10px;
    padding: 9px;
  }

  #kit-base-page .kb-kit-card-image {
    height: 92px;
  }

  #kit-base-page .kb-kit-card-label {
    font-size: 11px;
  }

  #kit-base-page .kb-kit-card-content > strong {
    font-size: 14px;
  }

  #kit-base-page .kb-kit-card-meta,
  #kit-base-page .kb-kit-card-height {
    font-size: 10px;
  }

  #kit-base-page .kb-kit-inline-details {
    font-size: 10px;
  }

  #kit-base-page .kb-details-modal {
    padding: 8px;
  }

  #kit-base-page .kb-details-dialog {
    max-height: calc(100vh - 16px);
    padding: 22px 16px 20px;
    border-radius: 15px;
    width: 80%;
  }

  #kit-base-page .kb-details-dialog h2 {
    font-size: 20px;
  }

  #kit-base-page .kb-details-size-image-wrap {
    min-height: 145px;
  }

}


/* =========================================================
   REDU��O DE MOVIMENTO - MODAL / RESUMO V2
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #kit-base-page .kb-details-modal,
  #kit-base-page .kb-details-dialog,
  #kit-base-page .kb-kit-inline-details,
  #kit-base-page .kb-details-close {
    transition: none !important;
  }

}


/* =========================================================
   RESUMOS COMPACTOS - BASE E MASTRO

   IMPORTANTE:
   Os dois elementos abaixo usam EXATAMENTE o mesmo bloco.
   N�o existe mais CSS exclusivo do resumo do mastro.
   ========================================================= */

#kit-base-page [data-base-collapsed],
#kit-base-page [data-mast-defined-summary] {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 16px 18px !important;
  border: 1px solid #cbd1da !important;
  border-radius: 15px !important;
  color: var(--kb-text) !important;
  text-align: left !important;
  cursor: pointer !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(45, 51, 61, 0.10) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-thumb,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-thumb {
  display: grid !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dce0e6 !important;
  border-radius: 14px !important;
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(45, 51, 61, 0.06) !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-thumb img,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-thumb img {
  display: block !important;
  width: 88% !important;
  min-width: 0 !important;
  max-width: 88% !important;
  height: 88% !important;
  min-height: 0 !important;
  max-height: 88% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-content,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-content {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-label,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1a3068 !important;
  font-family:
    "Montserrat",
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-meta,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-meta {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #3d4657 !important;
  font-family:
    "Montserrat",
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;
  font-size: clamp(13px, 1.1vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-meta strong,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-meta strong {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1a3068 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-description,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-description {
  display: block !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  color: #8a95a8 !important;
  font-family:
    "Montserrat",
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-chevron,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-chevron {
  display: grid !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #1a3068 !important;
  background: #f7f8fa !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-chevron svg,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-chevron svg {
  display: block !important;
  width: 23px !important;
  min-width: 23px !important;
  max-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: currentColor !important;
}

#kit-base-page [data-base-collapsed] .kb-collapsed-chevron svg path,
#kit-base-page [data-mast-defined-summary] .kb-collapsed-chevron svg path {
  fill: rgb(26 48 104) !important;
}

/* HIDDEN precisa vir DEPOIS do display:grid !important */
#kit-base-page [data-base-collapsed][hidden],
#kit-base-page [data-mast-defined-summary][hidden] {
  display: none !important;
}


/* =========================================================
   DESKTOP COMPACTO
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page [data-base-collapsed],
  #kit-base-page [data-mast-defined-summary] {
    gap: 9px !important;
    padding: 10px 11px !important;
    border-radius: 12px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-thumb,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-thumb {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 10px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-label,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-label {
    font-size: 13px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-meta,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-meta {
    gap: 3px 6px !important;
    font-size: 14px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-description,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-description {
    font-size: 12px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-chevron,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-chevron {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page [data-base-collapsed],
  #kit-base-page [data-mast-defined-summary] {
    grid-template-columns: 54px minmax(0, 1fr) 30px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-thumb,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-thumb {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 10px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-label,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-label {
    font-size: 11px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-meta,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-meta {
    gap: 3px 6px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-description,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-description {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-chevron,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-chevron {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
}


/* =========================================================
   CELULARES MENORES
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page [data-base-collapsed],
  #kit-base-page [data-mast-defined-summary] {
    grid-template-columns: 48px minmax(0, 1fr) 28px !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-thumb,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-thumb {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-label,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-label {
    font-size: 10px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-meta,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-meta {
    font-size: 13px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-description,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-description {
    font-size: 10px !important;
  }

  #kit-base-page [data-base-collapsed] .kb-collapsed-chevron,
  #kit-base-page [data-mast-defined-summary] .kb-collapsed-chevron {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
}


/* =========================================================
   RESUMO FINAL DO KIT - VERS�O 3
   Layout aprovado: desktop premium + mobile compacto
   ========================================================= */

#kit-base-page .kb-kit-summary-v3 {
  position: relative;
  margin-top: 16px;
  padding: 28px 30px 30px;
  overflow: hidden;
  border: 1px solid #d5def2;
  border-radius: 22px;
  background: #1a3068;
  box-shadow:
    0 14px 36px rgba(45, 51, 61, 0.08);
}

#kit-base-page .kb-kit-summary-v3::before {
  display: none !important;
}

/* CABE�ALHO */
#kit-base-page .kb-kit-summary-header-v3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
}

#kit-base-page .kb-kit-summary-icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 1px solid rgba(28, 62, 148, 0.08);
  border-radius: 50%;
  color: #075ff5;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 16px rgba(45, 51, 61, 0.08);
}

#kit-base-page .kb-kit-summary-icon svg {
  width: 29px;
  height: 29px;
  fill: rgb(26 48 104);
}

#kit-base-page .kb-kit-summary-heading-copy {
  display: block;
  min-width: 0;
}

#kit-base-page .kb-kit-summary-header-v3 h2 {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: clamp(26px, 2vw, 34px)!important;
  font-weight: 700;
  line-height: 1.05;
  text-align: left;
}

#kit-base-page .kb-kit-summary-header-v3 p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(13px, 1.1vw, 20px);
  line-height: 1.35;
}

/* COMPOSI��O */
#kit-base-page .kb-kit-composition-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

#kit-base-page .kb-kit-card-v3 {
  display: flex;
  min-width: 0;
  min-height: 320px;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7dce4;
  border-radius: 18px;
  background: rgb(255 255 255);
  box-shadow: 0 8px 22px rgba(45, 51, 61, 0.08);
}

/* CABE�ALHO DO CARD */
#kit-base-page .kb-kit-card-head {
  display: flex;
  min-height: 47px;
  gap: 11px;
  padding: 5px 20px;
  /* border-bottom: 1px solid #dce1e8; */
  /* background: #1a3068; */
  align-items: center;
  margin: 2% 0 0 0.5%;
}

#kit-base-page .kb-kit-card-head-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 9px;
  color: #1a3068;
  background: #dce6ff80;
}

#kit-base-page .kb-kit-card-head-icon svg {
  width: 22px;
  height: 22px;
  fill: rgb(26 48 104);
}

#kit-base-page .kb-kit-card-v3 .kb-kit-card-label {
  position: static;
  display: block;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  padding: 0;
  color: #1a3068;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 9%;
}

/* CORPO DO CARD */
#kit-base-page .kb-kit-card-body {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(170px, 42%) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 0px 22px 16px;
}

#kit-base-page .kb-kit-card-v3 .kb-kit-card-image {
  display: grid;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  height: 205px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: #eaebee;
}

#kit-base-page .kb-kit-card-v3 .kb-kit-card-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 92%;
  max-height: 92%;
  margin: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

#kit-base-page .kb-kit-card-v3 .kb-kit-card-content {
  display: flex;
  min-width: 0;
  grid-column: auto;
  grid-row: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

#kit-base-page .kb-kit-card-v3 .kb-kit-card-content > strong {
  display: block;
  margin: 0;
  color: #1a3068;
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 700;
  line-height: 1.15;
}

/* CHIPS */
#kit-base-page .kb-kit-spec-list {
  display: flex;
  width: 100%;
  max-width: 250px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

#kit-base-page .kb-kit-spec-chip {
  display: inline-flex;
  min-width: 165px;
  min-height: 47px;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid rgba(114, 132, 159, 0.07);
  border-radius: 12px;
  color: #1a3068;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  background: #f4f7ff;
}

#kit-base-page .kb-kit-spec-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 22px;
  place-items: center;
  color: #1a3068;
}

#kit-base-page .kb-kit-spec-icon svg {
  width: 29px;
  height: 29px;
  fill: rgb(26 48 104);
}

#kit-base-page .kb-kit-color-dot {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(121, 94, 7, 0.15);
  border-radius: 50%;
  background-color: #d7a52d;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.45);
}

/* RODAP� DO CARD */
#kit-base-page .kb-kit-card-footer {
  display: flex;
  min-height: 56px;
  align-items: center;
  padding: 0 22px;
  /* border-top: 1px solid #dce1e8; */
}

#kit-base-page .kb-kit-card-v3 .kb-kit-inline-details {
  display: inline-flex;
  grid-column: auto;
  grid-row: auto;
  width: auto;
  min-height: 30px;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin: 0;
  padding: 3px 0;
  border: 0;
  color: #1a3068;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
}

/* + CENTRAL */
#kit-base-page .kb-kit-plus-v3 {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  align-self: center;
  justify-self: center;
  border: 1px solid #d8e1f5;
  border-radius: 50%;
  color: #234293;
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  background: #f4f7ff;
  box-shadow: 0 5px 12px rgba(45, 51, 61, 0.08);
}

/* FAIXA DE CONFIAN�A */
#kit-base-page .kb-kit-reassurance {
  display: none;
  width: 100%;
  min-height: 78px;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid #d5dce5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(45, 51, 61, 0.04);
}

#kit-base-page .kb-kit-reassurance-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 50%;
  color: #1a3068;
  background: #edf3ff;
}

#kit-base-page .kb-kit-reassurance-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

#kit-base-page .kb-kit-reassurance-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

#kit-base-page .kb-kit-reassurance-copy strong {
  color: #1a3068;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

#kit-base-page .kb-kit-reassurance-copy > span {
  color: #687592;
  font-size: 13px;
  line-height: 1.3;
}

/* A��ES */
#kit-base-page .kb-kit-summary-v3 .kb-kit-summary-actions-row {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

#kit-base-page .kb-kit-summary-v3 .kb-kit-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

#kit-base-page .kb-kit-summary-v3 .kb-add-kit {
  width: min(520px, 50%);
  min-height: 54px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: 0 9px 20px rgba(35, 66, 147, 0.20);
}

#kit-base-page .kb-kit-summary-v3 .kb-kit-details {
  width: min(430px, 42%);
  min-height: 54px;
  padding: 12px 22px;
  border: 1.5px solid #234293;
  border-radius: 10px;
  color: #1a3068;
  font-size: 16px;
  font-weight: 700;
  background: #fff;
  box-shadow: none;
}

/* =========================================================
   TABLET / DESKTOP COMPACTO
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

  #kit-base-page .kb-kit-summary-v3 {
    padding: 22px;
  }

  #kit-base-page .kb-kit-composition-v3 {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 11px;
  }

  #kit-base-page .kb-kit-card-v3 {
    min-height: 270px;
  }

  #kit-base-page .kb-kit-card-head {
    min-height: 58px;
    padding: 10px 14px 0;
  }

  #kit-base-page .kb-kit-card-body {
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 14px;
    padding: 0px 15px 15px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-image {
    height: 150px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-content > strong {
    font-size: 18px;
  }

  #kit-base-page .kb-kit-spec-chip {
    min-width: 132px;
    min-height: 37px;
    padding: 7px 10px;
    font-size: 12px;
  }

  #kit-base-page .kb-kit-plus-v3 {
    width: 38px;
    height: 38px;
    font-size: 25px;
  }
}

/* =========================================================
   MOBILE COMPACTO
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page .kb-kit-summary-v3 {
    margin-top: 12px;
    padding: 14px 10px 12px;
    border-radius: 16px;
  }

  /* Cabe�alho menor para reduzir rolagem */
  #kit-base-page .kb-kit-summary-header-v3 {
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 3px;
  }

  #kit-base-page .kb-kit-summary-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  #kit-base-page .kb-kit-summary-icon svg {
    width: 22px;
    height: 22px;
  }

  #kit-base-page .kb-kit-summary-header-v3 h2 {
    font-size: 21px;
  }

  #kit-base-page .kb-kit-summary-header-v3 p {
    margin-top: 2px;
    font-size: 11px;
  }

  /* Cards empilhados */
  #kit-base-page .kb-kit-composition-v3 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #kit-base-page .kb-kit-card-v3 {
    min-height: 240px;
    border-radius: 13px;
  }

  #kit-base-page .kb-kit-card-head {
    min-height: 43px;
    gap: 7px;
    padding: 6px 10px;
  }

  #kit-base-page .kb-kit-card-head-icon {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    border-radius: 7px;
  }

  #kit-base-page .kb-kit-card-head-icon svg {
    width: 17px;
    height: 17px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-label {
    font-size: 11px;
  }

  #kit-base-page .kb-kit-card-body {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-image {
    height: 104px;
    border-radius: 9px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-content {
    gap: 8px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-content > strong {
    font-size: 15px;
    line-height: 1.14;
  }

  #kit-base-page .kb-kit-spec-list {
    max-width: 170px;
    gap: 5px;
  }

  #kit-base-page .kb-kit-spec-chip {
    min-width: 0;
    min-height: 30px;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 11px;
  }

  #kit-base-page .kb-kit-spec-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  #kit-base-page .kb-kit-spec-icon svg {
    width: 14px;
    height: 14px;
  }

  #kit-base-page .kb-kit-color-dot {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  /* No mobile o link fica dentro de rodap� bem fino */
  #kit-base-page .kb-kit-card-footer {
    min-height: 34px;
    padding: 0 10px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-inline-details {
    min-height: 22px;
    font-size: 9px;
  }

  /* + encaixado entre os cards */
  #kit-base-page .kb-kit-plus-v3 {
    position: relative;
    z-index: 3;
    width: 34px;
    height: 34px;
    margin: -5px auto;
    font-size: 23px;
  }

  /* Faixa compacta */
  #kit-base-page .kb-kit-reassurance {
    min-height: 54px;
    gap: 9px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 11px;
  }

  #kit-base-page .kb-kit-reassurance-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  #kit-base-page .kb-kit-reassurance-icon svg {
    width: 20px;
    height: 20px;
  }

  #kit-base-page .kb-kit-reassurance-copy {
    gap: 1px;
  }

  #kit-base-page .kb-kit-reassurance-copy strong {
    font-size: 11px;
  }

  #kit-base-page .kb-kit-reassurance-copy > span {
    font-size: 9px;
  }

  /* Bot�es compactos empilhados */
  #kit-base-page .kb-kit-summary-v3 .kb-kit-summary-actions-row {
    margin-top: 9px;
  }

  #kit-base-page .kb-kit-summary-v3 .kb-kit-actions {
    flex-direction: column;
    gap: 6px;
  }

  #kit-base-page .kb-kit-summary-v3 .kb-add-kit,
  #kit-base-page .kb-kit-summary-v3 .kb-kit-details {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12px;
  }
}

/* =========================================================
   CELULARES MENORES
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page .kb-kit-summary-v3 {
    padding: 11px 7px 10px;
  }

  #kit-base-page .kb-kit-summary-header-v3 {
    margin-bottom: 9px;
  }

  #kit-base-page .kb-kit-summary-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  #kit-base-page .kb-kit-summary-header-v3 h2 {
    font-size: 19px;
  }

  #kit-base-page .kb-kit-summary-header-v3 p {
    font-size: 10px;
  }

  #kit-base-page .kb-kit-card-head {
    min-height: 39px;
    padding: 5px 8px;
  }

  #kit-base-page .kb-kit-card-body {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-image {
    height: 143px;
  }

  #kit-base-page .kb-kit-card-v3 .kb-kit-card-content > strong {
    font-size: 13px;
  }

  #kit-base-page .kb-kit-spec-chip {
    min-height: 27px;
    padding: 4px 7px;
    font-size: 10px;
  }

  #kit-base-page .kb-kit-card-footer {
    min-height: 31px;
    padding: 0 8px;
  }

  #kit-base-page .kb-kit-reassurance {
    min-height: 49px;
    margin-top: 8px;
    padding: 6px 8px;
  }

  #kit-base-page .kb-kit-reassurance-copy strong {
    font-size: 10px;
  }

  #kit-base-page .kb-kit-reassurance-copy > span {
    font-size: 8px;
  }

  #kit-base-page .kb-kit-summary-v3 .kb-add-kit,
  #kit-base-page .kb-kit-summary-v3 .kb-kit-details {
    min-height: 38px;
    font-size: 11px;
  }
}


/* =========================================================
   RESUMO FINAL V24 - HARDENING CONTRA CSS LEGADO
   ========================================================= */

#kit-base-page [data-kit-summary].kb-kit-summary-v3 {
  display: block;
}

#kit-base-page [data-kit-summary].kb-kit-summary-v3[hidden] {
  display: none !important;
}

#kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-composition-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
  align-items: stretch !important;
}

#kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-card-v3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
}

#kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-card-body {
  display: grid !important;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr) !important;
  align-items: center !important;
}

#kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-spec-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-actions {
  display: flex !important;
}

@media (max-width: 768px) {  

  #kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-card-body {
    grid-template-columns: 108px minmax(0, 1fr) !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-actions {
    flex-direction: column !important;
  }
}

@media (max-width: 450px) {
  #kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-card-body {
    grid-template-columns: 65% minmax(0, 1fr) !important;
  }
  #kit-base-page [data-kit-summary].kb-kit-summary-v3 .kb-kit-composition-v3 {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   RESUMO FINAL - MOBILE VERS�O 1
   Aplicado SOMENTE em celulares de at� 450px.
   Desktop e tablet permanecem inalterados.
   ========================================================= */

@media (max-width: 450px) {

  /* -------------------------------------------------------
     BLOCO EXTERNO
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3 {
    margin-top: 10px !important;
    padding: 10px 7px 11px !important;
    border: 0 !important;
    border-radius: 15px !important;
    /* background: #1a3068 !important; */
    box-shadow:
      0 10px 24px
      rgba(20, 45, 105, 0.16) !important;
  }


  /* -------------------------------------------------------
     CABE�ALHO "SEU KIT"
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-header-v3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin:
      0 2px 10px !important;

    padding:
      0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-icon {
    display: grid !important;

    width: 36px !important;
    height: 36px !important;

    flex:
      0 0 36px !important;

    place-items:
      center !important;

    border-radius:
      50% !important;

    background:
      #f5f8ff !important;

    box-shadow:
      0 3px 9px
      rgba(0, 0, 0, 0.08) !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-icon svg {
    width: 19px !important;
    height: 19px !important;

    fill:
      #1a3068 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-heading-copy {
    min-width: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-header-v3 h2 {
    margin: 0 !important;
    padding: 0 !important;

    color:
      #ffffff !important;

    font-size:
      20px !important;

    font-weight:
      700 !important;

    line-height:
      1 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-header-v3 p {
    margin:
      2px 0 0 !important;

    color:
      #ffffff !important;

    font-size:
      8.5px !important;

    line-height:
      1.2 !important;
  }


  /* -------------------------------------------------------
     COMPOSI��O BASE + MASTRO
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-composition-v3 {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    align-items:
      stretch !important;

    gap:
      0 !important;
  }


  /* -------------------------------------------------------
     CARD
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3 {
    position:
      relative !important;

    display:
      flex !important;

    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    flex-direction:
      column !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

    border:
      0 !important;

    border-radius:
      13px !important;

    background:
      #ffffff !important;

    box-shadow:
      0 5px 15px
      rgba(0, 0, 0, 0.10) !important;
  }


  /* -------------------------------------------------------
     CABE�ALHO BASE / MASTRO
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-head {
    display:
      flex !important;

    min-height:
      37px !important;

    align-items:
      center !important;

    gap:
      7px !important;

    margin:
      0 !important;

    padding:
      6px 9px 3px !important;

    border:
      0 !important;

    background:
      #ffffff !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-head-icon {
    display:
      grid !important;
    width:
      27px !important;
    height:
      27px !important;
    flex:
      0 0 27px !important;
    place-items:
      center !important;
    border-radius:
      7px !important;
    /* color:
      #1c57c7 !important; */
    /* background:
      #edf3ff !important; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-head-icon svg {
    width:
      16px !important;

    height:
      16px !important;

    fill:
      currentColor !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-label {
    display:
      block !important;
    margin:
      0 !important;
    padding:
      0 !important;
    /* color:
      #1a3068 !important; */
    font-size:
      10px !important;
    font-weight:
      800 !important;
    line-height:
      1 !important;
    text-transform:
      uppercase !important;
  }


  /* -------------------------------------------------------
     CORPO - VERS�O 1
     imagem esquerda / informa��es direita
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-body {
    display:
      grid !important;

    width:
      100% !important;

    min-width:
      0 !important;

    grid-template-columns:
      minmax(0, 52%)
      minmax(0, 48%) !important;

    align-items:
      center !important;

    gap:
      8px !important;

    padding:
      7px 8px 5px !important;
  }


  /* IMAGEM */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-image {
    display:
      grid !important;

    width:
      100% !important;

    height:
      142px !important;

    min-width:
      0 !important;

    place-items:
      center !important;

    margin:
      0 !important;

    padding:
      4px !important;

    overflow:
      hidden !important;

    border:
      0 !important;

    border-radius:
      10px !important;

    background:
      #eaebee !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-image img {
    display:
      block !important;

    width:
      96% !important;

    max-width:
      96% !important;

    height:
      96% !important;

    max-height:
      96% !important;

    margin:
      auto !important;

    object-fit:
      contain !important;

    object-position:
      center !important;
  }


  /* -------------------------------------------------------
     INFORMA��ES
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content {
    display:
      flex !important;

    min-width:
      0 !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content > strong {
    display:
      block !important;
    width:
      100% !important;
    margin:
      0 !important;
    /* color:
      #1a3068 !important; */
    font-size:
      13px !important;
    font-weight:
      700 !important;
    line-height:
      1.15 !important;
    overflow-wrap:
      anywhere !important;
  }


  /* -------------------------------------------------------
     CHIPS
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-list {
    display:
      flex !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-chip {
    display:
      inline-flex !important;
    width:
      auto !important;
    max-width:
      100% !important;
    min-width:
      0 !important;
    min-height:
      27px !important;
    align-items:
      center !important;
    gap:
      5px !important;
    margin:
      0 !important;
    padding:
      4px 7px !important;
    border:
      0 !important;
    border-radius:
      8px !important;
    /* color:
      #1a3068 !important; */
    font-size:
      9px !important;
    font-weight:
      500 !important;
    line-height:
      1.1 !important;
    white-space:
      nowrap !important;
    /* background:
      #dce6ff !important; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-icon {
    display:
      grid !important;

    width:
      15px !important;

    height:
      15px !important;

    flex:
      0 0 15px !important;

    place-items:
      center !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-icon svg {
    width:
      14px !important;
    height:
      14px !important;
    /* fill:
      #1a3068 !important; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-color-dot {
    display:
      block !important;

    width:
      15px !important;

    height:
      15px !important;

    flex:
      0 0 15px !important;

    border-radius:
      50% !important;
  }


  /* -------------------------------------------------------
     DETALHES
     Alinhado com a coluna de informa��es, como na Vers�o 1
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-footer {
    display:
      flex !important;

    min-height:
      31px !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    margin:
      0 !important;

    padding:
      0 8px 6px
      calc(52% + 16px) !important;

    border:
      0 !important;

    background:
      #ffffff !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-inline-details {
    display:
      inline-flex !important;
    width:
      auto !important;
    min-height:
      22px !important;
    align-items:
      center !important;
    justify-content:
      flex-start !important;
    gap:
      3px !important;
    margin:
      0 !important;
    padding:
      2px 0 !important;
    border:
      0 !important;
    /* color:
      #1a3068 !important; */
    font-size:
      8.5px !important;
    font-weight:
      800 !important;
    line-height:
      1 !important;
    text-transform:
      uppercase !important;
    background:
      transparent !important;
  }


  /* -------------------------------------------------------
     SINAL DE +
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-plus-v3 {
    position:
      relative !important;
    z-index:
      5 !important;
    display:
      grid !important;
    width:
      32px !important;
    height:
      32px !important;
    place-items:
      center !important;
    margin:
      -4px auto !important;
    border:
      1px solid
      #d2ddf5 !important;
    border-radius:
      50% !important;
    /* color:
      #075ff5 !important; */
    font-size:
      21px !important;
    font-weight:
      400 !important;
    line-height:
      1 !important;
    /* background:
      #f4f7ff !important; */
    box-shadow:
      0 4px 10px
      rgba(0, 0, 0, 0.12) !important;
  }


  /* -------------------------------------------------------
     FAIXA "KIT COMPLETO"
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance {
    display:
      flex !important;

    width:
      100% !important;

    min-height:
      45px !important;

    align-items:
      center !important;

    gap:
      7px !important;

    margin-top:
      8px !important;

    padding:
      6px 8px !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.18) !important;

    border-radius:
      10px !important;

    background:
      rgba(255, 255, 255, 0.96) !important;

    box-shadow:
      none !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-icon {
    display:
      grid !important;

    width:
      29px !important;

    height:
      29px !important;

    flex:
      0 0 29px !important;

    place-items:
      center !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-icon svg {
    width:
      17px !important;

    height:
      17px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-copy {
    gap:
      1px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-copy strong {
    font-size:
      9.5px !important;

    line-height:
      1.15 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-copy > span {
    font-size:
      7.5px !important;

    line-height:
      1.2 !important;
  }


  /* -------------------------------------------------------
     A��ES
     ------------------------------------------------------- */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-actions-row {
    margin-top:
      8px !important;

    padding:
      0 !important;

    border:
      0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-actions {
    display:
      flex !important;

    width:
      100% !important;

    flex-direction:
      column !important;

    gap:
      5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-details {
    width:
      100% !important;

    min-height:
      36px !important;

    margin:
      0 !important;

    padding:
      7px 9px !important;

    border-radius:
      8px !important;

    font-size:
      10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-add-kit svg {
    width:
      15px !important;

    height:
      15px !important;
  }
}


/* =========================================================
   RESUMO FINAL - MOBILE VERS�O 1 / AJUSTE VISUAL FINAL
   SOMENTE max-width: 450px

   Objetivo:
   - reproduzir as propor��es da imagem aprovada;
   - BASE / MASTRO alinhados � esquerda;
   - cabe�alho maior;
   - cards mais altos;
   - imagem maior;
   - t�tulo e chips mais leg�veis;
   - detalhes alinhados com a coluna de informa��es.
   ========================================================= */

@media (max-width: 450px) {

  /* =====================================================
     BLOCO AZUL
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3 {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 12px 9px 14px !important;
    border: 0 !important;
    border-radius: 16px !important;
    /* background: #1a3068 !important; */
    box-shadow:
      0 10px 24px
      rgba(20, 45, 105, 0.16) !important;
  }


  /* =====================================================
     CABE�ALHO SEU KIT
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-header-v3 {
    display: flex !important;

    width: 100% !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    margin: 0 4px 14px !important;
    padding: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-icon {
    display: grid !important;

    width: 45px !important;
    height: 45px !important;

    flex: 0 0 45px !important;

    place-items: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #f5f8ff !important;

    box-shadow:
      0 4px 10px
      rgba(0, 0, 0, 0.09) !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: #1a3068 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-heading-copy {
    display: block !important;
    min-width: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-header-v3 h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 0.98 !important;

    text-align: left !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-header-v3 p {
    margin: 5px 0 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    text-align: left !important;
  }


  /* =====================================================
     COMPOSI��O
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-composition-v3 {
    display: grid !important;

    width: 100% !important;

    grid-template-columns: minmax(0, 1fr) !important;

    align-items: stretch !important;

    gap: 0 !important;
  }


  /* =====================================================
     CARD
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3 {
    position: relative !important;

    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 258px !important;

    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
      0 5px 15px
      rgba(0, 0, 0, 0.10) !important;
  }


  /* =====================================================
     CABE�ALHO BASE / MASTRO
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-head {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 53px !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px 16px 5px !important;
    border: 0 !important;
    text-align: left !important;
    background: #ffffff !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-head-icon {
    display: grid !important;
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 9px !important;
    /* color: #075ff5 !important; */
    /* background: #edf3ff !important; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-head-icon svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    fill: currentColor !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-label {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* color: #1a3068 !important; */
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    margin-bottom: 3%!important;
  }


  /* =====================================================
     CORPO
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-body {
    display: grid !important;

    width: 100% !important;
    min-width: 0 !important;

    flex: 1 1 auto !important;

    grid-template-columns:
      minmax(0, 54%)
      minmax(0, 46%) !important;

    align-items: center !important;

    gap: 14px !important;

    margin: 0 !important;
    padding: 8px 16px 7px !important;
  }


  /* =====================================================
     IMAGEM
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-image {
    display: grid !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 172px !important;
    min-height: 172px !important;

    place-items: center !important;

    margin: 0 !important;
    padding: 4px !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: #eaebee !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-image img {
    display: block !important;

    width: 96% !important;
    max-width: 96% !important;

    height: 96% !important;
    max-height: 96% !important;

    margin: auto !important;

    object-fit: contain !important;
    object-position: center !important;

    background: transparent !important;
  }


  /* =====================================================
     CONTE�DO
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content {
    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 11px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content > strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* color: #1a3068 !important; */
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }


  /* =====================================================
     CHIPS
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-list {
    display: flex !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 7px !important;

    margin: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-chip {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 35px !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    /* color: #1a3068 !important; */
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    /* background: #dce6ff !important; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-icon {
    display: grid !important;
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    place-items: center !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-spec-icon svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    /* fill: #1a3068 !important; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-color-dot {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
  }


  /* =====================================================
     DETALHES
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-footer {
    display: flex !important;

    width: 100% !important;
    min-height: 39px !important;

    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;

    padding:
      0 16px 10px
      calc(54% + 30px) !important;

    border: 0 !important;

    background: #ffffff !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-inline-details {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    /* color: #1a3068 !important; */
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    background: transparent !important;
  }


  /* =====================================================
     +
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-plus-v3 {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    place-items: center !important;
    margin: -3px auto !important;
    border: 1px solid #d2ddf5 !important;
    border-radius: 50% !important;
    /* color: #075ff5 !important; */
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    /* background: #f4f7ff !important; */
    box-shadow:
      0 5px 12px
      rgba(0, 0, 0, 0.12) !important;
  }


  /* =====================================================
     FAIXA DE SEGURAN�A / REASSURANCE
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance {
    display: none!important;
    width: 100% !important;
    min-height: 50px !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 7px 9px !important;
    border: 1px solid
      rgba(255, 255, 255, 0.20) !important;
    border-radius: 10px !important;
    background:
      rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-icon {
    display: grid !important;

    width: 31px !important;
    height: 31px !important;

    flex: 0 0 31px !important;

    place-items: center !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-copy strong {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-reassurance-copy > span {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }


  /* =====================================================
     A��ES
     ===================================================== */

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-summary-actions-row {
    margin-top: 9px !important;
    padding: 0 !important;

    border: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-actions {
    display: flex !important;

    width: 100% !important;

    flex-direction: column !important;

    gap: 6px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-details {
    width: 100% !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-add-kit svg {
    width: 16px !important;
    height: 16px !important;
  }

}

/* =========================================================
   RESUMO FINAL - DETALHES DENTRO DO CONTE�DO
   Atualiza��o 20260818-03

   O bot�o + DETALHES agora � filho de .kb-kit-card-content.
   Desktop/tablet mant�m a posi��o visual anterior.
   No mobile at� 450px ele acompanha nome + chips como um bloco.
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP / TABLET
   Preserva visualmente a antiga �rea do footer mesmo com o
   bot�o agora pertencendo ao conte�do.
   --------------------------------------------------------- */

@media (min-width: 769px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3 {
    position: relative;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-body {
    /* padding-bottom: 72px; */
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content
  > .kb-kit-inline-details {
    left: 22px;
    bottom: 13px;
  }
}

@media (min-width: 451px) and (max-width: 768px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3 {
    position: relative;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-body {
    padding-bottom: 43px;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content
  > .kb-kit-inline-details {
    position: absolute;
    left: 10px;
    bottom: 6px;
  }
}

/* ---------------------------------------------------------
   MOBILE - VERS�O 1
   Nome + chips + +DETALHES formam um �nico bloco.
   --------------------------------------------------------- */

@media (max-width: 450px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3 {
    min-height: 245px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-body {
    align-items: start !important;
    padding: 8px 16px 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content {
    align-self: start !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 5px 0 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content
  > .kb-kit-inline-details {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 23px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    border: 0 !important;
    /* color: #1a3068 !important; */
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    background: transparent !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v3
  .kb-kit-card-v3
  .kb-kit-card-content
  > .kb-kit-inline-details:disabled {
    cursor: default !important;
  }
}
  @media (max-width: 450px) {

  /* �rea dos chips n�o pode ultrapassar a coluna */
  #kit-base-page
  .kb-kit-card-content {
    min-width: 0;
  }

  #kit-base-page
  .kb-kit-spec-list {
    width: 100%;
    min-width: 0;
  }

  /* Chip limitado � largura dispon�vel */
  #kit-base-page
  .kb-kit-spec-chip {
    width: fit-content;
    max-width: 100%;
    min-width: 0;

    height: auto;

    white-space: normal;
  }

  /* Texto dentro do chip pode quebrar */
  #kit-base-page
  .kb-kit-spec-chip > span:last-child {
    min-width: 0;
    max-width: 100%;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;

    line-height: 1.25;
  }
    #kit-base-page .kb-kit-heading > div:first-child {
    text-align: center;
    margin-left: auto;
    }
    
    #kit-base-page .kb-kit-progress {
        margin: 0px auto 0;}

}

/* =========================================================
   EFEITO PREMIUM NOS BOT�ES PRINCIPAIS - VERS�O VERDE
   TORCIDA BRASILEIRA

   Aplicado em:
   - Adicionar ao carrinho
   - Definir Base e continuar
   - Definir Mastro e continuar
   - Adicionar Kit ao carrinho

   Mant�m tamanhos e responsividade j� existentes.
   ========================================================= */

#kit-base-page .kb-add-cart,
#kit-base-page .kb-confirm-base,
#kit-base-page .kb-confirm-mast,
#kit-base-page .kb-add-kit {
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;

    border: 0 !important;
    outline: none !important;

    color: #ffffff;
    cursor: pointer;

    background: #234293 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -2px 0 rgba(10, 28, 80, 0.30),
        0 3px 5px rgba(35, 66, 147, 0.28);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}


/* =========================================================
   BRILHO CONT�NUO PERCORRENDO O CONTORNO
   ========================================================= */

#kit-base-page .kb-add-cart::before,
#kit-base-page .kb-confirm-base::before,
#kit-base-page .kb-confirm-mast::before,
#kit-base-page .kb-add-kit::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;

  width: 180%;
  height: auto;
  aspect-ratio: 1 / 1;

  pointer-events: none;

  background:
    conic-gradient(
      from 0deg,

      transparent 0deg,
      transparent 286deg,

      rgba(35, 66, 147, 0.04) 294deg,
      rgba(66, 103, 196, 0.12) 300deg,
      rgba(80, 120, 220, 0.30) 307deg,
      rgba(107, 145, 231, 0.55) 314deg,
      rgba(153, 181, 242, 0.85) 321deg,
      rgba(225, 234, 255, 0.98) 327deg,

      #ffffff 332deg,
      #ffffff 343deg,

      rgba(228, 236, 255, 0.98) 348deg,
      rgba(157, 184, 242, 0.82) 353deg,
      rgba(90, 130, 225, 0.40) 357deg,

      transparent 360deg
    );

  transform:
    translate(-50%, -50%)
    rotate(0deg);

  transform-origin: center center;
  will-change: transform;

  animation:
    kb-green-border-orbit
    3.4s
    linear
    infinite;
}


/* =========================================================
   MIOLO DOS BOT�ES
   Esconde o gradiente no centro e deixa vis�vel s� a borda.
   ========================================================= */

#kit-base-page .kb-add-cart::after,
#kit-base-page .kb-confirm-base::after,
#kit-base-page .kb-confirm-mast::after,
#kit-base-page .kb-add-kit::after {
  content: "";

  position: absolute;
  inset: 2px;
  z-index: -1;

  border-radius: calc(9px - 2px);
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      #234293 0%,
      #1a3068 24%,
      #1a3068 56%,
      #07183f 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(10, 28, 80, 0.32);
}


@keyframes kb-green-border-orbit {
  0% {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}


/* =========================================================
   �CONES ACIMA DO EFEITO
   ========================================================= */

#kit-base-page .kb-add-cart svg,
#kit-base-page .kb-confirm-base svg,
#kit-base-page .kb-confirm-mast svg,
#kit-base-page .kb-add-kit svg {
  position: relative;
  z-index: 2;
  fill: currentColor;
}


/* =========================================================
   HOVER
   ========================================================= */

#kit-base-page .kb-add-cart:hover,
#kit-base-page .kb-confirm-base:hover,
#kit-base-page .kb-confirm-mast:hover,
#kit-base-page .kb-add-kit:hover {
  transform: translateY(-2px);
  background: #234293 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(10, 28, 80, 0.28),
    0 0 12px rgba(85, 125, 220, 0.18),
    0 6px 5px rgba(35, 66, 147, 0.26);
}

#kit-base-page .kb-add-cart:active,
#kit-base-page .kb-confirm-base:active,
#kit-base-page .kb-confirm-mast:active,
#kit-base-page .kb-add-kit:active {
  transform: translateY(0);
}


/* =========================================================
   FOCO - REMOVE BORDA PRETA SEM ALTERAR O EFEITO
   ========================================================= */

#kit-base-page .kb-add-cart,
#kit-base-page .kb-add-cart:hover,
#kit-base-page .kb-add-cart:focus,
#kit-base-page .kb-add-cart:focus-visible,
#kit-base-page .kb-add-cart:active,
#kit-base-page .kb-confirm-base,
#kit-base-page .kb-confirm-base:hover,
#kit-base-page .kb-confirm-base:focus,
#kit-base-page .kb-confirm-base:focus-visible,
#kit-base-page .kb-confirm-base:active,
#kit-base-page .kb-confirm-mast,
#kit-base-page .kb-confirm-mast:hover,
#kit-base-page .kb-confirm-mast:focus,
#kit-base-page .kb-confirm-mast:focus-visible,
#kit-base-page .kb-confirm-mast:active,
#kit-base-page .kb-add-kit,
#kit-base-page .kb-add-kit:hover,
#kit-base-page .kb-add-kit:focus,
#kit-base-page .kb-add-kit:focus-visible,
#kit-base-page .kb-add-kit:active {
  border: 0 !important;
  outline: none !important;
}


/* =========================================================
   AJUSTE DO RAIO INTERNO EM DESKTOP COMPACTO
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page .kb-add-cart::after,
  #kit-base-page .kb-confirm-base::after,
  #kit-base-page .kb-confirm-mast::after,
  #kit-base-page .kb-add-kit::after {
    border-radius: calc(7px - 2px);
  }

}


/* =========================================================
   RESUMO FINAL V3
   BOT�O MAIS CLARO PARA N�O SE PERDER NO FUNDO #1a3068
   SOMENTE O "ADICIONAR KIT AO CARRINHO" DO RESUMO FINAL
   ========================================================= */

#kit-base-page
[data-kit-summary].kb-kit-summary-v3
.kb-add-kit {
  background: #4267c4 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(35, 66, 147, 0.30),
    0 8px 20px rgba(26, 48, 104, 0.30) !important;
}

#kit-base-page
[data-kit-summary].kb-kit-summary-v3
.kb-add-kit::after {
  background:
    linear-gradient(
      180deg,
      #4267c4 0%,
      #4267c4 50%,
      #1a3068 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(26, 48, 104, 0.30);
}

#kit-base-page
[data-kit-summary].kb-kit-summary-v3
.kb-add-kit:hover {
  background: #4267c4 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(35, 66, 147, 0.30),
    0 0 18px rgba(110, 150, 235, 0.28),
    0 12px 26px rgba(15, 35, 85, 0.34) !important;
}

/* =========================================================
   RESUMO FINAL DO KIT - V4
   Base + Mastro empilhados � esquerda
   Galeria de simula��es � direita
   ========================================================= */

#kit-base-page [data-kit-summary].kb-kit-summary-v4 {
  position: relative;
  display: block;
  margin-top: 16px;
  padding: 20px 24px 20px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #1a3068;
  box-shadow: 0 14px 36px rgba(45, 51, 61, 0.10);
}

#kit-base-page [data-kit-summary].kb-kit-summary-v4::before {
  display: none !important;
}

/* CABE�ALHO */
#kit-base-page .kb-kit-summary-header-v4 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 14px;
}

#kit-base-page .kb-kit-summary-v4 .kb-kit-summary-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 0;
  color: #1a3068;
  background: #e8efff;
  box-shadow: none;
}

#kit-base-page .kb-kit-summary-v4 .kb-kit-summary-icon svg {
  width: 25px;
  height: 25px;
  fill: #1a3068;
}

#kit-base-page .kb-kit-summary-header-v4 h2 {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: clamp(24px, 1.9vw, 31px) !important;
  font-weight: 700;
  line-height: 1.04;
  text-align: left;
}

#kit-base-page .kb-kit-summary-header-v4 p {
  margin: 1px 0 0;
  color: #ffffff;
  font-size: clamp(12px, 1vw, 17px);
  line-height: 1.25;
}

/* LAYOUT PRINCIPAL */
#kit-base-page .kb-kit-summary-layout-v4 {
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
}

/* COLUNA ESQUERDA */
#kit-base-page .kb-kit-products-v4 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

#kit-base-page .kb-kit-card-v4 {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(35, 66, 147, 0.08);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(35, 66, 147, 0.10);
  align-items: flex-start;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-head {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 20px 3px;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-head-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 43px;
  border-radius: 7px;
  color: #1a3068;
  background: #f4f7ff;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-head-icon svg {
  width: 30px;
  height: 30px;
  fill: #1a3068;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-label {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
  color: #1a3068;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-body {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: 223px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 4px 12px 12px;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-image {
  display: grid;
  width: 100%;
  height: 125px;
  place-items: center;
  overflow: hidden;
  border: solid 1px #dcdcdc;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(45, 51, 61, 0.06) !important;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-image img {
  display: block;
  width: 94%;
  max-width: 94%;
  height: 94%;
  max-height: 94%;
  margin: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: -20%;
  width: 100%;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-card-content > strong {
  display: block;
  margin: 0;
  color: #1a3068;
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 700;
  line-height: 1.12;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-spec-list {
  display: flex;
  width: 100%;
  max-width: 175px;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-spec-chip {
  display: inline-flex;
  min-width: 112px;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(35, 66, 147, 0.07);
  border-radius: 8px;
  color: #1a3068;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  background: #f4f7ff;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-spec-icon {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  place-items: center;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-spec-icon svg {
  width: 18px;
  height: 18px;
  fill: #1a3068;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-color-dot {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

#kit-base-page .kb-kit-card-v4 .kb-kit-inline-details {
  display: inline-flex;
  width: auto;
  min-height: 20px;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 1px 0;
  border: 0;
  color: #1a3068;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
}

#kit-base-page .kb-kit-plus-v4 {
  position: relative;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 50px;
  place-items: center;
  align-self: center;
  margin: -8px 0;
  border: 1px solid #dfe8fb;
  border-radius: 50%;
  color: #4267c4;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  background: #f4f7ff;
  box-shadow: 0 5px 12px rgba(35, 66, 147, 0.12);
}

/* GALERIA */
#kit-base-page .kb-kit-simulation {
  display: grid;
  min-width: 0;
  min-height: 378px;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: stretch;
  gap: 11px;
}

#kit-base-page .kb-kit-simulation-main {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 378px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#kit-base-page .kb-kit-simulation-main > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#kit-base-page .kb-kit-simulation-thumbs {
  display: flex;
  min-width: 0;
  max-height: 378px;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1px 2px 1px 0;
  scrollbar-width: thin;
}

#kit-base-page .kb-kit-simulation-thumb {
  display: block;
  width: 100%;
  min-width: 0;
  height: 87px;
  flex: 0 0 87px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(35, 66, 147, 0.13);
  transition: border-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

#kit-base-page .kb-kit-simulation-thumb:hover {
  transform: translateY(-1px);
}

#kit-base-page .kb-kit-simulation-thumb.is-selected {
  border-color: #1a3068;
  box-shadow: 0 0 0 0px #ffffff, 0 4px 12px rgba(35, 66, 147, 0.18);
}
  
  #kit-base-page .kb-kit-simulation-thumb.is-selected:focus {
 
}

#kit-base-page .kb-kit-simulation-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  pointer-events: none;
}

#kit-base-page .kb-kit-simulation-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #3d4147;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(-50%);
  backdrop-filter: blur(4px);
}

#kit-base-page .kb-kit-simulation-nav.is-prev {
  left: 10px;
}

#kit-base-page .kb-kit-simulation-nav.is-next {
  right: 10px;
}

#kit-base-page .kb-kit-simulation-nav svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

#kit-base-page .kb-kit-simulation-empty {
  display: flex;
  width: min(360px, 82%);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #667085;
  text-align: center;
}

#kit-base-page .kb-kit-simulation-empty strong {
  color: #465062;
  font-size: 15px;
}

#kit-base-page .kb-kit-simulation-empty span {
  font-size: 12px;
  line-height: 1.35;
}

/* A��ES */
#kit-base-page .kb-kit-summary-v4 .kb-kit-summary-actions-row {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

#kit-base-page .kb-kit-summary-v4 .kb-kit-actions {
  display: flex;
  width: min(760px, 86%);
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#kit-base-page .kb-kit-summary-v4 .kb-add-kit {
  width: 55%;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  background: #4267c4 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(35, 66, 147, 0.30),
    0 8px 20px rgba(26, 48, 104, 0.30) !important;
}

#kit-base-page .kb-kit-summary-v4 .kb-add-kit::after {
  background:
    linear-gradient(
      180deg,
      #4267c4 0%,
      #4267c4 50%,
      #1a3068 100%
    ) !important;
}

#kit-base-page .kb-kit-summary-v4 .kb-kit-details {
  display: inline-flex;
  width: 45%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1.5px solid #4267c4;
  border-radius: 8px;
  color: #1a3068;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  background: #ffffff;
  box-shadow: none;
}

#kit-base-page .kb-kit-summary-v4 .kb-kit-details:hover {
  color: #1a3068;
  border-color: #8ca6e6;
  background: #f7f9ff;
}

/* =========================================================
   DESKTOP / TABLET COMPACTO
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    padding: 18px;
  }

  #kit-base-page .kb-kit-summary-layout-v4 {
    grid-template-columns: minmax(270px, 37%) minmax(0, 1fr);
    gap: 16px;
  }

  #kit-base-page .kb-kit-card-v4 {
    height: 185px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 3px 10px 10px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-image {
    height: 103px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 14px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-spec-chip {
    min-height: 27px;
    padding: 4px 7px;
    font-size: 10px;
  }

  #kit-base-page .kb-kit-plus-v4 {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    margin: -7px 0;
    font-size: 23px;
  }

  #kit-base-page .kb-kit-simulation,
  #kit-base-page .kb-kit-simulation-main {
    min-height: 318px;
  }

  #kit-base-page .kb-kit-simulation {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
  }

  #kit-base-page .kb-kit-simulation-main > img {
    min-height: 318px;
  }

  #kit-base-page .kb-kit-simulation-thumbs {
    max-height: 318px;
    gap: 7px;
  }

  #kit-base-page .kb-kit-simulation-thumb {
    height: 73px;
    flex-basis: 73px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    margin-top: 12px;
    padding: 13px 10px 12px;
    border-radius: 16px;
  }

  #kit-base-page .kb-kit-summary-header-v4 {
    gap: 9px;
    margin-bottom: 11px;
  }

  #kit-base-page .kb-kit-summary-v4 .kb-kit-summary-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  #kit-base-page .kb-kit-summary-header-v4 h2 {
    font-size: 20px !important;
  }

  #kit-base-page .kb-kit-summary-header-v4 p {
    font-size: 10px;
  }

  #kit-base-page .kb-kit-summary-layout-v4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #kit-base-page .kb-kit-card-v4 {
    height: 148px;
    border-radius: 11px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-head {
    min-height: 32px;
    padding: 5px 8px 2px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-head-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
    padding: 3px 8px 8px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-image {
    height: 98px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-content {
    gap: 6px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 13px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-spec-list {
    gap: 4px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-spec-chip {
    min-height: 25px;
    padding: 3px 6px;
    font-size: 9px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-inline-details {
    font-size: 8px;
  }

  #kit-base-page .kb-kit-plus-v4 {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    margin: -6px 0;
    font-size: 22px;
  }

  #kit-base-page .kb-kit-simulation {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 7px;
  }

  #kit-base-page .kb-kit-simulation-thumbs {
    order: -1;
    display: flex;
    width: 100%;
    max-height: none;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2px;
    scrollbar-width: none;
  }

  #kit-base-page .kb-kit-simulation-thumbs::-webkit-scrollbar {
    display: none;
  }

  #kit-base-page .kb-kit-simulation-thumb {
    width: 70px;
    height: 58px;
    flex: 0 0 70px;
  }

  #kit-base-page .kb-kit-simulation-main {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  #kit-base-page .kb-kit-simulation-main > img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  #kit-base-page .kb-kit-summary-v4 .kb-kit-actions {
    width: 100%;
    flex-direction: column;
    gap: 6px;
  }

  #kit-base-page .kb-kit-summary-v4 .kb-add-kit,
  #kit-base-page .kb-kit-summary-v4 .kb-kit-details {
    width: 100%;
    min-height: 39px;
    font-size: 11px;
  }
}

@media (max-width: 450px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    padding: 10px 7px 9px;
  }

  #kit-base-page .kb-kit-card-v4 {
    height: 142px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 7px 7px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-image {
    height: 93px;
  }

  #kit-base-page .kb-kit-simulation-thumb {
    width: 62px;
    height: 52px;
    flex-basis: 62px;
  }
}

/* =========================================================
   RESUMO V5 - TIPOS DE IMAGEM DA GALERIA
   Base e mastro usam contain para não sofrer recorte.
   ========================================================= */

#kit-base-page .kb-kit-simulation-main.is-product {
  background: #f1f2f4;
}

#kit-base-page .kb-kit-simulation-main.is-product > img {
  object-fit: contain;
  object-position: center;
  padding: 18px;
}

#kit-base-page .kb-kit-simulation-thumb.is-product {
  background: #ffffff;
}

#kit-base-page .kb-kit-simulation-thumb.is-product img {
  object-fit: contain;
  object-position: center;
  padding: 4px;
}

@media (max-width: 768px) {
  #kit-base-page .kb-kit-simulation-main.is-product > img {
    padding: 12px;
  }
}

/* =========================================================
   AJUSTE - RESUMO FINAL MAIOR E MAIS PRÓXIMO DAS BORDAS
   ========================================================= */

@media (min-width: 900px) {

  /* reduz a folga interna do resumo */
  #kit-base-page .kb-kit-summary.kb-kit-summary-v4 {
    padding: 18px 20px 16px;
  }

  #kit-base-page .kb-kit-summary-header.kb-kit-summary-header-v4 {
    margin-bottom: 10px;
  }

  /* aumenta a ocupação horizontal geral */
  #kit-base-page .kb-kit-summary-layout-v4 {
    grid-template-columns: 500px 790px;
    column-gap: 20px;
    justify-content: center;
    align-items: start;
  }

  /* coluna esquerda maior */
  #kit-base-page .kb-kit-products-v4 {
    width: 480px;
    min-width: 480px;
  }

  /* cards mais altos/largos */
  #kit-base-page .kb-kit-card-v4 {
    border-radius: 16px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-body {
    min-height: 164px;
    padding: 10px 18px 11px;
    gap: 16px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-image {
    width: 200px;
    min-width: 200px;
    height: 170px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 22px;
    line-height: 1.05;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-spec-chip {
    min-height: 38px;
    font-size: 16px;
  }

  /* símbolo de + um pouco melhor posicionado */
  #kit-base-page .kb-kit-plus.kb-kit-plus-v4 {
    width: 48px;
    height: 69px;
    font-size: 30px;
    margin: -7px auto -7px;
  }

  /* área da galeria maior e mais alta */
  #kit-base-page .kb-kit-simulation {
    width: 755px;
    max-width: 755px;
    display: grid;
    grid-template-columns: 629px 120px;
    gap: 12px;
    align-items: start;
    justify-content: start;
  }

  /* imagem principal maior */
  #kit-base-page .kb-kit-simulation-main {
    width: 620px;
    max-width: 620px;
    height: 605px;
    max-height: 605px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
  }

  #kit-base-page .kb-kit-simulation-main > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* thumbs proporcionais �  nova altura */
  #kit-base-page .kb-kit-simulation-thumbs {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    height: 615px;
    max-height: 605px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    justify-content: space-between;
  }

  #kit-base-page .kb-kit-simulation-thumb {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    height: 150px;
    min-height: 138px;
    max-height: 138px;
    flex: 0 0 129px;
    border-radius: 10px;
  }

  #kit-base-page .kb-kit-simulation-thumb img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }

  /* botões laterais da galeria */
  #kit-base-page .kb-kit-simulation-nav {
    width: 34px;
    height: 34px;
  }

  /* ações mais próximas do conteúdo */
  #kit-base-page .kb-kit-summary-actions-row {
    margin-top: 14px;
  }

  #kit-base-page .kb-kit-actions {
    max-width: 690px;
    margin: 0 auto;
    gap: 12px;
  }

  #kit-base-page .kb-add-kit,
  #kit-base-page .kb-kit-details {
    min-height: 48px;
  }

}


/* =========================================================
   DESKTOP INTERMEDIÁRIO
   ========================================================= */

@media (min-width: 769px) and (max-width: 899px) {

  #kit-base-page .kb-kit-summary.kb-kit-summary-v4 {
    padding: 18px 18px 16px;
  }

  #kit-base-page .kb-kit-summary-layout-v4 {
    grid-template-columns:
      minmax(320px, 40%)
      minmax(0, 54%);

    column-gap: 18px;
    justify-content: start;
    align-items: start;
  }

  #kit-base-page .kb-kit-products-v4 {
    width: 100%;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-body {
    min-height: 156px;
    gap: 14px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-image {
    width: 136px;
    min-width: 136px;
    height: 126px;
  }

  #kit-base-page .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 20px;
  }

  #kit-base-page .kb-kit-simulation {
    width: 100%;
    max-width: 580px;

    grid-template-columns:
      minmax(0, 82%)
      86px;

    gap: 10px;
    align-items: start;
    justify-content: start;
  }

  #kit-base-page .kb-kit-simulation-main {
    width: 100%;
    height: auto;
    max-height: 460px;

    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  #kit-base-page .kb-kit-simulation-main > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }

  #kit-base-page .kb-kit-simulation-thumbs {
    width: 86px;
    max-width: 86px;

    height: 460px;
    max-height: 460px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    overflow: hidden;
  }

  #kit-base-page .kb-kit-simulation-thumb {
    width: 86px;
    height: 109px;
    min-height: 109px;

    flex: 0 0 109px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page .kb-kit-summary-layout-v4 {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  #kit-base-page .kb-kit-simulation {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  #kit-base-page .kb-kit-simulation-main {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  #kit-base-page .kb-kit-simulation-main > img {
    width: 100%;
    height: 100%;
  }

  #kit-base-page .kb-kit-simulation-thumbs {
    width: 100%;
    height: auto;
    max-height: none;

    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #kit-base-page .kb-kit-simulation-thumb {
    width: 70px;
    height: 58px;
    min-height: 58px;

    flex: 0 0 70px;
  }

}

@media (max-width: 450px) {

  #kit-base-page .kb-kit-simulation-thumb {
    width: 62px;
    height: 52px;
    min-height: 52px;

    flex: 0 0 62px;
  }

}

/* =========================================================
   RESPONSIVO FINAL V10 - RESUMO KIT V4
   Breakpoints ajustados:
   1440 / 1024 / 768 / 450 / 425 / 375

   IMPORTANTE:
   Este bloco fica NO FINAL do CSS para sobrescrever
   as regras responsivas antigas somente no resumo V4.
   ========================================================= */


/* =========================================================
   ATÉ 1440px
   Mantém o desenho desktop:
   Base + Mastro �  esquerda / Simulação �  direita.
   Apenas reduz tudo proporcionalmente.
   ========================================================= */

@media (max-width: 1440px) and (min-width: 1025px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    padding: 17px 18px 16px !important;
    border-radius: 20px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    gap: 11px !important;
    margin-bottom: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 h2 {
    font-size: 27px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 p {
    font-size: 13px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-layout-v4 {
    display: grid !important;
    grid-template-columns:
      minmax(365px, 38%)
      minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-products-v4 {
    width: 100% !important;
    min-width: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 {
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head {
    min-height: 43px !important;
    gap: 7px !important;
    padding: 9px 14px 2px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-label {
    font-size: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns:
      minmax(145px, 43%)
      minmax(0, 1fr) !important;
    min-height: 0 !important;
    gap: 13px !important;
    padding: 5px 12px 11px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-image {
    width: 100% !important;
    min-width: 0 !important;
    height: 155px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content {
    width: 100% !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-list {
    max-width: 160px !important;
    gap: 7px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-chip {
    min-width: 108px !important;
    min-height: 31px !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-inline-details {
    font-size: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-plus-v4 {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    margin: -6px auto !important;
    font-size: 26px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation {
    display: grid !important;
    width: 97% !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr)
      130px !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main {
    width: 99% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main > img {
    width: 100% !important;
   
    min-height: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumbs {
    display: flex !important;
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    
    max-height: none !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 7px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumb {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 0 !important;
    border-radius: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    width: min(690px, 72%) !important;
    max-width: none !important;
    gap: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 44px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   ATÉ 1024px
   Ainda mantém Base + Mastro �  esquerda e galeria �  direita,
   mas com proporções compactas.
   ========================================================= */

@media (max-width: 1024px) and (min-width: 769px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    padding: 14px !important;
    border-radius: 17px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    gap: 9px !important;
    margin-bottom: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 h2 {
    font-size: 23px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 p {
    font-size: 11px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-layout-v4 {
    display: grid !important;
    grid-template-columns:
      minmax(290px, 34%)
      minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-products-v4 {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 {
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head {
    min-height: 35px !important;
    gap: 6px !important;
    padding: 7px 9px 1px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-label {
    font-size: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns: 135px
      minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 4px 8px 33px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-image {
    width: 130px !important;
    min-width: 112px !important;
    height: 108px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content {
    gap: 6px !important;
    margin-top: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-list {
    max-width: 130px !important;
    gap: 5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-chip {
    min-width: 92px !important;
    min-height: 26px !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-color-dot {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-inline-details {
    font-size: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-plus-v4 {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    margin: -5px auto !important;
    font-size: 22px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr)
      102px !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main {
    width: 98% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main > img {
    width: 100% !important;
    
    min-height: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumbs {
    display: flex !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    
    max-height: none !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 6px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumb {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px  !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-nav {
    width: 29px !important;
    height: 29px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    width: min(600px, 78%) !important;
    gap: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 39px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }
}


/* =========================================================
   ATÉ 768px
   Tablet retrato:
   Base e Mastro ficam lado a lado.
   Galeria passa para baixo.
   Miniaturas ficam horizontais acima da imagem.
   ========================================================= */

@media (max-width: 768px) and (min-width: 451px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    margin-top: 12px !important;
    padding: 14px 12px 13px !important;
    border-radius: 16px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    gap: 9px !important;
    margin-bottom: 11px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 h2 {
    font-size: 21px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 p {
    font-size: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-layout-v4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-products-v4 {
    display: grid !important;
    width: 100% !important;
    grid-template-columns:
      minmax(0, 1fr)
      38px
      minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 {
    width: 100% !important;
    height: auto !important;
    min-height: 175px !important;
    border-radius: 11px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head {
    min-height: 33px !important;
    gap: 5px !important;
    padding: 6px 7px 1px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-label {
    font-size: 13px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns:
      105px
      minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 4px 7px 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-image {
    width: 105px !important;
    min-width: 105px !important;
    height: 105px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content {
    gap: 5px !important;
    margin-top: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 16px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-list {
    gap: 4px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-chip {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 3px 5px !important;
    font-size: 13px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-inline-details {
    font-size: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-plus-v4 {
    width: 34px !important;
    height: 34px !important;
    flex: none !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    font-size: 22px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumbs {
    order: -1 !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 130px !important;
    min-height: 72px !important;
    max-height: 130px !important;
    flex: none !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main {
    width: 100% !important;
    max-width: none !important;
    height: 625px !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main > img {
    width: 100% !important;
   
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    width: min(620px, 94%) !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    width: 50% !important;
    min-height: 40px !important;
    font-size: 10px !important;
  }
}


/* =========================================================
   ATÉ 450px
   Celular:
   Cards voltam a ficar empilhados.
   Galeria abaixo com 4 thumbs em uma linha.
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    margin-top: 10px !important;
    padding: 11px 8px 10px !important;
    border-radius: 15px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 h2 {
    font-size: 20px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 p {
    font-size: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-layout-v4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-products-v4 {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 {
    width: 100% !important;
    height: auto !important;
    min-height: 170px !important;
    border-radius: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head {
    min-height: 36px !important;
    gap: 6px !important;
    padding: 7px 9px 1px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-label {
    font-size: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns:
      minmax(120px, 43%)
      minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 5px 9px 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-image {
    width: 100% !important;
    min-width: 0 !important;
    height: 120px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content {
    gap: 6px !important;
    margin-top: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 15px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-list {
    width: 100% !important;
    max-width: 145px !important;
    gap: 5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-chip {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 27px !important;
    gap: 5px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-inline-details {
    font-size: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-plus-v4 {
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
    margin: -5px auto !important;
    font-size: 23px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumbs {
    order: -1 !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    flex: none !important;
    border-radius: 7px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main {
    width: 100% !important;
    height: 300px !important;
    min-height: 400px !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main > img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-nav {
    width: 28px !important;
    height: 28px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    width: 100% !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-main.is-product > img {
    padding: 9px !important;
  }
}


/* =========================================================
   ATÉ 425px
   Pequeno refinamento para largura típica Android.
   ========================================================= */

@media (max-width: 425px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    padding: 10px 7px 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    margin-bottom: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 {
    min-height: 164px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns:
      minmax(112px, 42%)
      minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 4px 8px 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-image {
    height: 113px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 17px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-chip {
    min-height: 26px !important;
    padding: 4px 6px !important;
    font-size: 12.5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumb {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 37px !important;
    font-size: 9.5px !important;
  }
}


/* =========================================================
   ATÉ 375px
   Refinamento final para celulares estreitos.
   ========================================================= */

@media (max-width: 375px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    padding: 9px 6px 8px !important;
    border-radius: 13px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 h2 {
    font-size: 18px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 p {
    font-size: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 {
    min-height: 154px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head {
    min-height: 32px !important;
    padding: 5px 7px 1px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-head-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-label {
    font-size: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-body {
    grid-template-columns:
      102px
      minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 4px 7px 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-image {
    width: 102px !important;
    min-width: 102px !important;
    height: 103px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content {
    gap: 5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-card-content > strong {
    font-size: 13px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-list {
    gap: 4px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-spec-chip {
    min-height: 24px !important;
    gap: 4px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-card-v4 .kb-kit-inline-details {
    font-size: 7px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-plus-v4 {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 21px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumbs {
    gap: 4px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-thumb {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation-nav {
    width: 26px !important;
    height: 26px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 35px !important;
    padding: 6px 7px !important;
    font-size: 9px !important;
  }
}

/* =========================================================
   V11 - AÇÕES DO RESUMO CONTIDAS NO MESMO BLOCO
   Mobile / telas menores

   Objetivo:
   - manter "Adicionar Kit ao carrinho" e "Mais detalhes"
     DENTRO do bloco verde;
   - impedir qualquer estouro horizontal;
   - empilhar os dois botões;
   - usar toda a largura interna disponível.
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    overflow: hidden !important;
    padding-bottom: 12px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 10px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    position: static !important;

    display: grid !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    position: relative !important;
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    transform: none;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    border: 1.5px solid #4267c4 !important;
    background: #ffffff !important;
  }

}


/* =========================================================
   450px
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    gap: 6px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 39px !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
  }

}


/* =========================================================
   425px
   ========================================================= */

@media (max-width: 425px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 38px !important;
    font-size: 11.5px !important;
  }

}


/* =========================================================
   375px
   ========================================================= */

@media (max-width: 375px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 7px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    gap: 5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
  }

}

/* =========================================================
   V12 - AÇÕES JUNTO À COLUNA BASE + MASTRO
   TODAS AS RESOLUÇÕES

   Estrutura visual:
   DESKTOP:
   [ Cabeçalho                         ]
   [ Base + Mastro ] [ Simulação       ]
   [ Ações         ] [ Simulação       ]

   MOBILE:
   [ Cabeçalho     ]
   [ Base + Mastro ]
   [ Ações         ]
   [ Simulação     ]

   O HTML não precisa ser alterado.
   ========================================================= */


/* =========================================================
   DESKTOP MAIOR - acima de 1440px
   ========================================================= */

@media (min-width: 1441px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    display: grid !important;

    grid-template-columns:
      minmax(420px, 36%)
      minmax(0, 1fr) !important;

    grid-template-areas:
      "header header"
      "products simulation"
      "actions simulation"
      "warning warning";

    column-gap: 24px !important;
    row-gap: 0 !important;

    align-items: start !important;
  }

}


/* =========================================================
   1025px ATÉ 1440px
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1440px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    display: grid !important;

    grid-template-columns:
      minmax(365px, 38%)
      minmax(0, 1fr) !important;

    grid-template-areas:
      "header header"
      "products simulation"
      "actions simulation"
      "warning warning";

    column-gap: 18px !important;
    row-gap: 0 !important;

    align-items: start !important;
  }

}


/* =========================================================
   769px ATÉ 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    display: grid !important;

    grid-template-columns:
      minmax(290px, 34%)
      minmax(0, 1fr) !important;

    grid-template-areas:
      "header header"
      "products simulation"
      "actions simulation"
      "warning warning";

    column-gap: 14px !important;
    row-gap: 0 !important;

    align-items: start !important;
  }

}


/* =========================================================
   ELEMENTOS DO GRID - DESKTOP/TABLET
   ========================================================= */

@media (min-width: 769px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    grid-area: header !important;
  }

  /*
     Faz os filhos do layout principal participarem
     diretamente do grid do resumo.
  */
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-layout-v4 {
    display: contents !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-products-v4 {
    grid-area: products !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation {
    grid-area: simulation !important;

    align-self: start !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    grid-area: actions !important;

    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 12px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;

    align-self: start !important;

    overflow: visible !important;
  }

  /*
     Os dois botões pertencem agora visualmente
     �  coluna Base + Mastro.
  */
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    display: inline-flex !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    white-space: normal !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-map-warning {
    grid-area: warning !important;
  }

}


/* =========================================================
   DESKTOP GRANDE - TAMANHO DOS BOTÕES
   ========================================================= */

@media (min-width: 1441px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 14px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    gap: 8px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 47px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

}


/* =========================================================
   1025px ATÉ 1440px - TAMANHO DOS BOTÕES
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1440px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 11px !important;
    height: 125px;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    gap: 6px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

}


/* =========================================================
   769px ATÉ 1024px - TAMANHO DOS BOTÕES
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin-top: 9px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-actions {
    gap: 5px !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-add-kit,
  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-details {
    min-height: 37px !important;
    padding: 6px 8px !important;
    font-size: 9.5px !important;
  }

}


/* =========================================================
   768px OU MENOS
   Cards -> Ações -> Galeria
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4 {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-areas:
      "header"
      "products"
      "actions"
      "simulation"
      "warning";

    row-gap: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-header-v4 {
    grid-area: header !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-layout-v4 {
    display: contents !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-products-v4 {
    grid-area: products !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    grid-area: actions !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 9px 0 10px !important;
    padding: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-simulation {
    grid-area: simulation !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-map-warning {
    grid-area: warning !important;
  }

}


/* =========================================================
   450 / 425 / 375
   Mantém as ações no mesmo local.
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin: 8px 0 9px !important;
  }

}

@media (max-width: 425px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin: 7px 0 8px !important;
  }

}

@media (max-width: 375px) {

  #kit-base-page [data-kit-summary].kb-kit-summary-v4
  .kb-kit-summary-actions-row {
    margin: 6px 0 7px !important;
  }

}

/* =========================================================
   V13 - RESUMO FINAL OCULTO ATÉ CONFIRMAR O MASTRO

   O JavaScript já controla corretamente o atributo [hidden]:
   - inicia oculto;
   - continua oculto após definir a base;
   - abre somente em confirmMastStep();
   - volta a ocultar ao reabrir/alterar base ou mastro.

   Esta regra precisa ficar NO FINAL do CSS porque as regras
   responsivas V12 usam display:grid !important no resumo.
   Sem esta sobrescrita, o CSS pode ignorar o atributo hidden.
   ========================================================= */

#kit-base-page [data-kit-summary].kb-kit-summary-v4[hidden] {
  display: none !important;
}


/* Segurança adicional para qualquer versão/classe do resumo */
#kit-base-page [data-kit-summary][hidden] {
  display: none !important;
}

/* =========================================================
   AVISO - BANDEIRAS NÃO INCLUSAS
   Exibe SOMENTE quando a imagem principal recebe .is-ambiente

   O configurador gera no DOM:
   <img data-kit-simulation-main class="is-ambiente" ...>

   Como o JavaScript recria o conteúdo da área de simulação,
   o aviso não é um elemento HTML. Ele é criado pelo CSS
   através do ::after do quadro principal.
   ========================================================= */

#kit-base-page .kb-kit-simulation-main {
  position: relative;
}


/* Por padrão o quadro não exibe aviso. */
#kit-base-page .kb-kit-simulation-main::after {
  content: none;
}


/* =========================================================
   IMAGEM DE AMBIENTE COM BANDEIRAS
   ========================================================= */

#kit-base-page
.kb-kit-simulation-main:has(
  > img[data-kit-simulation-main].is-ambiente
)::after {
  content: "*Bandeiras n�o inclusas.\A*Imagem ilustrativa.";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 30;
  display: block;
  padding: 5px 9px;
  border-radius: 5px;
  color: #ffffff;
  font-family:
    "Montserrat",
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 1.3;
  text-align: right;
  white-space: pre-line;
  pointer-events: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

  #kit-base-page
  .kb-kit-simulation-main:has(
    > img[data-kit-simulation-main].is-ambiente
  )::after {
    right: 9px;
    bottom: 8px;
    padding: 4px 7px;
    font-size: 12px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 450px) {

  #kit-base-page
  .kb-kit-simulation-main:has(
    > img[data-kit-simulation-main].is-ambiente
  )::after {
    right: 7px;
    bottom: 6px;
    padding: 3px 6px;
    font-size: 9px;
  }

}


/* =========================================================
   MOBILE 375px
   ========================================================= */

@media (max-width: 375px) {

  #kit-base-page
  .kb-kit-simulation-main:has(
    > img[data-kit-simulation-main].is-ambiente
  )::after {
    right: 6px;
    bottom: 5px;

    padding: 3px 5px;

    font-size: 7.5px;
  }

}
  /* =========================================================
   REMOVER SOMENTE O OUTLINE PRETO DAS THUMBS
   ========================================================= */

#kit-base-page .kb-kit-simulation-thumb:focus,
#kit-base-page .kb-kit-simulation-thumb:focus-visible,
#kit-base-page .kb-kit-simulation-thumb:active {
  outline: none !important;
}


/* clique com mouse */
#kit-base-page
.kb-kit-simulation-thumb:focus:not(:focus-visible) {
  outline: none !important;
}
  
/* =========================================================
   TRANSIÇÃO HORIZONTAL - SIMULAÇÕES
   ========================================================= */

#kit-base-page
.kb-kit-simulation-main
> img[data-kit-simulation-main] {
  will-change:
    transform,
    opacity;
}


/* próxima imagem entra da direita */

#kit-base-page
.kb-kit-simulation-main
> img[data-kit-simulation-main].kb-slide-next {
  animation:
    kb-simulation-slide-next
    420ms
    cubic-bezier(.22, .75, .25, 1)
    both;
}


/* imagem anterior entra da esquerda */

#kit-base-page
.kb-kit-simulation-main
> img[data-kit-simulation-main].kb-slide-prev {
  animation:
    kb-simulation-slide-prev
    420ms
    cubic-bezier(.22, .75, .25, 1)
    both;
}


@keyframes kb-simulation-slide-next {

  from {
    opacity: 0.25;

    transform:
      translateX(55px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }

}


@keyframes kb-simulation-slide-prev {

  from {
    opacity: 0.25;

    transform:
      translateX(-55px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }

}


/* MOBILE */

@media (max-width: 768px) {

  @keyframes kb-simulation-slide-next {

    from {
      opacity: 0.3;

      transform:
        translateX(32px);
    }

    to {
      opacity: 1;

      transform:
        translateX(0);
    }

  }


  @keyframes kb-simulation-slide-prev {

    from {
      opacity: 0.3;

      transform:
        translateX(-32px);
    }

    to {
      opacity: 1;

      transform:
        translateX(0);
    }

  }

}


/* acessibilidade */

@media (prefers-reduced-motion: reduce) {

  #kit-base-page
  .kb-kit-simulation-main
  > img[data-kit-simulation-main] {
    animation: none !important;
  }

} 
  
/* =========================================================
   BOTÕES LATERAIS DA SIMULAÇÃO
   FEEDBACK DE CLIQUE SUTIL
   ========================================================= */

#kit-base-page .kb-kit-simulation-nav {
  outline: none !important;
  border: 0 !important;

  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 2px 7px
    rgba(0, 0, 0, 0.10);

  transition:
    transform 100ms ease,
    box-shadow 140ms ease;
}


/* remove contorno preto */

#kit-base-page .kb-kit-simulation-nav:focus,
#kit-base-page .kb-kit-simulation-nav:focus-visible,
#kit-base-page .kb-kit-simulation-nav:active {
  outline: none !important;
  border: 0 !important;
}


/* =========================================================
   CLIQUE
   Mantém translateY(-50%) para não sair da posição
   ========================================================= */

#kit-base-page .kb-kit-simulation-nav.is-clicked {
  transform:
    translateY(-50%)
    scale(0.985);

  box-shadow:
    0 0 0 3px
    rgba(255, 255, 255, 0.18),

    0 4px 11px
    rgba(0, 0, 0, 0.18);
}