/*---------------------------------------------------------------------------------

 Theme Name:   CraftCart Company Theme
 Theme URI:    http://.c3-groups.com
 Description:  
 Author:       Oskar Lord
 Author URI:   http://.c3-groups.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

:root {
    
    /* ==========================================================================
    GLOBAL VARIABLES
    ========================================================================== */
    
    /* === Typography === */
    --font-body: 'Roboto', Arial, sans-serif;
    --font-heading: 'Montserrat', Helvetica, sans-serif;

    /* === Font Sizes === */
    --font-size-paragraph: 1.125rem;
    --font-size-button: 1rem;
	--icon-size-default: 2rem;

    /* === Alignment === */
    --text-left: left;
    --text-center: center;
    --text-justify: justify;

    /* === Line Height & Letter Spacing === */
    --line-height-s: 1.3;
    --line-height-m: 1.75;
    --line-height-l: 1.85;

    --letter-spacing-s: 0.1em;
    --letter-spacing-m: 0.15em;
    --letter-spacing-l: 0.2em;

    /* === Font Weights === */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    /* ==========================================================================
    SPACING & SIZING
    ========================================================================== */

    /* === Height Variables === */
    --height-s: 40vh;
    --height-m: 60vh;
    --height-l: 80vh;
    --height-full: 100vh;

    /* === Pixel width Variables === */
    --width-s: 900px;
    --width-m: 1280px;
    --width-default: 1440px;
    --width-l: 1600px;
    --width-xl: 1920px;
	
	/* === Viewport width Variables === */
	--width-80: 80vw;
	--width-90: 90vw;
	--width-full: 100vw;

    /* === Percentage-Based Sizing === */
    --size-50: 50%;
    --size-60: 60%;
    --size-70: 70%;
    --size-80: 80%;
    --size-90: 90%;
	--size-95: 95%;
    --size-100: 100%;

    /* === Pixel-Based Sizing === */
    --px-size-xs: 225px;
    --px-size-s: 300px;
    --px-size-m: 400px;
    --px-size-l: 500px;
    --px-size-xl: 600px;

    /* === Text based sizing === */
    --ch-s: 65ch;
    --ch-m: 75ch;
    --ch-l: 100ch;

    /* === Padding, Margin and Gap === */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 3rem;
    --space-xl: 4rem;
    --space-xxl: 5rem;

    /* === Button Spacing === */
    --button-padding-vertical: 1.2rem;
    --button-padding-horizontal: 2rem;

    /* ==========================================================================
    GRID AND FLEX VARIABLES
    ========================================================================== */
    
   /* === Grid System === */
    --grid-cols-1: repeat(1, 1fr);  
    --grid-cols-2: repeat(2, 1fr);  
    --grid-cols-3: repeat(3, 1fr); 
    --grid-cols-4: repeat(4, 1fr); 
    --grid-cols-5: repeat(5, 1fr); 
    --grid-cols-6: repeat(6, 1fr); 

    /* === Responsive Grid (Auto Sizing) === */
    --grid-cols-auto-fit: repeat(auto-fit, minmax(250px, 1fr)); 
    --grid-cols-auto-fill: repeat(auto-fill, minmax(250px, 1fr));  

    /* === Flexbox Direction === */
    --flex-row: row;     
    --flex-column: column; 

    /* === Flexbox Alignment (Cross Axis) === */
    --align-start: flex-start;  
    --align-center: center;      
    --align-end: flex-end;     
    --align-stretch: stretch;   

    /* === Flexbox Justification (Main Axis) === */
    --justify-start: flex-start;     
    --justify-center: center;        
    --justify-end: flex-end;         
    --justify-between: space-between; 
    --justify-around: space-around;   
    --justify-evenly: space-evenly; 

    /* ==========================================================================
    COLORS & OVERLAYS
    ========================================================================== */
    
   /* === General Colors === */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-primary: #111;
    --color-secondary: #333;
    --color-primary-light: #fff;
    --color-secondary-light: #fdfdfd;
    
    /* === Background Colors === */
    --bg-black: #000000;
    --bg-white: #ffffff;
    --bg-dark: linear-gradient(135deg, #000 0%, #111 100%);
    --bg-light: linear-gradient(135deg, rgba(249, 249, 249, 0.8) 0%, rgba(239, 239, 239, 0.8) 100%);

    /* === Gradient Backgrounds === */
    --bg-radial-primary: radial-gradient(circle, #0045a5 0%, #001b3d 100%);
    --bg-radial-secondary: radial-gradient(circle, #006c47 0%, #00331f 100%);

    /* === Overlay Colors === */
    --overlay-light: rgba(255, 255, 255, 0.3);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-primary: rgba(0, 15, 45, 0.3);
    --overlay-secondary: rgba(0, 140, 89, 0.3);

    /* === Vehicle Colors === */
    --vehicle-color-white: #ffffff;
    --vehicle-color-black: #000000;
    --vehicle-color-darkblue: #000f2d;
    --vehicle-color-lightblue: #3A7BD5;
    --vehicle-color-green: #003A1D;
    --vehicle-color-red: #8C0014;
	
	/* === Icon Colors === */
    --Icon-color-primary: #006400;
    --vehicle-color-black: #000000;
    --vehicle-color-darkblue: #000f2d;
    --vehicle-color-lightblue: #3A7BD5;
    --vehicle-color-green: #003A1D;
    --vehicle-color-red: #8C0014;

    /* ==========================================================================
    Shadows and radiuses
    ========================================================================== */

    /* Shadows */
    --shadow-s: 0px 2px 6px rgba(0, 0, 0, 0.15), 
            0px 0px 0px 1px rgba(0, 0, 0, 0.10);
    --shadow-m: 0px 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-l: 0px 4px 12px rgba(0, 0, 0, 0.16);
   
    /* Radius */
    --radius-s: 5px;
    --radius-m: 10px;
    --radius-l: 15px;
    --radius-round: 50px;

    /* ==========================================================================
    Animation and Transitions
    ========================================================================== */

   /* === Transition Durations === */
    --transition-fast: 0.15s ease-in-out;  /* Quick transitions */
    --transition-medium: 0.3s ease-in-out; /* Default smooth transition */
    --transition-slow: 0.6s ease-in-out;   /* Longer, more dramatic */

    /* === Transition Effects === */
    --transition-fade: opacity var(--transition-medium);
    --transition-move: transform var(--transition-medium);
    --transition-color: color var(--transition-medium), background-color var(--transition-medium);

    /* === Animation Durations === */
    --animation-fast: 0.3s;   /* Snappy animations */
    --animation-medium: 0.6s; /* Balanced animations */
    --animation-slow: 1s;     /* More dramatic */

    /* === Easing Functions === */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);   /* Accelerates */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);  /* Decelerates */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth start and end */

    /* === Keyframe-Based Animation Timing === */
    --animation-bounce: 1s var(--ease-in-out) infinite;
    --animation-fade-in: 0.5s var(--ease-out) forwards;
    --animation-slide-up: 0.5s var(--ease-out) forwards;
}

/* ==========================================================================
   BASE STYLES & TYPOGRAPHY
   ========================================================================== */

html {
    font-size: 16px;
    box-sizing: border-box;
}

body, .et_pb_body {
    font-family: var(--font-body);
    color: var(--color-secondary);
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Helvetica, sans-serif;
    font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	line-height: var(--line-height-s);
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
	padding: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

h1 { font-size: clamp(2rem, 1.5vw + 1.7rem, 3.5rem); }  
h2 { font-size: clamp(1.75rem, 0.75vw + 1.6rem, 2.5rem); } 
h3 { font-size: clamp(1.5rem, 0.5vw + 1.4rem, 2rem); }  
h4 { font-size: clamp(1.25rem, 0.25vw + 1.2rem, 1.5rem); }  
h5 { font-size: clamp(1rem, 0.25vw + 0.95rem, 1.25rem); }  
h6 { font-size: clamp(1rem, 0.25vw + 0.95rem, 1.25rem); font-weight: var(--font-weight-medium); } 


/* === Paragraphs === */
p {
    font-size: var(--font-size-paragraph); 
    line-height: var(--line-height-l); 
    margin-bottom: var(--space-m) !important;
}

/* === Lists === */
li {
    font-size: 1.125rem; 
    line-height: var(--line-height-l); 
}

/* === Links === */
a {
    font-size: var(--font-size-paragraph);
    text-decoration: none;
	color: inherit;
}

a:hover, a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px; 
    opacity: 0.85; 
    transition: opacity 0.2s ease-in-out, text-decoration-thickness 0.2s ease-in-out;
}

/* ==========================================================================
   Responsive styling text
   ========================================================================== */

@media (max-width: 980px) {
	h1, h2, h3, h4, h5, h6 {
		margin-top: var(--space-s) !important;
		margin-bottom: var(--space-xs) !important;
		
	}
    p {
        max-width: var(--width-90);
		margin-bottom: var(--space-s) !important;
    }
}

@media (max-width: 768px) {
    p {font-size: 1rem !important;}
}


/* ==========================================================================
    Header and Footer
   ========================================================================== */

/* ✅ Keep Header Fixed (No Shrinking) */

#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    transition: none !important; /* No shrinking effect */
}

.et_menu_container {
	width: var(--size-90);
	max-width: var(--width-full) !important;
}

#et-top-navigation {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
}


#main-header li a {
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-size: 1rem;
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-m);
	transition: all 0.3s ease;
	font-weight: 600;
	text-decoration: none;
}

.et_mobile_menu li a {
	text-transform: uppercase !important;
	letter-spacing: var(--letter-spacing-m);
	color: var(--color-primary) !important;
	border-bottom: 0px !important;
}

.current-menu-item a {
    color: #e82127 !important; /* Tesla Red */
}

#main-header .mobile_menu_bar:before {
    opacity: 0;
}

#main-header .mobile_menu_bar:after {
    content: "MENY";
    position: relative;
    color: var(--color-primary) !important;
    cursor: pointer;
    font-size: 1rem;
	font-family: var(--font-heading);
	letter-spacing: var(--letter-spacing-m);
}

#main-header .opened .mobile_menu_bar:after {
    content: "STÄNG";
}

.et_mobile_menu {
	border-color: var(--color-primary) !important;
	background: rgba(255, 255, 255, 0.9) !important;
}

#footer-container.et_pb_section {
	background: rgba(255, 255, 255, 0.9);
}

#footer-container .et_pb_row {
	width: var(--size-100);
	max-width: var(--width-full);
	display: flex;
	flex-direction: var(--flex-column);
	justify-content: var(--justify-center);
}

#footer-container .et_pb_row.footer-top {
	min-height: var(--height-s);
}

#footer-container .et_pb_row.footer-bottom {
	background: var(--bg-dark);
}

#footer-container .et_pb_column{
	display: grid;
	align-items: center;
	gap: var(--space-m);
	padding-top: var(--space-l);
	padding-bottom: var(--space-l);
}

#footer-container .footer-bottom .et_pb_column {
	grid-template-columns: var(--grid-cols-4);
}


#footer-container .et_pb_module {
	text-align: var(--text-center);
}

#footer-container a {
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-size: 1rem;
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-m);
	transition: all 0.3s ease;
	font-weight: 600;
	text-decoration: none;
}

#footer-container .footer-bottom a {
	color: var(--color-white);
}

#footer-container .mobile_menu_bar:before {
    opacity: 1;
	color: black;
}



@media (max-width: 980px) {
    #page-container {
        padding-top: 0px !important; /* Match header height */
 		margin-top: 0 !important; /* Ensure no extra space */
	}
	.et_non_fixed_nav.et_transparent_nav #main-header, 
	.et_non_fixed_nav.et_transparent_nav #top-header, 
	.et_fixed_nav #main-header, 
	.et_fixed_nav #top-header {
		position: fixed !important;
	}
	
	 #main-header {
     	top: 0 !important; /* Forces it to stay at the top */
        position: fixed !important; /* Ensures it's fixed */
    }
	
	#footer-container.et_pb_section {		
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	#footer-container .et_pb_column {		
		grid-template-columns: var(--grid-cols-1) !important;
	}
	
	
	#logo {
		max-width: var(--px-size-s) !important;
	}
	
	.et_mobile_menu {
    overflow: scroll !important;
    max-height: var(--height-l);
	}
}


@media (max-width: 768px) {
    #logo {
        max-width: var(--px-size-xs) !important;
	}
}

/* ==========================================================================
   Container styles
   ========================================================================== */

/* === Sections === */
.craftcart.et_pb_section {
    padding: var(--space-m) 0;
    margin: 0 auto;
}

/* === Rows === */
.craftcart .et_pb_row {
    max-width: var(--width-default); 
    padding: 0; 
    gap: var(--space-m); 
	margin: 0 auto;
}

/* === Columns === */
.craftcart .et_pb_column {
	display: flex;
	flex-direction: column;
    justify-content: center !important;
    align-items: center !important; 
    padding: var(--space-m);
	width: var(--size-100) !important;
	max-width: var(--size-100) !important; 
}

.craftcart .image-column.et_pb_column {
	min-height: 550px;
}

.craftcart .et_pb_module {
	margin-bottom: var(--space-m) !important;
	margin: 0 auto;
}

.craftcart .et_pb_text {
	max-width: var(--ch-m);
}

@media (max-width: 980px) {
    /* === Container adjustments === */
	.craftcart.et_pb_section { 
		margin-left: var(--space-s) !important;
		margin-right: var(--space-s) !important;}
	
	.craftcart.et_pb_section.flex { 
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
    .craftcart .et_pb_row {
		width: var(--size-100);
        max-width: var(--width-full);
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: var(--space-s);
        flex-direction: column;
    }
	
    .craftcart .et_pb_column {
        flex-basis: 100%;
		padding: var(--space-s) !important;
	}
	
	.craftcart .image-column.et_pb_column {
		min-height: 500px;
	}
	
	.craftcart .et_pb_module {
	margin-bottom: var(--space-s) !important;
	}
	
}

@media (max-width: 768px) {
	/* === Container adjustments === */
    .craftcart.et_pb_section {
        padding: var(--space-s) 0;
    }
	
	.craftcart .et_pb_column {
		padding: var(--space-xs) !important;
	}
	
	.craftcart .image-column.et_pb_column {
		min-height: 450px;
	}
}


@media (max-width: 480px) {
	.craftcart .image-column.et_pb_column {
		min-height: 400px;
	}

    .craftcart .et_pb_module {
        padding: var(--space-xs, 0.5rem);
    }
}

/* ==========================================================================
   Button styles
   ========================================================================== */
.craftcart.et_pb_section .et_pb_button_module_wrapper {
    display: flex !important;
    width: 90% !important;
    justify-content: center; /* Ensures text stays centered */
}

.craftcart.et_pb_section .et_button_no_icon,
.craftcart.et_pb_section .et_pb_button,
.craftcart.et_pb_section .et_pb_button.light,
.craftcart.et_pb_section .et_pb_button.fullwidth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    min-width: 300px;
    max-width: var(--size-100);
    border: 2px solid var(--color-black);
    border-radius: 0;
    font-family: var(--font-heading, 'Montserrat', Helvetica, sans-serif);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-m) !important;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Dark button */
.craftcart.et_pb_section .et_button_no_icon,
.craftcart.et_pb_section .et_pb_button {
    color: var(--color-white);
    background-color: var(--bg-black) !important;
    border-color: var(--color-black);
}

/* Light Button */
.craftcart.et_pb_section .et_pb_button.light {
    color: var(--color-black) !important;
    background-color: var(--bg-white) !important;
}

/* Full-Width Button  */
.craftcart.et_pb_section .et_pb_button.fullwidth {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
}

/* Button hover effects */
.craftcart.et_pb_section .et_button_no_icon:hover,
.craftcart.et_pb_section .et_pb_button:hover {
	color: var(--color-white) !important;
    opacity: 0.85;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
}

/* Button hover effects */
.craftcart.et_pb_section .et_pb_button.light:hover {
	color: var(--color-black) !important;
    opacity: 0.85;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
}

@media (max-width: 980px) {
	/* === Button adjustments === */
    .craftcart.et_pb_section .et_pb_button_module_wrapper {
        display: flex !important;
        width: var(--size-100) !important;
        justify-content: center; 
    }
}

/* ==========================================================================
   Image Styles
   ========================================================================== */
.craftcart img {
    display: inline-block;
    width: var(--size-100); /* Ensures it fills the container */
    max-width: var(--size-100); /* Prevents overflow */
    margin: 0 auto !important; /* Centers the image */
}

.craftcart .et_pb_image {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==========================================================================
   blurb Styles
   ========================================================================== */
.craftcart .et_pb_blurb {
	width: var(--size-100);
	margin: 0 auto !important;
}

.craftcart .et_pb_blurb .et_pb_blurb_container {
	text-align: center !important;
}

/* ==========================================================================
   Slider Styles
   ========================================================================== */

/* Removes extra padding from the entire slider container */
.et_pb_slider {
	padding: 0 !important;
	margin-top: 0!important;
}

/* Removes default padding from individual slides */
.et_pb_slider .et_pb_slide {
    padding: 0 !important;
}

/* Adjusts slider description box for better text alignment */
.et_pb_slider .et_pb_slide_description {
	padding: 0;
	padding-bottom: var(--space-m, 2rem);
    text-align: left;
	width: 100%;
    animation: none;
}

.et_pb_slider .et_pb_slide_description p {
	max-width: var(--ch-m);
}

/* Ensures all images inside the slider fill their container */
.et_pb_slider img {
    width: var(--size-100) !important; 
    height: auto !important; 
    object-fit: cover; 
    object-position: center; 
    margin-bottom: var(--space-s);
}

/* Adjusts size of slider navigation dots for better visibility */
.et_pb_slider .et-pb-controllers a,
.et_pb_slider .et-pb-controllers .et-pb-active-control {
    width: 12px;
    height: 12px;
}

@media (max-width: 480px) {
	/* === Slide image Adjustments === */
    .et_pb_slider img {
        object-fit: contain;
    }
}

.carousel-container.et_pb_column {
	display: flex;
	flex-direction: column;
	justify-content: space-between !important;
	align-items: stretch;
	height: 100% important;
}
.carousel .swiper-pagination-bullet{
	width: 30% !important;
	border-radius: 0;
}

.carousel_small .swiper-pagination-bullet{
	width: 20% !important;
	border-radius: 0;
}


/* ==========================================================================
   Table Styles
   ========================================================================== */
.dvmd_tm_tcell .dvmd_tm_chead { box-shadow: var(--shadow-s) !important;}
.dvmd_table_maker h3 { font-size: 1.25rem; text-align: center !important; }
.dvmd_table_maker h4 { font-size: 1.125rem; text-align: center !important; }
.dvmd_table_maker h5 { font-size: 1rem; text-align: left !important;}
.dvmd_table_maker h6 { font-size: 1rem; text-align: left !important;}

.dvmd_table_maker_0 .dvmd_tm_image {
	padding-top: var(--space-m) !important;
	padding-bottom: var(--space-m) !important;
}

.dvmd_tm_icon.ei.ei-default {
	font-size: var(--icon-size-default) !important; 
	color: var(--Icon-color-primary);
}

.dvmd_tm_icon.ei.ei-minus-06 {
	font-size: var(--icon-size-default) !important; 
	color: var(--color-primary) !important;
}

/* ==========================================================================
   Grid and Flex system
   ========================================================================== */

.grid {
    display: grid;
    max-width: var(--width-xl) !important;
    gap: var(--space-m);
}

/* Grid columns */
.grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
.grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
.grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
.grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
.grid-cols-5 { grid-template-columns: var(--grid-cols-5); }
.grid-cols-6 { grid-template-columns: var(--grid-cols-6); }

.flex {
    display: flex;
    flex-direction: var(--flex-column);
    justify-content: var(--justify-center);
    align-items: var(--align-center);
    gap: var(--space-m);
}

.flex .et_pb_text {
	text-align: center;
}

/* Flex layout */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Grid and Flex positioning  */
.justify-start {justify-content: var(--justify-start);}
.justify-center {justify-content: var(--justify-center);}
.justify-end {justify-content: var(--justify-end);}
.justify-between {justify-content: var(--justify-between);}

/* Grid and Flex positioning  */
.align-start {align-items: var(--align-start);}
.align-center {align-items: var(--align-center);}
.align-end {align-items: var(--align-end);}
.align-stretch {align-items: var(--align-stretch);}

@media (max-width: 980px) {
    /* === Grid adjustments === */
    .grid, 
    .grid-cols-1, 
    .grid-cols-2, 
    .grid-cols-3, 
    .grid-cols-4, 
    .grid-cols-5, 
    .grid-cols-6 {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* Column Ordering */
    .column-1 { order: 1; }
    .column-2 { order: 2; }
}

/* ==========================================================================
   Sizing utilities
   ========================================================================== */

/* Container height  */
.fullscreen { height: var(--height-full); min-height: var(--height-full);}
.hero {  min-height: var(--height-l);}
.medium {  min-height: var(--height-m);}
.small {  min-height: var(--height-s);}
 
/* Container width */
.width-full {width: var(--size-100) !important; max-width: var(--width-full) !important;}
.width-xl {width: var(--size-100); max-width: var(--width-xl) !important; margin: 0 auto;}
.width-l {width: var(--size-100); max-width: var(--width-l) !important; margin: 0 auto;}
.width-m {width: var(--size-100); max-width: var(--width-m) !important; margin: 0 auto;}
.width-s {width: var(--size-100); max-width: var(--width-s) !important; margin: 0 auto;}

@media (max-width: 980px) {
	.fullscreen { height: 95vh; min-height: 95vh; }  
    .hero { min-height: 80vh; }  
    .medium { min-height: 55vh; }   
}

@media (max-width: 768px) {
    .fullscreen { height: 90vh; min-height: 90vh; }  
    .hero { min-height: 75vh; }  
    .medium { min-height: 50vh; }  
}

@media (max-width: 480px) {
	.fullscreen { height: 85vh; min-height: 85vh; }  
    .hero { min-height: 70vh; }  
    .medium { min-height: 45vh; }  
}

@media (max-width: 380px) {
	.fullscreen { height: 80vh; min-height: 80vh; }  
    .hero { min-height: 65vh; }  
    .medium { min-height: 40vh; }  
}

/* ==========================================================================
   Spacing utilities
   ========================================================================== */

/* Gap utilities */
.gap-none { gap: 0 !important; }
.gap-xs { gap: var(--space-xs); }  /* 8px */
.gap-sm { gap: var(--space-s); }    /* 16px */
.gap-md { gap: var(--space-m); }    /* 32px */
.gap-lg { gap: var(--space-l); }    /* 48px */
.gap-xl { gap: var(--space-xl); }   /* 64px */
.gap-xxl { gap: var(--space-xxl); } /* 96px */

/* Padding utilities */
.p-none { padding: 0 !important; }
.p-small { padding: var(--space-s) !important; }
.p-medium { padding: var(--space-m) !important; }
.p-large { padding: var(--space-l) !important; }

/* Horizontal Padding (Left + Right) */
.px-none { padding-left: 0; padding-right: 0; }
.px-small { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; }
.px-medium { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; }
.px-large { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; }

/* Vertical Padding (Top + Bottom) */
.py-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-small { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; }
.py-medium { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; }
.py-large { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; }

/* Margin utilities */
.m-none { margin: 0; }
.m-small { margin: var(--space-s) !important; }
.m-medium { margin: var(--space-m) !important; }
.m-large { margin: var(--space-l) !important; }

/* Horizontal Margin (Left + Right) */
.mx-none { margin-left: 0; margin-right: 0; }
.mx-small { margin-left: var(--space-s) !important; margin-right: var(--space-s) !important; }
.mx-medium { margin-left: var(--space-m) !important; margin-right: var(--space-m) !important; }
.mx-large { margin-left: var(--space-l) !important; margin-right: var(--space-l) !important; }

/* Vertical Margin (Top + Bottom) */
.my-none { margin-top: 0; margin-bottom: 0; }
.my-small { margin-top: var(--space-s) !important; margin-bottom: var(--space-s) !important; }
.my-medium { margin-top: var(--space-m) !important; margin-bottom: var(--space-m) !important; }
.my-large { margin-top: var(--space-l) !important; margin-bottom: var(--space-l) !important; }

@media (max-width: 980px) {
    .px-none,
    .px-small,
    .px-medium,
    .px-large {padding-left: 0 !important; padding-right: 0 !important;}
}


/* ==========================================================================
   Text utilities
   ========================================================================== */

/* Text colors  */
.text-dark h1, 
.text-dark h2, 
.text-dark h3, 
.text-dark h4, 
.text-dark h5, 
.text-dark h6 {color: var(--color-primary);}

.text-dark p {color: var(--color-secondary);}

.text-light h1, 
.text-light h2, 
.text-light h3, 
.text-light h4, 
.text-light h5, 
.text-light h6 {color: var(--color-primary-light);}

.text-light p {color: var(--color-secondary-light);}

/* Text positions  */
.text-left h1,
.text-left h2,
.text-left h3,
.text-left h4,
.text-left h5,
.text-left h6,
.text-left p {text-align: var(--text-left);}

.text-center h1,
.text-center h2,
.text-center h3,
.text-center h4,
.text-center h5,
.text-center h6,
.text-center p {text-align: var(--text-center);}

.text-justify h1,
.text-justify h2,
.text-justify h3,
.text-justify h4,
.text-justify h5,
.text-justify h6,
.text-justify p {text-align: var(--text-justify);}

.ch-small p{max-width: var(--ch-s) !important; margin: auto !important;}
.ch-medium p{max-width: var(--ch-m) !important; margin: auto !important;}
.ch-large p{max-width: var(--ch-l) !important; margin: auto !important;}


/* ==========================================================================
   Background and color utilities
   ========================================================================== */

/* === Solid background utilities === */
.bg-white {background: var(--bg-white);}
.bg-black { background: var(--bg-black);}
.bg-dark {background: var(--bg-dark);}
.bg-light {background: var(--bg-light);}

/* === Gradient background utilities === */
.radial-primary {background: var(--bg-radial-primary);}
.radial-secondary {background: var(--bg-radial-secondary);}

/* === Overlay utilities === */
.overlay-dark,
.overlay-light,
.overlay-primary,
.overlay-secondary {position: relative; }

/* === Overlay utilities === */
.overlay-dark::before,
.overlay-light::before,
.overlay-primary::before,
.overlay-secondary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--size-100);
	height: var(--size-100);
	pointer-events: none;
	z-index: 1 !important;
}

.overlay-dark::before {background-color: var(--overlay-dark);}
.overlay-light::before {background-color: var(--overlay-light)}
.overlay-primary::before {background-color: var(--overlay-primary);}
.overlay-secondary::before {background-color: var(--overlay-secondary);}

/* === Vehicle colors === */
.color-swatch {
    display: inline-flex;
    align-items: var(--align-center);
    justify-content: var(--justify-center);
	text-align: center;
    width: 42px;
    height: 24px;
    min-width: 42px;
    border-radius: 6px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    margin: 2px 6px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: relative; /* Needed for the hover preview */
}

/* === Car Paint Colors === */
.color-swatch-white { background-color: var(--vehicle-color-white); color: var(--text-color-heading); }
.color-swatch-black { background-color: var(--vehicle-color-black); color: var(--text-color-body-light); }
.color-swatch-lightblue { background-color: var(--vehicle-color-lightblue); color: var(--text-color-body-light); }
.color-swatch-darkblue { background-color: var(--vehicle-color-darkblue); color: var(--text-color-body-light); }
.color-swatch-green { background-color: var(--vehicle-color-green); color: var(--text-color-body-light); }
.color-swatch-red { background-color: var(--vehicle-color-red); color: var(--text-color-body-light); }

/* === Hover Effect === */
.color-swatch:hover {
    transform: scale(1.15); /* Slightly enlarges the swatch */
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow */
}

/* ==========================================================================
   17. Shadow and border utilities
   ========================================================================== */
.shadow-s {box-shadow: var(--shadow-s);}
.shadow-m {box-shadow: var(--shadow-m);}
.shadow-l {box-shadow: var(--shadow-l);}