/* ===============================
   Product Detail Page
   =============================== */

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

/* Product Header */
.product-header {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}
.product-image{
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(255,100,20,0.5);
  transition: all 0.4s ease;
}
.product-image:hover{
  transform: scale(1.05);
}
.product-image img {
    width: 350px;
    height: 350px;
    object-fit: contain;
    padding: 0.5rem;
}

.product-info {
    flex: 1 1 50%;
}

.product-info h1 {
    margin-top: 0;
    color: var(--text-on-secondary);
}

.product-price {
    font-weight: bold;
    color: var(--primary-500);
}

.product-meta table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    background-color: var(--white);
    color: var(--text-on-secondary);
}

.product-meta th,
.product-meta td {
    padding: 0.8rem 1rem;
    text-align: left;
    border: 2px solid var(--white);
    vertical-align: middle;
}

.product-meta tr.odd {
    background-color: var(--primary-50);
}

.product-meta tr.even {
    background-color: var(--bg-primary-vlight);
}

.product-meta th {
    width: 40%;
    color: var(--text-on-seconadary);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.5rem + 0.2vw, 2rem)
}

.product-meta td {
    color: var(--text-on-seconadary);
}


.badge-new {
    display: inline-block;
    background: var(--tetra-green);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: clamp(1.4rem, 1.4rem + 0.2vw, 2rem)
}

/* Tabs */
.product-tabs {
    border-top: 1px solid var(--border-on-primary-light);
}

.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    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(--primary-50);
    color: var(--secondary-700);
}

.tab-buttons li.active {
    background: var(--bg-primary);
    font-weight: bold;
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 5px; /* increase vertical distance */
}

.tab-buttons li:last-child {
    border-right: none;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Tab Lists (Features / Applications / Additional Info) */
.tab-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.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:nth-child(odd) {
    background: var(--gray-100);
}

.tab-list li:nth-child(even) {
    background: var(--gray-200);
}
.tab-list li:hover {
    background-color: var(--primary-50);
}

/* Specification Table */
.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table td {
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-50);
}

.spec-table tr.odd {
    background: var(--gray-100);
    color: var(--text-on-secondary);
}

.spec-table tr.even {
    background: var(--gray-200);
    color: var(--text-on-secondary);
}

/* Product Images */
.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 img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
}

/* Brochure Button */
.btn-download {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary-500);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 1rem;
}

.btn-download:hover {
    background: var(--primary-600);
}

/* Responsive */
@media (max-width: 1024px) {
    .product-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-image img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    .product-images {
        justify-content: center;  /* center horizontally */
        margin: 0 auto;           /* optional: center the container */
    }
    .product-info {
        flex: 1 1 100%;
    }
}