/* ============================
   PRODUCT LIST CSS
   Orange-Navy Theme
   ============================ */

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page Title */
.page-title {
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-on-primary-light);
}
#page-title {
  scroll-margin-top: 80px; /* your fixed navbar height */
}
.page-title  span {
  color: var(--text-on-secondary);
}
/* Catalog wrapper */
.catalog-wrapper {
    display: flex;
    gap: 2rem;
}

/* Sidebar */
.category-sidebar {
    flex: 1 1 20%;
    border: 1px solid var(--border-on-primary-light);
    border-radius: 8px;
    padding: 1rem;
    background: var(--bg-primary-light);
}
.category-sidebar ul {
    list-style: none;
}
.category-sidebar ul,
.category-sidebar li {
    margin: 0;
    padding: 0;
}
.category-sidebar li {
    margin-bottom: 1rem;
    width: 100%;
    background-color: var(--bg-primary-light);
    color: var(--text-on-primary-light);
    padding: 1rem 1rem;
    border-radius: 0.5rem;
    line-height: 1.4;
}

.category-sidebar li.active {
  background-color: var(--bg-primary);
  color: var(--text-on-primary);
}
.category-sidebar li:hover:not(.active) {
    background-color: var(--bg-primary-vlight);
}

.category-sidebar li.active a {
    font-weight: bold;
    color: var(--text-on-primary);
}
.category-sidebar a {
    text-decoration: none;
    color: var(--text-on-primary-light);
    transition: color 0.2s;
}
.category-sidebar a:hover {
    color: var(--primary-600);
}

/* Product grid */
.product-grid {
    flex: 3 1 75%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Product card */
.product-card {
    border: 1px solid var(--border-on-primary-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 2px 6px rgba(255, 100, 20, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(255, 100, 20, 0.5);
}

/* Product header */
.product-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  column-gap: 2rem;
  padding: 1rem;

  /* ✅ vertical centering in row layout */
  align-items: center;
  justify-content: space-between; /* optional: spread items left/right */
}

.product-image {
  width: 100%;
  max-width: 32rem;          /* ✅ limit max size on large screens */
  aspect-ratio: 1 / 1;       /* ✅ keeps it square and responsive */
  padding: 1rem;
  border-radius: 8px;
  display: flex;              /* ✅ center image */
  justify-content: center;
  align-items: center;
  overflow: hidden;           /* ✅ crop if cover */
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;       /* keeps aspect ratio, no cropping */
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.product-image img:hover {
  transform: scale(1.05);
}
.product-info {
    flex: 1 1 60%;
}
.product-info h5 {
  margin-top: 0;
  text-align: center;   /* ✅ center horizontally */
}
.product-info h5 a {
    text-decoration: underline;           /* enable underline */
    text-decoration-color: var(--primary-500); /* underline color */
    text-underline-offset: 0.5rem;           /* distance from text */
    color: var(--text-on-secondary);          /* text color */
    transition: color 0.2s, text-decoration-color 0.2s;
}
.product-info h6 a:hover {
    color: var(--primary-500);
}

.meta-table {
  font-size: 91%;
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.meta-table tr:nth-child(even) {
  background: var(--primary-50); /* light orange */
}

.meta-table tr:nth-child(odd) {
  background: var(--primary-100); /* light navy tint */
}

.meta-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--primary-200);
  color: var(--secondary-700);
}

.meta-table td:first-child {
  font-weight: 600;
  color: var(--secondary-800);
  width: 32%;
}

/* Status Cell → Green */
.status-cell {
  color: var(--color-success);
  font-weight: 600;
}

.badge-new {
    display: inline-block;
    background: var(--color-accent-teal);
    color: var(--white);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 95%;
}

/* Tabs */
.product-tabs {
    border-top: 1px solid var(--border-on-primary-light);
    background: var(--color-bg-light);
}
.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-on-primary-light);
    display: flex;              /* use flexbox */
    justify-content: center;    /* center horizontally */
    align-items: center;        /* center vertically (if needed) */
    column-gap: 1rem;                  /* optional: space between li items */
}
.tab-buttons li {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-right: 1px solid var(--border-on-primary-light);
    background: var(--bg-primary-light);
    color: var(--text-on-primary-light);
    transition: all 0.3s ease;
    font-size: 95%;
}
.tab-buttons li.active {
    background: var(--color-bg-light);
    font-weight: bold;
    color: var(--text-on-primary-light);
}
.tab-buttons li:last-child {
    border-right: none;
}
.tab-content {
    display: none;
    padding: 1rem;
    background: var(--color-bg-light);
}
.tab-content.active {
    display: block;
}


/* ------------------------------
   Tab List / Alternate Row Styling
   ------------------------------ */
 .tab-list {
     width: 100%;
     list-style: none;
     padding: 0;
     margin: 0.5rem 0;
     border-radius: 4px;
     overflow: hidden;
     font-size: 95%;

 }

.tab-list li {
    position: relative;           /* needed for ::before absolute positioning */
    padding: 1rem 1rem;
    padding-left: 2.5em;          /* space for the bullet */
    color: var(--text-on-secondary);
}

.tab-list li::before {
    content: "♦";
    color: var(--text-on-primary-light);
    position: absolute;           /* position relative to li */
    left: 1rem;
    top: 0.75rem;                 /* vertically align with text */
    width: 2em;
}

.tab-list li.odd {
    background-color: var(--gray-100);
}

.tab-list li.even {
    background-color: var(--white);
}

.tab-list li:hover {
    background-color: var(--primary-50);
}
/* ------------------------------
   Specifications Table
   ------------------------------ */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 95%;

}

.specs-table th, .specs-table td {
    padding: 0.75rem 1rem;
    /* border: 1px solid var(--border-on-primary-light); */
    text-align: left;
}

.specs-table th {
    background-color: var(--primary-100);
    color: var(--text-on-primary-light);
}

.specs-table tr.odd {
    background-color: var(--gray-100);
}

.specs-table tr.even {
    background-color: var(--white);
}

.specs-table tr:hover {
    background-color: var(--primary-50);
}

/* Product images in tabs */
.product-images {
    display: flex;              /* enable flex layout */
    flex-wrap: wrap;            /* allow wrapping to next line */
    gap: 1rem;                  /* spacing between images */
    justify-content: flex-start; /* default alignment for desktop */
    padding: 0;
    margin: 0;
    list-style: none;
}
.product-images li {
    list-style: none;
}
.product-images li img {
    width: 140px;
    height: 140px;
    object-fit: contain;       /* keeps aspect ratio, no cropping */
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.product-images li img:hover {
    transform: scale(1.05);
}

/* Brochure button */
.btn-download {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary-500);
    color: var(--white);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}
.btn-download:hover {
    background: var(--primary-600);
}


/* ============================
   Responsive
   ============================ */

/* Big Desktop (≥1920px) */
@media (min-width: 1920px) {

  }

/* Laptop (≤1440px) */
@media (max-width: 1440px) {

}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .catalog-wrapper {
      flex-direction: column;
  }
  .category-sidebar {
      flex: 1 1 100%;
      margin-bottom: 2rem;
  }
.product-header {
    flex-direction: column;      /* stack items vertically */
    gap: 0.5rem;                 /* reduce spacing on smaller screens */
  }
    .product-info {
        flex: none;  /* stop flex behavior */
        width: 100%; /* force full width */
        box-sizing: border-box; /* include padding in width */
    }
    
      .product-images {
        justify-content: center;  /* center horizontally */
        margin: 0 auto;           /* optional: center the container */
    }
    .product-image img {
        width: 100%;
        height: auto;
    }

}

/* Mobile (≤768px) */
@media (max-width: 768px) {


}

/* Small Mobile (≤500px) */
@media (max-width: 500px) {

}