/* Global Reset & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

html,
body {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    padding: 0;
    background-image: url(../../images/bundlebg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #1a1a1a; /* Dark mode background */
    color: #e0e0e0; /* Light text for dark background */
    -webkit-text-size-adjust: none;
    user-select: none !important;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    display: inline-block;
}

a {
    transition: color .2s ease-in-out;
    color: #64C9F9; /* Adjusted link color for dark mode */
    text-decoration: underline;
}



a img {
    border: 0;
}

b, strong {
    font-weight: 700;
    color: #f0f0f0; /* Lighter strong text */
}

i, em {
    font-style: italic;
}

sub {
    position: relative;
    top: 0.5em;
    font-size: 0.8em;
}

sup {
    position: relative;
    top: -0.5em;
    font-size: 0.8em;
}

blockquote {
    border-left: solid 0.75em #444; /* Darker border */
    padding: 1em 0 1em 1.5em;
    font-style: italic;
    color: #cccccc;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

h1, h2, h3, h4, h5, h6 {
    color: #f9f9f9; /* Lighter headings */
    margin: 0 0 0.75em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
    color: inherit;
}

h2, h3, h4, h5, h6 {
    font-weight: 700;
}

h1 {
    font-size: 3.25em;
    letter-spacing: -0.025em;
    font-weight: 300;
}

h1 strong {
    font-weight: 700;
}

h2 {
    font-size: 2em;
    letter-spacing: -0.015em;
}

h3 {
    font-size: 1.5em;
    letter-spacing: -0.015em;
}

br.clear {
    clear: both;
}

hr {
    border: 0;
    border-top: solid 1px #444; /* Darker HR */
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
    height: 1px;
    margin: 3em 0;
}

p, ul, ol, dl, table {
    margin-bottom: 2em;
    color: #cccccc;
}

section header, article header {
    margin: 0 0 3em 0;
}

section footer, article footer {
    margin: 3em 0 0 0;
}

section header > p, article header > p {
    font-size: 1.25em;
    margin: 0;
}

section footer > p {
    font-size: 1.25em;
}

::selection {
    color: black;
    background: #ED0000;
}

/* Wrapper for Max Width and Centering */
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Row (Flexbox Grid) */
.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
}

.row > * {
    box-sizing: border-box;
    
}

.row.gtr-uniform > * > :last-child {
    margin-bottom: 0;
}

.row.aln-left { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right { justify-content: flex-end; }
.row.aln-top { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

.row > .imp { order: -1; }
.row > .col-1 { width: 8.33333%; } .row > .off-1 { margin-left: 8.33333%; }
.row > .col-2 { width: 16.66667%; } .row > .off-2 { margin-left: 16.66667%; }
.row > .col-3 { width: 25%; } .row > .off-3 { margin-left: 25%; }
.row > .col-4 { width: 33.33333%; } .row > .off-4 { margin-left: 33.33333%; }
.row > .col-5 { width: 41.66667%; } .row > .off-5 { margin-left: 41.66667%; }
.row > .col-6 { width: 50%; } .row > .off-6 { margin-left: 50%; }
.row > .col-7 { width: 58.33333%; } .row > .off-7 { margin-left: 58.33333%; }
.row > .col-8 { width: 66.66667%; } .row > .off-8 { margin-left: 66.66667%; }
.row > .col-9 { width: 75%; } .row > .off-9 { margin-left: 75%; }
.row > .col-10 { width: 83.33333%; } .row > .off-10 { margin-left: 83.33333%; }
.row > .col-11 { width: 91.66667%; } .row > .off-11 { margin-left: 91.66667%; }
.row > .col-12 { width: 100%; } .row > .off-12 { margin-left: 100%; }

.row.gtr-0 { margin-top: 0px; margin-left: 0px; } .row.gtr-0 > * { padding: 0px 0 0 0px; }
.row.gtr-0.gtr-uniform { margin-top: 0px; } .row.gtr-0.gtr-uniform > * { padding-top: 0px; }
.row.gtr-25 { margin-top: -6.25px; margin-left: -6.25px; } .row.gtr-25 > * { padding: 6.25px 0 0 6.25px; }
.row.gtr-25.gtr-uniform { margin-top: -6.25px; } .row.gtr-25.gtr-uniform > * { padding-top: 6.25px; }
.row.gtr-50 { margin-top: -12.5px; margin-left: -12.5px; } .row.gtr-50 > * { padding: 12.5px 0 0 12.5px; }
.row.gtr-50.gtr-uniform { margin-top: -12.5px; } .row.gtr-50.gtr-uniform > * { padding-top: 12.5px; }
.row { margin-top: -25px; margin-left: -25px; } .row > * { padding: 25px 0 0 25px; }
.row.gtr-uniform { margin-top: -25px; } .row.gtr-uniform > * { padding-top: 25px; }
.row.gtr-150 { margin-top: -37.5px; margin-left: -37.5px; } .row.gtr-150 > * { padding: 37.5px 0 0 37.5px; }
.row.gtr-150.gtr-uniform { margin-top: -37.5px; } .row.gtr-150.gtr-uniform > * { padding-top: 37.5px; }
.row.gtr-200 { margin-top: -50px; margin-left: -50px; } .row.gtr-200 > * { padding: 50px 0 0 50px; }
.row.gtr-200.gtr-uniform { margin-top: -50px; } .row.gtr-200.gtr-uniform > * { padding-top: 50px; }

/* Main Content Area */
main {
    margin-top: 0; /* Remove top margin from main */
    padding: 0;
    min-height: calc(100vh - 8vw - 40px);
}

.mainstage {
    background-color: #333333;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Position mainstage to align with viewport top */
    position: relative; /* Or absolute/fixed if the entire mainstage needs to be viewport aligned */
    top: 0;
    left: 0;
    width: 100%;
    min-height: 1000px;

    border-radius: 20px;
    background-position:center 0%;
    background-size:cover;
    /* No top padding/margin here as requested */
}

/* Spacer div for content *within* mainstage to clear the fixed header */
.mainstage .makeroom {
    height: max(12vw, 12vh, 120px); /* Height matches the main header */
    clear: both;
    display: block;
}

/* Specific Styles for Internal Content Headers */
.mainstage section header.major {
    position: relative;
    text-align: left;
    margin-bottom: 2em;
    padding: 0;
    background: none;
    height: auto;
    min-height: unset;
    max-height: unset;

    /* --- NEW/MODIFIED STYLES FOR FLEXBOX --- */
    display: flex;         /* Make it a flex container */
    flex-direction: column;   /* Stack children vertically */
    justify-content: flex-end; /* Push content to the bottom */
    align-items: flex-start;   /* Align items to the start (left) */
    min-height: 150px;         /* Give it a minimum height if not naturally tall */
                               /* Adjust this value as needed based on your content. */
                               /* It needs to be tall enough for the card to "sit" on its bottom. */
}

/* Adjust the .card to be pushed to the bottom */
.mainstage section header.major .card {
    position: relative;
    left: 5vw;
    transform: translateX(0);
    display: inline-block; /* Or block, depending on desired width behavior */
    margin: 0;

    /* --- NEW/MODIFIED STYLE TO PUSH TO BOTTOM --- */
    margin-top: auto;          /* This is the key to push it to the bottom */

    /* Existing styles */
    background-color: #222222;
    color: #eee;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.mainstage section header.major .card h1,
.mainstage section header.major .card h2,
.mainstage section header.major .card h3,
.mainstage section header.major .card h4,
.mainstage section header.major .card p {
    color: #f9f9f9;
}

.mainstage section header.major .card h5.free {
    background-color: #50B19A;
    color: #fff;
}
.mainstage section header.major .card h5.paid {
    background-color: #F5D55C;
    color: #000;
}
.mainstage section header.major .card h5.unreleased {
    background-color: #438BD3;
    color: #fff;
}

/* Styling for the box aligned to the bottom of mainstage */
.mainstage .bottom-box {
    position: absolute; /* Position relative to its closest positioned ancestor (mainstage) */
    bottom: 2em;      /* Adjust this value to control spacing from the bottom */
              /* Center horizontally */
    margin-left: 2em;
    width: 80%;         /* Set a width for your box */
    max-width: 800px;  /* Optional: Limit max-width for larger screens */
    padding: 0px;

    text-align: left;
    z-index: 50; /* Ensure it's above other elements if needed */
}

.mainstage .bottom-box h3 {
    color: #000;
    font-weight: 900;
    font-size: 1.4em;
    margin: 0;
    padding: 0;
}

.mainstage .bottom-box h1 {
    color: #000;
    font-size: 6em;
    font-weight: 700;
    line-height: 1em;
    font-family: 'Montserrat', sans-serif;;
    margin: 0;
    padding: 0;
    margin-left: -.06em;
}

.mainstage .bottom-box h2 {
    color: #000;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

/* Substage Sections */
.substage {

    padding: 2em 7vw;
    margin: 3em auto;
    max-width: 1200px;
    background-color: rgba(0,0,0,.4);
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.fullframe {
    min-height: 600px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.needpartimg {
    border-radius: 10px;
}


/* Optional: Adjust for smaller screens */
@media (max-width: 768px) {
    .mainstage .bottom-box {
        width: 100%; /* Make it wider on smaller screens */
        bottom: 15px; /* Slightly less space from bottom */
        padding: 0;

    }
}


.substage section {
    padding: 1em 2em;
}

.substage h2 {
    color: #f9f9f9;
    
    margin-bottom: 1em;
}

.substage hr {
    border-top: solid 1px #444;
}

.substage p {
    color: #cccccc;
}

.substage .message {
    background-color: #333333;
    padding: 1.5em;
    border-radius: 8px;
    
}

.substage .message a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    flex-wrap: wrap;
}

.substage .message .img, .substage .message .imgsmall {
    flex-shrink: 0;
}

.substage .message .img img {
    max-width: 150px;
    height: auto;
}
.substage .message .imgsmall img {
    max-width: 80px;
    height: auto;
}

.substage .message .desc {
    text-align: left;
    flex-grow: 1;
}

.substage .message .desc h2, .substage .message .desc h4 {
    color: #f9f9f9;
}

.substage .message .desc p, .substage .message .desc span {
    color: #cccccc;
}

.substage .message .desc input[type="text"],
.substage .message .desc input[type="email"] {
    background-color: #444444;
    border: 1px solid #555;
    color: #f0f0f0;
}

.substage .message .desc button {
    background-color: #50B19A;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
}

.substage .blogmiss .desc h2 {
    color: #f9f9f9;
}
.substage .blogmiss .desc p {
    color: #cccccc;
}
.substage .blogmiss .desc a#noentiendo {
    color: #64C9F9;
}

/* Grid Specific Styles */
.grid-wrapper {
    display: grid;
    grid-gap: 60px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 320px;
    grid-auto-flow: dense;
    padding: 20px;
}

.grid-wrapper > a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #333333;
}

.grid-wrapper a.wide {
    grid-column: span 2;
    background-position: 66.66% center;
    background-size: cover;
}

.grid-wrapper a.tall {
    grid-row: span 2;
    background-position: center 0%;
    background-size: 150%;
}

.grid-wrapper a.big {
    grid-column: span 2;
    grid-row: span 2;
}

/* CSS for Grid Item Labels */
.item-label {
    position: absolute;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    font-size: 1em;
    font-weight: 200;
    text-align: left;
    pointer-events: none;
    box-sizing: border-box;
    top: 0;
    left: 0;
    transform: none;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-family: 'Roboto', sans-serif;
}
.item-label > span {
    font-weight: 700;
}

/* File Download Section */
section.files p {
    color: #cccccc;
    width: 80%;
}

section.files p.share {
    display: inline-block;
    width: auto;
    padding: 1em;
    border: 6px #555 solid;
    background-color: #222;
    border-radius: 1em;
    color: #f0f0f0;
}

section.files p.share a {
    font-weight: bold;
    color: #fff;
}

section.files p.share a:hover {
    color: #FF0000 !important;
}

section.files p.license {
    display: inline-block;
    width: auto;
    padding: 1em;
    margin-right: 1em;
    background-image: repeating-linear-gradient(45deg, #fff, #fff 30px, #ccc 30px, #ccc 60px);
    border: 6px #555 solid;
    border-radius: 1em;
    color: #f0f0f0;
}

section.files p.license img {
    height: 2em;
    display: inline-block;
    padding-right: .5em;
    vertical-align: middle;
}

section.files p.license span {
    margin: 0 1em;
    padding: 0 0.6em 0.2em 0.6em;
    border-radius: .3em;
    background-color: #F5D55C;
    color: #000;
}

section.files p.license span b {
    color: #222;
}

section.files div.preview div {
    background: #4a4a4a;
    margin: 1em 0;
    border-radius: 1em;
}

section.files div.basic div.download {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid #555;
    color: #f0f0f0;
}

section.files div.basic div.download a {
    background-color: #64C9F9;
    color: #FFF;
    border: .1em solid #888;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 30px -10px;
}

section.files div.basic div.download a:hover {
    background-color: #3CACFB;
    border: .3em solid #FFF;
    transform: scale(1.2);
    box-shadow: rgba(0, 0, 0, 0.6) 0px 60px 40px -7px;
}

section.files div.basic div.download a.buy {
    background-color: #50B19A;
}

section.files div.basic div.name {
    color: #f0f0f0;
}

section.files div.basic div.desc {
    color: #cccccc;
}

section.files div.big .wrapper {
    background: linear-gradient(180deg, #374b55 0%, #2a2a2a 49%, #1a1a1a 100%);
}

section.files div.big .wrapperBundle {
    background: linear-gradient(149deg, #374b50 3%, #2a2a2a 53%, #1a1a1a 98%);
}

section.files div.big div.info {
    background-color: #444;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 14px 28px, rgba(0, 0, 0, 0.3) 0px 10px 10px;
}
section.files div.big div.info h4 {
    color: #FFF;
}
section.files div.big div.info span {
    color: #eee;
}

section.files div.small .wrapper {
    background: linear-gradient(128deg, #5d7b8b 0%, #2a2a2a 16%, #1a1a1a 30%, #000000 40%);
}

section.files div.small div.download {
    background-color: rgba(255, 255, 255, 0.1);
}

section.files div.small div.name {
    color: #f0f0f0;
}
section.files div.small div.desc {
    color: #cccccc;
}

/* Share box */
.sharebox {
    
    padding: 2em 0;
}

.sharebox a {
    line-height: 4 !important;
    filter: grayscale(80%);
    margin: 30px;
    scale: 1.2;
    transition: all 300ms ease !important;
}

.sharebox a:hover {
    filter: grayscale(0%);
    scale: 1.5;
}

/* Needed Parts Section */
section.neededparts h2 {
    color: #f9f9f9;
}
section.neededparts p {
    color: #cccccc;
}



/* Styling for each part entry - to achieve inline, table-like display */
.neededparts-item {
    background-color: #2a2a2a;
    color: #f0f0f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 0.5em; /* Space between items */
    display: flex; /* Make it a flex container */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.neededparts-item .img-col {
    flex: 0 0 16.66667%; /* Equivalent to col-2, fixed width */
    max-width: 16.66667%;
    padding-right: 1em; /* Spacing for image */
}
.neededparts-item .img-col img {
    width: 100%;
    height: auto;
    border-radius: 4px;

}

.neededparts-item .text-col {
    flex: 1; /* Take up remaining space */
    padding-right: 1em;
}

.neededparts-item .text-col h5 {
    color: #f9f9f9;
    font-size: 1.2em;
    margin-bottom: 0.2em;
    display: flex; /* For tags to align with title */
    align-items: center;
    flex-wrap: wrap; /* Allow tags to wrap */
}

.neededparts-item .text-col .desc,
.neededparts-item .text-col .job,
.neededparts-item .text-col .source {
    font-size: 0.9em;
    color: #cccccc;
}

.neededparts-item .count-col,
.neededparts-item .price-col {
    flex: 0 0 16.66667%; /* Equivalent to col-2 */
    max-width: 16.66667%;
    
}

.neededparts-item .count-col h4,
.neededparts-item .price-col h4 {
    color: #f9f9f9;
}

.neededparts-item .price-col p {
    color: #cccccc;
    font-size: 0.8em;
    margin-bottom: 0;
}

/* Tags for parts list */
.neededparts-item .text-col h5 span {
    display: inline-block;
    padding: 0.2em 0.5em;
    margin-left: 0.5em;
    border-radius: 0.3em;
    font-size: 0.7em;
    font-weight: normal;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap; /* Prevent tags from breaking */
}
.neededparts-item .text-col h5 span.custom { background-color: #e74c3c; }
.neededparts-item .text-col h5 span.stock { background-color: #27ae60; }
.neededparts-item .text-col h5 span.common { background-color: #3498db; }
.neededparts-item .text-col h5 span.special { background-color: #f39c12; }
.neededparts-item .text-col h5 span.optional { background-color: #9b59b6; }
.neededparts-item .text-col h5 span.lipo { background-color: #c0392b; }
.neededparts-item .text-col h5 span.unitbymeter,
.neededparts-item .text-col h5 span.unitbysqcm,
.neededparts-item .text-col h5 span.unitbycm { background-color: #7f8c8d; }

.partSummary {
    margin-top: 1em;
    background-color: #1a1a1a;
    border-top: 1px solid #444;
    padding: 1em;
    color: #f0f0f0;
}
.partSummary .row {
    align-items: center;
}
.partSummary .desc {
    font-weight: bold;
    color: #f0f0f0;
}
.partSummary .count span {
    font-size: 0.8em;
    color: #cccccc;
}
.partSummary .sum {
    font-weight: bold;
    color: #f0f0f0;
}

/* Related Items (catalog items) */
.substage .detailend h2 {
    
}
.substage .detailend hr.endofpage {
    border-top: solid 1px #444;
}

.substage .detailend .row {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line if the screen is too small */
    justify-content: center; /* Centers the items when there's extra space */
    gap: 20px; /* Adds space between the items */
    margin-left: 0; /* Override default .row negative margin if it causes issues */
    margin-right: 0;
    padding: 0;
}

/* Style for each individual related item figure */
figure.picture-item {
    /* Existing styles are fine, but ensure these Flexbox properties are present */
    flex: 1 1 calc(32% - 15px); /* Distribute space evenly, account for gap */
    /* flex-grow: 1; - allows items to grow and fill available space */
    /* flex-shrink: 1; - allows items to shrink if necessary */
    /* flex-basis: calc(33.333% - 20px); - sets a preferred width for 3 items per row with 20px gap */

    max-width: calc(33.333% - 20px); /* Ensures a maximum of 3 items per row with gap */
    min-width: 280px; /* Adjust if your cards need a certain minimum width before wrapping */

    background-color: #222222;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    /* margin-bottom: 2em; - this should be handled by 'gap' on the parent, remove if present */
}



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

.card-x {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.card-x span {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.2



}



/* Add/Modify in your main CSS file */

/* Ensure the outer container of the image enforces 1x1 ratio */
.picture-item__inner {
    position: relative;
    overflow: hidden;
    /* Remove fixed height if present and rely on aspect-ratio or padding-bottom */
    /* height: 100%; <- Remove this if it's there and conflicting with aspect ratio */
}

/* Use aspect-ratio property for modern browsers (best practice) */
.picture-item__inner .aspect {
    width: 100%;
    aspect-ratio: 1 / 1; /* This makes the box a perfect square */
    position: relative; /* Needed for absolute positioning of aspect__inner */
}

/* For older browsers or as a fallback, use padding-bottom trick */
/* If you need IE11 support, replace the 'aspect-ratio' above with this: */
/*
.picture-item__inner .aspect {
    width: 100%;
    padding-bottom: 100%; // Creates a 1:1 aspect ratio container
    position: relative;
}
*/

.picture-item__inner .aspect__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensure image doesn't overflow this inner container */
}

.picture-item__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is crucial: it crops and centers the image within the 1x1 container */
    transition: transform 0.3s ease-in-out;
}




.sharebox {
  text-align: center;
}

.sharebox a {
  line-height: 4 !important;
  filter: grayscale(100%);
  margin: 60px;
  scale: 1.5;
  transition: all 300ms ease !important;
}

.sharebox a:hover {
  filter: grayscale(0%);
  scale: 2;
}