/*
  SFL Product Card — Boutique → Price → Sale (theme-colored, compact buttons)
  Changes:
  - Smaller button font, tighter padding, nowrap to avoid breaking onto 2 lines.
  - "View Details" base style = previous hover style; new hover = filled accent.
  - Polished spacing/typography; no shadows.
*/

/* Theme color bindings (XStore / Elementor tokens with fallbacks) */
:root{
  --sfl-accent: var(--et_active-color, var(--e-global-color-accent, #c7a86d));
  --sfl-text:   var(--et_text-color,   var(--e-global-color-primary, #1a1a1a));
  --sfl-muted:  var(--et_light-color,  var(--e-global-color-text, #8a8a8a));
  --sfl-border: var(--et_border-color, #e7e7e7);
  --sfl-bg:     #fff;
  --sfl-bg-alt: #fafafa;

  --sfl-radius-card: 16px;
  --sfl-radius-btn:  10px;
  --sfl-anim-speed:  260ms;
  --sfl-curve:       cubic-bezier(.3,.1,.2,1);
}

/* Card */
.sfl-ht__card.sfl-ht--lux{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column;
  background:var(--sfl-bg);
  border:1px solid var(--sfl-border);
  border-radius:var(--sfl-radius-card);
  height:100%; overflow:hidden; box-shadow:none;
  transition:transform var(--sfl-anim-speed) var(--sfl-curve);
}
.sfl-ht__card.sfl-ht--lux:hover{ transform:translateY(-6px); }

/* Visuals */
.sfl-ht__visual-pane{ position:relative; aspect-ratio:1/1.15; overflow:hidden; }
.sfl-ht__main-image{ display:block; width:100%; height:100%; }
.sfl-ht__main-image img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--sfl-curve); }
.sfl-ht__card:hover .sfl-ht__main-image img{ transform:scale(1.045); }

.sfl-ht__badges-top-left,
.sfl-ht__discount-wrap{ position:absolute; z-index:3; }
.sfl-ht__badges-top-left{ top:.85rem; left:.85rem; }

/* Badges */
.sfl-ht__badge{
  padding:5px 12px; border-radius:6px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.sfl-ht__badge--cond{ background:var(--sfl-text); color:#fff; }
.sfl-ht__discount-wrap{ top:.7rem; right:.7rem; pointer-events:none; }
.rtl .sfl-ht__discount-wrap{ left:.7rem; right:auto; }
.sfl-ht__badge--discount{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:60px; height:28px; padding:0 10px; border-radius:999px;
  background:var(--sfl-accent); color:#fff; font-size:12.5px; font-weight:800;
  border:1px solid color-mix(in oklab, var(--sfl-accent) 75%, #0000);
}

/* Thumbs */
.sfl-ht__thumbs-wrap{ padding:12px 0; border-bottom:1px solid var(--sfl-border); background:var(--sfl-bg); position:relative; }
.sfl-ht__thumbs-wrap::before,.sfl-ht__thumbs-wrap::after{ content:''; position:absolute; top:0; bottom:0; width:32px; z-index:2; pointer-events:none; }
.sfl-ht__thumbs-wrap::before{ left:0;  background:linear-gradient(to right,var(--sfl-bg),transparent); }
.sfl-ht__thumbs-wrap::after{  right:0; background:linear-gradient(to left ,var(--sfl-bg),transparent); }
.sfl-ht__thumbs{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 1rem; scrollbar-width:none; }
.sfl-ht__thumbs::-webkit-scrollbar{ display:none; }
.sfl-ht__thumb{
  width:58px; height:58px; flex-shrink:0; border-radius:10px;
  border:2px solid transparent; background-size:cover; background-position:center;
  cursor:pointer; scroll-snap-align:start; transition:all var(--sfl-anim-speed) ease; opacity:.78;
}
.sfl-ht__thumb:hover{ opacity:1; }
.sfl-ht__thumb.is-active{ border-color:var(--sfl-accent); opacity:1; }

/* Details */
.sfl-ht__details-pane{ display:flex; flex-direction:column; flex-grow:1; padding:1.1rem 1.1rem 1.35rem; }
.sfl-ht__content-wrap{ display:flex; flex-direction:column; gap:.35rem; flex-grow:1; }

.sfl-ht__brand-name{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--sfl-muted); margin-bottom:.1rem; text-align:left;
}

.sfl-ht__title{ font-size:15.5px; font-weight:650; line-height:1.45; margin:0; text-align:left; }
.sfl-ht__title a{ color:var(--sfl-text); text-decoration:none; transition:color var(--sfl-anim-speed) ease; }
.sfl-ht__title a:hover{ color:var(--sfl-accent); }

/* Prices (vertical, stable) */
.sfl-ht__price{ margin-top:auto; padding-top:.7rem; }
.sfl-ht__price--grid{ display:grid; grid-template-columns:1fr auto; row-gap:6px; align-items:baseline; }
.sfl-price{ display:contents; }
.sfl-price__label{ font-size:10.5px; color:var(--sfl-muted); font-weight:600; }
.sfl-price__value{ justify-self:end; font-weight:650; }

/* Theme colors */
.sfl-price--boutique .sfl-price__value{ color:var(--sfl-muted); }
.sfl-price--reg      .sfl-price__value{ color:var(--sfl-text); }
.sfl-price--sale     .sfl-price__value{ color:var(--sfl-accent); font-size:19px; font-weight:800; }

/* Old values: always strike-through for Boutique & Price */
.sfl-price.is-old .sfl-price__value{ text-decoration:line-through; opacity:.85; }

/* Actions (compact, nowrap) */
.sfl-ht__actions-wrap{ display:flex; gap:.5rem; margin-top:1rem; }
.sfl-btn{
  display:inline-grid; place-items:center;
  height:42px; border-radius:var(--sfl-radius-btn);
  text-decoration:none; border:1px solid var(--sfl-border);
  background:var(--sfl-bg); color:var(--sfl-text);
  padding:0 12px; font-size:13px; font-weight:600;
  line-height:1; white-space:nowrap; /* keep on one line */
  transition:all var(--sfl-anim-speed) var(--sfl-curve);
}
.sfl-btn--primary{
  flex-grow:1;
  background:var(--sfl-text); color:#fff; border-color:var(--sfl-text);
}
.sfl-btn--primary:hover{ background:color-mix(in oklab,var(--sfl-text) 78%, #fff); }

/* View Details: base = previous hover style; new hover = filled accent */
.sfl-btn--details{
  min-width:112px;
  background:var(--sfl-bg-alt);
  color:var(--sfl-accent);
  border-color:var(--sfl-accent);
  font-weight:700;
}
.sfl-btn--details:hover{
  background:var(--sfl-accent);
  color:#fff;
  border-color:var(--sfl-accent);
}

/* Small */
@media (max-width:480px){
  .sfl-ht__badge--discount{ min-width:56px; height:26px; font-size:12px; padding:0 9px; }
  .sfl-btn{ height:40px; font-size:12.5px; padding:0 10px; }
  .sfl-btn--details{ min-width:100px; }
}