/* Custom storefront styles built on Tabler 1.4.0 */

:root {
  --brand-primary: #ffbc00;
  --brand-secondary: #333333;
  --footer-bg: var(--brand-secondary);
  --product-img-opacity: 1.0; /* Opacidad de imágenes en modo claro (100%) */
}

[data-bs-theme="dark"],
[data-theme="dark"],
.theme-dark {
  --product-img-opacity: 0.85; /* Opacidad reducida en modo oscuro (85%) para atenuar fondo blanco */
}

:root {
--tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;

/* ==========================================
   SISTEMA DE DISEÑO GLOBAL (CAMBIAR AQUÍ)
   ========================================== */
--theme-radius: 8px; /* Tendencias: 0px (Retro/Flat), 8px (Moderno/Estándar), 16px (Organic/Soft) */

/* Mapeo de Variables CSS de Tabler/Bootstrap */
--tblr-border-radius: var(--theme-radius) !important;
--tblr-border-radius-sm: calc(var(--theme-radius) * 0.5) !important;
--tblr-border-radius-lg: calc(var(--theme-radius) * 1) !important;
}
body {
font-feature-settings: "cv03", "cv04", "cv11";
}

/* Brand Helper Classes */
.bg-brand-primary {
  background-color: var(--brand-primary) !important;
  color: #000000 !important;
}
.text-brand-primary {
  color: var(--brand-primary) !important;
}
.bg-brand-secondary {
  background-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}
.text-brand-secondary {
  color: var(--brand-secondary) !important;
}

.brand-color-bar {
  height: 4px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary) 75%, var(--brand-secondary) 75%, var(--brand-secondary) 100%);
}

/* Brand Footer Styles */
.footer-brand-shape {
  height: 24px;
  width: 100%;
  background: transparent;
  background-image: linear-gradient(300deg, var(--footer-bg) 100px, transparent 50.5px), 
                   linear-gradient(60deg, var(--footer-bg) 100px, transparent 50.5px);
  background-position: right, left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

.footer-custom {
  background: var(--footer-bg) !important;
  border: none !important;
}

.footer-custom a.text-secondary {
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.footer-custom a.text-secondary:hover {
  color: var(--brand-primary) !important;
  transform: translateX(4px);
}

.cursor-pointer {
  cursor: pointer !important;
}


.products-list__content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Grid Layout */
#products-view__list[data-layout="grid"] .products-list__content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

#products-view__list[data-layout="grid"] .products-list__item {
  width: 100%;
}

#products-view__list[data-layout="grid"] .products-list__head {
  display: none;
}

/* List Layout (Horizontal Card style) */
#products-view__list[data-layout="list"] .products-list__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#products-view__list[data-layout="list"] .products-list__item {
  width: 100%;
}

#products-view__list[data-layout="list"] .products-list__head {
  display: none;
}

#products-view__list[data-layout="list"] .product-card {
  flex-direction: row !important;
  align-items: center;
}

#products-view__list[data-layout="list"] .product-card__image {
  width: 200px;
  flex-shrink: 0;
  margin-top: 0 !important;
  padding: 1rem !important;
}

#products-view__list[data-layout="list"] .product-card__info {
  flex-direction: row !important;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between !important;
  padding: 1rem 1.5rem !important;
}

#products-view__list[data-layout="list"] .product-card__info > div:first-child {
  flex-grow: 1;
  max-width: 60%;
}

#products-view__list[data-layout="list"] .product-card__footer-form {
  border-top: 0 !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 0 0 1.5rem !important;
  margin: 0 !important;
  width: 240px;
  flex-shrink: 0;
}

/* Table Layout */
#products-view__list[data-layout="table"] .products-list__content {
  display: block;
}

#products-view__list[data-layout="table"] .products-list__item {
  width: 100%;
  display: block;
  background-color: var(--tblr-bg-surface) !important;
  border-bottom: 1px solid var(--tblr-border-color) !important;
  transition: background-color 0.2s ease;
}

#products-view__list[data-layout="table"] .products-list__item:hover {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

#products-view__list[data-layout="table"] .products-list__head {
  display: flex;
  font-weight: bold;
  border-bottom: 2px solid var(--tblr-border-color) !important;
  padding: 0.75rem 1rem;
  background-color: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
}

#products-view__list[data-layout="table"] .products-list__column {
  flex: 1;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--tblr-muted);
}

#products-view__list[data-layout="table"] .products-list__column--image { max-width: 80px; }
#products-view__list[data-layout="table"] .products-list__column--meta { max-width: 120px; }
#products-view__list[data-layout="table"] .products-list__column--product { flex: 2; }
#products-view__list[data-layout="table"] .products-list__column--rating { max-width: 120px; }
#products-view__list[data-layout="table"] .products-list__column--price { max-width: 200px; }

#products-view__list[data-layout="table"] .product-card {
  flex-direction: row !important;
  align-items: center;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0.75rem 1rem !important; /* Más espacioso horizontal y verticalmente */
}

#products-view__list[data-layout="table"] .product-card__image {
  max-width: 80px;
  margin-top: 0 !important;
  padding: 4px !important;
  background-color: #ffffff !important; /* Cuadro blanco para el PNG/JPG */
  border: 1px solid var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius-sm) !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

#products-view__list[data-layout="table"] .product-card__image img {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

#products-view__list[data-layout="table"] .product-card__image .badge {
  display: none !important;
}

#products-view__list[data-layout="table"] .product-card__actions-list,
#products-view__list[data-layout="table"] .product-card__badges {
  display: none !important;
}

#products-view__list[data-layout="table"] .product-card__info {
  flex-direction: row !important;
  flex-grow: 1;
  align-items: center;
  padding: 0 0 0 1rem !important;
}

#products-view__list[data-layout="table"] .product-card__info > div:first-child {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

#products-view__list[data-layout="table"] .product-card__info .text-muted.small.mb-1 {
  width: 120px;
  margin: 0 !important;
  flex-shrink: 0;
}

#products-view__list[data-layout="table"] .product-card__info .card-title {
  margin: 0 !important;
  flex-grow: 1;
}

#products-view__list[data-layout="table"] .product-card__info .product-card__rating {
  width: 120px;
  margin: 0 !important;
  flex-shrink: 0;
}

#products-view__list[data-layout="table"] .product-card__footer-form {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 200px;
  flex-shrink: 0;
}

/* General Layout Tweaks */
.cursor-pointer {
  cursor: pointer;
}
.z-index-10 {
  z-index: 10;
}

/* Brand list hover effects */
.brand-item-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

/**/

/*!
 * Tabler v1.4.0 (https://tabler.io)
 * Copyright 2018-2026 The Tabler Authors
 * Copyright 2018-2026 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
/**
 * Converts a given value to a percentage string.
 *
 * @param {Number} $value - The value to be converted to a percentage.
 * @return {String} - The percentage representation of the value.
 */
/**
 * Generates a transparent version of the given color.
 *
 * @param {Color} $color - The base color to be made transparent.
 * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
 * @return {Color} - The resulting color with the specified transparency.
 */
[data-bs-theme-base=slate],
[data-theme-base=slate] {
  --tblr-gray-50: #f8fafc;
  --tblr-gray-100: #f1f5f9;
  --tblr-gray-200: #e2e8f0;
  --tblr-gray-300: #cbd5e1;
  --tblr-gray-400: #94a3b8;
  --tblr-gray-500: #64748b;
  --tblr-gray-600: #475569;
  --tblr-gray-700: #334155;
  --tblr-gray-800: #1e293b;
  --tblr-gray-900: #0f172a;
  --tblr-gray-950: #020617;
}

[data-bs-theme-base=gray],
[data-theme-base=gray] {
  --tblr-gray-50: #f9fafb;
  --tblr-gray-100: #f3f4f6;
  --tblr-gray-200: #e5e7eb;
  --tblr-gray-300: #d1d5db;
  --tblr-gray-400: #9ca3af;
  --tblr-gray-500: #6b7280;
  --tblr-gray-600: #4b5563;
  --tblr-gray-700: #374151;
  --tblr-gray-800: #1f2937;
  --tblr-gray-900: #111827;
  --tblr-gray-950: #030712;
}

[data-bs-theme-base=zinc],
[data-theme-base=zinc] {
  --tblr-gray-50: #fafafa;
  --tblr-gray-100: #f4f4f5;
  --tblr-gray-200: #e4e4e7;
  --tblr-gray-300: #d4d4d8;
  --tblr-gray-400: #a1a1aa;
  --tblr-gray-500: #71717a;
  --tblr-gray-600: #52525b;
  --tblr-gray-700: #3f3f46;
  --tblr-gray-800: #27272a;
  --tblr-gray-900: #18181b;
  --tblr-gray-950: #09090b;
}

[data-bs-theme-base=neutral],
[data-theme-base=neutral] {
  --tblr-gray-50: #fafafa;
  --tblr-gray-100: #f5f5f5;
  --tblr-gray-200: #e5e5e5;
  --tblr-gray-300: #d4d4d4;
  --tblr-gray-400: #a3a3a3;
  --tblr-gray-500: #737373;
  --tblr-gray-600: #525252;
  --tblr-gray-700: #404040;
  --tblr-gray-800: #262626;
  --tblr-gray-900: #171717;
  --tblr-gray-950: #0a0a0a;
}

[data-bs-theme-base=stone],
[data-theme-base=stone] {
  --tblr-gray-50: #fafaf9;
  --tblr-gray-100: #f5f5f4;
  --tblr-gray-200: #e7e5e4;
  --tblr-gray-300: #d6d3d1;
  --tblr-gray-400: #a8a29e;
  --tblr-gray-500: #78716c;
  --tblr-gray-600: #57534e;
  --tblr-gray-700: #44403c;
  --tblr-gray-800: #292524;
  --tblr-gray-900: #1c1917;
  --tblr-gray-950: #0c0a09;
}

[data-bs-theme-base=pink],
[data-theme-base=pink] {
  --tblr-gray-50: #fdf2f8;
  --tblr-gray-100: #fce7f3;
  --tblr-gray-200: #fbcfe8;
  --tblr-gray-300: #f9a8d4;
  --tblr-gray-400: #f472b6;
  --tblr-gray-500: #ec4899;
  --tblr-gray-600: #db2777;
  --tblr-gray-700: #be185d;
  --tblr-gray-800: #9d174d;
  --tblr-gray-900: #831843;
  --tblr-gray-950: #500724;
}

[data-bs-theme-primary=blue],
[data-theme-primary=blue] {
  --tblr-primary: #066fd1;
  --tblr-primary-rgb: 6, 111, 209;
}

[data-bs-theme-primary=azure],
[data-theme-primary=azure] {
  --tblr-primary: #4299e1;
  --tblr-primary-rgb: 66, 153, 225;
}

[data-bs-theme-primary=indigo],
[data-theme-primary=indigo] {
  --tblr-primary: #4263eb;
  --tblr-primary-rgb: 66, 99, 235;
}

[data-bs-theme-primary=purple],
[data-theme-primary=purple] {
  --tblr-primary: #ae3ec9;
  --tblr-primary-rgb: 174, 62, 201;
}

[data-bs-theme-primary=pink],
[data-theme-primary=pink] {
  --tblr-primary: #d6336c;
  --tblr-primary-rgb: 214, 51, 108;
}

[data-bs-theme-primary=red],
[data-theme-primary=red] {
  --tblr-primary: #d63939;
  --tblr-primary-rgb: 214, 57, 57;
}

[data-bs-theme-primary=orange],
[data-theme-primary=orange] {
  --tblr-primary: #f76707;
  --tblr-primary-rgb: 247, 103, 7;
}

[data-bs-theme-primary=yellow],
[data-theme-primary=yellow] {
  --tblr-primary: #f59f00;
  --tblr-primary-rgb: 245, 159, 0;
}

[data-bs-theme-primary=lime],
[data-theme-primary=lime] {
  --tblr-primary: #74b816;
  --tblr-primary-rgb: 116, 184, 22;
}

[data-bs-theme-primary=green],
[data-theme-primary=green] {
  --tblr-primary: #2fb344;
  --tblr-primary-rgb: 47, 179, 68;
}

[data-bs-theme-primary=teal],
[data-theme-primary=teal] {
  --tblr-primary: #0ca678;
  --tblr-primary-rgb: 12, 166, 120;
}

[data-bs-theme-primary=cyan],
[data-theme-primary=cyan] {
  --tblr-primary: #17a2b8;
  --tblr-primary-rgb: 23, 162, 184;
}

[data-bs-theme-radius="0"],
[data-theme-radius="0"] {
  --tblr-border-radius-scale: 0;
}

[data-bs-theme-radius="0.5"],
[data-theme-radius="0.5"] {
  --tblr-border-radius-scale: 0.5;
}

[data-bs-theme-radius="1"],
[data-theme-radius="1"] {
  --tblr-border-radius-scale: 1;
}

[data-bs-theme-radius="1.5"],
[data-theme-radius="1.5"] {
  --tblr-border-radius-scale: 1.5;
}

[data-bs-theme-radius="2"],
[data-theme-radius="2"] {
  --tblr-border-radius-scale: 2;
}

[data-bs-theme-primary=inverted],
[data-theme-primary=inverted] {
  --tblr-primary: var(--tblr-gray-800);
  --tblr-primary-fg: var(--tblr-light);
  --tblr-primary-rgb: 31, 41, 55;
}
[data-bs-theme-primary=inverted][data-bs-theme=dark],
[data-bs-theme-primary=inverted] [data-bs-theme=dark], [data-bs-theme-primary=inverted][data-theme=dark],
[data-bs-theme-primary=inverted] [data-theme=dark],
[data-theme-primary=inverted][data-bs-theme=dark],
[data-theme-primary=inverted] [data-bs-theme=dark],
[data-theme-primary=inverted][data-theme=dark],
[data-theme-primary=inverted] [data-theme=dark] {
  --tblr-primary: #f9fafb;
  --tblr-primary-fg: var(--tblr-dark);
  --tblr-primary-rgb: 249, 250, 251;
}

[data-bs-theme-font=monospace],
[data-theme-font=monospace] {
  --tblr-body-font-family: var(--tblr-font-monospace);
  --tblr-body-font-size: 80%;
}

[data-bs-theme-font=sans-serif],
[data-theme-font=sans-serif] {
  --tblr-body-font-family: var(--tblr-font-sans-serif);
}

[data-bs-theme-font=serif],
[data-theme-font=serif] {
  --tblr-body-font-family: var(--tblr-font-serif);
}

[data-bs-theme-font=comic],
[data-theme-font=comic] {
  --tblr-body-font-family: var(--tblr-font-comic);
}

/* sourceMappingURL=tabler-themes.css.map */

.no-arrows::-webkit-outer-spin-button,
.no-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-arrows[type=number] {
  -moz-appearance: textfield;
}

/* ==========================================
   HELPERS SENSIBLES AL TEMA (INVERSABLES)
   ========================================== */

/* Valores por defecto en Modo Claro */
.text-dark-inverse {
  color: var(--tblr-dark) !important;
}
.text-light-inverse {
  color: var(--tblr-light) !important;
}
.bg-dark-inverse {
  background-color: var(--tblr-dark) !important;
}
.bg-light-inverse {
  background-color: var(--tblr-light) !important;
}
.border-dark-inverse {
  border-color: var(--tblr-dark) !important;
}
.border-light-inverse {
  border-color: var(--tblr-light) !important;
}
.text-white-inverse {
  color: #ffffff !important;
}
.text-black-inverse {
  color: var(--tblr-gray-900) !important;
}
.bg-white-inverse {
  background-color: #ffffff !important;
}
.bg-black-inverse {
  background-color: #000000 !important;
}
.border-white-inverse {
  border-color: #ffffff !important;
}
.border-black-inverse {
  border-color: var(--tblr-gray-900) !important;
}

/* Sobrescrituras automáticas en Modo Oscuro */
[data-bs-theme="dark"] .text-dark-inverse,
[data-theme="dark"] .text-dark-inverse,
.theme-dark .text-dark-inverse {
  color: var(--tblr-light) !important;
}
[data-bs-theme="dark"] .text-light-inverse,
[data-theme="dark"] .text-light-inverse,
.theme-dark .text-light-inverse {
  color: var(--tblr-dark) !important;
}
[data-bs-theme="dark"] .bg-dark-inverse,
[data-theme="dark"] .bg-dark-inverse,
.theme-dark .bg-dark-inverse {
  background-color: var(--tblr-light) !important;
}
[data-bs-theme="dark"] .bg-light-inverse,
[data-theme="dark"] .bg-light-inverse,
.theme-dark .bg-light-inverse {
  background-color: var(--tblr-gray-900) !important;
}
[data-bs-theme="dark"] .border-dark-inverse,
[data-theme="dark"] .border-dark-inverse,
.theme-dark .border-dark-inverse {
  border-color: var(--tblr-light) !important;
}
[data-bs-theme="dark"] .border-light-inverse,
[data-theme="dark"] .border-light-inverse,
.theme-dark .border-light-inverse {
  border-color: var(--tblr-gray-900) !important;
}
[data-bs-theme="dark"] .text-white-inverse,
[data-theme="dark"] .text-white-inverse,
.theme-dark .text-white-inverse {
  color: var(--tblr-light) !important;
}
[data-bs-theme="dark"] .text-black-inverse,
[data-theme="dark"] .text-black-inverse,
.theme-dark .text-black-inverse {
  color: #ffffff !important;
}
[data-bs-theme="dark"] .bg-white-inverse,
[data-theme="dark"] .bg-white-inverse,
.theme-dark .bg-white-inverse {
  background-color: var(--tblr-bg-surface) !important;
}
[data-bs-theme="dark"] .bg-black-inverse,
[data-theme="dark"] .bg-black-inverse,
.theme-dark .bg-black-inverse {
  background-color: #ffffff !important;
}
[data-bs-theme="dark"] .border-white-inverse,
[data-theme="dark"] .border-white-inverse,
.theme-dark .border-white-inverse {
  border-color: var(--tblr-border-color) !important;
}
[data-bs-theme="dark"] .border-black-inverse,
[data-theme="dark"] .border-black-inverse,
.theme-dark .border-black-inverse {
  border-color: #ffffff !important;
}

/* ==========================================
   ESTILOS PREMIUM PARA EL HEADER (COMMON)
   ========================================== */

/* Utility Actions (Compare, Wishlist, Language, Currency, Cart) */
.navbar-dark .navbar-nav .nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  padding: 0 !important;
  border-radius: var(--tblr-border-radius-sm);
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-dark .navbar-nav .nav-item .nav-link:hover,
.navbar-dark .navbar-nav .nav-item.show .nav-link {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background: rgba(255, 188, 0, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 188, 0, 0.1);
}

/* Exclusión de la cuenta de usuario para evitar bordes */
.navbar-dark .navbar-nav .nav-item.dropdown .nav-link.lh-1 {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Buscador interactivo traslúcido */
#searchInput {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

#searchInput:focus {
  background-color: #ffffff !important;
  border-color: var(--brand-primary) !important;
  color: var(--tblr-gray-900) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 188, 0, 0.2) !important;
}

/* Barra de categorías limpia y clara */
.navbar-light .navbar-nav .nav-item {
  position: relative;
}

.navbar-light .navbar-nav .nav-link {
  font-weight: 500;
  color: var(--tblr-gray-800) !important;
  padding: 0.65rem 1rem !important;
  transition: all 0.2s ease-in-out;
  border-radius: var(--tblr-border-radius-sm);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--brand-secondary) !important;
  background-color: rgba(0, 0, 0, 0.03);
}

.navbar-light .navbar-nav .nav-link .nav-link-icon {
  color: var(--tblr-gray-500);
  transition: color 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover .nav-link-icon {
  color: var(--brand-primary);
}

/* ==========================================
   ESTILOS ORIGINALES ELECTRO.CR MODERNO
   ========================================== */

/* Topbar Sesgada */
.electro-topbar {
  display: block;
  height: 30px;
  font-size: 0.75rem;
  position: relative;
  background-color: var(--tblr-bg-surface);
  /* border-bottom: 1px solid #f1f5f9; */
  z-index: 1040; /* Mayor que el navbar para que los dropdowns queden al frente */
  overflow-x: clip; /* Recorta el desbordamiento horizontal de los fondos estirados */
  overflow-y: visible; /* Mantiene visibles los dropdowns que caen verticalmente */
}

.topbar-left {
  color: var(--brand-secondary);
  position: relative;
  padding-left: 0.5rem;
}

.topbar-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw; /* Estira generosamente a la izquierda, la pantalla se encarga de recortar */
  right: 0;
  height: 100%;
  background-color: var(--brand-primary);
  z-index: 1;
}

.topbar-left::after {
  content: "";
  position: absolute;
  top: 0;
  right: -11px;
  width: 22px;
  height: 100%;
  background-color: var(--brand-primary);
  transform: skewX(-30deg);
  z-index: 2;
}

.topbar-center {
  color: var(--tblr-muted);
  font-weight: bold;
}

.topbar-right {
  color: #ffffff;
  position: relative;
  padding-right: 0.5rem;
}

.topbar-right::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100vw; /* Estira generosamente a la derecha, la pantalla se encarga de recortar */
  left: 0;
  height: 100%;
  background-color: var(--brand-secondary);
  z-index: 1;
}

.topbar-right::after {
  content: "";
  position: absolute;
  top: 0;
  left: -11px;
  width: 22px;
  height: 100%;
  background-color: var(--brand-secondary);
  transform: skewX(30deg);
  z-index: 2;
}

.topbar-right .nav-link {
  color: #ffffff !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
}

.topbar-right .dropdown-toggle::after {
  color: #ffffff !important;
}

/* Contenedor de Buscador Flotante Sesgado */
.electro-search-wrapper {
  position: absolute !important;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: auto;
  margin: 0;
}

.electro-search-container {
  width: 480px;
  background-color: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-left: 0;
  border-right: 0;
  position: relative;
  padding: 2px 10px;
  margin: 0 10px;
  transition: all 0.2s ease;
  z-index:-1;
  -webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.12), 0 -1px rgba(0, 0, 0, 0.02);
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 -1px rgba(0, 0, 0, 0.02);
}

.electro-search-container::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -10px;
  width: 20px;
  height: calc(100% + 2px);
  background-color: inherit;
  border: 1px solid var(--tblr-border-color);
  border-right: 0;
  transform: skewX(20deg);
  border-radius: var(--tblr-border-radius-md) 0 0 var(--tblr-border-radius-md);
  z-index: 1;
  transition: all 0.2s ease;
}

.electro-search-container::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -10px;
  width: 20px;
  height: calc(100% + 2px);
  background-color: inherit;
  border: 1px solid var(--tblr-border-color);
  border-left: 0;
  transform: skewX(-20deg);
  border-radius: 0 var(--tblr-border-radius-md) var(--tblr-border-radius-md) 0;
  z-index: 1;
  transition: all 0.2s ease;
}

.electro-search-container form {
  position: relative;
  z-index: 2;
}

.electro-search-container #searchInput {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--tblr-body-color) !important;
  padding-left: 2.5rem !important; /* Espacio para el icono de búsqueda */
  padding-right: 15px !important;
  text-align: center;
}

.electro-search-container:focus-within {
  border-color: var(--brand-primary) !important;
  background-color: var(--tblr-bg-surface) !important;
  box-shadow: 0 4px 15px rgba(255, 188, 0, 0.15) !important;
}

.electro-search-container:focus-within::before,
.electro-search-container:focus-within::after {
  border-color: var(--brand-primary) !important;
}

/* Hover de Cuentas y Carrito en Fila Principal */
.electro-main-actions .nav-link {
  color: var(--tblr-gray-800) !important;
  transition: all 0.2s ease;
}

.electro-main-actions .nav-link:hover {
  color: var(--brand-primary) !important;
}

/* Transiciones Megamenú de Categorías */
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  .navbar-nav .nav-item.dropdown > .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    position: absolute !important;
    top: 100% !important; /* Colocar exactamente abajo del navbar blanco */
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .navbar-nav .nav-item.dropdown.position-static {
    position: static !important;
  }
}

/* Ocultar/mostrar iconos del selector de tema */
[data-bs-theme="dark"] .d-none-dark {
  display: none !important;
}
[data-bs-theme="light"] .d-none-light,
:root:not([data-bs-theme="dark"]) .d-none-light {
  display: none !important;
}

/* Resultados del buscador AJAX más anchos y centrados (solo desktop) */
@media (min-width: 992px) {
  #searchDropdown {
    width: 780px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: var(--tblr-border-radius-lg) !important;
    border: 1px solid var(--tblr-border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 1100 !important;
    background-color: var(--tblr-bg-surface) !important;
    overflow-x: hidden;
  }
}

/* Fondo blanco unificado para la sección de imagen del producto */
.product-card .product-card__image {
  background-color: #ffffff !important;
  border-top-left-radius: var(--tblr-border-radius);
  border-top-right-radius: var(--tblr-border-radius);
  border-bottom: 1px solid var(--tblr-border-color);
  opacity: var(--product-img-opacity, 1.0);
  transition: opacity 0.25s ease-in-out;
}

/* Efecto hover: Ilumina la imagen al 100% de brillo al posarse sobre el producto */
.product-card:hover .product-card__image,
.products-list__item:hover .product-card__image {
  opacity: 1.0 !important;
}

/* Forzar contraste del texto del badge sobre fondo blanco */
.product-card .product-card__image .badge {
  color: var(--tblr-dark) !important;
}

/* Ajustes para layout de lista (horizontal) */
#products-view__list[data-layout="list"] .product-card__image {
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--tblr-border-radius);
  border-bottom: 0 !important;
  border-right: 1px solid var(--tblr-border-color);
}

/* Ajustes de override de tabla consolidados en la sección principal */

/* Ocultar botones flotantes y badges absolutos en modo tabla */
#products-view__list[data-layout="table"] .product-card__header-actions {
  display: none !important;
}

/* Desactivar degradados de tarjeta en modo tabla para mantener filas limpias */
#products-view__list[data-layout="table"] .card-gradient {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Limitar altura del listado de productos en resumen de checkout para evitar scrolls infinitos */
#checkout-confirm .table-responsive {
  max-height: 340px;
  overflow-y: auto;
}

/* Fix for mobile menu height in sticky header to allow scrolling within the menu */
@media (max-width: 767.98px) {
  #navbar-menu {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}



.toast a {
color: var(--tblr-dark) !important;
font-weight: bold;
}

[data-bs-theme="dark"] .toast a,
[data-theme="dark"] .toast a,
.theme-dark .toast a {
  color: var(--tblr-light) !important;
}

.grecaptcha-badge {
  visibility: hidden !important;
}