/*
********************************************************
Cambio - Responsive CSS Stylesheet
Overrides fixed-width layout from default.css
for mobile, tablet, desktop, wide and extra-wide screens.
********************************************************
*/

/* =====================================================
   BASE RESPONSIVE OVERRIDES (all screen sizes)
   ===================================================== */

#parent {
    width: 100%;
    max-width: 100%;
}

#content-container {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    padding: 0 15px;
}

#content-home {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    padding: 0 15px 16px 15px;
}

#content {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
}

#header-container {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    padding: 0 0px;
    height: auto;
    min-height: 150px;
}

#footer-wrap {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    padding: 0 15px;
}

#content-left {
    width: calc(100% - 260px);
    max-width: 725px;
    float: left;
}

#content-nav {
    width: 241px;
    float: left;
}

/* Homepage gadgets - flex grid base (3-col, equal-height rows) */
#homepage #gadget_container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

#homepage #gadget_container .section {
    width: calc(33.333% - 18px);
    float: none;
    margin: 0 26px 22px 0;
}

#homepage #gadget_container .section:nth-child(3n) {
    margin-right: 0;
}

/* Banner responsive */
#banner-wrap .banner img {
    width: 100%;
    height: auto;
}

/* Rotating banner carousel — indicators positioned below the image */
#banner-wrap .carousel {
    padding-bottom: 30px;
    overflow: visible;
}

#banner-wrap .carousel-indicators {
    bottom: 4px;
    margin: 0;
}

#banner-wrap .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #0C0CCC;
    background-color: transparent;
    opacity: 1;
    transition: background-color 0.2s;
}

#banner-wrap .carousel-indicators .active,
#banner-wrap .carousel-indicators [data-bs-target]:hover {
    background-color: #0C0CCC;
}

#banner-wrap .carousel-item img {
    border-radius: 10px;
    height: auto;
}

/* Carousel overlay (banner-overlay) — desktop positioning mirrors static overlay */
#banner-wrap .banner-overlay {
    position: absolute;
    top: 18px;
    right: 20px;
    left: auto;
    bottom: auto;
    width: 308px;
    padding: 8px 20px 12px;
    border-radius: 12px;
    opacity: 0.85;
    text-align: left;
    background-image: none;
    z-index: 100;
}

#banner-wrap .banner-overlay h2 {
    margin: 0 0 4px;
    padding: 0;
    font-size: 1.1rem;
}

#banner-wrap .banner-overlay p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 115%;
}

#banner-wrap .banner-overlay.left,
#banner-wrap .banner-overlay.contact {
    left: 20px;
    right: auto;
}

#banner-wrap .banner-overlay.middle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Search bar responsive */
.criteria {
    position: relative;
    padding: 0 0 0 0;
}

.criteria input {
    width: 100%;
}

/* Sticky tabs responsive */
.sticky {
    width: 100%;
    max-width: 725px;
}


/* =====================================================
   EXTRA WIDE: 1440px+
   ===================================================== */
@media (min-width: 1440px) {
    #content-container,
    #content-home,
    #content,
    #header-container,
    #footer-wrap {
        max-width: 1400px;
    }

    #content-left {
        max-width: 1100px;
        width: calc(100% - 260px);
    }

    #content-nav {
        width: 260px;
    }

    #homepage #gadget_container .section {
        width: calc(33.333% - 18px);
    }

    #homepage #gadget_container .section:nth-child(3n) {
        margin-right: 0;
    }

    .sticky {
        max-width: 1100px;
    }
}


/* =====================================================
   WIDE: 1200px - 1439px
   ===================================================== */
@media (min-width: 1200px) and (max-width: 1439px) {
    #content-container,
    #content-home,
    #content,
    #header-container,
    #footer-wrap {
        max-width: 1170px;
    }

    #content-left {
        max-width: 880px;
        width: calc(100% - 260px);
    }

    #content-nav {
        width: 250px;
    }

    #homepage #gadget_container .section {
        width: calc(33.333% - 18px);
    }

    #homepage #gadget_container .section:nth-child(3n) {
        margin-right: 0;
    }

    .sticky {
        max-width: 880px;
    }
}


/* =====================================================
   DESKTOP: 992px - 1199px  (close to original 990px)
   ===================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    #content-container,
    #content-home,
    #content,
    #header-container,
    #footer-wrap {
        max-width: 990px;
    }

    /* Homepage gadgets - 2 columns (matches tablet behaviour) */
    #homepage #gadget_container .section {
        width: calc(50% - 13px);
        margin-right: 26px;
    }

    #homepage #gadget_container .section:nth-child(3n) {
        margin-right: 26px;
    }

    #homepage #gadget_container .section:nth-child(2n) {
        margin-right: 0;
    }
}


/* =====================================================
   TABLET: 576px - 991px
   ===================================================== */
@media (max-width: 991px) {
    #header-container {
        height: auto;
        min-height: auto;
        padding: 10px 15px;
    }

    #logo {
        width: 200px;
        margin: 5px 0 0 0;
    }

    #logo img {
        width: 200px;
        height: auto;
    }

    #nav-primary-wrap {
        margin: 0;
        float: none;
        clear: both;
    }

    #basket-items {
        margin: 10px 0 0 0;
    }

    /* Stack content and sidebar */
    #content-left {
        width: 100%;
        max-width: 100%;
        float: none;
        padding: 0 12px;
    }

    #content-nav {
        width: 100%;
        float: none;
        margin: 15px 0;
        padding: 0 12px;
    }

    #sub-nav #lhs_menu {
        margin: 20px 5px
    }

    /* Homepage gadgets - 2 columns */
    #homepage #gadget_container .section {
        width: calc(50% - 13px);
        margin-right: 26px;
    }

    #homepage #gadget_container .section:nth-child(3n) {
        margin-right: 26px;
    }

    #homepage #gadget_container .section:nth-child(2n) {
        margin-right: 0;
    }

    /* Products layout */
    .products .search {
        width: 100%;
    }

    .products .search .container {
        width: 50%;
    }

    .searchresults .search .container {
        width: 50%;
    }

    /* Offers layout */
    .offers .offer-items .article {
        width: 100%;
        float: none;
        margin: 0;
    }

    .offers .offer-items .wrap {
        width: 100%;
        float: none;
        text-align: left;
        margin: 5px 0 0 0;
    }

    /* News layout — flex column so date/source can be reordered above article */
    .news .news-items li {
        display: flex;
        flex-direction: column;
        padding: 8px 0 12px 0;
    }

    .news .news-items .article {
        width: 100%;
        float: none;
        margin: 0;
    }

    .news .news-items .wrap {
        width: 100%;
        float: none;
        text-align: left;
        padding: 4px 0 0 12px;
        border-top: 1px solid #e0e0e0;
        margin-top: 6px;
    }

    /* Remove wasted left indent on synopsis when stacked full-width */
    .news .news-items .synopsis {
        padding-left: 12px;
    }

    /* Checkout */
    .checkout {
        padding: 20px 15px;
        margin: 0;
    }

    .checkout.address {
        padding: 20px 15px;
        margin: 0;
    }

    /* Sign-in */
    .sign-in {
        margin: 0;
        padding: 20px 15px;
    }

    .sign-in .login_wrap {
        width: 100%;
        float: none;
    }

    .sign-in .register_wrap {
        width: 100%;
        float: none;
        clear: both;
        margin: 15px 0 0 0;
    }

    .sign-in .send-button a {
        margin: 15px 0 0 0;
    }

    /* Banner overlay - stack on tablet and mobile */
    #banner-wrap .banner .overlay,
    #banner-wrap .banner-overlay {
        position: relative;
        top: auto;
        right: auto;
        left: auto !important;
        width: 100%;
        height: auto;
        border-radius: 10px;
        transform: none;
        opacity: 1;
        margin: 2px 0 0 0;
    }

    /* Contact forms */
    .contact-us {
        margin: 20px 0 0 0;
        padding: 0 15px 20px 0;
    }

    .contact-us.application-stories {
        margin: 20px 0 0 0;
    }

    /* Help sections */
    .help .section {
        width: calc(50% - 10px);
        float: left;
    }

    /* Distributors */
    .distributor .details-wrap {
        width: 100%;
        float: none;
    }

    /* Sticky tabs full width */
    .sticky {
        width: 100%;
        max-width: 100%;
    }

    /* Directions */
    .directions {
        margin: 20px 0 50px 0;
    }

    .directions #map_large {
        width: 100%;
    }

    .directions .instructions {
        width: 100%;
        float: none;
        margin: 15px 0 0 0;
    }

    /* Twitter */
    #twitter .notwitter {
        width: 100%;
    }

    /* Reset legacy h2 sizing so Bootstrap accordion button has natural height on mobile.
       #sub-nav #appsMenuHead/#techMenuHead beats default.css "#sub-nav h2" specificity (0,2,0 > 0,1,1). */
    #sub-nav #appsMenuHead,
    #sub-nav #techMenuHead {
        height: auto;
        padding: 0;
        margin: 0;
    }

    /* Style outer section heading buttons */
    #appsMenuHead .accordion-button,
    #techMenuHead .accordion-button {
        font-weight: 600;
        background-color: #f4f4f4;
        color: #333;
        padding: 1rem 1.25rem;
        font-size: 1rem;
        box-shadow: none;
    }

    #appsMenuHead .accordion-button:not(.collapsed),
    #techMenuHead .accordion-button:not(.collapsed) {
        background-color: #0C0CCC;
        color: #fff;
        box-shadow: none;
    }

    #appsMenuHead .accordion-button:not(.collapsed)::after,
    #techMenuHead .accordion-button:not(.collapsed)::after {
        filter: brightness(0) invert(1);
    }
}

/* Desktop: outer section heading always visible — force open, neutralize button chrome.
   Scoped to #appsMenuHead/#techMenuHead so inner .cambio-sidebar-accordion buttons are unaffected. */
@media (min-width: 992px) {
    #sub-nav #appsMenuBody,
    #sub-nav #techMenuBody {
        display: block !important;
    }

    #appsMenuHead,
    #techMenuHead {
        height: 27px;
        padding: 0;
        margin: 0;
    }

    #appsMenuHead .accordion-button,
    #techMenuHead .accordion-button {
        height: 27px;
        padding: 6px 0 0 16px;
        background: none !important;
        box-shadow: none !important;
        border: none;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        cursor: default;
        pointer-events: none;
    }

    #appsMenuHead .accordion-button::after,
    #techMenuHead .accordion-button::after {
        display: none;
    }
}


/* =====================================================
   MOBILE: < 576px
   ===================================================== */
@media (max-width: 575px) {
    #header-container {
        height: auto;
        min-height: auto;
        padding: 10px 15px;
    }

    #logo {
        width: 180px;
        float: none;
        margin: 0;
        text-align: left;
    }

    #logo img {
        width: 180px;
        height: auto;
    }

    #nav-primary-wrap {
        margin: 0;
        float: none;
        clear: both;
    }

    #basket-items {
        float: none;
        margin: 10px 0 0 0;
        text-align: center;
    }

    #basket-items ul {
        float: none;
        display: inline-block;
    }

    /* Content - single column */
    #content-left {
        width: 100%;
        max-width: 100%;
        float: none;
        padding: 0 10px;
        margin: 8px 0;
    }

    #content-nav {
        width: 100%;
        float: none;
        padding: 0 10px;
        margin: 15px 0;
    }

    /* Homepage gadgets - single column */
    #homepage #gadget_container .section {
        width: 100%;
        margin: 0 0 22px 0;
    }

    #homepage #gadget_container .section:nth-child(3n),
    #homepage #gadget_container .section:nth-child(2n) {
        margin-right: 0;
    }

    /* Product search areas */
    .products .search {
        width: 100%;
    }

    .products .search .container {
        width: 100%;
        float: none;
        border-right: none;
        border-bottom: 1px solid #fff;
    }

    .searchresults .search .container {
        width: 100%;
        float: none;
    }

    .searchresults .search .apps {
        width: 100%;
        float: none;
    }

    /* Product details */
    .product-details .intro {
        padding: 10px;
    }

    .product-details .intro p {
        padding-right: 0;
    }

    /* Data tables - horizontal scroll */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Checkout */
    .checkout {
        padding: 15px 10px;
        margin: 0;
    }

    .checkout.address {
        padding: 15px 10px;
        margin: 0;
    }

    .checkout.thankyou {
        padding: 15px 10px;
        margin: 0;
    }

    .checkout .form_wrap label {
        float: none;
        width: 100%;
        margin-bottom: 3px;
    }

    .checkout .form_wrap .textbox,
    .checkout .form_wrap .select,
    .checkout .form_wrap select {
        width: 100%;
        float: none;
    }

    /* Sign-in */
    .sign-in {
        margin: 0;
        padding: 15px 10px;
    }

    .sign-in .login_wrap {
        width: 100%;
        float: none;
    }

    .sign-in .login .textbox {
        width: 100%;
        float: none;
    }

    .sign-in .login label {
        float: none;
        width: 100%;
    }

    .sign-in .register_wrap {
        width: 100%;
        float: none;
        margin: 15px 0 0 0;
    }

    .sign-in .send-button a {
        margin: 15px 0 0 0;
    }

    /* Contact forms */
    .contact-us {
        margin: 10px 0 0 0;
        padding: 0 10px 20px 0;
    }

    .contact-us.application-stories {
        margin: 10px 0 0 0;
    }

    .contact-us .form label {
        float: none;
        width: 100%;
        text-align: left;
        margin-bottom: 3px;
    }
    .contact-us .form .left {
        float: none;
        width: 100%;
    }

    .contact-us .form input,
    .contact-us .form textarea,
    .contact-us .form select {
        width: 100%;
        float: none;
    }

    .contact-us .form .captcha-text {
        margin: 0 0 4px 0;
    }

    .contact-us .form .captcha-image {
        margin: 0 0 0 0;
    }

    /* My account */
    .myaccount .form_wrap label {
        float: none;
        width: 100%;
    }

    .myaccount .form_wrap .textbox,
    .myaccount .form_wrap .select {
        width: 100%;
        float: none;
    }

    .myaccount .form_wrap .address .order_left,
    .myaccount .form_wrap .address .order_right {
        width: 100%;
        float: none;
    }

    /* Help sections */
    .help .section {
        width: 100%;
        float: none;
        margin: 0 0 15px 0;
    }

    /* Offers */
    .offers .offer-items .article {
        width: 100%;
        float: none;
        margin: 0;
    }

    .offers .offer-items .wrap {
        width: 100%;
        float: none;
        text-align: left;
    }

    /* Tabs */
    .tabs-container .top ul {
        float: none;
    }

    .tabs-container .top li {
        float: none;
        display: inline-block;
    }

    /* Footer — 2 columns on mobile */
    #footer-wrap li {
        flex: 0 0 50%;
    }

    /* Breadcrumb */
    .breadcrumb {
        padding: 9px 10px;
    }

    /* Twitter */
    #twitter .notwitter {
        width: 100%;
    }

    /* News — mobile typography */
    .news h1 {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .news > h2 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .news .news-items {
        margin-top: 6px;
    }

    .news .news-items li {
        padding: 8px 0 10px 0;
    }

    .news .news-items h2 {
        line-height: 1.3;
    }

    .news .date {
        font-size: 11px;
        padding: 0 0 2px 0;
    }

    .news .source {
        font-size: 11px;
        padding: 0;
    }

    .news .news-list li {
        padding: 0 0 3px 0;
    }

}

/* =====================================================
   PHASE 2 — Product card grid & search improvements
   ===================================================== */

/* Application card grid (Products landing page) */
.products-applications {
    margin-bottom: 20px;
}

.app-card-grid {
    margin-top: 10px;
}

.app-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #444444;
    transition: box-shadow 0.15s ease;
}

    .app-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        color: #0C0CCC;
        text-decoration: none;
    }

    .app-card .card-img-top {
        width: 100%;
        height: 80px;
        object-fit: contain;
        padding: 6px;
        background-color: #f9f9f9;
    }

    .app-card-title {
        font-weight: bold;
        text-align: center;
        margin: 0;
        line-height: 1.3;
    }

/* Product card grid */
.product-grid {
    margin-top: 15px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: box-shadow 0.2s ease;
}

.product-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.product-card .card-title a {
    color: #0C0CCC;
    text-decoration: none;
    font-weight: 600;
}

.product-card .card-title a:hover {
    text-decoration: underline;
}

.product-card .card-footer {
    background: #f8f8f8;
    border-top: 1px solid #eee;
    padding: 8px 12px;
}

/* Search results count */
.results_num {
    margin: 0 0 12px 0;
    font-style: italic;
    color: #666;
}

/* Product detail accordion sections */
#product-sections-accordion .accordion-button {
    font-weight: 600;
    background: #f4f4f4;
    color: #333;
}

#product-sections-accordion .accordion-button:not(.collapsed) {
    background: #0C0CCC;
    color: #fff;
    box-shadow: none;
}

#product-sections-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

#product-sections-accordion .accordion-body {
    padding: 15px;
}

/* Catalogue table responsive wrapper */
.table-responsive {
    margin: 10px;
}

/* Product detail page — product thumbnail */
.product-details .wrap .product-thumb {
    display: block;
    float: right;
    max-height: 150px;
    width: auto;
    margin: 0 0 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.product-details .wrap::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 767px) {
    .product-details .wrap .product-thumb {
        display: block;
        max-width: 100%;
        max-height: 150px;
        width: auto;
        margin: 10px 0 0 0;
    }
}

/* Mega-menu icon */
.mega-menu-icon {
    vertical-align: middle;
    margin-right: 4px;
    object-fit: contain;
}

/* Sidebar application icon */
.sidebar-app-icon {
    object-fit: contain;
    flex-shrink: 0;
}

/* jQuery UI — inherit site font rather than jquery-ui.css's Arial default */
.ui-widget,
.ui-widget button {
    font-family: inherit;
}

/* jQuery UI Autocomplete dropdown */
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.ui-menu-item-wrapper {
    padding: 6px 12px;
    font-size: 14px;
}

.ui-state-active .ui-menu-item-wrapper,
.ui-menu-item-wrapper:hover {
    background: #0C0CCC;
    color: #fff;
    border-radius: 0;
}

/* Search bar — spinner */
#search-spinner {
    position: absolute;
    right: 63px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    font-size: 18px;
    color: #0C0CCC;
    pointer-events: none;
    z-index: 10;
    line-height: 1;
}

#search-spinner.spin-active {
    display: block;
}

@keyframes cambio-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

#search-spinner.spin-active {
    animation: cambio-spin 0.75s linear infinite;
}

/* Search bar — clear button */
#search-clear {
    position: absolute;
    right: 63px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

#search-clear:hover,
#search-clear:focus {
    color: #0C0CCC;
    background: rgba(12, 12, 204, 0.08);
    outline: none;
}

/* =====================================================
   PHASE 4 - CHECKOUT RESPONSIVE
   ===================================================== */

/* Checkout progress indicator */
.checkout-progress {
    border-bottom: 1px solid #dce1e7;
    padding-bottom: 16px;
}
.checkout-steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.checkout-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 0.9rem;
    position: relative;
}
.checkout-step:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: #dce1e7;
    margin: 0 8px;
}
.checkout-step.active { color: #0C0CCC; font-weight: 600; }
.checkout-step.completed { color: #198754; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 575px) {
    .step-label { display: none; }
    .checkout-step:not(:last-child)::after { margin: 0 4px; }
}

/* Footer — extend 767px flex style through tablet (768px–991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #footer-wrap ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 0;
        margin: 0;
        text-align: left;
    }

    #footer-wrap li {
        float: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        flex: 0 0 33.333%;
        text-align: center;
        padding: 8px 7px;
        box-sizing: border-box;
    }

    #footer-wrap li.last {
        border-bottom: none;
    }
}

/* Checkout form responsive inputs */
@media (max-width: 767px) {
    /* Footer — flex grid: 3 cols on tablet, overridden to 2 cols on mobile */
    #footer-wrap ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 0;
        margin: 0;
        text-align: left;
    }

    #footer-wrap li {
        float: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        flex: 0 0 33.333%;
        text-align: center;
        padding: 8px 7px;
        box-sizing: border-box;
    }

    #footer-wrap li.last {
        border-bottom: none;
    }

    .checkout.address ul li.clearfix,
    .checkout.confirmation ul li {
        display: block;
    }
    .checkout.address ul li label,
    .checkout.confirmation ul li label {
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }
    .checkout.address ul li .textbox,
    .checkout.address ul li select,
    .checkout.confirmation ul li .textbox {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Basket proceed button sticky on mobile */
    .btn-proceed,
    .d-flex .btn-success.btn-lg {
        width: 100%;
        justify-content: center;
    }

    /* --- Catalogue GridView: stacked card layout on mobile --- */
    /* NOTE: GridViewAdapter is disabled; browser wraps all <tr> in implicit <tbody>.
       Use :first-child for the header row, :not(:first-child) for data rows. */

    /* Cancel the generic .data-table mobile rule — its overflow-x:auto (applied at <576px)
       shrinks the table to content width. Higher specificity (element+class) wins. */
    table.catalogue {
        overflow-x: visible;
        width: 100%;
    }

    /* tbody retains display:table-row-group by default, which doesn't fill a block parent.
       Force it to block so it stretches to the table width. */
    table.catalogue tbody {
        display: block;
        width: 100%;
    }

    /* Header row: show as flex, hide th 1-5, show only currency toggle (th 6) */
    table.catalogue tr:first-child {
        display: flex;
        width: 100%;
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid #cccccc;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

    table.catalogue tr:first-child th:nth-child(1),
    table.catalogue tr:first-child th:nth-child(2),
    table.catalogue tr:first-child th:nth-child(3),
    table.catalogue tr:first-child th:nth-child(4),
    table.catalogue tr:first-child th:nth-child(5) {
        display: none;
    }

    table.catalogue tr:first-child th:nth-child(6) {
        display: block;
        width: 100%;
        padding: 6px 10px;
    }

    /* Currency toggle: flex row, remove floats */
    table.catalogue tr:first-child .flag {
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    table.catalogue tr:first-child .flag li {
        float: none;
        margin: 0;
        padding: 0;
        font-size: 13px;
        color: #444444;
    }

    table.catalogue tr:first-child .flag li.uk a:hover,
    table.catalogue tr:first-child .flag li.eu a:hover {
        border-color: #444444;
        color: #000000;
    }

    table.catalogue tr:first-child .flag li.selected a {
        border-color: #444444;
        font-weight: 600;
    }

    /* Each data row becomes a card */
    table.catalogue tr:not(:first-child) {
        display: block;        
        margin-bottom: 12px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        padding: 4px 0;
        background: #ffffff;
    }

    table.catalogue tr:not(:first-child).alt-row {
        background: #f9f9f9;
    }

    /* Each cell is a flex row: [label] [value] */
    table.catalogue td {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border: none;
        border-bottom: 1px solid #eeeeee;
        font-size: 15px;
    }

    table.catalogue td:last-child {
        border-bottom: none;
    }

    /* Column labels via ::before */
    table.catalogue td::before {
        font-weight: 600;
        color: #444444;
        font-size: 14px;
        min-width: 110px;
        flex-shrink: 0;
    }

    table.catalogue td:nth-child(1)::before { content: "Catalogue No."; }
    table.catalogue td:nth-child(2)::before { content: "Description"; }
    table.catalogue td:nth-child(3)::before { content: "Pack Size"; }
    table.catalogue td:nth-child(4)::before { content: "Price"; }
    table.catalogue td:nth-child(5)::before { content: "Qty"; }
    table.catalogue td:nth-child(6)::before { content: ""; min-width: 0; }

    /* Qty stepper — keep it from wrapping oddly */
    table.catalogue td.qty-cell .qty-stepper {
        flex-shrink: 0;
    }

    /* Remove the table-responsive horizontal scroll on mobile
       (stacked layout makes it unnecessary) */
    .product-details .table-responsive {
        overflow-x: visible;
    }

    /* ---- Checkout basket overrides (8-column layout, no currency toggle) ---- */

    /* Hide the entire header row — no currency toggle needed in basket */
    .checkout table.catalogue tr:first-child {
        display: none;
    }

    /* Override ::before labels for checkout basket column order:
       1=Catalogue No. 2=Description 3=Pack Size 4=Supplier 5=Price 6=Qty 7=Total 8=Remove */
    .checkout table.catalogue td:nth-child(4)::before { content: "Supplier"; }
    .checkout table.catalogue td:nth-child(5)::before { content: "Price"; }
    .checkout table.catalogue td:nth-child(6)::before { content: "Qty"; min-width: 110px; }
    .checkout table.catalogue td:nth-child(7)::before { content: "Total"; }
    .checkout table.catalogue td:nth-child(8)::before { content: ""; min-width: 0; }
}

/* =====================================================
   PHASE 4 - ORDERING UX
   ===================================================== */

/* Quantity stepper */
.qty-stepper {
    width: 90px;
    min-width: 90px;
}
.qty-stepper .form-control.qty {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    min-width: 36px;
}
.qty-stepper .btn {
    padding: 0.1rem 0.5rem;
    line-height: 1.1;
}
td.qty-cell {
    white-space: nowrap;
}

/* Add to Order button */
.add2order {
    white-space: nowrap;
}

/* Prominent price & pack size */
.catalogue td:nth-child(3),
.catalogue td:nth-child(4) {
    font-weight: 600;
}

/* Progressive disclosure for product description */
.desc-clamp {
    position: relative;
    max-height: 150px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.desc-clamp.expanded {
    overflow: visible;
}

.desc-clamp.desc-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.desc-clamp.desc-active.expanded::after {
    opacity: 0;
    pointer-events: none;
}

.desc-read-more {
    background: none;
    border: none;
    color: #0C0CCC;
    font-size: 12px;
    padding: 4px 0 8px 0;
    cursor: pointer;
    text-decoration: underline;
}

.desc-read-more:hover {
    color: #000;
}

/* =====================================================
   PRINT - ensure no responsive styles affect print
   ===================================================== */
@media print {
    #content-container,
    #content-home,
    #content,
    #header-container,
    #footer-wrap {
        max-width: 100%;
        width: 100%;
    }
}

/* ── Technical Help — products docs list ─────────────────────────────────── */

/* Clear float from product link so documents list starts below it */
.applications .products.docs .documents {
    clear: both;
}

/* Document list links */
.applications .products.docs .documents li a {
    display: block;
    text-decoration: none;
    color: #444444;
    padding: 3px 0 3px 4px;
}
.applications .products.docs .documents li a:hover {
    color: #0C0CCC;
}

/* Download icon prefix on download.aspx links */
.applications .products.docs .documents li a[href*="download.aspx"]::before {
    font-family: "bootstrap-icons";
    content: "\F30A";
    margin-right: 6px;
    color: #0C0CCC;
    font-style: normal;
}

/* ===== Homepage USP strip ===== */
.homepage-usp-strip {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background: #f7f7ff;
    padding: 14px 0;
    margin: 0 8px 18px;
}
.homepage-usp-strip .usp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    border-right: 1px solid #ddd;
}
.homepage-usp-strip .usp-item:last-child { border-right: none; }
.homepage-usp-strip .bi {
    font-size: 38px;
    color: #0C0CCC;
    flex-shrink: 0;
}
.homepage-usp-strip strong { display: block; color: #222; }
.homepage-usp-strip span  { color: #666; }

@media (max-width: 767px) {
    .homepage-usp-strip .usp-item { border-right: none; border-bottom: 1px solid #ddd; }
    .homepage-usp-strip .usp-item:last-child { border-bottom: none; }
}

/* ===== Homepage section titles ===== */
.homepage-section-title {
    font-weight: bold;
    padding-bottom: 5px;
    margin: 18px 8px 12px;
}

/* ===== WYSIWYG gadget body overrides =====
   Restores heading hierarchy suppressed by the generic container h3 rule (15px/110%)
   and centres images that have inline pixel widths */
#homepage #gadget_container .section .container.wysiwyg .body_wrap h3 {
    font-size: 0.9rem;
    line-height: 1.2;
    margin: 8px 0 4px;
}
#homepage #gadget_container .section .container.wysiwyg .body_wrap h4 {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 6px 0 4px;
}
#homepage #gadget_container .section .container.wysiwyg .body_wrap img {
    display: block;
    margin: 6px auto;
}
#homepage #gadget_container .section .container.wysiwyg .body_wrap p,
#homepage #gadget_container .section .container.wysiwyg .body_wrap li {
    font-size: 0.8rem;
    line-height: 1.2rem;
    padding: 4px 0; 
}