:root{
  --sy-red:#FF2802;
  --sy-dark:#21201F;
  --sy-card:#ffffff;
  --sy-border:rgba(33,32,31,.12);
  --sy-muted:rgba(33,32,31,.70);
  --sy-bg:rgba(33,32,31,.03);
}

.sy-auctions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.sy-card{border:1px solid var(--sy-border);border-radius:18px;overflow:hidden;background:var(--sy-card);box-shadow:0 10px 30px rgba(0,0,0,.05)}
.sy-card-thumb img{width:100%;height:170px;object-fit:cover;display:block}
.sy-card-body{padding:14px}
.sy-card-title{margin:0 0 6px;font-size:16px;line-height:1.25;color:var(--sy-dark)}
.sy-card-title a{text-decoration:none;color:inherit}
.sy-card-meta{color:var(--sy-muted);font-size:12px;margin-bottom:8px}
.sy-card-price{font-weight:800;margin-bottom:10px;color:var(--sy-dark)}
.sy-card-kpis{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--sy-muted);margin-bottom:12px}

.sy-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid var(--sy-red);background:var(--sy-red);color:#fff;text-decoration:none;font-weight:900;letter-spacing:.2px}
.sy-btn:hover{filter:brightness(.98)}
.sy-btn:active{transform:translateY(1px)}
.sy-btn-outline{background:transparent;color:var(--sy-red)}

.sy-empty{padding:14px;border:1px dashed rgba(33,32,31,.25);border-radius:14px;color:var(--sy-muted);background:rgba(255,40,2,.03)}
.sy-gate{padding:18px;border-radius:18px;border:1px solid var(--sy-border);background:var(--sy-bg)}
.sy-gate h3{margin:0 0 6px;color:var(--sy-dark)}
.sy-memberships-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* SINGLE */
.sy-single{margin:18px 0}
.sy-headline{margin:10px 0 18px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,40,2,.22);background:linear-gradient(90deg, rgba(255,40,2,.08), rgba(33,32,31,.02));color:var(--sy-dark)}
.sy-headline-line{color:var(--sy-dark);font-weight:700}
.sy-headline-line strong{color:var(--sy-red)}
.sy-single-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;align-items:start}

/* Slider */
.sy-slider{position:relative;border-radius:20px;border:1px solid var(--sy-border);background:var(--sy-card);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.sy-slides{position:relative}
.sy-slide{display:none}
.sy-slide.is-active{display:block}
.sy-slide img{width:100%;height:520px;object-fit:cover;display:block}
.sy-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(33,32,31,.12);background:rgba(255,255,255,.88);color:var(--sy-dark);font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sy-arrow:hover{background:#fff}
.sy-prev{left:12px}
.sy-next{right:12px}
.sy-thumbs{display:flex;gap:10px;padding:12px;border-top:1px solid var(--sy-border);background:rgba(33,32,31,.02);overflow:auto}
.sy-thumb{border:2px solid transparent;border-radius:14px;padding:0;cursor:pointer;background:transparent;flex:0 0 auto}
.sy-thumb.is-active{border-color:var(--sy-red)}
.sy-thumb img{width:92px;height:72px;object-fit:cover;border-radius:12px;display:block}

/* Side panel */
.sy-panel{border:1px solid var(--sy-border);border-radius:20px;padding:14px;background:var(--sy-card);box-shadow:0 10px 30px rgba(0,0,0,.05)}
.sy-kpis{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--sy-muted);margin-bottom:12px}
.sy-kpis strong{color:var(--sy-dark)}
.sy-kpi-big{display:flex;gap:10px;align-items:baseline;padding:12px;border-radius:16px;background:rgba(255,40,2,.06);border:1px solid rgba(255,40,2,.18);margin-bottom:12px}
.sy-kpi-big strong{font-size:22px;color:var(--sy-dark)}
.sy-kpi-big span{color:var(--sy-muted);font-weight:700}
.sy-price-row,.sy-date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.sy-price-row div,.sy-date-row div{padding:10px 12px;border-radius:16px;border:1px solid var(--sy-border);background:rgba(33,32,31,.02)}
.sy-price-row span,.sy-date-row span{display:block;font-size:12px;color:var(--sy-muted);font-weight:800}
.sy-price-row strong,.sy-date-row strong{display:block;font-size:13px;color:var(--sy-dark);margin-top:2px}
.sy-badge{display:inline-flex;padding:8px 12px;border-radius:999px;font-weight:900;font-size:12px;margin:6px 0 12px}
.sy-badge-on{background:rgba(33,32,31,.08);color:var(--sy-dark)}
.sy-badge-off{background:rgba(33,32,31,.04);color:rgba(33,32,31,.65)}

/* Bidding */
.sy-bid-box{margin-top:6px}
.sy-bid-box h3{margin:0 0 10px;color:var(--sy-dark)}
.sy-bid-inline{display:flex;gap:10px;align-items:center}
.sy-bid-amount{padding:12px 12px;border-radius:14px;border:1px solid var(--sy-border);min-width:200px;background:#fff}
.sy-bid-msg{font-size:13px;color:var(--sy-muted);margin-top:10px}

/* Tabs */
.sy-tabs{margin-top:20px}
.sy-tabs-nav{display:flex;gap:0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,40,2,.35);background:rgba(255,40,2,.08)}
.sy-tab{flex:1;padding:14px 14px;border:0;background:transparent;color:var(--sy-dark);font-weight:900;text-transform:uppercase;letter-spacing:.6px;cursor:pointer}
.sy-tab.is-active{background:var(--sy-red);color:#fff}
.sy-tab-panel{display:none;margin-top:14px}
.sy-tab-panel.is-active{display:block}
.sy-history,.sy-contact{border:1px solid var(--sy-border);border-radius:18px;padding:14px;background:var(--sy-card);box-shadow:0 10px 30px rgba(0,0,0,.04)}
.sy-history h3,.sy-contact h3{margin:0 0 10px;color:var(--sy-dark)}
.sy-table{width:100%;border-collapse:collapse}
.sy-table th,.sy-table td{padding:12px 10px;border-top:1px solid var(--sy-border);text-align:left;font-size:13px}
.sy-table thead th{border-top:0;color:var(--sy-muted);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.sy-table-specs th{width:32%;background:rgba(33,32,31,.04);font-weight:900;color:var(--sy-dark)}
.sy-specs{margin-top:20px}
.sy-specs h3{margin:0 0 10px;color:var(--sy-dark)}

@media (max-width: 980px){
  .sy-single-grid{grid-template-columns:1fr}
  .sy-slide img{height:420px}
}
@media (max-width: 520px){
  .sy-slide img{height:320px}
  .sy-price-row,.sy-date-row{grid-template-columns:1fr}
  .sy-bid-inline{flex-direction:column;align-items:stretch}
  .sy-bid-amount{min-width:unset;width:100%}
}

/* Breakout (escapa del container del tema) pero con ancho máximo para buen UX */
.sy-template-wrap{
  width: 100vw;
  max-width: none;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.sy-template-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 22px;
}

/* Grid + media balance */
.sy-single-grid{gap:24px;grid-template-columns:1.35fr .65fr}
.sy-slide img{height:580px}

/* Historial: forzar estilos (el tema estaba pisando el header) */
.sy-history .sy-table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--sy-border);
  background:#fff;
}
.sy-history .sy-table thead th{
  background: var(--sy-dark) !important;
  color:#fff !important;
  font-weight:900 !important;
}
.sy-history .sy-table thead th:first-child{border-top-left-radius:18px}
.sy-history .sy-table thead th:last-child{border-top-right-radius:18px}
.sy-history .sy-table th,
.sy-history .sy-table td{
  padding:14px 12px !important;
  border-top:1px solid var(--sy-border) !important;
  color: var(--sy-dark) !important;
  background:transparent !important;
}
.sy-history .sy-table tbody tr:nth-child(odd) td{
  background: rgba(33,32,31,.02) !important;
}
.sy-history .sy-table td:last-child{white-space:nowrap}

/* Tabs respiran mejor */
.sy-tabs-nav{margin-top:4px}

@media (max-width: 980px){
  .sy-template-inner{padding:22px 16px}
  .sy-single-grid{grid-template-columns:1fr}
  .sy-slide img{height:420px}
}
@media (max-width: 520px){
  .sy-slide img{height:320px}
}


/* Filters UI */
.sy-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
  padding: 14px;
  background: var(--sy-bg, #f7f7f7);
  border: 1px solid var(--sy-border, #ddd);
  border-radius: 18px;
}
.sy-filters input[type="text"],
.sy-filters input[type="number"] {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--sy-border, #ccc);
  background: #fff;
  flex: 1 1 160px;
}
.sy-filters button {
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--sy-red, #FF2802);
  color: #fff;
  font-weight: 900;
  border: 0;
  cursor: pointer;
}
.sy-filters button:hover {
  filter: brightness(0.95);
}

.sy-auctions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.sy-card {
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.sy-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.sy-card-body {
  padding: 14px;
}
.sy-card-title {
  margin: 0 0 8px;
  font-size: 1.2em;
}
.sy-btn,
.sy-btn-outline {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.sy-btn {
  background: #FF2802;
  color: #fff;
}
.sy-btn-outline {
  border: 2px solid #FF2802;
  color: #FF2802;
  background: transparent;
}

.sy-btn.sy-btn-buy{
  background:#000;
  color:#fff;
  border:2px solid #000;
}
.sy-btn.sy-btn-buy:hover{
  opacity:.9;
  color:#fff;
}



.sy-filters{
  border:1px solid #eee;
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
  background:#fff;
}
.sy-filters-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.sy-filter-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
.sy-filter-item label{
  display:block;
  font-size:13px;
  opacity:.8;
  margin-bottom:6px;
}
.sy-filter-item input,
.sy-filter-item select{
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:10px;
}
.sy-filter-actions{ margin-top:12px; }
.sy-filter-status{ margin-top:10px; font-size:13px; opacity:.8; }


.sy-price-inputs input{ width:100%; }

.sy-auctions-more-wrap{ margin-top:16px; text-align:center; }


/* ===== Precio: UNA sola barra (2 ranges superpuestos) ===== */
.sy-price-sliders{
  position: relative;
  height: 28px;
  margin: 10px 0 12px;
}

/* track base */
.sy-price-sliders::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  height:6px;
  background:#d8d8d8;
  border-radius:999px;
}

/* fill (rojo) usando variables CSS */
.sy-price-sliders::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:6px;
  background: var(--sy-red, #FF2802);
  border-radius:999px;
  left: var(--sy-left, 0%);
  right: var(--sy-right, 0%);
}

/* superponer los 2 sliders */
.sy-price-sliders input[type="range"]{
  position:absolute;
  left:0; right:0;
  top:0; bottom:0;
  width:100%;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  pointer-events:none;
}

/* solo el thumb es “clickeable” */
.sy-price-sliders input[type="range"]::-webkit-slider-thumb{ pointer-events:auto; }
.sy-price-sliders input[type="range"]::-moz-range-thumb{ pointer-events:auto; }

/* track transparente (para que NO se vean 2 barras) */
.sy-price-sliders input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  background:transparent;
}
.sy-price-sliders input[type="range"]::-moz-range-track{
  height:6px;
  background:transparent;
}

/* thumb */
.sy-price-sliders input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#111;
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  margin-top:-6px;
}
.sy-price-sliders input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#111;
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* Precio inputs: min/max en una fila */
.sy-price-inputs{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:10px !important;
  width:100% !important;
}

.sy-price-inputs input{
  width:100% !important;
  min-width:0 !important;
  flex:none !important;
}




.sy-auctions-wrap .page-numbers,
.sy-auctions-wrap nav.pagination,
.sy-auctions-wrap .woocommerce-pagination{
  display:none !important;
}


.sy-auctions-grid--3x2{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
}

@media (max-width: 980px){
  .sy-auctions-grid--3x2{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px){
  .sy-auctions-grid--3x2{ grid-template-columns:repeat(1, minmax(0, 1fr)) !important; }
}

/* Evita que el filtro se comporte como flex-wrap (rompe layout) */
.sy-filters{
  display:block !important;
}


/* Blindaje: que el track nativo nunca se vea */
.sy-price-sliders input[type="range"]::-webkit-slider-runnable-track{ background:transparent !important; }
.sy-price-sliders input[type="range"]::-moz-range-track{ background:transparent !important; }



/* Kill Chrome native fill (azul) definitivamente */
.sy-price-sliders input[type="range"]{
  accent-color: transparent !important;
}

.sy-price-sliders input[type="range"]::-webkit-slider-runnable-track{
  background: transparent !important;
}

.sy-price-sliders input[type="range"]::-webkit-slider-thumb{
  background:#111 !important;
}

.sy-price-sliders input[type="range"]::-moz-range-progress{
  background: transparent !important;
}

/* Layout sidebar como competidor */
.sy-auctions-wrap{
  display:flex !important;
  gap:24px !important;
  align-items:flex-start !important;
}

.sy-filters{
  width:320px !important;
  flex:0 0 320px !important;
  margin:0 !important;
  position:sticky;
  top:110px; /* ajusta si tu header es alto */
}

.sy-auctions-list{
  flex:1 1 auto !important;
  min-width:0 !important;
}

/* Responsive */
@media (max-width: 980px){
  .sy-auctions-wrap{ flex-direction:column !important; }
  .sy-filters{ width:100% !important; flex:1 1 auto !important; position:static !important; }
}


/* Compactar filtro */
.sy-filter-grid{
  grid-template-columns:1fr !important; /* una columna en sidebar */
}

.sy-filter-actions{
  margin-top:10px !important;
}

.sy-filter-item input,
.sy-filter-item select{
  padding:10px 12px !important;
  border-radius:12px !important;
}

.sy-price-inputs{
  margin-top:8px;
}

.sy-filter-block{
  margin-bottom:10px;
}


/* 🔥 Garantiza que la flecha izquierda exista y sea visible */
.sy-slider .sy-prev {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 12px;
}

/* Si tu slider la está ocultando por estado inicial */
.sy-slider[data-index="0"] .sy-prev {
  opacity: 1 !important;
  pointer-events: auto !important;
}



/* Toast (alerta) */
.sy-toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(17,17,17,.92);
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999999;
  max-width: min(640px, calc(100vw - 24px));
  text-align: center;
}
.sy-toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Highlight nuevo row en historial */
.sy-history-new td{
  background: rgba(255,40,2,.08) !important;
}

/* ===== SY Slider Arrows (visible + con icono) ===== */
.sy-slider{ position:relative; }

.sy-slider .sy-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:50;
  padding:0;
}

/* Icono “chevron” */
.sy-slider .sy-arrow::before{
  content:"";
  width:10px;
  height:10px;
  border-right:3px solid #111;
  border-bottom:3px solid #111;
  transform:rotate(-45deg); /* por defecto: next */
}

/* Prev = chevron hacia la izquierda */
.sy-slider .sy-prev{ left:12px; }
.sy-slider .sy-prev::before{ transform:rotate(135deg); }

/* Next = chevron hacia la derecha */
.sy-slider .sy-next{ right:12px; }

/* Estado deshabilitado (si lo aplicas en JS) */
.sy-slider .sy-arrow.is-disabled{
  opacity:.35;
  pointer-events:none;
}

/* ✅ Slider arrows: que SOLO exista 1 flecha (el chevron de ::before) */
.sy-slider button.sy-arrow{
  font-size: 0 !important;        /* elimina el #text (>> / <<) */
  line-height: 0 !important;
  color: transparent !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* Por si el tema mete otra flecha con ::after */
.sy-slider button.sy-arrow::after{
  content: none !important;
}

/* Mantén solo nuestro chevron */
.sy-slider button.sy-arrow::before{
  content:"" !important;
  width:10px;
  height:10px;
  border-right:3px solid #111;
  border-bottom:3px solid #111;
  transform: rotate(-45deg); /* next */
}

.sy-slider button.sy-prev::before{ transform: rotate(135deg); } /* prev */