/* Shop Filter Grid — estilos base. Colores/tipografías se sobrescriben desde Elementor. */

.sfg-filter,
.sfg-grid-wrap{
  --sfg-accent:#ee5b8d;
  --sfg-line:#e5e0e2;
  box-sizing:border-box;
}
.sfg-filter *,.sfg-grid-wrap *{box-sizing:border-box;}
.sfg-filter [hidden],.sfg-grid-wrap [hidden]{display:none!important;}

/* ================= FILTRO ================= */
.sfg-filter{
  --sfg-line:#f0b6cb;
  --sfg-line:color-mix(in srgb,var(--sfg-accent) 40%,#fff);
  --sfg-track:#f5c6d6;
  --sfg-track:color-mix(in srgb,var(--sfg-accent) 35%,#fff);
  --sfg-fill:var(--sfg-accent);
  --sfg-bar:8px;
  --sfg-thumb:22px;
  color:var(--sfg-accent);font-size:14px;
}
.sfg-filter{
  display:grid;grid-template-columns:repeat(var(--sfg-fcols,1),minmax(0,1fr));
  column-gap:var(--sfg-fgap-col,40px);row-gap:var(--sfg-fgap-row,30px);align-items:start;
}
.sfg-f-col{display:flex;flex-direction:column;gap:var(--sfg-fgap-row,30px);min-width:0;}
.sfg-f-col:empty{display:none;}
.sfg-f-section{min-width:0;}
/* el widget siempre ocupa todo el ancho de su contenedor (también dentro del drawer) */
.elementor-widget-sfg_filter,.elementor-widget-sfg_grid{
  --container-widget-width:100%;--container-widget-flex-grow:1;
  width:100%!important;max-width:100%!important;flex-grow:1;align-self:stretch;
}
.elementor-widget-sfg_filter > .elementor-widget-container,.elementor-widget-sfg_grid > .elementor-widget-container{width:100%;max-width:100%;}
.sfg-filter{width:100%;box-sizing:border-box;}
@media (max-width:1024px){.sfg-filter{--sfg-fcols:2;}}
@media (max-width:767px){.sfg-filter{--sfg-fcols:1;}}
.sfg-f-title{margin:0 0 10px!important;font-size:16px;font-weight:600;line-height:1.3;color:var(--sfg-accent);}
.sfg-note{font-size:12px;opacity:.7;margin:12px 0 0;}

/* botón Limpiar (pastilla) */
.sfg-filter .sfg-clear{
  display:inline-flex;align-items:center;justify-content:center;margin:16px 0 0;
  padding:10px 28px;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;
  color:#fff;background-color:var(--sfg-accent);border:1px solid var(--sfg-accent);
  border-radius:999px;box-shadow:none;text-decoration:none;transition:opacity .2s;
}
.sfg-filter .sfg-clear:hover{opacity:.85;color:#fff;background-color:var(--sfg-accent);}

/* búsqueda */
.sfg-search{position:relative;margin:0;}
.sfg-filter .sfg-search-input{
  display:block;width:100%;height:46px;margin:0;padding:0 50px 0 16px;
  font-size:14px;color:var(--sfg-accent);background:#fff;
  border:2px solid var(--sfg-search-border,var(--sfg-accent))!important;border-radius:12px;
  box-shadow:none;outline:none;appearance:none;-webkit-appearance:none;
  transition:box-shadow .2s,border-color .2s;
}
.sfg-filter .sfg-search-input:focus{border-color:var(--sfg-search-focus,var(--sfg-search-border,var(--sfg-accent)))!important;}
.sfg-filter .sfg-search-input::placeholder{color:var(--sfg-accent);opacity:.75;}
.sfg-filter .sfg-search-input::-webkit-search-cancel-button,
.sfg-filter .sfg-search-input::-webkit-search-decoration{-webkit-appearance:none;display:none;}
.sfg-filter .sfg-search-input:focus{box-shadow:0 0 0 3px rgba(238,91,141,.18);}
.sfg-filter .sfg-search-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;
  color:var(--sfg-accent);background:none!important;border:0!important;box-shadow:none!important;cursor:pointer;
}

/* categorías */
.sfg-cat-list,.sfg-children,.sfg-sort{list-style:none;margin:0;padding:0;}
.sfg-children{padding-left:26px;margin-top:2px;}
.sfg-cat-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sfg-check,.sfg-radio{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:7px 0;cursor:pointer;margin:0;}
.sfg-check input,.sfg-radio input{
  appearance:none;-webkit-appearance:none;flex:none;margin:0;padding:0;
  width:20px;height:20px;border:1.5px solid var(--sfg-line);background:#fff;
  display:grid;place-content:center;cursor:pointer;box-shadow:none;outline:none;
  transition:background .2s,border-color .2s;
}
.sfg-check input{border-radius:5px;}
.sfg-radio input{border-radius:50%;}
.sfg-check input::after{
  content:"";width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .15s;
}
.sfg-radio input::after{
  content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s;
}
.sfg-check input:checked,.sfg-radio input:checked{background:var(--sfg-accent);border-color:var(--sfg-accent);}
.sfg-check input:checked::after{transform:rotate(-45deg) scale(1);}
.sfg-radio input:checked::after{transform:scale(1);}
.sfg-check input:focus-visible,.sfg-radio input:focus-visible{outline:2px solid var(--sfg-accent);outline-offset:2px;}
.sfg-check-label{flex:1;min-width:0;font-size:14px;color:var(--sfg-accent);transition:opacity .2s;}
.sfg-check:hover .sfg-check-label,.sfg-radio:hover .sfg-check-label{opacity:.8;}
.sfg-count-n{font-size:14px;color:var(--sfg-accent);}
.sfg-count-n::before{content:"(";}
.sfg-count-n::after{content:")";}
.sfg-cat-row .sfg-check{gap:12px;}
.sfg-cat-row .sfg-check-label{flex:0 1 auto;}
.sfg-cat-row .sfg-check{flex:0 1 auto;}
.sfg-cat-row .sfg-toggle{margin-left:auto;}
.sfg-filter .sfg-toggle{
  flex:none;width:30px;height:30px;margin:0;padding:0;border:0!important;background:none!important;box-shadow:none!important;
  cursor:pointer;position:relative;color:var(--sfg-tg,var(--sfg-accent))!important;outline-offset:2px;
}
.sfg-filter .sfg-toggle:hover,.sfg-filter .sfg-toggle:focus,.sfg-filter .sfg-toggle:active,.sfg-filter .sfg-toggle[aria-expanded="true"]{
  background:none!important;box-shadow:none!important;
  color:var(--sfg-tg-h,var(--sfg-tg,var(--sfg-accent)))!important;
}
.sfg-toggle::before{
  content:"";position:absolute;left:50%;top:50%;width:var(--sfg-tg-size,7px);height:var(--sfg-tg-size,7px);
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translate(-50%,-70%) rotate(45deg);transition:transform .25s;
}
.sfg-toggle[aria-expanded="true"]::before{transform:translate(-50%,-30%) rotate(-135deg);}

/* precio */
.sfg-pvalues{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:16px;color:var(--sfg-accent);}
.sfg-range{position:relative;height:var(--sfg-thumb);margin:0;--sfg-lo:0%;--sfg-hi:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;}
.sfg-rail{
  position:absolute;left:calc(var(--sfg-thumb) / 2);right:calc(var(--sfg-thumb) / 2);
  top:50%;height:var(--sfg-bar);margin-top:calc(var(--sfg-bar) / -2);border-radius:999px;background:var(--sfg-track);
}
.sfg-range-fill{position:absolute;top:0;bottom:0;left:var(--sfg-lo);right:calc(100% - var(--sfg-hi));background:var(--sfg-fill);border-radius:999px;}
.sfg-thumb{
  position:absolute;top:50%;width:var(--sfg-thumb);height:var(--sfg-thumb);margin:0;padding:0;
  border-radius:50%;background:var(--sfg-fill);box-shadow:none;border:0;outline:none;cursor:grab;
  transform:translate(-50%,-50%);touch-action:none;
}
.sfg-thumb-min{left:var(--sfg-lo);z-index:1;}
.sfg-thumb-max{left:var(--sfg-hi);z-index:2;}
.sfg-thumb:focus-visible{outline:2px solid var(--sfg-accent);outline-offset:3px;}
.sfg-range.is-dragging .sfg-thumb{cursor:grabbing;}

/* ================= GRID ================= */
.sfg-grid-wrap{
  --sfg-ratio:4 / 5;
  --sfg-zoom:1.06;
  --sfg-dur:600ms;
  position:relative;
}
.sfg-count-line{font-size:13px;opacity:.7;margin-bottom:12px;}
.sfg-count-line:empty{display:none;}

.sfg-grid-items{
  display:grid;column-gap:24px;row-gap:48px;align-items:stretch;
  grid-template-columns:repeat(4,minmax(0,1fr));
  transition:opacity .25s;
}
@media (max-width:1024px){.sfg-grid-items{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:767px){.sfg-grid-items{grid-template-columns:repeat(2,minmax(0,1fr));}}
.sfg-grid-wrap.is-loading .sfg-grid-items{opacity:.35;pointer-events:none;}

.sfg-card{display:flex;flex-direction:column;min-width:0;height:100%;}
.sfg-info{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;}
.sfg-body{flex:1 1 auto;}
.sfg-actions{flex:none;display:flex;justify-content:center;padding-top:14px;--sfg-btn-w:auto;}
.sfg-media-wrap{position:relative;overflow:hidden;aspect-ratio:var(--sfg-ratio);background:#f3eff0;}
.sfg-media{display:block;position:absolute;inset:0;}
.sfg-media .sfg-img{
  display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transition:transform calc(var(--sfg-dur) + 100ms) cubic-bezier(.22,.61,.36,1),opacity var(--sfg-dur) ease;
}
.sfg-media .sfg-img2{opacity:0;}

.sfg-badge{
  position:absolute;top:20px;left:20px;z-index:2;pointer-events:none;
  background:#7d0036;color:#fff;font-size:10px;line-height:1;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:999px;
}

.sfg-title{margin:14px 0 4px;font-size:16px;line-height:1.3;font-weight:500;}
.sfg-title a{color:inherit;text-decoration:none;transition:color .2s;}
.sfg-price{font-size:15px;margin-bottom:0;}
.sfg-price del{opacity:.5;margin-right:6px;}
.sfg-price ins{text-decoration:none;}

/* botón: el relleno es un degradado dentro del propio botón (respeta siempre el border-radius) */
.sfg-card .sfg-btn{
  position:relative;flex:none;
  display:inline-flex!important;align-items:center;justify-content:center;gap:12px;
  width:var(--sfg-btn-w,auto);margin:0;text-align:center;
  padding:10px 22px;font-size:14px;line-height:1.2;text-decoration:none!important;cursor:pointer;
  color:var(--sfg-btn-color,var(--sfg-accent))!important;
  background-color:var(--sfg-btn-bg,transparent)!important;
  background-image:linear-gradient(var(--sfg-btn-fill,var(--sfg-accent)),var(--sfg-btn-fill,var(--sfg-accent)))!important;
  background-repeat:no-repeat!important;background-position:left center!important;
  background-origin:border-box!important;background-clip:border-box!important;
  background-size:0% 100%!important;
  box-shadow:none;border:1px solid var(--sfg-accent);border-radius:50px!important;
  transition:background-size .5s cubic-bezier(.65,0,.35,1),color .3s ease .15s,border-color .35s ease;
}
.sfg-card .sfg-btn:hover,.sfg-card .sfg-btn:focus,.sfg-card .sfg-btn:active{border-radius:50px!important;}
.sfg-card .sfg-btn-text{display:inline-block;}
.sfg-card .sfg-arrow{display:inline-block;font-size:16px;line-height:1;transition:transform .35s ease;}
.sfg-card .sfg-btn.loading{opacity:.7;pointer-events:none;}
.sfg-card .sfg-btn.added{color:var(--sfg-btn-hover,#fff)!important;background-size:100% 100%!important;}
/* sin el check de WooCommerce ni el enlace "Ver carrito" tras añadir */
.sfg-card .sfg-btn.added::after,.sfg-card .sfg-btn.added::before{content:none!important;display:none!important;}
.sfg-card a.added_to_cart,.sfg-card .added_to_cart.wc-forward{display:none!important;}

@media (hover:hover){
  .sfg-card:hover .sfg-media .sfg-img{transform:scale(var(--sfg-zoom));}
  .sfg-card:hover .sfg-media .sfg-img2{opacity:1;}
  .sfg-card .sfg-btn:hover{color:var(--sfg-btn-hover,#fff)!important;border-color:var(--sfg-btn-fill,var(--sfg-accent));}
  .sfg-card .sfg-btn:hover{background-size:100% 100%!important;}
  .sfg-card .sfg-btn:hover .sfg-arrow{transform:translateX(var(--sfg-arrow-move,6px));}
}

.sfg-empty{grid-column:1/-1;text-align:center;padding:48px 16px;}
.sfg-empty p{margin:0 0 12px;}

/* paginación */
.sfg-pagination{margin-top:32px;}
.sfg-pagination ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;}
.sfg-page{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;
  font-size:14px;text-decoration:none;color:inherit;border:1px solid var(--sfg-line);border-radius:999px;
  transition:background .25s,color .25s,border-color .25s;
}
.sfg-page.is-current,a.sfg-page:hover{background:var(--sfg-accent);border-color:var(--sfg-accent);color:#fff;}
.sfg-dots{opacity:.5;padding:0 4px;}

/* cargando */
.sfg-loader{
  position:absolute;left:50%;top:120px;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  border:3px solid var(--sfg-line);border-top-color:var(--sfg-accent);
  opacity:0;pointer-events:none;transition:opacity .2s;animation:sfg-spin .8s linear infinite;
}
.sfg-grid-wrap.is-loading .sfg-loader{opacity:1;}
@keyframes sfg-spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
  .sfg-filter *,.sfg-grid-wrap *,.sfg-grid-wrap *::before{transition:none!important;animation:none!important;}
}