/*
 * Vin Store — visual layer for PrestaShop Classic
 * Scope: continuity with the public Vin web, without rebuilding Classic.
 * v1: header, palette, typography, catalogue/product cards, buttons and footer.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --vin-ink: #090b12;
  --vin-surface: #101420;
  --vin-panel: #151a28;
  --vin-line: #2a3142;
  --vin-text: #f1f5ff;
  --vin-muted: #9aa9c2;
  --vin-acid: #b6ff3c;
  --vin-acid-hover: #d0ff7c;
  --vin-purple: #8a58ff;
}

/* ---------- Base ---------- */

body {
  background: var(--vin-ink);
  color: var(--vin-text);
  font-family: "DM Sans", Arial, sans-serif;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--vin-acid);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--vin-text);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}

#wrapper {
  background: var(--vin-ink);
  color: var(--vin-text);
  box-shadow: none;
}

#wrapper .container {
  color: inherit;
}

/* ---------- Header / brand ---------- */

#header {
  background: rgba(9, 11, 18, .98);
  color: var(--vin-text);
}

#header .header-nav,
#header .header-top {
  background: rgba(9, 11, 18, .98);
  border-color: var(--vin-line);
  color: var(--vin-text);
  box-shadow: none;
}

#header .header-nav {
  border-bottom: 1px solid var(--vin-line);
  margin-bottom: 0;
}

#header .header-top {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#header a,
#header .header-nav .blockcart,
#header .header-nav .user-info a,
#header .header-nav .language-selector,
#header .header-nav .currency-selector {
  color: var(--vin-muted);
}

#header a:hover,
#header a:focus,
#header .top-menu a[data-depth="0"]:hover,
#header .top-menu a[data-depth="0"]:focus {
  color: var(--vin-text);
}

/*
 * Keep the real shop logo in the DOM for the existing link/alt semantics,
 * but visually replace it with Vin's text wordmark.
 */
#_desktop_logo > a,
#_desktop_logo h1 > a {
  align-items: center;
  display: inline-flex;
  min-height: 40px;
  position: relative;
  text-decoration: none;
}

#_desktop_logo img.logo {
  height: 1px !important;
  margin: 0 !important;
  opacity: 0;
  position: absolute;
  width: 1px !important;
}

#_desktop_logo > a::before,
#_desktop_logo h1 > a::before {
  color: var(--vin-text);
  content: "Vin";
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1;
}

#_desktop_logo > a::after,
#_desktop_logo h1 > a::after {
  border-left: 1px solid var(--vin-line);
  color: #8793a8;
  content: "CYCLING TRAINING SYSTEM";
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .115em;
  line-height: 1.15;
  margin-left: 13px;
  padding-left: 13px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mobile wordmark */
#header .top-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 42px;
}

#header .top-logo a {
  display: inline-flex;
  position: relative;
  text-decoration: none;
}

#header .top-logo img {
  height: 1px !important;
  opacity: 0;
  position: absolute;
  width: 1px !important;
}

#header .top-logo a::before {
  color: var(--vin-text);
  content: "Vin";
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1.58rem;
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1;
}

/* Main nav */
#header .top-menu a[data-depth="0"] {
  color: var(--vin-muted);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: none;
}

#header .menu,
#header .dropdown-menu,
#header .popover {
  background: var(--vin-surface);
  color: var(--vin-text);
  border-color: var(--vin-line);
}

#header .dropdown-item,
#header .dropdown-menu a {
  color: var(--vin-muted);
}

#header .dropdown-item:hover,
#header .dropdown-menu a:hover {
  background: var(--vin-panel);
  color: var(--vin-text);
}

#search_widget form input {
  background: var(--vin-surface);
  border: 1px solid var(--vin-line);
  border-radius: 7px;
  color: var(--vin-text);
  font-family: "DM Sans", Arial, sans-serif;
}

#search_widget form input::placeholder {
  color: var(--vin-muted);
}

/* ---------- Breadcrumb / section framing ---------- */

.breadcrumb,
#wrapper .breadcrumb {
  background: transparent;
}

.breadcrumb li,
.breadcrumb li a,
#wrapper .breadcrumb li a {
  color: var(--vin-muted);
}

.breadcrumb li:last-child,
#wrapper .breadcrumb li:last-child {
  color: var(--vin-text);
}

.block-category {
  background: var(--vin-surface);
  border: 1px solid var(--vin-line);
  border-radius: 10px;
  box-shadow: none;
  color: var(--vin-text);
}

.block-category .block-category-inner #category-description p,
.block-category #category-description {
  color: var(--vin-muted);
}

/* ---------- Catalogue cards ---------- */

.products,
.featured-products,
.product-accessories {
  color: var(--vin-text);
}

.product-miniature .thumbnail-container {
  background: var(--vin-surface);
  border: 1px solid var(--vin-line);
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}

.product-miniature .thumbnail-container:hover {
  border-color: #414b64;
  box-shadow: none;
  transform: translateY(-2px);
}

.product-miniature .product-description {
  background: var(--vin-surface);
  color: var(--vin-text);
}

.product-miniature .product-title,
.product-miniature .product-title a {
  color: var(--vin-text);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.product-miniature .product-title a:hover {
  color: var(--vin-acid);
}

.product-miniature .product-price-and-shipping,
.product-price {
  color: var(--vin-text);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
}

.product-miniature .regular-price,
.product-miniature .product-price-and-shipping .regular-price {
  color: var(--vin-muted);
}

.product-miniature .discount-percentage,
.product-miniature .discount-amount,
.has-discount .discount,
.product-flags li.product-flag {
  background: var(--vin-purple);
  color: #fff;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
}

.product-miniature .highlighted-informations {
  background: rgba(21, 26, 40, .97);
  box-shadow: none;
}

.product-miniature .highlighted-informations .quick-view {
  color: var(--vin-muted);
}

.product-miniature .highlighted-informations .quick-view:hover {
  color: var(--vin-acid);
}

/* ---------- Product page ---------- */

#product #content,
#product .product-information,
#product .product-prices,
#product .product-add-to-cart,
#product .product-actions,
#product .tabs {
  color: var(--vin-text);
}

#product .product-cover,
#product .images-container,
#product .tabs,
#product .card {
  background: var(--vin-surface);
  border-color: var(--vin-line);
  box-shadow: none;
}

#product .product-cover {
  border: 1px solid var(--vin-line);
  border-radius: 10px;
  overflow: hidden;
}

#product .product-information,
#product .product-description,
#product .product-description p,
#product .product-features,
#product .product-reference {
  color: var(--vin-muted);
}

#product .product-prices .tax-shipping-delivery-label,
#product .product-prices .product-discount {
  color: var(--vin-muted);
}

#product .tabs {
  border: 1px solid var(--vin-line);
  border-radius: 10px;
  padding: 1.25rem;
}

#product .tabs .nav-tabs {
  border-color: var(--vin-line);
}

#product .tabs .nav-tabs .nav-link {
  color: var(--vin-muted);
}

#product .tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link:hover {
  background: transparent;
  border-color: transparent transparent var(--vin-acid);
  color: var(--vin-text);
}

/* ---------- Buttons / controls ---------- */

.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.disabled,
.btn-primary:disabled {
  background: var(--vin-acid);
  border-color: var(--vin-acid);
  border-radius: 7px;
  color: #182000;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--vin-acid-hover);
  border-color: var(--vin-acid-hover);
  color: #111801;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--vin-line);
  border-radius: 7px;
  color: var(--vin-text);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
}

.btn-secondary:hover {
  background: var(--vin-panel);
  border-color: var(--vin-purple);
  color: var(--vin-text);
}

.form-control,
.input-group .form-control,
select.form-control {
  background: var(--vin-surface);
  border-color: var(--vin-line);
  color: var(--vin-text);
  font-family: "DM Sans", Arial, sans-serif;
}

.form-control:focus,
.input-group .form-control:focus,
select.form-control:focus {
  background: var(--vin-surface);
  border-color: var(--vin-acid);
  color: var(--vin-text);
  outline: 0;
}

.form-control::placeholder {
  color: var(--vin-muted);
}

/* ---------- Common cards / side blocks ---------- */

.card,
.block-categories,
#left-column .block,
#right-column .block,
.pagination,
.sort-by-row {
  background: var(--vin-surface);
  border-color: var(--vin-line);
  color: var(--vin-text);
  box-shadow: none;
}

.block-categories a,
#left-column .block a,
#right-column .block a {
  color: var(--vin-muted);
}

.block-categories a:hover,
#left-column .block a:hover,
#right-column .block a:hover {
  color: var(--vin-acid);
}

.pagination .page-list li a,
.pagination .page-list li span {
  color: var(--vin-muted);
}

.pagination .current a,
.pagination a:hover {
  color: var(--vin-acid);
}

/* ---------- Footer ---------- */

#footer,
.footer-container {
  background: var(--vin-ink);
  border-top: 1px solid var(--vin-line);
  color: var(--vin-muted);
  box-shadow: none;
}

.footer-container .h3,
.footer-container .h4,
.footer-container .block-contact-title,
.footer-container .hidden-sm-down {
  color: var(--vin-text);
}

.footer-container a {
  color: var(--vin-muted);
}

.footer-container a:hover {
  color: var(--vin-acid);
}

/* ---------- Checkout safeguard ---------- */
/*
 * Do not aggressively reskin payment/checkout internals in v1.
 * Keep the Vin shell, but preserve Classic's readable white transaction area
 * until checkout is audited separately.
 */
body#checkout #wrapper,
body#order-confirmation #wrapper {
  background: #f6f6f6;
  color: #232323;
}

body#checkout #wrapper h1,
body#checkout #wrapper h2,
body#checkout #wrapper h3,
body#checkout #wrapper h4,
body#checkout #wrapper .h1,
body#checkout #wrapper .h2,
body#checkout #wrapper .h3,
body#checkout #wrapper .h4,
body#order-confirmation #wrapper h1,
body#order-confirmation #wrapper h2,
body#order-confirmation #wrapper h3 {
  color: #232323;
}

body#checkout #wrapper a,
body#order-confirmation #wrapper a {
  color: inherit;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  #header .header-top {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  #header .header-nav .mobile {
    background: rgba(9, 11, 18, .98);
    color: var(--vin-text);
  }

  #mobile_top_menu_wrapper {
    background: var(--vin-surface);
    border-top: 1px solid var(--vin-line);
  }

  #mobile_top_menu_wrapper .top-menu a {
    color: var(--vin-muted);
  }
}

@media (max-width: 767px) {
  #header .header-nav {
    border-bottom: 1px solid var(--vin-line);
  }

  .product-miniature .thumbnail-container {
    border-radius: 8px;
  }
}

/* ===== VIN Store v2 — integración visual con el portal =====
   Este bloque va al final para ganar a los estilos legacy del tema.
   No modifica checkout ni lógica de PrestaShop.
*/

/* --- Cabecera: eliminar definitivamente el verde legacy --- */
html body #header,
html body #header .header-nav,
html body #header .header-top,
html body #header .header-nav > .container,
html body #header .header-top > .container {
  background: #090b12 !important;
  background-color: #090b12 !important;
}

html body #header .header-nav {
  border-bottom: 1px solid #2a3142 !important;
}

html body #header .header-top {
  border-bottom: 1px solid #2a3142 !important;
}

/* Menú y controles de cabecera: legibles sobre fondo Vin */
html body #header a,
html body #header .top-menu a[data-depth="0"],
html body #header .header-nav .user-info a,
html body #header .header-nav .language-selector,
html body #header .header-nav .currency-selector {
  color: #9aa9c2 !important;
}

html body #header a:hover,
html body #header a:focus,
html body #header .top-menu a[data-depth="0"]:hover,
html body #header .top-menu a[data-depth="0"]:focus {
  color: #f1f5ff !important;
}

/* Carrito: integrado, sin bloque verde */
html body #header .header-nav .cart-preview,
html body #header .header-nav .cart-preview.active {
  background: transparent !important;
  border: 1px solid #2a3142 !important;
  border-radius: 6px;
}

html body #header .header-nav .cart-preview a,
html body #header .header-nav .cart-preview.active a {
  color: #f1f5ff !important;
}

/* --- Wordmark: conservar Vin + tagline sin pisar el menú --- */
@media (min-width: 992px) {
  html body #header #_desktop_logo {
    flex: 0 0 26% !important;
    max-width: 26% !important;
    width: 26% !important;
  }

  html body #header .header-top .header-top-right {
    flex: 0 0 74% !important;
    max-width: 74% !important;
    width: 74% !important;
  }

  html body #_desktop_logo > a::after,
  html body #_desktop_logo h1 > a::after {
    font-size: .58rem;
    letter-spacing: .10em;
    margin-left: 10px;
    padding-left: 10px;
  }
}

/* --- Portada: el carrusel legacy está vacío y no aporta nada --- */
body#index #carousel,
body#index #carousel.carousel {
  display: none !important;
}

/* --- Fondo general: eliminar el gran lienzo claro --- */
html body:not(#checkout):not(#order-confirmation),
html body:not(#checkout):not(#order-confirmation) #wrapper,
html body:not(#checkout):not(#order-confirmation) #content-wrapper,
html body:not(#checkout):not(#order-confirmation) #main {
  background: #090b12 !important;
  background-color: #090b12 !important;
}

html body#index #wrapper > .container,
html body#index #content-wrapper,
html body#index #main,
html body#index .featured-products,
html body#index .products {
  background: transparent !important;
  background-color: transparent !important;
}

/* Separación limpia entre cabecera y catálogo */
body#index #wrapper {
  padding-top: 2.25rem;
}

/* --- Footer: mismo sistema oscuro que el portal --- */
html body #footer,
html body #footer .footer-container,
html body .footer-container {
  background: #101420 !important;
  background-color: #101420 !important;
  border-top: 1px solid #2a3142 !important;
  color: #9aa9c2 !important;
  box-shadow: none !important;
}

html body #footer .container,
html body .footer-container .container,
html body #footer .row {
  background: transparent !important;
  background-color: transparent !important;
}

html body #footer .h3,
html body #footer .h4,
html body #footer .block-contact-title,
html body #footer .hidden-sm-down,
html body .footer-container .h3,
html body .footer-container .h4 {
  color: #f1f5ff !important;
}

html body #footer a,
html body .footer-container a {
  color: #9aa9c2 !important;
}

html body #footer a:hover,
html body .footer-container a:hover {
  color: #b6ff3c !important;
}

/* --- Móvil: cabecera compacta y limpia --- */
@media (max-width: 991px) {
  html body #header .header-nav .mobile,
  html body #mobile_top_menu_wrapper {
    background: #090b12 !important;
    background-color: #090b12 !important;
  }
}

@media (max-width: 767px) {
  body#index #wrapper {
    padding-top: 1.25rem;
  }
}

/* ===== VIN Store v4 — header, botones y limpieza home ===== */

/* Más aire entre marca y navegación */
@media (min-width: 992px) {
  #header .header-top .row {
    align-items: center;
  }

  #header #_desktop_logo {
    flex: 0 0 32% !important;
    max-width: 32% !important;
    width: 32% !important;
    padding-right: 28px;
  }

  #header .header-top .header-top-right {
    flex: 0 0 68% !important;
    max-width: 68% !important;
    width: 68% !important;
    padding-left: 18px;
  }

  #header .top-menu {
    margin-left: 0 !important;
  }

  #header .top-menu a[data-depth="0"] {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Botones Classic -> lenguaje Vin */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
  background: #b6ff3c !important;
  border-color: #b6ff3c !important;
  color: #182000 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: #d0ff7c !important;
  border-color: #d0ff7c !important;
  color: #111801 !important;
}

.btn-secondary {
  background: transparent !important;
  border: 1px solid #2a3142 !important;
  color: #f1f5ff !important;
  border-radius: 7px !important;
}

.btn-secondary:hover {
  background: #151a28 !important;
  border-color: #8a58ff !important;
  color: #f1f5ff !important;
}

/* Sepultura provisional del legado de portada */
body#index .banner,
body#index #custom-text {
  display: none !important;
}

/* ===== VIN Store v5 — integrar imágenes de producto ===== */

.product-miniature .thumbnail-top,
.product-miniature .product-thumbnail,
.product-miniature .thumbnail-container .thumbnail-top {
    background: #101420 !important;
}

.product-miniature .product-thumbnail {
    padding: 10px !important;
}

.product-miniature .product-thumbnail img {
    background: #101420 !important;
    border-radius: 8px !important;
}

.product-miniature .thumbnail-container {
    background: #101420 !important;
}

.product-miniature .product-description {
    background: #101420 !important;
    border-top: 1px solid #2a3142 !important;
}


/* Redes sociales */
.block-social ul li,
.block-social ul li:hover {
    background-color: #151a28 !important;
    border: 1px solid #2a3142 !important;
    border-radius: 6px !important;
}

.block-social ul li:hover {
    background-color: #101420 !important;
    border-color: #b6ff3c !important;
}

/* ===== VIN Store v6c — Patro/Beer crop ===== */

/* ===== VIN Store — fondo oscuro para imágenes de producto ===== */

/* Listados / tarjetas */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-top,
.product-miniature .product-thumbnail {
    background: #090b12 !important;
}

/* Ficha de producto */
#product .images-container,
#product .product-cover,
#product .product-images,
#product .product-images > li,
#product .thumb-container {
    background: #090b12 !important;
}

/* Imagen */
.product-miniature .product-thumbnail img,
#product .product-cover img,
#product .product-images img {
    background: #090b12 !important;
}