/*
Author: Ignacio Muñoz

Fonts: Jost

/*=========================================================
	01 -> GENERAL
===========================================================*/

/*----------------------------*\
	Typography
\*----------------------------*/


:root {
  --primary: #F15A22;
  --secondary: black;
  --third: #A0CC91;
  --fourth: #F4C92D;
}



@font-face {
  font-family: 'Din-bold';
  src: url('./fonts/D-DIN-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/static/Jost-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/static/Jost-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/static/Jost-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/static/Jost-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/static/Jost-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/static/Jost-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: 'Questrial-regular';
  src: url('./fonts/Questrial-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: regular;
}


body {
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-weight: 300;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Jost', sans-serif;
  /* color: #2B2D42; */
  font-weight: 700;
  margin: 0 0 10px;
}

p {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}


a {
  color: #2B2D42;
  font-weight: 400;
  -webkit-transition: 0.2s color;
  transition: 0.2s color;
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--primary);
  text-decoration: none;
  outline: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none
}

.card {
  margin-top: 10%;
  padding: 0px !important;
  background-color: white;
  border: 1px solid var(--primary);
  border-radius: 0px;
  color: #808080;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s, opacity 0.3s;
}

/* Efecto hover */
.card:hover {
  transform: scale(1.05);
}

/* Efecto hover en las demás cards */
.card:not(:hover) {
  opacity: 0.4;
}

/*----------------------------*\
	Buttons
\*----------------------------*/

/*----------------------------*\
	Inputs
\*----------------------------*/

/*-- Text input --*/

.input {
  height: 40px;
  padding: 0px 15px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background-color: #FFF;
  box-sizing: border-box;
  width: 100%;
}


input:disabled {
  background-color: white;
  color: #aaa;
  cursor: not-allowed;
  border: 1px dashed #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea.input {
  padding: 15px;
  min-height: 90px;
}

/*-- Select input --*/

.input-select {
  padding: 0px 15px;
  background: #FFF;
  border: 2px solid #59626E;
  height: 40px;
  font-size: 14px;
  font-style: normal;
}

.input {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

/*----------------------------*\
	Section
\*----------------------------*/

.section {
  padding-bottom: 30px;
}

/*----------------------------*\
	Banner Section
\*----------------------------*/

.banner-section {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; /* Evita que el contenido se desborde */
  box-sizing: border-box;
}

/* Selector de club debajo del banner */
.club-selector-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
  background-color: #FFFFFF;
}

.club-selector-container {
  width: 40%;
  max-width: 448px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.club-selector-container form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.club-selector-container select,
.club-selector-container .input-select,
.club-selector-container #club-selected {
  width: 100%;
  height: 46px;
  border: 2px solid #59626E;
  padding: 4px 5% 4px 5%;
  font-size: 14px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  background-color: #FFF;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}

/* Flecha del selector personalizada */
.club-selector-container form::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #59626E;
  pointer-events: none;
  z-index: 10;
}

.banner-container {
  width: 100%;
  max-width: 100%;
  height: 500px;
  min-height: 400px;
  padding: 5% 10%;
  gap: 10px;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden; /* Evita desbordamiento */
}

.banner-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.banner-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
    rgba(0, 0, 0, 0.51) 0%,
    rgba(0, 0, 0, 0.51) 49%,
    rgba(0, 0, 0, 0.29) 71%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 2;
}

.banner-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.banner-content {
  width: 100%;
  max-width: 570px;
  min-height: 220px;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
}

.banner-title {
  width: 100%;
  min-height: 96px;
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 43px;
  line-height: 1.2;
  color: #FFF;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.banner-paragraph {
  width: 100%;
  max-width: 521px;
  min-height: 96px;
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #FFF;
  margin-bottom: 10px;
  align-self: flex-start;
  box-sizing: border-box;
}

/* Media queries para hacer el banner responsive */
@media (max-width: 1185px) {
  .banner-container {
    padding: 5% 5%;
    height: auto;
    min-height: 400px;
  }
  
  .banner-content {
    max-width: 60%;
    width: 100%;
  }
  
  .banner-title {
    font-size: 36px;
  }
  
  .banner-paragraph {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .banner-container {
    padding: 8% 4%;
    min-height: 350px;
    height: auto;
  }
  
  .banner-content {
    gap: 20px;
  }
  
  .banner-title {
    font-size: 28px;
    min-height: auto;
  }
  
  .banner-paragraph {
    font-size: 14px;
    min-height: auto;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .banner-container {
    padding: 10% 4%;
    min-height: 300px;
  }
  
  .banner-title {
    font-size: 24px;
  }
  
  .banner-paragraph {
    font-size: 13px;
  }
}

/*=========================================================
	02 -> HEADER
===========================================================*/

/*----------------------------*\
	Logo
\*----------------------------*/

#header {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #15161D;
}

/* Header principal - Especificaciones Figma */
header.container {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 100px;
  border-bottom: 1px solid #E4E7ED;
  padding-left: 8.73%;
  padding-right: 8.73%;
  display: flex;
  align-items: center;
  background-color: #FFF;
  box-sizing: border-box;
  max-width: 100%;
}

/* Container interno del header - Ocupa el 100% del ancho disponible */
.header-flex {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0;
}

.header-logo {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
}

.header-logo .logo {
  display: block;
  line-height: 0;
}

.header-logo .logo img {
  width: 130px;
  height: 37px;
  object-fit: contain;
  display: block;
  margin-bottom: 3px;
}
/*----------------------------*\
	Cart
\*----------------------------*/

.header-ctn {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
}

.cart-icon {
  display: flex;
  align-items: center;
  height: 40px;
}

.cart-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 142px;
  height: 40px;
  text-decoration: none;
  border: 2px solid #4D4D4F;
  padding: 0;
  background-color: #FFF;
  transition: all 0.2s;
  box-sizing: border-box;
}

.cart-icon img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.cart-icon a span {
  width: 53px;
  height: 19px;
  display: flex;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2B2D42;
  flex-shrink: 0;
}

.cart-icon .dropdown-toggle::after {
  display: none;
}

/* CART DROPDOWN - Diseño según Figma */
.cart-dropdown {
  position: absolute;
  width: 512px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  box-shadow: 
    0px 4px 6px -4px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  right: 0;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.dropdown.open > .cart-dropdown {
  opacity: 1;
  visibility: visible;
}

/* TÍTULO DEL CARRO */
.cart-title {
  width: 100%;
  height: 63px;
  border-bottom: 1px solid #E4E7ED;
  padding: 16px 0 16px 24px;
  display: flex;
  align-items: center;
}

.cart-title-content {
  width: 463px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-title-icon {
  width: 20px;
  height: 20px;
}

.cart-title h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.03em;
  color: #0A0A0A;
  margin: 0;
}

/* LISTA DE PRODUCTOS */
.cart-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 24px;
}

.product-item {
  width: 463px;
  min-height: 128px;
  margin: 16px 0;
  display: flex;
  gap: 16px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background-color: #ECECF0;
  overflow: hidden;
  flex-shrink: 0;
}

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

.product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* HEADER DEL PRODUCTO */
.product-header {
  width: 367px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-name {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  margin: 0;
  height: 24px;
}

.delete-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.delete-btn:hover {
  background-color: #f5f5f5;
}

.delete-btn img {
  width: 16px;
  height: 16px;
}

/* CATEGORÍA DEL PRODUCTO */
.product-category {
  width: 367px;
  height: 24px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #717182;
  margin: 0;
  text-align: left;
}

/* FOOTER DEL PRODUCTO */
.product-footer {
  width: 367px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity-controls {
  width: 104px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.quantity-btn:hover {
  opacity: 1;
}

.quantity-btn img {
  width: 16px;
  height: 16px;
}

.quantity {
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  text-align: center;
}

.product-price {
  width: 72px;
  height: 24px;
  margin-left: 10px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  text-align: right;
}

/* =============================
   LOADING INDICATOR
   ============================= */
.products-loading-indicator {
  width: 100%;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 200px;
}

.loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #59626E;
  animation: loading-bounce 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0;
}

@keyframes loading-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-text {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

/* =============================
   CONTENIDO PRINCIPAL (INDEX)
   ============================= */
.main-content-section {
  width: 100%;
  display: flex;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.inner-content-container {
  /* 1536px de 1822px ~ 84.32% */
  width: min(84.32vw, 1536px);
  padding: 32px 16px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: visible; /* Permite que el contenido interno haga scroll */
}

.content-header-section {
  /* 84px alto en figma; adaptamos con padding para responsive */
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: 24px; /* Espacio = 24px */
  width: 100%;
}

.content-title {
  width: 100%;
  height: 24px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.filters-bar {
  height: 36px;
  width: 100%;
  min-width: 1076px; /* Ancho mínimo para mantener el diseño original */
  background: #ECECF0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px; /* Espaciado 3px */
  align-items: center;
  padding: 3px;
  border-radius: 6px;
  overflow-x: auto; /* Permite scroll horizontal */
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
  scrollbar-width: thin; /* Scrollbar delgada en Firefox */
  scrollbar-color: #C4C4C4 #ECECF0; /* Color del scrollbar en Firefox */
}

/* Estilos del scrollbar para Chrome/Safari */
.filters-bar::-webkit-scrollbar {
  height: 6px;
}

.filters-bar::-webkit-scrollbar-track {
  background: #ECECF0;
  border-radius: 6px;
}

.filters-bar::-webkit-scrollbar-thumb {
  background: #C4C4C4;
  border-radius: 6px;
}

.filters-bar::-webkit-scrollbar-thumb:hover {
  background: #A0A0A0;
}

.filter-btn {
  height: 30px;
  /* 214px en figma, pero usamos grid 1fr para responsive; ancho se reparte */
  border: 1px solid rgba(0,0,0,0.0);
  background: #ECECF0;
  color: #0A0A0A;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.filter-btn.active {
  background: #FFFFFF; /* botón seleccionado */
  border-color: rgba(0,0,0,0.0);
}

/* Media query para pantallas menores a 1185px */
@media (max-width: 1185px) {
  .content-header-section {
    overflow-x: auto; /* Permite scroll horizontal en el contenedor */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    width: 100%;
  }
  
  .filters-bar {
    width: max-content; /* El ancho se ajusta al contenido */
    min-width: 1076px; /* Mantiene el ancho mínimo para los 5 botones */
  }
  
  .inner-content-container {
    overflow-x: visible; /* Permite que el scroll funcione correctamente */
  }
}

/* Media query para pantallas muy pequeñas (móviles) */
@media (max-width: 768px) {
  .filters-bar {
    min-width: 100%; /* En móviles, permite que se adapte mejor */
  }
  
  .filter-btn {
    min-width: 120px; /* Ancho mínimo para cada botón */
    white-space: nowrap; /* Evita que el texto se corte */
  }
}

.product-count-text {
  margin: 0;
  padding-top: 10px; /* Espacio 10px */
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

.product-grid-placeholder {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px; /* espacio entre filas y columnas */
}

/* Media query para pantallas menores a 1185px: 2 productos por fila */
@media (max-width: 1185px) {
  .product-grid-placeholder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Media query para móviles: 1 producto por fila */
@media (max-width: 768px) {
  .product-grid-placeholder {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* =============================
   PRODUCT CARDS
   ============================= */
.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 358px;
  min-height: 897px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1px;
  gap: 40px;
  background: #FFFFFF;
  margin: 0 auto;
}

/* Div de la imagen del producto */
.product-card-image {
  width: 100%;
  height: 356px;
  max-width: 356px;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0 auto;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Div del cuerpo del producto */
.product-card-body {
  width: 100%;
  height: 329px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
  padding: 16px;
}

.product-card-brand {
  width: 100%;
  height: 24px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #717182;
  margin: 0;
}

.product-card-title {
  width: 100%;
  height: auto;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #0A0A0A;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-description {
  width: 100%;
  height: auto;
  margin: 0;
  overflow: visible;
}

.product-card-description p {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #0A0A0A;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-price {
  width: 100%;
  height: auto;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 25px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #030213;
  margin: 0;
}

.product-card-extra {
  width: 100%;
  height: 161px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 13px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}

/* Estilos para la lista de beneficios dentro de product-card-extra */
.product-card-extra ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-card-extra li {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card-extra li img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  object-fit: contain;
}

/* Div del footer del producto */
.product-card-footer {
  width: 100%;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  margin: 0 auto;
}

.product-card-btn-view,
.product-card-btn-contract {
  width: 100%;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.08em;
  transition: opacity 0.2s ease;
  padding: 8px;
  margin: 0 auto;
  background-color: #59626E;
  color: #FFFFFF;
}

.product-card-btn-contract:hover {
  opacity: 0.9;
}

.product-card-btn-contract span {
  display: inline-block;
}

.product-card-btn-view {
  border: 2px solid #4D4D4F;
  background: transparent;
  color: #4D4D4F;
  gap: 16px;
}

.product-card-btn-view:hover {
  opacity: 0.8;
}

.product-card-btn-view img {
  width: 16px;
  height: 16px;
  filter: none;
}

.product-card-btn-view span {
  display: inline-block;
}

/* RESUMEN DE CARRO DE COMPRAS - Diseño según Figma */
.cart-summary-container {
  width: 100%;
  height: 186px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 24px 24px;
}

.cart-summary-content {
  width: 464px;
  height: 97px;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* LÍNEAS DE RESUMEN (SUBTOTAL Y DESCUENTO) */
.summary-line {
  width: 464px;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

.summary-value {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

/* LÍNEA DE TOTAL */
.total-line {
  width: 464px;
  height: 33px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.total-value {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

/* BOTÓN DE PROCEDER AL PAGO */
.cart-btns {
  width: 464px;
  height: 44px;
}

.cart-btns > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #59626E;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  border-radius: 0;
  cursor: pointer;
}

.cart-btns > a:hover {
  background-color: #4a525c;
}

/* Estado deshabilitado del botón */
.cart-btns > a.disabled,
.cart-btns > a:disabled {
  background-color: #D0D0D0;
  color: #999999;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

.cart-btns > a.disabled:hover,
.cart-btns > a:disabled:hover {
  background-color: #D0D0D0;
}

/*=========================================================
	VISTA COMPLETA DEL PRODUCTO
===========================================================*/

/* Container principal - Vista completa del producto */
.product-full-view {
  position: fixed;
  top: 100px; /* Altura del header (100px) */
  left: 0;
  width: 100%;
  height: calc(100vh - 100px); /* Altura de la ventana menos el header */
  background-color: #FFFFFF;
  z-index: 999;
  display: none; /* Oculto por defecto */
  overflow-y: auto; /* Permite scroll completo */
  overflow-x: hidden;
}

.product-full-view.active {
  display: block;
}

/* Container secundario con botón volver */
.product-view-header {
  width: 100%;
  height: 69px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* #000000 10% */
  padding-top: 16px;
  padding-bottom: 1px;
  padding-left: 159px;
  padding-right: 0; /* Se ajustará con flex */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* El botón está al inicio después del padding-left */
}

/* Media queries para hacer el header responsive */
@media (max-width: 1185px) {
  .product-view-header {
    padding-left: 5%;
  }
}

@media (max-width: 768px) {
  .product-view-header {
    padding-left: 4%;
    padding-right: 4%;
    height: auto;
    min-height: 69px;
  }
}

/* Botón "Volver a planes" */
.btn-back-to-plans {
  width: 180.05px;
  min-width: 140px;
  height: 36px;
  border-radius: 8px;
  padding: 8px 12px;
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #0A0A0A;
}

/* Media queries para el botón volver */
@media (max-width: 768px) {
  .btn-back-to-plans {
    width: auto;
    min-width: 120px;
    padding: 8px 10px;
    gap: 8px;
    font-size: 13px;
  }
  
  .btn-back-to-plans span {
    white-space: nowrap;
  }
}

.btn-back-to-plans:hover {
  opacity: 0.7;
}

.btn-back-to-plans svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-back-to-plans span {
  display: inline-block;
  color: #0A0A0A;
}

/* Contenedor del contenido del producto */
.product-view-content {
  width: 100%;
  height: auto; /* Cambiado de 100% a auto para permitir crecimiento */
  min-height: 100%; /* Altura mínima del 100% */
  margin: 0 auto;
  padding: 36px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: visible; /* Cambiado a visible para que el scroll sea del contenedor padre */
  overflow-x: hidden;
}

/* Media queries para hacer el contenido responsive */
@media (max-width: 1185px) {
  .product-view-content {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .product-view-content {
    padding: 16px;
  }
}

/* Grid container para las dos columnas */
.product-view-grid {
  width: 100%;
  max-width: 100%;
  height: auto; /* Altura automática para permitir crecimiento */
  min-height: 100%; /* Altura mínima del 100% */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto; /* Filas automáticas para permitir crecimiento */
  gap: 32px;
  box-sizing: border-box;
  align-content: start; /* Alinea el contenido al inicio */
}

/* Media query para cambiar a una columna en pantallas pequeñas */
@media (max-width: 1185px) {
  .product-view-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    height: auto;
    min-height: auto;
  }
  
  /* En pantallas pequeñas, la imagen va arriba */
  .product-view-image-container {
    order: 1;
  }
  
  /* En pantallas pequeñas, la info va abajo */
  .product-view-info-container {
    order: 2;
    height: auto;
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .product-view-grid {
    gap: 16px;
  }
}

/* Columna 1: Imagen del producto */
.product-view-image-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.product-view-image-container img {
  width: 100%;
  height: 80%;
  object-fit: cover;
  display: block;
}

/* Media queries para la imagen */
@media (max-width: 1185px) {
  .product-view-image-container {
    height: auto;
  }
  
  .product-view-image-container img {
    height: auto;
    max-height: 500px;
  }
}

@media (max-width: 768px) {
  .product-view-image-container img {
    max-height: 400px;
  }
}

/* Columna 2: Información del producto */
.product-view-info-container {
  width: 736px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto; /* Altura automática para permitir crecimiento */
  min-height: auto; /* Permite que el contenedor crezca según el contenido */
}

/* Media queries para el contenedor de información */
@media (max-width: 1185px) {
  .product-view-info-container {
    width: 100%;
    max-width: 100%;
  }
}

/* Divs predefinidos dentro del container de información */
.product-view-info-container .product-view-header {
  width: 100%;
  height: auto;
  min-height: 127px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
}

/* Media queries para el header interno */
@media (max-width: 768px) {
  .product-view-info-container .product-view-header {
    gap: 12px;
  }
}

.product-view-header-content {
  gap: 16px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Badge de categoría del producto */
.product-view-category-badge {
  width: 81.83px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: #ECEEF2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  color: #030213;
  box-sizing: border-box;
}

/* Título del producto */
.product-view-title {
  height: auto;
  min-height: 43px;
  margin: 0;
  padding: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 36px;
  line-height: 120%; /* 43.2px */
  letter-spacing: -0.31px;
  color: #4D4D4F;
  margin-top: 16px;
  margin-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Media queries para el título */
@media (max-width: 768px) {
  .product-view-title {
    font-size: 28px;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 480px) {
  .product-view-title {
    font-size: 24px;
  }
}

/* Contenedor de precio */
.product-view-price-container {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  box-sizing: border-box;
}

/* Precio del producto */
.product-view-price {
  height: auto;
  min-height: 30px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 30px;
  letter-spacing: -0.45px;
  color: #4D4D4F;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Media queries para el precio */
@media (max-width: 768px) {
  .product-view-price {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .product-view-price {
    font-size: 28px;
  }
}

/* Texto "Precio final" */
.product-view-price-label {
  width: 81px;
  height: 24px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.product-view-info-container .product-view-description {
  width: 100%;
  height: auto; /* Cambiado de 384px fijo a auto para que se expanda */
  min-height: 384px; /* Altura mínima para mantener el diseño en desktop */
  margin-top: 24px;
  margin-bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1); /* #000000 10% */
  box-sizing: border-box;
  overflow-y: visible; /* Cambiado a visible para que el contenido se expanda */
  overflow-x: hidden;
  flex: 0 0 auto; /* No se expande, mantiene su tamaño */
}

/* Contenedor interno de la descripción (2px más pequeño) */
.product-view-description-inner {
  width: calc(100% - 2px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  height: auto; /* Altura automática para que se expanda */
  min-height: auto;
}

/* Media queries para la descripción */
@media (max-width: 1185px) {
  .product-view-info-container .product-view-description {
    height: auto; /* Altura automática según el contenido */
    min-height: 200px; /* Altura mínima para mantener el diseño */
    max-height: none; /* Sin límite máximo */
    overflow-y: visible; /* Permite que el contenido se expanda completamente */
    overflow-x: hidden;
  }
  
  .product-view-description-inner {
    height: auto;
    min-height: auto;
  }
  
  .product-view-description-content {
    height: auto; /* Altura automática según el contenido */
    min-height: auto;
    max-height: none; /* Sin límite máximo */
    overflow-y: visible; /* Permite que el contenido se expanda completamente */
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  .product-view-info-container .product-view-description {
    margin-top: 16px;
    margin-bottom: 24px; /* Espacio antes del botón */
    height: auto; /* Altura automática */
    min-height: 150px; /* Altura mínima más pequeña en móviles */
    max-height: none; /* Sin límite máximo */
    overflow-y: visible; /* Permite que el contenido se expanda completamente */
    overflow-x: hidden;
  }
  
  .product-view-description-inner {
    padding: 16px;
    height: auto;
    min-height: auto;
  }
  
  .product-view-description-content {
    height: auto; /* Altura automática */
    min-height: auto;
    max-height: none; /* Sin límite máximo */
    overflow-y: visible; /* Permite que el contenido se expanda completamente */
    overflow-x: hidden;
  }
  
  .product-view-info-container .product-view-actions {
    margin-top: 0; /* Asegura que esté justo después de la descripción */
    padding-top: 0; /* Sin padding superior adicional */
    padding-bottom: 20px; /* Espacio inferior */
  }
}

/* Título "Descripción del plan" */
.product-view-description-title {
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.45px;
  color: #0A0A0A;
  box-sizing: border-box;
}

/* Contenedor del contenido de la descripción */
.product-view-description-content {
  width: 100%;
  height: auto; /* Cambiado de 288px fijo a auto para que se expanda */
  min-height: auto;
  margin-top: 10px;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
  white-space: pre-line;
  overflow-y: visible; /* Permite que el contenido se expanda */
  overflow-x: hidden;
}

/* Estilos para el contenido HTML de la descripción */
.product-view-description-content p {
  margin: 0 0 16px 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

.product-view-description-content p:last-child {
  margin-bottom: 0;
}

.product-view-info-container .product-view-actions {
  width: 100%;
  flex: 0 0 auto; /* No se expande, mantiene su tamaño */
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0; /* Sin margen superior para estar justo después de la descripción */
  box-sizing: border-box;
  position: relative; /* Asegura que esté en el flujo normal del documento */
  z-index: 1; /* Asegura que esté por encima de otros elementos si es necesario */
}

/* Botón contratar plan en vista completa */
.product-view-contract-btn {
  width: 100%;
  height: 53px;
  min-height: 48px;
  padding: 10px 0;
  background-color: #59626E;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #FFFFFF;
  box-sizing: border-box;
}

/* Media queries para el botón contratar */
@media (max-width: 768px) {
  .product-view-contract-btn {
    height: 48px;
    padding: 12px 0;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .product-view-contract-btn {
    height: 44px;
    padding: 10px 0;
    font-size: 13px;
  }
}

.product-view-contract-btn:hover {
  opacity: 0.9;
}

.product-view-contract-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.product-view-contract-btn span {
  display: inline-block;
  color: #FFFFFF;
}

/* =============================
   CHECKOUT STEPS SECTION
   ============================= */
.checkout-steps-section {
  width: 100%;
  height: 145px;
  background-color: #FFFFFF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* #000000 10% */
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 195.67px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow-x: hidden; /* Evita scroll horizontal */
}

.checkout-steps-container {
  width: 1222px;
  max-width: 100%;
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  position: relative;
  padding: 0;
}

/* Calcular espacios simétricos:
   Ancho total: 1222px
   Cada paso: 407.33px
   Total de pasos: 3 * 407.33px = 1221.99px
   Espacio restante: 1222px - 1221.99px ≈ 0px
   
   Para espaciado simétrico, usamos justify-content: space-between
   que distribuirá el espacio disponible equitativamente entre los pasos
*/

/* Item de paso individual */
.checkout-step-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.checkout-step-item.step-1 {
  width: 407.33px;
  height: 96px;
  flex: 0 0 407.33px;
}

.checkout-step-item.step-2 {
  width: 407.33px;
  height: 72px;
  flex: 0 0 407.33px;
}

.checkout-step-item.step-3 {
  width: 407.33px;
  height: 72px;
  flex: 0 0 407.33px;
}

/* Contenido del paso */
.step-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* Container del número y texto */
.step-number-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.step-1 .step-number-container {
  width: 195.67px;
  height: 96px;
}

.step-2 .step-number-container,
.step-3 .step-number-container {
  width: 195.67px;
  height: 72px;
}

/* Número del paso */
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 100% para círculo perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}

/* Texto del número */
.step-number-text {
  display: inline-block;
}

/* Icono de check */
.step-check-icon {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1); /* Convierte el icono a blanco */
}

/* Paso completado - Color naranja con check */
.checkout-step-item.completed .step-number {
  background-color: #F15A22;
  border: 2px solid #F15A22;
  color: #FFFFFF;
}

.checkout-step-item.completed .step-number .step-number-text {
  display: none;
}

.checkout-step-item.completed .step-number .step-check-icon {
  display: block;
}

/* Paso 1 - Por defecto está activo */
.step-1 .step-number {
  border: 2px solid #030213;
  color: #030213;
  background-color: transparent;
}

.step-1 .step-number .step-check-icon {
  display: none;
}

/* Paso 1 activo (por si acaso) */
.step-1.active .step-number {
  border: 2px solid #030213;
  color: #030213;
  background-color: transparent;
}

.step-1.active .step-number .step-check-icon {
  display: none;
}

/* Paso 2 y 3 inactivos */
.step-2 .step-number,
.step-3 .step-number {
  border: 2px solid rgba(113, 113, 130, 0.3); /* #717182 30% */
  color: rgba(113, 113, 130, 0.3);
  background-color: transparent;
}

.step-2 .step-number .step-check-icon,
.step-3 .step-number .step-check-icon {
  display: none;
}

/* Paso 2 activo */
.step-2.active .step-number {
  border: 2px solid #030213;
  color: #030213;
  background-color: transparent;
}

.step-2.active .step-number .step-check-icon {
  display: none;
}

/* Paso 3 activo */
.step-3.active .step-number {
  border: 2px solid #030213;
  color: #030213;
  background-color: transparent;
}

.step-3.active .step-number .step-check-icon {
  display: none;
}

/* Label del paso */
.step-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Paso 1 - Por defecto está activo */
.step-1 .step-label {
  height: 48px;
  width: auto;
  min-width: 103px;
  color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-2 .step-label,
.step-3 .step-label {
  color: rgba(113, 113, 130, 0.3); /* #717182 30% */
}

/* Paso 2 y 3 activos */
.step-2.active .step-label,
.step-3.active .step-label {
  color: #0A0A0A;
}

/* Pasos completados - El texto también cambia */
.checkout-step-item.completed .step-label {
  color: #0A0A0A;
}

/* Línea horizontal entre pasos */
.step-line {
  width: 195.67px;
  height: 2px;
  flex-shrink: 0;
}

.step-1 .step-line {
  background-color: #D9D9D9;
}

.step-1.completed .step-line {
  background-color: #F15A22;
}

.step-2 .step-line {
  background-color: rgba(113, 113, 130, 0.3); /* #717182 30% */
}

.step-2.active .step-line {
  background-color: #D9D9D9;
}

.step-2.completed .step-line {
  background-color: #F15A22;
}

/* Paso 3 no tiene línea */
.step-3 .step-line {
  display: none;
}

/* Media queries para hacer checkout-steps responsive */
/* Cuando no caben los 3 pasos en pantalla (ancho total ~1222px + padding ~195px cada lado = ~1612px) */
@media (max-width: 1400px) {
  .checkout-steps-section {
    padding-left: 5%;
    padding-right: 5%;
    height: auto;
    min-height: 145px;
    overflow-x: hidden; /* Evita scroll horizontal */
  }
  
  .checkout-steps-container {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: hidden; /* Evita scroll horizontal */
  }
  
  /* En step 1 y 2: ocultar paso 3 y su línea del paso 2 */
  body.checkout-step-1 .checkout-step-item.step-3,
  body.checkout-step-2 .checkout-step-item.step-3 {
    display: none !important;
  }
  
  body.checkout-step-1 .checkout-step-item.step-2 .step-line,
  body.checkout-step-2 .checkout-step-item.step-2 .step-line {
    display: none !important;
  }
  
  /* En step 3: ocultar toda la sección cuando no caben los 3 pasos */
  body.checkout-step-3 .checkout-steps-section {
    display: none !important;
  }
  
  /* Ajustar tamaños de los pasos para que quepan 2 */
  .checkout-step-item.step-1,
  .checkout-step-item.step-2 {
    width: auto;
    flex: 0 0 auto;
    min-width: 150px;
  }
  
  .step-1 .step-number-container,
  .step-2 .step-number-container {
    width: auto;
    min-width: 120px;
  }
  
  .step-line {
    width: auto;
    flex: 1 1 auto;
    min-width: 50px;
    max-width: 100px;
  }
}

@media (max-width: 768px) {
  .checkout-steps-section {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  .checkout-steps-container {
    gap: 12px;
  }
  
  .checkout-step-item.step-1,
  .checkout-step-item.step-2 {
    min-width: 120px;
  }
  
  .step-label {
    font-size: 14px;
  }
  
  .step-number {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* =============================
   CHECKOUT STEP 1 CONTENT
   ============================= */
.checkout-step1-container {
  width: 1202px;
  max-width: 100%;
  height: auto;
  min-height: 1252px;
  margin: 18px auto 0;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

/* Container del título */
.checkout-step1-title-container {
  width: 1170px;
  max-width: 100%;
  height: auto;
  min-height: 60px;
  margin: 0 auto;
  box-sizing: border-box;
}

.checkout-step1-title {
  margin: 0;
  padding: 0;
  height: 36px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  color: #0A0A0A;
  box-sizing: border-box;
}

.checkout-step1-subtitle {
  margin: 0;
  padding: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #59626E;
  box-sizing: border-box;
  height: 24px;
}

/* Container del formulario y resumen */
.checkout-step1-form-container {
  width: 1170px;
  max-width: 100%;
  height: auto;
  min-height: 750px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* #000000 10% */
  background-color: #FFFFFF;
  padding: 24px 24px 24px 24px;
  box-sizing: border-box;
  margin: 0 auto;
}

.checkout-step1-form-wrapper {
  width: 100%;
  max-width: 1144px;
  height: auto;
  min-height: 700px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 24px;
}

/* Sección del formulario (izquierda) */
.checkout-step1-form-section {
  width: 368px;
  max-width: 100%;
  height: auto;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
  flex: 1 1 auto;
}

/* Primera parte: Formulario y nombre del producto */
.checkout-step1-form-part1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

/* Formulario de datos */
.checkout-step1-form {
  width: 100%;
  max-width: 368px;
  height: auto;
  min-height: 469px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Inputs del formulario */
.checkout-input {
  width: 100%;
  height: 44px;
  border: 2px solid #59626E;
  padding: 10px 16px;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 3%;
  color: #59626E;
  background-color: #FFFFFF;
  margin: 0;
  margin-bottom: 8px;
}

.checkout-input::placeholder {
  color: #59626E;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 3%;
  vertical-align: middle;
}

.checkout-input:focus {
  outline: none;
  border-color: #F15A22;
}

/* Input de fecha específico */
.checkout-input[type="date"] {
  color: #59626E;
}

.checkout-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Campo de fecha de nacimiento (texto con formato) */
.checkout-date-input-field {
  /* Asegurar que el placeholder se vea */
  color: #59626E;
}

.checkout-date-input-field::placeholder {
  color: #59626E;
  opacity: 1;
}

/* Row de inputs (dos inputs en la misma línea) */
.checkout-input-row {
  width: 100%;
  display: flex;
  gap: 11px;
  box-sizing: border-box;
}

.checkout-input-half {
  flex: 1;
}

.checkout-input-full {
  width: 100%;
}

/* Selects */
.checkout-input select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2359626E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.checkout-input select:focus {
  outline: none;
  border-color: #F15A22;
}

/* Nombre del producto */
.checkout-step1-product-name {
  width: 368px;
  height: 29px;
  margin-top: 8px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #59626E;
  box-sizing: border-box;
}

/* Sección de código promocional */
.checkout-step1-promo-section {
  width: 368px;
  height: 70px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  margin-top: 6px;
}

.checkout-step1-promo-label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #4D4D4D;
  margin: 0;
  padding: 0;
}

.checkout-step1-promo-input-row {
  width: 100%;
  height: 41px;
  display: flex;
  gap: 6px;
  box-sizing: border-box;
}

.checkout-promo-input {
  width: 193px;
  height: 40px;
  padding: 10px 16px;
  margin: 0;
  flex: 0 0 auto;
}

.checkout-promo-input:disabled {
  background-color: #F5F5F5;
  cursor: not-allowed;
  opacity: 0.6;
}

.checkout-promo-input.checkout-input-disabled {
  background-color: #F5F5F5;
  cursor: not-allowed;
  opacity: 0.6;
}

.checkout-promo-btn {
  width: 169px;
  height: 41px;
  padding: 9px 50px;
  margin: 0;
  background-color: #59626E;
  border: none;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.checkout-promo-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.checkout-promo-btn:active:not(:disabled) {
  opacity: 0.8;
}

.checkout-promo-btn:disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Tooltip para código promocional */
.checkout-step1-promo-tooltip {
  position: relative;
  width: 100%;
  margin-top: 4px;
}

.checkout-step1-promo-tooltip .tooltip-text {
  display: inline-block;
  background-color: #4D4D4D;
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  z-index: 1000;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.checkout-step1-promo-tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 20px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #4D4D4D transparent;
}

/* Feedback inline para código promocional */
.checkout-step1-promo-feedback {
  margin-bottom: 6px;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  transition: all 0.3s ease;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.checkout-step1-promo-feedback .promo-feedback-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-step1-promo-feedback.promo-feedback-success {
  background-color: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}

.checkout-step1-promo-feedback.promo-feedback-error {
  background-color: #FFEBEE;
  color: #C62828;
  border: 1px solid #EF9A9A;
}

.checkout-step1-promo-feedback.promo-feedback-loading {
  background-color: #F5F5F5;
  color: #4D4D4D;
  border: 1px solid #E0E0E0;
}

.checkout-step1-promo-feedback .promo-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.checkout-step1-promo-feedback .promo-loading::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid #4D4D4D;
  border-top-color: transparent;
  border-radius: 50%;
  animation: promo-spin 0.6s linear infinite;
}

@keyframes promo-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sección de fecha de inicio */
.checkout-step1-date-section {
  width: 368px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  margin-top: 15px;
}

.checkout-step1-date-label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #4D4D4D;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.checkout-date-input {
  width: 226px;
  height: 40px;
  padding: 10px 16px;
  margin: 0;
  flex: 0 0 auto;
}

.checkout-date-input::placeholder {
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 3%;
}

/* Sección del resumen (derecha) */
.checkout-step1-summary-section {
  width: 600px;
  max-width: 100%;
  height: auto;
  min-height: 589px;
  border-radius: 15px;
  padding: 25px 80px;
  display: flex;
  flex-direction: column;
  gap: 203px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  flex: 1 1 auto;
}

.checkout-step1-summary-content {
  width: 440px;
  max-width: 100%;
  height: auto;
  min-height: 539px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  box-sizing: border-box;
}

/* Media queries para hacer checkout-step1 responsive */
@media (max-width: 1185px) {
  .checkout-step1-container {
    width: 100%;
    padding: 24px 16px;
  }
  
  .checkout-step1-title-container {
    width: 100%;
  }
  
  .checkout-step1-form-container {
    width: 100%;
    padding: 20px;
  }
  
  .checkout-step1-form-wrapper {
    flex-direction: row;
    gap: 20px;
  }
  
  .checkout-step1-form-section {
    flex: 1 1 50%;
    min-width: 0;
  }
  
  .checkout-step1-summary-section {
    flex: 1 1 50%;
    min-width: 0;
    padding: 20px 40px;
  }
}

/* En móviles: apilar todo en columna */
@media (max-width: 768px) {
  .checkout-step1-container {
    padding: 16px;
    gap: 24px;
  }
  
  .checkout-step1-title-container {
    width: 100%;
    margin: 0;
  }
  
  .checkout-step1-title {
    font-size: 20px;
  }
  
  .checkout-step1-subtitle {
    font-size: 14px;
  }
  
  .checkout-step1-form-container {
    width: 100%;
    padding: 16px;
    border: none;
    background-color: transparent;
  }
  
  .checkout-step1-form-wrapper {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  
  /* Formulario ocupa todo el ancho */
  .checkout-step1-form-section {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
  
  /* Resumen ocupa todo el ancho y va después */
  .checkout-step1-summary-section {
    width: 100%;
    max-width: 100%;
    order: 2;
    padding: 20px;
    gap: 30px;
  }
  
  .checkout-step1-summary-content {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    gap: 30px;
  }
}

/* Título del resumen */
.checkout-step1-summary-title {
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  text-align: center;
  color: #0A0A0A;
  box-sizing: border-box;
}

/* Sección interna del resumen */
.checkout-step1-summary-section-inner {
  width: 100%;
  height: 272px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Container de totales */
.checkout-step1-totals-container {
  width: 100%;
  height: 227px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
}

/* Headers PRODUCTO y TOTAL */
.checkout-step1-totals-headers {
  width: 100%;
  height: 29px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.checkout-step1-totals-header-left,
.checkout-step1-totals-header-right {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #4D4D4D;
}

.checkout-step1-totals-header-left {
  text-align: left;
}

.checkout-step1-totals-header-right {
  text-align: right;
}

/* Resumen de totales */
.checkout-step1-totals-summary {
  width: 100%;
  height: 168px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Fila de totales */
.checkout-step1-totals-row {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.checkout-step1-totals-row-left {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  vertical-align: middle;
  color: #4D4D4D;
  text-align: left;
}

.checkout-step1-totals-row-price {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #4D4D4D;
  text-align: right;
}

/* Fila del total final */
.checkout-step1-totals-row-total {
  height: 58px;
}

.checkout-step1-totals-row-total .checkout-step1-totals-row-left {
  font-weight: 300;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #4D4D4D;
}

.checkout-step1-totals-row-total-price {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #59626E;
  text-align: right;
}

/* Términos y condiciones */
.checkout-step1-terms-container {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

.checkout-step1-checkbox {
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%; /* Hacer el checkbox redondo */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #59626E;
  background-color: #FFFFFF;
  position: relative;
  box-sizing: border-box;
}

.checkout-step1-checkbox:checked {
  background-color: #59626E;
  border-color: #59626E;
}

.checkout-step1-checkbox:checked::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #FFFFFF;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkout-step1-terms-label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #4D4D4D;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Sección de botones */
.checkout-step1-buttons-section {
  width: 100%;
  height: 132px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.checkout-step1-btn-continue,
.checkout-step1-btn-back {
  width: 100%;
  height: 59px;
  padding: 15px 50px;
  border: none;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  margin: 0;
}

.checkout-step1-btn-continue {
  background-color: #59626E;
  color: #FFFFFF;
}

.checkout-step1-btn-continue:hover {
  opacity: 0.9;
}

.checkout-step1-btn-continue:active {
  opacity: 0.8;
}

.checkout-step1-btn-back {
  background-color: #FFFFFF;
  border: 2px solid #59626E;
  color: #59626E;
}

.checkout-step1-btn-back:hover {
  opacity: 0.9;
}

.checkout-step1-btn-back:active {
  opacity: 0.8;
}

/* =============================
   CHECKOUT STEP 2 CONTENT
   ============================= */
.checkout-step2-container {
  width: 1201px;
  max-width: 100%;
  height: auto;
  min-height: 584px;
  margin: 18px auto 0;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
  margin-bottom: 300px;
}

.checkout-step2-inner {
  width: 1169px;
  max-width: 100%;
  height: auto;
  min-height: 552px;
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

/* Container del título */
.checkout-step2-title-container {
  width: 100%;
  max-width: 1137px;
  height: auto;
  min-height: 92px;
  margin: 0 auto;
  padding: 9px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.checkout-step2-title {
  margin: 0;
  padding: 0;
  width: 100%;
  margin-bottom: 10px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 8%;
  color: #0A0A0A;
  box-sizing: border-box;
}

.checkout-step2-subtitle {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0px;
  color: #717182;
  box-sizing: border-box;
}

/* Container del contenido principal */
.checkout-step2-content-container {
  width: 100%;
  max-width: 1137px;
  height: auto;
  min-height: 421px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

/* Container del formulario de pago (izquierda) */
.checkout-step2-form-container {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  order: 1;
}

/* Card del formulario de pago */
.checkout-step2-form-card {
  width: 565px;
  height: auto;
  min-height: 520px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #FFFFFF;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.checkout-step2-form-card-content {
  width: 563px;
  max-width: 100%;
  height: auto;
  min-height: 498px;
  margin: 0 auto;
  padding: 24px 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

/* Título "Pago seguro y encriptado" */
.checkout-step2-secure-title {
  width: 100%;
  max-width: 515px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.checkout-step2-lock-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.checkout-step2-secure-text {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #717182;
  box-sizing: border-box;
}

/* Container del formulario y botones */
.checkout-step2-form-wrapper {
  width: 100%;
  max-width: 515px;
  height: auto;
  min-height: 426px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

/* Container de inputs */
.checkout-step2-input-container {
  width: 100%;
  height: auto;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  margin-top: 24px;
}

.checkout-step2-input-container.checkout-step2-double-input {
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
}

.checkout-step2-input-container.checkout-step2-cuotas-container {
  min-height: 72px;
}

.checkout-step2-input-half {
  width: 50%;
  height: auto;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.checkout-step2-cvv-container {
  height: 58px;
}

/* Labels */
.checkout-step2-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 8%;
  color: #0A0A0A;
  box-sizing: border-box;
}

/* Wrapper de inputs */
.checkout-step2-input-wrapper {
  width: 100%;
  height: 44px;
  position: relative;
  box-sizing: border-box;
}

.checkout-step2-input-wrapper.checkout-step2-input-with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Inputs */
.checkout-step2-input {
  width: 100%;
  height: 44px;
  border: 2px solid #59626E;
  padding: 4px 12px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  color: #0A0A0A;
  background-color: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  margin: 0;
}

.checkout-step2-input:focus {
  border-color: #59626E;
  outline: none;
}

.checkout-step2-input::placeholder {
  color: #717182;
}

.checkout-step2-input-readonly {
  background-color: #F5F5F5 !important;
  border-color: #D0D0D0 !important;
  color: #6B6B6B !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}

.checkout-step2-input-readonly:focus {
  border-color: #D0D0D0 !important;
  outline: none;
  box-shadow: none;
}

.checkout-step2-input-wrapper.checkout-step2-input-with-icon .checkout-step2-input {
  padding-right: 40px;
}

/* Icono de tarjeta */
.checkout-step2-card-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  flex-shrink: 0;
}

/* Select de cuotas */
.checkout-step2-select {
  width: 100%;
  height: 43px;
  border: 2px solid #59626E;
  padding: 10px 16px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  color: #0A0A0A;
  background-color: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2359626E' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.checkout-step2-select:focus {
  border-color: #59626E;
}

/* Container de botones */
.checkout-step2-buttons-container {
  width: 100%;
  height: auto;
  min-height: 60px;
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-right: -0.02px;
  box-sizing: border-box;
}

.checkout-step2-btn-back,
.checkout-step2-btn-complete {
  flex: 1;
  max-width: 50%;
  height: 44px;
  padding: 8px 16px;
  border: 2px solid #59626E;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 8%;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

.checkout-step2-btn-back {
  background-color: #FFFFFF;
  color: #59626E;
}

.checkout-step2-btn-back:hover:not(:disabled) {
  opacity: 0.9;
}

.checkout-step2-btn-back:active:not(:disabled) {
  opacity: 0.8;
}

.checkout-step2-btn-back:disabled {
  background-color: #F5F5F5;
  color: #9E9E9E;
  border-color: #D0D0D0;
  cursor: not-allowed;
  opacity: 0.6;
}

.checkout-step2-btn-complete {
  background-color: #59626E;
  color: #FFFFFF;
  border-color: #59626E;
}

.checkout-step2-btn-complete:hover:not(:disabled) {
  opacity: 0.9;
}

.checkout-step2-btn-complete:active:not(:disabled) {
  opacity: 0.8;
}

.checkout-step2-btn-complete:disabled {
  background-color: #9E9E9E;
  color: #FFFFFF;
  border-color: #9E9E9E;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Container del resumen del pedido (derecha) */
.checkout-step2-summary-container {
  width: 429px;
  max-width: 100%;
  height: auto;
  min-height: 394px;
  padding: 0 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 85px;
  order: 2;
}

.checkout-step2-card {
  width: 419px;
  max-width: 100%;
  height: auto;
  min-height: 394px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.checkout-step2-card-container {
  width: 408px;
  max-width: 100%;
  height: auto;
  min-height: 392px;
  margin: 0 auto;
  padding: 12px 24px;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
  gap: 43px;
  box-sizing: border-box;
}

.checkout-step2-summary-title {
  margin: 0;
  padding: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 27px;
  letter-spacing: 8%;
  color: #0A0A0A;
  box-sizing: border-box;
}

.checkout-step2-product-row {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.checkout-step2-product-name {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: -0.31px;
  color: #717182;
  box-sizing: border-box;
}

.checkout-step2-product-total {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  box-sizing: border-box;
}

.checkout-step2-totals-detail {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

.checkout-step2-detail-row {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  box-sizing: border-box;
}

.checkout-step2-detail-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
  box-sizing: border-box;
}

.checkout-step2-detail-value {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  box-sizing: border-box;
}

.checkout-step2-total-row {
  width: 100%;
  max-width: 100%;
  height: 33px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 9px;
  margin-top: 9px;
  box-sizing: border-box;
}

.checkout-step2-total-inner {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.checkout-step2-total-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  box-sizing: border-box;
}

.checkout-step2-total-value {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
  box-sizing: border-box;
}

/* Media queries para hacer checkout-step2 responsive */
/* En pantallas medianas: cambiar a columna si no hay espacio suficiente */
@media (max-width: 1100px) {
  .checkout-step2-container {
    width: 100%;
    padding: 24px 16px;
  }
  
  .checkout-step2-inner {
    width: 100%;
    padding: 24px 16px;
  }
  
  .checkout-step2-content-container {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }

  /* Formulario arriba */
  .checkout-step2-form-container {
    width: 100%;
    max-width: 100%;
    order: 1;
  }

  .checkout-step2-form-card {
    width: 100%;
    max-width: 100%;
  }
  
  .checkout-step2-form-card-content {
    width: 100%;
    max-width: 100%;
    padding: 20px;
  }

  .checkout-step2-form-wrapper {
    width: 100%;
    max-width: 100%;
  }

  /* Resumen abajo */
  .checkout-step2-summary-container {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    order: 2;
  }
  
  .checkout-step2-card {
    width: 100%;
    max-width: 100%;
  }
  
  .checkout-step2-card-container {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* En pantallas grandes pero menores a 1185px: mantener horizontal si hay espacio */
@media (min-width: 1101px) and (max-width: 1185px) {
  .checkout-step2-container {
    width: 100%;
    padding: 24px 16px;
  }
  
  .checkout-step2-inner {
    width: 100%;
    padding: 24px 16px;
  }
  
  .checkout-step2-content-container {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
  }

  /* Formulario: usar flex para que se ajuste */
  .checkout-step2-form-container {
    flex: 1;
    min-width: 0;
  }

  .checkout-step2-form-card {
    width: 100%;
    max-width: 100%;
  }
  
  .checkout-step2-form-card-content {
    width: 100%;
    max-width: 100%;
    padding: 20px;
  }

  .checkout-step2-form-wrapper {
    width: 100%;
    max-width: 100%;
  }

  /* Resumen: mantener ancho fijo pero flexible */
  .checkout-step2-summary-container {
    width: 429px;
    max-width: 429px;
    flex-shrink: 0;
    margin-top: 0;
  }
  
  .checkout-step2-card {
    width: 100%;
    max-width: 100%;
  }
  
  .checkout-step2-card-container {
    width: 100%;
    max-width: 100%;
  }
}

/* En móviles: apilar formulario y resumen en columna */
@media (max-width: 768px) {
  .checkout-step2-container {
    padding: 16px;
    margin-bottom: 50px;
  }

  .checkout-step2-inner {
    padding: 16px;
  }
  
  .checkout-step2-title-container {
    padding: 0;
  }
  
  .checkout-step2-title {
    font-size: 28px;
  }
  
  .checkout-step2-subtitle {
    font-size: 14px;
  }
  
  .checkout-step2-content-container {
    flex-direction: column; /* Cambiar a columna en móviles */
    gap: 24px;
    align-items: stretch;
  }

  /* Formulario arriba */
  .checkout-step2-form-container {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
  
  .checkout-step2-form-card {
    width: 100%;
    margin-bottom: 0;
  }
  
  .checkout-step2-form-card-content {
    padding: 16px;
    gap: 20px;
  }
  
  .checkout-step2-form-wrapper {
    width: 100%;
    max-width: 100%;
  }

  /* Resumen abajo */
  .checkout-step2-summary-container {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
    order: 2;
  }
  
  .checkout-step2-card {
    width: 100%;
  }
  
  .checkout-step2-card-container {
    width: 100%;
    padding: 20px;
    padding-top: 30px;
    gap: 30px;
  }

  /* Ajustar inputs dobles en móviles */
  .checkout-step2-input-container.checkout-step2-double-input {
    flex-direction: column;
    gap: 16px;
  }
  
  .checkout-step2-input-half {
    width: 100%;
    max-width: 100%;
  }
  
  .checkout-step2-input-wrapper.checkout-step2-input-small {
    width: 100%;
  }
  
  .checkout-step2-cvv-container {
    width: 100%;
  }
  
  .checkout-step2-cvv-container .checkout-step2-input-wrapper {
    width: 100%;
  }

  /* Ajustar botones en móviles */
  .checkout-step2-buttons-container {
    flex-direction: column;
    gap: 12px;
  }
  
  .checkout-step2-btn-back,
  .checkout-step2-btn-complete {
    max-width: 100%;
    width: 100%;
  }
}

/*=========================================================
	03 -> Navigation
===========================================================*/

#navigation {
  background: #FFF;
  border-bottom: 2px solid #E4E7ED;
  border-top: 3px solid var(--primary);
}

/*----------------------------*\
	Main nav
\*----------------------------*/

.header-ctn li.nav-toggle {
  display: none;
}

/*----------------------------*\
	product
\*----------------------------*/

.product {
  position: relative;
  margin: 15px 0px;
  -webkit-box-shadow: 0px 0px 0px 0px #E4E7ED, 0px 0px 0px 1px #E4E7ED;
  box-shadow: 0px 0px 0px 0px #E4E7ED, 0px 0px 0px 1px #E4E7ED;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.product:hover {
  -webkit-box-shadow: 0px 0px 6px 0px #E4E7ED, 0px 0px 0px 2px var(--primary);
  box-shadow: 0px 0px 6px 0px #E4E7ED, 0px 0px 0px 2px var(--primary);
}

.product{
  position: relative;
  padding: 15px;
  background-color: #FFF;
  text-align: center;
  z-index: 20;
}

.product .product-category {
  text-transform: uppercase;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  color: #666666;
  font-size: 12px;
}

.product .product-name {
  text-transform: uppercase;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #4D4D4D;
}

.product .product-name>a {
  font-weight: 700;
}

.product .product-name>a:hover, .product .product-name>a:focus {
  color: var(--primary);
}

.product .product-price {
  color: var(--primary);
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 30px;
}

.product .product-price {
  font-size: 70%;
  font-weight: 400;
  color: #8D99AE;
}

.product {
  position: relative;
  border: 2px solid transparent;
  height: 40px;
  padding: 0 30px;
  background-color: var(--primary);
  color: #FFF;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 40px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.product>i {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  line-height: 38px;
  color: var(--primary);
  opacity: 0;
  visibility: hidden;
}

.product:hover {
  background-color: #FFF;
  color: var(--primary);
  border-color: var(--primary);
  padding: 0px 30px 0px 50px;
}

.product:hover>i {
  opacity: 1;
  visibility: visible;
}

/* =============================
   CHECKOUT STEP 3 CONTENT
   ============================= */
.checkout-step3-container {
  width: 896px;
  max-width: 100%;
  height: auto;
  min-height: 903px;
  margin: 32px auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

/* Sección 1: Estado del pago */
.checkout-step3-status-section {
  width: 736px;
  max-width: 100%;
  height: auto;
  min-height: 230px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
  box-sizing: border-box;
}

.checkout-step3-status-inner {
  width: 734px;
  max-width: 100%;
  height: auto;
  min-height: 228px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  box-sizing: border-box;
}

.checkout-step3-icon-container {
  width: 72px;
  height: 72px;
  border-radius: 33554400px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-step3-icon-container.success {
  background-color: #DCFCE7;
}

.checkout-step3-icon-container.error {
  background-color: #FCDCDD;
}

.checkout-step3-icon {
  width: 48px;
  height: 48px;
}

.checkout-step3-status-title {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  text-align: center;
  color: #0A0A0A;
}

.checkout-step3-status-description {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  text-align: center;
  color: #717182;
}

/* Sección 2: Datos del plan e Información de contacto */
.checkout-step3-info-grid {
  width: 736px;
  max-width: 100%;
  height: auto;
  min-height: 189px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.checkout-step3-info-box {
  width: 100%;
  height: auto;
  min-height: 220px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.checkout-step3-info-box.plan-data {
  padding: 24px 0 0 24px;
}

.checkout-step3-info-box.contact-data {
  padding: 24px;
}

.checkout-step3-info-content {
  display: flex;
  gap: 12px;
}

.checkout-step3-info-content.plan {
  width: 306px;
  max-width: 100%;
  height: auto;
  min-height: 131px;
}

.checkout-step3-info-content.contact {
  width: 306px;
  max-width: 100%;
  height: auto;
}

.checkout-step3-info-icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-step3-info-icon {
  width: 20px;
  height: 20px;
}

.checkout-step3-info-text {
  display: flex;
  flex-direction: column;
}

.checkout-step3-info-text.plan {
  width: 258px;
  max-width: 100%;
  height: auto;
  gap: 2px;
}

.checkout-step3-info-text.contact {
  width: 258px;
  max-width: 100%;
  height: auto;
  gap: 5px;
}

.checkout-step3-info-title {
  margin: 0 0 8px 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.44px;
  color: #59626E;
}

.checkout-step3-info-paragraph {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

/* Sección 3: Resumen del pedido */
.checkout-step3-summary-section {
  width: 736px;
  max-width: 100%;
  height: auto;
  min-height: 297px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
  margin-top: 32px;
  box-sizing: border-box;
}

.checkout-step3-summary-inner {
  width: 734px;
  max-width: 100%;
  height: auto;
  min-height: 295px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.checkout-step3-summary-header {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-step3-summary-icon {
  width: 24px;
  height: 24px;
}

.checkout-step3-summary-title {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.checkout-step3-summary-content {
  width: 100%;
  height: auto;
  min-height: 195px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-step3-summary-product-row {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 16px;
}

.checkout-step3-summary-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-step3-summary-product-name {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.checkout-step3-summary-product-quantity {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

.checkout-step3-summary-product-total {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.checkout-step3-summary-totals {
  width: 100%;
  height: auto;
  min-height: 114px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 17px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-step3-summary-totals-row {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkout-step3-summary-totals-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #717182;
}

.checkout-step3-summary-totals-value {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.checkout-step3-summary-total-row {
  width: 100%;
  height: 33px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkout-step3-summary-total-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

.checkout-step3-summary-total-value {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: #0A0A0A;
}

/* Sección 4: Botón Volver a la tienda */
.checkout-step3-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.checkout-step3-btn-back-to-shop {
  width: 237px;
  height: 59px;
  padding: 15px 50px;
  background-color: #59626E;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 8%;
  text-align: center;
  color: #FFFFFF;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.checkout-step3-btn-back-to-shop:hover {
  opacity: 0.9;
  color: #FFFFFF !important;
}

.checkout-step3-btn-back-to-shop:active {
  opacity: 0.8;
}

/* Media queries para hacer checkout-step3 responsive */
@media (max-width: 1185px) {
  .checkout-step3-container {
    width: 100%;
    padding: 24px 16px;
  }

  .checkout-step3-status-section {
    width: 100%;
    max-width: 100%;
  }

  .checkout-step3-status-inner {
    width: 100%;
    max-width: 100%;
    padding: 20px;
  }

  .checkout-step3-info-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .checkout-step3-info-content.plan,
  .checkout-step3-info-content.contact {
    width: 100%;
    max-width: 100%;
  }

  .checkout-step3-info-text.plan,
  .checkout-step3-info-text.contact {
    width: 100%;
    max-width: 100%;
  }

  .checkout-step3-summary-section {
    width: 100%;
    max-width: 100%;
  }

  .checkout-step3-summary-inner {
    width: 100%;
    max-width: 100%;
  }
}

/* En pantallas medianas: cambiar grid a 1 columna */
@media (max-width: 768px) {
  .checkout-step3-container {
    padding: 16px;
    margin: 16px auto;
  }

  .checkout-step3-status-section {
    margin-bottom: 24px;
  }

  .checkout-step3-status-inner {
    padding: 20px 16px;
    gap: 12px;
  }

  .checkout-step3-icon-container {
    width: 60px;
    height: 60px;
  }

  .checkout-step3-icon {
    width: 40px;
    height: 40px;
  }

  .checkout-step3-status-title {
    font-size: 14px;
  }

  .checkout-step3-status-description {
    font-size: 14px;
  }

  /* Cambiar grid a 1 columna */
  .checkout-step3-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }

  .checkout-step3-info-box {
    width: 100%;
  }

  .checkout-step3-info-box.plan-data {
    padding: 20px;
  }

  .checkout-step3-info-box.contact-data {
    padding: 20px;
  }

  .checkout-step3-info-content.plan,
  .checkout-step3-info-content.contact {
    width: 100%;
  }

  .checkout-step3-info-text.plan,
  .checkout-step3-info-text.contact {
    width: 100%;
  }

  .checkout-step3-info-title {
    font-size: 16px;
  }

  .checkout-step3-info-paragraph {
    font-size: 14px;
  }

  .checkout-step3-summary-section {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .checkout-step3-summary-inner {
    padding: 20px;
  }

  .checkout-step3-summary-header {
    height: auto;
    min-height: 36px;
  }

  .checkout-step3-summary-content {
    gap: 12px;
  }

  .checkout-step3-summary-product-row {
    height: auto;
    min-height: 65px;
    flex-wrap: wrap;
  }

  .checkout-step3-summary-product-name,
  .checkout-step3-summary-product-quantity {
    font-size: 14px;
  }

  .checkout-step3-summary-product-total {
    font-size: 14px;
  }

  .checkout-step3-summary-totals-label,
  .checkout-step3-summary-totals-value {
    font-size: 14px;
  }

  .checkout-step3-summary-total-label,
  .checkout-step3-summary-total-value {
    font-size: 20px;
  }

  .checkout-step3-button-container {
    margin-bottom: 30px;
  }

  .checkout-step3-btn-back-to-shop {
    width: 100%;
    max-width: 100%;
    padding: 15px 30px;
  }
}