/* New stock page – page-new-stock.php */

/* Tokens are shared by the stock page, single stock page and stock cards used across the site. */
.ns,
.ns-card,
.ns-jobmini,
.ns-viewall {
    --ns-black: var(--black, #1A1A1A);
    --ns-gold: var(--gold, #C79752);
    --ns-gold-soft: #f6efe4;
    --ns-red: var(--red, #D46767);
    --ns-line: #e3e3e3;
    --ns-muted: #6b6b6b;
    --ns-radius: 12px;
    --ns-ease: cubic-bezier(.22, .8, .26, 1);
}

.ns {
    padding: 40px 0 70px;
    color: var(--ns-black);
}

.ns *,
.ns *::before,
.ns *::after { box-sizing: border-box; }

.ns [hidden] { display: none !important; }

html.ns-locked,
html.ns-locked body { overflow: hidden; }

/* Head */

.ns-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ns-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 32px;
    margin: 0;
}

.ns-count {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ns-gold-soft);
    color: #8a6430;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ns-count:empty { display: none; }

.ns-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: var(--ns-muted);
}

.ns-sort select,
.ns-year select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--ns-line);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--ns-black);
    font-size: 14px;
    cursor: pointer;
}

/* Filter bar */

.ns-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(26, 26, 26, .06);
}

.ns-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
}

.ns-search > .fa-search {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ns-muted);
    font-size: 14px;
    pointer-events: none;
}

.ns-search input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 42px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f4f4f4;
    font-size: 15px;
    color: var(--ns-black);
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.ns-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ns-search input:focus {
    background: #fff;
    border-color: var(--ns-gold);
    box-shadow: 0 0 0 3px rgba(199, 151, 82, .18);
}

.ns-search__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ns-muted);
    cursor: pointer;
}

.ns-search__clear:hover { background: #e9e9e9; color: var(--ns-black); }

.ns-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Dropdown filters */

.ns-dd { position: relative; }

.ns-dd__btn,
.ns-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ns-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ns-black);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.ns-dd__btn .fa-chevron-down {
    font-size: 10px;
    color: var(--ns-muted);
    transition: transform .2s;
}

.ns-dd__btn:hover,
.ns-filters-btn:hover { border-color: var(--ns-black); }

.ns-dd.is-open .ns-dd__btn { border-color: var(--ns-black); }
.ns-dd.is-open .fa-chevron-down { transform: rotate(180deg); }

.ns-dd__btn.is-active {
    background: var(--ns-gold-soft);
    border-color: var(--ns-gold);
}

.ns-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ns-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.ns-dd__pop {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    width: 290px;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(26, 26, 26, .18);
    overflow: hidden;
    animation: ns-pop .18s var(--ns-ease);
}

.ns-dd--right .ns-dd__pop { left: auto; right: 0; }

@keyframes ns-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.ns-dd__search { padding: 12px 12px 4px; }

.ns-dd__search input {
    width: 100%;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ns-line);
    border-radius: 999px;
    font-size: 14px;
    outline: none;
}

.ns-dd__search input:focus { border-color: var(--ns-gold); }

.ns-dd__list {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

.ns-dd__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--ns-line);
    background: #fafafa;
}

/* Checkbox rows */

.ns-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px 8px calc(10px + var(--depth, 0) * 18px);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background .15s;
}

.ns-opt:hover { background: #f4f4f4; }

.ns-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ns-opt__box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #bdbdbd;
    border-radius: 5px;
    background: #fff;
    transition: background .15s, border-color .15s;
}

.ns-opt input:checked + .ns-opt__box {
    background: var(--ns-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    border-color: var(--ns-gold);
}

.ns-opt input:focus-visible + .ns-opt__box { box-shadow: 0 0 0 3px rgba(199, 151, 82, .35); }

.ns-opt__name { flex: 1; }

.ns-opt--child .ns-opt__name { color: #444; }

.ns-opt__count,
.ns-chip__count {
    color: var(--ns-muted);
    font-size: 12px;
}

.ns-opt.is-empty,
.ns-chip.is-empty { opacity: .4; }

.ns-opt.is-filtered-out { display: none; }

/* Year */

.ns-year {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 6px 4px;
}

.ns-year label {
    flex: 1;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ns-muted);
}

.ns-year label span { display: block; margin-bottom: 6px; }

.ns-year select { width: 100%; }

.ns-year__sep { padding-bottom: 10px; color: var(--ns-muted); }

/* Active pills */

.ns-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.ns-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--ns-gold);
    border-radius: 999px;
    background: var(--ns-gold-soft);
    color: var(--ns-black);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    animation: ns-pop .18s var(--ns-ease);
    transition: background .15s;
}

.ns-pill i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(26, 26, 26, .08);
    font-size: 10px;
    transition: background .15s, color .15s;
}

.ns-pill:hover i {
    background: var(--ns-black);
    color: #fff;
}

.ns-link {
    border: 0;
    background: none;
    padding: 4px 6px;
    color: var(--ns-black);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ns-link:hover { color: var(--ns-gold); }

/* Buttons */

.ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .1s;
}

.ns-btn:active { transform: scale(.98); }

.ns-btn--gold { background: var(--ns-gold); color: #fff !important; }
.ns-btn--gold:hover { background: #b5843f; }

.ns-btn--dark { background: var(--ns-black); color: #fff !important; }
.ns-btn--dark:hover { background: #333; }

.ns-btn--ghost { background: #fff; border-color: var(--ns-line); color: var(--ns-black) !important; }
.ns-btn--ghost:hover { border-color: var(--ns-black); }

.ns-btn--sm { height: 34px; padding: 0 16px; font-size: 13px; }

.ns-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: var(--ns-black);
    font-size: 16px;
    cursor: pointer;
    transition: background .15s;
}

.ns-icon-btn:hover { background: #e2e2e2; }

.ns-filters-btn { display: none; }

/* Grid + cards (same look as the existing stock cards, rounded) */

.ns-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 28px;
}

.ns-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: var(--ns-radius);
    background: var(--ns-black);
    color: #fff;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(26, 26, 26, .08);
    transform: translateZ(0);
    transition: transform .3s var(--ns-ease), box-shadow .3s var(--ns-ease);
}

.ns-card:hover,
.ns-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(26, 26, 26, .22);
    color: #fff;
}

.ns-card:focus-visible { outline: 3px solid var(--ns-gold); outline-offset: 3px; }

.ns-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ns-black); /* same as the card, so a sub-pixel gap on hover can't show a lighter line */
}

.ns-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ns-ease);
}

.ns-card__img--none {
    background: #2a2a2a url("../../images/logo.svg") no-repeat center / 40% auto;
    opacity: .25;
}

.ns-card:hover .ns-card__img { transform: scale(1.04); }

.ns-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 18px 14px;
    background: linear-gradient(0deg, rgba(26, 26, 26, 1) 0%, rgba(26, 26, 26, .85) 30%, rgba(26, 26, 26, 0) 100%);
}

.ns-type {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--ns-red);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.ns-card__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

/* Doubled class so the theme's ".stock_slider h3" (32px + rule line) can't override it in carousels. */
.ns-card .ns-card__title {
    position: static;
    margin: 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ns-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--ns-gold);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.ns-loc img {
    display: block;
    flex: 0 0 auto;
    width: auto !important;
    height: 14px !important;
    max-width: none;
    object-fit: contain;
}

.ns-card__specs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 4px 18px 18px;
    list-style: none;
    font-size: 12px;
}

.ns-card__specs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 0 0;
    margin-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.ns-card__specs li:last-child { border-right: 0; margin-right: 0; }

/* Fixed size so icons can't be squashed: owl forces "img { width: 100% }" in carousels,
   and flex would shrink them when a spec's text is long. */
.ns-card .ns-card__specs img {
    display: block;
    flex: 0 0 auto;
    width: auto !important;
    height: 20px !important;
    max-width: none;
    object-fit: contain;
}

.ns-card .ns-card__title::after { display: none; }

.ns-card__price {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 9px 14px 8px;
    border-bottom-left-radius: var(--ns-radius);
    background: var(--ns-red);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
}

.ns-card__price small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    opacity: .9;
}

.ns-ribbon {
    position: absolute;
    z-index: 2;
    top: 26px;
    left: -58px;
    width: 200px;
    padding: 5px;
    transform: rotate(-45deg);
    background: var(--ns-gold);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.ns-ribbon--reserved { background: #ff8300; }
.ns-ribbon--sold { background: var(--ns-red); }

/* Empty + more */

.ns-empty {
    margin-top: 28px;
    padding: 60px 20px;
    border: 1px dashed #cfcfcf;
    border-radius: 16px;
    text-align: center;
}

.ns-empty h3 { margin: 0 0 8px; font-size: 22px; }
.ns-empty p { margin: 0 0 22px; color: var(--ns-muted); }

.ns-more {
    margin-top: 40px;
    text-align: center;
}

/* Overlays */

.ns-drawer,
.ns-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(26, 26, 26, 0);
    transition: background .35s var(--ns-ease);
}

.ns-drawer.is-open,
.ns-sheet.is-open { background: rgba(26, 26, 26, .55); }

/* Drawer – slides in from the right */

.ns-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    background: #fff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .25);
    transform: translateX(100%);
    transition: transform .4s var(--ns-ease);
}

.ns-drawer.is-open .ns-drawer__panel { transform: none; }

.ns-drawer__close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.ns-drawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ns-drawer__foot {
    display: flex;
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ns-line);
    background: #fff;
}

.ns-drawer__foot .ns-btn { flex: 1; }

/* Gallery */

.ns-d__gallery {
    position: relative;
    overflow: hidden;
    background: var(--ns-black);
}

.ns-gal { position: relative; }

.ns-gal--empty { aspect-ratio: 4 / 3; }

.ns-gal__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    aspect-ratio: 4 / 3;
}

.ns-gal__track::-webkit-scrollbar { display: none; }

.ns-gal__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background: #111;
}

.ns-gal__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ns-gal__nav {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--ns-black);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    transition: background .15s, transform .15s;
}

.ns-gal__nav:hover { background: #fff; transform: scale(1.06); }
.ns-gal__nav--prev { left: 14px; }
.ns-gal__nav--next { right: 14px; }

.ns-gal__count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(26, 26, 26, .7);
    color: #fff;
    font-size: 12px;
}

.ns-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    overflow-x: auto;
    background: #fff;
    border-bottom: 1px solid var(--ns-line);
    scrollbar-width: thin;
}

.ns-thumbs__btn {
    flex: 0 0 72px;
    height: 54px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    opacity: .6;
    cursor: pointer;
    transition: opacity .15s, border-color .15s;
}

.ns-thumbs__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-thumbs__btn:hover { opacity: 1; }
.ns-thumbs__btn.is-active { opacity: 1; border-color: var(--ns-gold); }

/* Drawer content */

.ns-d { padding: 22px 24px 28px; }

.ns-d__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ns-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #e9f4ea;
    color: #1f6b2a;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.ns-status--reserved { background: #fff0e2; color: #b45a00; }
.ns-status--sold { background: #fbe9e9; color: #a83a3a; }
.ns-status--on-order { background: #eef1fb; color: #3a4ea8; }

.ns-d__title {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
}

.ns-d__sub {
    margin: 0 0 16px;
    color: var(--ns-muted);
    font-size: 14px;
}

.ns-d__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: var(--ns-radius);
    background: #fbeeee;
}

.ns-d__price strong { font-size: 26px; color: var(--ns-red); line-height: 1; }
.ns-d__price span { font-size: 13px; color: var(--ns-muted); }

.ns-d__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.ns-d__specs li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
}

.ns-d__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
}

.ns-d__icon img { width: 20px; height: 20px; object-fit: contain; }

.ns-d__specs small {
    display: block;
    color: var(--ns-muted);
    font-size: 12px;
}

.ns-d__specs strong {
    display: block;
    font-size: 14px;
    word-break: break-word;
}

.ns-d__section h4,
.ns-d__depot h4 {
    margin: 0 0 10px;
    font-size: 17px;
}

.ns-d__content {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

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

.ns-d__brochure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-weight: 600;
}

.ns-d__depot {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: var(--ns-radius);
    background: #f5f5f5;
}

.ns-d__depot a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: var(--ns-black);
    font-size: 15px;
}

.ns-d__depot a i { color: var(--ns-gold); width: 16px; }

.ns-muted { color: var(--ns-muted); }

.ns-skel {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 0%, #f6f6f6 50%, #eee 100%);
    background-size: 200% 100%;
    animation: ns-shimmer 1.2s linear infinite;
}

.ns-skel--short { width: 60%; }

@keyframes ns-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Mobile filter sheet – slides up */

.ns-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
    transform: translateY(100%);
    transition: transform .4s var(--ns-ease);
}

.ns-sheet.is-open .ns-sheet__panel { transform: none; }

.ns-sheet__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 12px;
    border-bottom: 1px solid var(--ns-line);
}

.ns-sheet__head::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: #d6d6d6;
}

.ns-sheet__head h3 { margin: 0; font-size: 20px; }

.ns-sheet__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 20px;
}

.ns-sheet__foot {
    display: flex;
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ns-line);
}

.ns-sheet__foot .ns-btn--gold { flex: 1; }

.ns-acc { border-bottom: 1px solid var(--ns-line); }

.ns-acc summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.ns-acc summary::-webkit-details-marker { display: none; }
.ns-acc summary > span:first-child { flex: 1; }
.ns-acc summary .fa-chevron-down { font-size: 12px; transition: transform .2s; }
.ns-acc[open] summary .fa-chevron-down { transform: rotate(180deg); }

.ns-acc__body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 18px;
}

.ns-acc__body .ns-year { width: 100%; padding: 0; }

.ns-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ns-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ns-black);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ns-chip[aria-pressed="true"] {
    background: var(--ns-black);
    border-color: var(--ns-black);
    color: #fff;
}

.ns-chip[aria-pressed="true"] .ns-chip__count { color: rgba(255, 255, 255, .7); }

.ns-chip--child { font-size: 13px; }

/* Responsive */

@media (max-width: 1199px) {
    .ns-grid { gap: 22px; }
    .ns-card__title { font-size: 17px; }
}

@media (max-width: 991px) {
    .ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ns-search { flex-basis: 100%; }
}

@media (max-width: 767px) {
    .ns { padding: 24px 0 50px; }

    .ns-head { flex-wrap: wrap; margin-bottom: 14px; }
    .ns-title { font-size: 26px; gap: 10px; }
    .ns-count { height: 26px; padding: 0 11px; font-size: 13px; }

    .ns-bar {
        flex-wrap: nowrap;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .ns-search { flex: 1 1 auto; min-width: 0; }
    .ns-filters { display: none; }
    .ns-filters-btn { display: inline-flex; flex: 0 0 auto; }

    .ns-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 12px -15px 0;
        padding: 0 15px 4px;
        scrollbar-width: none;
    }

    .ns-pills::-webkit-scrollbar { display: none; }
    .ns-pill, .ns-pills__clear { flex: 0 0 auto; }

    .ns-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-top: 18px;
    }

    /* Item takes the full screen width */
    .ns-drawer__panel { width: 100%; box-shadow: none; }
    .ns-d { padding: 18px 16px 24px; }
    .ns-d__title { font-size: 22px; }
    .ns-drawer__foot { padding-left: 16px; padding-right: 16px; }
    .ns-gal__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ns *,
    .ns *::before,
    .ns *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ------------------------------------------------------------------
   Stock cards in carousels/grids around the site (hrg_stock_card)
------------------------------------------------------------------ */

/* Equal height cards: owl floats its items, so make the stage a flex row and stretch each card. */
.stock-carousel .owl-stage,
.post-carousel .owl-stage,
.job-carousel .owl-stage {
    display: flex;
}

.stock-carousel .owl-item,
.post-carousel .owl-item,
.job-carousel .owl-item {
    display: flex;
    flex: 0 0 auto;
}

.stock-carousel .owl-item > .ns-card,
.job-carousel .owl-item > .card {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}

/* Specs sit on the bottom edge whatever the title length. */
.ns-card__specs { margin-top: auto !important; }

/* Owl clips its stage. Pad the clipping box (and pull it back with negative margins)
   so the hover lift + shadow fit. 14px sideways stays inside owl's 15px item gap,
   so neighbouring slides never peek in. */
.stock-carousel .owl-stage-outer,
.job-carousel .owl-stage-outer {
    /* Padding only on top: a positive top margin would collapse through and push the
       whole carousel (and its absolutely positioned arrows) down. */
    padding: 24px 14px 34px;
    margin: 0 -14px -34px;
}

/* Tighter shadow in carousels so it doesn't spread wider than that padding. */
.stock-carousel .ns-card:hover,
.stock-carousel .ns-card:focus-visible,
.post-carousel .ns-card:hover,
.post-carousel .ns-card:focus-visible {
    box-shadow: 0 16px 20px -10px rgba(26, 26, 26, .4);
}

.owl-carousel .ns-card__img { width: 100%; }

.ns-viewall {
    margin-top: 18px;
    text-align: center;
}

.ns-viewall .ns-btn i { font-size: 13px; }

/* ------------------------------------------------------------------
   Single stock page (single-stock.php)
------------------------------------------------------------------ */

.ns-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: start;
}

.ns-single__gallery {
    position: relative;
    overflow: hidden;
}

.ns-single__gallery .ns-gal {
    overflow: hidden;
    border-radius: 16px;
    background: #f3f3f3;
}

.ns-single__gallery .ns-gal__slide { background: #f3f3f3; }

.ns-single__gallery .ns-thumbs {
    padding: 12px;
    border-bottom: 0;
    background: #fff;
}

.ns-single__card {
    margin-top: 28px;
    padding: 26px 28px;
    border: 1px solid var(--ns-line);
    border-radius: 16px;
    background: #fff;
}

.ns-single__card h3 {
    margin: 0 0 14px;
    font-size: 20px;
}

.ns-single__reqs {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ns-line);
    font-size: 15px;
    line-height: 1.6;
}

.ns-single__reqs ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-single__reqs li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ns-single__reqs li:last-child { border-bottom: 0; }

.ns-single__side { align-self: stretch; }

.ns-single__sticky {
    position: sticky;
    top: 24px;
}

.ns-single .ns-d__title {
    font-size: 30px;
    margin-bottom: 8px;
}

.ns-single__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.ns-single__ctas .ns-btn--gold { flex: 1 1 100%; }
.ns-single__ctas .ns-btn--ghost { flex: 1 1 0; }

.ns-single__share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ns-line);
    font-weight: 600;
}

.ns-single__share .socials {
    display: flex;
    gap: 8px;
    margin: 0;
    float: none;
}

.ns-single__share .socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    background: #f0f0f0;
    color: var(--ns-black);
    font-size: 16px;
    transition: background .15s, color .15s;
}

.ns-single__share .socials a:hover {
    background: var(--ns-gold);
    color: #fff;
}

.ns-single__bar { display: none; }

/* Related stock under the single page */
.related_slider { padding-top: 10px; }

@media (max-width: 991px) {
    .ns-single__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ns-single__side { order: -1; }
    .ns-single__main { display: contents; }
    .ns-single__gallery { order: -2; }
    .ns-single__desc { order: 0; margin-top: 0; }
    .ns-single__sticky { position: static; }
}

@media (max-width: 767px) {
    .ns-single { padding-bottom: 100px; }
    .ns-single__gallery { margin: 0 -15px; }
    .ns-single__gallery .ns-gal { border-radius: 0; }
    .ns-single .ns-d__title { font-size: 24px; }
    .ns-single__card { padding: 20px 18px; }

    /* Enquire / Call always in reach */
    .ns-single__bar {
        position: fixed;
        z-index: 9000;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -6px 24px rgba(26, 26, 26, .12);
    }

    .ns-single__bar .ns-btn { flex: 1; height: 46px; }
}

@media print {
    .ns-single__bar,
    .ns-single__share,
    .ns-single__ctas,
    .ns-gal__nav,
    .ns-thumbs { display: none !important; }
    .ns-single__grid { display: block; }
    .ns-single__sticky { position: static; }
}

/* ------------------------------------------------------------------
   Footer brand logo carousel (inc/footer-brands.php)
   Same height for every logo, width follows each logo's shape.
------------------------------------------------------------------ */

.brand_logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
    padding: 15px 12px;
}

.brand_logos li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.brand_logos li img,
.brand_logos img.massey,
.brand_logos img.jcb {
    position: static;
    top: auto;
    height: 56px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
    transition: transform .25s ease;
}

.brand_logos li a:hover img { transform: scale(1.05); }

@media (max-width: 767px) {
    .brand_logos li { height: 70px; padding: 10px 8px; }
    .brand_logos li img { height: 46px !important; }
}

/* ------------------------------------------------------------------
   Single stock lightbox (single-stock.js)
------------------------------------------------------------------ */

.ns-single__gallery .ns-gal__slide { cursor: zoom-in; }

.ns-gal__zoom {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #1A1A1A;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    transition: transform .15s, background .15s;
}

.ns-gal__zoom:hover { background: #fff; transform: scale(1.06); }

.ns-lb {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    background: rgba(12, 12, 12, .97);
    color: #fff;
    opacity: 0;
    transition: opacity .25s ease;
}

.ns-lb.is-open { opacity: 1; }
.ns-lb[hidden] { display: none; }

.ns-lb__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
}

.ns-lb__count { font-size: 14px; opacity: .8; }

.ns-lb__close,
.ns-lb__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background .15s;
}

.ns-lb__close:hover,
.ns-lb__nav:hover { background: rgba(255, 255, 255, .25); }

.ns-lb__track {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.ns-lb__track::-webkit-scrollbar { display: none; }

.ns-lb__slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 76px;
    scroll-snap-align: start;
}

.ns-lb__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.ns-lb__nav {
    position: absolute;
    top: 50%;
    margin-top: -23px;
}

.ns-lb__nav--prev { left: 16px; }
.ns-lb__nav--next { right: 16px; }

.ns-lb__thumbs {
    display: flex;
    justify-content: safe center;
    gap: 8px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    overflow-x: auto;
    scrollbar-width: none;
}

.ns-lb__thumb {
    flex: 0 0 64px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #222;
    opacity: .5;
    cursor: pointer;
    transition: opacity .15s, border-color .15s;
}

.ns-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-lb__thumb:hover { opacity: .85; }
.ns-lb__thumb.is-active { opacity: 1; border-color: #C79752; }

@media (max-width: 767px) {
    .ns-lb__slide { padding: 0; }
    .ns-lb__slide img { border-radius: 0; }
    .ns-lb__nav { display: none; }
    .ns-gal__zoom { top: 10px; right: 10px; width: 36px; height: 36px; }
}


/* ------------------------------------------------------------------
   Blog + job cards (cpt/cards.php) – same family as the stock cards
------------------------------------------------------------------ */

.ns-post__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #2a2a2a;
}

.ns-post__media::after {
    content: "";
    position: absolute;
    inset: 50% 0 0;
    background: linear-gradient(0deg, rgba(26, 26, 26, .75), rgba(26, 26, 26, 0));
    pointer-events: none;
}

.ns-badges {
    position: absolute;
    z-index: 1;
    left: 18px;
    bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ns-post__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.ns-post__date {
    margin-bottom: 8px;
    color: var(--ns-gold);
    font-size: 13px;
    font-weight: 500;
}

/* Doubled class so section styles like ".latest_news h3" can't override it. */
.ns-post .ns-post__title {
    position: static;
    margin: 0 0 16px;
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ns-post .ns-post__title::after { display: none; }

.ns-post__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--ns-gold);
    font-size: 14px;
    font-weight: 600;
}

.ns-post__more i {
    font-size: 12px;
    transition: transform .25s var(--ns-ease);
}

.ns-card:hover .ns-post__more i,
.ns-jobmini:hover .ns-post__more i { transform: translateX(4px); }

/* Job card extras */
.ns-job .ns-post__media { aspect-ratio: 4 / 3; }

.ns-job__where {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--ns-gold);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.ns-job__where i { margin-top: 2px; }

/* Grids: equal heights, cards fill their column (filter/pagination JS still shows/hides the columns) */
.latest_news .post-grid,
.job_grid {
    display: flex;
    flex-wrap: wrap;
}

.latest_news .post-grid > .col-md-4,
.job_grid > .col-md-4 {
    float: none;
    margin-bottom: 30px;
}

.latest_news .post-grid > .col-md-4 > .ns-card,
.job_grid > .col-md-4 > .ns-card {
    width: 100%;
}

@media (min-width: 992px) {
    .latest_news .post-grid > .col-md-4,
    .job_grid > .col-md-4 { display: flex; }
}

/* Home page job carousel – light cards beside the big image */
.job-carousel .card {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.ns-jobmini {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: #fff;
    color: var(--ns-black);
    text-decoration: none !important;
    transition: border-color .25s, box-shadow .25s, transform .3s var(--ns-ease);
}

.ns-jobmini:hover {
    border-color: var(--ns-gold);
    color: var(--ns-black);
    transform: translateY(-3px);
    box-shadow: 0 16px 20px -10px rgba(26, 26, 26, .25);
}

.ns-jobmini .ns-badges {
    position: static;
    margin-bottom: 12px;
}

.ns-jobmini .ns-jobmini__title {
    margin: 0 0 8px;
    color: var(--ns-black);
    font-size: 18px;
    line-height: 1.3;
}

.ns-jobmini .ns-jobmini__title::after { display: none; }

.ns-jobmini__text {
    margin: 0 0 14px;
    color: var(--ns-muted);
    font-size: 14px;
    line-height: 1.5;
}

.ns-jobmini .ns-post__more { color: var(--ns-black); }
.ns-jobmini:hover .ns-post__more { color: var(--ns-gold); }

/* The news carousels run with no gap between slides (margin: 0 in app.js), so the gap
   lives inside each slide and only top/bottom room is added for the hover shadow. */
.post-carousel .owl-stage-outer {
    padding: 24px 0 34px;
    margin: 0 0 -34px;
}

.post-carousel .owl-item > .ns-card {
    flex: 1 1 auto;
    width: auto;
    margin: 0 10px;
}

/* ------------------------------------------------------------------
   Single job page (single-job.php) – built on the single stock layout
------------------------------------------------------------------ */

.ns-d__tags .ns-badges { position: static; }

.ns-jobpage__media {
    overflow: hidden;
    border-radius: 16px;
    background: #f3f3f3;
}

.ns-jobpage__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.ns-jobpage__media--video {
    position: relative;
    aspect-ratio: 16 / 9;
}

/* Pinned to the 16:9 box. Something on the live site caps embeds at max-height: 200px,
   which cropped the video – override it. */
.ns-jobpage__media--video iframe,
.ns-jobpage__media--video video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    border: 0;
}

.ns-jobpage__content > *:first-child { margin-top: 0; }

.ns-jobpage__content h2,
.ns-jobpage__content h3,
.ns-single__reqs h3 {
    margin: 28px 0 12px;
    font-size: 21px;
}

.ns-jobpage__content h4 { margin: 20px 0 8px; font-size: 16px; }

.ns-jobpage__content ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.ns-jobpage__content ul li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
}

.ns-jobpage__content ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ns-gold);
}

.ns-jobpage__content p { margin: 0 0 14px; }

.ns-jobpage__where { margin: 14px 0 22px; }

.ns-jobpage__label {
    display: block;
    margin-bottom: 8px;
    color: var(--ns-muted);
    font-size: 13px;
    font-weight: 500;
}

.ns-jobpage__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ns-chip--static {
    height: 34px;
    gap: 7px;
    cursor: default;
    font-size: 13px;
    font-weight: 500;
}

.ns-chip--static i { color: var(--ns-gold); font-size: 12px; }

.ns-jobpage .ns-single__ctas .ns-btn--ghost { flex: 1 1 100%; }

.ns-jobpage__note p {
    margin: 0;
    color: #444;
    font-size: 14px;
    line-height: 1.55;
}

.ns-jobpage__note a {
    display: inline;
    padding: 0;
    color: var(--ns-gold);
    font-size: inherit;
    font-weight: 600;
}

/* Benefits */
.ns-benefits { margin-top: 64px; }

.ns-benefits > h3 {
    margin: 0 0 22px;
    font-size: 28px;
}

.ns-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ns-benefit {
    padding: 22px;
    border: 1px solid var(--ns-line);
    border-radius: 16px;
    background: #fff;
}

.ns-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #f0f0f0;
}

.ns-benefit__icon img { width: 28px; height: 28px; object-fit: contain; }

.ns-benefit h4 { margin: 0 0 8px; font-size: 17px; }

.ns-benefit p {
    margin: 0;
    color: var(--ns-muted);
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 991px) {
    .ns-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .ns-jobpage__media { margin: 0 -15px; border-radius: 0; }
    .ns-benefits { margin-top: 44px; }
    .ns-benefits__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ------------------------------------------------------------------
   Light variant for blog + job cards
------------------------------------------------------------------ */

.ns-card.ns-post {
    background: #fff;
    color: var(--ns-black);
    box-shadow: 0 8px 22px -8px rgba(26, 26, 26, .18);
}

.ns-card.ns-post:hover,
.ns-card.ns-post:focus-visible {
    color: var(--ns-black);
    box-shadow: 0 18px 30px -12px rgba(26, 26, 26, .28);
}

.ns-post__media::after {
    inset: 60% 0 0;
    background: linear-gradient(0deg, rgba(26, 26, 26, .45), rgba(26, 26, 26, 0));
}

.ns-post .ns-post__title { color: var(--ns-black); }

.ns-post__date { color: var(--ns-gold); }

.ns-post .ns-post__more { color: var(--ns-black); }
.ns-post:hover .ns-post__more { color: var(--ns-gold); }

/* Carousels clip their stage – keep the shadow inside the 10px slide gutter. */
.post-carousel .ns-card.ns-post {
    box-shadow: 0 8px 16px -6px rgba(26, 26, 26, .18);
}

.post-carousel .ns-card.ns-post:hover,
.post-carousel .ns-card.ns-post:focus-visible {
    box-shadow: 0 16px 20px -10px rgba(26, 26, 26, .3);
}

/* Home job carousel: no border or shadow – a soft grey panel so the cards still read on the white section */
.ns-jobmini,
.ns-jobmini:hover {
    border: 0;
    box-shadow: none;
}

.ns-jobmini { background: #f4f4f4; }
.ns-jobmini:hover { background: #ececec; }

/* ------------------------------------------------------------------
   "Brands We Work With" carousel (inc/brand-loop.php) – rounded to match the cards
------------------------------------------------------------------ */

.brands .card_back {
    border-radius: var(--ns-radius, 12px);
    transform: translateZ(0); /* keeps the rounded clip crisp in Safari */
}

.brands .card_back .overlay {
    border-radius: inherit;
}

/* Logo panel: breathing room inside, and lifted in from the card edges. */
.brands .overlay img {
    box-sizing: border-box;
    width: 160px !important;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45);
}

/* Inset as padding on the wrapper (a margin on the img collapsed out of the overlay
   and left a pale strip under the gradient). */
.brands .overlay > div { padding: 0 0 18px 18px; }

/* Arrow sits on the same line as the logo panel. */
.brands .overlay .fas {
    bottom: 41px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 16px;
    transition: background .2s;
}

.brands a:hover .overlay .fas { background: var(--gold, #C79752); }

/* ------------------------------------------------------------------
   Team cards – depot pages + about page (inc/team-loop*.php)
   Rounded photo, floating info panel, smooth slide-up for contact details.
------------------------------------------------------------------ */

.team .team_card {
    border-radius: 12px;
    overflow: hidden;
}

/* Doubled class to match the theme's ".page-template-page-about .team .card_hover .extra_info". */
.team .card_hover .extra_info.extra_info {
    left: 15px;   /* full width of the photo */
    right: 15px;
    bottom: 0;
    padding: 14px 16px 6px;
    border-radius: 12px;
    box-shadow: 0 10px 24px -10px rgba(26, 26, 26, .3);
    transition: box-shadow .35s ease;
}

.team .card_hover .extra_info h4 { margin: 0; }

/* Grid-rows trick: animates from 0 to the content's natural height (display:none can't animate). */
.team .card_hover .extra_info .toggle {
    display: grid !important;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .4s cubic-bezier(.22, .8, .26, 1), opacity .3s ease;
}

.team .card_hover .extra_info .toggle > .team_cta {
    min-height: 0;
    overflow: hidden;
    margin: 0;
}

.team .card_hover .extra_info .team_cta br { display: none; }

.team .card_hover .extra_info .team_cta a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}

.team .card_hover .extra_info .team_cta a:last-of-type {
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.team .card_hover .extra_info .team_cta a:last-of-type i { margin-top: 3px; }

/* Long addresses break only after the @ (see <wbr> in inc/team-loop*.php). */
.team .card_hover .extra_info .team_cta a:last-of-type .ns-email { overflow-wrap: normal; word-break: keep-all; }

/* Open on hover anywhere on the card, or when tabbed into / tapped. */
.team .card_hover:hover .extra_info .toggle,
.team .card_hover:focus-within .extra_info .toggle {
    grid-template-rows: 1fr;
    opacity: 1;
}

.team .card_hover:hover .extra_info,
.team .card_hover:focus-within .extra_info {
    box-shadow: 0 16px 30px -12px rgba(26, 26, 26, .4);
}

@media (prefers-reduced-motion: reduce) {
    .team .card_hover .extra_info .toggle { transition: none; }
}

/* ------------------------------------------------------------------
   "Telling Our Story" (inc/our-stories.php + story.js)
------------------------------------------------------------------ */

.ns-story {
    --ns-gold: var(--gold, #C79752);
    position: relative;
}

.ns-story__controls {
    position: absolute;
    top: -62px;
    right: 15px;
    display: flex;
    gap: 8px;
}

.ns-story__btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--ns-gold);
    color: #fff;
    cursor: pointer;
    transition: background .2s, opacity .2s, transform .15s;
}

.ns-story__btn:hover { background: #1A1A1A; }
.ns-story__btn:active { transform: scale(.94); }
.ns-story__btn[disabled] { opacity: .35; cursor: default; background: var(--ns-gold); }

/* Full-bleed: the track spans the whole viewport, the first card lines up with the
   heading, and cards slide off both edges of the page. --ns-bleed = gap between the
   container column and the screen edge. */
/* story.js sets --ns-left/--ns-right to the measured gaps (100vw counts the scrollbar on Windows). */
.ns-story__track {
    display: flex;
    gap: 28px;
    margin: 0 calc(var(--ns-right, calc((100vw - 100%) / 2)) * -1) 0 calc(var(--ns-left, calc((100vw - 100%) / 2)) * -1);
    padding: 6px calc(var(--ns-right, calc((100vw - 100%) / 2)) + 15px) 10px calc(var(--ns-left, calc((100vw - 100%) / 2)) + 15px);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: calc(var(--ns-left, calc((100vw - 100%) / 2)) + 15px);
    scrollbar-width: none;
    cursor: grab;
}

.ns-story__track::-webkit-scrollbar { display: none; }
.ns-story__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ns-story__track.is-dragging * { pointer-events: none; user-select: none; }

.ns-story__item {
    flex: 0 0 400px;
    scroll-snap-align: start;
}

.ns-story__item--feature { flex-basis: 600px; }

.ns-story__card {
    position: relative;
    height: 440px;
    overflow: hidden;
    border-radius: 16px;
    background: #1A1A1A;
    box-shadow: 0 14px 30px -16px rgba(26, 26, 26, .45);
    transform: translateZ(0);
}

.ns-story__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, .8, .26, 1);
}

.ns-story__card:hover .ns-story__img { transform: scale(1.04); }

.ns-story__card::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(0deg, rgba(26, 26, 26, .92) 0%, rgba(26, 26, 26, 0) 100%);
}

.ns-story__logo {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    max-width: 62%;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .4);
}

.ns-story__logo img { display: block; width: 100%; height: auto; max-height: 64px; object-fit: contain; }

.ns-story__info {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    bottom: 22px;
}

.ns-story__year-pill {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ns-gold);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
}

.ns-story .ns-story__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.ns-story .ns-story__title::after { display: none; }

/* Timeline – one segment per item, so nodes always sit under their card. */
.ns-story__node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    margin-top: 18px;
}

.ns-story__node::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: -28px; /* bridge the gap to the next item */
    height: 3px;
    margin-top: -1.5px;
    background: var(--ns-gold);
    opacity: .35;
}

.ns-story__item:last-child .ns-story__node::before { right: 0; }

.ns-story__diamond {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    border: 3px solid var(--ns-gold);
    border-radius: 5px;
    background: #fff;
    transform: rotate(45deg);
    transition: background .3s, transform .3s;
}

.ns-story__year {
    position: relative;
    z-index: 1;
    padding: 2px 10px;
    background: #fff;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 700;
}

.ns-story__item.is-active .ns-story__diamond {
    background: var(--ns-gold);
    transform: rotate(45deg) scale(1.15);
}

.ns-story__item.is-active .ns-story__year { color: var(--ns-gold); }

@media (max-width: 991px) {
    .ns-story__item { flex-basis: 320px; }
    .ns-story__item--feature { flex-basis: 440px; }
    .ns-story__card { height: 360px; }
}


/* Hover seam: keep the lifting card on one GPU layer and stop the photo 1px short of the
   bottom edge, so Chrome's sub-pixel rounding during the lift can't reveal a line. */
.ns-card {
    backface-visibility: hidden;
    will-change: transform;
}

.ns-card:not(.ns-post) .ns-card__img { bottom: 1px; height: calc(100% - 1px); }

.ns-card__overlay { bottom: -1px; }

/* ------------------------------------------------------------------
   Header top bar on mobile/tablet: menu icon left, Stock button right
------------------------------------------------------------------ */

@media (max-width: 1199px) {
    .top_head .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .top_head .row::before,
    .top_head .row::after { display: none; } /* Bootstrap clearfix would take up flex slots */

    .top_head .row > .cta {
        width: auto;
        margin-left: auto;
        float: none;
        text-align: right;
    }
}

/* Tablet showed both header Stock links side by side – keep just the gold button. */
@media (min-width: 768px) and (max-width: 1199px) {
    .top_head .hidemob_tab { display: none !important; }
}