/*
 *  Yoonly Design System
 *
 *  This stylesheet contains only the rules that define the
 *  visual identity of the Yoonly brand.  Layout and structural
 *  rules remain in the companion `travelski‑split.css` file.
 *
 *  Colours and typography have been adapted from the original
 *  Travelski design to match the Yoonly brand.  Variables and
 *  utility classes mirror the original API so existing markup
 *  continues to work without modification.
 */

/* ------------------------------------------ */
/*  Root variables                            */
/*
 *  Colours are expressed as CSS custom properties.  The
 *  palette is built around a deep purple and a warm gold,
 *  sampled from the current Yoonly.eu website.  Lighter
 *  tints and darker shades are provided for states and
 *  declinations.  Greys remain unchanged from the original
 *  design system to ensure good contrast and readability.
 */
 :root {
    /* Primary palette */
    /*
     * Updated palette from the Figma design system.
     * The main color is blue (#4C3075), orange is for emergency/error messages (#D94362),
     * and green is for validations and benefits (#D94362 - same as orange in this design).
     */
    --primary-blue: #4C3075;     /* Main blue color */
    --primary-green: #D94362;    /* Green for validations and benefits */
    --primary-orange: #D94362;   /* Orange for emergency/error messages */
    --primary-black: #000000;
    --primary-white: #FFFFFF;
    /* Yellow for highlights */
    --primary-yellow: #FAD133;

    /* Blue declination – light tints to dark shades of the main color (#4C3075) */
    --blue-50:  #F1EDF6;
    --blue-100: #ECE7F4;
    --blue-200: #E3DCF0;
    --blue-300: #D3CAE8;
    --blue-400: #C2B6E1;
    --blue-500: #AFA1D8;
    --blue-600: #9D8CD1;
    --blue-700: #8A78C7;
    --blue-800: #624992;
    --blue-900: #4C3075;
    --blue-dark: #311B51;

    /* Green declination – light tints to dark shades of the green color (#D94362) */
    --green-50:  #FEEDF0;
    --green-100: #FDE4E8;
    --green-200: #FBD5DC;
    --green-300: #F7BECB;
    --green-400: #F3A8B9;
    --green-500: #ED8DA4;
    --green-600: #E97591;
    --green-700: #E55C7E;
    --green-800: #DE4D6D;
    --green-900: #D94362;
    --green-dark: #8F2B41;

    /* Orange declination – light tints to dark shades of the orange color (#D94362) */
    --orange-50:  #FEEDF0;
    --orange-100: #FDE4E8;
    --orange-200: #FBD5DC;
    --orange-300: #F7BECB;
    --orange-400: #F3A8B9;
    --orange-500: #ED8DA4;
    --orange-600: #E97591;
    --orange-700: #E55C7E;
    --orange-800: #DE4D6D;
    --orange-900: #D94362;
    --orange-dark: #8F2B41;

    /* Grey declination (copied from Travelski for contrast) */
    --grey-50 : #F8F9FA;
    --grey-100: #F1F3F5;
    --grey-200: #E9ECEF;
    --grey-300: #DEE2E6;
    --grey-400: #CED4DA;
    --grey-500: #ADB5BD;
    --grey-600: #868E96;
    --grey-700: #585F66;
    --grey-800: #1D2329;
    --grey-900: #0D141B;
    --grey-dark: #000000;

    /* Yellow declination – retained for warning and highlights */
    --yellow-50:  #fff9e5;
    --yellow-100: #fff2cc;
    --yellow-200: #ffe599;
    --yellow-300: #ffdd66;
    --yellow-400: #ffd133;
    --yellow-500: #ffcc00;
    --yellow-550: #ffbe1d;
    --yellow-600: #e6b800;
    --yellow-700: #cc9900;
    --yellow-800: #b38000;
    --yellow-900: #995c00;
    --yellow-dark: #804000;

    /* Font families */
    /*
     * Yoonly.eu uses the display typeface "Bebas Neue" for headings
     * and the geometric sans-serif "Raleway" for all other text.
     */
    --font-title: 'Bebas Neue', 'Raleway', sans-serif;
    --font-body:  'Raleway', sans-serif;

    /* Font weights */
    --font-weight-default: 500;

    /* Border radius */
    --border-radius-default: 0px;
    --border-radius-secondary: 0px;
    --border-radius-button: 0px;
    --border-radius-button-secondary: 0px;
    --border-radius-search-bar: 0px;
    --border-radius-card: 0px;
    --border-radius-card-secondary: 0px;


 }

/* ------------------------------------------ */
/*  Colour utilities                          */
/*
 *  Utility classes provide quick access to the colour
 *  palette.  They are named identically to the Travelski
 *  equivalents so that the markup does not need to change.
 */

/* Primary colours */
.bg-primary-blue   { background-color: var(--primary-blue); }
.text-primary-blue { color:            var(--primary-blue); }
.bg-primary-green  { background-color: var(--primary-green); }
.text-primary-green{ color:            var(--primary-green); }
.bg-primary-orange { background-color: var(--primary-orange); }
.text-primary-orange{ color:           var(--primary-orange); }
.bg-primary-black  { background-color: var(--primary-black); }
.text-primary-black{ color:            var(--primary-black); }
.bg-primary-white  { background-color: var(--primary-white); }
.text-primary-white{ color:            var(--primary-white); }
.bg-primary-yellow { background-color: var(--primary-yellow); }
.text-primary-yellow{color:            var(--primary-yellow); }

/* Teal declination */
.bg-blue-50   { background-color: var(--blue-50); }
.text-blue-50 { color:            var(--blue-50); }
.bg-blue-100  { background-color: var(--blue-100); }
.text-blue-100{ color:            var(--blue-100); }
.bg-blue-200  { background-color: var(--blue-200); }
.text-blue-200{ color:            var(--blue-200); }
.bg-blue-300  { background-color: var(--blue-300); }
.text-blue-300{ color:            var(--blue-300); }
.bg-blue-400  { background-color: var(--blue-400); }
.text-blue-400{ color:            var(--blue-400); }
.bg-blue-500  { background-color: var(--blue-500); }
.text-blue-500{ color:            var(--blue-500); }
.bg-blue-600  { background-color: var(--blue-600); }
.text-blue-600{ color:            var(--blue-600); }
.bg-blue-700  { background-color: var(--blue-700); }
.text-blue-700{ color:            var(--blue-700); }
.bg-blue-800  { background-color: var(--blue-800); }
.text-blue-800{ color:            var(--blue-800); }
.bg-blue-900  { background-color: var(--blue-900); }
.text-blue-900{ color:            var(--blue-900); }
.bg-blue-dark { background-color: var(--blue-dark); }
.text-blue-dark{ color:            var(--blue-dark); }

/* Green declination */
.bg-green-50   { background-color: var(--green-50); }
.text-green-50 { color:            var(--green-50); }
.bg-green-100  { background-color: var(--green-100); }
.text-green-100{ color:            var(--green-100); }
.bg-green-200  { background-color: var(--green-200); }
.text-green-200{ color:            var(--green-200); }
.bg-green-300  { background-color: var(--green-300); }
.text-green-300{ color:            var(--green-300); }
.bg-green-400  { background-color: var(--green-400); }
.text-green-400{ color:            var(--green-400); }
.bg-green-500  { background-color: var(--green-500); }
.text-green-500{ color:            var(--green-500); }
.bg-green-600  { background-color: var(--green-600); }
.text-green-600{ color:            var(--green-600); }
.bg-green-700  { background-color: var(--green-700); }
.text-green-700{ color:            var(--green-700); }
.bg-green-800  { background-color: var(--green-800); }
.text-green-800{ color:            var(--green-800); }
.bg-green-900  { background-color: var(--green-900); }
.text-green-900{ color:            var(--green-900); }
.bg-green-dark { background-color: var(--green-dark); }
.text-green-dark{ color:           var(--green-dark); }

/* Orange declination */
.bg-orange-50   { background-color: var(--orange-50); }
.text-orange-50 { color:            var(--orange-50); }
.bg-orange-100  { background-color: var(--orange-100); }
.text-orange-100{ color:            var(--orange-100); }
.bg-orange-200  { background-color: var(--orange-200); }
.text-orange-200{ color:            var(--orange-200); }
.bg-orange-300  { background-color: var(--orange-300); }
.text-orange-300{ color:            var(--orange-300); }
.bg-orange-400  { background-color: var(--orange-400); }
.text-orange-400{ color:            var(--orange-400); }
.bg-orange-500  { background-color: var(--orange-500); }
.text-orange-500{ color:            var(--orange-500); }
.bg-orange-600  { background-color: var(--orange-600); }
.text-orange-600{ color:            var(--orange-600); }
.bg-orange-700  { background-color: var(--orange-700); }
.text-orange-700{ color:            var(--orange-700); }
.bg-orange-800  { background-color: var(--orange-800); }
.text-orange-800{ color:            var(--orange-800); }
.bg-orange-900  { background-color: var(--orange-900); }
.text-orange-900{ color:            var(--orange-900); }
.bg-orange-dark { background-color: var(--orange-dark); }
.text-orange-dark{ color:           var(--orange-dark); }

/* Grey declination */
.bg-grey-50   { background-color: var(--grey-50); }
.text-grey-50 { color:            var(--grey-50); }
.bg-grey-100  { background-color: var(--grey-100); }
.text-grey-100{ color:            var(--grey-100); }
.bg-grey-200  { background-color: var(--grey-200); }
.text-grey-200{ color:            var(--grey-200); }
.bg-grey-300  { background-color: var(--grey-300); }
.text-grey-300{ color:            var(--grey-300); }
.bg-grey-400  { background-color: var(--grey-400); }
.text-grey-400{ color:            var(--grey-400); }
.bg-grey-500  { background-color: var(--grey-500); }
.text-grey-500{ color:            var(--grey-500); }
.bg-grey-600  { background-color: var(--grey-600); }
.text-grey-600{ color:            var(--grey-600); }
.bg-grey-700  { background-color: var(--grey-700); }
.text-grey-700{ color:            var(--grey-700); }
.bg-grey-800  { background-color: var(--grey-800); }
.text-grey-800{ color:            var(--grey-800); }
.bg-grey-900  { background-color: var(--grey-900); }
.text-grey-900{ color:            var(--grey-900); }
.bg-grey-dark { background-color: var(--grey-dark); }
.text-grey-dark{ color:           var(--grey-dark); }

/* Yellow declination */
.bg-yellow-50   { background-color: var(--yellow-50); }
.text-yellow-50 { color:            var(--yellow-50); }
.bg-yellow-100  { background-color: var(--yellow-100); }
.text-yellow-100{ color:            var(--yellow-100); }
.bg-yellow-200  { background-color: var(--yellow-200); }
.text-yellow-200{ color:            var(--yellow-200); }
.bg-yellow-300  { background-color: var(--yellow-300); }
.text-yellow-300{ color:            var(--yellow-300); }
.bg-yellow-400  { background-color: var(--yellow-400); }
.text-yellow-400{ color:            var(--yellow-400); }
.bg-yellow-500  { background-color: var(--yellow-500); }
.text-yellow-500{ color:            var(--yellow-500); }
.bg-yellow-600  { background-color: var(--yellow-600); }
.text-yellow-600{ color:            var(--yellow-600); }
.bg-yellow-700  { background-color: var(--yellow-700); }
.text-yellow-700{ color:            var(--yellow-700); }
.bg-yellow-800  { background-color: var(--yellow-800); }
.text-yellow-800{ color:            var(--yellow-800); }
.bg-yellow-900  { background-color: var(--yellow-900); }
.text-yellow-900{ color:            var(--yellow-900); }
.bg-yellow-dark { background-color: var(--yellow-dark); }
.text-yellow-dark{ color:           var(--yellow-dark); }

/* ------------------------------------------ */
/*  Typography                                */
/*
 *  Updated typography styles according to Figma design system.
 *  All titles use Bebas Neue with Regular weight.
 *  Body text uses Raleway with appropriate weights.
 */
.title-0 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 60px;
    line-height: 62px;
    letter-spacing: 0px;
    font-feature-settings: "calt" 0;
}
.title-1 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 52px;
    line-height: 54px;
    letter-spacing: 0px;
    font-feature-settings: "calt" 0;
}
.title-2 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 46px;
    line-height: 50px;
    letter-spacing: 0px;
    font-feature-settings: "calt" 0;
}
.title-3 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 35px;
    line-height: 40px;
    letter-spacing: 0px;
    font-feature-settings: "calt" 0;
}
.title-4 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 27px;
    line-height: 32px;
    letter-spacing: 0px;
    font-feature-settings: "calt" 0;
}

.price-title {
color: var(--primary-green);
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 35px;
    line-height: 40px;
    letter-spacing: 0px;
    font-feature-settings: "calt" 0;
}

.heading {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 800; /* Extra Bold */
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.body {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500; /* Medium */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.body-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.caption,
.caption-fix {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500; /* Medium */
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.caption-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700; /* Bold */
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.subcaption {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500; /* Medium */
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.subcaption-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700; /* Bold */
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.buttons-default {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.8px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.buttons-small {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 22px;
    line-height: 20px;
    letter-spacing: 0.8px;
}
.buttons-large {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul); /* Regular */
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0.8px;
}

/* Links */
.link-default {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 900; /* Black */
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0px;
    text-decoration-line: underline;
    color: var(--primary-blue);
    font-feature-settings: "calt" 0;
}
.link-small {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 900; /* Black */
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    text-decoration-line: underline;
    font-feature-settings: "calt" 0;
    color: var(--primary-blue);
}
.link-default:hover,
.link-small:hover {
    color: var(--green-dark);
}

/* ------------------------------------------ */
/*  Alert and feedback colours                */
/*
 *  Variants for success, error and information messages.
 */
.alert {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    font-feature-settings: 'pnum' on, 'lnum' on;
    border-radius: var(--border-radius-default);
    padding: 12px;
}
.success {
    /* Success messages use a dedicated green palette rather than the primary hues */
    color: #81EA95;
    background-color: #D9F8DF;
}
.error {
    /* Error messages use the third colour palette */
    color: var(--primary-orange);
    background-color: var(--orange-100);
}
.info-blue {
    color: var(--primary-green);
    background-color: var(--green-50);
}
.info-grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
}
.blue {
    color: var(--primary-blue);
    background-color: var(--blue-100);
    padding: 12px;
}
.grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
    padding: 12px;
}

/* ------------------------------------------ */
/*  Buttons                                   */
/*
 *  Primary and secondary buttons adopt the Yoonly colour
 *  palette.  The layout properties (padding, radius and
 *  alignment) remain defined in the structural stylesheet.
 */
.button-primary {
    border: none;
    border-radius: var(--border-radius-button);
    padding: 15px 20px;
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    flex: none;
    order: 0;
    flex-grow: 0;
    text-decoration: none;
    font-size: 24px;

}
.primary-normal {
    color: var(--primary-white);
    background-color: var(--primary-blue);
}
.primary-hover {
    color: var(--primary-white);
    background-color: var(--green-700);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.primary-onclick {
    color: var(--primary-white);
    background-color: var(--green-dark);
}
.primary-disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    box-shadow: none;
    pointer-events: none;
}
.button-primary:hover {
    color: var(--primary-white);
    background-color: var(--green-700);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.button-primary:disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    box-shadow: none;
    pointer-events: none;
}
.button-primary:active {
    color: var(--primary-white);
    background-color: var(--green-dark);
}

/* Secondary buttons */
.button-secondary {
    border: none;
    border-radius: var(--border-radius-button-secondary);
    padding: 15px 20px;
    font-family: var(--font-title);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    text-decoration: none;
    background: transparent;
}
.secondary-normal {
    color: var(--primary-green);
    border: 1px solid var(--green-dark);
}
.secondary-hover {
    color: var(--green-dark);
    background-color: var(--green-100);
    border: 1px solid var(--green-dark);
}
.secondary-onclick {
    color: var(--green-dark);
    background-color: var(--green-400);
    border: 1px solid var(--green-dark);
}
.secondary-disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
    pointer-events: none;
}
.button-secondary:hover {
    color: var(--green-dark);
    background-color: var(--green-100);
    border: 1px solid var(--green-dark);
}
.button-secondary:active {
    color: var(--green-dark);
    background-color: var(--green-400);
    border: 1px solid var(--green-dark);
}
.button-secondary:disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
}

/* Secondary small button */
.button-secondary-small {
    border-radius: var(--border-radius-button-secondary);
    border: 1px solid var(--green-dark);
    padding: 5px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-title);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    background: transparent;
    color: var(--primary-green);
    width: 128px;
    height: 34px;
    white-space: nowrap;
    box-sizing: border-box;
}
.button-secondary-small:hover {
    color: var(--green-dark);
    border: 1px solid var(--green-400);
}
.button-secondary-small:active {
    color: var(--green-dark);
    background-color: var(--green-400);
    border: 1px solid var(--primary-green);
}
.button-secondary-small:disabled {
    color: var(--grey-600);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
}

/* ------------------------------------------ */
/*  Outline states                            */
.outline-default {
    border: 1px solid var(--grey-300);
}
.outline-hover {
    border: 1px solid var(--grey-300);
    /* Use the blue primary colour for focus outline */
    box-shadow: 0px 0px 0px 4px rgba(76, 48, 117, 0.1);
}
.outline-selected {
    border: 2px solid var(--primary-green);
    /* Darker blue glow when selected */
    box-shadow: 0px 0px 0px 4px rgba(76, 48, 117, 0.2);
}

/* ------------------------------------------ */
/*  Form feedback                             */
.subcaption-default { color: var(--grey-500); }
.subcaption-disabled{ color: var(--grey-400); }
.subcaption-error  {
    /* Error subcaption uses the red danger colour */
    color: var(--primary-orange);
 }
.label-text-default{ color: var(--grey-600); }
.label-text-disabled{ color: var(--grey-300); pointer-events: none; }
.label-active {
    top: -25px;
    font-weight: var(--font-weight-defaul);
    font-size: 12px;
    line-height: 14px;
    background-color: var(--primary-white);
    padding: 0.5rem 0.4rem;
    transform: translate(-10px);
}
.label-active-default{ color: var(--primary-green); }
.label-active-error  {
    /* Error label uses the red danger colour */
    color: var(--primary-orange);
 }
.text-default { color: var(--grey-600); }
.border-default { border-color: var(--grey-300); }

/* ------------------------------------------ */
/*  Icons                                     */
/*
 *  Replace the chevron icon with a teal variant.  The SVG
 *  data URI encodes the arrow and uses our custom stroke
 *  colours.  Hover state switches to the darker shade.
 */
.tf-chevron-right:after {
    /* Chevron icon coloured with the blue primary hue */
    content: url("data:image/svg+xml,%3Csvg%20width%3D'7'%20height%3D'11'%20viewBox%3D'0%200%207%2011'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.16675%201.06738L5.16675%205.06738L1.16675%209.06738'%20stroke%3D'%234C3075'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
    width: 7px;
    height: 11px;
    display: inline-block;
    color: var(--primary-green);
    position: absolute;
    right: 20px;
    margin-top: 3px;
}
.tf-chevron-right:hover:after {
    /* Darker blue on hover */
    content: url("data:image/svg+xml,%3Csvg%20width%3D'7'%20height%3D'11'%20viewBox%3D'0%200%207%2011'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.16675%201.06738L5.16675%205.06738L1.16675%209.06738'%20stroke%3D'%23311B51'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
}

/* ------------------------------------------ */
/*  Logo                                      */
/*
 *  Apply the Yoonly logo as a background image.  The
 *  dimensions follow the aspect ratio of the source
 *  artwork.  Replace the path if you relocate the asset.
 */
.logo-yoonly {
    /* Use the official Yoonly logo from yoonly.eu */
    background-image: url('yoonly-logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Maintain the 180:147 aspect ratio of the SVG (approx 1.224) */
    width: 180px;
    height: 147px;
    display: block;
}

.header-navbar-main {
    background-color: var(--blue-900) !important;
}
.header-link-yoonly {
    color: var(--primary-white) !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    cursor: pointer;
    position:relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
    overflow-x: hidden;
    padding: 0 1rem;
}
.header-link-yoonly:hover {
    color: var(--grey-400) !important;
}
.header-list-item:hover > .header-link-yoonly {
    color: var(--grey-400) !important;
}
.header-black-arrow-svg {
    background-color: var(--primary-white) !important;
}
.yoonly-logo {
    width: 140px;
}
@media only screen and (min-width: 576px) {
    .yoonly-logo {
        width: 160px;
    }
    .yoonly-logo-sticky {
        width: 130px;
    }
    #header-sidebar {
        box-shadow:none !important;
    }
}