/* ============================================================
   Smart Product Listings Pro – Frontend Styles
   ============================================================ */

/* CSS Custom Properties (overridden by inline style from settings) */
:root {
  --splp-primary: #0071e3;
  --splp-btn-bg: #0071e3;
  --splp-btn-txt: #ffffff;
  --splp-sale-badge: #e3000b;
  --splp-featured-badge: #ff9500;
  --splp-gap: 20px;
  --splp-radius: 12px;
  --splp-desktop-cols: 4;
  --splp-tablet-cols: 3;
  --splp-mobile-cols: 2;
  --splp-card-shadow: 0 2px 16px rgba(0,0,0,.08);
  --splp-card-hover-shadow: 0 8px 32px rgba(0,0,0,.15);
  --splp-transition: .25s cubic-bezier(.4,0,.2,1);
  --splp-text: #1d2327;
  --splp-muted: #6c757d;
  --splp-border: #e8ecef;
  --splp-bg: #f8f9fa;
}

/* ---- Wrapper ---- */
.splp-listings-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--splp-text); }
.splp-listings-wrap *, .splp-listings-wrap *::before, .splp-listings-wrap *::after { box-sizing: border-box; }

/* ---- Toolbar: search + filters ---- */
.splp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; padding: 16px 20px; background: #fff; border: 1px solid var(--splp-border); border-radius: calc(var(--splp-radius) / 1.5); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.splp-search-wrap { position: relative; flex: 1; min-width: 200px; }
.splp-search-input { width: 100%; padding: 10px 16px 10px 40px; border: 1.5px solid var(--splp-border); border-radius: 50px; font-size: 14px; background: var(--splp-bg); transition: border-color var(--splp-transition); outline: none; }
.splp-search-input:focus { border-color: var(--splp-primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,.1); }
.splp-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--splp-muted); pointer-events: none; font-size: 15px; }
.splp-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.splp-filter-tab { padding: 8px 16px; border-radius: 50px; border: 1.5px solid var(--splp-border); background: #fff; font-size: 13px; cursor: pointer; transition: all var(--splp-transition); color: var(--splp-text); font-weight: 500; }
.splp-filter-tab:hover, .splp-filter-tab.active { background: var(--splp-primary); color: #fff; border-color: var(--splp-primary); }
.splp-featured-filter { display: flex; gap: 8px; }
.splp-featured-filter button { padding: 8px 14px; border-radius: 50px; border: 1.5px solid var(--splp-border); background: #fff; font-size: 13px; cursor: pointer; transition: all var(--splp-transition); }
.splp-featured-filter button.active { background: var(--splp-featured-badge); color: #fff; border-color: var(--splp-featured-badge); }

/* ---- Grid ---- */
.splp-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--splp-desktop-cols), 1fr);
  gap: var(--splp-gap);
}

/* ---- Product Card ---- */
.splp-product-card {
  background: #fff;
  border-radius: var(--splp-radius);
  border: 1px solid var(--splp-border);
  box-shadow: var(--splp-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--splp-transition), box-shadow var(--splp-transition);
  position: relative;
}
.splp-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--splp-card-hover-shadow);
}
.splp-product-card:hover .splp-product-image img {
  transform: scale(1.05);
}

/* Image */
.splp-product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--splp-bg);
}
.splp-product-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--splp-transition);
  display: block;
}

/* Badges */
.splp-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.splp-badge-sale { background: var(--splp-sale-badge); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.splp-badge-featured { background: var(--splp-featured-badge); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* Card body */
.splp-product-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }

.splp-product-category { font-size: 11px; color: var(--splp-primary); text-transform: uppercase; font-weight: 600; letter-spacing: .5px; }

.splp-product-title { font-size: 15px; font-weight: 600; color: var(--splp-text); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.splp-product-excerpt { font-size: 12px; color: var(--splp-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

/* Pricing */
.splp-product-pricing { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.splp-price-current { font-size: 18px; font-weight: 700; color: var(--splp-text); }
.splp-price-original { font-size: 13px; color: var(--splp-muted); text-decoration: line-through; }
.splp-price-discount { font-size: 11px; font-weight: 700; color: var(--splp-sale-badge); background: rgba(227,0,11,.08); padding: 2px 7px; border-radius: 10px; }

/* Buy button */
.splp-product-footer { padding: 0 16px 16px; }
.splp-buy-btn {
  display: block; width: 100%; padding: 11px 16px;
  background: var(--splp-btn-bg); color: var(--splp-btn-txt);
  border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: filter var(--splp-transition), transform var(--splp-transition);
  letter-spacing: .2px;
}
.splp-buy-btn:hover { filter: brightness(1.12); transform: translateY(-1px); color: var(--splp-btn-txt); }

/* ---- Ad Card ---- */
.splp-ad-card {
  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
  border: 1px solid #ffe0b2;
  border-radius: var(--splp-radius);
  padding: 20px;
  position: relative;
  box-shadow: var(--splp-card-shadow);
}
.splp-ad-full { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.splp-ad-label { display: inline-block; background: #ff9500; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.splp-ad-title { font-size: 16px; font-weight: 700; color: var(--splp-text); margin: 8px 0; }
.splp-ad-content { font-size: 13px; color: var(--splp-text); line-height: 1.6; }
.splp-ad-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.splp-ad-link { font-size: 13px; color: #0071e3; font-weight: 700; text-decoration: none; }
.splp-ad-link:hover { text-decoration: underline; }
.splp-ad-btn { display: inline-block; padding: 9px 20px; background: var(--splp-btn-bg); color: var(--splp-btn-txt) !important; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none !important; transition: filter .2s; }
.splp-ad-btn:hover { filter: brightness(1.1); }

/* ---- Loading & Empty ---- */
.splp-loading { text-align: center; padding: 40px; color: var(--splp-muted); font-size: 15px; }
.splp-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--splp-border); border-top-color: var(--splp-primary); border-radius: 50%; animation: splp-spin .7s linear infinite; margin-bottom: 12px; }
@keyframes splp-spin { to { transform: rotate(360deg); } }
.splp-no-products { text-align: center; padding: 60px 20px; color: var(--splp-muted); }
.splp-no-products-icon { font-size: 48px; margin-bottom: 12px; }

/* ---- Category pills ---- */
.splp-category-list { display: flex; flex-wrap: wrap; gap: 8px; }
.splp-category-pill { display: inline-block; padding: 8px 18px; background: #fff; border: 1.5px solid var(--splp-border); border-radius: 50px; font-size: 13px; color: var(--splp-text); text-decoration: none; font-weight: 500; transition: all var(--splp-transition); }
.splp-category-pill:hover { background: var(--splp-primary); color: #fff; border-color: var(--splp-primary); }
.splp-cat-count { color: var(--splp-muted); font-size: 11px; }

/* ---- Pagination ---- */
.splp-pagination-wrap { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.splp-pagination-wrap .page-numbers { padding: 9px 16px; border-radius: 8px; background: #fff; border: 1.5px solid var(--splp-border); color: var(--splp-primary); text-decoration: none; font-size: 14px; font-weight: 500; transition: all var(--splp-transition); }
.splp-pagination-wrap .page-numbers:hover { background: var(--splp-primary); color: #fff; border-color: var(--splp-primary); }
.splp-pagination-wrap .page-numbers.current { background: var(--splp-primary); color: #fff; border-color: var(--splp-primary); }

/* ---- Results bar ---- */
.splp-results-bar { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--splp-muted); margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .splp-products-grid { grid-template-columns: repeat(var(--splp-tablet-cols), 1fr); }
  .splp-ad-full { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .splp-products-grid { grid-template-columns: repeat(var(--splp-mobile-cols), 1fr); }
  .splp-toolbar { flex-direction: column; align-items: stretch; }
  .splp-filter-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .splp-product-title { font-size: 13px; }
  .splp-price-current { font-size: 15px; }
}
@media (max-width: 380px) {
  .splp-product-body { padding: 10px 12px; }
  .splp-product-footer { padding: 0 12px 12px; }
}