/* footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

@media (max-width: 768px) {
  footer {
  position: relative;
  bottom: 0;
  width: 100%;
  }
} */

.card-img-top{
  height: 250px;
  width: 100%;
  padding: 20px;;
}

.card-producto{
  border-radius: 15px;
}

.card-producto:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btnCard{
  height: 50px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.ribbon {
  position: absolute;
  top: 12px;
  right: -35px;
  background-color: #d4af37; /* Color dorado */
  color: #000; /* Contraste de texto */
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 40px;
  transform: rotate(45deg);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 10;
}

.navbar-glass {
  background-color: rgba(24, 24, 27, 0.3);
  backdrop-filter: blur(12px); /* Efecto "glass" */
  -webkit-backdrop-filter: blur(10px); /* Soporte Safari */
  border-width: 1px;
  border-color: rgba(39, 39, 42, 0.5);
  z-index: 1050; /* Asegura que quede sobre todo */
}

.search-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box2 {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box .input-group-text {
  background: transparent;
  border: none;
}

.search-input {
  background: transparent;
  border: none;
}
.search-input2 {
  background: transparent;
  border: none;
  color:white !important;
}

.search-input2:focus {
  background: transparent;
  border: none;
  color:white !important;
}
.search-input2::placeholder {
  color:white !important;
}


.search-input:focus {
  box-shadow: none;
  outline: none;
}

.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
  color: rgb(244 244 245);
}
.text-5xl{
  color: #d4af37 !important;
  font-size: 3.25rem;
}

.text-zinc{
  color: rgb(161 161 170);
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.font-semibold{
  font-weight: 600;
  color: rgb(244 244 245);
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.verdesito{
  background-color: rgba(34, 197, 94, 0.2);
}
.azul{
  color: rgb(96 165 250);
}
.purpura{
  color: rgb(192 132 252);
}
.estrella{
  color: rgb(250 204 21);
}

.redondo{
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  background-color: rgba(168, 85, 247, 0.2);
}
.redondo-container-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px; /* Adjust as needed */
  height: 48px; /* Must be same as width for a perfect circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: rgba(59, 130, 246, 0.2);
  flex-shrink: 0; /* Prevents container from shrinking */
}
.redondo-container-green {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px; /* Adjust as needed */
  height: 48px; /* Must be same as width for a perfect circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: rgba(34, 197, 94, 0.2);
  flex-shrink: 0; /* Prevents container from shrinking */
}
.redondo-container-purple {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px; /* Adjust as needed */
  height: 48px; /* Must be same as width for a perfect circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: rgba(168, 85, 247, 0.2);
  flex-shrink: 0; /* Prevents container from shrinking */
}
.redondo-container-yellow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px; /* Adjust as needed */
  height: 48px; /* Must be same as width for a perfect circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: rgba(234, 179, 8, 0.2);
  flex-shrink: 0; /* Prevents container from shrinking */
}

.botonHero{
  background: linear-gradient(to right, rgba(255, 165, 0, 0.2), rgba(255, 0, 0, 0.2)); 
  color: #FFA500; border-color: rgba(255, 165, 0, 0.3);
}

/* Custom styles for gold gradient buttons */
.btn-custom-gold-primary {
  background: linear-gradient(to right, #FFD700, #FFAA00); /* Oro brillante a oro medio */
  border: none;
  color: #333; /* Texto oscuro para contrastar con el dorado */
  transition: all 0.2s ease-in-out;
  position: relative;
}

.btn-custom-gold-primary:hover {
  background: linear-gradient(to right, #EEC900, #E69800); /* Ligeramente más oscuro al hacer hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 215, 0, 0.4); /* Sombra dorada */
  color: #000;
}

.btn-custom-gold-primary:active {
  transform: translateY(0);
}

.btn-custom-gold-primary .lucide-arrow-right {
  transition: transform 0.2s ease-in-out;
}

.btn-custom-gold-primary:hover .lucide-arrow-right {
  transform: translateX(3px);
}

.btn-custom-gold-outline-warning {
  border-width: 2px;
  border-color: rgba(255, 215, 0, 0.5); /* Borde dorado semitransparente */
  background-color: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(5px);
  color: #FFD700; /* Texto dorado */
  transition: all 0.2s ease-in-out;
  position: relative;
}

.btn-custom-gold-outline-warning:hover {
  background-color: rgba(255, 215, 0, 0.1); /* Fondo dorado muy claro al hacer hover */
  border-color: #FFC107; /* Borde dorado un poco más intenso al hacer hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 215, 0, 0.15); /* Sombra dorada suave al hacer hover */
  color: rgb(244 244 245);
}

.btn-custom-gold-outline-warning:active {
  transform: translateY(0);
}




/*  */

.custom-gold-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 215, 0, 0.3); /* border-gold-500/30 */
  font-weight: 600; /* font-semibold */
  transition: all 0.2s ease-in-out; /* transition-colors duration-200 */
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* shadow */
  background: linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.2)); /* from-gold-500/20 to-gold-500/20 */
  color: #FFD700; /* text-gold-400 */
  font-size: 0.875rem; /* text-sm */
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.375rem; /* rounded-md */
}

.custom-gold-badge:hover {
  background: linear-gradient(to right, rgba(255, 215, 0, 0.3), rgba(255, 170, 0, 0.3)); /* Slightly more opaque gold on hover */
  /* original hover:bg-primary/80 is less straightforward to translate directly to a gold gradient opacity increase */
  /* You can adjust the opacity values (e.g., 0.3) to control the hover intensity */
}

/* Optional: Focus styles for accessibility, mimicking the original focus-ring */
.custom-gold-badge:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25); /* Focus ring with gold color */
}




/* ASASASASASASSA */


/* Base background for the hero section */
.hero-section-container {
  /* Replicating bg-gradient-to-br from-zinc-900 via-zinc-900 to-black */
  background: linear-gradient(to bottom right, #1a1a1a, #000000);
}

/* Radial gradient circles (the "blobs") */
.radial-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px); /* Equivalent to blur-xl */
  z-index: 0; /* Ensures they are behind the content */
  opacity: 0.8; /* Adjust overall opacity if needed */
}

/* First radial gradient circle (simulating circle_at_50%_120% - bottom center) */
.radial-blob-1 {
  width: 500px; /* Adjust size */
  height: 500px; /* Adjust size */
  bottom: -150px; /* Position slightly off-screen bottom */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  /* Replicating rgba(249,115,22,0.1) - an orange/gold tone */
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1), transparent);
}

/* Second radial gradient circle (simulating circle_at_80%_20% - top right) */
.radial-blob-2 {
  width: 400px; /* Adjust size */
  height: 400px; /* Adjust size */
  top: -100px; /* Position slightly off-screen top */
  right: -50px; /* Position slightly off-screen right */
  /* Replicating rgba(234,88,12,0.1) - another orange/gold tone */
  background: radial-gradient(circle at center, rgba(255, 170, 0, 0.1), transparent);
}

/* Ensure content is above the gradients */
.container {
  position: relative;
  z-index: 1;
}

/* --- General Text and Element Styles (from previous conversions) --- */

/* Font sizes for headings */

.text-zinc {
  color: #a0a0a0; /* A dark gray to mimic zinc-400 */
}
.fw-semibold {
  font-weight: 600;
}
.text-white { /* Ensure white text on dark background */
  color: #fff !important;
}
.text-secondary { /* Ensure proper secondary text color */
  color: #6c757d !important; /* Bootstrap's default secondary */
}

/* Custom gradient text */
.custom-gradient-text {
  background: -webkit-linear-gradient(left, #FFD700, #FFAA00); /* Gold gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom styles for gold badge */
.custom-gold-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 215, 0, 0.3); /* border-gold-500/30 */
  font-weight: 600; /* font-semibold */
  transition: all 0.2s ease-in-out; /* transition-colors duration-200 */
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* shadow */
  background: linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.2)); /* from-gold-500/20 to-gold-500/20 */
  color: #FFD700; /* text-gold-400 */
  font-size: 0.875rem; /* text-sm */
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.375rem; /* rounded-md */
}

.custom-gold-badge:hover {
  background: linear-gradient(to right, rgba(255, 215, 0, 0.3), rgba(255, 170, 0, 0.3)); /* Slightly more opaque gold on hover */
}

.custom-gold-badge:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25); /* Focus ring with gold color */
}

/* Custom styles for gold gradient buttons */
.btn-custom-gold-primary {
  background: linear-gradient(to right, #FFD700, #FFAA00); /* Oro brillante a oro medio */
  border: none;
  color: #333; /* Texto oscuro para contrastar con el dorado */
  transition: all 0.2s ease-in-out;
  position: relative;
}

.btn-custom-gold-primary:hover {
  background: linear-gradient(to right, #EEC900, #E69800); /* Ligeramente más oscuro al hacer hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 215, 0, 0.4); /* Sombra dorada */
}

.btn-custom-gold-primary:active {
  transform: translateY(0);
}

.btn-custom-gold-primary .lucide-arrow-right {
  transition: transform 0.2s ease-in-out;
}

.btn-custom-gold-primary:hover .lucide-arrow-right {
  transform: translateX(3px);
}

.btn-custom-gold-outline-warning {
  border-width: 2px;
  border-color: rgba(255, 215, 0, 0.5); /* Borde dorado semitransparente */
  background-color: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(5px);
  color: #FFD700; /* Texto dorado */
  transition: all 0.2s ease-in-out;
  position: relative;
}

.btn-custom-gold-outline-warning:hover {
  background-color: rgba(255, 215, 0, 0.1); /* Fondo dorado muy claro al hacer hover */
  border-color: #FFC107; /* Borde dorado un poco más intenso al hacer hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 215, 0, 0.15); /* Sombra dorada suave al hacer hover */
}

.btn-custom-gold-outline-warning:active {
  transform: translateY(0);
}

/* Custom classes for feature icons */
.redondo-container-green, .redondo-container-blue, .redondo-container-purple, .redondo-container-yellow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevents shrinking on smaller screens */
}
.redondo-container-green { background-color: rgba(74, 222, 128, 0.2); } /* Tailwind green-500/20 */
.redondo-container-blue { background-color: rgba(59, 130, 246, 0.2); } /* Tailwind blue-500/20 */
.redondo-container-purple { background-color: rgba(168, 85, 247, 0.2); } /* Tailwind purple-500/20 */
.redondo-container-yellow { background-color: rgba(250, 204, 21, 0.2); } /* Tailwind yellow-400/20 */

/* Specific icon colors */
.azul { color: rgb(59, 130, 246); } /* Tailwind blue-400 */
.purpura { color: rgb(168, 85, 247); } /* Tailwind purple-400 */
.estrella { color: rgb(250, 204, 21); } /* Tailwind yellow-400 */



/* NUEVOS */
/* --- General Customizations (retaining dark theme, gold accents) --- */
.text-zinc-100 { color: #f4f4f5 !important; } /* A lighter zinc for headings */
.text-zinc-300 { color: #d4d4d8 !important; }
.text-zinc-400 { color: #a1a1aa !important; } /* Text color for descriptions/small text */
.text-zinc-500 { color: #71717a !important; } /* For strikethrough price */
.text-zinc-600 { color: #52525b !important; } /* For empty stars */

/* Gradient Text (reused from previous parts) */
.custom-gradient-text {
  background: -webkit-linear-gradient(left, #FFD700, #FFAA00); /* Gold gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Product Card Specific Styles --- */
.custom-product-card {
  border: 1px solid rgba(63, 63, 70, 0.5); /* border-zinc-800/50 */
  background: linear-gradient(to bottom right, rgba(24, 24, 27, 0.9), rgba(24, 24, 27, 0.6)); /* bg-gradient-to-br from-zinc-900/90 to-zinc-900/60 */
  backdrop-filter: blur(5px); /* backdrop-blur-sm */
  color: #f4f4f5; /* text-zinc-100 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl shadow-black/20 */
  border-radius: 0.75rem; /* rounded-xl */
  transition: all 0.3s ease-in-out; /* transition-all duration-300 */
}

.custom-product-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(255, 165, 0, 0.1); /* hover:shadow-2xl hover:shadow-orange-500/10 */
  border-color: rgba(255, 165, 0, 0.3); /* hover:border-orange-500/30 */
  transform: scale(1.02); /* hover:scale-[1.02] */
}

/* --- Badges within the card (top left/right) --- */
.custom-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem; /* rounded-md */
  padding: 0.25rem 0.625rem; /* px-2.5 py-0.5 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  transition: all 0.2s ease-in-out;
  border: none; /* border-transparent */
  color: white; /* text-white */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow */
}

.custom-badge-featured {
  background: linear-gradient(to right, #8b5cf6, #ec4899); /* bg-gradient-to-r from-purple-500 to-pink-500 */
}

.custom-badge-discount {
  background: linear-gradient(to right, #ef4444, #f97316); /* bg-gradient-to-r from-red-500 to-orange-500 */
  margin-right: 25%;
}

/* --- Heart Button --- */
.custom-heart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* h-8 w-8 */
  height: 32px;
  border-radius: 50%; /* rounded-full */
  background-color: rgba(39, 39, 42, 0.6); /* bg-zinc-900/60 */
  backdrop-filter: blur(5px); /* backdrop-blur */
  color: #a1a1aa; /* text-zinc-300 */
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  font-size: 35px;
  padding: 0;
}

.custom-heart-btn:hover {
  transform: translateY(-2px); /* hover:-translate-y-0.5 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* hover:shadow-xl */
  background-color: rgba(39, 39, 42, 0.8); /* hover:bg-zinc-800/80 */
  color: #FFD700; /* hover:text-orange-100 (gold) */
}

.custom-heart-icon {
  transition: color 0.2s ease-in-out;
  color: #a1a1aa; /* text-zinc-400 */
}

.custom-heart-btn:hover .custom-heart-icon {
  color: #ef4444; /* hover:text-red-400 */
}

/* --- Product Image and Quick View Overlay --- */
.custom-img-container {
  aspect-ratio: 1 / 1; /* aspect-square */
}

.custom-img-hover {
  transition: transform 0.3s ease-in-out; /* transition-transform duration-300 */
}

.custom-product-card:hover .custom-img-hover {
  transform: scale(1.1); /* group-hover:scale-110 */
}

.custom-img-overlay {
  background-color: rgba(0, 0, 0, 0.6); /* bg-black/60 */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* transition-opacity duration-300 */
}

.custom-product-card:hover .custom-img-overlay {
  opacity: 1; /* group-hover:opacity-100 */
}

/* Quick View Button */
.custom-quickview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  border: 2px solid rgba(255, 165, 0, 0.5); /* border-orange-500/50 */
  background-color: rgba(39, 39, 42, 0.5); /* bg-zinc-900/50 */
  backdrop-filter: blur(5px); /* backdrop-blur */
  color: #FFD700; /* text-orange-100 */
  height: 32px; /* h-8 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0 1rem; /* px-4 */
  font-size: 0.75rem; /* text-xs */
  gap: 0.5rem; /* gap-2 */
  position: relative; /* For transform */
}

.custom-quickview-btn:hover {
  transform: translateY(-2px); /* hover:-translate-y-0.5 */
  box-shadow: 0 8px 15px rgba(255, 165, 0, 0.1); /* hover:shadow-xl shadow-orange-500/10 */
  background-color: rgba(255, 165, 0, 0.1); /* hover:bg-orange-500/10 */
  border-color: #FFBF00; /* hover:border-orange-400 */
}

.custom-quickview-btn:active {
  transform: translateY(0);
}

/* --- Product Detail Badges --- */
.custom-badge-condition {
  border-radius: 0.25rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
  transition: all 0.2s ease-in-out;
}
.custom-badge-green {
  background-color: rgba(74, 222, 128, 0.2); /* bg-green-500/20 */
  color: #4ade80; /* text-green-400 */
  border-color: rgba(74, 222, 128, 0.3); /* border-green-500/30 */
}
.custom-badge-blue {
  background-color: rgba(59, 130, 246, 0.2); /* bg-blue-500/20 */
  color: #60a5fa; /* text-blue-400 */
  border-color: rgba(59, 130, 246, 0.3); /* border-blue-500/30 */
}
.custom-badge-yellow {
  background-color: rgba(250, 204, 21, 0.2); /* bg-yellow-500/20 */
  color: #facc15; /* text-yellow-400 */
  border-color: rgba(250, 204, 21, 0.3); /* border-yellow-500/30 */
}
.custom-badge-info { /* For 128GB, Morado Intenso, etc. */
  background-color: rgba(63, 63, 70, 0.5); /* bg-zinc-800/50 */
  color: #d4d4d8; /* text-zinc-300 */
  border-color: #52525b; /* border-zinc-700 */
}

/* Star Ratings */
.custom-star-filled {
  color: #facc15; /* text-yellow-400 fill-yellow-400 */
}
.custom-star-empty {
  color: #52525b; /* text-zinc-600 */
}

/* --- Action Buttons (Add to Cart, View Details) --- */
.btn-custom-gold-primary-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  background: linear-gradient(to right, #FFD700, #FFAA00); /* Gold gradient */
  color: #333; /* text-white (dark text for gold) */
  height: 32px; /* h-8 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0 1rem; /* px-4 */
  font-size: 0.75rem; /* text-xs */
  position: relative;
}
.btn-custom-gold-primary-sm:hover {
  background: linear-gradient(to right, #EEC900, #E69800); /* Darker gold on hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 215, 0, 0.4);
}
.btn-custom-gold-primary-sm:active {
  transform: translateY(0);
}

.btn-custom-outline-warning-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  border: 2px solid rgba(255, 165, 0, 0.5); /* border-orange-500/50 */
  background-color: rgba(39, 39, 42, 0.5); /* bg-zinc-900/50 */
  backdrop-filter: blur(5px); /* backdrop-blur */
  color: #FFD700; /* text-orange-100 */
  height: 32px; /* h-8 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0 1rem; /* px-4 */
  font-size: 0.75rem; /* text-xs */
  position: relative;
}
.btn-custom-outline-warning-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 165, 0, 0.1);
  background-color: rgba(255, 165, 0, 0.1);
  border-color: #FFBF00;
}
.btn-custom-outline-warning-sm:active {
  transform: translateY(0);
}

/* Specific icon sizes for product card buttons */
.btn-custom-gold-primary-sm svg,
.btn-custom-outline-warning-sm svg {
  width: 16px; /* w-4 */
  height: 16px; /* h-4 */
}

/* Ensure SVG icons don't affect button layout */
.custom-quickview-btn svg,
.btn-custom-gold-primary-sm svg,
.btn-custom-outline-warning-sm svg {
  flex-shrink: 0;
  pointer-events: none;
}

.z-1 {
  z-index: 1 !important;
}

/* --- Shared Text Colors (from previous conversions) --- */
.text-zinc-100 { color: #f4f4f5 !important; } /* A lighter zinc for headings/semibold */
.text-zinc-400 { color: #a1a1aa !important; } /* Text color for descriptions/small text */
.text-white { color: #fff !important; } /* Explicitly white text */

/* Gradient Text (from previous conversions) */
.custom-gradient-text {
  background: -webkit-linear-gradient(left, #FFD700, #FFAA00); /* Gold gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Icon sizes for this section (consistent with w-6 h-6, but visually a bit larger) */
.custom-icon-lg {
  font-size: 28px; /* Making icons slightly larger than w-6 h-6 (24px) for better visibility */
  line-height: 1; /* Adjust to prevent extra space around icon */
}

/* Custom Gold Text for Icons */
.custom-text-gold {
  color: #FFD700; /* Primary gold color */
}

/* --- "How to Buy" Section Specific Styles --- */

.custom-feature-card {
  background: linear-gradient(to bottom right, rgba(24, 24, 27, 0.9), rgba(24, 24, 27, 0.6)); /* bg-zinc-900/90 to zinc-900/60 */
  backdrop-filter: blur(5px); /* backdrop-blur-sm */
  border: 1px solid rgba(63, 63, 70, 0.5); /* border-zinc-800/50 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem; /* Consistent padding */
  display: flex;
  flex-direction: column;
  align-items: center; /* text-center */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-feature-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(255, 215, 0, 0.2); /* Enhanced shadow and gold ring on hover */
  transform: translateY(-5px); /* Subtle lift on hover */
  border-color: rgba(255, 215, 0, 0.7); /* More prominent gold border on hover */
}

.custom-step-icon-circle {
  width: 60px; /* Larger circle for these icons */
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.2)); /* Gold gradient with opacity */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); /* Subtle gold glow */
  border: 1px solid rgba(255, 215, 0, 0.5); /* Gold border */
  transition: all 0.3s ease-in-out;
}

.custom-feature-card:hover .custom-step-icon-circle {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 0 5px rgba(255, 215, 0, 0.3); /* More intense glow on hover */
  transform: scale(1.1); /* Slight grow effect */
}

/* Important: Resetting Bootstrap's default margin-bottom for paragraphs */
.mb-0 { margin-bottom: 0 !important; }