/*
  DEFINITIVE LUXURY FASHION STYLE - FINAL PRODUCTION VERSION (no shadows)
  - Card & badge shadows removed per request.
*/

:root {
  --sfl-accent: #c7a86d;
  --sfl-dark: #181818;
  --sfl-light: #555555;
  --sfl-muted: #999999;
  --sfl-border: #eaeaea;
  --sfl-bg: #ffffff;
  --sfl-bg-alt: #f9f9f9;
  --sfl-radius-card: 16px;
  --sfl-radius-btn: 10px;
  --sfl-anim-speed: 300ms;
  --sfl-anim-curve: cubic-bezier(0.4, 0, 0.2, 1);
  /* No shadows */
  --sfl-shadow: none;
  --sfl-shadow-hover: none;
}

.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-radius: var(--sfl-radius-card);
  border: 1px solid var(--sfl-border);
  box-shadow: none; /* removed */
  transition: transform var(--sfl-anim-speed) var(--sfl-anim-curve), box-shadow var(--sfl-anim-speed) var(--sfl-anim-curve);
  height: 100%;
  overflow: hidden;
}
.sfl-ht__card.sfl-ht--lux:hover {
  transform: translateY(-10px);
  box-shadow: none; /* removed */
}

/* --- Visuals: Image, Badges --- */
.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-anim-curve);
}
.sfl-ht__card:hover .sfl-ht__main-image img { transform: scale(1.05); }

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

/* Top-right placement, with RTL support */
.sfl-ht__discount-wrap {
  top: .75rem;
  right: .75rem;
  pointer-events: none; /* don’t block image clicks */
}
.rtl .sfl-ht__discount-wrap { right: auto; left: .75rem; }

/* Base badge */
.sfl-ht__badge {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Condition badge (gold) */
.sfl-ht__badge--cond {
  background: var(--sfl-accent);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}

/* PREMIUM % OFF BADGE (no shadow) */
.sfl-ht__badge--discount{
  --disc-bg1: #121212;
  --disc-bg2: #262626;
  --disc-gold: #c7a86d;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;                     /* capsule */
  background: linear-gradient(135deg,var(--disc-bg1),var(--disc-bg2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in oklab, var(--disc-gold) 45%, transparent);
  box-shadow: none; /* removed */
  transform: translateZ(0);
  position: relative;
  isolation: isolate;
  pointer-events: auto;
}

/* Soft glossy shine (kept, not a shadow) */
.sfl-ht__badge--discount::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient( to bottom, rgba(255,255,255,.35), rgba(255,255,255,0) 55% );
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
}

/* Subtle lift on card hover (no shadow) */
.sfl-ht__card:hover .sfl-ht__badge--discount{
  transform: translateY(-2px);
  box-shadow: none; /* removed */
}

/* Compact on small screens */
@media (max-width: 480px){
  .sfl-ht__badge--discount{
    min-width: 48px;
    height: 28px;
    font-size: 12px;
    padding: 0 10px;
  }
}

/* --- Image Thumbs Slider --- */
.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: 60px; height: 60px; 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: .7;
}
.sfl-ht__thumb:hover { opacity: 1; }
.sfl-ht__thumb.is-active { border-color: var(--sfl-accent); opacity: 1; }

/* --- Details & Content --- */
.sfl-ht__details-pane {
  display: flex; flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}
.sfl-ht__content-wrap {
  display: flex; flex-direction: column;
  flex-grow: 1;
}
.sfl-ht__brand-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--sfl-muted);
  margin-bottom: 0.75rem; text-align: left;
}

/* Reduced Title Font Size for balance */
.sfl-ht__title {
  font-size: 16px;
  font-weight: 600; line-height: 1.5; margin: 0;
  text-align: left;
}
.sfl-ht__title a {
  color: var(--sfl-dark); text-decoration: none;
  transition: color var(--sfl-anim-speed) ease;
}
.sfl-ht__title a:hover { color: var(--sfl-accent); }

/* Price block */
.sfl-ht__price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; margin-top: auto; padding-top: 1rem;
}
.sfl-price { display: flex; align-items: baseline; gap: 8px; }
.sfl-price__label {
  display: block; font-size: 11px; color: var(--sfl-muted); font-weight: 500;
}
.sfl-price__value { font-weight: 600; }
.sfl-price--reg { font-size: 15px; color: var(--sfl-muted); }
.sfl-price--reg del { text-decoration: line-through; opacity: 0.8; }
.sfl-price--sale { order: -1; margin-bottom: 4px; }
.sfl-price--sale ins { font-size: 22px; font-weight: 700; text-decoration: none; color: var(--sfl-accent); }
.sfl-price--only ins { font-size: 20px; font-weight: 600; text-decoration: none; color: var(--sfl-dark); }

/* --- Actions (Always Visible, Perfectly Docked) --- */
.sfl-ht__actions-wrap {
  display: flex; gap: 0.5rem;
  margin-top: 1.5rem;
}
.sfl-btn {
  display: inline-grid; place-items: center; height: 46px; border-radius: var(--sfl-radius-btn);
  text-decoration: none; border: 1px solid transparent;
  transition: all var(--sfl-anim-speed) var(--sfl-anim-curve);
}
.sfl-btn svg { width: 20px; height: 20px; }
.sfl-btn--primary {
  flex-grow: 1; background: var(--sfl-dark); border-color: var(--sfl-dark);
  color: #fff; font-size: 14px; font-weight: 600;
}
.sfl-btn--primary:hover { background: var(--sfl-light); border-color: var(--sfl-light); }
.sfl-btn--ghost {
  width: 46px; min-width: 46px; background: var(--sfl-bg);
  border: 1px solid var(--sfl-border); color: var(--sfl-muted);
}
.sfl-btn--ghost:hover {
  background: var(--sfl-bg-alt); border-color: #ddd; color: var(--sfl-dark);
}
.sfl-btn--wa:hover {
  background: #25D366; border-color: #25D366; color: #fff;
}