/* product-listing.css - simple two-column card with image left and meta right */
:root {
  --card-bg: #fff;
  --page-bg: #1e1f36; /* page background set to requested color */
  --accent: #f9c10b;
  --muted: #9aa0b2;
  --primary: #ffffff;
}

body { background: var(--page-bg); color: #e6e6f2; }

.section-title { font-size:1.25rem; font-weight:700; color:var(--primary); margin-bottom:0.75rem; }

.product-card { display:block; }
.product-card { text-decoration: none !important; }
.product-card:hover { text-decoration: none !important; }

/* Ensure descendant text inside linked cards doesn't inherit underlines */
.product-card .product-title,
.product-card .product-price,
.product-card .price-label {
  text-decoration: none !important;
}
.product-card-inner { display:flex; gap:1rem; align-items:center; background:var(--card-bg); border-radius:14px; padding:18px; box-shadow:0 8px 20px rgba(16,24,40,0.06); transition:transform .15s ease, box-shadow .15s ease; }
.product-card-inner:hover { transform:translateY(-6px); box-shadow:0 14px 34px rgba(16,24,40,0.10); }

/* support image-on-right layout when `.image-right` is present on the anchor */
.product-card.image-right .product-card-inner { flex-direction: row-reverse; }
.product-card.image-right .product-meta { padding-left: 12px; padding-right: 8px; text-align: left; }

.product-image { flex:0 0 160px; width:160px; height:160px; overflow:hidden; border-radius:12px; background:linear-gradient(180deg,#fff,#f6f7fb); display:flex; align-items:center; justify-content:center; }
.product-image img { max-width:100%; max-height:100%; object-fit:cover; display:block; }

.product-meta { flex:1; padding-right:8px; }
.product-title { font-size:1.25rem; color: #1e1f36;margin:0 0 0.6rem 0; font-weight:600; }
.product-price { color:var(--accent); font-size:1.25rem; font-weight:700; }

/* make product meta text visible on dark background */
.product-meta { color: #e6e6f2; }

/* Price variants */
.product-price { display:block; margin-top:6px; }
/* show each price on its own line */
.product-price-offer { display:block; font-weight:600; font-size:20px; color: green;  }
.product-price-original { display:block; color: red;  text-decoration: line-through; font-weight:800; font-size:1.12rem; }
.product-price-normal { display:block; color: var(--primary); font-weight:700; }

/* small labels for price lines */
.price-label { display:block; font-size:14px; color: #000; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:3px; }
.price-label.offer-label { color: #000; font-weight:700; }
.price-label.online-label { color:#000; font-size: 14px; }

@media (max-width:768px){
  /* keep image on the left (default) for tablet and larger phones */
  .product-card-inner { flex-direction: row; }
  .product-image { flex:0 0 120px; width:120px; height:120px; }
  .product-title { font-size:2.05rem; color: #1e1f36; }
}

@media (max-width:480px){
  /* compact side-by-side layout for small screens: force no-wrap so meta stays beside image */
  .product-card-inner { flex-direction: row; gap:10px; align-items:center; padding:10px; width:100%; flex-wrap:nowrap; }
  .product-image { flex:0 0 36%; max-width:36%; width:36%; height:100px; border-radius:10px; overflow:hidden; }
  .product-image img { width:100%; height:100%; object-fit:fill; display:block; }
  .product-meta { flex:1 1 64%; max-width:64%; width:64%; overflow:hidden; }
  .product-title { font-size:1.3rem;color: #1e1f36; }
  .product-price { font-size:2.5rem; line-height: 1.5;}
}

/* Fix for header overlap
   If your site uses a fixed/sticky header that covers the top of the page,
   this adds top padding so the section title won't sit underneath it.
   The fallback header height is 72px; adjust via the --site-header-height CSS variable
   (e.g. set it on body or :root in your global stylesheet). */
.product-listing {
  padding-top: calc(var(--site-header-height, 72px) + 78px);
}

/* add spacing around containers inside the product-listing section */
.product-listing .container { margin-top: 12px; margin-bottom: 18px; }

/* Brand scroller - sticky at top */
.brand-scroll-container { position: sticky; top: 0; z-index: 100; background: var(--page-bg); padding: 12px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.brand-scroll { display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 6px; }
.brand-scroll::-webkit-scrollbar { height:8px; }
.brand-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius:8px; }
.brand-item { display:flex; flex-direction:column; align-items:center; min-width:92px; text-align:center; text-decoration:none; color:var(--primary); }
.brand-thumb { width:72px; height:72px; border-radius:50%; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.brand-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.brand-title { margin-top:6px; font-size:0.8rem; color:var(--primary); }

/* active brand */
.brand-item.active { outline: 2px solid rgba(249,193,11,0.15); border-radius:8px; }
.brand-item.active .brand-thumb { box-shadow:0 8px 22px rgba(249,193,11,0.12); }

@media (max-width:480px){
  .brand-scroll { gap:10px; padding:8px 6px; }
  .brand-thumb { width:56px; height:56px; }
  .brand-item { min-width:76px; }
}

/* Category Filter Section */
.category-filter-wrapper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 10px;
}

.filter-category-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  color: #1e1f36;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.filter-category-btn:hover {
  background: #f9c10b;
  color: #1e1f36;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.filter-category-btn.active {
  background: #f9c10b;
  color: #1e1f36;
  border-color: #1e1f36;
  box-shadow: 0 6px 16px rgba(249,193,11,0.3);
}

@media (max-width:480px){
  .filter-category-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* If you instead want to simply hide the heading entirely, uncomment:
.product-listing .section-title { display: none; }
*/