/* ============================================================
   RI Dental - Responsive CSS v8
   Replace /public_html/stylesheets/responsive.css with this file.
   Do not append older patches. Includes header/nav/search/slider/footer refinements.
   ============================================================ */

/* Base safety */
* {
    box-sizing: border-box;
}

/* Hide mobile-only controls on desktop */
.mobile-main-switch {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.mobile-main-toggle,
.mobile-main-panel,
.mobile-phone-link,
.mobile-main-nav,
.mobile-category-switch,
.mobile-category-toggle,
.mobile-advanced-search-link {
    display: none !important;
}

/* Desktop nav: lighter and less bulky */
nav,
nav.sixteen.columns {
    padding-top: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

nav > ul {
    margin-bottom: 0 !important;
}

nav > ul > li {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    margin-right: 12px !important;
}

nav > ul > li > a {
    background: #d8d9dc !important;
    color: #57595B !important;
    font-weight: normal !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

nav > ul > li:hover > a {
    background: #c8c9cc !important;
    color: #57595B !important;
}

/* Desktop: Advanced Search as secondary action */
nav > ul > li:last-child {
    float: right !important;
    margin-right: 0 !important;
}

nav > ul > li:last-child > a {
    background: #fff !important;
    color: #57595B !important;
    border: 1px solid #fdb743 !important;
    font-weight: normal !important;
}

nav > ul > li:last-child > a:hover {
    background: #fff8ec !important;
    color: #57595B !important;
    border-color: #fdb743 !important;
    box-shadow: none !important;
}

/* Desktop: keep original compact search stable */
header #form-search {
    display: block !important;
    position: relative !important;
    width: 260px !important;
    height: 22px !important;
    padding: 5px !important;
    margin-left: 70px !important;
    box-sizing: content-box !important;
}

header .search-field {
    display: block !important;
    width: 226px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 24px 0 4px !important;
    margin: 0 !important;
    box-sizing: content-box !important;
}

header .search-submit,
header .search-submit:hover {
    position: absolute !important;
    top: 8px !important;
    right: 7px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop: give category pictograms more breathing room */
#category > ul > li > a {
    min-height: 58px;
    height: auto !important;
    padding-top: 18px !important;
    padding-bottom: 13px !important;
    box-sizing: border-box;
    background-size: auto 38px !important;
}

/* Desktop: make footer background full width and avoid clipped content */
.footer-bg {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    background: #2895e2 !important;
}

.main-wrapper {
    margin-bottom: 0 !important;
}

.main-wrapper:after {
    height: auto !important;
}

footer,
footer.sixteen.columns {
    background: transparent !important;
    padding-bottom: 22px !important;
    min-height: 0 !important;
}

/* Desktop: prevent slideshow image/frame overflow */
.flexslider-container,
.flexslider,
.flexslider .slides > li {
    overflow: hidden !important;
}

.flexslider .slides img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}


/* Footer: hide empty legacy boxes if the template still outputs them */
#contact .box:empty {
    display: none !important;
}

/* Tablet */
@media screen and (max-width: 960px) {
    .container {
        width: 100% !important;
        max-width: 960px;
        padding-left: 15px;
        padding-right: 15px;
    }

    footer,
    footer.sixteen.columns {
        width: 100% !important;
    }

    #contact .box {
        width: 45% !important;
    }

    #contact .box:first-child {
        padding-right: 10px;
    }

    #product .description-box p,
    .checkout > h2 {
        width: 100% !important;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body,
    .main-wrapper {
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .one.column,
    .one.columns,
    .two.columns,
    .three.columns,
    .four.columns,
    .five.columns,
    .six.columns,
    .seven.columns,
    .eight.columns,
    .nine.columns,
    .ten.columns,
    .eleven.columns,
    .twelve.columns,
    .thirteen.columns,
    .fourteen.columns,
    .fifteen.columns,
    .sixteen.columns,
    .one-third.column,
    .two-thirds.column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    .alpha,
    .omega {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .offset-by-one,
    .offset-by-two,
    .offset-by-three,
    .offset-by-four,
    .offset-by-five,
    .offset-by-six,
    .offset-by-seven,
    .offset-by-eight,
    .offset-by-nine,
    .offset-by-ten,
    .offset-by-eleven,
    .offset-by-twelve,
    .offset-by-thirteen,
    .offset-by-fourteen,
    .offset-by-fifteen {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .container {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow: visible !important;
    }

    .container:after {
        overflow: visible !important;
    }

    .header-gradient {
        display: none !important;
    }

    /* Header */
    header,
    header.sixteen.columns {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 0 12px 0 !important;
        border-bottom: 1px solid #ccc;
        background: linear-gradient(#fff, #f6f6f6) !important;
    }

    .site-logo-link {
        display: block !important;
        width: auto !important;
        text-decoration: none !important;
    }

    header #logo,
    h1#logo,
    h1#logo.four.columns.alpha {
        width: 170px !important;
        height: 46px !important;
        margin: 6px 0 10px 16px !important;
        float: none !important;
        display: block !important;
        text-indent: -99999px !important;
        background: url('../images/logo.png') no-repeat left center !important;
        background-size: contain !important;
    }

    /* Mobile hamburger */
    .mobile-main-switch {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

    .mobile-main-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 14px !important;
        right: 16px !important;
        z-index: 9999 !important;
        width: 44px !important;
        height: 44px !important;
        line-height: 1 !important;
        text-align: center !important;
        font-size: 30px !important;
        font-weight: normal !important;
        cursor: pointer !important;
        border: 1px solid #ccc !important;
        border-radius: 7px !important;
        background: #fff !important;
        color: #57595B !important;
        pointer-events: auto !important;
    }

    .mobile-main-toggle:before {
        content: none !important;
    }

    .mobile-main-panel {
        display: none !important;
        position: absolute !important;
        top: 64px !important;
        right: 16px !important;
        width: 230px !important;
        z-index: 9998 !important;
        background: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
    }

    .mobile-main-switch:checked ~ .mobile-main-panel {
        display: block !important;
    }

    .mobile-main-panel ul {
        margin: 0 !important;
        padding: 8px !important;
    }

    .mobile-main-panel li {
        margin: 0 !important;
    }

    .mobile-main-panel a {
        display: block !important;
        padding: 12px 10px !important;
        color: #57595B !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee !important;
        font-size: 15px !important;
    }

    .mobile-main-panel li:last-child a {
        border-bottom: none !important;
    }

    /* Mobile: use hamburger instead of desktop nav */
    nav,
    nav.sixteen.columns,
    nav ul#nav {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Header account/search order */
    header .right-box,
    .six.columns.offset-by-six.omega.right-box {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        clear: both !important;
    }

    .mobile-account-row {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: calc(100% - 32px) !important;
        margin: 0 16px 12px 16px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-phone-link {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 8px 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: #57595B !important;
        text-decoration: none !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    header #login-box,
    #login-box.six.columns.alpha.omega {
        flex: 1 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    #login-box a[href*='op=forget'] {
        display: none !important;
    }

    #login-box .account-line,
    #login-box .shop-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px !important;
    }

    #login-box .shop-actions {
        margin-top: 4px !important;
    }

    #login-box .sep {
        color: #777 !important;
    }


    #login-box .guest-account .welcome-text {
        display: none !important;
    }

    #login-box .guest-account {
        flex-wrap: nowrap !important;
        gap: 7px !important;
        white-space: nowrap !important;
    }

    #login-box a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-decoration: none !important;
    }

    #login-box a.bright-btn {
        min-height: 42px !important;
        padding: 10px 13px !important;
        letter-spacing: 1.6px !important;
        white-space: nowrap !important;
    }

    #login-box #cart {
        width: auto !important;
        min-width: auto !important;
        padding-left: 30px !important;
        padding-right: 0 !important;
        background-position: left center !important;
    }

    /* Search after account row */
    header #form-search {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 16px 12px 16px !important;
        padding: 7px !important;
        box-sizing: border-box !important;
    }

    header .search-field {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        height: 38px !important;
        line-height: 38px !important;
        margin-bottom: 0 !important;
        padding-left: 8px !important;
        box-sizing: border-box !important;
    }

    header .search-submit,
    header .search-submit:hover {
        position: static !important;
        flex: 0 0 38px;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
    }

    .breadcrumb {
        width: calc(100% - 32px) !important;
        margin: 6px 16px 14px 16px !important;
        padding: 0 !important;
        clear: both;
        font-size: 13px !important;
        line-height: 1.4;
        word-wrap: break-word;
    }

    /* Category navigation */
    #category {
        width: calc(100% - 32px) !important;
        margin: 0 16px 14px 16px !important;
        float: none !important;
    }

    #category > ul {
        margin-bottom: 10px !important;
    }

    #category > ul > li {
        margin-bottom: 6px !important;
        border-radius: 6px !important;
    }

    #category > ul > li > a {
        width: 100% !important;
        height: auto !important;
        min-height: 48px;
        padding: 14px 56px 12px 14px !important;
        font-size: 16px !important;
        line-height: 1.2;
        background-position: right 14px center !important;
        background-size: auto 34px !important;
    }

    #category > ul > li > ul {
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    #category > ul > li > ul li {
        margin-bottom: 0 !important;
    }

    #category > ul > li > ul li a {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        line-height: 1.4;
    }

    #category > ul > li > ul li ul li a {
        padding-left: 28px !important;
        font-size: 14px !important;
    }

    .expandsub {
        min-width: 34px;
        min-height: 34px;
        padding: 8px 6px !important;
        text-align: center;
    }

    /* PDP */
    #product,
    #product .productchart,
    #product .product-image-box,
    #product .product-info,
    #product .product-specs,
    #product .product-price-box,
    #product .description-box,
    .description-box.sixteen.columns {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #product .productchart,
    #product .product-image-box {
        text-align: center !important;
        overflow-x: visible !important;
        margin-bottom: 15px;
    }

    #prodchart,
    #product .product-image-box img {
        display: block !important;
        width: 100% !important;
        max-width: 460px !important;
        height: auto !important;
        margin: 0 auto 16px auto !important;
    }

    #product .product-info h2 {
        width: 100%;
        float: none !important;
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 1.2;
    }

    #product .product-specs li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        padding: 12px 10px;
    }

    #product .product-specs label {
        width: auto !important;
        min-width: 95px;
        font-size: 14px;
    }

    #product .product-specs span,
    #product .product-specs select {
        float: none !important;
        max-width: 100%;
        font-size: 14px !important;
    }

    #product .product-price-box {
        text-align: left !important;
        margin: 10px 0 !important;
    }

    #product .price-box {
        padding-top: 0 !important;
        font-size: 18px;
    }

    #product .order-box {
        width: 100% !important;
        padding: 18px 14px !important;
        margin: 10px 0 18px 0 !important;
        text-align: center;
    }

    #product .order-box label,
    #product .order-box input,
    #product .order-box span,
    #product .order-box button,
    #product .order-box a {
        float: none !important;
    }

    #product .order-box input[type='text'] {
        width: 70px !important;
        display: inline-block;
        text-align: center;
    }

    #product .order-box button,
    #product .order-box a.bright-btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
        margin: 10px auto 0 auto !important;
        display: block !important;
    }

    #product .order-box a.bright-btn[href*='cart.php'] {
        color: #000 !important;
        border-color: #fdb743 !important;
        background: #fff !important;
    }

    #product .description-box p {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Product listing */
    #product-list {
        width: 100% !important;
    }

    .product-box {
        width: 20% !important;
        min-width: 62px;
        height: auto !important;
        margin-bottom: 22px;
    }

    .product-box > a > img {
        max-width: 48px;
        height: auto;
    }

    #product-list h1,
    #product h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    #product-list h2 {
        height: auto !important;
    }

    /* Slideshow */
    #slideshow,
    .flexslider-container,
    .flexslider,
    .flexslider .slides,
    .flexslider .slides > li {
        height: auto !important;
        max-height: none !important;
    }

    .flexslider {
        margin-bottom: 18px !important;
    }

    .flexslider .slides img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }


    .flexslider .slides > li {
        aspect-ratio: 16 / 8.8;
        overflow: hidden !important;
        background: #fff !important;
    }

    .flexslider .slides > li > a,
    .flexslider .slides > li > a > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .flexslider .slides > li > a > img {
        object-fit: cover !important;
        object-position: center center !important;
        transform: scale(1.08) !important;
        transform-origin: center center !important;
    }

    .flex-caption {
        left: 10% !important;
        top: 12% !important;
        width: 42% !important;
        max-width: 210px;
        font-size: 16px !important;
        line-height: 1.15 !important;
        padding: 10px !important;
    }

    .flex-caption .prod-name {
        display: block;
        font-size: 17px !important;
        line-height: 1.1 !important;
        margin-bottom: 6px;
    }

    /* Forms */
    #login,
    #register,
    #dashboard,
    .checkout,
    #content {
        width: 100% !important;
    }

    #login input.form,
    #register input.form1,
    #register select.form1,
    #register .searchsel,
    input.form,
    input.form.long,
    select.form,
    .searchsel,
    #advsearch li input,
    #srch_filter {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
    }

    #register form > div,
    #register ul.form,
    #register ul.form li,
    #edit ul.form li,
    #dashboard-menu,
    #dashboard-content,
    .box1 {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    #register label.error {
        display: block !important;
        float: none !important;
        clear: both;
        margin-top: 4px;
    }

    /* Cart and popups */
    .popupcart,
    .histpopupcart,
    .histpopupcart_edit {
        width: 95% !important;
        max-width: 700px;
        height: auto !important;
        max-height: 90vh;
        left: 2.5% !important;
        right: 2.5% !important;
        position: fixed !important;
        top: 10px !important;
        overflow-y: auto !important;
        z-index: 9999;
    }

    .info-box,
    .form-ordered {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #shoppingcart .col1,
    #shoppingcart_edit .col1 {
        width: auto !important;
        max-width: 60%;
    }

    #shoppingcart .row div {
        font-size: 11px;
    }

    /* Footer */
    .main-wrapper {
        margin-bottom: 0 !important;
    }

    .main-wrapper:after,
    .footer-bg {
        height: auto !important;
    }

    footer,
    footer.sixteen.columns {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 15px 12px !important;
    }

    #contact,
    #contact .box {
        width: 100% !important;
        float: none !important;
    }

    #contact .box {
        padding: 10px 0 !important;
    }

    #contact .box:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #contact .box .box-header {
        height: auto !important;
    }

    .footer-note {
        text-align: center;
        padding: 10px 0;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    header #logo,
    h1#logo {
        width: 150px !important;
        height: 40px !important;
    }

    .mobile-main-toggle {
        width: 40px !important;
        height: 40px !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 28px !important;
    }


    .mobile-account-row {
        gap: 5px !important;
    }

    .mobile-phone-link {
        font-size: 13px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    #login-box a.bright-btn {
        padding-left: 9px !important;
        padding-right: 9px !important;
        letter-spacing: 1.2px !important;
    }

    #login-box .guest-account {
        gap: 5px !important;
    }

    #product .product-info h2 {
        font-size: 20px;
    }

    .flex-caption {
        font-size: 14px !important;
        width: 46% !important;
    }
}


/* ============================================================
   RI Dental - Mobile final alignment v9
   Purpose: header spacing, account row proportions, visible menu,
   breadcrumb spacing, mobile slider crop, desktop search alignment.
   ============================================================ */

/* Desktop search: prevent the icon from sitting on the placeholder text */
header #form-search {
    position: relative !important;
    width: 260px !important;
    height: 32px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

header .search-field {
    width: 100% !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 34px 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

header .search-submit,
header .search-submit:hover {
    position: absolute !important;
    top: 8px !important;
    right: 9px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media screen and (max-width: 768px) {

    :root {
        --ri-mobile-x: 16px;
    }

    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    header,
    header.sixteen.columns {
        width: 100% !important;
        padding: 12px var(--ri-mobile-x) 14px var(--ri-mobile-x) !important;
        margin: 0 !important;
        background: #f2f2f2 url('../images/header-gradient.gif') bottom repeat-x !important;
        border-bottom: 1px solid #ccc !important;
    }

    header #logo,
    h1#logo,
    h1#logo.four.columns.alpha {
        width: 170px !important;
        height: 46px !important;
        margin: 6px 0 12px 0 !important;
        background-position: left center !important;
        background-size: contain !important;
    }

    /* Robust hamburger button. Needs the v9 header.tpl button markup. */
    .mobile-main-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 18px !important;
        right: var(--ri-mobile-x) !important;
        z-index: 9999 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 1px solid #ccc !important;
        border-radius: 7px !important;
        background: #fff !important;
        color: #57595B !important;
        font-size: 29px !important;
        line-height: 1 !important;
        text-indent: 0 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .mobile-main-panel {
        display: none !important;
        position: absolute !important;
        top: 68px !important;
        right: var(--ri-mobile-x) !important;
        width: 230px !important;
        z-index: 9998 !important;
        background: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
    }

    .mobile-main-panel.mobile-main-panel-open {
        display: block !important;
    }

    .mobile-main-panel ul {
        margin: 0 !important;
        padding: 8px !important;
    }

    .mobile-main-panel li {
        margin: 0 !important;
    }

    .mobile-main-panel a {
        display: block !important;
        padding: 12px 10px !important;
        color: #57595B !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee !important;
        font-size: 15px !important;
    }

    .mobile-main-panel li:last-child a {
        border-bottom: none !important;
    }

    /* Header inner elements align with body width */
    header .right-box,
    .six.columns.offset-by-six.omega.right-box {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-account-row {
        order: 1 !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-phone-link {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 46px !important;
        padding: 0 8px !important;
        border: 1px solid #ccc !important;
        border-radius: 7px !important;
        background: #fff !important;
        color: #57595B !important;
        text-decoration: none !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    header #login-box,
    #login-box.six.columns.alpha.omega {
        flex: 1 1 calc(60% - 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    #login-box .guest-account {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 7px !important;
        width: 100% !important;
    }

    #login-box .guest-account .bright-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        letter-spacing: 1.7px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    #login-box .guest-account .sep {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 46px !important;
        color: #57595B !important;
    }

    header #form-search {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 0 14px 0 !important;
        padding: 7px !important;
        box-sizing: border-box !important;
    }

    header .search-field {
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 10px !important;
        font-size: 16px !important;
    }

    header .search-submit,
    header .search-submit:hover {
        position: static !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .breadcrumb {
        width: calc(100% - (var(--ri-mobile-x) * 2)) !important;
        margin: 10px var(--ri-mobile-x) 18px var(--ri-mobile-x) !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    #category {
        width: calc(100% - (var(--ri-mobile-x) * 2)) !important;
        margin-left: var(--ri-mobile-x) !important;
        margin-right: var(--ri-mobile-x) !important;
        margin-bottom: 18px !important;
    }

    /* Mobile hero: crop the image bottom more aggressively to remove white stage space. */
    #slideshow,
    .flexslider-container,
    .flexslider,
    .flexslider .slides,
    .flexslider .slides > li {
        height: auto !important;
        max-height: none !important;
    }

    .flexslider .slides > li {
        aspect-ratio: 16 / 7.4 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .flexslider .slides > li > a,
    .flexslider .slides > li > a > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .flexslider .slides > li > a > img {
        object-fit: cover !important;
        object-position: center top !important;
        transform: scale(1.16) translateY(-2%) !important;
        transform-origin: center top !important;
    }

    .flex-caption {
        left: 12% !important;
        top: 13% !important;
        width: 42% !important;
        max-width: 210px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        padding: 9px !important;
    }

    .flex-caption .prod-name {
        font-size: 15px !important;
        line-height: 1.05 !important;
        margin-bottom: 5px !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-account-row {
        flex-wrap: wrap !important;
    }

    .mobile-phone-link,
    header #login-box,
    #login-box.six.columns.alpha.omega {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   RI Dental - Modern hero slider override v10
   Keep at bottom so it wins over older mobile slider patches.
   ============================================================ */

#slideshow,
.flexslider-container,
.ri-hero-slider-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.flexslider.ri-hero-slider,
.ri-hero-slider {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

.flexslider.ri-hero-slider .slides,
.flexslider.ri-hero-slider .slides > li,
.ri-hero-slider .slides,
.ri-hero-slider .slides > li {
    height: 100% !important;
    min-height: 0 !important;
}

.flexslider.ri-hero-slider .slides > li > a,
.flexslider.ri-hero-slider .slides > li > a > img,
.ri-hero-link,
.ri-hero-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.flexslider.ri-hero-slider .slides > li > a > img,
.ri-hero-image {
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media screen and (max-width: 768px) {
    .flexslider.ri-hero-slider,
    .ri-hero-slider {
        aspect-ratio: 16 / 8.2 !important;
    }

    .flexslider.ri-hero-slider .slides > li,
    .ri-hero-slide {
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .flexslider.ri-hero-slider .slides > li > a > img,
    .ri-hero-image {
        transform: scale(1.12) !important;
        object-position: center center !important;
    }
}
/* ============================================================
   RI Dental - v10 mobile gutter recovery
   ============================================================ */

@media screen and (max-width: 768px) {

    /* Restore consistent mobile side spacing */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Keep main content inside the same gutter */
    header.sixteen.columns,
    .breadcrumb,
    #category,
    #content,
    #slideshow,
    .flexslider-container,
    .flexslider {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Header children should use the gutter, not viewport edge */
    .site-logo-link,
    .mobile-account-row,
    header #form-search {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Search should no longer touch screen edges */
    header #form-search {
        margin-top: 10px !important;
        margin-bottom: 12px !important;
    }

    /* Categories should align with header/search */
    #category > ul {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Slider should sit inside the content gutter */
    #slideshow {
        margin-top: 18px !important;
    }

    .flexslider {
        overflow: hidden !important;
    }
}