/* ============================================
   QUINCATOUS.COM — Estilo inspirado en Labour Theme
   OpenCart 4.x — Tema por defecto
   Paleta: oscuro industrial + naranja + blanco
   ============================================
   INSTALACIÓN:
   1. Sube este archivo a:
      catalog/view/theme/default/stylesheet/custom.css
   2. Edita catalog/view/theme/default/template/common/header.twig
      y añade ANTES de </head>:
      <link rel="stylesheet" href="{{ 'stylesheet/custom.css' | catalog }}">
   ============================================ */

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

/* ============================================
   VARIABLES — paleta Labour
   ============================================ */
:root {
  --dark:        #1a1a1a;
  --dark-2:      #242424;
  --dark-3:      #2e2e2e;
  --dark-4:      #3a3a3a;
  --orange:      #f97316;
  --orange-dk:   #ea6c0a;
  --orange-lt:   #ffedd5;
  --white:       #ffffff;
  --off-white:   #f5f5f5;
  --muted:       #9ca3af;
  --border-dark: #383838;
  --border-lt:   #e5e7eb;
  --radius:      6px;
  --radius-lg:   10px;
  --transition:  0.18s ease;
}

/* ============================================
   BASE
   ============================================ */
body {
  font-family: 'Barlow', sans-serif !important;
  background: #f2f2f2 !important;
  color: #1a1a1a !important;
  font-size: 15px;
  line-height: 1.6;
}

a {
  color: var(--orange) !important;
  text-decoration: none !important;
  transition: color var(--transition), opacity var(--transition);
}
a:hover { color: var(--orange-dk) !important; opacity: 0.9; }

h1, h2, h3, h4, h5 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ============================================
   TOPBAR
   ============================================ */
#top {
  background: var(--dark) !important;
  border-bottom: 1px solid var(--border-dark) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  padding: 7px 0 !important;
}
#top a {
  color: var(--muted) !important;
  font-size: 15px !important;
}
#top a:hover { color: var(--orange) !important; }

/* ============================================
   HEADER
   ============================================ */
#header {
  background: var(--dark-2) !important;
  border-bottom: 2px solid var(--orange) !important;
  padding: 16px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

#logo img {
  max-height: 75px !important;
  width: 100%;
  transform: translateY(5px) !important;
  box-shadow: 5px 5px 5px 5px rgba(249,115,22,0.15) !important;
  border-color: var(--orange) !important;
  border: 2px solid var(--orange) !important;
  padding: 2px 0 !important;
}

/* Buscador */
#search {
  border: 1.5px solid var(--border-dark) !important;
  border-radius: var(--radius) !important;
  background: var(--dark-3) !important;
  overflow: hidden;
  transition: border-color var(--transition);
  transform: translateY(5px) !important;
}
#search:focus-within {
  border-color: var(--orange) !important;
  transform: translateY(5px) !important;
}
#search input {
  background: transparent !important;
  border: none !important;
  color: var(--white) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
}
#search input::placeholder { color: var(--muted) !important; }
#search button {
  background: var(--orange) !important;
  border: none !important;
  color: var(--white) !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  transition: background var(--transition);
}
#search button:hover { background: var(--orange-dk) !important; }

/* Carrito */
#cart > button {
  background: var(--orange) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--white) !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--transition), transform var(--transition);

}
#cart > button:hover {
  background: var(--orange-dk) !important;
  transform: translateY(-1px);
}

/* ============================================
   NAVBAR
   ============================================ */
nav#menu {
  background: var(--orange-dk) !important;
  border-bottom: none !important;
}

nav#menu .navbar-nav > li > a {
  color: var(--off-white) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em;
  transition: background var(--transition), color var(--transition);
  border-right: 15px solid var(--orange-dk);
  padding: 3px 3px 3px 3px !important;
}
nav#menu .navbar-nav > li > a:hover,
nav#menu .navbar-nav > li.active > a {
  background: var(--dark-3) !important;
  color: var(--white) !important;
}

nav#menu .dropdown-menu {
  background: var(--dark-2) !important;
  border: 1px solid var(--border-dark) !important;
  border-top: 2px solid var(--orange) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: 6px 0 !important;
  min-width: 200px !important;
}
nav#menu .dropdown-menu a {
  color: var(--off-white) !important;
  font-size: 13px !important;
  padding: 9px 18px !important;
  border-bottom: 1px solid var(--border-dark) !important;
  display: block;
}
nav#menu .dropdown-menu a:hover {
  background: var(--dark-4) !important;
  color: var(--orange) !important;
  padding-left: 24px !important;
}
nav#menu .dropdown-menu li:last-child a {
  border-bottom: none !important;
}

/* ============================================
   SIDEBAR CATEGORÍAS
   ============================================ */
#column-left {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-lt) !important;
}

#column-left .list-group {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: none !important;
}

#column-left .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--border-lt) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dark) !important;
  background: var(--white) !important;
  transition: background var(--transition), color var(--transition), padding var(--transition);
  border-radius: 0 !important;
}
#column-left .list-group-item:hover {
  background: #fff8f3 !important;
  color: var(--orange) !important;
  padding-left: 22px !important;
}
#column-left .list-group-item.active,
#column-left .list-group-item:focus {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-color: var(--orange) !important;
  font-weight: 700 !important;
}
#column-left .list-group-item:last-child {
  border-bottom: none !important;
}

/* ============================================
   TARJETAS DE PRODUCTO
   ============================================ */
.product-thumb {
  background: var(--white) !important;
  border: 1px solid var(--border-lt) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.product-thumb:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(249,115,22,0.15) !important;
  border-color: var(--orange) !important;
}

/* Banda naranja superior al hover */
.product-thumb::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--orange);
  width: 0;
  transition: width 0.25s ease;
  position: absolute;
  top: 0;
  left: 0;
}
.product-thumb:hover::before { width: 100%; }

.product-thumb .image {
  background: #f9f9f9 !important;
  overflow: hidden;
  border-bottom: 1px solid var(--border-lt);
}
.product-thumb .image img {
  width: 100% !important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  padding: 14px !important;
  transition: transform 0.3s ease;
}
.product-thumb:hover .image img {
  transform: scale(1.06);
}

.product-thumb .description {
  padding: 15px;
  margin-bottom: 5px;
  min-height: 5px;
}
.product-thumb .description h4 {
  font-weight: bold;
  margin-bottom: 20px;
  min-height: 5px;
}

.product-thumb h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-bottom: 2px !important;
  text-align: center;
}
.product-thumb h4 a {
  color: var(--dark) !important;
  transition: color var(--transition);
}
.product-thumb h4 a:hover { color: var(--orange) !important; }

.product-thumb p {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-bottom: 5px !important;
  line-height: 1.5;
}

/* Precio */
.price {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--orange) !important;
  letter-spacing: -0.01em;
  text-align: center;
}
.price-old {
  font-size: 13px !important;
  color: #dc512c;
  text-decoration: line-through !important;
}
.price-tax {
  font-size: 11px !important;
  color: #000000;
  font-weight: 300 !important;
  margin-top: 2px !important;
    display: block;
}

/* Botones de tarjeta */
.product-thumb .button-group {
  border-top: 1px solid var(--border-lt) !important;
  background: #fafafa !important;
  display: none !important;
  gap: 4px !important;
  padding: 8px 10px !important;
}
.product-thumb .button-group button {
  flex: 1;
  border: 1px solid var(--border-lt) !important;
  border-radius: var(--radius) !important;
  background: var(--white) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  padding: 50px !important;
  font-family: 'Barlow', sans-serif !important;
  transition: all var(--transition);
}
/* Botón principal "Añadir al carrito" */
.product-thumb .button-group button:first-child {
  background: var(--dark) !important;
  color: var(--white) !important;
  border-color: var(--dark) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}
.product-thumb .button-group button:hover {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-color: var(--orange) !important;
}

/* ============================================
   TÍTULOS DE SECCIÓN
   ============================================ */
h3.title,
.module-title,
h2.module-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  color: var(--dark) !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 3px solid var(--orange) !important;
  display: inline-block !important;
}

/* ============================================
   BOTONES GENERALES
   ============================================ */
.btn-primary {
  background: var(--orange) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  padding: 10px 24px !important;
  color: var(--white) !important;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover {
  background: var(--orange-dk) !important;
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97) !important; }

.btn-default {
  background: var(--white) !important;
  border: 1.5px solid var(--dark-4) !important;
  border-radius: var(--radius) !important;
  color: var(--dark) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 20px !important;
  transition: all var(--transition);
}
.btn-default:hover {
  background: var(--dark) !important;
  color: var(--white) !important;
  border-color: var(--dark) !important;
}

.btn-danger {
  background: #dc2626 !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

/* ============================================
   FORMULARIOS
   ============================================ */
.form-control {
  border: 1.5px solid var(--border-lt) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  color: var(--dark) !important;
  background: var(--white) !important;
  transition: border-color var(--transition);
}
.form-control:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12) !important;
  outline: none !important;
}

/* ============================================
   TABLA CARRITO
   ============================================ */
.table > thead > tr > th {
  background: var(--dark) !important;
  color: var(--white) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  padding: 12px 16px !important;
  border-color: var(--border-dark) !important;
}
.table > tbody > tr > td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-color: var(--border-lt) !important;
  vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fafafa !important;
}

/* ============================================
   BADGES / ETIQUETAS
   ============================================ */
.label-sale,
.badge-sale {
  background: var(--orange) !important;
  color: var(--white) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.pagination > li > a,
.pagination > li > span {
  color: var(--dark) !important;
  border: 1px solid var(--border-lt) !important;
  transition: all var(--transition);
  font-family: 'Barlow', sans-serif !important;
  font-weight: 500;
}
.pagination > li > a:hover {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-color: var(--orange) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: var(--white) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  background: transparent !important;
  padding: 10px 0 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.breadcrumb > li + li::before {
  color: var(--muted) !important;
  content: "›" !important;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--dark) !important;
  color: var(--muted) !important;
  padding: 48px 0 20px !important;
  margin-top: 48px !important;
  border-top: 3px solid var(--orange) !important;
}

footer h5,
footer .module-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  color: var(--white) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border-dark) !important;
}
footer a {
  color: var(--muted) !important;
  font-size: 13px !important;
  transition: color var(--transition), padding var(--transition);
  display: block;
  padding: 3px 0;
}
footer a:hover {
  color: var(--orange) !important;
  padding-left: 6px !important;
}

.footer-bottom,
footer .copyright {
  border-top: 1px solid var(--border-dark) !important;
  padding-top: 16px !important;
  margin-top: 32px !important;
  font-size: 12px !important;
  color: #555 !important;
  text-align: center;
}
.social-footer {
  background-color: #333; /* Color de fondo */
  padding: 20px;
  text-align: center;
}

.social-footer-icons {
  display: flex;
  justify-content: center; /* Centrar iconos */
  gap: 15px; /* Espacio entre iconos */
}

.social-footer-icons a {
  color: white; /* Color de iconos */
  font-size: 24px;
  text-decoration: none;
}


/* ============================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================ */
#product .price {
  font-size: 28px !important;
}

#product .btn-primary {
  padding: 13px 32px !important;
  font-size: 14px !important;
}