/* ==========================================================================
   Superfit additions to the Labwareonline theme
   --------------------------------------------------------------------------
   The theme is a corporate/lab template. It ships no product listing, product
   detail, cart, checkout, login or account pages, so the components on this
   sheet fill those gaps.

   Everything here borrows the theme's own variables and idioms — its accent
   colour (--theme-color), its Afacad/Inter typography, its card radius and
   shadow language — so the additions read as native rather than bolted on.

   Loaded last, after responsive.css, so it can override where needed.
   ========================================================================== */

:root {
    --sf-border: #e6e9ef;
    --sf-muted: #6b7280;
    --sf-bg-soft: #f6f8fa;
    --sf-radius: 10px;
    --sf-shadow: 0 4px 18px rgba(16, 24, 40, .06);
    --sf-shadow-hover: 0 12px 30px rgba(16, 24, 40, .12);
}

/* --------------------------------------------------------------------------
   Header additions: cart indicator
   -------------------------------------------------------------------------- */

.header-cart {
    position: relative;
    display: inline-block;
}

.header-cart a {
    font-size: 18px;
    color: inherit;
    line-height: 1;
    transition: color .3s ease;
}

.header-cart a:hover {
    color: var(--theme-color, #0d6efd);
}

.header-cart .cart-count {
    position: absolute;
    top: -10px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--theme-color, #0d6efd);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.sf-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.sf-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-hover);
}

.sf-product-card__media {
    position: relative;
    display: block;
    padding: 18px;
    background: var(--sf-bg-soft);
    text-align: center;
}

.sf-product-card__media img {
    width: auto;
    max-width: 100%;
    height: 170px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sf-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 22px;
}

.sf-product-card__brand {
    margin-bottom: 6px;
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sf-product-card__title {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.4;
    /* Two-line clamp keeps a grid row even when names differ wildly in length,
       which they do: these run from "Rotavap" to 60-character descriptions. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-product-card__title a {
    color: inherit;
}

.sf-product-card__title a:hover {
    color: var(--theme-color, #0d6efd);
}

.sf-product-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sf-price {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
}

/* Most of the catalogue carries no price, so "on request" is a first-class
   state rather than an error case. */
.sf-price--request {
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-muted);
}

.sf-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sf-badge--featured {
    background: #fff4e5;
    color: #b26500;
}

.sf-badge--offline {
    background: #fdecea;
    color: #b3261e;
}

/* --------------------------------------------------------------------------
   Catalogue filter sidebar
   -------------------------------------------------------------------------- */

.sf-filters {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}

.sf-filters__group + .sf-filters__group {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--sf-border);
}

/* Contain floats so a floated child can never escape and overlap the next
   group's heading — which is exactly what the theme's nice-select did.
   A ::after clearfix rather than overflow:hidden, because the dropdown panel is
   absolutely positioned and must be allowed to overflow the group. */
.sf-filters__group::after {
    content: "";
    display: table;
    clear: both;
}

.sf-filters__title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sf-filters select,
.sf-filters input[type="text"],
.sf-filters input[type="search"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    font-size: 15px;
    color: #111827;
}

.sf-filters select:focus,
.sf-filters input:focus {
    border-color: var(--theme-color, #0d6efd);
    outline: none;
}

/* The theme runs $('select:not(.ignore)').niceSelect() in script.js, which hides
   every native <select> and replaces it with a .nice-select div. That div ships
   `float: left; width: auto`, so each dropdown shrank to its text width and the
   heading that followed it wrapped alongside instead of below.

   Rather than opt out with the plugin's `.ignore` class, the replacement is
   styled to match the other fields — the theme's own dropdowns use nice-select,
   so keeping it means the filters look native. */
.sf-filters .nice-select {
    float: none;
    width: 100%;
    height: 46px;
    line-height: 44px;
    padding-left: 14px;
    padding-right: 34px;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    font-size: 15px;
    color: #111827;
}

.sf-filters .nice-select:hover,
.sf-filters .nice-select:focus,
.sf-filters .nice-select.open {
    border-color: var(--theme-color, #0d6efd);
}

/* Full-width dropdown panel, and bounded so a long list (98 categories) scrolls
   rather than running off the page. */
.sf-filters .nice-select .list {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
}

.sf-filters .nice-select .option {
    line-height: 38px;
    min-height: 38px;
    padding-left: 14px;
    padding-right: 14px;
}

.sf-result-count {
    margin-bottom: 22px;
    color: var(--sf-muted);
    font-size: 15px;
}

/* Active filter chips — each removes just its own axis, so a shopper can undo
   one choice without clearing everything. */
.sf-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.sf-active-filters__label {
    color: var(--sf-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease;
}

.sf-chip:hover {
    border-color: #b3261e;
    color: #b3261e;
}

.sf-chip i {
    font-size: 11px;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.sf-gallery__main {
    padding: 30px;
    background: var(--sf-bg-soft);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    text-align: center;
}

.sf-gallery__main img {
    max-width: 100%;
    height: 380px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sf-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.sf-gallery__thumb {
    width: 78px;
    height: 78px;
    padding: 6px;
    background: var(--sf-bg-soft);
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .2s ease;
}

.sf-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sf-gallery__thumb.is-active,
.sf-gallery__thumb:hover {
    border-color: var(--theme-color, #0d6efd);
}

.sf-meta {
    width: 100%;
    margin: 22px 0;
    border-top: 1px solid var(--sf-border);
}

.sf-meta tr {
    border-bottom: 1px solid var(--sf-border);
}

.sf-meta th,
.sf-meta td {
    padding: 12px 0;
    font-size: 15px;
    vertical-align: top;
}

.sf-meta th {
    width: 160px;
    padding-right: 20px;
    color: var(--sf-muted);
    font-weight: 600;
}

/* The spec sheet is an HTML <table> blob authored in the admin WYSIWYG, so it
   needs defensive styling — it may arrive with no classes at all. */
.sf-spec-table {
    overflow-x: auto;
}

.sf-spec-table table {
    width: 100%;
    border-collapse: collapse;
}

.sf-spec-table th,
.sf-spec-table td {
    padding: 10px 14px;
    border: 1px solid var(--sf-border);
    font-size: 15px;
    text-align: left;
}

.sf-spec-table thead th,
.sf-spec-table tr:first-child td {
    background: var(--sf-bg-soft);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Panels, tables and forms shared by cart, checkout and account
   -------------------------------------------------------------------------- */

.sf-panel {
    padding: 30px;
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}

.sf-panel__title {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sf-border);
    font-size: 20px;
    font-weight: 700;
}

.sf-table {
    width: 100%;
    border-collapse: collapse;
}

.sf-table th,
.sf-table td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--sf-border);
    font-size: 15px;
    vertical-align: middle;
}

.sf-table thead th {
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sf-table tfoot th,
.sf-table tfoot td {
    border-bottom: none;
    font-weight: 700;
}

.sf-table__thumb {
    width: 62px;
    height: 62px;
    padding: 5px;
    background: var(--sf-bg-soft);
    border-radius: 6px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sf-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.sf-form input[type="text"],
.sf-form input[type="email"],
.sf-form input[type="tel"],
.sf-form input[type="password"],
.sf-form input[type="number"],
.sf-form input[type="search"],
.sf-form select,
.sf-form textarea {
    width: 100%;
    padding: 0 16px;
    height: 52px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    font-size: 15px;
    color: #111827;
    transition: border-color .2s ease;
}

.sf-form textarea {
    height: auto;
    padding: 14px 16px;
    resize: vertical;
}

.sf-form input:focus,
.sf-form select:focus,
.sf-form textarea:focus {
    border-color: var(--theme-color, #0d6efd);
    outline: none;
}

.sf-form .form-help {
    margin: -14px 0 18px;
    color: var(--sf-muted);
    font-size: 13px;
}

.sf-qty {
    width: 88px !important;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Order summary and totals
   -------------------------------------------------------------------------- */

.sf-summary {
    position: sticky;
    top: 100px;
}

.sf-totals {
    width: 100%;
}

.sf-totals th,
.sf-totals td {
    padding: 10px 0;
    font-size: 15px;
}

.sf-totals td {
    text-align: right;
}

.sf-totals th {
    text-align: left;
    color: var(--sf-muted);
    font-weight: 600;
}

.sf-totals .sf-totals__grand th,
.sf-totals .sf-totals__grand td {
    padding-top: 16px;
    border-top: 1px solid var(--sf-border);
    font-size: 19px;
    font-weight: 700;
    color: #111827;
}

/* --------------------------------------------------------------------------
   Account area
   -------------------------------------------------------------------------- */

.sf-account-nav {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    list-style: none;
    margin: 0;
}

.sf-account-nav li + li {
    margin-top: 4px;
}

.sf-account-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: 6px;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}

.sf-account-nav a:hover {
    background: var(--sf-bg-soft);
}

.sf-account-nav .is-active a {
    background: var(--theme-color, #0d6efd);
    color: #fff;
}

.sf-stat {
    padding: 26px;
    height: 100%;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    text-align: center;
}

.sf-stat__value {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--theme-color, #0d6efd);
}

.sf-stat__label {
    margin-top: 6px;
    color: var(--sf-muted);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.sf-empty {
    padding: 70px 30px;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--sf-border);
    border-radius: var(--sf-radius);
}

.sf-empty i {
    display: block;
    margin-bottom: 18px;
    font-size: 44px;
    color: #cbd5e1;
}

.sf-empty h4 {
    margin-bottom: 10px;
    font-size: 20px;
}

.sf-empty p {
    margin-bottom: 24px;
    color: var(--sf-muted);
}

/* --------------------------------------------------------------------------
   Pagination — Laravel's paginator emits Bootstrap markup
   -------------------------------------------------------------------------- */

.sf-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 0;
    margin: 40px 0 0;
    list-style: none;
}

.sf-pagination .page-link {
    display: block;
    min-width: 44px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    color: #374151;
    font-weight: 600;
    text-align: center;
}

.sf-pagination .page-item.active .page-link {
    background: var(--theme-color, #0d6efd);
    border-color: var(--theme-color, #0d6efd);
    color: #fff;
}

.sf-pagination .page-item.disabled .page-link {
    opacity: .45;
}

.sf-pagination svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.sf-section {
    padding: 80px 0;
}

.sf-section--tight {
    padding: 50px 0;
}

.d-none {
    display: none !important;
}

@media (max-width: 991px) {
    .sf-summary { position: static; }
    .sf-panel { padding: 22px; }
    .sf-gallery__main img { height: 280px; }
}

@media (max-width: 575px) {
    .sf-table thead { display: none; }

    .sf-table tr {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--sf-border);
    }

    .sf-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
        border: none;
        text-align: right;
    }

    /* data-label supplies the row header once the thead is hidden */
    .sf-table td::before {
        content: attr(data-label);
        color: var(--sf-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-align: left;
    }
}