/* profile.css — aligned to site tokens & Bootstrap, non-invasive globals */

/* Site tokens (match style.css) */
:root{
    --card-radius: 14px;
    --chip-radius: 12px;
    --shadow-1: 0 6px 18px rgba(0,0,0,.10);
    --shadow-2: 0 10px 24px rgba(0,0,0,.14);
    --brand-accent: #dc2b14;            /* site theme */
    --heading-color: #121c45;           /* site heading color */
  }
  
  /* DO NOT set body font/size/colors here; let libraries.css & style.css win.
     Only component-level styles below. */
  
  /* ---- Page Title (component) ---- */
  .page-title{
    font-weight:700;
    letter-spacing:.2px;
    color: var(--heading-color);
  }
  .title-underline{
    width:56px; height:4px;
    background: var(--brand-accent);
    border-radius:2px; margin:6px 0 14px;
  }
  .lead-copy{ color:#606978; font-size:.96rem; }
  .read-more{ color:var(--brand-accent); text-decoration:none; font-weight:600; }
  
  /* ---- Sidebar Filters ---- */
  .filters{
    background:#fff; border-radius:var(--card-radius);
    box-shadow:var(--shadow-1);
    padding:18px; position:sticky; top:18px;
  }
  .filters h6{ font-weight:700; color:var(--heading-color); }
  .filters .clear-filter{ font-size:.9rem; color:#8091a7; text-decoration:none; }
  .filter-section{ border-top:1px solid #eef0f4; padding:10px 0; }
  .filter-header{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; user-select:none; font-weight:600; padding:10px 0;
    color:#333;
  }
  .filter-body{ display:none; padding-bottom:8px; }
  .filter-body.show{ display:block; }
  
  /* ---- Brand Search & Chips ---- */
  .brand-search{ position:relative; margin-bottom:12px; }
  .brand-search input{
    background:#f5f6fa; border:1px solid #edf0f4;
  }
  .brand-grid{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px; max-height:260px; overflow-y:auto; padding-right:4px;
  }
  .brand-grid::-webkit-scrollbar{ width:6px; }
  .brand-grid::-webkit-scrollbar-thumb{ background:#dfe3ea; border-radius:6px; }
  
  .brand-chip{
    background:#fff; border-radius:var(--chip-radius);
    box-shadow:var(--shadow-1);
    padding:8px; display:flex; flex-direction:column; align-items:center; gap:6px;
    border:1px solid #f0f1f5; cursor:pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  .brand-chip img{ height:64px; width:auto; object-fit:contain; }
  .brand-chip span{
    font-size:.8rem; font-weight:600; color:#333; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  }
  .brand-chip:hover{
    transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:#e8eaf0;
  }
  .brand-chip.active{
    border-color:var(--brand-accent);
    box-shadow:0 0 0 3px rgba(220,43,20,.12); /* brand-accent glow */
  }
  
  /* ---- Product Card Grid ---- */
  .product-card{
    background:#fff; border-radius:var(--card-radius);
    box-shadow:var(--shadow-1); overflow:hidden;
    transition: transform .18s, box-shadow .18s; height:100%;
  }
  .product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
  .product-card .p-img{
    background:#fff; display:flex; align-items:center; justify-content:center;
    height:210px; padding:12px;
  }
  .product-card img{ max-height:180px; width:auto; object-fit:contain; }
  .product-card .title{
    font-weight:700; font-size:1.05rem; color:#111;
    padding:12px 16px; border-top:1px solid #f0f1f5;
  }
  .specs{ padding:6px 16px 14px; }
  .spec-row{ display:grid; grid-template-columns:22px 1fr; align-items:center; gap:10px; }
  .spec-row + .spec-row{ margin-top:8px; }
  .spec-row .ic{ color:#8896a6; }
  .spec-row small{ color:#687384; }
  .price{ font-weight:800; color:#111; }
  .cta{ padding:12px 16px 18px; border-top:1px solid #f0f1f5; }
  .btn-dark{ border-radius:10px; padding:12px 16px; font-weight:700; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;}
  
  /* ---- Utilities ---- */
  .badge-accent{
    background:#ffe9ea; color:var(--brand-accent);
    border:1px solid #ffd3d6; font-weight:700;
  }
  .muted{ color:#8a94a6; }
  .pointer{ cursor:pointer; }
  
  /* ---- Responsive tweaks ---- */
  @media (max-width: 991.98px){
    .filters{ position:static; margin-bottom:16px; }
  }
  
  /* 2x2 spec grid for product cards */
.specs-2x2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 14px;
  padding:10px 16px 14px; /* matches existing spacing */
}

.specs-2x2 .ic{ color:#8896a6; }
.specs-2x2 small{ color:#687384; }

/* Stack to single column on very small screens */
@media (max-width: 575.98px){
  .specs-2x2{ grid-template-columns: 1fr; }
}

/* hide native scrollbar (cross-browser) */
.category-row-wrapper {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}
.category-row-wrapper::-webkit-scrollbar { display: none; } /* Chrome/Safari/Opera */

/* keep previous layout */
.category-row-wrapper { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.category-row { display:flex; gap:16px; align-items:stretch; flex-wrap:nowrap; padding:6px 2px; }

/* card sizing (same as before) */
.category-card { flex: 0 0 260px; max-width:260px; text-decoration:none; color:inherit; background:#fff; border-radius:10px; box-shadow:0 6px 20px rgba(18,24,33,0.06); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.cat-img { width:100%; height:150px; overflow:hidden; display:block; background:#f4f5f6; }
.cat-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-title { font-size:0.95rem; font-weight:700; margin:10px 12px 14px; color:#1D2C50; }

/* arrows container and buttons */
.category-arrows { display:flex; gap:8px; align-items:center; }
.cat-arrow {
  background:#fff;
  border:1px solid #e6e6e6;
  width:38px;
  height:38px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  padding:0;
  box-shadow:0 4px 12px rgba(18,24,33,0.06);
}
.cat-arrow:disabled { opacity:.38; cursor:default; box-shadow:none; }

/* hide arrows on very small screens if you prefer (optional) */
/* @media (max-width:480px){ .category-arrows{ display:none; } } */