/* ==========================================================================
   custom.css — site overrides for Spare Parts (Stroyka theme)
   Consolidated from inline <style> in header.php / index.php.
   Colors kept as-is; box + layout refreshed toward a minimal look.
   ========================================================================== */

/* --- Design tokens --------------------------------------------------------- */
:root {
    --brand:        #05c3dd;   /* cyan  */
    --brand-dark:   #04a9c0;
    --accent:       #f57eb6;   /* pink  */
    --ink:          #2b2b2b;
    --ink-soft:     #5a6b72;   /* secondary text */
    --line:         #ececec;   /* hairline borders */
    --surface:      #ffffff;
    --surface-2:    #f9f9f9;
    --radius:       10px;
    --shadow-sm:    0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md:    0 4px 16px rgba(16, 24, 40, .08);
}

/* --- Base ------------------------------------------------------------------ */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: small;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
}

.site__body {
    background-color: var(--surface-2);
}

.cf-turnstile {
    --turnstile-theme-background: #ffffff;
    --turnstile-theme-text: #000000;
    --turnstile-theme-border: #d9d9d9;
}

/* --- Container widths ------------------------------------------------------- */
@media (min-width: 1551px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl { max-width: 80%; }
}

@media (max-width: 1550px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl { max-width: 90%; }
}

@media (max-width: 767px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl { max-width: 100%; }
}

/* --- Header ---------------------------------------------------------------- */
.site-header {
    position: relative;
    z-index: 100;
    background: var(--brand);
    color: #fff;
}

.site-header__phone-number {
    font-size: 14px;
    font-weight: 300;
    color: #ffffff;
    padding: 2px;
}

.search--location--header .search__categories {
    max-width: 45%;
}

.logo__image {
    height: 80px;
    width: auto;
}

@media screen and (max-width: 768px) {
    .logo__image { height: 40px; }

    .indicator__button {
        color: #ffffff;
        fill: currentColor;
    }
}

/* Nav panel — flatten to a clean bar with a hairline divider */
.nav-panel {
    background: #dbdbdb;
    color: #000000;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}

.nav-links__item-link,
.indicator__button,
.topbar__item-value {
    color: var(--ink);
}

.topbar-dropdown--opened .topbar-dropdown__btn .topbar__item-value,
.topbar-dropdown__btn:hover .topbar__item-value,
.topbar-dropdown__btn:focus .topbar__item-value {
    color: #000000;
}

.mobile-header__panel {
    background: var(--brand);
}

.departments__body {
    box-shadow: none;
    background-color: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* department links — hover accent */
.departments__item-link {
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}

.departments__item:hover > .departments__item-link,
.departments__item--hover > .departments__item-link {
    background: var(--surface-2);
    color: var(--brand);
}

/* megamenu submenu — match the rounded card look */
.departments__submenu,
.megamenu {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.megamenu {
    padding: 8px;
}

.megamenu__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu__links--level--0 > .megamenu__item > a {
    font-weight: 600;
    color: var(--ink);
    padding: 6px 10px;
    display: block;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}

.megamenu__links--level--1 {
    columns: 1;
}

.megamenu__links--level--1 > .megamenu__item > a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: #333;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.megamenu__links--level--1 > .megamenu__item > a:hover {
    background: var(--brand);
    color: #fff;
}

.menu--layout--topbar {
    width: 70px;
    min-width: 70px;
}

.h5,
h5 { font-size: 1rem !important; }

/* --- Buttons --------------------------------------------------------------- */
.btn-primary {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* --- Quantity stepper ------------------------------------------------------ */
.qty-container {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    align-items: center;
    background-color: #fff;
}

.qty-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 20px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.qty-btn:hover { background-color: #f0f0f0; }

.qty-btn:focus {
    outline: none;
    box-shadow: none;
}

.qty-display {
    width: 50px;
    text-align: center;
    border: none;
    background-color: transparent;
    font-size: 12px;
    pointer-events: none;
}

/* --- Product card ---------------------------------------------------------- */
.product-card::before {
    box-shadow: 0 0 0 1px var(--line) inset;
}

.product-card:hover::before {
    box-shadow: 0 0 0 1px var(--brand) inset;
}

.products-list[data-layout=list] .product-card .product-card__image {
    flex-shrink: 0;
    padding: 24px;
    width: 20%;
}


/* --- Block header ---------------------------------------------------------- */
.block-header__title + .block-header__divider {
    margin-left: 16px;
    margin-top: 16px;
}

.block-header__divider {
    flex-grow: 1;
    height: 1px;
    background: var(--line);
}

/* --- Category grid --------------------------------------------------------- */
.block-categories__list {
    display: grid;
    gap: 20px;
    margin: 0 auto;
}

/* index (classic layout) — 3 columns */
.block-categories--layout--classic .block-categories__list {
    grid-template-columns: repeat(3, 1fr);
}

/* machine (compact layout) — 4 columns, smaller cards */
.block-categories--layout--compact .block-categories__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .block-categories--layout--compact .block-categories__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .block-categories--layout--classic .block-categories__list,
    .block-categories--layout--compact .block-categories__list { grid-template-columns: repeat(2, 1fr); }
}

/* Stay at two columns on a phone — one full-width card per row wastes the
   screen and pushes everything below the fold. Card internals tighten further
   down, after the base card rules. */
@media (max-width: 575px) {
    .block-categories--layout--classic .block-categories__list,
    .block-categories--layout--compact .block-categories__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* The theme still sizes these cards for its own flex layout and scopes those
   rules by layout class, which outweighs the plain .category-card__* rules
   above: 400-479px pins the image box to 40% (leaving a tiny logo in a big
   empty card) and 480-991px repads the body. Match that weight to undo them. */
@media (max-width: 991px) {
    .category-card--layout--classic .category-card__image,
    .category-card--layout--compact .category-card__image {
        width: 100%;
        margin: 0;
    }

    .category-card--layout--classic .category-card__body,
    .category-card--layout--compact .category-card__body {
        flex-direction: column;
        padding: 16px;
    }
}

/* neutralize theme's flex-basis sizing so grid controls the columns */
.block-categories__item.category-card {
    width: auto;
    max-width: none;
    margin: 0;
}

/* --- Category cards (index) — minimal box refresh -------------------------- */

.category-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.category-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.category-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.category-card__image {
    width: 100%;
    background: #fff;
    border-radius: 8px;
}

.category-card__image img {
    transition: transform .3s ease-in-out;
    width: 100%;
    height: 240px;
    object-fit: contain;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    padding: 12px;
    display: block;
}

.category-card:hover .category-card__image img {
    transform: scale(1.03);
}

.category-card__name a {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
}

.category-card__name a:hover {
    color: var(--brand);
}

.category-card__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.category-card__links li a {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8rem;
    color: #555;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    transition: all .15s ease;
}

.category-card__links li a:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.category-card__all {
    margin-top: auto;
}

.category-card__all a {
    color: var(--brand);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
}

.category-card__all a:hover {
    text-decoration: underline;
}

.category-card__products {
    font-size: 0.75rem;
    color: #999;
}

/* --- Compact card (machine.php) — smaller box ------------------------------ */
/* card background matches the product image background (white) */
.category-card--layout--compact {
    background: #fff;
}

.category-card--layout--compact .category-card__body {
    padding: 10px;
    gap: 6px;
    text-align: center;
}

.category-card--layout--compact .teammate__avatar {
    width: 100%;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
}

.category-card--layout--compact .teammate__avatar img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 4px;
}

.category-card--layout--compact .teammate__name {
    text-align: center;
    margin-top: 6px;
}

.category-card--layout--compact .teammate__name a {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.category-card--layout--compact:hover .teammate__name a {
    color: var(--brand);
}

.category-card--layout--compact .teammate__position {
    text-align: center;
    font-size: 0.9rem;
}

/* --- Search category select2 — match the department menu look -------------- */
.search--location--header .select2-container {
    height: 100%;
    align-self: stretch;
    min-width: 190px;
    width: 190px !important;
}

/* dropdown wide enough that category names never wrap */
.select2-container--open .select2-dropdown {
    min-width: 220px;
}

.select2-container--default .select2-results__option {
    white-space: nowrap;
}

.search--location--header .select2-container .select2-selection--single {
    height: 100%;
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 0 14px;
    box-shadow: none;
}

.search--location--header .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    font-size: 1.05rem;
    line-height: normal;
    padding: 0;
}

.search--location--header .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 8px;
}

/* dropdown panel — clean rounded card like the departments menu */
.select2-dropdown {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding: 6px;
}

/* tall enough to show every category without scrolling */
.select2-container--default .select2-results > .select2-results__options {
    max-height: 420px;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1.05rem;
    color: var(--ink);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--surface-2);
    color: var(--ink);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 8px;
}

/* --- Dropcart (mini cart) — minimal refresh -------------------------------- */
.dropcart--style--dropdown {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.dropcart__products-list a > h6 {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    padding-top: 12px;
    margin-bottom: 6px;
}

.dropcart__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.dropcart__product .product-image {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.dropcart__product .product-image__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.dropcart__product-info { flex: 1; }

.dropcart__product-info .get_cart_summary a {
    color: var(--ink);
    font-size: 0.95rem;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}

.dropcart__product-info .get_cart_summary a:hover {
    color: var(--brand);
}

.dropcart__product-remove.btn {
    flex-shrink: 0;
    color: #aaa;
    background: transparent;
    border: none;
}

.dropcart__product-remove.btn:hover {
    color: var(--accent);
    background: var(--surface-2);
}

.dropcart__buttons {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.dropcart__buttons .btn {
    flex: 1;
    border-radius: 6px;
}

/* --- Owl carousel controls ------------------------------------------------- */
.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 10px;
}

.owl-carousel .owl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    transition: background 0.3s;
    background-color: #d9d9d9;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background-color: #d9d9d9;
}

.owl-carousel .owl-dot.active {
    background: var(--brand);
    outline: none;
}

.owl-carousel .owl-dot:active {
    outline: 2px solid var(--brand);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 18px;
    pointer-events: all;
}

.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer { margin-top: 0; }

.site-footer__social i { font-size: 20px; }

#footer-mobile { display: none; }
#footer-web    { display: block; }

/* --- Responsive tweaks ----------------------------------------------------- */
@media (max-width: 768px) {
    .add-to-cart-text .full-text  { display: none; }
    .add-to-cart-text .short-text { display: inline; }
}

@media (min-width: 769px) {
    .add-to-cart-text .full-text  { display: inline; }
    .add-to-cart-text .short-text { display: none; }
}

@media (max-width: 767px) {
    .products-list[data-layout=list] .product-card .product-card__image {
        flex-shrink: 0;
        padding: 24px;
        width: 50%;
    }

    .breadcrumb { font-size: 0.6rem; }

    .page-header__title h1 {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .card-title {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .category-card__image img { height: 200px; }

    #footer-mobile { display: block; }
    #footer-web    { display: none; }
}

/* --- Project additions (spartpart_on_Web) ---------------------------------- */
/* Outline variant of the brand button — used by the quotation pages. */
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary {
    box-shadow: 0 0 0 .25rem rgba(5, 195, 221, .5);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--brand);
    border-color: var(--brand);
    background-color: transparent;
}

/* Quotation / Manual dropdowns need room for the longest item. */
.nav-links__submenu.nav-links__submenu--type--menu,
.nav-links__submenu.nav-links__submenu--type--menu .menu,
.nav-links__submenu.nav-links__submenu--type--menu .menu__list {
    min-width: 300px !important;
    width: 300px !important;
}

.nav-links__submenu.nav-links__submenu--type--menu .menu__item {
    width: 100% !important;
}

/* This project links the whole compact card, so the model name is a plain
   div rather than an <a> — style both so the card reads the same either way. */
.category-card--layout--compact .teammate__name,
.category-card--layout--compact .teammate__name a {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.category-card--layout--compact:hover .teammate__name,
.category-card--layout--compact:hover .teammate__name a {
    color: var(--brand);
}

/* This project links the whole compact card, so an <a> sits between the card
   (a flex container) and its body. Let it stretch instead of shrink-to-fit,
   otherwise the image and name only fill part of the box. */
.category-card > a {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.category-card > a > .category-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- RFQ form error (flashed back from save_quotation.php) ----------------- */
.rfq-error {
    background: #fdecec;
    border: 1px solid #f3bdbd;
    border-left: 3px solid #d93636;
    border-radius: var(--radius);
    color: #8d2020;
    font-size: .9rem;
    line-height: 1.55;
    padding: 12px 16px;
    margin-bottom: 18px;
}

/* --- Mobile menu — brand header, grouped sections, tinted submenus --------- */
.mobilemenu__body {
    width: 300px;
    box-shadow: var(--shadow-md);
}

.mobilemenu__header {
    background: var(--brand);
    border-bottom: 0;
    height: 58px;
}

.mobilemenu__title {
    color: #fff;
    font-size: 1rem;
    letter-spacing: .3px;
}

.mobilemenu__close {
    color: #fff;
    fill: currentColor;
    height: 58px;
    transition: background .15s ease;
}

.mobilemenu__close:hover,
.mobilemenu__close:focus {
    background: rgba(0, 0, 0, .1);
    color: #fff;
}

/* who is signed in — sits directly under the brand bar */
.mobilemenu__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #e9fafd;
    border-bottom: 1px solid var(--line);
}

.mobilemenu__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobilemenu__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobilemenu__who-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #4a8c99;
}

.mobilemenu__who-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Level 0 rows ---- */
.mobilemenu .mobile-links--level--0 > .mobile-links__item {
    border-bottom: 1px solid var(--line);
}

.mobilemenu .mobile-links--level--0 > .mobile-links__item > .mobile-links__item-title .mobile-links__item-link {
    padding: 15px 20px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    transition: color .15s ease;
}

.mobilemenu .mobile-links__item-title {
    transition: background .15s ease;
}

.mobilemenu .mobile-links__item-title:hover {
    background: var(--surface-2);
}

.mobilemenu .mobile-links__item-link:hover {
    color: var(--brand);
}

/* the row that is open reads as the current branch */
.mobilemenu .mobile-links--level--0 > .mobile-links__item--open > .mobile-links__item-title {
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--brand);
}

.mobilemenu .mobile-links--level--0 > .mobile-links__item--open > .mobile-links__item-title .mobile-links__item-link {
    color: var(--brand);
}

.mobilemenu .mobile-links__item-toggle {
    color: var(--ink-soft, #5a6b72);
    fill: currentColor;
    transition: color .15s ease;
}

.mobilemenu .mobile-links__item--open > .mobile-links__item-title .mobile-links__item-toggle {
    color: var(--brand);
}

/* ---- Level 1 (categories, quotation, manual) ---- */
.mobilemenu .mobile-links--level--1 {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.mobilemenu .mobile-links--level--1 > .mobile-links__item + .mobile-links__item {
    border-top: 1px solid var(--line);
}

.mobilemenu .mobile-links--level--1 .mobile-links__item-link {
    padding: 12px 20px 12px 28px;
    font-size: .86rem;
    color: #40505a;
}

/* ---- Level 2 (machine models) ---- */
.mobilemenu .mobile-links--level--1 .mobile-links {
    background: #fff;
    padding-left: 0;
}

.mobilemenu .mobile-links--level--1 .mobile-links > li {
    background: #fff;
    border-left: 3px solid var(--line);
}

.mobilemenu .mobile-links--level--1 .mobile-links > li:hover {
    border-left-color: var(--brand);
}

.mobilemenu .mobile-links--level--1 .mobile-links .mobile-links__item-link {
    padding-left: 36px;
    font-size: .82rem;
}

/* ---- Account section ---- */
.mobilemenu__section {
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding: 14px 0 8px;
}

.mobilemenu__section-title {
    padding: 0 20px 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #93a1a8;
}

.mobilemenu__account {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobilemenu__account a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: .88rem;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.mobilemenu__account a i {
    width: 16px;
    text-align: center;
    color: #93a1a8;
    transition: color .15s ease;
}

.mobilemenu__account a:hover {
    background: var(--surface-2);
    color: var(--brand);
}

.mobilemenu__account a:hover i {
    color: var(--brand);
}

.mobilemenu__account .mobilemenu__logout,
.mobilemenu__account .mobilemenu__logout i {
    color: #c23b3b;
}

.mobilemenu__account .mobilemenu__logout:hover {
    background: #fdecec;
    color: #a52a2a;
}

.mobilemenu__account .mobilemenu__logout:hover i {
    color: #a52a2a;
}

/* Bootstrap's .table-responsive only scrolls; these tables also need a floor
   width or the columns collapse into unreadable slivers on a phone. */
@media (max-width: 767px) {
    .table-responsive > .table {
        min-width: 520px;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Category cards on a phone (two across, so tighten the internals) ------ */
@media (max-width: 575px) {
    .category-card--layout--classic .category-card__body {
        padding: 10px;
        gap: 8px;
    }

    .category-card--layout--compact .category-card__body {
        padding: 8px;
        gap: 6px;
    }

    .category-card__image img {
        height: 130px;
        padding: 6px;
    }

    .category-card__name a {
        font-size: .92rem;
    }

    .category-card__links {
        gap: 4px;
    }

    .category-card__links li a {
        padding: 2px 8px;
        font-size: .72rem;
    }

    .category-card__all a {
        font-size: .78rem;
    }

    .category-card--layout--compact .teammate__avatar {
        height: 130px;
    }

    .category-card--layout--compact .teammate__name,
    .category-card--layout--compact .teammate__name a {
        font-size: .92rem;
    }

    .category-card--layout--compact .teammate__position {
        font-size: .75rem;
    }
}

/* --- Cart bottom sheet (mobile) --------------------------------------------
   The desktop dropcart hangs off the header, which phones never render. This
   is its phone counterpart: one instance, injected on open, dropped on close. */
.cartsheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.cartsheet[hidden] {
    display: none;
}

.cartsheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    transition: opacity .22s ease;
}

.cartsheet--open .cartsheet__backdrop {
    opacity: 1;
}

.cartsheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(16, 24, 40, .18);
    transform: translateY(100%);
    transition: transform .25s ease;
}

.cartsheet--open .cartsheet__panel {
    transform: translateY(0);
}

.cartsheet__grip {
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #dcdcdc;
    flex: 0 0 auto;
}

.cartsheet__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.cartsheet__title {
    flex: 1 1 auto;
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink);
}

.cartsheet__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.cartsheet__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-soft);
    fill: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cartsheet__close:hover {
    background: #ececec;
}

.cartsheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
}

.cartsheet__empty {
    margin: 24px 0;
    text-align: center;
    color: var(--ink-soft);
    font-size: .88rem;
}

.cartsheet__footer {
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
}

.cartsheet__footer .btn {
    width: 100%;
    border-radius: 8px;
    font-weight: 600;
}

/* rows reuse the dropcart markup from get_cart_summary.php */
.cartsheet__list .dropcart__product {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.cartsheet__list .dropcart__product:last-child {
    border-bottom: 0;
}

.cartsheet__list .dropcart__product-image {
    flex: 0 0 auto;
    width: 48px;
}

.cartsheet__list .dropcart__product-image img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.cartsheet__list .dropcart__product-info {
    flex: 1 1 auto;
    min-width: 0;
}

.cartsheet__list .get_cart_summary a {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
}

.cartsheet__list .qty-container {
    margin-top: 6px;
}

.cartsheet__list .dropcart__product-remove {
    flex: 0 0 auto;
}

.cartsheet__list h6 {
    margin: 12px 0 2px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--brand);
}

/* stop the page behind from scrolling while the sheet is up */
body.cartsheet-locked {
    overflow: hidden;
}

@media (min-width: 992px) {
    .cartsheet {
        display: none !important;
    }
}

/* ==========================================================================
   Mobile layout for the parts table.
   Shared by spare_parts.php, spare_parts_detail.php and
   spare_parts_search.php. Desktop keeps the five-column table untouched. Below 768px it stays a
   table but drops to three columns — Code No / Part Name / Cart — and Power
   and Model move to a second line under each item, so nothing runs off the
   screen and there is no sideways scrolling to reach the cart button.
   ========================================================================== */

/* the extra line only exists for the narrow layout */
.sp2-meta-row {
    display: none;
}

@media (max-width: 767px) {

    /* nothing is wider than the screen any more */
    .product-card__info {
        overflow-x: visible;
        padding-bottom: 0;
    }

    .product-card__info > .product-table {
        min-width: 0;
    }

    /* Auto layout, not fixed: the first row is a colspan="5" group heading, so
       fixed layout cannot derive column widths from it and the table ends up
       narrower than its container. Auto also ignores the hidden columns. */
    .product-card__info .product-table {
        table-layout: auto;
        width: 100%;
    }

    /* the colgroup percentages are for the five-column desktop table */
    .product-card__info .product-table colgroup {
        display: none;
    }

    /* --- three columns --- */
    .product-card__info .product-table thead.sub-head th:nth-child(3),
    .product-card__info .product-table thead.sub-head th:nth-child(4),
    .product-card__info .sp2-cell--meta {
        display: none;
    }

    .product-card__info .product-table thead.sub-head th:nth-child(1),
    .product-card__info .sp2-cell--code {
        width: 60px;
    }

    .product-card__info .product-table thead.sub-head th:nth-child(5),
    .product-card__info .sp2-cell--cart {
        width: 40px;
    }

    /* the name column takes whatever is left */
    .product-card__info .product-table thead.sub-head th:nth-child(2),
    .product-card__info .sp2-cell--name {
        width: auto;
    }

    .product-card__info .product-table th,
    .product-card__info .product-table td {
        font-size: 11px;
        padding: 6px 5px;
        word-break: break-word;
    }

    .product-card__info .product-table thead.sub-head th {
        font-size: 10px;
        letter-spacing: .2px;
        padding: 8px 6px;
    }

    /* --- code no --- */
    .product-card__info .sp2-cell--code {
        font-weight: 700;
        color: var(--ink);
    }

    .product-card__info .sp2-cell--code .btn.btn-outline-secondary.btn-sm {
        display: block;
        width: 100%;
        padding: 2px 3px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.3;
        height: auto;
        white-space: normal;
        word-break: break-all;
    }

    /* --- part name --- */
    .product-card__info .sp2-cell--name {
        font-weight: 600;
        line-height: 1.4;
        color: var(--ink);
    }

    /* --- the Power / Model line --- */
    .product-card__info .sp2-meta-row {
        display: table-row;
    }

    .product-card__info .sp2-meta-row td {
        padding: 7px 5px 0 66px;
        font-size: 10px;
        color: var(--ink-soft);
        text-align: left;
        border-top: 0;
        border-bottom: 0;
        background: inherit;
    }

    /* the meta line sits above its item and the two read as one block, so
       the rule that separates items goes under the item row */
    .product-card__info .product-table tbody tr.sp2-row td {
        border-bottom: 1px solid #cccccc;
    }

    /* --- cart button — small enough to leave the name column room --- */
    .product-card__info .sp2-cell--cart {
        padding: 6px 4px !important;
    }

    .product-card__info .product-table .add-to-cart-form .btn.btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 28px;
        padding: 0;
        font-size: 12px;
        line-height: 1;
        border-radius: 6px;
        margin: 0 auto;
    }

    .product-card__info .product-table .add-to-cart-form .btn.btn-primary i {
        font-size: 12px;
    }

    /* --- group headings --- */
    .product-card__info .product-table thead.main-head th {
        padding: 9px 10px !important;
    }

    .product-card__info .product-table thead.main-head h5 {
        font-size: .82rem !important;
        margin: 0;
    }

    .product-card__info .sp2-group-cell {
        background: var(--brand);
        color: #fff;
        font-size: 11px;
        padding: 6px 10px;
        text-align: left;
    }
}