/* VARS */
:root {
    /* =====================================================
       BRAND IDENTITY - Only change these values!
       All variants are auto-calculated from --brand-primary
       ===================================================== */
    --brand-primary: #3535D1;
    --brand-header: #040442;
    --header-items-color: #ffffff;  /* Color for navigation items and icons in header */
    
    /* Auto-calculated Primary Variants using color-mix()
       - Hover: 15% white mixed in (brighter for hover states)
       - Light: 30% white mixed in (backgrounds, subtle highlights)
       - Dark: 20% black mixed in (active states, emphasis) */
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary), white 1%);
    --brand-primary-light: color-mix(in srgb, var(--brand-primary), white 30%);
    --brand-primary-dark: color-mix(in srgb, var(--brand-primary), black 20%);
    
    /* Auto-calculated Opacity Variants using color-mix() with transparent
       These maintain the exact primary hue at various opacity levels */
    --brand-primary-10: color-mix(in srgb, var(--brand-primary) 10%, transparent);  /* Subtle shadows */
    --brand-primary-15: color-mix(in srgb, var(--brand-primary) 15%, transparent);  /* Light shadows */
    --brand-primary-20: color-mix(in srgb, var(--brand-primary) 20%, transparent);  /* Medium shadows */
    --brand-primary-25: color-mix(in srgb, var(--brand-primary) 25%, transparent);  /* Focus rings */
    --brand-primary-30: color-mix(in srgb, var(--brand-primary) 30%, transparent);  /* Borders, dividers */
    --brand-primary-40: color-mix(in srgb, var(--brand-primary) 40%, transparent);  /* Hover borders */
    --brand-primary-50: color-mix(in srgb, var(--brand-primary) 50%, transparent);  /* Strong accents */
    
    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --dark-gray: #434343;
    --light-gray: #FDFDFD;
    --medium-gray: #6c757d;
    
    /* WCAG Compliant Typography Colors */
    --text-primary: #1a1a1a;      /* Primary body text - 16.1:1 contrast on white */
    --text-secondary: #4a4a4a;    /* Secondary text - 9.4:1 contrast on white */
    --text-muted: #6b6b6b;        /* Muted/helper text - 5.9:1 contrast on white (WCAG AA) */
    --text-on-dark: #ffffff;      /* Text on dark backgrounds */
    --text-on-dark-muted: rgba(255, 255, 255, 0.85); /* Muted text on dark */
    
    /* Font Weights - Consistent naming */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
}

/* GLOBAL */

body {
    font-family: "Montserrat", sans-serif;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive Paragraph Typography */
p {
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
    line-height: 1.6;
    margin-bottom: 1rem;
}

main {
    background-color: var(--light-gray);
}

/* Image Thumbnails */
.img-thumbnail {
    padding: .25rem;
    background-color: #fff;
    border: none !important;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
}


#content section {
    margin-bottom: 0;
}

.main-content  {
    min-height: 70vh;
    /*padding: 3em;*/
}

/* GLOBAL - Responsive Typography */
/* WCAG AA Compliant - All text meets 4.5:1 contrast ratio minimum */

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--text-primary);
    overflow-wrap: break-word;
}

h1, .display-1 {
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
    font-weight: var(--font-bold);
    letter-spacing: clamp(1px, 0.5vw, 3px);
    text-transform: uppercase;
    line-height: var(--line-height-tight);
    margin-top: 1.25rem;
    margin-bottom: 2rem;
}

h2, .display-2 {
    font-size: clamp(1.5rem, 3.4vw + 0.7rem, 2.35rem);
    font-weight: var(--font-bold);
    letter-spacing: clamp(0.5px, 0.3vw, 2px);
    line-height: 1.3;
    text-transform: initial;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

h3, .display-3 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
    font-weight: var(--font-medium);
    letter-spacing: clamp(0px, 0.2vw, 1px);
    line-height: var(--line-height-snug);
    text-transform: initial;
    margin-top: 0.875rem;
    margin-bottom: 1.4rem;
}

h4, .display-4 {
    font-size: clamp(1.25rem, 2vw + 0.4rem, 1.75rem);
    font-weight: var(--font-semibold);
    letter-spacing: clamp(0px, 0.1vw, 0.5px);
    line-height: var(--line-height-snug);
    text-transform: initial;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

h5, .display-5 {
    font-size: clamp(1.125rem, 1.5vw + 0.3rem, 1.5rem);
    font-weight: var(--font-medium);
    letter-spacing: normal;
    line-height: 1.5;
    margin-top: 0.625rem;
    margin-bottom: 1rem;
}

h6, .display-6 {
    font-size: clamp(1rem, 1vw + 0.25rem, 1.25rem);
    font-weight: var(--font-semibold);
    letter-spacing: normal;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 0.875rem;
}

/* Main content specific overrides (less prominent) */
.main-content h1, .main-content .display-1 {
    font-size: clamp(1.75rem, 4vw + 0.8rem, 3rem);
    letter-spacing: clamp(0.5px, 0.3vw, 2px);
    line-height: 1.3;
    text-transform: none;
}

.main-content h2, .main-content .display-2 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.4;
}

.main-content h3, .main-content .display-3 {
    font-size: clamp(1.25rem, 2vw + 0.4rem, 1.75rem);
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.4;
}

.label {
    font-size: 16px;
    line-height: 22px;
}

/* fix paddings due to font */
.list-group-item, .card-header {
    padding-top: 15px;
}

/* Card header styling - border bottom matches horizontal line dividers */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--brand-primary-30);
}

input.form-control {
    /* padding-top: 10px; */
    padding-bottom: 5px;
}

.quantity input {
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 4px;
    padding-right: 4px;
}

.input-group .input-group-append .btn {
    padding-top: 7px;
    padding-bottom: 1px;
}

.badge {
    padding-top: 4px;
    padding-bottom: 4px;
}

.btn {
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: var(--font-medium);
    text-decoration: none !important;
    border-radius: 50px !important;
}

.btn:hover {
    text-decoration: none !important;
}

.btn:active,
.btn:focus,
.btn:focus:active {
    border-radius: 50px !important;
}

/* WCAG Button Focus States */
.btn:focus,
.btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    box-shadow: none;
    text-decoration: none !important;
}

.btn:focus:not(:focus-visible) {
    outline: none;
}

.btn.btn-sm {
    padding-top: 3px;
    padding-bottom: 3px;
}

.badge-primary {
    background-color: var(--dark-gray);
}

.list-group-item-secondary .badge-primary {
    background-color: var(--brand-primary-dark);
}

/* BUTTONS */
.btn-primary {
    color: #FFFFFF;
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem); /* Matches paragraph font size */
    text-align: center;
    border-radius: 50px;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    transform: translateY(0);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Horizontal padding - adjust these values to control button width */
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(5px);
    transition: 600ms ease;
    transform: skewX(-25deg) translateX(-150%);
}

.btn-outline-primary {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    border-radius: 50px;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    border-radius: 50px;
}


.btn-secondary {
    color: var(--brand-primary);
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem); /* Matches paragraph font size */
    text-align: center;
    border-radius: 50px;
    background-color: var(--white);
    border: 1px solid var(--brand-primary-30) !important;
    transform: translateY(0);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Horizontal padding - adjust these values to control button width */
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

.btn-secondary::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 30%;
    height: 200%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    filter: blur(3px);
    transition: 600ms ease;
    transform: skewX(-25deg) translateX(-150%);
    z-index: 1;
}

.btn-secondary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--white);
    transform: translateY(-5px);
    box-shadow: 0 8px 15px 0 var(--brand-primary-10);
}

.btn-secondary:hover::before {
    transform: skewX(-25deg) translateX(550%);
}

.btn-primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    transform: translateY(-5px);
    box-shadow: 0 8px 15px 0 var(--brand-primary-10);
}

.btn-primary:hover::before {
    transform: skewX(-25deg) translateX(550%);
}

/* Hide Bootstrap's default dropdown arrows only where we don't want them */
.btn.dropdown-toggle::after,
.nav-item .dropdown-toggle::after {
    display: none;
}
.caret {
    border: none;
    color: var(--brand-primary);
}

.dropdown
.btn-secondary {
    color: #1E1E1E;
}

.dropdown
.btn-secondary:hover {
    color: #FFFFFF;
}

.show>.btn-secondary.dropdown-toggle {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.custom-control-input:checked~
.custom-control-label::before {
    background-color: var(--brand-primary);
}

/* ============================================
   Pagination - Bootstrap 5 Standard Implementation
   ============================================ */
.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--text-primary);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: var(--brand-primary-30);
    --bs-pagination-border-radius: 0.375rem;
    --bs-pagination-hover-color: var(--brand-primary);
    --bs-pagination-hover-bg: #f8f9fa;
    --bs-pagination-hover-border-color: var(--brand-primary-40);
    --bs-pagination-focus-color: var(--brand-primary);
    --bs-pagination-focus-bg: #f8f9fa;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--brand-primary-25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
}

.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link:hover {
    z-index: 2;
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}

.page-link:focus {
    z-index: 3;
    color: var(--bs-pagination-focus-color);
    background-color: var(--bs-pagination-focus-bg);
    outline: 0;
    box-shadow: var(--bs-pagination-focus-box-shadow);
}

.page-item:not(:first-child) .page-link {
    margin-left: calc(var(--bs-pagination-border-width) * -1);
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

.page-item.disabled .page-link {
    color: var(--bs-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}

/*
 * Custom translucent site header
 */

.site-header {
    background-color: var(--brand-header);
}

.site-header.purple {
    background-color: var(--brand-primary);
}
.site-header.red {
    background-color: #f03c28;
}
.site-header.blue {
    background-color: #2878f0;
}

.site-header a:hover {
    text-decoration: none;
}

/*
 * PRODUCT DESIGN FOR DEVICES
 */

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}

.product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}

.flex-equal > * {
    -ms-flex: 1;
    flex: 1;
}
@media (min-width: 1001px) {
    .flex-md-equal > * {
        -ms-flex: 1;
        flex: 1;
    }
}

.overflow-hidden { overflow: hidden; }

.menu-links {
    font-size: 16px;
    font-weight: var(--font-regular);
}

.menu-links .active {
    color: var(--header-items-color);
}

/* Menu icons inherit navigation header color for consistent theming */
.menu-icons {
    color: var(--header-items-color);
}

.menu-icon {
    height: 20.5px;
    width: 20.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: inherit;
}

.menu-icons .nav-item {
    display: flex;
    align-items: center;
    color: inherit;
}

.menu-icons .nav-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    height: 20.5px;
    width: 20.5px;
    color: inherit;
}

/* Ensure all icon images and inline SVGs have consistent size */
.menu-icon img,
.menu-icon svg,
.search-toggle {
    width: 20.5px;
    height: 20.5px;
}

/* Fix search toggle alignment */
.search-toggle {
    background-size: 20.5px 20.5px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 0;
}


.hero-banner {
    overflow: hidden;
    width: auto;
    min-width: 100%;
    height: auto;
    background-image: url("../images/hero1.png");
    background-size: cover;
    min-height: 700px;
    background-position: bottom;
}

.hero-text {
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    letter-spacing: 3px;
    line-height: 26px;
    text-align: center;
}


/* ============================================
   Global Card Styling - Consistent across site
   ----------------------------------------
   No border, shadow on hover, consistent padding
   Equal height cards per row with flex layout
   ============================================ */

/* Row-level: ensure Bootstrap rows stretch cards to equal height */
.row > [class*="col"] > .card,
.row > [class*="col"] > .teaser,
.row > [class*="col"] > .custom-product-card,
.row > [class*="col"] > .custom-standard-card {
    height: 100%;
}

/* Gap between card rows - adds vertical spacing */
.row > [class*="col"]:has(.card),
.row > [class*="col"]:has(.teaser),
.row > [class*="col"]:has(.custom-product-card),
.row > [class*="col"]:has(.custom-standard-card) {
    margin-bottom: 1.5rem;
}

/* Base card - minimal styling for utility cards (cart, voucher, checkout, etc.) */
.card {
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: #ffffff;
    /* Flex layout for equal height distribution */
    display: flex;
    flex-direction: column;
}

/* Teaser cards - styled with shadows and hover effects, no borders */
.custom-standard-card,
.custom-product-card {
    border: none !important;
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* Flex layout for equal height distribution */
    display: flex;
    flex-direction: column;
}

/* Teaser card hover effect - enhanced shadow */
.custom-standard-card:hover,
.custom-product-card:hover {
    box-shadow: 0 8px 25px var(--brand-primary-15) !important;
    transform: translateY(-2px);
}

/* Shadow-sm class teaser cards - same shadow styling */
.custom-standard-card.shadow-sm,
.custom-product-card.shadow-sm {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07) !important;
}

.custom-standard-card.shadow-sm:hover,
.custom-product-card.shadow-sm:hover {
    box-shadow: 0 8px 25px var(--brand-primary-15) !important;
}

.custom-standard-card.card-body,
.custom-product-card.card-body
{
    box-shadow: none;
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(1.25rem - 1px);
    border-top-right-radius: calc(1.25rem - 1px);
}

.grid-gallery {
    margin-right: 0;
    margin-left: 0;
}
.grid-gallery .flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-gallery-item .tint {
    background-color: initial;

}

.grid-gallery-item .tint img {
    opacity: 1;
}

.grid-gallery-item {
    padding: 0;
    max-height: 50vh;
    position: relative;
    overflow: hidden;
}

.grid-gallery-item img {
    max-width:100%;
    max-height:100%;
    object-fit: cover;
}

.grid-gallery-item h1,
.grid-gallery-item h2 {
    margin-bottom: 0;
    line-height: 1em;
}

.grid-gallery .pimcore_block_entry {
    flex: 0 0 50%;
    max-width: 50%;
}
.grid-gallery-item-text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 2rem 15%;
    color: #fff;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.grid-gallery-item-text h2,
.grid-gallery-item-text h5 {
    margin-bottom: 0.5rem;
    color: #fff;
}

.grid-gallery-item-text h5 {
    font-weight: var(--font-regular);
    opacity: 0.9;
}

.custom-product-card .card-title {
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    letter-spacing: 2px;
    line-height: var(--line-height-snug);
    color: var(--text-primary);
    padding: 0;
    margin-bottom: 0.5rem;
}

/* Consistent card body padding across all cards */
.card-body,
.custom-product-card .card-body,
.custom-standard-card .card-body {
    padding: 1.5rem;
    /* Flex layout: grow to fill available space, push button to bottom */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Card content area - grows to push button down */
.card-body > *:not(:last-child) {
    flex-shrink: 0;
}

/* Last element in card body (usually button container) - pushed to bottom */
.card-body > p:last-child,
.card-body > .button-row,
.card-body > a.btn:last-child,
.card-body .card-body-bottom {
    margin-top: auto;
}

.custom-product-card .card-body {
    justify-content: flex-start;
}

/* Card text consistent styling */
.card-text,
.custom-product-card .card-text,
.custom-standard-card .card-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Card price styling */
.card-price {
    color: var(--text-primary);
    font-weight: var(--font-bold);
}

.custom-product-card .card-body .card-body-top {
    justify-content: normal;
}

.custom-product-card .card-body .card-body-bottom {
    justify-content: flex-end;
}


.custom-standard-card .card-body {
    text-align: center;
}

/* Grid with filters - Enhanced responsive card layouts */
.col-md-9 .col-md-4 .custom-product-card .card-body.pricing i,
.col-md-3 .custom-product-card .card-body.pricing i {
    display: none;
}

/* Card body padding adjustments for filtered grids */
.col-md-9 .col-md-4 .custom-product-card .card-body,
.col-md-3 .custom-product-card .card-body {
    padding: 1.25rem;
}

/* Card image consistent sizing - use aspect-ratio for minimal cropping */
/* Product cards use 3:2 ratio - optimal for car/product photography */
/* Standard cards use 16:9 widescreen ratio for shorter, compact images */
.custom-product-card .product-img img,
.custom-product-card .card-img-top,
.teaser-row-container .custom-product-card .product-img img,
.col-md-9 .col-md-4 .custom-product-card .card-img-top,
.col-md-9 .col-md-4 .custom-product-card .product-img img,
.col-md-3 .custom-product-card .card-img-top,
.col-md-3 .custom-product-card .product-img img,
.row > .col-md-4 > .custom-product-card .product-img img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: 50% 50%; /* Center both horizontally and vertically - equal cropping on all sides */
    width: 100%;
    flex-shrink: 0;
}

/* Standard/teaser cards keep 16:9 widescreen ratio */
.custom-standard-card img,
.card-deck .teaser img,
.teaser-row-container .custom-standard-card img,
.row > .col-md-4 > .custom-standard-card img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center;
    width: 100%;
    flex-shrink: 0;
}

/* Button styling for cards - consistent across site */
.card-body .btn,
.custom-product-card .card-body .btn,
.custom-standard-card .card-body .btn {
    font-size: 0.95rem;
}

/* Button row - consistent padding */
.button-row,
.card-body .button-row,
.custom-product-card .card-body .button-row {
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
}

.button-row .col {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.button-row .col:first-child {
    padding-left: 0;
}

.button-row .col:last-child {
    padding-right: 0;
}

/* Responsive adjustments for filtered grid cards */
@media (max-width: 999px) and (min-width: 768px) {
    /* Tablet: 2 cards per row in filtered area */
    .col-md-9 .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .col-md-9 .col-md-4 .custom-product-card .card-body {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 767px) {
    /* Mobile: Full width cards in filtered area */
    .col-md-9 .col-md-4 .custom-product-card .card-body,
    .col-md-3 .custom-product-card .card-body {
        min-height: auto;
        padding: 1.5rem;
    }
    
    /* Ensure proper spacing on mobile */
    .col-md-9 .col-md-4,
    .col-md-3 {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .col-md-9 .col-md-4 .custom-product-card .card-body,
    .col-md-3 .custom-product-card .card-body {
        padding: 1.25rem;
    }
}

/* end enhanced styles for grid with filters */

/* Sidebar responsive behavior - ensure sidebar and content stay side-by-side */
@media (min-width: 768px) {
    /* Make the row use flexbox properly */
    #content > .row {
        display: flex;
        flex-wrap: nowrap;
    }
    
    .col-md-3.sidebar {
        flex: 0 0 250px;
        max-width: 250px;
        min-width: 200px;
    }
    
    .col-md-9.order-last {
        flex: 1 1 0%;
        max-width: calc(100% - 250px);
        min-width: 0;
    }
}

/* At larger screens, give sidebar more room */
@media (min-width: 992px) {
    .col-md-3.sidebar {
        flex: 0 0 280px;
        max-width: 280px;
    }
    
    .col-md-9.order-last {
        max-width: calc(100% - 280px);
    }
}


.custom-standard-card .card-text {
    line-height: 1.5;
    margin-top: 0.625rem;
    color: var(--text-secondary);
}

.custom-standard-card .card-title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    letter-spacing: 2px;
    line-height: var(--line-height-snug);
    text-align: center;
    margin: auto;
    color: var(--text-primary);
}

.custom-product-card .card-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
}

.custom-product-card .card-price {
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    letter-spacing: 1px;
    line-height: var(--line-height-snug);
    color: var(--text-primary);
}

.custom-product-card .card-price.original {
    font-size: 0.9375rem;
    font-weight: var(--font-regular);
    text-decoration: line-through;
    letter-spacing: 1px;
    line-height: 1.2;
    color: var(--text-muted);
}


.image-holder:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,255,255, 0.5);
    transition: all .3s linear;
}
.image-holder:hover:before {
    background: none;
}

/* BACKGROUND TINT */
.tint { background-color:black; display:inline-block; }
.tint img { opacity:0.7 }

/* ZOOMIN EFFECT */
.zoom-outer
{
    overflow: hidden;
}
.zoom-inner
{
    transition: all 0.5s ease;
}
.zoom-inner:hover
{
    transform: scale(1.2);
}

@media (max-width: 1000px) {
    /* Typography is now handled by clamp() - no overrides needed */
    
    .hero-text {
        font-size: clamp(1rem, 3vw + 0.5rem, 1.5rem);
        letter-spacing: clamp(1px, 0.2vw, 2px);
        line-height: 1.4;
    }

    .pricing a i {
        display: none;
    }

    .back-to-top.display-block {
        display: inline !important;
    }
}


/* Navigation */

/* Override Bootstrap navbar-expand-lg breakpoint to match our custom 1000px mobile breakpoint */
@media (max-width: 1000px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
    .navbar-expand-lg .navbar-brand {
        margin-right: 0;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        box-shadow: none;
        width: 100%;
        margin: 0.5rem 0 0 0;
        padding: 0;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
    }
    .navbar-expand-lg .navbar-collapse:not(.show) {
        display: none !important;
    }
    .navbar-expand-lg .navbar-toggler {
        display: block;
    }
}

@media (min-width: 1001px) {
    .navbar-expand-lg {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
}

/* Logo styling */
#logo {
    height: 55px;
    width: auto;
    object-fit: contain;
}

/* Navbar vertical alignment - override Bootstrap py-1 class */
.navbar.py-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.navbar .container {
    display: flex;
    align-items: center;
}

.navbar-brand,
.navbar-nav,
.menu-icons {
    margin: 0;
    display: flex;
    align-items: center;
}

/* Desktop Navigation Layout - Logo left, Links center, Icons right */
@media (min-width: 992px) {
    .navbar > .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
    
    .navbar-brand {
        flex: 0 0 auto;
        margin-right: 0;
    }
    
    .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: center;
    }
    
    .navbar-nav.menu-links {
        flex: 0 1 auto;
        justify-content: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .menu-icons {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* Override Bootstrap py-2 padding for icon buttons */
.menu-icons .py-2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove inherited line-height from navigation elements for better vertical alignment */
.navbar-nav,
.navbar-nav li,
.navbar-nav li a,
.menu-links,
.menu-links li,
.menu-links li a,
.menu-icons,
.menu-icons li,
.menu-icons li a,
.menu-icon,
.navbar-brand {
    line-height: 1 !important;
}

/* Allow dropdown menu items to use body line-height for better readability */
.dropdown-menu li a,
.dropdown-menu .dropdown-item {
    line-height: 1.5 !important;
}

.menu-links > li {
    font-size: 16px;
    font-weight: var(--font-regular);
    padding: .2rem 1rem .2rem 1rem !important;
    display: flex;
    align-items: center;
}
.menu-links .dropdown-menu li a
{
    padding: .5em 1em .5em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-nav li a {
    color: var(--header-items-color);
    display: block;
}

.menu-links .dropdown {
    top: 95%;
}

.menu-links .dropdown-menu {
    width: max-content;
    background-color: var(--brand-header);
    border: none;
}

.menu-icons .dropdown-menu {
    top: 100%;
    padding-top: 0.5rem;
    background-color: var(--brand-header);
    border: none;
}

/* Menu icons dropdown hover - keep open on hover */
.menu-icons .dropdown:hover > .dropdown-menu,
.menu-icons .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
}

.menu-icons .dropdown-item.active, .menu-icons .dropdown-item:active {
    background-color: var(--brand-primary);
}

/* Language dropdown vertical alignment */
.menu-icons .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    line-height: 1.5rem !important;
    font-size: 16px;
    vertical-align: middle;
    font-weight: var(--font-light);
    font-family: "Montserrat", sans-serif;
}

.menu-icons .dropdown-menu .dropdown-item img {
    margin-right: 0.5rem;
    vertical-align: middle;
    align-self: center;
    flex-shrink: 0;
    height: auto;
    max-height: 1em;
}

.navbar-nav li .dropdown-menu a {
    color: var(--header-items-color);
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-menu li {
    position: relative;
}

/* Desktop navigation - arrows only for nested submenus */
@media (min-width: 1001px) {
    /* Remove arrows from main level items */
    .menu-links > li.dropdown > a::after,
    .menu-links > li.dropdown > .dropdown-toggle::after {
        display: none !important;
    }

    /* Add arrows for nested dropdown items that have their own submenus */
    .menu-links .dropdown-menu .dropdown > a::after,
    .menu-links .dropdown-menu .dropdown > .dropdown-toggle::after {
        content: "";
        display: inline-block !important;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='m2.75 0-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex-shrink: 0;
        border: none;
        margin-left: auto;
    }

    /* Ensure hover-based dropdowns work properly for all levels */
    .menu-links .dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    /* Nested dropdown positioning */
    .menu-links .dropdown-menu .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;
        margin-left: 0;
    }

    /* Ensure nested dropdowns show on hover */
    .menu-links .dropdown-menu .dropdown:hover > .dropdown-menu {
        display: block !important;
    }
}

.dropdown-submenu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    margin-left: 0px;
}

@media (min-width: 1001px) {
    /* Desktop dropdown animations */
    .dropdown .dropdown-menu {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
        animation-name: slideIn;
    }

    /* Ensure desktop dropdowns show properly on hover */
    .dropdown .dropdown-menu.show {
        display: block;
    }
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary-25);
    -webkit-box-shadow: 0 0 0 2px var(--brand-primary-25);
    outline: none;
}

/* Form inputs and selects - rounded corners */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    border-radius: 25px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
    color: var(--text-primary);
}

/* Form placeholder styling - WCAG compliant contrast */
.form-control::placeholder {
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
    color: var(--text-muted);
    opacity: 1;
}

/* Select/Dropdown specific styling */
select.form-control {
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23434343' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
}

/* Textarea - less rounded corners */
textarea.form-control {
    border-radius: 15px;
}

/* Submit button - primary style */
.btn-success,
button[type="submit"].btn,
input[type="submit"].btn {
    color: #FFFFFF;
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
    text-align: center;
    border-radius: 50px;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    transform: translateY(0);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

.btn-success:hover,
button[type="submit"].btn:hover,
input[type="submit"].btn:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px 0 var(--brand-primary-10);
}

.btn-success:focus,
button[type="submit"].btn:focus,
input[type="submit"].btn:focus {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    box-shadow: 0 0 0 0.2rem var(--brand-primary-25);
}

.btn-success:active,
button[type="submit"].btn:active,
input[type="submit"].btn:active,
.btn-success:focus:active,
button[type="submit"].btn:focus:active,
input[type="submit"].btn:focus:active {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    border-radius: 50px !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-25) !important;
}

/* Events page filter styling */
#vueapp .header .form-control,
#vueapp .header select.form-control {
    border-radius: 25px;
    font-size: 1rem;
}

#vueapp .header .btn {
    font-size: 1rem;
}

#vueapp .header .mb-2 {
    margin-bottom: 0.25rem !important;
}

#vueapp .header .btn-outline-primary {
    border-radius: 25px;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transition: all 0.3s ease;
}

#vueapp .header .btn-outline-primary:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #FFFFFF;
}

/* Events page - reduce column padding for tighter filter layout */
#vueapp .header [class*="col-"] {
    padding-right: 4px;
    padding-left: 4px;
}

/* Bootstrap 4 to 5 compatibility - utility class fallbacks */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }

/* Bootstrap 4 badge color classes (BS5 uses bg-* instead) */
.badge-primary { background-color: var(--brand-primary) !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-success { background-color: #198754 !important; color: #fff !important; }
.badge-danger { background-color: #dc3545 !important; color: #fff !important; }
.badge-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge-info { background-color: #0dcaf0 !important; color: #212529 !important; }

/* Bootstrap 4 sr-only (BS5 uses visually-hidden) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Bootstrap 4 close button (BS5 uses btn-close) */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    background: transparent;
    border: 0;
    padding: 0;
}
.close:hover { opacity: .75; }

/* ============================================
   Bootstrap 5 Visual Compatibility Overrides
   ----------------------------------------
   Ensures BS4 visual appearance is maintained
   after upgrading to Bootstrap 5.3.8
   ============================================ */

/* 1. Grid Gutters - Restore BS4 30px gutters (15px each side) */
.row {
    --bs-gutter-x: 30px;
}
.row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* 2. Links - WCAG Accessible with focus states */
a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* WCAG Focus States - Visible focus indicator for keyboard navigation */
a:focus,
a:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove outline for mouse users, keep for keyboard */
a:focus:not(:focus-visible) {
    outline: none;
}

/* 3. Form Controls - Maintain BS4 fixed heights */
.form-control {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    color: var(--text-primary);
}
.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
}
.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
}
select.form-control {
    height: calc(1.5em + 0.75rem + 2px);
}
textarea.form-control {
    height: auto;
}

/* 4. Input Groups - BS4 styling */
.input-group > .form-control {
    border-radius: 0.25rem;
}
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 5. Button Block - Restore .btn-block functionality */
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: 0.5rem;
}

/* 6. Card Deck - BS5 removed card-deck, use d-flex gap instead */
.card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.card-deck .card {
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
}

/* 7. Media Object - BS5 removed .media, restore it */
.media {
    display: flex;
    align-items: flex-start;
}
.media-body {
    flex: 1;
}

/* 8. Jumbotron - BS5 removed .jumbotron */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}
@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}
.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

/* 9. Form Group - BS5 changed to mb-3 */
.form-group {
    margin-bottom: 1rem;
}

/* 10. Form Row - BS5 removed form-row */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* 11. Form Inline - BS5 removed form-inline */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
}
.form-inline .input-group {
    width: auto;
}

/* 12. Custom Controls - BS5 renamed to form-check */
.custom-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}
.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    vertical-align: middle;
    line-height: 1;
    padding: 0;
}

/* Custom control checkbox/radio - create the visual box */
.custom-control-label::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: 1px solid #adb5bd;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

/* Checkmark/dot indicator */
.custom-control-label::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}

/* Checked state */
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
}

/* Checkbox checkmark */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

/* Radio dot */
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Focus state */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--brand-primary-10);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--brand-primary);
}

/* 13. Navbar - Ensure proper spacing */
.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* 14. Dropdown Divider - BS5 uses different approach */
.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

/* 15. List Group - maintain BS4 styling */
.list-group-item-action {
    color: #495057;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    color: #495057;
    background-color: #f8f9fa;
}

/* 16. Table - BS5 changed nested table behavior */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
}

/* 17. Close button fallback with × symbol */
button.close:not(.btn-close) {
    appearance: none;
    -webkit-appearance: none;
}
button.close:not(.btn-close)::before {
    content: "×";
}

/* 18. No Gutters - BS5 uses g-0 instead of no-gutters */
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* 19. Embed Responsive - BS5 uses ratio classes */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    display: block;
    content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.embed-responsive-16by9::before {
    padding-top: 56.25%;
}
.embed-responsive-4by3::before {
    padding-top: 75%;
}
.embed-responsive-21by9::before {
    padding-top: 42.857143%;
}
.embed-responsive-1by1::before {
    padding-top: 100%;
}

/* End of Bootstrap 5 Visual Compatibility Overrides */

/* ============================================
   WCAG Accessible Typography Utilities
   ----------------------------------------
   Consistent text colors meeting AA contrast
   ============================================ */

/* Text color utilities */
.text-primary-content { color: var(--text-primary) !important; }
.text-secondary-content { color: var(--text-secondary) !important; }
.text-muted-content { color: var(--text-muted) !important; }
.text-brand { color: var(--brand-primary) !important; }

/* Font weight utilities */
.fw-light { font-weight: var(--font-light) !important; }
.fw-regular { font-weight: var(--font-regular) !important; }
.fw-medium { font-weight: var(--font-medium) !important; }
.fw-semibold { font-weight: var(--font-semibold) !important; }
.fw-bold { font-weight: var(--font-bold) !important; }

/* Line height utilities */
.lh-tight { line-height: var(--line-height-tight) !important; }
.lh-snug { line-height: var(--line-height-snug) !important; }
.lh-normal { line-height: var(--line-height-normal) !important; }
.lh-relaxed { line-height: var(--line-height-relaxed) !important; }

/* Small/caption text - still WCAG compliant */
.text-sm,
small,
.small {
    font-size: 0.875rem;
    line-height: 1.5;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Large text */
.text-lg {
    font-size: 1.125rem;
    line-height: 1.6;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Lead paragraph */
.lead {
    font-size: 1.25rem;
    font-weight: var(--font-regular);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

::selection {
    background: var(--brand-primary-light);
    color: #ffffff;
}

.dropdown .dropdown-menu li > ul {
    margin: 0px;
}

.dropdown .dropdown-menu li > ul > li {
    list-style: none;
}

.dropdown .dropdown-menu a:hover {
    background-color: var(--brand-primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px 0 var(--brand-primary-10);
    transition: all 0.3s ease;
}

.dropdown-menu-arrow {
    top: -25px;
    left: 33px;
    width: 0;
    height: 0;
    position: relative;
}

.dropdown-menu-arrow-search {
    left: 15%;
}

.dropdown-menu-arrow-right {
    left: 90%;
}

.dropdown-menu-arrow-left {
    right: 10%;
}

.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-width: 7px 8px;
    border-style: solid;
    border-color: transparent;
    z-index: 1001;
}
.dropdown-menu-arrow:after {
    bottom: -18px;
    right: -8px;
    border-bottom-color: var(--brand-header);
}
.dropdown-menu-arrow:before {
    bottom: -17px;
    right: -8px;
    border-bottom-color: rgba(0,0,0,.15);
}


/* nav animations */
@media (min-width: 1001px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slideIn {
    animation-name: slideIn;
}

/* accordion */
.accordion .card-header {
    padding: 0;
}

.accordion .card-header .btn {
    text-decoration: none;
    color: var(--brand-primary);
    padding: 0 0 0.5rem 1.2em;
    font-weight: 600;
}

/* Pimcore Text Accordion - Clean FAQ-style design */
.pimcore_area_text-accordion {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.pimcore_area_text-accordion .accordion {
    border: none !important;
    box-shadow: none !important;
}

.pimcore_area_text-accordion .accordion .card {
    border: none !important;
    border-bottom: 1px solid var(--brand-primary-30) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pimcore_area_text-accordion .accordion .card:last-child {
    border-bottom: none !important;
}

.pimcore_area_text-accordion .accordion .card-header {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pimcore_area_text-accordion .accordion .card-header h5 {
    margin: 0 !important;
    padding: 0 !important;
}

.pimcore_area_text-accordion .accordion .card-header .btn {
    color: var(--dark-gray) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    text-align: left;
    padding: 1rem 0 !important;
    margin: 0 !important;
    font-weight: 600;
    font-size: 1.1rem;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: color 0.3s ease;
}

.pimcore_area_text-accordion .accordion .card-header .btn:hover,
.pimcore_area_text-accordion .accordion .card-header .btn:focus {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.pimcore_area_text-accordion .accordion .card-header .btn:not(.collapsed) {
    color: var(--brand-primary) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Plus/minus icon for accordion */
.pimcore_area_text-accordion .accordion .card-header .btn::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-gray);
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: 1rem;
}

.pimcore_area_text-accordion .accordion .card-header .btn:not(.collapsed)::after {
    content: '–';
    color: var(--brand-primary);
}

/* Card body / answer content */
.pimcore_area_text-accordion .accordion .card-body {
    padding: 0 0 1rem 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Smooth collapse transition */
.pimcore_area_text-accordion .accordion .collapse {
    transition: height 0.35s ease;
}

.pimcore_area_text-accordion .accordion .collapsing {
    transition: height 0.35s ease;
}

/* Responsive accordion styling */
@media (max-width: 768px) {
    .pimcore_area_text-accordion .accordion .card-header .btn {
        padding: 0.875rem 0 !important;
        font-size: 1rem;
    }
    
    .pimcore_area_text-accordion .accordion .card-header .btn::after {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .pimcore_area_text-accordion .accordion .card-header .btn {
        padding: 0.75rem 0 !important;
        font-size: 0.95rem;
    }
    
    .pimcore_area_text-accordion .accordion .card-header .btn::after {
        font-size: 1.1rem;
    }
    
    .pimcore_area_text-accordion .accordion .card-body {
        padding: 1rem 0.8rem !important;
        font-size: 0.9rem;
    }
}

/* embed */
.area-embed .embed > *, .area-embed .embed iframe {
    width: 100%;
}

.area-embed .embed {
    padding-bottom: 20px;
}


/* icon teaser */

.area-icon-teaser-row .teaser-icon {
    width: 100%;
}

.teaser-icon > .icon {
    text-align: center;
    position: relative;
}

.teaser-icon > .icon > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 88px;
    height: 88px;
    border: 8px solid white;
    line-height: 88px;
    border-radius: 50%;
    background: var(--brand-primary);
    vertical-align: middle;
    transition: all 0.3s ease;
}

.teaser-icon > .icon:hover > .image {
    background: var(--brand-primary-dark);
}

.teaser-icon > .icon > .image > i {
    font-size: 32px !important;
    color: #fff !important;
    top: 5px !important;
    left:0;
}

.teaser-icon > .icon:hover > .image > i {
    color: white !important;
}

.teaser-icon > .icon > .info {
    margin-top: -24px;
    background: #FFFFFF;
    border: none;
    border-radius: 1.25rem;
    padding: 15px 0 10px 0;
    box-shadow: 0 30px 20px 0 rgba(30,30,30,0.06);
    transition: all 0.3s ease;
}

.teaser-icon > .icon:hover > .info {
    box-shadow: 0 8px 15px 0 var(--brand-primary-10);
    transform: translateY(-3px);
}

.teaser-icon > .icon > .info > h3.title {
    font-size: clamp(1.25rem, 2vw + 0.4rem, 1.75rem) !important;
    letter-spacing: normal;
    line-height: 1.25em;
    margin-top: 1em;
    color: var(--dark-gray);
}

.teaser-icon > .icon > .info > p, .teaser-icon > .icon > .info > div {
    color: var(--dark-gray);
    line-height: 1.5em;
    margin: 20px;
}

.teaser-icon > .icon:hover > .info > h3.title, .teaser-icon > .icon:hover > .info > p{
    color: var(--dark-gray);
}

/* Icon teaser button styling */
.teaser-icon .more .btn-outline-primary {
    border-radius: 50px;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
    transition: all 0.3s ease;
}

.teaser-icon .more .btn-outline-primary:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px 0 var(--brand-primary-10);
}


.fa-selection .x-combo-list-item, .fa-selection .x-boundlist-item {
    font-family: "FontAwesome" !important;
    font-size: 26px !important;
}

.area-gallery-single-images {
    text-align: center;
}

.area-gallery-folder a ,
.area-gallery-single-images a {
    text-decoration: none;
}

.area-gallery-single-images .pimcore_block_entry,
.area-gallery-folder a img ,
.area-gallery-single-images a img {
    margin: 0.5em;
}

.featurette-divider {
    margin: 40px 0;
}

/* Horizontal Line / Divider styling - matching blockquote card border */
hr,
.pimcore_area_horizontal-line hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--brand-primary-30) 50%, 
        transparent 100%);
    margin: 2rem 0;
    opacity: 1;
}

.img-responsive {
    width: 100%;
    height: auto;
}

/* Hero Carousel - Simple styling that works in both view and edit mode */
/* In view mode, the thumbnail defines the aspect ratio */
/* In edit mode, image editable has min-height for empty state */
#heroCarousel .carousel-item {
    position: relative;
    overflow: hidden;
}

/* Image fills the carousel item container */
#heroCarousel .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Image editable wrapper - full width, let image define height */
#heroCarousel .carousel-item .pimcore_editable_image,
#heroCarousel .carousel-item .studio-image-editable {
    display: block;
    width: 100%;
}

#heroCarousel .carousel-caption {
    z-index: 2;
}

.carousel-item .carousel-caption, .carousel-item .carousel-caption .hero-text {
    text-shadow: rgb(0, 0, 0) 0px 0px 5px;
}

/* Responsive carousel caption typography */
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption h4,
.carousel-caption h5,
.carousel-caption h6 {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

/* Also target display-1 class used for carousel headlines */
.carousel-caption .display-1 {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.carousel-caption p {
    font-size: clamp(1rem, 2vw + 0.3rem, 1.25rem);
    line-height: 1.5;
    margin-bottom: 1rem;
    margin-top: 0;
    color: #ffffff;
    opacity: 0.9;
    letter-spacing: normal;
}

/* Hero Carousel Indicators - Hide numbers, show only buttons */
#heroCarousel .carousel-indicators {
    margin-bottom: 1.5rem;
}

#heroCarousel .carousel-indicators li,
#heroCarousel .carousel-indicators button {
    font-size: 0;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#heroCarousel .carousel-indicators li.active,
#heroCarousel .carousel-indicators button.active,
#heroCarousel .carousel-indicators .active {
    background-color: #ffffff;
}

/* ========================================
   Carousel Edit Mode Styles
   In edit mode, keep slides layout but disable sliding animation
   Navigation buttons allow instant switching between slides
   ======================================== */
.carousel-editmode {
    /* Disable touch/swipe gestures in edit mode */
    touch-action: auto;
}

/* Disable all carousel transitions/animations in edit mode */
.carousel-editmode .carousel-inner,
.carousel-editmode .carousel-item {
    transition: none !important;
}

.carousel-editmode .carousel-item-next,
.carousel-editmode .carousel-item-prev,
.carousel-editmode .carousel-item.active {
    transition: none !important;
    transform: none !important;
}

/* Slide number indicator in edit mode */
.carousel-editmode .carousel-item::after {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

/* Generate slide numbers for edit mode */
.carousel-editmode .carousel-item:nth-child(1)::after { content: "Slide 1"; }
.carousel-editmode .carousel-item:nth-child(2)::after { content: "Slide 2"; }
.carousel-editmode .carousel-item:nth-child(3)::after { content: "Slide 3"; }
.carousel-editmode .carousel-item:nth-child(4)::after { content: "Slide 4"; }
.carousel-editmode .carousel-item:nth-child(5)::after { content: "Slide 5"; }
.carousel-editmode .carousel-item:nth-child(6)::after { content: "Slide 6"; }
.carousel-editmode .carousel-item:nth-child(7)::after { content: "Slide 7"; }
.carousel-editmode .carousel-item:nth-child(8)::after { content: "Slide 8"; }
.carousel-editmode .carousel-item:nth-child(9)::after { content: "Slide 9"; }
.carousel-editmode .carousel-item:nth-child(10)::after { content: "Slide 10"; }
.carousel-editmode .carousel-item:nth-child(n+11)::after { content: "Slide"; }

.carousel-item {
    position: relative;
}

.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brand-primary);
    background: linear-gradient(171deg, var(--brand-primary) 0%, rgba(0, 0, 0, 1) 61%, rgba(0, 0, 0, 1) 100%);
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
}

/* Gallery Carousel - Simple styling that works in both view and edit mode */
/* Image fills container naturally, caption overlays on top */
.area-gallery-carousel .carousel-item {
    position: relative;
    overflow: hidden;
}

/* Image: full width, height auto - let the thumbnail define aspect ratio */
.area-gallery-carousel .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Gallery carousel indicators - hide slide numbers */
.area-gallery-carousel .carousel-indicators li,
.area-gallery-carousel .carousel-indicators button {
    font-size: 0;
    text-indent: -9999px;
    color: transparent;
}

.area-gallery-carousel .carousel-inner .carousel-caption {
    bottom: 6vh;
    z-index: 2;
}

/* Indicators list style */
.carousel-indicators.preview li {
    border: medium none;
    border-radius: 0;
    height: 54px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 5px !important;
    margin-top: 0;
    width: 100px;
}
/* Indicators images style */
.carousel-indicators.preview img {
    border: 2px solid #FFFFFF;
    float: left;
    height: 54px;
    left: 0;
    width: 100px;
    opacity: 0.7;
}
/* Indicators active image style */
.carousel-indicators.preview .active img {
    border: 2px solid #428BCA;
    opacity: 1;
}

/*
 * Side navigation
 *
 * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 * sections of docs content.
 */

/* By default it's not affixed in mobile views, so undo that */
.bs-sidebar.affix {
    position: static;
}

/* First level of nav */
.bs-sidenav {
    /*margin-top: 30px;*/
    margin-bottom: 30px;
    padding-top:    10px;
    padding-bottom: 10px;
    text-shadow: 0 1px 0 #fff;
    background-color: transparent;
    border-radius: 5px;
    flex-direction: column;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 8em;
    /* padding-bottom: 8em; */
}

/* All levels of nav */
.bs-sidebar .nav > li > ul > li,
.bs-sidebar .nav > li {
    display: block;
}
.bs-sidebar .nav > li > a,
.bs-sidebar .nav li ul li a {
    display: block;
    color: var(--text-secondary);
    padding: 5px 20px;
}

.bs-sidebar .nav > li > ul > li > a {
    text-decoration: none;
    color: var(--text-secondary);
}

.bs-sidebar .nav li ul {
    list-style: none;
    text-decoration: none;
}

.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus,
.bs-sidebar .nav > li > ul > li a:hover,
.bs-sidebar .nav .active > a:hover,
.bs-sidebar .nav .mainactive > a:hover {
    text-decoration: none;
    background-color: rgba(0, 123, 255, 0.20) !important;
    border-radius: 4px;
}
.bs-sidebar .nav .active > a,
.bs-sidebar .nav .mainactive > a {
    color: var(--brand-primary-dark);
    font-weight: var(--font-bold);
    background-color: rgba(0, 123, 255, 0.12);
    border-right: 5px solid var(--brand-primary-dark);
    border-radius: 4px;
}


.bs-sidebar .nav a:hover,
.bs-sidebar .nav a:focus {
    color: var(--brand-primary-dark);
}

/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
    display: none; /* Hide by default, but at >768px, show it */
    margin-bottom: 8px;
}
.bs-sidebar .nav .nav > li > a {
    padding-top:    3px;
    padding-bottom: 3px;
    padding-left: 30px;
    font-size: 90%;
}

/* Show and affix the side nav when space allows it */
@media screen and (min-width: 1001px) {
    .bs-sidebar .nav > .active > ul {
        padding-left: 1em;
        display: block;
    }
    /* Widen the fixed sidebar */
    .bs-sidebar.affix,
    .bs-sidebar.affix-bottom {
        width: 213px;
    }
    .bs-sidebar.affix {
        position: fixed; /* Undo the static from mobile first approach */
        top: 80px;
    }
    .bs-sidebar.affix-bottom {
        position: absolute; /* Undo the static from mobile first approach */
    }
    .bs-sidebar.affix-bottom .bs-sidenav,
    .bs-sidebar.affix .bs-sidenav {
        margin-top: 0;
        margin-bottom: 0;
    }

    .languages {
        display: block;
    }
}


@media screen and (min-width: 1200px) {
    /* Widen the fixed sidebar again */
    .bs-sidebar.affix-bottom,
    .bs-sidebar.affix {
        width: 263px;
    }
}

/* small screen devices */
@media only screen and (max-width: 1000px) {

    h2, .display-2 {
        letter-spacing: 2px;
        line-height: 48px;
    }

    .sticky-top {
        position: relative;
    }

    .search-button {
        display: none !important;
    }

    #navbarCollapse .search-box {
        width: 100% !important;
    }

    /* Mobile navigation adjustments */
    .navbar-collapse.collapse.show {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .navbar-nav.menu-links {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
        width: 100%;
    }

    .menu-links > li {
        width: 100%;
        text-align: left;
        padding: 0.5rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        display: block;
        flex-direction: column;
    }

    .menu-links > li > a {
        text-align: left;
        width: 100%;
        padding: 0.75rem 0;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Add dropdown arrows for mobile navigation items with submenus */
    .menu-links .dropdown > a,
    .menu-links .dropdown > .dropdown-toggle {
        position: relative;
        padding-right: 60px !important; /* Make room for clickable arrow area */
        overflow: visible !important; /* Ensure arrow isn't clipped */
    }

    /* Nested dropdown arrows - subitems with their own dropdowns - REMOVED */
    .menu-links .dropdown-menu .dropdown > a,
    .menu-links .dropdown-menu .dropdown > .dropdown-toggle {
        position: relative;
        padding-right: 1rem !important; /* Reset padding for nested items */
        overflow: visible !important;
    }

    /* Allow our custom mobile arrows to show - ONLY for main level items */
    .menu-links .dropdown .dropdown-toggle::after {
        display: inline-block !important;
    }
    
    /* Hide arrows for nested dropdown items */
    .menu-links .dropdown-menu .dropdown .dropdown-toggle::after {
        display: none !important;
    }
    
    /* Arrows only for main level dropdowns */
    .menu-links .dropdown > a::after,
    .menu-links .dropdown > .dropdown-toggle::after {
        content: "";
        display: inline-block;
        position: absolute;
        right: 24px; /* Position arrow centered in the right area */
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='m2.75 0-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex-shrink: 0;
        border: none;
        transition: transform 0.3s ease;
        cursor: pointer;
        pointer-events: none; /* Let clicks pass through to create larger hit area */
        z-index: 2;
    }

    /* Remove arrows from nested dropdown items */
    .menu-links .dropdown-menu .dropdown > a::after,
    .menu-links .dropdown-menu .dropdown > .dropdown-toggle::after {
        display: none !important;
    }

    /* Create invisible clickable area around the arrow - ONLY for main level */
    .menu-links .dropdown > a::before,
    .menu-links .dropdown > .dropdown-toggle::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 60px;
        cursor: pointer;
        z-index: 1;
    }

    /* Remove clickable area from nested dropdown items */
    .menu-links .dropdown-menu .dropdown > a::before,
    .menu-links .dropdown-menu .dropdown > .dropdown-toggle::before {
        display: none !important;
    }

    /* Rotate arrow when dropdown is shown - ONLY for main level */
    .menu-links .dropdown.show > a::after,
    .menu-links .dropdown.show > .dropdown-toggle::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    /* Ensure parent container doesn't clip the arrow */
    .menu-links > li {
        overflow: visible !important;
    }

    /* Mobile dropdown styling - hidden by default, shown only when has 'show' class */
    .menu-links .dropdown-menu {
        width: 100% !important;
        position: static !important;
        float: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        display: none !important;
        left: 0 !important;
        right: 0 !important;
        animation: none !important;
    }

    /* Show dropdown when it has 'show' class (Bootstrap standard) */
    .menu-links .dropdown-menu.show {
        display: block !important;
        animation: slideDown 0.3s ease-in-out !important;
    }

    /* Also show when parent dropdown has 'show' class (backup for compatibility) */
    .menu-links .dropdown.show .dropdown-menu {
        display: block !important;
        animation: slideDown 0.3s ease-in-out !important;
    }

    /* Nested dropdown menus */
    .menu-links .dropdown-menu .dropdown-menu {
        width: 100% !important;
        position: static !important;
        float: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        display: none !important;
        left: 0 !important;
        right: 0 !important;
        animation: none !important;
    }

    .menu-links .dropdown-menu .dropdown-menu.show {
        display: block !important;
        animation: slideDown 0.3s ease-in-out !important;
    }

    .menu-links .dropdown-menu .dropdown.show .dropdown-menu {
        display: block !important;
        animation: slideDown 0.3s ease-in-out !important;
    }

    .menu-links .dropdown-menu li {
        width: 100%;
        background-color: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    .menu-links .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .menu-links .dropdown-menu li a {
        padding: 0.75rem 1rem 0.75rem 2rem !important; /* Added left indent for subitems */
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        background-color: transparent !important;
    }

    /* Nested dropdown items - third level */
    .menu-links .dropdown-menu .dropdown-menu li a {
        padding: 0.75rem 1rem 0.75rem 3rem !important; /* Extra indent for nested items */
        font-size: 15px !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .menu-links .dropdown-menu li a:hover,
    .menu-links .dropdown-menu li a:focus {
        background-color: transparent !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: none !important;
        padding-left: 2.5rem !important;
    }

    .menu-links .dropdown-menu .dropdown-menu li a:hover,
    .menu-links .dropdown-menu .dropdown-menu li a:focus {
        padding-left: 3.5rem !important;
    }

    .menu-icons .dropdown-menu {
        position: absolute;
        top: 250%;
    }

    .menu-icons {
        margin-top: 30px;
    }

    .menu-icon {
        height: 20.5px;
        width: 20.5px;
    }
    
    .menu-icon img,
    .search-toggle {
        width: 20.5px;
        height: 20.5px;
    }

    .menu-icons > li > a {
        display: block !important;
    }

    /* Disable hover-based dropdown display on mobile */
    ul.dropdown-menu, 
    .navbar-nav li:hover > ul.dropdown-menu,
    .menu-links .dropdown:hover .dropdown-menu {
        display: none !important;
    }

    /* Only show dropdowns when explicitly toggled via Bootstrap's 'show' class */
    .menu-links .dropdown.show .dropdown-menu {
        display: block !important;
    }

    .main-menu-icon>a:after {
        font-family: "Font Awesome 5 Free"; font-weight: 600; content: "\f067";
        float: right;
        border: none;
        padding: 0px 5px 0 5px;
    }

    .main-menu-icon.active-icon>a:after {
        display: none;
    }

    .search-toggle {
        margin-top: 0 !important;
    }

    /* Sidebar stays visible at 1000px, hidden at 768px - see separate media query below */

    .area-gallery-carousel .carousel-inner .carousel-caption {
        top: 4vh;
    }

    .area-gallery-carousel .carousel-inner .carousel-caption h3 {
        line-height: 1.2;
    }
    
    /* Mobile carousel caption adjustments */
    .carousel-caption h1,
    .carousel-caption h2,
    .carousel-caption h3,
    .carousel-caption h4,
    .carousel-caption h5,
    .carousel-caption h6 {
        font-size: clamp(1.25rem, 5vw + 0.5rem, 2.5rem);
        margin-bottom: 0.75rem;
    }
    
    .carousel-caption p {
        font-size: clamp(0.9rem, 3vw + 0.2rem, 1.1rem);
        margin-bottom: 0.75rem;
    }

    .area-gallery-carousel .carousel-indicators {
        display: none;
    }
}

/* Sidebar layout - hide sidebar and make main content full width on mobile */
@media (max-width: 767px) {
    .sidebar {
        display: none;
    }
    
    .col-md-9.order-last {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Hide carousel paragraphs on small screens */
@media (max-width: 800px) {
    .carousel-caption p {
        display: none;
    }
}

/* Breadcrumbs */
.breadcrumb-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0;
    line-height: 1.2;
}

.breadcrumb-header a,
.breadcrumb-header span {
    display: inline-flex;
    align-items: center;
    color: var(--brand-primary);
    line-height: 1.2;
    font-size: 0.9rem;
    vertical-align: middle;
}

.breadcrumb-header a:hover {
    color: var(--brand-primary-dark);
}

/* Breadcrumb separator arrow */
.breadcrumb-header .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    margin: 0 0.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%236c757d' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='m2.75 0-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
}

/* Active/last breadcrumb item styling - darker color for current page */
.breadcrumb-header span.active:not(.breadcrumb-separator),
.breadcrumb-header a.active {
    color: var(--dark-gray);
}

.thumbnail-examples .row {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--brand-primary-30);
}

section img {
    max-width: 100%;
}

section picture img {
    height: auto;
}

.thumbnail-examples h5 {
    margin-top:1em;
    line-height: 1em;
    font-size: 26px;
}

.thumbnail-examples .img-container {
    background: url(/static/images/transparent-background-placeholder.png);
}

.image-container {
    position:relative;
    max-width: 100%;
}

.image-hotspot {
    position: absolute;
    background: rgba(235, 105, 9, 0.2);
}

.image-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #2aabeb;
}


.detail-price {
    font-size: 30px;
    font-weight: var(--font-bold);
    letter-spacing: 2px;
    line-height: 22px;
}

.detail-price.original {
    font-size: 20px;
    text-decoration: line-through;
    font-weight: var(--font-regular);
    letter-spacing: 2px;
    line-height: 22px;
}

.detail-tax, .detail-tax p {
    font-size: 14px;
}

.filter .hide-me[aria-expanded="true"] {
    display: none;
}

/* search bar */

.search-toggle {
    background-image: url(/static/images/icons/search.svg);
    background-repeat: no-repeat;
    width: 20.5px;
    height: 20.5px;
    background-position: center;
    background-size: 20.5px 20.5px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-toggle.active {
    background-image: url("/static/images/icons/close.svg");
}

.search-input:focus {
    outline: none;
}

#navbarCollapse .search-box {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 100%;
    max-height: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    background-color: var(--brand-primary);
    transition: all 0.3s;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#navbarCollapse .search-box .search-input {
    width: 100%;
    height: 100%;
    padding: 0 2em;
    border: 0;
    background-color: var(--brand-primary);
    opacity: 0;
    color: #fff;
    text-transform: none;
    caret-color: #fff;
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
}

#navbarCollapse .search-box .search-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#navbarCollapse.show .search-box {
    max-height: 4em;
}

#navbarCollapse.show .search-box .search-input {
    opacity: 1;
}

#autoComplete_results_list {
    width: 100%;
}
.autoComplete_result {
    margin: 0;
    padding: 0.6rem 0 0.6rem 2.5rem;
    max-width: 100%;
     border: 0;
    list-style: none;
    text-align: left;
    font-size: clamp(1rem, 0.6vw + 0.2rem, 1.125rem);
    transition: all 0.1s ease-in-out;
    background-color: rgba(0, 0, 0,0.6);
    color: var(--light-gray);
}

.autoComplete_result:last-child {
    border-radius: 0;
}

.autoComplete_highlighted {
    color: #ffffff;
    font-weight: var(--font-regular);
}

.autoComplete_result:hover,
.autoComplete_result:focus {
    cursor: pointer;
    background-color: var(--brand-primary-dark);
    border: 0;
}

#autoComplete:focus::selection {
    background-color: var(--brand-primary-light);
}


.form-signin {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.pimcore_tag_video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.pimcore_tag_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 5px;
    right: 5px;
    display: none;
    z-index: 99999;
}


/* Animations */
.portal-page .custom-standard-card,.portal-page .custom-product-card{
    transform: translateY(0);
    transition: all 0.30s ease 0s;
}
.portal-page .custom-standard-card:hover,.portal-page .custom-product-card:hover{
    transform: translateY(-10px);
}


.custom-product-card .product-img {
    position: relative;
}

/** events page **/
#vueapp .header {
    background: #f2f2f2;
    border: none;
    padding: 1em;
    border-radius: 25px;
}

#vueapp .back-button {
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    width: auto;
    display: inline-block;
    /* Ensure secondary button styling is applied */
    color: var(--brand-primary);
    background-color: var(--white);
    border: 1px solid var(--brand-primary-30) !important;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    height: auto;
    /* Vertically center with the header row */
    top: 50%;
    transform: translateY(-50%);
}

#vueapp .back-button:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover) !important;
    color: var(--white);
    transform: translateY(calc(-50% - 5px));
}

/* Event detail header row - position relative for button */
#vueapp .row.header {
    position: relative;
}

#vueapp h3 {
    line-height: 1;
    margin-top: .5em;
}

#vueapp .badge {
    font-size: 80%;
    font-weight: 400;
}

/* Event card badges - muted background */
#vueapp .badge.bg-secondary {
    background-color: #6c757d75 !important;
}

/* Event card footer - top border with gradient */
#vueapp .card-footer {
    background: transparent;
    border-top: none;
    position: relative;
    padding-top: 0.7rem;
    padding-bottom: 1rem;
}

#vueapp .card-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--brand-primary-30) 50%, transparent 100%);
}

/* Event detail page - Organizer card should size to content, no teaser styling */
#vueapp #info .card {
    height: auto;
    border: 1px solid var(--brand-primary-15) !important;
    border-radius: 1.25rem;
    box-shadow: none !important;
}

#vueapp #info .card:hover {
    box-shadow: none !important;
    transform: none !important;
}

[v-cloak] {
    display: none;
}

@media (max-width: 1000px) {
    #vueapp .back-button {
        position: inherit;
        margin-bottom: 1em;
    }
}

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.iframe-responsive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Footer Styles */
.footer-container {
    background-color: #ffffff;
}

/* Footer Main Row */
.footer-main-row {
    border-bottom: 1px solid #f0f0f0;
}

/* Override Bootstrap's universal box-sizing for footer columns to ensure proper width distribution */
.footer-main-row .col-12,
.footer-main-row .col-6,
.footer-main-row .col-md-6,
.footer-main-row .col-md-3,
.footer-main-row .col-lg-2,
.footer-main-row .col-lg {
    box-sizing: content-box !important;
    padding-left: 15px;
    padding-right: 15px;
}

#logo-footer {
    height: 80px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Language Select Dropdown in Footer */
.language-select-footer {
    max-width: 350px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* Center align the first footer column vertically - responsive padding/margin */
.footer-main-row .col-12.col-md-6.col-lg.mb-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    text-align: left;
    padding: 1rem 15px;
    margin-bottom: 1.5rem;
}

/* Responsive padding and margin for footer column */
@media (min-width: 576px) {
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        padding: 1.25rem 20px;
        margin-bottom: 1.75rem;
    }
}

@media (min-width: 576px) {
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        padding: 1.25rem 20px;
        margin-bottom: 1.75rem;
        gap: 1.25rem;
    }
}

@media (min-width: 768px) {
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        padding: 1.5rem 25px;
        margin-bottom: 2rem;
        gap: 1.75rem;
    }
}

/* Desktop Footer Adjustments */
@media (min-width: 992px) {
    .footer-container {
        padding-top: 3rem;
        /* padding-bottom: 2rem; */
    }
    
    .footer-main-row {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .language-select-footer {
        margin: 0;
    }
    
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        align-items: flex-start;
        text-align: left;
        padding: 2rem 30px;
        margin-bottom: 2.5rem;
        gap: 2.25rem;
    }
    
    #logo-footer {
        height: 85px;
        margin: 0;
    }
}

/* Large Desktop Footer Adjustments */
@media (min-width: 1200px) {
    .footer-container {
        padding-top: 3.5rem;
        /* padding-bottom: 2.5rem; */
    }
    
    #logo-footer {
        height: 90px;
    }
    
    .footer-column-title {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }
    
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        padding: 2.5rem 35px;
        margin-bottom: 3rem;
        gap: 2.5rem;
    }
    
    .footer-link {
        font-size: 1rem;
    }
}

.language-dropdown,
.form-control.language-dropdown,
.form-control-sm.language-dropdown,
select.language-dropdown {
    font-size: 0.9rem !important;
    padding: 0.625rem 2.5rem 0.625rem 1.25rem !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='m0 2.75 1.5-1.5L4 3.75l2.5-2.5L8 2.75l-4 4-4-4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    color: var(--dark-gray) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    display: block !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.language-dropdown:focus,
.form-control.language-dropdown:focus,
.form-control-sm.language-dropdown:focus,
select.language-dropdown:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-25) !important;
    outline: 0 !important;
}

.language-dropdown:hover,
.form-control.language-dropdown:hover,
.form-control-sm.language-dropdown:hover,
select.language-dropdown:hover {
    border-color: #aaa !important;
}

.language-dropdown option,
.form-control.language-dropdown option,
.form-control-sm.language-dropdown option,
select.language-dropdown option {
    padding: 0.5rem !important;
    background-color: #fff !important;
    color: var(--dark-gray) !important;
    font-size: 0.9rem !important;
}

/* Footer Column Styling */
.footer-column-title {
    font-size: clamp(1.125rem, 1.5vw + 0.3rem, 1.375rem);
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 1.5rem;
    text-transform: none;
    letter-spacing: normal;
    position: relative;
    display: inline-block;
}

.footer-column-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary-30) 0%, transparent 100%);
    border-radius: 3px;
}

.footer-links {
    margin-bottom: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: clamp(0.95rem, 0.5vw + 0.2rem, 1.05rem);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-block;
    padding: 0.25rem 0 0.25rem 1rem;
    position: relative;
}

.footer-link::before {
    content: '➔';
    position: absolute;
    left: -5px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--brand-primary);
}

.footer-link:hover {
    color: var(--brand-primary);
    text-decoration: none;
    padding-left: 1.5rem;
}

.footer-link:hover::before {
    left: 0;
    opacity: 1;
}

/* Override text-center for col-12 elements */
.col-12.text-center {
    text-align: left !important;
}

/* Mobile override - center align footer columns */
@media (max-width: 767px) {
    .footer-main-row .col-12.text-center,
    .footer-main-row .col-6.text-center,
    .footer-main-row .col-md-6.text-center,
    .footer-main-row .col-lg-2.text-center,
    .footer-main-row .col-lg.text-center {
        text-align: center !important;
    }
}

/* Footer Copyright Row */
.footer-copyright-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.footer-copyright-row * {
    text-align: center !important;
}

.footer-copyright {
    color: #999999;
    font-size: clamp(0.875rem, 0.4vw + 0.15rem, 1rem);
    letter-spacing: 0.5px;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: block !important;
}

/* Tablet Footer Adjustments - Under 1000px */
@media (max-width: 1000px) and (min-width: 768px) {
    .footer-container {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
    
    .footer-main-row {
        padding-bottom: 0;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    
    /* Row 1: Logo left, language dropdown right - full width */
    .footer-main-row > .col-12.col-md-6.col-lg.mb-4:first-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 1.5rem;
        padding: 0 15px;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 1.5rem;
    }
    
    .footer-main-row > .col-12.col-md-6.col-lg.mb-4:first-child #logo-footer {
        margin: 0;
        height: 60px;
    }
    
    .footer-main-row > .col-12.col-md-6.col-lg.mb-4:first-child .language-select-footer {
        margin: 0;
        text-align: right;
    }
    
    /* Rows 2 & 3: Link columns - 2 per row (50% width each) */
    .footer-main-row > .col-6.col-md-3.col-lg-2.mb-4,
    .footer-main-row .col-6.col-md-3.col-lg-2 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 1.5rem;
        text-align: left !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Footer column titles - left aligned for tablet */
    .footer-column-title {
        text-align: left !important;
        display: inline-block;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .footer-column-title::after {
        left: 0;
        transform: none;
    }
    
    /* Footer links left aligned */
    .footer-links {
        text-align: left;
        padding-left: 0;
    }
    
    .footer-links li {
        text-align: left;
        margin-bottom: 0.4rem;
    }
    
    .footer-link {
        text-align: left;
        padding-left: 1rem;
        font-size: 0.95rem;
    }
    
    .footer-link::before {
        display: block;
    }
    
    /* Row 4: Copyright - full width */
    .footer-copyright-row {
        width: 100%;
        padding-top: 1rem;
        border-top: 1px solid #f0f0f0;
    }
    
    .footer-link:hover {
        padding-left: 1.5rem;
    }
    
    #logo-footer {
        height: 60px;
    }
    
    .language-select-footer {
        max-width: 200px;
    }
}

/* Small Tablet Footer Adjustments */
@media (max-width: 767px) {
    .footer-container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .footer-main-row {
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    
    .footer-main-row .col-6,
    .footer-main-row .col-12,
    .footer-main-row .col-md-6,
    .footer-main-row .col-lg-2,
    .footer-main-row .col-lg {
        width: 100% !important;
        margin-bottom: 1.5rem;
        text-align: center !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* First column (logo + language) styling for mobile */
    .footer-main-row .col-12:first-child {
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 1rem 15px;
        margin-bottom: 1.5rem;
    }
    
    #logo-footer {
        height: 60px;
        margin: 0 auto 1rem auto;
    }
    
    .language-select-footer {
        max-width: 200px;
        margin: 0 auto;
        text-align: center;
    }
    
    /* Footer column titles center aligned on mobile */
    .footer-column-title {
        font-size: 1.125rem;
        margin-bottom: 1.25rem;
        text-align: center !important;
        display: block;
    }
    
    .footer-column-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Footer links center aligned and more compact on mobile */
    .footer-links {
        text-align: center;
        list-style: none;
        padding: 0;
    }
    
    .footer-links li {
        margin-bottom: 0.25rem;
        text-align: center;
    }
    
    .footer-link {
        font-size: 0.95rem;
        padding: 0.125rem 0;
        text-align: center;
        display: inline-block;
        width: auto;
    }
    
    .footer-link::before {
        display: none;
    }
    
    .footer-link:hover {
        padding-left: 0;
    }
}

/* Extra Small Screens - Enhanced mobile layout */
@media (max-width: 480px) {
    .footer-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .footer-main-row {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    #logo-footer {
        height: 50px;
        margin: 0 auto 0.75rem auto;
    }
    
    .footer-main-row .col-12.col-md-6.col-lg.mb-4 {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .language-select-footer {
        max-width: 180px;
    }
    
    .language-dropdown,
    .form-control.language-dropdown,
    .form-control-sm.language-dropdown,
    select.language-dropdown {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        font-size: 0.85rem !important;
    }
    
    .footer-column-title {
        font-size: 1rem;
        margin-bottom: 1rem;
        text-align: center !important;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-links li {
        text-align: center;
    }
    
    .footer-link {
        font-size: 0.9rem;
        text-align: center;
        display: inline-block;
        width: auto;
        padding: 0.125rem 0;
    }
    
    .footer-copyright {
        font-size: 0.8rem;
        text-align: center !important;
    }
}

/* Statistical Number Styling - Blue Button Color and Bold */
.stat-number,
.statistic-number,
.big-number {
    color: var(--brand-primary) !important;
    font-weight: bold !important;
}

/* Additional utility class for any number that needs button blue styling */
.number-blue {
    color: var(--brand-primary) !important;
    font-weight: bold !important;
}

/* Teaser Row Container - Reduce Bootstrap padding utilities */
.teaser-row-container.pt-5,
.pt-5 {
    padding-top: 2rem !important;
}

.teaser-row-container.pt-5.pb-3 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.teaser-row-container.py-5,
.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.pt-1, .py-1 {
    padding-top: 1.25rem !important;
}

.mb-3, .my-3 {
    margin-bottom: 2rem !important;
}

/* Remove margin from product teaser rows */
.row.mb-3.text-left {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    .pt-md-5, .py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ============================================
   Blockquote Card Styling
   ============================================ */
.blockquote-section {
    padding: 2rem 2rem;
}

.blockquote-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 1.25rem;
    padding: 2.5rem;
    box-sizing: border-box;
    border: none;
    position: relative;
    
    /* Glassmorphism effect */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 
        0 4px 16px var(--brand-primary-10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Gradient border effect */
.blockquote-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        var(--brand-primary-30) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Alignment variations */
.blockquote-card.left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.blockquote-card.right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.blockquote-card.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Large decorative quote symbol */
.blockquote-symbol {
    font-family: "Montserrat", sans-serif;
    font-size: 4rem;
    color: var(--brand-primary);
    font-weight: 800;
    display: block;
    height: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.blockquote-card.center .blockquote-symbol {
    text-align: center;
}

.blockquote-card.right .blockquote-symbol {
    text-align: right;
}

/* Quote text */
.blockquote-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 1.25rem;
}

/* Divider line */
.blockquote-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--brand-primary-30) 50%, 
        transparent 100%);
    margin: 1.25rem 0;
}

/* Author section */
.blockquote-author {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
}

.blockquote-card.center .blockquote-author {
    justify-content: center;
}

.blockquote-card.right .blockquote-author {
    justify-content: flex-end;
}

.blockquote-author-info {
    display: flex;
    flex-direction: column;
}

.blockquote-author-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark-gray);
    margin-bottom: 0.15rem;
}

.blockquote-author-title {
    font-family: "Montserrat", sans-serif;
    font-weight: var(--font-regular);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blockquote-card {
        padding: 1.75rem;
    }
    
    .blockquote-symbol {
        font-size: 3rem;
        height: 2rem;
    }
    
    .blockquote-text {
        font-size: 1rem;
    }
}

/* ============================================
   Consistent Section/Area Padding
   ----------------------------------------
   Unified padding for content sections
   ============================================ */

/* Jumbotron, Standard Teaser, Personalized Product Teaser - Consistent padding */
.jumbotron.bg-white.text-center,
.area-standard-teaser.bg-light.text-center,
.pimcore_area_personalized-product-teaser.pimcore_area_content {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0 !important;
}

/* Section headlines - consistent spacing */
.jumbotron.bg-white.text-center h2,
.area-standard-teaser.bg-light.text-center h2,
.pimcore_area_personalized-product-teaser.pimcore_area_content h2 {
    margin-top: 1rem !important;
    margin-bottom: 3rem !important;
}

/* Pimcore Area Standard Teaser - Remove borders and add hover shadow */
.pimcore_area_standard-teaser {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* Card deck margin removal - "Your classic car one-stop shop" section */
.card-deck.mb-3.text-center {
    margin-bottom: 0 !important;
}

/* Personal recommendation cards - remove individual card margins */
.pimcore_area_standard-teaser .col-md-4.d-flex.align-items-stretch.flex-column {
    margin-bottom: 0 !important;
}

/* Remove grey/light backgrounds from all areas and sections */
.area-standard-teaser.bg-light,
.teaser-row-container.bg-light,
.bg-light,
section.bg-light,
.pimcore_area_content .bg-light,
.pimcore_area_hero-grid .bg-light,
.pimcore_area_hero-teaser .bg-light,
.pimcore_area_standard-teaser .bg-light,
.pimcore_area_icon-teaser-row .bg-light {
    background-color: transparent !important;
    background: transparent !important;
}

.pimcore_area_content,
.pimcore_area_wysiwyg-with-images {
    padding-top: 0 !important;
}

.pimcore_area_hero-teaser {
    padding-top: 0 !important;
}

/* Hide empty pimcore link elements (when no link content is set) */
.pimcore_area_hero-teaser .jumbotron-btn a:empty,
.pimcore_area_content a:empty,
.jumbotron .jumbotron-btn a:empty {
    display: none !important;
}

/* Hide pimcore editable link placeholders in frontend (non-editmode) */
.pimcore_area_hero-teaser a.pimcore_editable:empty,
.pimcore_area_content a.pimcore_editable:empty {
    display: none !important;
}

/* Ensure jumbotron buttons container doesn't show if buttons are empty */
.jumbotron-btn:has(a:empty) {
    display: none !important;
}

.pimcore_area_standard-teaser .custom-standard-card,
.pimcore_area_standard-teaser .custom-product-card,
.pimcore_area_content .custom-standard-card,
.pimcore_area_content .custom-product-card {
    border: none !important;
}

.pimcore_area_standard-teaser .custom-standard-card:hover,
.pimcore_area_standard-teaser .custom-product-card:hover,
.pimcore_area_content .custom-standard-card:hover,
.pimcore_area_content .custom-product-card:hover {
    box-shadow: 0 8px 15px 0 var(--brand-primary-10) !important;
}

/* Logo Slider / Client Logos - Continuous scrolling animation */
/* Temporarily hidden - remove display:none to show */
.pimcore_area_logo-slider,
.logo-slider-section {
    display: none;
}

@keyframes logo-scroll {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(calc(-250px * 7));
    }
}

.logo-slider {
    background: #ffffff;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0;
}

.logo-slider::before,
.logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-slider::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.logo-slider::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.logo-slide-track {
    animation: logo-scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
    background: #ffffff;
}

.logo-slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: #ffffff;
}

.logo-slide img {
    max-height: 80px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    background: #ffffff;
}

.logo-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo-slider {
        height: 80px;
    }
    
    .logo-slide {
        height: 80px;
        width: 200px;
        padding: 0 15px;
    }
    
    .logo-slide img {
        max-height: 60px;
        max-width: 160px;
    }
    
    .logo-slide-track {
        width: calc(200px * 14);
    }
    
    @keyframes logo-scroll {
        0% { 
            transform: translateX(0); 
        }
        100% { 
            transform: translateX(calc(-200px * 7));
        }
    }
}

@media (max-width: 480px) {
    .logo-slider {
        height: 60px;
    }
    
    .logo-slide {
        height: 60px;
        width: 150px;
        padding: 0 10px;
    }
    
    .logo-slide img {
        max-height: 45px;
        max-width: 120px;
    }
    
    .logo-slider::before,
    .logo-slider::after {
        width: 50px;
    }
}

/* Pimcore Area Featurette - Vertical Center Alignment */
.area-featurette .row.featurette {
    display: flex !important;
    align-items: center !important;
    min-height: 40vh !important;
}

.area-featurette .row.featurette .col-sm-7 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.area-featurette .featurette-heading {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.area-featurette .lead {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Filter sidebar cards - consistent styling */
#filter-container.card,
.product-filters .card,
#js_filterfield .card {
    border: none !important;
    box-shadow: none;
    background-color: transparent;
}

#filter-container .card-header,
.product-filters .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--brand-primary-10);
    padding: 1rem 0;
}

#filter-container .card-body,
.product-filters .card-body {
    padding: 1rem 0;
}

/* Filter Category Headline - Add padding bottom */
#js_filterfield h6.mb-0 {
    padding-bottom: 1rem !important;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* Filter sections - consistent spacing */
#js_filterfield .filter {
    padding-top: 1rem;
    margin-bottom: 0;
}

/* Filter List Items - borders between each item */
#js_filterfield .list-group-item {
    border: none;
    border-bottom: 1px solid var(--brand-primary-10);
    border-radius: 0;
    background-color: transparent;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hover state for filter items */
#js_filterfield .list-group-item:hover {
    background-color: var(--brand-primary-10);
}

/* Selected state for filter items (when checkbox/radio is checked) */
#js_filterfield .list-group-item.list-group-item-secondary,
#js_filterfield .list-group-item:has(.custom-control-input:checked) {
    background-color: var(--brand-primary-10);
}

/* First filter item - add top border */
#js_filterfield .list-group-item:first-child {
    border-top: 1px solid var(--brand-primary-10);
    border-radius: 0;
}

/* Last filter item - no special radius */
#js_filterfield .list-group-item:last-child {
    border-radius: 0;
}

/* Filter List Items - Remove line-height inheritance for better alignment */
#js_filterfield .list-group-item.d-flex.justify-content-between.align-items-center {
    line-height: 1 !important;
}

/* Custom control styling for filters - checkbox/radio on left with vertical center alignment */
#js_filterfield .custom-control.custom-checkbox,
#js_filterfield .custom-control.custom-radio {
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
    position: relative;
    min-height: auto;
}

#js_filterfield .custom-control-label,
#js_filterfield .custom-control label {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0 !important;
    margin: 0;
    height: auto;
}

#js_filterfield .custom-control-label::before,
#js_filterfield .custom-control-label::after {
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
}

/* Checkbox - square shape */
#js_filterfield .custom-checkbox .custom-control-label::before {
    content: "";
    display: block;
    border: 1px solid var(--brand-primary-30);
    border-radius: 0.25rem;
    background-color: #fff;
}

#js_filterfield .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

#js_filterfield .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    content: "";
    display: block;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    background-size: 0.6rem;
    background-repeat: no-repeat;
    background-position: center;
}

/* Radio button - circular shape */
#js_filterfield .custom-radio .custom-control-label::before {
    content: "";
    display: block;
    border: 1px solid var(--brand-primary-30);
    border-radius: 50%;
    background-color: #fff;
}

#js_filterfield .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

#js_filterfield .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    content: "";
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================
   Filter Checkboxes/Radios - Universal Vertical Center Alignment
   Applies to all list-group filter items with checkboxes/radios
   ============================================ */

/* Filter list items with checkboxes/radios - ensure vertical center alignment */
.filter .list-group-item .custom-control.custom-checkbox,
.filter .list-group-item .custom-control.custom-radio,
.list-group-item.d-flex .custom-control.custom-checkbox,
.list-group-item.d-flex .custom-control.custom-radio {
    display: flex;
    align-items: center;
    min-height: auto;
}

.filter .list-group-item .custom-control-label,
.filter .list-group-item .custom-control label,
.list-group-item.d-flex .custom-control-label,
.list-group-item.d-flex .custom-control label {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin: 0;
    padding: 0 !important;
    height: auto;
}

.filter .list-group-item .custom-control-label::before,
.filter .list-group-item .custom-control-label::after,
.list-group-item.d-flex .custom-control-label::before,
.list-group-item.d-flex .custom-control-label::after {
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
}

/* Filter Navigation Icons - Add spacing */
.fas.fa-angle-left {
    padding-right: 5px;
}

/* ============================================
   CART STYLING
   ============================================ */

/* Cart item row - vertical center alignment */
.shopping-cart .card-body > .row {
    display: flex;
    align-items: center;
}

/* All columns in cart row - vertical center */
.shopping-cart .card-body > .row > [class*="col"] {
    display: flex;
    align-items: center;
}

/* Product info column - allow text to stack */
.shopping-cart .card-body > .row > .col-md-4,
.shopping-cart .card-body > .row > .col-md-5:not(.row) {
    flex-direction: column;
    align-items: flex-start;
}

/* Product name - reduce bottom margin */
.shopping-cart .product-name {
    margin-bottom: 0.25rem;
    padding-top: 0 !important;
}

/* Product description - reduce spacing */
.shopping-cart .product-name + p,
.shopping-cart .product-name + .text-muted {
    margin-bottom: 0.25rem;
}

/* Price column - better alignment */
.shopping-cart .col-md-5.row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Quantity and delete button - side by side with 8px gap */
.shopping-cart .quantity {
    display: inline-block;
}

.shopping-cart .col-md-3 {
    padding-right: 0;
    flex: 0 0 auto;
    width: auto;
}

/* Delete button - secondary style, reduced padding, consistent height */
.shopping-cart .cart-delete-btn {
    min-width: auto;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-left: 8px;
}

/* Delete button hover - no jump animation */
.shopping-cart .cart-delete-btn:hover {
    transform: none;
}

/* Delete button column - reset padding */
.shopping-cart .col-md-1 {
    min-width: auto;
    overflow: visible;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto;
    width: auto;
}

/* Quantity input - consistent height and rounded corners */
.shopping-cart .quantity input {
    height: 38px;
    border-radius: 50px;
    border: 1px solid #ced4da;
    min-width: 70px;
    text-align: center;
}

/* Voucher input - rounded corners to match other inputs */
.col-md-4 input[name="voucher-code"] {
    border-radius: 50px 0 0 50px;
    height: 38px;
}

.col-md-4 .input-group-append .btn {
    border-radius: 0 50px 50px 0;
    height: 38px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* Cart overview and voucher cards - no hover effect */
/* Exclude product cards which should have shadows */
.col-md-4 > .card:not(.custom-product-card):not(.custom-standard-card),
.col-md-4 > form.card,
.col-md-4 .list-group,
.col-md-4 .list-group-item,
.col-md-4 > .card.mb-3:not(.custom-product-card):not(.custom-standard-card),
.col-md-4 .list-group.mb-3,
.card.shopping-cart {
    box-shadow: none !important;
    transform: none !important;
}

/* Voucher form card - transparent background, fit to input height */
.col-md-4 > form.card.p-2.mb-4 {
    background-color: transparent;
    border: none;
    padding: 0 !important;
    margin-bottom: 20px !important;
    height: auto;
    min-height: 0;
}

/* Voucher form - no card styling, just the input */
.voucher-form {
    background: transparent;
    padding: 0;
}

.voucher-form .list-group {
    background: transparent;
}

.voucher-form .list-group.pb-3 {
    padding-bottom: 8px !important;
}

.voucher-form .list-group-item {
    border: none;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

.voucher-form .input-group {
    height: 38px;
}

/* Voucher apply button - no hover jump animation */
.voucher-form .input-group .btn-secondary:hover {
    transform: none;
}

/* Voucher apply button - no border radius on left side to connect with input */
.voucher-form .input-group .input-group-append .btn-secondary {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Voucher item layout - flexbox for consistent alignment */
.voucher-form .voucher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Voucher info text - flexible, wraps text, doesn't overflow into button */
.voucher-form .voucher-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    word-wrap: break-word;
}

/* Voucher delete button container - fixed width, no shrink */
.voucher-form .voucher-delete {
    flex: 0 0 auto;
}

/* Voucher delete button - same styling as cart delete button */
.voucher-form .cart-delete-btn {
    min-width: auto;
    padding: 0.375rem 0.75rem !important;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

/* Flash message styling - text left, close button right */
.flash-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    border-radius: 0;
}

.flash-message .flash-message-text {
    flex: 1;
}

.flash-message .btn-close {
    width: 16px;
    height: 16px;
    background-size: 16px;
    padding: 0;
    flex-shrink: 0;
}

/* Order summary list-group - styled like cards with border radius and brand colors */
.bg-light > .container > .row > .col-md-4 > .list-group.mb-3 {
    border: 1px solid color-mix(in srgb, var(--brand-primary-30) 50%, transparent);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: none;
}

/* Order summary list items - remove individual borders, keep internal dividers */
.bg-light > .container > .row > .col-md-4 > .list-group.mb-3 .list-group-item {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary-30) 50%, transparent);
}

/* Last item in order summary - no bottom border */
.bg-light > .container > .row > .col-md-4 > .list-group.mb-3 .list-group-item:last-child {
    border-bottom: none;
}

/* Order summary total row - use divider color for top border */
.bg-light > .container > .row > .col-md-4 .list-group-item[style*="border-top"] {
    border-top: 2px solid var(--brand-primary-30) !important;
}

/* Utility cards (cart, shopping cart, checkout) - no borders, shadows, or hover effects */
/* Only target cards within cart/checkout pages (bg-light context) that are NOT teaser cards */
.card.shopping-cart,
.bg-light > .container > .row > .col-md-4 > .card:not(.custom-product-card):not(.custom-standard-card) {
    border: none !important;
    box-shadow: none !important;
}

/* Cart page "Your Cart" heading - no margin bottom */
.bg-light > .container > .row > .col-md-8 > h4 {
    margin-bottom: 0;
}

/* Cart sidebar and shopping cart - completely disable all hover effects */
.bg-light > .container > .row > .col-md-4 > .card:not(.custom-product-card):not(.custom-standard-card):hover,
.card.shopping-cart:hover {
    box-shadow: none !important;
    transform: none !important;
    background-color: inherit !important;
}

/* ============================================
   Checkout Form Styling
   ============================================ */

/* Form labels - consistent padding */
.bg-light .form-group label,
.bg-light .col-md-6 label,
.bg-light .col-md-4 label,
.bg-light .col-md-8 label {
    padding-bottom: 2px;
    padding-left: 2px;
}

/* Terms & Conditions checkbox - vertically center aligned */
.bg-light .custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    min-height: auto;
    padding-left: 1.5rem;
}

.bg-light .custom-checkbox .custom-control-label {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.4;
}

.bg-light .custom-checkbox .custom-control-label::before,
.bg-light .custom-checkbox .custom-control-label::after {
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
}

/* ============================================
   Account Overview Page Styling
   ============================================ */

/* Account overview cards - customer data, orders, marketing permissions */
/* No hover effect, content-based height */
.bg-light > .container > .row > .col-12 > .card,
.bg-light > .container > .row > .col-md-6 > .card {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
}

/* Disable hover effect on account cards */
.bg-light > .container > .row > .col-12 > .card:hover,
.bg-light > .container > .row > .col-md-6 > .card:hover {
    box-shadow: none !important;
    transform: none !important;
    background-color: #ffffff !important;
}

/* Account card header - consistent styling */
.bg-light > .container > .row > .col-md-6 > .card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Account card body - proper padding */
.bg-light > .container > .row > .col-md-6 > .card .card-body {
    padding: 1.25rem;
}

/* Item property styling in account cards */
.bg-light .item-property {
    margin-bottom: 0.75rem;
}

.bg-light .item-property dt {
    font-weight: var(--font-medium);
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.bg-light .item-property dd {
    margin-bottom: 0;
    color: var(--text-primary);
}