/* Reset old styles */
.products, .search-category-container, .product-grid, .pasgination { display: none !important; }

/* New Products page layout */
.products-page {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 95px 145px;
}

.products-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
}

.filters-sidebar {
    width: 400px;
}

.filters-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 6px 10px 0;
    border-bottom: 2px solid #191919;
    margin-top: 12px;
    height: 48px;
}

.filters-select-label {
    font-family: 'TT Norms', 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    color: #191919;
}

.filters-select-arrow {
    width: 18px;
    height: 18px;
    background-image: url('/static/images/arrow-down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filters-title {
    font-family: 'Collingar';
    font-size: 32px;
    text-transform: uppercase;
    color: #191919;
}

.filters-clear {
    background: transparent;
    border: none;
    color: #191919;
    font-family: 'Collingar';
    font-size: 24px;
    cursor: pointer;
}

.products-content {
    width: 100%;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    column-gap: 0;
    row-gap: 24px;
    justify-content: start;
}

.product-card {
    width: 400px;
    height: 585px;
    border: 1.5px solid #333333;
    padding: 16px 16px 24px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: 'TT Norms', 'Inter', sans-serif;
}

/* Single borders between cards in the same row (no double borders) */
.products-grid .product-card:nth-child(3n+2),
.products-grid .product-card:nth-child(3n+3) { border-left: 0; }

.product-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-name {
    font-family: 'TT Norms', 'Inter', sans-serif;
    font-size: 18px;
    color: #191919;
    margin: 0;
}

.product-name-link {
    color: inherit;
    text-decoration: none;
}

.product-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-category { font-size: 20px; color: #191919; text-transform: uppercase;}
.meta-separator { color: #191919; }

.color-thumbs { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.color-thumb { width: 36px; height: 36px; border-radius: 50%; overflow: hidden;  margin-left: -10px; background: #fff; }
.color-thumb:first-child { margin-left: 0; }
.color-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-visual { margin-top: auto; padding-top: 24px; display: flex; align-items: flex-end; justify-content: center; height: calc(585px - 16px - 24px - 80px); }
.product-main-image { width: 100%; height: 100%; object-fit: cover; border: 1px solid #333333; }
.products-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 0 60px 0; }
.products-pagination .page-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; }
.products-pagination .page-btn img { width: 40px; height: 40px; }
.products-pagination .page-label { font-family: 'Collingar', 'Times New Roman', serif; font-size: 28px; color: #191919; text-transform: uppercase; }

/* Make image area taller (75% of card) for 1st and 3rd cards in each row */
.products-grid .product-card:nth-child(3n+1) .product-visual {
    height: 50%;
}

.products-grid .product-card:nth-child(3n+3) .product-visual {
    height: 65%;
}


.search-category-container {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 1500px; 
    margin: 0 auto 20px auto; 
}

.search-form {
    display: flex;
    width: 100%; 
}

.search-bar {
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 5px 0 0 5px;
    font-size: 16px; 
    width: 100%; 
    margin-bottom: 10px; 
    
}

.search-button {
    background-color: black;
    color: white; 
    padding: 0 10px;
    border: none;
    cursor: pointer; 
    border-radius: 0 5px 5px 0; 
    margin-bottom: 10px;
}

.search-button i {
    font-size: 1em; 
}



.category-form {
    display: flex; 
    align-items: center; 
    width: 100%; 
}

.category-form label {
    margin-right: 5px; 
}

.category-form select {
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    font-size: 16px; 
}


.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 23%);
    gap: 20px;
    margin: 30px;
}

.product-grid {
    text-align: center;
    padding: 10px;
}

.product-item a {
    text-decoration: none;
    color: inherit; 
}

.product-item a:hover {
    color: #333;
}


.product-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.product-name {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: start;
}

.new-badge {
    background-color: red;
    color: white;
    font-size: 0.8em;
    padding: 2px 5px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.pasgination{
    margin-bottom: 100px;
}

.pasgination a{
    color: black; 
    /* text-decoration: none;  */
}






@media (max-width: 810px) {
    .search-category-container {
        flex-direction: column; 
        align-items: stretch; 
    }

    .search-bar {
        width: 100%; 
        margin-bottom: 10px; 
    }

    .category-form {
        width: 100%; 
        margin-top: 10px; 
        justify-content: space-between; 
    }

    .category-form label {
        margin-right: 10px; 
    }

    .category-form select {
        width: auto; 
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .product-item img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .search-bar {
        font-size: 14px; 
    }

    .category-form select {
        font-size: 14px; 
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Dynamic Section Styles */
.dynamic-section {
    padding: 60px 0;

}

.dynamic-content {
    width: 88%;
    margin: 0;
    /* padding: 0 20px; */
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.dynamic-text-column {
    width: 615px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dynamic-title {
    font-family: 'TT Norms', 'Inter', sans-serif;
    font-size: 60px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
    line-height: 1.1;
    text-align: left;
}

.dynamic-description {
    font-family: 'TT Norms', 'Inter', sans-serif;
    font-size: 18px;
    color: #374151; /* gray 700 */
    margin: 24px 0;
    line-height: 1.5;
    text-align: left;
}

.dynamic-cta {
    width: 360px;
    height: 52px;
    font-family: 'TT Norms', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
    background-color: transparent;
    border: 1.5px solid #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* .dynamic-cta:hover {
    background-color: #000000;
    color: #ffffff;
} */

.dynamic-image-column {
    width: 615px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dynamic-image {
    width: 615px;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
}

/* Filter Items Dropdown Styles */
.filters-select-row {
    cursor: pointer;
    user-select: none;
}

.filters-select-row.has-selection .filters-select-label {
    color: #191919;
    font-weight: 500;
}

.filters-select-arrow {
    transition: transform 0.3s ease;
}

.filters-select-arrow.open {
    transform: rotate(180deg);
}

.filters-items {
    margin-top: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    margin-left: 10px;
}

.filter-item {
    display: block;
    padding: 8px 0;
    font-family: 'TT Norms', 'Inter', sans-serif;
    font-size: 18px;
    color: #666666;
    text-decoration: none;
    text-align: left;
    transition: color 0.3s ease;
}

.filter-item:hover {
    color: #191919;
    text-decoration: none;
}

.filter-item:active {
    color: #191919;
}

.filter-clear-item {
    font-weight: 500;
    color: #999999;
    border-bottom: 1px solid #e0e0e0;
    /* margin-bottom: 8px; */
    padding-bottom: 8px;
}

.filter-clear-item:hover {
    color: #666666;
}

@media (max-width: 768px) {
  .products-page { padding: 12px 0; }
  .products-layout { display: flex; flex-direction: column; gap: 12px; }

  /* Filters first, products after, wider and centered */
  .filters-sidebar { order: 1; width: 100%; max-width: 380px; padding: 10px 12px; border-bottom: 1px solid #000000; margin: 0 auto; }
  .products-content { order: 2; width: 100%; }

  /* Grid compaction - single column default on mobile */
  .products-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 8px; }

  /* Card scaling + full black borders + wider width */
  .products-grid .product-card { border: 1.5px solid #000000 !important; height: auto; box-sizing: border-box; max-width: 380px; margin: 0 auto; }
  .products-grid .product-info { padding: 8px 10px; }
  .products-grid .product-name { font-size: 14px; }
  .products-grid .product-meta-row { font-size: 12px; }
  
  /* Hide color-thumb images beyond the 6th on mobile */
  .products-grid .color-thumbs .color-thumb:nth-child(n+7) {
    display: none;
  }
  
  .products-grid .product-visual { padding: 8px; }
  .products-grid .product-main-image { height: 190px; object-fit: cover; width: 100%; }

  /* Filters compact */
  .filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .filters-title { font-size: 15px; margin: 0; }
  .filters-clear { font-size: 12px; padding: 6px 10px; }
  .filters-select-row { padding: 8px 0; border-bottom: 1px solid #000000; }
  .filters-select-label { font-size: 13px; }
  .filters-select-arrow { width: 10px; height: 10px; }
  .filters-items .filter-item { display: block; padding: 6px 0; font-size: 12px; }
}

@media (max-width: 480px) {
  /* Wider on very small screens as well */
  .filters-sidebar { max-width: 340px; padding: 8px 10px; }
  .products-grid .product-card { max-width: 340px; }
  .products-grid .product-main-image { height: 170px; }
}

@media (max-width: 768px) {
  .products-pagination { gap: 10px; padding: 16px 0 30px 0; }
  .products-pagination .page-btn { width: 28px; height: 28px; }
  .products-pagination .page-btn img { width: 28px; height: 28px; }
  .products-pagination .page-label { font-size: 16px; }
}

@media (max-width: 480px) {
  .products-pagination { gap: 8px; padding: 12px 0 24px 0; }
  .products-pagination .page-btn { width: 24px; height: 24px; }
  .products-pagination .page-btn img { width: 24px; height: 24px; }
  .products-pagination .page-label { font-size: 14px; }
}