/* ============================================================================
   LAYOUT CONTAINER
   ============================================================================ */

.row {
    width: 100%;
    padding: 10px;
}


/* ============================================================================
   PRODUCT LIST GRID
   Card/product grid display for series pages
   Uses base grid system with series-specific sizing
   ============================================================================ */

.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 20px;
    list-style: none;
    padding: 2px;
    margin-top: 10px;
    margin-left: 10px;
}


/* ============================================================================
   PRODUCT ITEM
   Individual card/product item
   Uses base .cards-item pattern with series-specific styling
   ============================================================================ */

.product-item {
    flex: 0;
    margin: 2px;
    border: 1px solid var(--cards-border-primary);
    padding-bottom: 20px;
    text-align: center;
    background-color: var(--cards-bg-secondary);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--cards-shadow-md);
}

.thumbnail{
    width: 200px;
    height: 375px;
}


/* ============================================================================
   SERIES SPACER
   Series section dividers
   ============================================================================ */

.series-spacer{
    margin: 5px;
}

.series-h2-border{
    border: 1px solid var(--cards-border-primary);
    background-color: var(--cards-bg-secondary);
    color: var(--cards-text-primary);
    padding: 10px;
    border-radius: 8px;
}

.series-spacer a{
    font-size: 20px;
    text-decoration: none;
    color: var(--cards-text-primary);
}

.series-spacer a:hover {
    color: #FFA500;
    text-decoration: none;
}


/* ============================================================================
   SERIES LIST GRID
   Grid layout for series items
   Uses base grid system with series-specific sizing
   ============================================================================ */

.series-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 10px;
    list-style: none;
    padding: 2px;
    margin-top: 10px;
    margin-left: 10px;
}


/* ============================================================================
   SERIES ITEM
   Individual series display card
   Uses base .cards-item pattern with series-specific styling
   ============================================================================ */

.series-item {
    border: 1px solid var(--cards-border-primary);
    padding-bottom: 20px;
    text-align: center;
    background-color: var(--cards-bg-secondary);
    width: 300px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.series-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--cards-shadow-md);
}

.series-img{
    height: 375px;
    position: relative;
    box-shadow: 1px -1px 5px 0px #000000;
}