/* ==========================================================================
   Hotel Supplies Hub - storefront minimal interface layer
   --------------------------------------------------------------------------
   Loaded LAST on every storefront page (see public/header.html).
   Order: amazeui -> common.css -> site_theme_tokens(public header) -> page css
          -> hsh-minimal.css (this file)
   Scope of this layer:
     1. One shared token set for every page, not just the homepage.
     2. A flatter, quieter, more minimal version of the hospitality system:
        hairlines instead of depth, 2px radii, tabular figures, restrained
        type, uniform icons and no decorative colour noise.
     3. Base classes that the Motion layer animates (see js/hsh-motion.js).
   Rules here are intentionally override-only: they never change markup,
   never change the content shell width and never hide content.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --hsh-radius: 2px;
    --hsh-radius-sm: 2px;
    --hsh-radius-md: 2px;
    --hsh-radius-lg: 3px;
    --hsh-hairline: 1px solid var(--hsh-line);
    /* Only the homepage style layer defined this before; share it site-wide so
       inputs, panels and dividers keep one consistent border strength. */
    --hsh-line-strong: #cbd3cf;
    --hsh-ease-standard: cubic-bezier(.22, .61, .36, 1);
    --hsh-dur-fast: 200ms;
    --hsh-dur: 340ms;
    --hsh-dur-slow: 620ms;
    --hsh-flat-shadow: 0 10px 26px rgba(17, 37, 30, .05);
    --hsh-float-shadow: 0 22px 60px rgba(9, 29, 23, .14);
    --hsh-sticky-offset: 120px;

    /* Legacy alias tokens: the flatter amazeui surfaces follow the brand system. */
    --border-radius: 2px;
    --border-radius-sm: 2px;
    --border-radius-lg: 3px;
    --box-shadow: var(--hsh-flat-shadow);
    --box-shadow-sm: 0 6px 18px rgba(17, 37, 30, .05);
    --box-shadow-lg: var(--hsh-float-shadow);

    /* The previous shell used a warm-orange accent; keep the name, change the hue. */
    --pbh-orange: var(--hsh-brass);
    --pbh-orange-hover: var(--hsh-brass-strong);
    --pbh-ink: var(--hsh-ink);
    --pbh-text: var(--hsh-body);
    --pbh-muted: var(--hsh-muted);
    --pbh-line: var(--hsh-line);
    --pbh-soft: var(--hsh-canvas);
    --pbh-warm: var(--hsh-warm);

    --color-main: var(--hsh-brass);
    --color-main-hover: var(--hsh-brass-strong);
    --color-main-light: var(--hsh-brass-pale);
    --color-price: var(--hsh-ink);
    --body-bg-color: var(--hsh-canvas);
}

/* --------------------------------------------------------------------------
   2. Base typography, surfaces and focus
   -------------------------------------------------------------------------- */
body {
    color: var(--hsh-body);
    background: var(--hsh-canvas);
    font-family: var(--hsh-font-body, Inter, "Segoe UI", Arial, sans-serif);
    -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3,
.am-article-title,
.article-content h1,
.richtext h1, .richtext h2, .richtext h3, .richtext h4 {
    color: var(--hsh-ink);
    letter-spacing: -.015em;
}

.richtext h2, .article-content h2 { font-size: 26px; line-height: 1.28; }
.richtext h3, .article-content h3 { font-size: 20px; line-height: 1.34; }

body p, .richtext p, .article-content p { line-height: 1.78; }

a { transition: color var(--hsh-dur-fast) var(--hsh-ease-standard); }

hr,
.am-divider {
    border: 0;
    border-top: 1px solid var(--hsh-line);
    background: transparent;
}

::selection { color: #fff; background: var(--hsh-forest-800); }

:focus-visible {
    outline: 2px solid var(--hsh-brass);
    outline-offset: 2px;
}

/* Numbers in prices, MOQ, counts and metrics never shift the layout. */
.price strong,
.goods-price,
.goods-sale-price-value,
.line-price,
.cart-price,
.total-price,
.b2b-featured-footer strong,
.b2b-product-bottom strong,
.b2b-hero-metrics dt,
.b2b-tab-count,
.map-result-count,
.tm-count {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Utility bar / brand header / search / primary navigation
   The brand layer already owns the hue; this layer removes the remaining
   depth, pill shapes and colour noise and keeps one flat graphic language.
   -------------------------------------------------------------------------- */
.b2b-utility-bar {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #c3cfc9;
    background: var(--hsh-forest-950);
}
.b2b-utility-inner { min-height: 40px; gap: 18px; }
.b2b-utility-inner > span { color: #9fb0a9; font-size: 11px; letter-spacing: .04em; }
.b2b-utility-bar a { color: #cfdad4; font-size: 11px; }
.b2b-utility-bar a:hover,
.b2b-utility-bar a:focus { color: var(--hsh-brass-pale); background: transparent; }
.b2b-utility-contact { gap: 16px; }
.b2b-utility-user { gap: 10px; }
.b2b-utility-user span { width: 1px; height: 11px; background: rgba(255, 255, 255, .22); }
.b2b-utility-quick { display: inline-flex; align-items: center; gap: 14px; }
.b2b-utility-quick a {
    padding: 0;
    border: 0;
    color: #cfdad4;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.b2b-utility-quick a:hover,
.b2b-utility-quick a:focus { color: #fff; }
.b2b-utility-quick a.b2b-utility-quick-primary {
    padding-bottom: 1px;
    border-bottom: 1px solid var(--hsh-brass);
    color: #fff;
}
.b2b-utility-quick a.b2b-utility-quick-primary:hover,
.b2b-utility-quick a.b2b-utility-quick-primary:focus { color: var(--hsh-brass-pale); border-bottom-color: var(--hsh-brass-pale); }

.b2b-site-header { border-bottom: 1px solid var(--hsh-line); background: #fff; }
.b2b-header-search-group {
    border: 1px solid var(--hsh-line-strong, var(--hsh-line));
    border-radius: 2px;
    box-shadow: none;
}
.b2b-header-search-group:focus-within {
    border-color: var(--hsh-brass);
    box-shadow: 0 0 0 3px rgba(155, 120, 63, .12);
}
.b2b-header-search-group button { border-radius: 0; box-shadow: none; }
.b2b-header-hot-keywords-list a { color: var(--hsh-muted); font-size: 11px; }
.b2b-header-cta,
.b2b-nav-inquiry,
.b2b-goods-inquiry-btn { border-radius: 2px; box-shadow: none; }

.b2b-main-nav { border-bottom: 1px solid var(--hsh-line); background: #fff; box-shadow: none; }
.b2b-main-nav .b2b-nav-list > li > a { border-radius: 0; letter-spacing: .005em; }
.b2b-main-nav .b2b-nav-list > li > a:hover,
.b2b-main-nav .b2b-nav-list > li > a:focus { background: var(--hsh-warm); box-shadow: inset 0 -2px 0 var(--hsh-brass); }
.b2b-main-nav .b2b-nav-list > li > a.active,
.b2b-main-nav .b2b-nav-list > li.is-active > a { box-shadow: inset 0 -2px 0 var(--hsh-brass); }
.b2b-nav-toggle,
.b2b-nav-submenu-toggle,
.b2b-nav-catalog { border-radius: 0; box-shadow: none; }
.b2b-nav-submenu,
.b2b-category-mega,
.b2b-procurement-mega {
    border-radius: 0;
    box-shadow: var(--hsh-float-shadow);
}
.b2b-nav-submenu li a { border-radius: 0; }

/* Procurement mega menu: one uniform flat tile, no per-item colour rotation. */
.b2b-procurement-link {
    border-radius: 0;
    box-shadow: none !important;
    background-image: none !important;
    transition: border-color var(--hsh-dur-fast) var(--hsh-ease-standard),
                background-color var(--hsh-dur-fast) var(--hsh-ease-standard);
}
.b2b-procurement-link:nth-child(5n+1),
.b2b-procurement-link:nth-child(5n+2),
.b2b-procurement-link:nth-child(5n+3),
.b2b-procurement-link:nth-child(5n+4),
.b2b-procurement-link:nth-child(5n+5) {
    border-color: var(--hsh-line);
    background: #fff;
    box-shadow: none;
}
.b2b-procurement-link:hover,
.b2b-procurement-link:focus,
.b2b-procurement-link.active {
    border-color: var(--hsh-brass);
    background: var(--hsh-warm);
    box-shadow: inset 2px 0 0 var(--hsh-brass) !important;
}
.b2b-procurement-link-icon {
    border: 1px solid var(--hsh-line);
    border-radius: 0;
    color: var(--hsh-brass-strong);
    background: var(--hsh-warm);
    box-shadow: none;
}
.b2b-procurement-link:hover .b2b-procurement-link-icon,
.b2b-procurement-link:focus .b2b-procurement-link-icon,
.b2b-procurement-link.active .b2b-procurement-link-icon {
    border-color: var(--hsh-brass);
    color: #fff;
    background: var(--hsh-brass);
}
.b2b-procurement-feature {
    border-left: 1px solid var(--hsh-line);
    border-radius: 0;
    background-image: none;
    background-color: var(--hsh-warm);
}
.b2b-procurement-feature::before { display: none; }
.b2b-procurement-feature a {
    border: 1px solid var(--hsh-brass);
    border-radius: 2px;
    color: #fff !important;
    background: var(--hsh-brass);
}
.b2b-procurement-feature a:hover,
.b2b-procurement-feature a:focus { border-color: var(--hsh-brass-strong); background: var(--hsh-brass-strong); }

.b2b-category-mega-shortcuts-links a { border-radius: 2px; }

/* --------------------------------------------------------------------------
   4. Breadcrumb, section headings and pagination
   -------------------------------------------------------------------------- */
.breadcrumb-data,
.am-breadcrumb {
    padding: 14px 0;
    border-bottom: 1px solid var(--hsh-line);
    color: var(--hsh-muted);
    background: transparent;
    font-size: 12px;
}
.am-breadcrumb a { color: var(--hsh-muted); }
.am-breadcrumb a:hover,
.am-breadcrumb a:focus { color: var(--hsh-brass-strong); }
.am-breadcrumb > li + li::before { color: var(--hsh-line-strong, var(--hsh-line)); content: "/\00a0"; }

.am-title-left-border {
    padding-left: 14px;
    border-left: 2px solid var(--hsh-brass);
    color: var(--hsh-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.base-nav-title { position: relative; }
.base-nav-desc,
.base-nav-keywords a { color: var(--hsh-muted); font-size: 12px; }
.base-nav-more a { color: var(--hsh-brass-strong); font-size: 12px; font-weight: 700; }

.am-pagination > li > a,
.am-pagination > li > span {
    min-width: 40px;
    border: 1px solid var(--hsh-line);
    border-radius: 2px;
    color: var(--hsh-body);
    background: #fff;
    box-shadow: none;
    line-height: 38px;
}
.am-pagination > li > a:hover,
.am-pagination > li > a:focus { border-color: var(--hsh-brass); color: var(--hsh-brass-strong); background: var(--hsh-warm); }
.am-pagination > .am-active > a,
.am-pagination > .am-active > span { border-color: var(--hsh-forest-800); color: #fff; background: var(--hsh-forest-800); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
body .am-btn {
    border-radius: 2px;
    box-shadow: none;
    font-weight: 700;
    letter-spacing: .02em;
    transition: color var(--hsh-dur-fast) var(--hsh-ease-standard),
                border-color var(--hsh-dur-fast) var(--hsh-ease-standard),
                background-color var(--hsh-dur-fast) var(--hsh-ease-standard);
}
body .am-btn-primary {
    border-color: var(--hsh-brass);
    color: #fff;
    background: var(--hsh-brass);
}
body .am-btn-primary:hover,
body .am-btn-primary:focus { border-color: var(--hsh-brass-strong); background: var(--hsh-brass-strong); }
body .am-btn-secondary { border-color: var(--hsh-brass-pale); color: var(--hsh-brass-strong); background: var(--hsh-warm); }
body .am-btn-secondary:hover,
body .am-btn-secondary:focus { border-color: var(--hsh-brass); color: #fff; background: var(--hsh-brass); }
body .am-btn-default {
    border-color: var(--hsh-line-strong, var(--hsh-line));
    color: var(--hsh-ink);
    background: #fff;
}
body .am-btn-default:hover,
body .am-btn-default:focus { border-color: var(--hsh-forest-800); color: #fff; background: var(--hsh-forest-800); }
body .am-btn-danger { border-color: #a8442c; background: #a8442c; }
body .am-btn-danger:hover,
body .am-btn-danger:focus { border-color: #8d3722; background: #8d3722; }

/* Shared content CTA used by the homepage, catalog pages and CMS pages. */
.b2b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    gap: 9px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1;
    transition: color var(--hsh-dur-fast) var(--hsh-ease-standard),
                border-color var(--hsh-dur-fast) var(--hsh-ease-standard),
                background-color var(--hsh-dur-fast) var(--hsh-ease-standard);
}
.b2b-btn-primary { border-color: var(--hsh-brass); color: #fff !important; background: var(--hsh-brass); }
.b2b-btn-primary:hover,
.b2b-btn-primary:focus { border-color: var(--hsh-brass-strong); background: var(--hsh-brass-strong); }
.b2b-btn-outline { border-color: rgba(255, 255, 255, .68); color: #fff !important; background: transparent; }
.b2b-btn-outline:hover,
.b2b-btn-outline:focus { border-color: #fff; color: var(--hsh-ink) !important; background: #fff; }
.b2b-btn-dark { border-color: var(--hsh-forest-800); color: #fff !important; background: var(--hsh-forest-800); }
.b2b-btn-dark:hover,
.b2b-btn-dark:focus { border-color: var(--hsh-forest-900); background: var(--hsh-forest-900); }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.am-form select,
.am-form textarea,
.am-form input[type='text'],
.am-form input[type='password'],
.am-form input[type='datetime'],
.am-form input[type='datetime-local'],
.am-form input[type='date'],
.am-form input[type='month'],
.am-form input[type='time'],
.am-form input[type='week'],
.am-form input[type='number'],
.am-form input[type='email'],
.am-form input[type='url'],
.am-form input[type='search'],
.am-form input[type='tel'],
.am-form input[type='color'],
.am-form-field,
.b2b-feedback-form input,
.b2b-feedback-form textarea,
.b2b-feedback-form select {
    border: 1px solid var(--hsh-line-strong, var(--hsh-line));
    border-radius: 2px;
    color: var(--hsh-ink);
    background: #fff;
    box-shadow: none;
    transition: border-color var(--hsh-dur-fast) var(--hsh-ease-standard),
                box-shadow var(--hsh-dur-fast) var(--hsh-ease-standard);
}
.am-form select:focus,
.am-form textarea:focus,
.am-form input:focus,
.am-form-field:focus,
.b2b-feedback-form input:focus,
.b2b-feedback-form textarea:focus,
.b2b-feedback-form select:focus {
    border-color: var(--hsh-brass);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(155, 120, 63, .14);
}
.am-form label,
.am-form-group > label { color: var(--hsh-ink); font-weight: 700; font-size: 12px; letter-spacing: .01em; }
.am-form-help,
.am-form-group .am-form-help { color: var(--hsh-muted); font-size: 12px; }

.b2b-feedback-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.b2b-feedback-form input,
.b2b-feedback-form select { min-height: 50px; }
.b2b-feedback-form textarea { min-height: 132px; grid-column: 1 / -1; }
.b2b-feedback-form button {
    min-height: 50px;
    border: 1px solid var(--hsh-brass-strong);
    border-radius: 2px;
    color: #fff;
    background: var(--hsh-brass-strong);
    font-weight: 800;
    grid-column: 1 / -1;
    cursor: pointer;
}
.b2b-feedback-form button:hover,
.b2b-feedback-form button:focus { border-color: #684a23; background: #684a23; }

/* --------------------------------------------------------------------------
   7. Cards, panels and product discovery surfaces
   -------------------------------------------------------------------------- */
.am-panel,
.am-panel-default,
.am-background-white,
.am-radius,
.am-thumbnail,
.am-img-thumbnail,
.zero-content-img a {
    border-radius: 2px;
}
.am-panel,
.am-panel-default {
    border: 1px solid var(--hsh-line);
    background: var(--hsh-surface);
    box-shadow: none;
}
.am-panel-default > .am-panel-hd {
    border-bottom: 1px solid var(--hsh-line);
    border-radius: 0;
    color: var(--hsh-ink);
    background: var(--hsh-warm);
    font-weight: 700;
}
.am-table {
    border-color: var(--hsh-line);
    background: #fff;
}
.am-table > thead > tr > th {
    border-bottom: 1px solid var(--hsh-line-strong, var(--hsh-line));
    color: var(--hsh-ink);
    background: var(--hsh-warm);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
}
.am-table > tbody > tr > td { border-top: 1px solid var(--hsh-line); color: var(--hsh-body); }
.am-table > tbody > tr:hover > td { background: #fbfaf6; }

.am-badge { border-radius: 2px; font-weight: 700; }
.am-badge-danger { color: #fff; background: #a8442c; }

.am-dropdown-content {
    border: 1px solid var(--hsh-line);
    border-radius: 2px;
    box-shadow: var(--hsh-float-shadow);
}
ul.am-dropdown-content > li > a { color: var(--hsh-body); }
ul.am-dropdown-content > li > a:hover,
ul.am-dropdown-content > li > a:focus { color: var(--hsh-brass-strong); background: var(--hsh-warm); }

.am-modal-bd,
.am-modal-hd { border-radius: 2px; }
.am-modal-hd { border-bottom: 1px solid var(--hsh-line); }
.am-offcanvas-bar { border-radius: 0; }

/* Product cards shared by the catalogue, category and search pages. */
.module-goods-grid-base .item,
.module-goods-list-base .item {
    border: 1px solid var(--hsh-line);
    border-radius: 2px;
    background: var(--hsh-surface);
    box-shadow: none;
    transition: border-color var(--hsh-dur-fast) var(--hsh-ease-standard);
}
.module-goods-grid-base .item:hover,
.module-goods-list-base .item:hover { border-color: rgba(155, 120, 63, .55); box-shadow: none; }
.module-goods-grid-base .item img,
.module-goods-list-base .item img { border-radius: 0; }
.module-goods-grid-base .item .goods-title a,
.module-goods-list-base .item .goods-title a { color: var(--hsh-ink); }
.module-goods-grid-base .item .goods-title a:hover,
.module-goods-list-base .item .goods-title a:hover { color: var(--hsh-brass-strong); }
.module-goods-grid-base .item .price strong,
.module-goods-list-base .item .price strong { color: var(--hsh-ink); }
.module-goods-grid-base .item .price .original-price,
.module-goods-list-base .item .price .original-price,
.original-price { color: var(--hsh-muted); font-weight: 400; }
.price, .price strong { color: var(--hsh-ink); }

/* Catalogue / search layers keep their structure but drop the orange hover hue. */
.b2b-search-page .module-goods-grid-base .item,
.b2b-category-page .module-goods-grid-base .item,
.b2b-search-page .module-goods-list-base .item,
.b2b-category-page .module-goods-list-base .item {
    border-radius: 2px;
    box-shadow: none;
}
.b2b-search-page .module-goods-grid-base .item:hover,
.b2b-category-page .module-goods-grid-base .item:hover,
.b2b-search-page .module-goods-list-base .item:hover,
.b2b-category-page .module-goods-list-base .item:hover {
    border-color: rgba(155, 120, 63, .6);
    box-shadow: none;
}
.b2b-search-page .sort-nav li.active a,
.b2b-category-page .sort-nav li.active a { border-color: var(--hsh-brass); color: var(--hsh-brass-strong); background: var(--hsh-warm); }
.b2b-search-page .map-item > li > a:hover,
.b2b-search-page .map-text-items ul > li > a:hover,
.b2b-category-page .map-item > li > a:hover { color: var(--hsh-brass-strong) !important; }
.b2b-search-page .map-more-submit:hover,
.b2b-search-page .map-more-submit:focus { border-color: var(--hsh-brass); color: var(--hsh-brass-strong); }

/* --------------------------------------------------------------------------
   8. Product detail, cart, order and account surfaces
   -------------------------------------------------------------------------- */
/* The catalogue, category and detail page layers expose one radius token each;
   bring them onto the same 2px minimal language. */
.b2b-search-page,
.b2b-category-page,
.b2b-catalog-page,
.b2b-product-detail {
    --catalog-radius: 2px;
    --goods-radius: 2px;
}
.b2b-product-detail .detail-title,
.b2b-product-detail .tb-detail-hd h1 { color: var(--hsh-ink); letter-spacing: -.015em; }
.b2b-product-detail .tb-detail-panel-base,
.b2b-product-detail .goods-base-data-content,
.b2b-product-detail .goods-page-container,
.b2b-product-detail .content-photo,
.b2b-product-detail .content-web {
    border: 1px solid var(--hsh-line);
    border-radius: 2px;
    background: #fff;
    box-shadow: none;
}
.b2b-product-detail .goods-sale-price-value { color: var(--hsh-ink); }
.b2b-product-detail .goods-original-price,
.b2b-product-detail .goods-original-price-value { color: var(--hsh-muted); }
.b2b-product-detail .am-tabs-nav > li > a { border-radius: 0; }
.b2b-product-detail .am-tabs-nav > .am-active > a { border-bottom: 2px solid var(--hsh-brass); color: var(--hsh-ink); }
.b2b-product-detail .b2b-goods-inquiry {
    border: 1px solid var(--hsh-brass-pale);
    border-radius: 2px;
    background: var(--hsh-warm);
}

.cart-content,
.cart-nav,
.order-base,
.order-list,
.order-nav,
.user-center,
.user-base,
.user-content,
.user-content-body,
.message,
.cart-list,
.goods-base,
.goods-detail {
    border-color: var(--hsh-line);
}
.cart-table,
.cart-content .am-table,
.order-list .am-table { border-radius: 2px; }
.user-base-icon,
.common-user-icon,
.avatar,
.am-circle,
.am-round { border-radius: 2px; }
.am-circle { border-radius: 50%; }
.user-center .am-panel-bd,
.user-content-body { background: #fff; }

/* --------------------------------------------------------------------------
   9. Rich text, article and CMS content
   -------------------------------------------------------------------------- */
.article-content .am-background-white,
.article-content .richtext {
    border: 1px solid var(--hsh-line);
    background: var(--hsh-surface);
    box-shadow: none;
}
.richtext blockquote {
    margin: 22px 0;
    padding: 6px 0 6px 20px;
    border-left: 2px solid var(--hsh-brass);
    color: var(--hsh-body);
    font-style: normal;
}
.richtext code,
.richtext pre {
    border: 1px solid var(--hsh-line);
    border-radius: 2px;
    background: var(--hsh-warm);
}
.richtext img,
.article-content img { border-radius: 2px; }
.richtext table { border-color: var(--hsh-line); }
.richtext table th { background: var(--hsh-warm); color: var(--hsh-ink); }

/* CMS pages: keep the structure, remove the decorative gradient depth. */
body .customview-content > [class$="-page"] [class$="-hero"]:not(.pba-hero):not(.pbw-hero),
body .customview-content > [class$="-page"] [class$="-final"]:not(.pbw-final) {
    background-image: none !important;
    background-color: var(--hsh-forest-950) !important;
}
body .customview-content > [class$="-page"] :is(a, button)[class*="-primary"],
body .customview-content .hsh-deck-button:not(.is-outline) { border-radius: 2px !important; }
body .customview-content > [class$="-page"] [class$="-card"],
body .customview-content > [class$="-page"] article {
    border-radius: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.b2b-global-footer { border-top: 1px solid rgba(228, 200, 148, .32); background: var(--hsh-forest-950); }
.b2b-global-footer-column h4,
.b2b-global-footer-contact h4 { letter-spacing: .1em; }
.b2b-footer-logo,
.b2b-footer-social-links a { border-radius: 2px; }

/* --------------------------------------------------------------------------
   11. Motion layer contract (see js/hsh-motion.js)
   Content is only hidden when the Motion runtime is present and ready, so a
   failed CDN request or disabled JavaScript can never blank the page.
   -------------------------------------------------------------------------- */
html.hsh-motion-ready .hsh-reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}
html.hsh-motion-ready .hsh-reveal.hsh-reveal-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity var(--hsh-dur-slow) var(--hsh-ease-standard),
                transform var(--hsh-dur-slow) var(--hsh-ease-standard);
}
html.hsh-motion-ready .hsh-reveal.hsh-reveal-done { transition: none; }

/* Hero entrance contract: the copy is pre-hidden only while Motion is still
   loading (html.hsh-hero-enter is added by hsh-motion.js within 1.2s of load).
   A late or missing Motion runtime never hides the hero in the first place. */
html.hsh-hero-enter [data-hero-slider] .b2b-hero-copy > .b2b-hero-eyebrow,
html.hsh-hero-enter [data-hero-slider] .b2b-hero-copy > .b2b-hero-copy-stack,
html.hsh-hero-enter [data-hero-slider] .b2b-hero-copy > .b2b-hero-chat,
html.hsh-hero-enter [data-hero-slider] .b2b-hero-copy > .b2b-hero-actions,
html.hsh-hero-enter [data-hero-slider] .b2b-hero-copy > .b2b-hero-metrics {
    opacity: 0;
}
/* Motion writes the entrance inline; this is the failure fallback only. */
html.hsh-motion-failed [data-hero-slider] .b2b-hero-copy > *,
html.hsh-hero-enter.hsh-motion-failed [data-hero-slider] .b2b-hero-copy > * {
    opacity: 1;
}

/* Scroll reading progress (article and CMS pages only). */
.hsh-progress {
    position: fixed;
    z-index: 950;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--hsh-brass);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* Back to top */
.hsh-top {
    position: fixed;
    z-index: 55;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--hsh-line-strong, var(--hsh-line));
    border-radius: 2px;
    color: var(--hsh-ink);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--hsh-flat-shadow);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: color var(--hsh-dur-fast) var(--hsh-ease-standard),
                border-color var(--hsh-dur-fast) var(--hsh-ease-standard),
                background-color var(--hsh-dur-fast) var(--hsh-ease-standard);
}
.hsh-top:hover,
.hsh-top:focus { border-color: var(--hsh-forest-800); color: #fff; background: var(--hsh-forest-800); }

/* Header state applied by the Motion layer once the page is scrolled. */
html.hsh-scrolled .b2b-main-nav { box-shadow: 0 1px 0 var(--hsh-line), 0 10px 30px rgba(9, 29, 23, .06); }

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    :root { --hsh-sticky-offset: 24px; }
    .b2b-feedback-form { grid-template-columns: 1fr; }
    .b2b-feedback-form textarea,
    .b2b-feedback-form button { grid-column: auto; }
    .b2b-utility-quick { gap: 10px; }
    /* Clear the fixed mobile bottom navigation bar. */
    .hsh-top { right: 14px; bottom: 76px; }
    .b2b-procurement-feature { border-left: 0; border-top: 1px solid var(--hsh-line); }
}

@media (prefers-reduced-motion: reduce) {
    html.hsh-motion-ready .hsh-reveal { opacity: 1 !important; transform: none !important; }
    .hsh-top { transition: none; }
}