/* MATMAK design system: shared tokens and the base look for buttons and form fields.
   Loaded by _Layout right after custom.min.css, so page stylesheets can use the tokens.
   Visual only: it restyles the old square patterns (.rounded-0 buttons, light-blue fields)
   without changing markup or behaviour. Add .ds-square to an element to keep it square. */

:root {
    /* Colour */
    --ds-blue: #25a9e0;
    --ds-blue-dark: #1b8ec0;
    --ds-blue-soft: #e8f6fc;
    --ds-ink: #101820;
    --ds-text: #3d4852;
    --ds-muted: #6b7785;
    --ds-line: #e4eaf0;
    --ds-line-strong: #cfd9e2;
    --ds-surface: #f6f9fb;
    --ds-field-bg: #ecf6fb;
    --ds-ok: #1f8a4c;
    --ds-ok-soft: #e8f3ec;
    --ds-warn: #9a6b00;
    --ds-warn-soft: #fff6dc;
    --ds-danger: #c42b2b;
    --ds-danger-soft: #fdf2f2;
    --ds-off: #8a9097;
    /* Shape (same scale as Modular Wrap: 8px controls, 12px cards and panels, pills) */
    --ds-radius-control: 8px;
    --ds-radius-card: 12px;
    --ds-radius-panel: 12px;
    --ds-radius-pill: 999px;
    /* Depth */
    --ds-shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.04), 0 4px 16px rgba(16, 24, 32, 0.06);
    --ds-shadow: 0 2px 4px rgba(16, 24, 32, 0.06), 0 10px 28px rgba(16, 24, 32, 0.1);
    --ds-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --ds-focus-ring: 0 0 0 4px rgba(37, 169, 224, 0.2);
    --ds-focus-ring-strong: 0 0 0 4px rgba(37, 169, 224, 0.35);
    /* Motion */
    --ds-ease: 0.2s ease;
    /* Bootstrap's own palette mapped to the brand, so its utilities (text-primary, text-success,
       text-danger, text-info, text-warning) and plain links use brand shades instead of #0d6efd etc. */
    --bs-primary-rgb: 37, 169, 224;
    --bs-info-rgb: 27, 142, 192;
    --bs-success-rgb: 31, 138, 76;
    --bs-danger-rgb: 196, 43, 43;
    --bs-warning-rgb: 154, 107, 0;
    --bs-link-color: #1b8ec0;
    --bs-link-hover-color: #16729b;
}

/* Bootstrap's default button corners (6px) to the brand control radius */
.btn {
    --bs-btn-border-radius: var(--ds-radius-control);
}

/* Pricing pages (/pricing, /subscription) keep their original look: Bootstrap's own palette and
   6px button corners there */
.main-section:has(#HomePricing) {
    --bs-primary-rgb: 13, 110, 253;
    --bs-info-rgb: 13, 202, 240;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning-rgb: 255, 193, 7;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

    .main-section:has(#HomePricing) .btn {
        --bs-btn-border-radius: 0.375rem;
    }

/* ---------- Bootstrap utilities missing from the trimmed bootstrap.min.css ----------
   The views use these Bootstrap 5 classes, but the trimmed build doesn't include them, so they did
   nothing: bold text wasn't bold, the product results grid stayed one column on tablets, the
   Subscriptions/Invoices stat cards didn't form a grid, status backgrounds were missing.
   Same values as Bootstrap 5.3, except corners and shadows, which use the brand tokens.
   The Pricing pages (/pricing, /subscription) were designed without them and keep their original
   look, so every rule here skips them (:not(:where(.main-section:has(#HomePricing) *))). */
.fw-semibold:not(:where(.main-section:has(#HomePricing) *)) {
    font-weight: 600 !important;
}

.fw-bold:not(:where(.main-section:has(#HomePricing) *)) {
    font-weight: 700 !important;
}

.fs-3:not(:where(.main-section:has(#HomePricing) *)) {
    font-size: calc(1.3rem + 0.6vw) !important;
}

@media (min-width: 1200px) {
    .fs-3:not(:where(.main-section:has(#HomePricing) *)) {
        font-size: 1.75rem !important;
    }
}

.text-start:not(:where(.main-section:has(#HomePricing) *)) {
    text-align: left !important;
}

.text-secondary:not(:where(.main-section:has(#HomePricing) *)) {
    color: var(--ds-muted) !important;
}

.text-decoration-line-through:not(:where(.main-section:has(#HomePricing) *)) {
    text-decoration: line-through !important;
}

.d-inline-block:not(:where(.main-section:has(#HomePricing) *)) {
    display: inline-block !important;
}

.d-inline-flex:not(:where(.main-section:has(#HomePricing) *)) {
    display: inline-flex !important;
}

.d-grid:not(:where(.main-section:has(#HomePricing) *)) {
    display: grid !important;
}

.flex-fill:not(:where(.main-section:has(#HomePricing) *)) {
    flex: 1 1 auto !important;
}

.gap-2:not(:where(.main-section:has(#HomePricing) *)) {
    gap: 0.5rem !important;
}

.ms-1:not(:where(.main-section:has(#HomePricing) *)) {
    margin-left: 0.25rem !important;
}

.ms-3:not(:where(.main-section:has(#HomePricing) *)) {
    margin-left: 1rem !important;
}

.me-1:not(:where(.main-section:has(#HomePricing) *)) {
    margin-right: 0.25rem !important;
}

.py-2:not(:where(.main-section:has(#HomePricing) *)) {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.border-start-0:not(:where(.main-section:has(#HomePricing) *)) {
    border-left: 0 !important;
}

.border-end-0:not(:where(.main-section:has(#HomePricing) *)) {
    border-right: 0 !important;
}

.rounded-2:not(:where(.main-section:has(#HomePricing) *)) {
    border-radius: var(--ds-radius-control) !important;
}

.rounded-circle:not(:where(.main-section:has(#HomePricing) *)) {
    border-radius: 50% !important;
}

.shadow:not(:where(.main-section:has(#HomePricing) *)) {
    box-shadow: var(--ds-shadow) !important;
}

.shadow-lg:not(:where(.main-section:has(#HomePricing) *)) {
    box-shadow: 0 18px 40px rgba(16, 24, 32, 0.14) !important;
}

.visually-hidden:not(:where(.main-section:has(#HomePricing) *)) {
    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;
}

/* colours come from the brand-mapped --bs-*-rgb values in :root; bg-opacity-10 sets --bs-bg-opacity */
.bg-primary:not(:where(.main-section:has(#HomePricing) *)),
.bg-secondary:not(:where(.main-section:has(#HomePricing) *)),
.bg-success:not(:where(.main-section:has(#HomePricing) *)),
.bg-info:not(:where(.main-section:has(#HomePricing) *)),
.bg-warning:not(:where(.main-section:has(#HomePricing) *)),
.bg-danger:not(:where(.main-section:has(#HomePricing) *)) {
    --bs-bg-opacity: 1;
}

.bg-primary:not(:where(.main-section:has(#HomePricing) *)) {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary:not(:where(.main-section:has(#HomePricing) *)) {
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success:not(:where(.main-section:has(#HomePricing) *)) {
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info:not(:where(.main-section:has(#HomePricing) *)) {
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning:not(:where(.main-section:has(#HomePricing) *)) {
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger:not(:where(.main-section:has(#HomePricing) *)) {
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-opacity-10:not(:where(.main-section:has(#HomePricing) *)) {
    --bs-bg-opacity: 0.1;
}

/* Grid: only the column classes missing from the trimmed build (col-sm-4 / 6, col-md-3 / 4 / 7) and
   row-cols. A missing class applies only at the sizes where the element has no larger column class, so
   Bootstrap's own column classes and the site's widths (e.g. ".left-panel { width: 22% }") still win.
   (An earlier version repeated all of Bootstrap's md / lg column rules here, which overrode those widths.) */
.gx-4:not(:where(.main-section:has(#HomePricing) *)) {
    --bs-gutter-x: 1.5rem;
}

.gy-4:not(:where(.main-section:has(#HomePricing) *)) {
    --bs-gutter-y: 1.5rem;
}

.row-cols-1:not(:where(.main-section:has(#HomePricing) *)) > * {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .col-sm-4:not(:where(.main-section:has(#HomePricing) *)) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-6:not(:where(.main-section:has(#HomePricing) *)) {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .col-sm-4:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-md-"])) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-6:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-md-"])) {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-3:not(:where(.main-section:has(#HomePricing) *)) {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4:not(:where(.main-section:has(#HomePricing) *)) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-7:not(:where(.main-section:has(#HomePricing) *)) {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
}

@media (min-width: 768px) {
    .row-cols-md-2:not(:where(.main-section:has(#HomePricing) *)) > * {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .align-items-lg-center:not(:where(.main-section:has(#HomePricing) *)) {
        align-items: center !important;
    }

    .col-sm-4:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-md-"]):not([class*="col-lg-"])) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-6:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-md-"]):not([class*="col-lg-"])) {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-3:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-lg-"])) {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-lg-"])) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-7:not(:where(.main-section:has(#HomePricing) *)):where(:not([class*="col-lg-"])) {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
}

@media (min-width: 1200px) {
    .row-cols-xl-4:not(:where(.main-section:has(#HomePricing) *)) > * {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* Subscriptions: the badges and stat icons use Bootstrap's bg-* / bg-opacity-10 classes, which the
   trimmed bootstrap.min.css doesn't include, so they had no background. Brand soft tints instead. */
.user-subscriptions-page .bg-opacity-10.bg-primary,
.user-subscriptions-page .bg-opacity-10.bg-secondary {
    background-color: var(--ds-blue-soft) !important;
}

.user-subscriptions-page .bg-opacity-10.bg-success {
    background-color: var(--ds-ok-soft) !important;
}

.user-subscriptions-page .bg-opacity-10.bg-warning {
    background-color: var(--ds-warn-soft) !important;
}

.user-subscriptions-page .bg-opacity-10.bg-danger {
    background-color: var(--ds-danger-soft) !important;
}

/* stat icons: "rounded-circle" is missing from the trimmed bootstrap too */
.user-subscriptions-page .rounded-circle.bg-opacity-10 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0 !important;
    border-radius: 50%;
}

    .user-subscriptions-page .rounded-circle.bg-opacity-10.p-2 {
        width: 40px;
        height: 40px;
    }

.user-subscriptions-page .badge.bg-opacity-10 {
    border-radius: var(--ds-radius-pill);
    font-size: 13px;
    font-weight: 600;
}

.text-warning:not(:where(.main-section:has(#HomePricing) *)) {
    color: var(--ds-warn) !important;
}

/* ---------- Buttons ----------
   Old markup: class="btn ... rounded-0 ..." (often with bg-blue / bg-black / bg-dark and the
   black "slide" hover). Joined controls in input / button groups stay square. */
.btn.rounded-0:not(.ds-square):not(.input-group .btn):not(.btn-group .btn) {
    border-radius: var(--ds-radius-control) !important;
    font-weight: 600;
    transition: background-color var(--ds-ease), box-shadow var(--ds-ease), color var(--ds-ease), border-color var(--ds-ease);
}

    .btn.rounded-0:not(.ds-square):focus-visible {
        outline: 0;
        box-shadow: var(--ds-focus-ring-strong);
    }

/* Blue buttons: a darker blue on hover (the "slide" buttons keep their black slide effect) */
.btn.bg-blue:not(.btn-slide-black):hover,
.btn.bg-blue:not(.btn-slide-black):focus-visible {
    background-color: var(--ds-blue-dark) !important;
}

/* Disabled buttons read as disabled */
.btn.rounded-0:disabled,
.btn.rounded-0.disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* ---------- Form fields ----------
   Old markup: light-blue fill (bg-light-blue) and/or rounded-0 on inputs, selects, textareas. */
:is(input, select, textarea):is(.bg-light-blue, .rounded-0):not(.ds-square):not(.input-group *):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    border: 1px solid transparent;
    border-radius: var(--ds-radius-control) !important;
    transition: border-color var(--ds-ease), box-shadow var(--ds-ease), background-color var(--ds-ease);
}

    :is(input, select, textarea):is(.bg-light-blue, .rounded-0):not(.ds-square):not(.input-group *):not([type="checkbox"]):not([type="radio"]):focus {
        border-color: var(--ds-blue) !important;
        outline: 0;
        box-shadow: var(--ds-focus-ring);
    }

/* Read-only grey fields (Settings e-mail) and the Favorites pattern search box */
input.bg-gray:not(.ds-square),
input.pattern-searchbar:not(.ds-square) {
    border-radius: var(--ds-radius-control) !important;
}

/* Phone inputs (intl-tel-input): round the country-flag box to match the field */
.iti .iti__flag-container .iti__selected-flag {
    border-radius: var(--ds-radius-control) 0 0 var(--ds-radius-control);
}

/* ---------- Cards and boxes ---------- */

/* Settings: the profile photo (225px square) gets the card corners */
.profile-img > img:not(.ds-square) {
    border-radius: var(--ds-radius-card);
}

/* Settings: the pencil on the profile photo, a round button */
span.edit-icon:not(.ds-square) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--ds-shadow-sm);
}

/* Settings > Preferences: roll Update / Delete buttons (were square, Bootstrap red) */
.roll-action-btn:not(.ds-square) {
    border-radius: var(--ds-radius-control);
}

.roll-update-button:hover,
.roll-update-button:focus {
    background-color: var(--ds-blue-dark);
}

.roll-delete-button {
    border-color: var(--ds-danger);
    color: var(--ds-danger);
}

    .roll-delete-button:hover,
    .roll-delete-button:focus {
        background-color: var(--ds-danger);
        color: #fff;
    }

/* pictures inside pattern cards (a .jpg with a background showed square corners) */
.product-box img:not(.ds-square) {
    border-radius: var(--ds-radius-control);
}

/* Pattern / product cards (home, products, patterns, search, product detail, favourites) */
.product-box:not(.ds-square) {
    border-color: var(--ds-line) !important;
    border-radius: var(--ds-radius-card);
    background-color: #fff;
    transition: background-color var(--ds-ease), border-color var(--ds-ease), box-shadow var(--ds-ease);
}

    .product-box:not(.ds-square):hover {
        border-color: var(--ds-line-strong) !important;
        box-shadow: var(--ds-shadow-sm);
    }

    /* Black action buttons that appear on hover */
    .product-box .product-btn {
        border-radius: var(--ds-radius-control);
    }

/* Search filter panel */
.product-research-filters:not(.ds-square) {
    border-color: var(--ds-line) !important;
    border-radius: var(--ds-radius-card);
    background-color: #fff;
}

/* Contact page: form box and office panel */
.get-in-touch:not(.ds-square) {
    border-color: var(--ds-line) !important;
    border-radius: var(--ds-radius-panel);
}

.main-section .contact-right-bg.bg-light,
.main-section .bg-light:has(> .contact-right-bg) {
    border-radius: var(--ds-radius-panel);
}

/* Info cards (product detail) and grey content boxes (about) */
.main-section .card.bg-light:not(.ds-square),
.main-section .container.bg-gray:not(.ds-square) {
    /* !important: these often carry Bootstrap's rounded-0 */
    border-radius: var(--ds-radius-panel) !important;
}

/* "Learn more" strip photo (About, Privacy, Terms ...): a card over the dark strip */
img.learn-more-img:not(.ds-square) {
    border-radius: var(--ds-radius-card);
}

/* ---------- Toggles ---------- */

/* Joined toggle groups (Pattern type, Start by, Interior / Exterior, wrapped / unwrapped):
   round the outer corners of the first and last option only */
.btn-group:is(.vehicle-search-segment, .custom-btn-group) > .btn-check:first-child + .btn,
.btn-group:is(.vehicle-search-segment, .custom-btn-group) > .btn:first-child {
    border-top-left-radius: var(--ds-radius-control);
    border-bottom-left-radius: var(--ds-radius-control);
}

.btn-group:is(.vehicle-search-segment, .custom-btn-group) > .btn:last-child {
    border-top-right-radius: var(--ds-radius-control);
    border-bottom-right-radius: var(--ds-radius-control);
}

/* Grid / list view switch (same specificity as the custom.min.css rule it replaces) */
ul#grid-col-tab li.nav-item .nav-link {
    border-radius: 8px;
}

/* ---------- Pagination ----------
   Blog, favourites, pattern boards, saved patterns, product and text search all use
   ul.pagination.pagination-custom: rounded page buttons, the current page in blue. */
ul.pagination.pagination-custom {
    flex-wrap: wrap;
    gap: 6px;
}

    /* A single "1" with nowhere to go is just noise: show the bar only from 2 pages */
    ul.pagination.pagination-custom:has(> li:only-child) {
        display: none;
    }

    ul.pagination.pagination-custom li {
        margin: 0;
    }

        ul.pagination.pagination-custom li a,
        ul.pagination.pagination-custom li > span.page-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            border: 1px solid var(--ds-line-strong);
            border-radius: var(--ds-radius-control) !important;
            background-color: #fff;
            color: var(--ds-ink);
            font-size: 15px;
            font-weight: 600;
            line-height: 1;
            transition: background-color var(--ds-ease), border-color var(--ds-ease), color var(--ds-ease);
        }

            ul.pagination.pagination-custom li a:hover {
                border-color: var(--ds-blue);
                background-color: var(--ds-blue-soft);
                color: var(--ds-blue-dark);
            }

            ul.pagination.pagination-custom li a:focus,
            ul.pagination.pagination-custom li a:focus-visible {
                outline: 0;
                box-shadow: var(--ds-focus-ring-strong);
            }

            ul.pagination.pagination-custom li a.active {
                border-color: var(--ds-blue);
                background-color: var(--ds-blue);
                color: #fff;
            }

        /* Previous / next arrows: same buttons, blue icon */
        ul.pagination.pagination-custom li.page-item.leftcust a {
            padding: 0 12px !important;
            border-color: var(--ds-line-strong) !important;
            background-color: #fff;
            color: var(--ds-blue-dark) !important;
        }

            ul.pagination.pagination-custom li.page-item.leftcust a:hover {
                border-color: var(--ds-blue) !important;
                background-color: var(--ds-blue-soft);
            }

/* ---------- Phone layout fixes ---------- */

/* Long email addresses (contact page, footer cards) can break instead of widening the page */
.main-section a[href^="mailto:"] {
    overflow-wrap: anywhere;
}

@media (max-width: 374.98px) {
    /* Small phones (320-374px): the Pattern type toggle didn't fit */
    .vehicle-search-segment .btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 767.98px) {
    /* Header login / register links are hidden on phones (d-none d-md-block), but the empty
       list kept its right margin and pushed the page sideways on narrow screens */
    ul.loginNavCustom {
        margin-right: 0 !important;
    }
}

@media (max-width: 700px) {
    /* Logged-in phones: an old rule pushed the account menu right with margin-left: 60%, which made
       the header wrap (below ~400px) or stick the "Menu" button out past the screen (414-700px).
       The navbar already places this group on the right; just keep the two buttons together. */
    ul.loginNavCustom.mr-2 {
        margin-left: 0 !important;
        padding-left: 0;
    }

    .mat-header .d-flex.align-items-baseline:has(> ul.loginNavCustom) {
        align-items: center !important;
        gap: 8px;
    }

    /* desktop spacing (margin-left: 30px) that pushed the "Menu" button off narrow screens */
    ul.loginNavCustom .profile-nav-custom {
        margin-left: 0;
    }
}

@media (max-width: 400px) {
    /* the site-wide ".container-fluid { padding: 15px }" made the header 30px taller here */
    .mat-header > .container-fluid {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    /* Logged-in phones: logo + menu button + "Menu" account button didn't fit on one line
       (367px for ~345px), so the header wrapped to two rows. A slightly smaller logo fixes it. */
    .mat-header:has(.profile-nav-custom) .navbar-brand {
        margin-right: 8px;
    }

        .mat-header:has(.profile-nav-custom) .navbar-brand svg {
            width: 130px;
            height: auto;
        }
}

@media (max-width: 359.98px) {
    .mat-header:has(.profile-nav-custom) .navbar-brand svg {
        width: 112px;
    }
}

@media (max-width: 575.98px) {
    /* "13,000+ Patterns" style blurbs (about, privacy, terms): number and label were one
       426px row inside a ~250px column */
    .blurb-title {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 8px;
        margin-left: 0;
    }

        .blurb-title p {
            font-size: 24px;
            line-height: 1.3;
        }
}

/* ---------- Phone polish: spacing, page titles, tap targets, small text ---------- */
@media (max-width: 575.98px) {
    /* Grey page banner: long titles ("Precut Patterns for Cars: PPF, Tint & Wraps") took 3 lines at 35px */
    .product-detail-banner .banner-header h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .product-detail-banner .product-banner-content {
        margin-left: 16px;
        padding: 16px 0;
    }

    /* First section under the banner: 48px of top padding was too much on a phone */
    .main-section:not(:has(#HomePricing)) > .container-fluid.pt-5 {
        padding-top: 28px !important;
    }

    /* Tap targets at least 40px */
    .owl-nav button.owl-prev,
    .owl-nav button.owl-next {
        min-width: 40px;
        min-height: 40px;
    }

    .vehicle-text-search-button {
        min-width: 40px;
        min-height: 40px;
    }

    #v-pills-tabContent .btn,
    .user-subscriptions-page .btn {
        min-height: 40px;
    }

    #v-pills-tabContent a.text-danger,
    .featured-blog-content .fix-arrow a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Smallest text 13px */
    .bot-status .status-label {
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    /* An old rule gives every .container / .container-fluid "padding: 15px" here. Nested containers
       stacked that top and bottom padding into 140-180px gaps; keep the side padding only. */
    .main-section:not(:has(#HomePricing)) .container:not([class*="pt-"]):not([class*="py-"]):not([class*="p-"]):not(.bg-gray),
    .main-section:not(:has(#HomePricing)) .container-fluid:not([class*="pt-"]):not([class*="py-"]):not([class*="p-"]):not(.bg-gray) {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ---------- Page banner + breadcrumb (grey title strip at the top of most pages) ---------- */
/* Same look as the Modular Wrap page head: compact strip, upright 14px trail, blue chevrons */
.product-detail-banner {
    min-height: 0;
    padding: 28px 0;
    border-bottom: 1px solid var(--ds-line);
    background-color: var(--ds-surface);
}

    .product-detail-banner .banner-header h1 {
        margin: 0 0 6px;
        color: var(--ds-ink);
        font-size: clamp(26px, 2.4vw, 32px);
        line-height: 1.2;
    }

    .product-detail-banner .breadcrumb {
        flex-wrap: wrap;
        row-gap: 2px;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .product-detail-banner li.breadcrumb-item,
    .product-detail-banner li.breadcrumb-item a,
    .product-detail-banner li.breadcrumb-item.active {
        color: var(--ds-muted) !important;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        opacity: 1;
    }

    .product-detail-banner li.breadcrumb-item a {
        text-decoration: none;
        transition: color var(--ds-ease);
    }

        .product-detail-banner li.breadcrumb-item a:hover,
        .product-detail-banner li.breadcrumb-item a:focus-visible {
            color: var(--ds-blue-dark) !important;
            text-decoration: underline;
        }

    /* the current page */
    .product-detail-banner li.breadcrumb-item:last-child a {
        color: var(--ds-ink) !important;
        font-weight: 500;
    }

    .product-detail-banner .breadcrumb-item + .breadcrumb-item {
        padding-left: 6px;
    }

        .product-detail-banner .breadcrumb-item + .breadcrumb-item::before {
            content: "\203A";
            padding-right: 6px;
            color: var(--ds-blue) !important;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.3;
            opacity: 1;
        }

@media (max-width: 575.98px) {
    .product-detail-banner {
        padding: 18px 0;
    }

        .product-detail-banner .banner-header h1 {
            font-size: 24px;
        }

        .product-detail-banner .product-banner-content {
            padding: 0;
        }

        .product-detail-banner li.breadcrumb-item,
        .product-detail-banner li.breadcrumb-item a {
            font-size: 13px;
        }
}

/* Product detail: the roll type select's w-50 cut its label to "Select roll t..." on laptops and phones;
   keep half the column as the minimum but let it grow to fit the label */
.product-title #userRollType {
    width: auto !important;
    min-width: 50%;
    max-width: 100%;
}

/* Product detail on phones: the 50px product name took one word per line */
@media (max-width: 767.98px) {
    .product-title h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    /* roll type select: full width, 16px so iOS doesn't zoom in on tap */
    .product-title #userRollType {
        width: 100% !important;
        font-size: 16px;
    }
}

/* ---------- Account menu (header "Menu" button dropdown) ----------
   Was a flat blue panel with square corners, 800-weight shadowed buttons and a black Logout.
   Now a white brand card like the modals: ink text with blue icons, one primary blue
   action (Download), outline buttons for the guides, Logout in brand red. Same items and links. */
.profile-nav-custom ul.dropdown-menu {
    min-width: 264px;
    padding: 8px !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius-card) !important;
    background: #fff !important;
    box-shadow: var(--ds-shadow);
}

    .profile-nav-custom ul.dropdown-menu > li {
        width: 100% !important;
        padding: 6px 0;
        border-bottom: 1px solid var(--ds-line);
    }

        .profile-nav-custom ul.dropdown-menu > li:last-child {
            border-bottom: 0 !important;
        }

        /* plain links: My Boards, Favorites, Subscriptions, Invoices, Settings, Dashboard */
        .profile-nav-custom ul.dropdown-menu > li > a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: var(--ds-radius-control);
            color: var(--ds-ink);
            font-size: 15px;
            font-weight: 500;
            line-height: 1.4;
            text-decoration: none;
            transition: background-color var(--ds-ease), color var(--ds-ease);
        }

            .profile-nav-custom ul.dropdown-menu > li > a > i {
                width: 18px;
                margin: 0 !important;
                color: var(--ds-blue);
                font-size: 16px;
                text-align: center;
            }

            .profile-nav-custom ul.dropdown-menu > li > a:hover,
            .profile-nav-custom ul.dropdown-menu > li > a:focus-visible {
                background: var(--ds-blue-soft);
                color: var(--ds-blue-dark) !important;
            }

        /* plan line at the top ("Access: Unlimited" / the subscription call to action) */
        .profile-nav-custom ul.dropdown-menu > li.unlimited {
            padding: 8px 10px 12px;
            color: var(--ds-ink);
            font-weight: 500;
        }

            .profile-nav-custom ul.dropdown-menu > li.unlimited > span,
            .profile-nav-custom ul.dropdown-menu .subscription-cta-badge {
                /* a phone rule that hides the header greeting ("ul.loginNavCustom .profile-nav-custom span")
                   also hid this plan badge, leaving an empty bar at the top of the menu */
                display: inline-flex;
                align-items: center;
                padding: 3px 12px;
                border-radius: var(--ds-radius-pill) !important;
                background: var(--ds-blue) !important;
                color: #fff !important;
                font-size: 13px !important;
                font-weight: 600;
                line-height: 1.5;
            }

        .profile-nav-custom ul.dropdown-menu > li.subscription-cta {
            padding: 4px 0 10px;
        }

            .profile-nav-custom ul.dropdown-menu > li.subscription-cta > a {
                padding: 10px 12px !important;
                background: var(--ds-blue-soft);
                color: var(--ds-ink) !important;
            }

                .profile-nav-custom ul.dropdown-menu > li.subscription-cta > a:hover {
                    background: #d9f0fa;
                }

        /* Download / User Guide / Plotter list: one primary button, two outline buttons */
        .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav {
            padding: 4px 0;
            border-bottom: 0;
        }

            .profile-nav-custom ul.dropdown-menu > li:not(.cuttingtool-nav) + li.cuttingtool-nav {
                padding-top: 10px;
            }

            .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav > a.download-btn {
                justify-content: center !important;
                gap: 8px;
                min-height: 42px;
                padding: 8px 14px;
                border: 1px solid var(--ds-blue);
                border-radius: var(--ds-radius-control);
                background: #fff;
                box-shadow: none;
                color: var(--ds-blue-dark);
                font-size: 14px;
                font-weight: 600;
                transform: none;
            }

                .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav > a.download-btn > i {
                    width: auto;
                    color: inherit;
                }

                .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav > a.download-btn:hover {
                    background: var(--ds-blue-soft);
                    color: var(--ds-blue-dark) !important;
                    transform: none;
                }

            .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav > a.download-btn:has(#downloadToolIcon) {
                background: var(--ds-blue);
                color: #fff;
            }

                .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav > a.download-btn:has(#downloadToolIcon):hover {
                    border-color: var(--ds-blue-dark);
                    background: var(--ds-blue-dark);
                    color: #fff !important;
                }

        /* the last guide button is followed by Logout: give it the divider */
        .profile-nav-custom ul.dropdown-menu > li.cuttingtool-nav:has(+ li.logout-nav) {
            padding-bottom: 10px;
            border-bottom: 1px solid var(--ds-line);
        }

        .profile-nav-custom ul.dropdown-menu > li.logout-nav {
            padding-top: 6px;
        }

            .profile-nav-custom ul.dropdown-menu > li.logout-nav > a {
                color: var(--ds-danger) !important;
                font-weight: 600;
            }

                .profile-nav-custom ul.dropdown-menu > li.logout-nav > a:hover {
                    background: var(--ds-danger-soft);
                    color: var(--ds-danger) !important;
                }

@media (prefers-reduced-motion: reduce) {
    .profile-nav-custom #downloadToolIcon {
        animation: none;
    }
}

/* ---------- Floating buttons (WhatsApp + the OpenWidget help button under it) ----------
   WhatsApp keeps its own green. It is now the same 60px circle as the help button, centred on the
   same line (42px from the right edge), 16px above it, with the brand shadow and a calm hover.
   The help button itself is drawn by OpenWidget inside its own frame: its colour is set in the
   OpenWidget dashboard, not here. */
.whatsapp-float {
    right: 12px;
    bottom: 88px;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0 !important;
    border-radius: 50%;
    box-shadow: var(--ds-shadow);
    transition: transform var(--ds-ease), box-shadow var(--ds-ease);
}

    .whatsapp-float:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(16, 24, 32, 0.18);
    }

    .whatsapp-float:focus-visible {
        outline: 0;
        box-shadow: var(--ds-shadow), 0 0 0 4px rgba(37, 211, 102, 0.35);
    }

/* "Chat with us!" label shown on hover: brand pill, centred on the button */
.whatsapp-text {
    right: 82px;
    bottom: 103px;
    padding: 6px 14px;
    border-radius: var(--ds-radius-pill);
    box-shadow: var(--ds-shadow-sm);
    font-weight: 500;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float,
    .whatsapp-float:hover {
        transform: none;
        transition: none;
    }
}

/* ---------- Search results sidebar (Product search, Pattern search, Tack diagram) ----------
   22% of the container was 210-290px: the filter dropdowns cut their text ("Select a n...").
   At least 300px (24% on large screens) when the panels sit side by side (above 1024px; custom.min.css stacks them up to
   1024px); the results take the rest. */
@media (min-width: 1024.02px) {
    .research-result-left-panel > .left-panel {
        flex: 0 0 auto;
        width: max(24%, 300px);
    }

    .research-result-left-panel > .right-panel {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* long placeholders in fr / es / de ("Sélectionnez un sous-modèle"): a size smaller, and "..." if still too long */
    .research-result-left-panel > .left-panel .product-research-filters select {
        font-size: 14px;
        text-overflow: ellipsis;
    }
}

/* ---------- Page loader (#mmLoader, shown while an ajax call runs) ---------- */
/* Frosted white overlay with a brand-blue ring; fades in after 150ms so quick calls don't flash */
div#mmLoader {
    background-color: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 1;
    animation: mmLoaderIn 0.2s ease 0.15s both;
}

    div#mmLoader .lds-spinner {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: #fff;
        box-shadow: var(--ds-shadow);
    }

        /* the 12 bars of the old spinner are replaced by one ring */
        div#mmLoader .lds-spinner > div {
            display: none;
        }

        div#mmLoader .lds-spinner::before {
            content: "";
            position: absolute;
            inset: 20px;
            border: 4px solid var(--ds-blue-soft);
            border-top-color: var(--ds-blue);
            border-right-color: var(--ds-blue);
            border-radius: 50%;
            animation: mmLoaderSpin 0.8s linear infinite;
        }

@keyframes mmLoaderIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Home hero on phones/tablets: the image is 43vh tall but the slide 68vh, so the
   "Find your vehicle kit" button sat on a white band under it. The slide now continues
   in the image's own dark grey and is only as tall as the image plus the button. */
@media (max-width: 768px) {
    .main-carousel-content .carousel-item {
        height: max(calc(43vh + 120px), 440px);
        background-color: #222221;
    }
}

/* ---------- Phone spacing: one 15px page gutter ----------
   Each nested Bootstrap container added its own 15px, so text sat 30-45px from the screen edge
   (96px on Subscriptions) while the header and banner use 15-16px. Nested plain containers drop
   their side padding; coloured panels (.bg-gray) and containers with their own p-* / px-* keep it. */
@media (max-width: 575.98px) {
    .main-section:not(:has(#HomePricing)) :is(.container, .container-fluid) :is(.container, .container-fluid):not(.bg-gray):not([class*="p-"]):not([class*="px-"]) {
        padding-left: 0;
        padding-right: 0;
    }

    /* Subscriptions: an inner .px-4 (24px) on top of the page gutter */
    .user-subscriptions-page .container-fluid.px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* "Learn more about MATMAK" dark strip above the footer: 50px on every side */
    .learn-more-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Support page shell: 20px to the same 15px gutter */
    .sp-page .sp-shell.sp-shell {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Bullet lists inside the grey text panels (About, Privacy, Terms): 32px indent to 20px */
    .main-section:not(:has(#HomePricing)) .bg-gray ul {
        padding-left: 20px;
    }

    /* Section headings ("Precision Precut, MATMAK Style" ...): 40px with 48px under it */
    .main-section:not(:has(#HomePricing)) .section-header > h2 {
        margin-bottom: 20px !important;
        font-size: 28px;
        line-height: 1.25;
    }

    /* "Learn more about our success" strip above the footer: 45px title, 70px numbers */
    .learn-more-section h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .learn-more-section .blurb-title h3 {
        font-size: 48px;
    }

    /* Inner panels: 48px (p-5) of padding left a narrow column of text */
    .main-section:not(:has(#HomePricing)) .p-5:not(.btn) {
        padding: 24px 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn.rounded-0,
    :is(input, select, textarea):is(.bg-light-blue, .rounded-0),
    .product-box {
        transition: none;
    }

    div#mmLoader {
        animation: none;
    }

        div#mmLoader .lds-spinner::before {
            animation-duration: 1.6s;
        }
}