/**
 * North Bay Trading Co. — Hyvä Theme
 *
 * Uses Hyva's CSS custom property system throughout.
 * Hardcoded hex values only where no Hyva variable exists.
 */

/* --------------------------------------------------------------------------
   1. Google Fonts
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Bitter:wght@400;700&display=swap');

/* --------------------------------------------------------------------------
   2. Design Tokens
   Extends/overrides Hyva's @theme layer so every Tailwind utility and
   every rule below automatically picks up brand values.
   -------------------------------------------------------------------------- */
:root, :host {
    /* Brand palette */
    --color-primary:          #602432;
    --color-primary-lighter:  #7d2f42;
    --color-primary-darker:   #4e1d28;
    --color-on-primary:       #ffffff;

    /* Link colors (not in Hyva's token set) */
    --nbt-color-link:         #453012;
    --nbt-color-link-visited: #521733;

    /* Single source of truth for page container width.
       Caps at 1760px on huge monitors, scales to 95% of viewport on
       smaller laptops — no horizontal scrollbar at any size. */
    --nbt-page-width: min(1760px, 95vw);

    /* Shared subtle background */
    --nbt-bg-subtle: #f9f9f9;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
html {
    font-size: 81.25%; /* 1rem = 13px, matching northbaytrading.com */
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: #555;
}

h1, h2, h3 {
    font-family: 'Bitter', serif;
    color: var(--color-primary);
}

h4, h5, h6 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

body h1 { font-size: 2rem; font-weight: 700; }
body h2 { font-size: 1.5rem; font-weight: 700; }
body h3 { font-size: 1.25rem; font-weight: 700; }
body h4 { font-size: 1.1rem; font-weight: 600; }

a {
    color: var(--nbt-color-link);
    text-decoration: underline;
}
a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
a:visited {
    color: var(--nbt-color-link-visited);
}
a.btn:visited,
a.btn-primary:visited,
a.btn-secondary:visited,
a.button:visited,
a.action-primary:visited {
    color: inherit;
}

a.btn-primary:visited,
a.button:visited,
a.action-primary:visited {
    color: var(--color-on-primary, #fff);
}

/* --------------------------------------------------------------------------
   4. Page container width
   Hyva's .columns already has margin-inline:auto and padding-inline from
   its own CSS. We only need to raise the max-width cap.
   Hyva's breakpoint rules use :where() (zero specificity), so a plain
   class selector here wins without !important.
   .page-main stays full-width (Hyva's pattern) — .columns centers content.
   -------------------------------------------------------------------------- */
.columns {
    max-width: var(--nbt-page-width);
    /* Drop Hyva's container padding-inline (--spacing(6)); the 95vw cap leaves the side gap. */
    padding-inline: 0;
}

.page-main {
    margin-block: calc(var(--spacing) * 2);
}

@media (min-width: 768px) and (max-width: 1199px) {
    .columns {
        width: auto;
        max-width: none;
        margin-inline: calc(var(--spacing) * 3);
    }
}

/* Utility class for non-Hyva contexts (breadcrumbs wrapper, nav) */
.nbt-container {
    max-width: var(--nbt-page-width);
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 6);
}

/* Header rows — same max-width/padding as .columns so logo and icons
   align with page content */
.nbt-header-row {
    max-width: var(--nbt-page-width);
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 6);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-block: calc(var(--spacing) * 3);
}

@media (max-width: 1199px) {
    .nbt-header-row {
        max-width: none;
    }
}

.nbt-header-top-inner {
    padding-block: 0;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   5. Buttons
   Hyva's .btn already applies var(--color-primary) via Tailwind utilities.
   Only the font-family and gallery/tab resets need custom handling.
   -------------------------------------------------------------------------- */
.btn-primary,
.action-primary,
.button {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-family: 'Bitter', serif;
    border-radius: 5px;
}

.btn-primary:hover,
.action-primary:hover,
.button:hover {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color: var(--color-on-primary, #fff);
}

.btn {
    font-family: 'Bitter', serif;
    border-radius: 5px;
}

/* Newsletter subscribe button — matches .btn padding when .btn class is absent */
button.action.subscribe {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    border-width: 2px;
    border-style: solid;
    width: 100%;
    box-sizing: border-box;
}

/* Gallery overlay buttons must stay transparent */
#gallery button,
#thumbs button {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
    font-family: inherit;
    border-radius: 0;
}

/* Product card button (Shop / Add to Cart in listings and sliders): taller and
   larger than Hyva's text-sm (~11.4px here, 1rem = 13px) with --spacing * 2 padding */
.nbt-card-btn {
    padding-block: calc(var(--spacing) * 3);
    font-size: 15px;
    line-height: 1.3;
}

/* Product info card (reviews, short description, size/price table, add to cart):
   tighter than Hyva's card padding (--spacing * 6) */
.nbt-product-info-card {
    --card-py: calc(var(--spacing) * 3);
    --card-px: calc(var(--spacing) * 3);
}

/* Product detail tabs — same look as the category tabs (section 19):
   1px maroon tabs on a maroon baseline, active tab filled and joined to a
   square panel. Below 1024px the tab row is hidden and each section gets an
   accordion heading (.nbt-tab-acc) instead. */
.nbt-tab-list {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-primary, #602432);
}

.nbt-tab-btn {
    background: var(--nbt-bg-subtle, #f9f9f9);
    border: 1px solid var(--color-primary, #602432);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin: 0 .3em -1px 0;
    padding: 6px 12px;
    min-height: 30px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--color-primary, #602432);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nbt-tab-btn.is-active {
    position: relative;
    z-index: 1;
    background: var(--color-primary, #602432);
    border-bottom: 1px solid var(--color-primary, #602432);
    color: var(--color-on-primary, #fff);
}

/* Inactive tabs: closed bottom edge. On hover the edge opens (bottom border
   takes the opaque hover colour and covers the row baseline). */
.nbt-tab-btn:not(.is-active) {
    border-bottom: 1px solid var(--color-primary, #602432);
}

.nbt-tab-btn:not(.is-active):hover {
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--color-primary, #602432) 12%, #fff);
    border-bottom-color: transparent;
}

.nbt-tab-content {
    background-color: #fff;
    border: 1px solid var(--color-primary, #602432);
    border-top: none;
    font-size: 16px;
}

.nbt-tab-content.is-single {
    border-top: 1px solid var(--color-primary, #602432);
}

/* Accordion headings: phones and portrait tablets (tabs need ~615px; the
   main column is ~510-560px on iPad portrait next to the sidebar) */
.nbt-tab-acc {
    display: none;
}

@media (max-width: 1023px) {
    .nbt-tab-list {
        display: none;
    }

    /* Each section is its own box: heading + panel */
    .nbt-tab-content:not(.is-single) {
        background: none;
        border: none;
    }

    .nbt-tab-acc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: .3em;
        padding: 10px 12px;
        background: var(--nbt-bg-subtle, #f9f9f9);
        border: 1px solid var(--color-primary, #602432);
        border-radius: 4px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        color: var(--color-primary, #602432);
        cursor: pointer;
    }

    .nbt-tab-acc.is-active {
        background: var(--color-primary, #602432);
        color: var(--color-on-primary, #fff);
        border-radius: 4px 4px 0 0;
    }

    .nbt-tab-acc-icon {
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

    .nbt-tab-acc.is-active .nbt-tab-acc-icon {
        transform: rotate(180deg);
    }

    .nbt-tab-content:not(.is-single) .nbt-tab-panel {
        background: #fff;
        border: 1px solid var(--color-primary, #602432);
        border-top: none;
    }
}

/* --------------------------------------------------------------------------
   6. Header top utility bar
   -------------------------------------------------------------------------- */
.nbt-header-top {
    background-color: #f0eeea;
    border-bottom: 1px solid #e0ddd6;
    font-size: 13px;
    padding: 4px 0;
}

.nbt-header-msg {
    color: var(--color-primary, #602432);
    font-weight: 600;
    flex: 1;
    padding-inline: calc(var(--spacing) * 4);
}

.nbt-header-msg p {
    margin: 0;
}

.nbt-free-shipping-text {
    line-height: 1.3;
}

.nbt-free-shipping-text a {
    color: var(--color-primary);
    text-decoration: none;
}

.nbt-free-shipping-text a:hover {
    text-decoration: underline;
}

.nbt-free-shipping-text strong {
    font-size: 14px;
}

.nbt-learn-more {
    font-style: italic;
    text-decoration: underline;
}

.nbt-header-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nbt-header-links a {
    font-size: 13px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Desktop nav bar
   -------------------------------------------------------------------------- */
.nbt-mobile-menu-btn {
    display: block;
}

@media (min-width: 1024px) {
    .nbt-mobile-menu-btn {
        display: none;
    }
}

.nbt-navbar {
    display: none;
}

@media (min-width: 1024px) {
    .nbt-navbar {
        display: block;
    }

    .page-header {
        position: sticky;
        top: calc(-1 * var(--nbt-sticky-offset, 174px));
        z-index: 50;
    }
}

.nbt-navbar > div {
    background-color: #f0eeea;
    border-bottom: 1px solid #e0ddd6;
    max-width: calc(var(--nbt-page-width) - var(--spacing) * 12);
    margin-inline: auto;
    box-sizing: border-box;
}

/* Tablet landscape (iPad 1024px): menu bar uses the full width */
@media (min-width: 1024px) and (max-width: 1199px) {
    .nbt-navbar > div {
        max-width: none;
    }
}

.nbt-nav-desktop,
.nbt-nav-desktop > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One size at every breakpoint — no per-breakpoint overrides below. */
.nbt-logo-wrap img {
    max-width: 90px;
    height: auto;
}

.nbt-nav-item {
    position: relative;
}

.nbt-nav-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #602432;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.nbt-nav-link:hover,
.nbt-nav-link:focus,
.nbt-nav-link:visited {
    color: #602432;
    text-decoration: none;
}

.nbt-nav-link:hover,
.nbt-nav-link:focus {
    background-color: #e0ddd6;
}

.nbt-nav-link[aria-current="page"] {
    background-color: #e0ddd6;
}

/* Dropdown */
.nbt-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 200px;
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-primary, #602432);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    margin: 0;
    list-style: none;
    border-radius: 0 0 4px 4px;
}

.nbt-nav-dropdown-parent {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--color-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--color-gray-100);
    text-decoration: none;
}

.nbt-nav-dropdown-parent:hover {
    background-color: var(--color-container);
    text-decoration: none;
}

.nbt-nav-dropdown-parent:visited {
    color: var(--color-primary);
}

.nbt-nav-dropdown li a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.1s;
}

.nbt-nav-dropdown li a:hover {
    background-color: var(--color-container);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   8. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
    background-color: var(--color-container);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 4px 0;
}

.breadcrumbs .items {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    max-width: var(--nbt-page-width);
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.breadcrumbs .items .item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer-mid {
    background: #fff;
    color: #333;
    border-top: 1px solid #e8e7e7;
}

.footer-mid a {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-mid a:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}

.footer-trust {
    background: #f9f9f9;
    border-top: 1px solid #e8e7e7;
    padding: 1rem 0;
}

.nbt-trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.nbt-trust-badges img {
    max-height: 48px;
    width: auto;
}

.nbt-payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nbt-payment-icon {
    display: inline-flex;
    align-items: center;
}

.nbt-payment-icon svg {
    display: block;
}

.footer-bottom {
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
}

.footer-bottom address,
.footer-bottom p,
.footer-bottom a {
    color: #fff;
}

.nbt-footer-inner {
    max-width: var(--nbt-page-width);
    margin-inline: auto;
    padding: 2rem calc(var(--spacing) * 6);
    box-sizing: border-box;
}

.footer-mid .footer-box {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 0 12px 16px;
}

.footer-mid .container > .footer-columns-wrapper,
.footer-mid .container > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-mid h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    border-bottom: 1px solid #602432;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.footer-mid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-mid ul li {
    padding: 4px 0;
    font-size: 14px;
}

.footer-mid p {
    font-size: 14px;
    margin: 4px 0;
}

.footer-mid .site-time {
    color: #666;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   10. Sidebar category navigation
   -------------------------------------------------------------------------- */
.block-nbt-nav {
    border: 1px solid var(--color-gray-200);
    margin-bottom: 16px;
    font-size: 12px;
}

.block-nbt-nav .block-title {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 6px 10px;
    text-transform: uppercase;
}

.block-nbt-nav .block-title-sub {
    background-color: var(--color-primary-darker);
    color: var(--color-gray-200);
    font-size: 12px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.block-nbt-nav .block-content {
    list-style: none;
    padding: 0;
    margin: 0;
}

.block-nbt-nav .block-content .item {
    border-bottom: 1px solid var(--color-gray-100);
}

.block-nbt-nav .block-content .item a,
.block-nbt-nav .block-content .item strong {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 12px;
}

.block-nbt-nav .block-content .item a:hover {
    background-color: var(--color-container);
}

.block-nbt-nav .block-content .item strong {
    color: var(--color-primary);
    font-weight: 700;
    background-color: var(--color-container-lighter);
}

/* Sidebar save-ad image — centred, scaled down only if it overflows the column */
.sidebar .block-imgad img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Customer Service sidenav (#nbt-sidenav)
   -------------------------------------------------------------------------- */
.sidebar .block.nbt-simple-nav {
    background: none;
    border: 1px solid #ddd;
}

#nbt-sidenav .block-title {
    font-size: 19px;
    font-family: 'Bitter', serif;
    font-weight: bold;
    background: none;
    color: var(--color-primary);
    padding: 6px 10px;
}

#nbt-sidenav .block-content {
    padding: 10px 5px 5px 10px;
}

#nbt-sidenav .block-content ul {
    list-style: none;
    padding-left: 9px;
    margin-bottom: 0;
}

#nbt-sidenav .block-content ul li {
    list-style: disc;
    padding: 3px 0;
    font-size: 14px;
}

#nbt-sidenav .block-content ul li strong {
    color: var(--color-primary);
}

#nbt-sidenav .block-content ul li a {
    text-decoration: none;
    color: var(--nbt-color-link);
}

#nbt-sidenav .block-content ul li a:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* Customer Service / CMS page content spacing */
.cms-page-view .column.main p {
    margin-bottom: 0.75em;
    line-height: 1.7;
    font-size: 14px;
}

.cms-page-view .column.main p img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*
 * Legacy Bootstrap-3 responsive visibility classes used throughout the
 * Porto-era CMS content and static blocks (e.g. the desktop/tablet/mobile
 * banner variants: <img class="hidden-xs hidden-sm">, .visible-sm, .visible-xs).
 * Hyva/Tailwind doesn't define these, so every variant was showing at once.
 * Restore Bootstrap-3 breakpoint behaviour so the correct banner shows per
 * device. These class names only appear in migrated legacy content, so the
 * global scope is safe.
 */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px) {
    .visible-xs { display: block !important; }
    .hidden-xs  { display: none  !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm { display: block !important; }
    .hidden-sm  { display: none  !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md { display: block !important; }
    .hidden-md  { display: none  !important; }
}
@media (min-width: 1200px) {
    .visible-lg { display: block !important; }
    .hidden-lg  { display: none  !important; }
}

.cms-page-view .column.main ul {
    padding-left: 2.5rem;
    margin-bottom: 1em;
}

.cms-page-view .column.main ul li {
    margin-bottom: 0.35em;
    line-height: 1.6;
    font-size: 14px;
}

.cms-page-view .column.main ol {
    padding-left: 2.5rem;
    margin-bottom: 1em;
}

.cms-page-view .column.main ol li {
    margin-bottom: 0.35em;
    line-height: 1.6;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Contact info block (.block-contactInfo)
   -------------------------------------------------------------------------- */
.block.block-contactInfo {
    border: 1px solid #ddd;
    margin-top: 1rem;
}

.block.block-contactInfo .block-title {
    padding: 6px 10px;
    background: none;
}

.block.block-contactInfo .block-title strong {
    font-size: 19px;
    font-family: 'Bitter', serif;
    font-weight: bold;
    color: var(--color-primary);
}

.block.block-contactInfo .block-content {
    padding: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.block.block-contactInfo .block-content .fn {
    font-weight: 700;
    color: var(--color-primary);
}

.block.block-contactInfo .block-content .tel {
    margin: 2px 0;
}

.block.block-contactInfo .block-content .type {
    font-weight: 600;
}

.block.block-contactInfo .block-content > a {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
}

.sidebar.sidebar-main .block.block-contactInfo .block-content > a img {
    display: none;
}

/* Newsletter block — applies everywhere (sidebar, homepage column, product page) */
.block.newsletter {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--card-bg, var(--color-surface, #fff));
    border: 1px solid var(--card-stroke, var(--color-gray-300, #d1d5db));
    border-radius: var(--card-radius, var(--radius-lg, 0.5rem));
}

.block-title strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.block.newsletter .block-title {
    margin-bottom: 0.75rem;
}

.block.newsletter .block-title strong {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
}

.block.newsletter .label {
    display: block;
    font-size: 12px;
    margin-bottom: 0.25rem;
    color: #555;
}

.block.newsletter .control input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 0.5rem 0.625rem;
    border: 1px solid #c8c8c8;
    background: #fff;
    color: #333;
}

.block.newsletter .control input[type="email"]:focus {
    border-color: var(--color-primary);
    outline: none;
}

.block.newsletter .actions {
    margin-top: 0.625rem;
}

.block.newsletter .actions button {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

/* Spacing between stacked blocks in the sidebar column */
.home-main .col-md-4 > * + * {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   11. Grouped product table
   -------------------------------------------------------------------------- */
#super-product-table thead tr {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

#super-product-table th,
#super-product-table td {
    padding-left: 0.5rem;
}

#super-product-table .nbt-qty-btn {
    background-color: transparent;
    border-color: var(--color-gray-300);
    border-radius: 0;
    font-family: inherit;
    color: inherit;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color 0.1s ease, color 0.1s ease;
}

#super-product-table .nbt-qty-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

#super-product-table tbody tr {
    transition: background-color 0.1s ease;
}

#super-product-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Qty input: stretch to container height, separators on both sides */
.nbt-qty-input {
    border-radius: 0;
    align-self: stretch;
    border-left: 1px solid var(--color-gray-300);
    border-right: 1px solid var(--color-gray-300);
    border-top: 0px;
    border-bottom: 0px;
}

.nbt-qty-input::-webkit-outer-spin-button,
.nbt-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nbt-qty-input[type=number] {
    -moz-appearance: textfield;
}

/* --------------------------------------------------------------------------
   12. Product name heading (override Hyva's unlayered h1 font-size rule)
   -------------------------------------------------------------------------- */
.catalog-product-view h1[itemprop="name"] {
    font-size: 2.5rem;
}

/* --------------------------------------------------------------------------
   13. Product info (note + price + cart row)
   -------------------------------------------------------------------------- */
.nbt-item-note {
    margin: 8px 0;
    flex-wrap: wrap;
}

.nbt-item-note .shrink-0 {
    font-size: 12px;
    /* Override Tailwind shrink-0 so the long note text wraps inside the block
       instead of overflowing on PDPs with a long Note attribute. */
    flex-shrink: 1;
    min-width: 0;
    flex-basis: 100%;
}

.nbt-item-note .shrink-0 img {
    width: 64px;
    height: auto;
}

.nbt-item-note img {
    display: inline-block;
    vertical-align: middle;
}

/* Add to Cart: fill remaining flex space next to qty stepper */
#product-addtocart-button {
    flex: 1 1 auto;
    justify-content: center;
}

/* Gift card PDP (body class set in catalog_product_view_type_mageworx_giftcards.xml):
   compact Add to Cart; price, qty and button sit together at the right. */
.nbt-pdp-giftcard .nbt-buy-row {
    justify-content: flex-end;
    column-gap: 1.5rem;
}

.nbt-pdp-giftcard .nbt-buy-actions {
    width: auto;
}

.nbt-pdp-giftcard #product-addtocart-button {
    flex: 0 0 auto;
    padding-inline: 2rem;
}

/* --------------------------------------------------------------------------
   13. Product detail page media/info grid
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .nbt-product-grid {
        grid-template-columns: 40% minmax(0px, 1fr);
    }
}

/* --------------------------------------------------------------------------
   14. Related products in gallery column
   -------------------------------------------------------------------------- */
.nbt-related-sidebar .product-item-info,
.nbt-related-sidebar .product-item-name {
    font-size: 0.769rem;
    line-height: 1.2;
}

.nbt-related-sidebar .price {
    font-size: 0.846rem;
}

/* --------------------------------------------------------------------------
   14b. Product slider (Hyva snap-slider) — related / upsell / homepage
   -------------------------------------------------------------------------- */
.product-slider-container h2,
.product-slider-container h3 {
    font-family: 'Bitter', serif;
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.product-slider-container .snap-track {
    scrollbar-width: none;
}

.product-slider-container .snap-track::-webkit-scrollbar {
    display: none;
}

/* --------------------------------------------------------------------------
   15. Product listing
   -------------------------------------------------------------------------- */
.product-item-name a {
    text-decoration: none;
}

.price,
.price-box .price {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.385rem;
}

.price-label {
    color: var(--color-fg-secondary);
    font-size: 1.077rem;
}

/* --------------------------------------------------------------------------
   16. Rating stars
   -------------------------------------------------------------------------- */
.rating-result > span::before,
.rating-summary .rating-result > span::before {
    color: #ffc600;
}

/* --------------------------------------------------------------------------
   17. Toolbar & Pagination
   -------------------------------------------------------------------------- */
.toolbar-products {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    font-size: 13px;
}

.toolbar-products select {
    font-size: 13px;
    padding: 4px 24px 4px 8px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    background-color: #fff;
}

.toolbar-products select:focus {
    border-color: var(--color-primary, #602432);
    outline: none;
}

.toolbar-products .toolbar-amount {
    font-size: 13px;
    color: #666;
}

.toolbar-products .sorter-label,
.toolbar-products .limiter-label {
    font-size: 13px;
    color: #555;
}

/* Override Hyva's rigid grid toolbar with a predictable flex layout:
   sorter on the left, amount + limiter grouped together on the right. */
.toolbar-products.toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* Sorter: far left */
.toolbar-products .toolbar-sorter.sorter {
    order: 1;
    margin-right: auto;
    justify-content: flex-start !important;
}

/* Amount: right side, immediately before the limiter */
.toolbar-products .toolbar-amount {
    order: 2;
    margin: 0 !important;
    text-align: right;
}

/* Limiter: right side, right after the amount */
.toolbar-products .field.limiter {
    order: 3;
}

/* Pager: own line, full width */
.toolbar-products .pages {
    order: 4;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
}

.pages .action,
.pages .page {
    color: var(--color-primary);
}

.pages .page.current strong,
.pages strong.page {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   18. Lists (restore in content areas where Hyva preflight strips them)
   -------------------------------------------------------------------------- */
.cms-page-view .column.main ul,
.product-description ul,
.page-main .block-content ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.cms-page-view .column.main ol,
.product-description ol,
.page-main .block-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
}

/* --------------------------------------------------------------------------
   19. Category tab nav (category page)
   -------------------------------------------------------------------------- */
.tab-main {
    margin-top: 1.5em;
}

.column.main .tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-primary, #602432);
}

.column.main .tabs li {
    text-align: center;
    border: 1px solid var(--color-primary, #602432);
    background: var(--nbt-bg-subtle, #f9f9f9);
    border-bottom: none;
    font-size: 1em;
    line-height: 1em;
    margin-right: .3em;
    margin-bottom: -1px;
}

.column.main .tabs li.active {
    background: var(--color-primary, #602432);
    border-color: var(--color-primary, #602432);
    border-bottom: 1px solid var(--color-primary, #602432);
    z-index: 1;
}

.column.main .tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    min-height: 30px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
    color: var(--color-primary, #602432);
}

.column.main .tabs a:visited {
    color: var(--color-primary, #602432);
}

.column.main .tabs li.active a,
.column.main .tabs li.active a:visited {
    color: var(--color-on-primary, #fff);
}

.column.main .tabs li:not(.active):hover {
    background: color-mix(in srgb, var(--color-primary, #602432) 12%, transparent);
}

.column.main .tabs a:hover {
    text-decoration: none;
}

.column.main .padder {
    padding: 10px;
    margin-bottom: 1em;
    font-weight: normal;
    border: 1px solid var(--color-primary, #602432);
    border-top: none;
    font-size: 14px;
    line-height: 1.6;
}

.column.main .padder.padder-single {
    border-top: 1px solid var(--color-primary, #602432);
}

/* Tab heading row (multi-tab categories — Wild Rice, Dried Vegetables, etc.) */
.tab-main {
    margin: 1.5em 0;
}
.tab-main .tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-primary, #602432);
}
.tab-main .tabs-heading {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.tab-main .tabs-heading a {
    display: block;
    padding: 0.6em 1.2em;
    color: var(--color-primary, #602432);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}
.tab-main .tabs-heading:hover {
    background: #f5efe9;
}
.tab-main .tabs-heading.active {
    background: var(--color-primary, #602432);
    border-color: var(--color-primary, #602432);
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}
.tab-main .tabs-heading.active a {
    color: #fff;
}
.tab-main .tabs-heading.active:hover {
    background: var(--color-primary-darker, #4e1d28);
}
@media (max-width: 640px) {
    .tab-main .tabs {
        flex-direction: column;
    }
    .tab-main .tabs-heading {
        border-radius: 0;
        border-bottom: 1px solid var(--color-primary, #602432);
    }
    .tab-main .tabs-heading.active {
        margin-bottom: 0;
    }
}

/* Popular searches block under the tabs */
.nbt-popular-searches {
    padding: 1em;
    background: #f5efe9;
    border: 1px solid #e0d8cf;
    border-radius: 4px;
    margin-top: 1.5em;
}
.nbt-popular-searches a {
    color: var(--color-primary, #602432);
    text-decoration: none;
}
.nbt-popular-searches a:hover {
    text-decoration: underline;
}

/* Typography inside category tabs (category description, CMS overlay text) */
.column.main .padder h2,
.column.main .padder h3 {
    font-size: 1.15em;
    font-weight: 600;
    margin: 1.2em 0 0.6em;
}
.column.main .padder h2:first-child,
.column.main .padder h3:first-child {
    margin-top: 0;
}
.column.main .padder p {
    margin: 0 0 1em;
}
.column.main .padder p:last-child {
    margin-bottom: 0;
}
.column.main .padder ul,
.column.main .padder ol {
    margin: 0 0 1em 1.5em;
    padding-left: 0.5em;
    list-style: disc outside;
}
.column.main .padder ol {
    list-style: decimal outside;
}
.column.main .padder li {
    margin: 0 0 0.4em;
    line-height: 1.6;
}

/* Same typography for sidebar simple-nav blocks (Customer Service nav, etc.) */
.sidebar .block.nbt-simple-nav {
    padding: 1em;
    margin-bottom: 1em;
}
.sidebar .block.nbt-simple-nav .block-title {
    font-weight: 700;
    margin-bottom: 0.6em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--color-primary, #602432);
}
.sidebar .block.nbt-simple-nav ul.links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar .block.nbt-simple-nav ul.links li {
    padding: 0.4em 0;
    margin: 0;
}
.sidebar .block.nbt-simple-nav ul.links a {
    text-decoration: none;
}
.sidebar .block.nbt-simple-nav ul.links a:hover {
    color: var(--color-primary, #602432);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero Slider
   -------------------------------------------------------------------------- */
.nbt-hero-slider .snap-track {
    scrollbar-width: none;
}
.nbt-hero-slider .snap-track::-webkit-scrollbar {
    display: none;
}

/* Lock every slide to the same height so the track never jumps */
.nbt-hero-link {
    display: block;
    line-height: 0;
}
.nbt-hero-picture {
    display: block;
    /* Desktop images are 1100×443 */
    aspect-ratio: 1100 / 443;
    overflow: hidden;
}
.nbt-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767px) {
    .nbt-hero-picture {
        aspect-ratio: auto;
    }
    .nbt-hero-img {
        height: auto;
        object-fit: contain;
    }
}

.nbt-hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.nbt-hero-nav-btn:hover {
    background: rgba(255, 255, 255, 0.95);
}
.nbt-hero-nav-prev { left:  0.75rem; }
.nbt-hero-nav-next { right: 0.75rem; }

.nbt-hero-pager {
    position: absolute;
    bottom: 0.75rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.nbt-hero-pager .snap-marker {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}
.nbt-hero-pager .snap-marker[aria-current="true"] {
    background: #ffffff;
    transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */
.nbt-mobile-dialog {
    max-width: 320px;
    border: none;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
}

.nbt-mobile-header {
    border-bottom: 3px solid var(--color-primary);
}

.nbt-mobile-logo img {
    max-width: 160px;
    height: auto;
}

.nbt-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nbt-mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-gray-100, #f1f1f1);
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
}

.nbt-mobile-nav-item:hover,
.nbt-mobile-nav-item:focus {
    background-color: var(--color-container, #f9f9f9);
    color: var(--color-primary);
    text-decoration: none;
}

.nbt-mobile-nav-item[aria-current="page"] {
    color: var(--color-primary);
    border-left: 3px solid var(--color-primary);
}

.nbt-mobile-nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-container, #f5f5f5);
    border: none;
    border-bottom: 1px solid var(--color-gray-200);
    cursor: pointer;
}

.nbt-mobile-nav-see-all {
    font-weight: 400;
    font-style: italic;
    padding-left: 40px;
}

.nbt-mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nbt-mobile-utility-links {
    border-top: 2px solid var(--color-primary);
    margin-top: 8px;
    padding: 12px 20px;
}

.nbt-mobile-utility-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
}

.nbt-mobile-utility-links a:hover {
    text-decoration: underline;
}

/* Advanced Search link */
.nbt-advanced-search {
    text-align: right;
    padding: 4px 0;
}

.nbt-advanced-search a {
    font-size: 12px;
    color: var(--color-primary, #602432);
}

/* Site banner below nav — constrained to content width */
.nbt-site-banner {
    max-width: var(--nbt-page-width);
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 6);
    box-sizing: border-box;
}

/* Tablet (iPad portrait 768px / landscape 1024px): banner edge to edge.
   Phones get the same in the 767px block below. */
@media (min-width: 768px) and (max-width: 1199px) {
    .nbt-site-banner {
        max-width: none;
        padding-inline: 0;
    }
}

.nbt-site-banner img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: cover;
    display: block;
}

/* Popular Searches block */
#nbt-keywords {
    color: var(--color-primary);
}

#nbt-keywords strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

#nbt-keywords a {
    color: var(--color-primary);
}

#nbt-keywords ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

#nbt-keywords li {
    display: inline;
}

/* Homepage main content area */
.home-main {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 1.5rem;
}

.home-main .col-md-8 {
    flex: 2 1 0;
    min-width: 0;
}

.home-main .col-md-4 {
    flex: 1 0 280px;
    max-width: 340px;
}

@media (max-width: 767px) {
    .home-main {
        flex-direction: column;
    }
    .home-main .col-md-4 {
        max-width: 100%;
        width: 100%;
    }

}

/* --------------------------------------------------------------------------
   FAQ Page
   -------------------------------------------------------------------------- */
.faq-page .page-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-primary);
    background: none;
}

.lof-faq {
    padding-bottom: 20px;
}

.lof-faq a,
.lof-faq a:hover {
    color: var(--color-primary);
}

.lof-faq > p {
    font-size: 14px;
    margin-top: 5px;
}

.question-list .panel {
    margin-bottom: 2px;
}

.question-list .panel-heading {
    border: none;
    background: #f1f1f1;
    text-align: left;
    padding: 0 10px;
    margin-bottom: 3px;
    cursor: pointer;
}

.question-list .panel-title {
    padding: 15px 0;
    margin: 0;
    font-size: 14px;
    line-height: 27px;
    position: relative;
}

.question-list .panel-title > a,
.question-list .panel-heading.collapsed a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: block;
    padding-right: 24px;
}

.question-list .panel-title > a::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-primary);
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translate(0, -50%) rotate(-90deg);
    transition: transform 0.2s ease;
}

.question-list .panel-heading.active .panel-title > a::after {
    transform: translate(0, -50%) rotate(0deg);
}

.question-list .panel-title a:hover {
    text-decoration: underline;
}

.question-list .panel-body {
    padding: 10px 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-top: none;
    overflow: visible;
    height: auto;
    max-height: none;
}

.question-list .panel-body p {
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}

#faqpage ul {
    list-style: disc;
    padding: 0;
    margin: 0 0 0 15px;
}

.faq-page .sidebar .block .block-title {
    margin-bottom: 0;
}

/* Accordion collapse — Bootstrap not loaded in Hyvä */
.question-list .panel-collapse,
.panel-collapse.collapse {
    display: none;
}
.question-list .panel-collapse[style*="display: block"],
.panel-collapse.collapse.in,
.panel-collapse[style*="display: block"] {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
}

/* FAQ category title */
.faqcat-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    padding: 10px 0;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 8px;
}

.faqcat-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.faqcat-block {
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   19b. Ensure sidebar stays left on 2columns-left pages
   -------------------------------------------------------------------------- */
.page-layout-2columns-left .columns {
    display: grid;
    /* minmax(0, …): a bare 3fr track can't shrink below its content's
       min-content width, so wide tables/tabs pushed the page off the right
       edge on tablets. */
    grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
    gap: 1.5rem;
}

.page-layout-2columns-left .columns > .sidebar-main {
    grid-column: 1;
    grid-row: 1;
}

/* Keep the (often empty) additional sidebar (compare widget) out of the
   main sidebar's cell so it doesn't overlay and block its links. */
.page-layout-2columns-left .columns > .sidebar-additional {
    grid-column: 1;
    grid-row: 2;
}

.page-layout-2columns-left .columns > .column.main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .page-layout-2columns-left .columns {
        grid-template-columns: 1fr;
    }
    /* Reset grid-row to auto so sidebar and main stack in separate rows
       instead of overlapping in the same cell. Main first, sidebar below. */
    .page-layout-2columns-left .columns > .column.main {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .page-layout-2columns-left .columns > .sidebar-main {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }
    .page-layout-2columns-left .columns > .sidebar-additional {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   20. Customer Account
   -------------------------------------------------------------------------- */
/* Hyva declares this as a <container> with htmlId="customer-login-container"
   and htmlClass="login-container". A <container> ignores <arguments>, so the
   theme's htmlClass override is a no-op and .nbt-login-container never reaches
   the markup. Hyva ships no rule for .login-container either, so without the id
   selector below the two panels have no grid and stack vertically.
   The id is the only hook guaranteed to be present. */
#customer-login-container,
.nbt-login-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0;
    align-items: start;
}

@media (max-width: 767px) {
    #customer-login-container,
    .nbt-login-container {
        grid-template-columns: 1fr;
    }
}

/* Wholesale leads with the login form; the New Customers panel is ordered after
   it. Grid items default to order 0, so only this one needs a value. */
#customer-login-container > .nbt-order-last,
.nbt-login-container > .nbt-order-last {
    order: 2;
}

#customer-login-container > .card,
#customer-login-container > .block-new-customer,
.nbt-login-container > .card {
    padding: 1.5rem;
}

.customer-account-login .block-title strong,
#customer-login-container h2,
.nbt-login-container h2 {
    font-family: 'Bitter', serif;
    font-size: 1.5rem;
    color: var(--color-primary, #602432);
}

#customer-login-container .block-new-customer p,
.nbt-login-container .block-new-customer p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.account .sidebar-main .account-nav {
    border: 1px solid var(--color-gray-200);
}

.account .sidebar-main .account-nav .nav.items .item a,
.account .sidebar-main .account-nav .nav.items .item strong {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-100);
}

.account .sidebar-main .account-nav .nav.items .item.current a,
.account .sidebar-main .account-nav .nav.items .item.current strong {
    color: var(--color-primary);
    font-weight: 700;
    background: var(--color-container);
}

.account .sidebar-main .account-nav .nav.items .item a:hover {
    background: var(--color-container);
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   21. Search Results Page
   -------------------------------------------------------------------------- */
.catalogsearch-result-index .page-title-wrapper {
    margin-bottom: 1rem;
}

.catalogsearch-result-index .search.results .message {
    padding: 1rem;
    background: var(--nbt-bg-subtle);
    border: 1px solid var(--color-gray-200);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   22. Contact Page
   -------------------------------------------------------------------------- */
.contact-index-index .form.contact {
    max-width: 600px;
}

.contact-index-index .form.contact .field {
    margin-bottom: 1rem;
}

.contact-index-index .form.contact label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}

.contact-index-index .form.contact input,
.contact-index-index .form.contact textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.625rem;
    border: 1px solid #c8c8c8;
    font-size: 13px;
}

.contact-index-index .form.contact input:focus,
.contact-index-index .form.contact textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* --------------------------------------------------------------------------
   23. 404 / No Route Page
   -------------------------------------------------------------------------- */
.cms-noroute-index .page-title {
    font-family: 'Bitter', serif;
    color: var(--color-primary);
}

.cms-noroute-index .column.main {
    text-align: center;
    padding: 3rem 1rem;
}

.cms-noroute-index .column.main p {
    font-size: 16px;
    max-width: 600px;
    margin: 1rem auto;
}

/* --------------------------------------------------------------------------
   24. Print Styles
   -------------------------------------------------------------------------- */
@media print {
    .nbt-header-top,
    .nbt-navbar,
    .nbt-mobile-menu-btn,
    .footer-mid,
    .footer-trust,
    .footer-bottom,
    .sidebar,
    .breadcrumbs,
    #menu-search-icon,
    #menu-cart-icon,
    .block.newsletter,
    .nbt-hero-slider,
    .nbt-hero-nav-btn,
    .nbt-hero-pager {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    .nbt-logo-wrap img {
        max-width: 150px;
    }

    .columns {
        max-width: 100%;
    }

    #super-product-table thead tr {
        background-color: #ddd;
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   25. Mobile / Responsive refinements
   -------------------------------------------------------------------------- */

/* Force CMS Bootstrap columns full-width below desktop (prevents overlap
   from bootstrap-tiny float rules and cramped tablet layout) */
@media (max-width: 991px) {
    .home-main .col-md-8,
    .home-main .col-md-4 {
        float: none;
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 1023px) {
    /* Header row: keep on one line, ordered: logo | msg | icons | hamburger */
    .nbt-header-row {
        flex-wrap: nowrap;
        padding-block: calc(var(--spacing) * 2);
        gap: 8px;
    }

    /* Logo: far left */
    .nbt-logo-wrap {
        order: 1;
        margin-right: 0;
    }

    /* Free-shipping message: right after logo, right-aligned, fills middle */
    .nbt-header-msg {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: 8px;
        font-size: 11px;
        line-height: 1.2;
        text-align: right;
        overflow-wrap: break-word;
    }

    /* Scale down the bold "Free shipping" line so it fits the squeezed block */
    .nbt-header-msg .nbt-free-shipping-text,
    .nbt-header-msg .nbt-free-shipping-text strong {
        font-size: 11px;
        line-height: 1.25;
    }

    .nbt-header-msg .nbt-free-shipping-text {
        white-space: normal;
    }

    /* Icons group: after the message */
    .nbt-header-icons {
        order: 3;
        margin-left: 0 !important;
        flex-shrink: 0;
    }

    /* Hamburger: after the icons (far right) */
    .nbt-mobile-menu-btn {
        order: 4;
        flex-shrink: 0;
    }
}

/* Phones: logo on the left spanning two rows; right of it the free-shipping
   message across the full width, and below it the icons then the hamburger,
   both on the right.
   [logo] [message.........]
   [logo] [....... icons ☰ ] */
@media (max-width: 767px) {
    .nbt-header-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo msg   msg"
            "logo icons menu";
        align-items: center;
        column-gap: 8px;
        row-gap: 4px;
    }

    .nbt-logo-wrap {
        grid-area: logo;
    }

    .nbt-header-msg {
        grid-area: msg;
        padding-inline: 0;
        text-align: left;
    }

    /* Full row width now, so the message can be larger than the 11px squeezed size */
    .nbt-header-msg,
    .nbt-header-msg .nbt-free-shipping-text,
    .nbt-header-msg .nbt-free-shipping-text strong {
        font-size: 15px;
        line-height: 1.3;
    }

    .nbt-mobile-menu-btn {
        grid-area: menu;
    }

    .nbt-header-icons {
        grid-area: icons;
        justify-self: end;
    }
}

@media (max-width: 767px) {
    /* Tighter page padding on phones */
    .nbt-header-row,
    .nbt-footer-inner,
    .nbt-container,
    .breadcrumbs .items,
    .nbt-navbar > div {
        padding-inline: calc(var(--spacing) * 3);
    }

    .nbt-hero-nav-btn {
        width: 2rem;
        height: 2rem;
    }

    /* Footer columns stack full width with clear separation */
    .footer-mid .footer-box {
        flex: 1 1 100%;
        min-width: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 12px;
    }

    .footer-mid .footer-box:last-child {
        border-bottom: none;
    }

    /* Product detail: single column, title smaller */
    .catalog-product-view h1[itemprop="name"] {
        font-size: 1.75rem;
    }

    /* Grouped product table: fit within mobile viewport */
    .table-wrapper.grouped {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #super-product-table {
        font-size: 12px;
        width: 100%;
        table-layout: fixed;
    }

    #super-product-table th,
    #super-product-table td {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        word-break: break-word;
        white-space: normal;
    }

    /* Price-per-oz cell: allow wrapping, smaller */
    #super-product-table td:nth-child(2) {
        font-size: 11px;
        line-height: 1.3;
    }

    #super-product-table .nbt-qty-btn {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    #super-product-table .nbt-qty-input {
        width: 2.25rem;
    }

    #super-product-table th:last-child,
    #super-product-table td:last-child {
        width: 7rem;
    }

    /* Price cell: prevent strikethrough/sale prices forcing width */
    #super-product-table td:nth-child(3) {
        font-size: 12px;
    }

    #super-product-table .price {
        font-size: 1rem;
    }

    /* PDP tab content: wide tables scroll, images fit */
    .nbt-tab-content {
        overflow-x: hidden;
    }

    .nbt-tab-content .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nbt-tab-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nbt-tab-content img,
    .prose img {
        max-width: 100%;
        height: auto;
    }

    /* Product info column: never exceed viewport.
       min-width:0 on grid CHILDREN is the key — default min-width:auto
       prevents them shrinking below the grouped table's content width. */
    .nbt-product-grid,
    .nbt-product-grid > *,
    .nbt-media-col,
    .product-info-main,
    .product.info.detailed {
        max-width: 100%;
        min-width: 0;
    }

    /* Add-to-cart / price row wraps instead of overflowing */
    .nbt-item-note {
        flex-wrap: wrap;
    }

    /* Category tabs: allow horizontal scroll instead of squishing */
    .column.main .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .column.main .tabs::-webkit-scrollbar {
        display: none;
    }

    .column.main .tabs li {
        flex: 0 0 auto;
    }

    /* Header banner: edge to edge */
    .nbt-site-banner {
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    /* Product listing (category/search): use the full screen width */
    #product-list {
        padding-block: 0;
    }

    .columns:has(#product-list) {
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    #product-list .products-grid,
    #product-list .toolbar-products {
        padding-left: calc(var(--spacing) * 2);
        padding-right: calc(var(--spacing) * 2);
    }

    /* Product cards: tighter than Hyva's card padding (--spacing * 6) */
    .product-item.card {
        --card-py: calc(var(--spacing) * 4);
        --card-px: calc(var(--spacing) * 4);
    }

    /* Homepage spacing tighter */
    .home-main {
        padding-top: 1rem;
        gap: 1rem;
    }

    /* Prevent any wide element from forcing horizontal page scroll */
    .home-main img,
    .cms-page-view .column.main img,
    .product-description img {
        max-width: 100%;
        height: auto;
    }
}

/* Global guard against horizontal overflow on small screens */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------------
   26. Checkout (Firecheckout) — header/footer brand colors
   northbaytrading.css always loads on checkout (default_head_blocks), so these
   guarantee the navbar + footer keep brand styling even if checkout-nbt.css
   or Magento's checkout LESS interferes.
   -------------------------------------------------------------------------- */

/* Hide the Luma nav-sections menu (shown by Firecheckout's full layout / built
   by Luma JS). Hyva removes this block on all normal pages, so hiding it
   globally only affects the checkout, where the Hyva .nbt-navbar is the real
   menu. Not scoped to .firecheckout because that class lives on a wrapper that
   may not be an ancestor of the header's nav-sections. */
.nav-sections,
.firecheckout .nav-sections,
.firecheckout-layout-full .nav-sections {
    display: none !important;
}

.firecheckout .nbt-navbar > div {
    background-color: #602432 !important;
}

.firecheckout .nbt-nav-link,
.firecheckout .nbt-nav-link:hover,
.firecheckout .nbt-nav-link:focus,
.firecheckout .nbt-nav-link:visited {
    color: #fff !important;
}

.firecheckout .nbt-nav-link:hover,
.firecheckout .nbt-nav-link:focus {
    background-color: #4e1d28 !important;
}

.firecheckout .nbt-header-top {
    background-color: #f0eeea !important;
}

.firecheckout .nbt-header-msg {
    color: #602432 !important;
}

.firecheckout .footer-mid {
    background: #fff !important;
    color: #333 !important;
    border-top: 1px solid #e8e7e7;
}

.firecheckout .footer-mid h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #602432 !important;
    text-transform: uppercase;
    border-bottom: 1px solid #602432;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.firecheckout .footer-mid a {
    color: #602432 !important;
    text-decoration: none;
}

.firecheckout .footer-mid a:hover {
    color: #4e1d28 !important;
    text-decoration: underline;
}

.firecheckout .footer-bottom {
    background-color: #602432 !important;
    color: #fff !important;
}

.firecheckout .footer-bottom small,
.firecheckout .footer-bottom a,
.firecheckout .footer-bottom p {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   #19 Air-Dried vs Freeze-Dried CMS page (page_id 13)
   Tailwind preflight strips table borders; these classes weren't migrated.
   -------------------------------------------------------------------------- */
/* Table styled to match the PDP grouped-product table (#super-product-table):
   primary-color header, thin gray row separators, subtle row hover, text-sm. */
.cms-page-view .freeze-dried-table {
    width: 100%;
    margin: 1.25rem 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: transparent;
}
.cms-page-view .freeze-dried-table .tbl-bg {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
.cms-page-view .freeze-dried-table .col-head {
    font-weight: 600;
    color: var(--color-on-primary);
    text-align: center;
    padding: 0.5rem 0.75rem;
}
.cms-page-view .freeze-dried-table tbody tr { transition: background-color 0.1s ease; }
.cms-page-view .freeze-dried-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.cms-page-view .freeze-dried-table td {
    border-bottom: 1px solid var(--color-gray-200);
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}
.cms-page-view .freeze-dried-table .border-right { border-right: 1px solid var(--color-gray-200); }
.cms-page-view .freeze-dried-table .col-label { font-weight: 600; color: var(--color-primary); }
.cms-page-view .freeze-dried-table .chart-cell { padding: 0.5rem 0.75rem; }
.cms-page-view .freeze-dried-table .dried-odd,
.cms-page-view .freeze-dried-table .dried-even { background: none; }

/* "Favorite Products" — 2-column card grid, styled to match the theme */
[id^="fav-"] { margin: 2rem 0 3rem; width: 100%; }
[id^="fav-"] .star-align { display: inline-block; vertical-align: middle; margin: 0 0.4rem 0.6rem 0; }
[id^="fav-"] .favoritetext {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0.75rem;
    text-decoration: none;
}
[id^="fav-"] .favoritetext:hover { text-decoration: underline; }
[id^="fav-"] ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
[id^="fav-"] ul li {
    height: auto;
    list-style: none;
    margin: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.375rem;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[id^="fav-"] ul li:hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
[id^="fav-"] ul li a {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
[id^="fav-"] ul li a:hover { text-decoration: underline; }
[id^="fav-"] .product-center {
    margin: 0;
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}
/* hide the legacy small "View" button image (3rd link), like the live site */
[id^="fav-"] ul li a:last-of-type { display: none; }
@media (max-width: 480px) {
    [id^="fav-"] ul { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Layered navigation visibility fix
   Lof_All's bootstrap-tiny.css declares `.hidden { display: none !important }`,
   which loads after Hyvä's styles.css and clobbers Tailwind's responsive
   `hidden md:block` pattern used by the layered-nav filter block. That forced
   the "Shop By" filters (Category, Price, …) to stay hidden at ALL widths.
   Restore them on desktop with a higher-specificity !important rule.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    #layered-navigation-hyva .filter-content {
        display: block !important;
    }
}

.sitemap-index-index #mageplaza-seo-html-sitemap {
    max-width: 960px;
    margin: 1.5rem auto 0;
    padding: 0 5px;
    box-sizing: border-box;
}

/* Unify headings: the head block uses <h1>, the generated part <h2>. */
.sitemap-index-index .column.main h1,
.sitemap-index-index #mageplaza-seo-html-sitemap h2 {
    color: var(--color-primary);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 1.25rem 0 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e0ddd6;
}

.sitemap-index-index .mp-sitemap-listing {
    column-width: 250px;
    column-gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sitemap-index-index .mp-sitemap-listing li {
    margin-bottom: 0.35em;
    line-height: 1.6;
    break-inside: avoid;
}
.sitemap-index-index .mp-sitemap-listing a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
}
.sitemap-index-index .mp-sitemap-listing a:hover {
    text-decoration: underline;
}
/* Indent sub-categories so the tree hierarchy is visible. */
.sitemap-index-index .mp-sitemap-listing a.level-3 {
    padding-left: 1rem;
    font-size: 13px;
    color: #444;
}
.sitemap-index-index .mp-sitemap-listing a.level-3:hover {
    color: var(--color-primary);
}

.cms-harvesting-canadian-organic-wild-rice .column.main p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0;
    margin-bottom: 0.75rem;
}
.cms-harvesting-canadian-organic-wild-rice .column.main p img {
    display: block;
    width: calc(33.333% - 0.5rem);
    height: auto;
}
@media (max-width: 767px) {
    .cms-harvesting-canadian-organic-wild-rice .column.main p img {
        width: calc(50% - 0.375rem);
    }
}

/* --------------------------------------------------------------------------
   #18 (round 2) — harmonize the hand-built "sitemap-head" CMS block (a
   fixed-width HTML table with plain default links) with the Mageplaza-
   generated lists, so the whole page reads as one layout instead of "half
   one way and half the other". Headings are already unified above; this
   normalizes the head table's width, columns, list and link styling.
   -------------------------------------------------------------------------- */
.sitemap-index-index .column.main > table {
    width: 100% !important;
    max-width: 960px;
    margin: 0 auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.sitemap-index-index .column.main > table td {
    width: auto !important;
    vertical-align: top;
    padding: 0 1rem 1rem 0;
}
.sitemap-index-index .column.main > table ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0;
}
.sitemap-index-index .column.main > table li {
    margin-bottom: 0.35em;
    line-height: 1.6;
}
.sitemap-index-index .column.main > table a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
}
.sitemap-index-index .column.main > table a:hover {
    text-decoration: underline;
}
@media (max-width: 767px) {
    .sitemap-index-index .column.main > table,
    .sitemap-index-index .column.main > table tbody,
    .sitemap-index-index .column.main > table tr,
    .sitemap-index-index .column.main > table td {
        display: block;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   #7a — "Gift Boxes" are bundle products. Hyva's bundle templates add a
   "Your Customization" summary heading and a "Customize <name>" legend, which
   wrongly imply the customer can change what's in the box. Remove both on
   bundle product pages (display:none also drops them from the a11y tree).
   -------------------------------------------------------------------------- */
.catalog-product-view #bundleSummary hgroup h2,
.catalog-product-view #customizeTitle {
    display: none;
}

/* --------------------------------------------------------------------------
   Wholesale site notice (#nbt-wlshead)

   Ported from the Porto wholesale theme, which rendered it from its own header
   template. Retail and wholesale now share this theme, so header.phtml only
   outputs it on the wholesale website.

   Porto shipped no rule for it and relied on inherited body styles; Tailwind's
   preflight strips those, so these few declarations restore a readable line and
   a link that looks like one.
   -------------------------------------------------------------------------- */
#nbt-wlshead {
    padding: .5rem 1rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #ffffff;
    background: var(--color-primary);
}

#nbt-wlshead a {
    color: #ffffff;
    text-decoration: underline;
}

#nbt-wlshead a:hover {
    text-decoration: none;
}

/* ── Header search ──────────────────────────────────────────────────────────
   Phones keep the icon + full-width drop-down. From 768px up (tablet and
   desktop) the field sits permanently in the header row. Everything inside is
   left to Hyva's own input-group styling — the rules here only take the block
   out of drop-down mode and give it a sensible width. */
@media (min-width: 768px) {
    /* Alpine hides x-cloak elements until it boots; the field is always on
       here, so show it immediately and avoid a flash of missing search. */
    .nbt-header-search[x-cloak] {
        display: block !important;
    }

    .nbt-header-search {
        position: relative;
        left: auto;
        top: auto;
        z-index: auto;
        width: 20rem;
        margin-right: 0.75rem;
    }

    /* The shared form is built for a full-width drop-down. */
    .nbt-header-search > div {
        width: 100%;
        padding: 0;
    }

    /* Autocomplete suggestions and the Advanced Search link must not push the
       header row taller, so they float below the field instead. */
    .nbt-header-search nav[aria-label] {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        min-width: 18rem;
        margin-top: 0.25rem;
        z-index: 50;
        background: #fff;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    .nbt-header-search .nbt-advanced-search {
        display: none;
    }
}

@media (min-width: 1024px) {
    .nbt-header-search {
        width: 24rem;
    }

    /* No room for the keyboard-shortcut hint inside the header field. */
    .nbt-header-search kbd {
        display: none !important;
    }
}