:root {
  /* local tokens (shadows/transitions) to avoid undefined vars */
  --elev-1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elev-2: 0 10px 30px rgba(0,0,0,.10);
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .3s var(--ease);
}

/* Base */
body {
  background: #fff;
  color: var(--text-primary);
}

/* Container */
.store-container { padding: 30px 15px; }

/* ===== Header row ===== */
.store-header {
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

.store-title {
  font-weight: 700;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 8px;
}

.store-title::after {
  content:"";
  position:absolute; left:0; bottom:-6px;
  width: 48px; height: 3px; background: var(--accent); border-radius: 2px;
}

.store-controls {
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
}

.results-count { color: var(--text-secondary); font-size: .95rem; }

.sort-options .form-select{
  border:1px solid var(--border-light);
  color: var(--text-primary);
  background: var(--light-bg);
  border-radius: 50px;
  padding: .5rem 1rem;
  transition: border var(--t), box-shadow var(--t), background var(--t), transform var(--t);
}

.sort-options .form-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(237,25,37,.12);
  border-color: var(--accent);
  background: #fff;
}

/* ===== Filter toggle (mobile) ===== */
.filter-toggle-btn{
  width:100%;
  background: var(--accent); color:#fff; border:0;
  padding:.9rem 1rem; border-radius: 50px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.filter-toggle-btn:hover{ background: var(--accent-hover); transform: translateY(-2px); }

/* ===== Filters sidebar ===== */
.filters-sidebar{
  background:#fff; border-radius: var(--radius);
  border: 2px solid var(--border-light);
  box-shadow: var(--elev-1);
  padding: 20px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.filters-sidebar:hover{
  box-shadow: var(--elev-2);
  border-color: var(--accent);
}

.filters-header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; border-bottom:2px solid var(--border-light); margin-bottom:16px;
}
.filters-header h3{ margin:0; font-weight:700; color: var(--text-primary); }
.close-filters{
  background: transparent; border:0; color: var(--text-secondary);
  width:40px; height:40px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--t), color var(--t), transform var(--t);
}
.close-filters:hover{ background: var(--light-bg); color: var(--accent); transform: rotate(90deg); }

.filter-section{ margin-bottom: 22px; }
.filter-title{
  color: var(--text-primary); font-weight:700; font-size:1rem;
  margin-bottom:12px; padding-left:12px; position:relative;
}
.filter-title::before{
  content:""; position:absolute; left:0; top:50%; transform: translateY(-50%);
  width:4px; height:70%; background: var(--accent); border-radius:3px;
}

.filter-options{ max-height: 220px; overflow:auto; padding-right:8px; }
.filter-options::-webkit-scrollbar{ width:6px; }
.filter-options::-webkit-scrollbar-thumb{ background: var(--border-light); border-radius:10px; }

.form-check{ margin-bottom:10px; }
.form-check-input{
  border-color: var(--border-light);
}
.form-check-input:checked{
  background: var(--accent); border-color: var(--accent);
}
.form-check-label{ color: var(--text-primary); cursor:pointer; }

/* Price fields */
.price-inputs{ display:flex; gap:10px; }
.min-price, .max-price{ flex:1; }
.min-price label, .max-price label{
  display:block; margin-bottom:6px; color: var(--text-secondary); font-weight:600; font-size:.9rem;
}
.min-price input, .max-price input{
  width:100%; border:1px solid var(--border-light); border-radius: 10px; padding: .6rem .75rem;
  background: var(--light-bg); transition: border var(--t), box-shadow var(--t), background var(--t);
}
.min-price input:focus, .max-price input:focus{
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237,25,37,.12);
  background:#fff;
}

/* Filter actions */
.filter-actions{ display:flex; gap:10px; margin-top:14px; }
.apply-filters-btn{
  flex:1; background: var(--accent); color:#fff; border:0; padding:.7rem .9rem; border-radius: 10px; font-weight:700;
  transition: transform var(--t), background var(--t), box-shadow var(--t);
}
.apply-filters-btn:hover{ background: var(--accent-hover); transform: translateY(-2px); }
.reset-filters-btn{
  flex:1; background: var(--light-bg); color: var(--text-primary); border:1px solid var(--border-light);
  padding:.7rem .9rem; border-radius: 10px; font-weight:600; transition: var(--t);
}
.reset-filters-btn:hover{ background:#fff; border-color: var(--accent); color: var(--accent); }

/* ===== Products grid ===== */
.products-grid{
  margin-bottom: 28px;
  margin-left:0; margin-right:0; /* neuter bootstrap row gutter */
}

.product-card-wrapper{ padding:10px; margin-bottom:20px; }

/* ===== Empty state ===== */
.no-products{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px; background: var(--light-bg); border-radius: var(--radius); color: var(--text-secondary);
}
.no-products::before{ content:'🔍'; font-size:3rem; margin-bottom:14px; }
.no-products p{ margin:0; max-width:420px; text-align:center; }

/* ===== Pagination ===== */
.pagination-container{ margin-top: 32px; display:flex; justify-content:center; }

.pagination{ display:flex; gap:6px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }

.page-item .page-link{
  color: var(--text-primary);
  border:1px solid var(--border-light);
  background:#fff;
  padding: 8px 14px; min-width:40px; text-align:center; border-radius: 10px;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.page-item .page-link:hover{
  background: var(--light-bg); border-color: var(--accent); color: var(--accent);
  transform: translateY(-2px);
}
.page-item.active .page-link{
  background: var(--secondary); border-color: var(--secondary); color:#fff; font-weight:700;
}
.page-item.disabled .page-link{
  color: var(--text-secondary); pointer-events:none; background:#f8fafc;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  /* Drawer for filters */
  .filters-sidebar{
    position: fixed; top:0; left:-100%; width:85%; max-width: 360px; height:100vh; z-index:1050;
    overflow:auto; border-radius: 0; border-left:0; border-top:0; border-bottom:0;
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
    transition:left .3s var(--ease);
  }
  .filters-sidebar.show{ left:0; }

  .filters-header{
    position: sticky; top:0; background:#fff; z-index:1; margin-bottom:16px;
  }

  .store-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .store-controls{ width:100%; justify-content:space-between; }
}

@media (max-width: 767.98px){
  .sort-options{ width:100%; }
  .sort-options .form-select{ width:100%; }

  .product-card-wrapper{ padding:6px; margin-bottom:12px; }
  .product-name{ font-size:1rem; }
  .current-price{ font-size:1.05rem; }

  /* compact pagination */
  .pagination{ gap:4px; }
  .page-item .page-link{ padding:6px 10px; min-width:34px; font-size:.9rem; }
}

@media (min-width: 768px){
  /* Prefer CSS Grid on desktop for tighter control */
  .products-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:20px;
  }
  .products-grid > [class*="col-"]{ width:100%; max-width:100%; padding:0; margin:0; }
  .product-card-wrapper{ padding:0; margin-bottom:0; }
}

/* ===== A11y micro-interactions ===== */
.form-check-input:focus,
.page-link:focus,
.apply-filters-btn:focus,
.reset-filters-btn:focus,
.filter-toggle-btn:focus,
.close-filters:focus{
  outline:none; box-shadow: 0 0 0 3px rgba(237,25,37,.16);
}