/*

Margin

*/

.m-1 {
    margin: calc(var(--spacing) * 1);
}

.m-2 {
    margin: calc(var(--spacing) * 2);
}

.m-3 {
    margin: calc(var(--spacing) * 3);
}

.m-4 {
    margin: calc(var(--spacing) * 4);
}

.m-5 {
    margin: calc(var(--spacing) * 5);
}

.m-6 {
    margin: calc(var(--spacing) * 6);
}

.m-7 {
    margin: calc(var(--spacing) * 7);
}

.m-8 {
    margin: calc(var(--spacing) * 8);
}

.m-9 {
    margin: calc(var(--spacing) * 9);
}

.m-10 {
    margin: calc(var(--spacing) * 10);
}

.m-11 {
    margin: calc(var(--spacing) * 11);
}

.m-12 {
    margin: calc(var(--spacing) * 12);
}

.m-13 {
    margin: calc(var(--spacing) * 13);
}

.m-14 {
    margin: calc(var(--spacing) * 14);
}

.m-15 {
    margin: calc(var(--spacing) * 15);
}

.m-16 {
    margin: calc(var(--spacing) * 16);
}

.m-17 {
    margin: calc(var(--spacing) * 17);
}

.m-18 {
    margin: calc(var(--spacing) * 18);
}

.m-19 {
    margin: calc(var(--spacing) * 19);
}

.m-20 {
    margin: calc(var(--spacing) * 20);
}







/*

Margin Top

*/
.mt-1 {
    margin-top: calc(var(--spacing) * 1);
}

.mt-2 {
    margin-top: calc(var(--spacing) * 2);
}

.mt-3 {
    margin-top: calc(var(--spacing) * 3);
}

.mt-4 {
    margin-top: calc(var(--spacing) * 4);
}

.mt-5 {
    margin-top: calc(var(--spacing) * 5);
}

.mt-6 {
    margin-top: calc(var(--spacing) * 6);
}

.mt-7 {
    margin-top: calc(var(--spacing) * 7);
}

.mt-8 {
    margin-top: calc(var(--spacing) * 8);
}

.mt-9 {
    margin-top: calc(var(--spacing) * 9);
}

.mt-10 {
    margin-top: calc(var(--spacing) * 10);
}

.mt-11 {
    margin-top: calc(var(--spacing) * 11);
}

.mt-12 {
    margin-top: calc(var(--spacing) * 12);
}

.mt-13 {
    margin-top: calc(var(--spacing) * 13);
}

.mt-14 {
    margin-top: calc(var(--spacing) * 14);
}

.mt-15 {
    margin-top: calc(var(--spacing) * 15);
}

.mt-16 {
    margin-top: calc(var(--spacing) * 16);
}

.mt-17 {
    margin-top: calc(var(--spacing) * 17);
}

.mt-18 {
    margin-top: calc(var(--spacing) * 18);
}

.mt-19 {
    margin-top: calc(var(--spacing) * 19);
}

.mt-20 {
    margin-top: calc(var(--spacing) * 20);
}




/*

Margin Bottom

*/
.mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
}

.mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
}

.mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
}

.mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
}

.mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
}

.mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
}

.mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
}

.mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
}

.mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
}

.mb-11 {
    margin-bottom: calc(var(--spacing) * 11);
}

.mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
}

.mb-13 {
    margin-bottom: calc(var(--spacing) * 13);
}

.mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
}

.mb-15 {
    margin-bottom: calc(var(--spacing) * 15);
}

.mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
}

.mb-17 {
    margin-bottom: calc(var(--spacing) * 17);
}

.mb-18 {
    margin-bottom: calc(var(--spacing) * 18);
}

.mb-19 {
    margin-bottom: calc(var(--spacing) * 19);
}

.mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
}

/*

Margin Left

*/
.ml-1 {
    margin-left: calc(var(--spacing) * 1);
}

.ml-2 {
    margin-left: calc(var(--spacing) * 2);
}

.ml-3 {
    margin-left: calc(var(--spacing) * 3);
}

.ml-4 {
    margin-left: calc(var(--spacing) * 4);
}

.ml-5 {
    margin-left: calc(var(--spacing) * 5);
}

.ml-6 {
    margin-left: calc(var(--spacing) * 6);
}

.ml-7 {
    margin-left: calc(var(--spacing) * 7);
}

.ml-8 {
    margin-left: calc(var(--spacing) * 8);
}

.ml-9 {
    margin-left: calc(var(--spacing) * 9);
}

.ml-10 {
    margin-left: calc(var(--spacing) * 10);
}

.ml-11 {
    margin-left: calc(var(--spacing) * 11);
}

.ml-12 {
    margin-left: calc(var(--spacing) * 12);
}

.ml-13 {
    margin-left: calc(var(--spacing) * 13);
}

.ml-14 {
    margin-left: calc(var(--spacing) * 14);
}

.ml-15 {
    margin-left: calc(var(--spacing) * 15);
}

.ml-16 {
    margin-left: calc(var(--spacing) * 16);
}

.ml-17 {
    margin-left: calc(var(--spacing) * 17);
}

.ml-18 {
    margin-left: calc(var(--spacing) * 18);
}

.ml-19 {
    margin-left: calc(var(--spacing) * 19);
}

.ml-20 {
    margin-left: calc(var(--spacing) * 20);
}

/*

Margin Right

*/
.mr-1 {
    margin-right: calc(var(--spacing) * 1);
}

.mr-2 {
    margin-right: calc(var(--spacing) * 2);
}

.mr-3 {
    margin-right: calc(var(--spacing) * 3);
}

.mr-4 {
    margin-right: calc(var(--spacing) * 4);
}

.mr-5 {
    margin-right: calc(var(--spacing) * 5);
}

.mr-6 {
    margin-right: calc(var(--spacing) * 6);
}

.mr-7 {
    margin-right: calc(var(--spacing) * 7);
}

.mr-8 {
    margin-right: calc(var(--spacing) * 8);
}

.mr-9 {
    margin-right: calc(var(--spacing) * 9);
}

.mr-10 {
    margin-right: calc(var(--spacing) * 10);
}

.mr-11 {
    margin-right: calc(var(--spacing) * 11);
}

.mr-12 {
    margin-right: calc(var(--spacing) * 12);
}

.mr-13 {
    margin-right: calc(var(--spacing) * 13);
}

.mr-14 {
    margin-right: calc(var(--spacing) * 14);
}

.mr-15 {
    margin-right: calc(var(--spacing) * 15);
}

.mr-16 {
    margin-right: calc(var(--spacing) * 16);
}

.mr-17 {
    margin-right: calc(var(--spacing) * 17);
}

.mr-18 {
    margin-right: calc(var(--spacing) * 18);
}

.mr-19 {
    margin-right: calc(var(--spacing) * 19);
}

.mr-20 {
    margin-right: calc(var(--spacing) * 20);
}

/*

Padding

*/

.p-1 {
    padding: calc(var(--spacing) * 1);
}

.p-2 {
    padding: calc(var(--spacing) * 2);
}

.p-3 {
    padding: calc(var(--spacing) * 3);
}

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.p-5 {
    padding: calc(var(--spacing) * 5);
}

.p-6 {
    padding: calc(var(--spacing) * 6);
}

.p-7 {
    padding: calc(var(--spacing) * 7);
}

.p-8 {
    padding: calc(var(--spacing) * 8);
}

.p-9 {
    padding: calc(var(--spacing) * 9);
}

.p-10 {
    padding: calc(var(--spacing) * 10);
}

.p-11 {
    padding: calc(var(--spacing) * 11);
}

.p-12 {
    padding: calc(var(--spacing) * 12);
}

.p-13 {
    padding: calc(var(--spacing) * 13);
}

.p-14 {
    padding: calc(var(--spacing) * 14);
}

.p-15 {
    padding: calc(var(--spacing) * 15);
}

.p-16 {
    padding: calc(var(--spacing) * 16);
}

.p-17 {
    padding: calc(var(--spacing) * 17);
}

.p-18 {
    padding: calc(var(--spacing) * 18);
}

.p-19 {
    padding: calc(var(--spacing) * 19);
}

.p-20 {
    padding: calc(var(--spacing) * 20);
}







/*

Padding Top

*/
.pt-1 {
    padding-top: calc(var(--spacing) * 1);
}

.pt-2 {
    padding-top: calc(var(--spacing) * 2);
}

.pt-3 {
    padding-top: calc(var(--spacing) * 3);
}

.pt-4 {
    padding-top: calc(var(--spacing) * 4);
}

.pt-5 {
    padding-top: calc(var(--spacing) * 5);
}

.pt-6 {
    padding-top: calc(var(--spacing) * 6);
}

.pt-7 {
    padding-top: calc(var(--spacing) * 7);
}

.pt-8 {
    padding-top: calc(var(--spacing) * 8);
}

.pt-9 {
    padding-top: calc(var(--spacing) * 9);
}

.pt-10 {
    padding-top: calc(var(--spacing) * 10);
}

.pt-11 {
    padding-top: calc(var(--spacing) * 11);
}

.pt-12 {
    padding-top: calc(var(--spacing) * 12);
}

.pt-13 {
    padding-top: calc(var(--spacing) * 13);
}

.pt-14 {
    padding-top: calc(var(--spacing) * 14);
}

.pt-15 {
    padding-top: calc(var(--spacing) * 15);
}

.pt-16 {
    padding-top: calc(var(--spacing) * 16);
}

.pt-17 {
    padding-top: calc(var(--spacing) * 17);
}

.pt-18 {
    padding-top: calc(var(--spacing) * 18);
}

.pt-19 {
    padding-top: calc(var(--spacing) * 19);
}

.pt-20 {
    padding-top: calc(var(--spacing) * 20);
}




/*

Padding Bottom

*/
.pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
}

.pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
}

.pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
}

.pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
}

.pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
}

.pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
}

.pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
}

.pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
}

.pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
}

.pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
}

.pb-11 {
    padding-bottom: calc(var(--spacing) * 11);
}

.pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
}

.pb-13 {
    padding-bottom: calc(var(--spacing) * 13);
}

.pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
}

.pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
}

.pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
}

.pb-17 {
    padding-bottom: calc(var(--spacing) * 17);
}

.pb-18 {
    padding-bottom: calc(var(--spacing) * 18);
}

.pb-19 {
    padding-bottom: calc(var(--spacing) * 19);
}

.pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
}

/*

Padding Left

*/
.pl-1 {
    padding-left: calc(var(--spacing) * 1);
}

.pl-2 {
    padding-left: calc(var(--spacing) * 2);
}

.pl-3 {
    padding-left: calc(var(--spacing) * 3);
}

.pl-4 {
    padding-left: calc(var(--spacing) * 4);
}

.pl-5 {
    padding-left: calc(var(--spacing) * 5);
}

.pl-6 {
    padding-left: calc(var(--spacing) * 6);
}

.pl-7 {
    padding-left: calc(var(--spacing) * 7);
}

.pl-8 {
    padding-left: calc(var(--spacing) * 8);
}

.pl-9 {
    padding-left: calc(var(--spacing) * 9);
}

.pl-10 {
    padding-left: calc(var(--spacing) * 10);
}

.pl-11 {
    padding-left: calc(var(--spacing) * 11);
}

.pl-12 {
    padding-left: calc(var(--spacing) * 12);
}

.pl-13 {
    padding-left: calc(var(--spacing) * 13);
}

.pl-14 {
    padding-left: calc(var(--spacing) * 14);
}

.pl-15 {
    padding-left: calc(var(--spacing) * 15);
}

.pl-16 {
    padding-left: calc(var(--spacing) * 16);
}

.pl-17 {
    padding-left: calc(var(--spacing) * 17);
}

.pl-18 {
    padding-left: calc(var(--spacing) * 18);
}

.pl-19 {
    padding-left: calc(var(--spacing) * 19);
}

.pl-20 {
    padding-left: calc(var(--spacing) * 20);
}

/*

Padding Right

*/
.pr-1 {
    padding-right: calc(var(--spacing) * 1);
}

.pr-2 {
    padding-right: calc(var(--spacing) * 2);
}

.pr-3 {
    padding-right: calc(var(--spacing) * 3);
}

.pr-4 {
    padding-right: calc(var(--spacing) * 4);
}

.pr-5 {
    padding-right: calc(var(--spacing) * 5);
}

.pr-6 {
    padding-right: calc(var(--spacing) * 6);
}

.pr-7 {
    padding-right: calc(var(--spacing) * 7);
}

.pr-8 {
    padding-right: calc(var(--spacing) * 8);
}

.pr-9 {
    padding-right: calc(var(--spacing) * 9);
}

.pr-10 {
    padding-right: calc(var(--spacing) * 10);
}

.pr-11 {
    padding-right: calc(var(--spacing) * 11);
}

.pr-12 {
    padding-right: calc(var(--spacing) * 12);
}

.pr-13 {
    padding-right: calc(var(--spacing) * 13);
}

.pr-14 {
    padding-right: calc(var(--spacing) * 14);
}

.pr-15 {
    padding-right: calc(var(--spacing) * 15);
}

.pr-16 {
    padding-right: calc(var(--spacing) * 16);
}

.pr-17 {
    padding-right: calc(var(--spacing) * 17);
}

.pr-18 {
    padding-right: calc(var(--spacing) * 18);
}

.pr-19 {
    padding-right: calc(var(--spacing) * 19);
}

.pr-20 {
    padding-right: calc(var(--spacing) * 20);
}

/*

Font Size

*/
.fs-1 {
    font-size: 1px;
}

.fs-2 {
    font-size: 2px;
}

.fs-3 {
    font-size: 3px;
}

.fs-4 {
    font-size: 4px;
}

.fs-5 {
    font-size: 5px;
}

.fs-6 {
    font-size: 6px;
}

.fs-7 {
    font-size: 7px;
}

.fs-8 {
    font-size: 8px;
}

.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-21 {
    font-size: 21px;
}

.fs-22 {
    font-size: 22px;
}

.fs-23 {
    font-size: 23px;
}

.fs-24 {
    font-size: 24px;
}

.fs-25 {
    font-size: 25px;
}

.fs-26 {
    font-size: 26px;
}

.fs-27 {
    font-size: 27px;
}

.fs-28 {
    font-size: 28px;
}

.fs-29 {
    font-size: 29px;
}

.fs-30 {
    font-size: 30px;
}

.fs-31 {
    font-size: 31px;
}

.fs-32 {
    font-size: 32px;
}

.fs-33 {
    font-size: 33px;
}

.fs-34 {
    font-size: 34px;
}

.fs-35 {
    font-size: 35px;
}

.fs-36 {
    font-size: 36px;
}

.fs-37 {
    font-size: 37px;
}

.fs-38 {
    font-size: 38px;
}

.fs-39 {
    font-size: 39px;
}

.fs-40 {
    font-size: 40px;
}

.fs-41 {
    font-size: 41px;
}

.fs-42 {
    font-size: 42px;
}


.fs-43 {
    font-size: 43px;
}

.fs-44 {
    font-size: 44px;
}


.fs-45 {
    font-size: 45px;
}

.fs-46 {
    font-size: 46px;
}


.fs-47 {
    font-size: 47px;
}

.fs-48 {
    font-size: 48px;
}

.fs-49 {
    font-size: 49px;
}

.fs-50 {
    font-size: 50px;
}

.rounded-xl {
    border-radius: 1rem;
}

/* Grid Utilities */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.mt-15 {
    margin-top: 3.75rem;
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* Store Badges */

.mobile-store-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem;
    padding-bottom: 1.5rem;
}

.store-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #1a1a1a;
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.store-badge:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.store-badge svg {
    flex-shrink: 0;
}


.mobil-store-buttones  a svg {
    width: 30px;
    height: 30px;
}