@charset "UTF-8";
/* ==========================================================================
   Hotel theme - flat design layer (hsh-flat.css)
   --------------------------------------------------------------------------
   Loaded LAST on every hotel-theme page (see public/header.html), after the
   gztaitang skin, the page css and the homepage layer (tt-home.css).
   It is override-only: no markup, no content and no shell width is changed.

   What this layer does
     1. Restores the platform root font size (--html-body-size) the theme css
        was authored against, so 0.1rem borders render as 1px hairlines and
        navigation / form / card spacing returns to its intended rhythm.
     2. Publishes one flat token set and re-points every legacy token family
        (--border-radius*, --box-shadow*, --pbh-*, --b2b-*, --tt-*, --hsh-*,
        --catalog-radius, --goods-radius, --color-*) at it.
     3. Removes depth: no drop shadows, no gradients, no backdrop blur, no
        glossy image filters. Surfaces are separated by 1px hairlines and
        solid background steps instead. The single exception is the primary
        navigation popup (see the mega pane section below): it floats over the
        page, so it keeps a soft two-layer elevation.
     4. Unifies corners (2px), one accent (brand oxblood) and one focus ring.
     5. Gives the flat, never-styled procurement mega menu its layout back, so
        the primary navigation no longer collapses into a ~1000px tall block.
     6. Restricts transitions to colour / border / background - no hover lift,
        no image zoom, no Ken Burns hero drift.

   Reversible: remove the hsh-flat.css <link> from public/header.html and the
   theme returns to its previous styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Flat tokens + legacy token mapping
   -------------------------------------------------------------------------- */
:root {
    /* Root type scale. hotel/css/*.css is written for 1rem = 10px, which is
       the platform default (--html-body-size) the theme no longer receives. */
    --html-body-size: 10px;

    --flat-radius: 2px;
    --flat-radius-sm: 2px;
    --flat-radius-lg: 2px;

    --flat-oxblood: #541c1e;
    --flat-oxblood-dark: #3f1416;
    --flat-oxblood-tint: #f6ece9;
    --flat-brass: #b1854a;
    --flat-brass-strong: #8c6430;
    --flat-brass-pale: #f2e8d8;

    --flat-ink: #231a17;
    --flat-body: #4f463f;
    --flat-muted: #766b64;

    --flat-canvas: #faf7f2;
    --flat-surface: #ffffff;
    --flat-warm: #f4efe7;
    --flat-line: #e6e0d7;
    --flat-line-strong: #d3cabf;
    /* interactive boundaries need 3:1 against the surfaces they sit on */
    --flat-control-line: #8d8177;

    --flat-dark: #1c1517;
    --flat-dark-footer: #2b0d0f;
    --flat-on-dark: #cfc7c2;
    --flat-on-dark-line: rgba(255, 255, 255, .14);

    --flat-dur: 200ms;
    --flat-dur-slow: 420ms;
    --flat-ease: cubic-bezier(.22, .61, .36, 1);
    --flat-focus: 2px solid var(--flat-oxblood);

    /* Legacy radius / elevation tokens now resolve to the flat language. */
    --border-radius: var(--flat-radius);
    --border-radius-sm: var(--flat-radius);
    --border-radius-lg: var(--flat-radius);
    --border-radius-max: var(--flat-radius);
    --box-shadow: none;
    --box-shadow-sm: none;
    --box-shadow-lg: none;
    --shadow-sm: none;
    --shadow-md: none;

    --catalog-radius: var(--flat-radius);
    --goods-radius: var(--flat-radius);
    --b2b-radius: var(--flat-radius);
    --b2b-shadow: none;
    --b2b-shadow-sm: none;
    --b2b-shadow-md: none;
    --b2bp-shadow-sm: none;
    --b2bp-shadow-md: none;
    --tt-radius: var(--flat-radius);
    --tt-radius-sm: var(--flat-radius);
    --tt-shadow-sm: none;
    --tt-shadow-md: none;

    --hsh-radius: var(--flat-radius);
    --hsh-radius-sm: var(--flat-radius);
    --hsh-radius-md: var(--flat-radius);
    --hsh-radius-lg: var(--flat-radius);
    --hsh-flat-shadow: none;
    --hsh-float-shadow: none;
    --hsh-shadow-sm: none;
    --hsh-shadow-md: none;

    /* One accent for the whole storefront. The previous shell mixed a warm
       orange, a teal and two green tints with the brand oxblood. */
    --color-main: var(--flat-oxblood);
    --color-main-hover: var(--flat-oxblood-dark);
    --color-main-light: var(--flat-oxblood-tint);
    --color-price: var(--flat-oxblood);

    --pbh-orange: var(--flat-oxblood);
    --pbh-orange-hover: var(--flat-oxblood-dark);
    --pbh-ink: var(--flat-ink);
    --pbh-text: var(--flat-body);
    --pbh-muted: var(--flat-muted);
    --pbh-line: var(--flat-line);
    --pbh-soft: var(--flat-warm);
    --pbh-warm: var(--flat-oxblood-tint);

    --body-bg-color: var(--flat-canvas);
}

html { font-size: var(--html-body-size, 10px); }
/* --------------------------------------------------------------------------
   2. Base surfaces, type and focus
   -------------------------------------------------------------------------- */
body {
    color: var(--flat-body);
    background-color: var(--flat-canvas);
}

h1, h2, h3, h4, h5, h6,
.am-article-title, .richtext h1, .richtext h2, .richtext h3, .richtext h4 {
    color: var(--flat-ink);
}

a { transition: color var(--flat-dur) var(--flat-ease); }

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

/* One visible, solid focus ring for every interactive element. */
:focus-visible {
    outline: var(--flat-focus);
    outline-offset: 2px;
}

/* Prices, counts and specifications keep a fixed figure width. */
.price strong, .goods-price, .goods-sale-price-value, .line-price, .cart-price,
.total-price, .tm-count, .b2b-header-search-group input, .tt-hero__metrics {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Depth reset - elevation is expressed with 1px borders only
   -------------------------------------------------------------------------- */
.header, .header *,
.hsh-footer, .hsh-footer *,
.tt-home, .tt-home *,
[class*="b2b-"],
.am-panel, .am-panel-default, .am-popup, .am-offcanvas-bar, .am-modal, .am-alert,
.am-dropdown-content, .am-tabs-border, .am-slider, .am-thumbnail, .am-img-thumbnail,
.module-goods-grid-base .item, .module-goods-list-base .item,
.goods-recommend .goods-recommend-body .item,
.browse .recommend-goods ul li, .like-item,
.theme-popover, .theme-signin, .sku-line, .cart-content table,
.article-sidebar .am-panel, .user-content .am-panel, .various .am-panel,
.order-state .am-alert, .user-menu, .am-form-popup-fixed, form.am-form-popup-sticky {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
}

/* Blur is decoration here - a flat surface steps in instead. */
[class*="b2b-"], [class*="tt-"], .header, .header * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   4. One corner radius (2px). Circles stay for icon-only controls, dots and
      avatars; everything else becomes a crisp rectangle.
   -------------------------------------------------------------------------- */
[class*="b2b-"], [class*="tt-"], [class*="hsh-footer"],
.am-radius, .am-panel, .am-panel-default, .am-popup, .am-offcanvas-bar,
.am-thumbnail, .am-img-thumbnail, .am-btn, .am-form-field, .am-badge, .am-alert,
.am-dropdown-content, .am-tabs-nav > li > a, .am-tabs-border, .am-slider,
.am-form-popup-fixed, .am-upload-file .am-form-file .am-btn,
.module-goods-grid-base .item, .module-goods-list-base .item, .goods-images,
.zero-item > a, .zero-content-img a, .zero-right, .zero-right-content,
.category-nav, .sort-nav, .item-content, .theme-popover, .theme-signin,
.sku-line, .sku-line-images img, .tb-thumb ul.am-slides li, .tb-booth, .img-info,
.ipt, .cart-content table, .article-cover, .article-nav-button,
.goods-recommend-body .item, .slider-content, .goods-qrcode,
.goods-category-s .category-content .all-goods,
.b2b-product-detail .item-inform, .b2b-product-detail .introduce,
.b2b-product-detail .parameters-content-base, .b2b-product-detail .tb-detail-panel-base,
.b2b-goods-inquiry, .international-region-code code,
.country-mobile-input .country-code-select, .extraction-address-item,
.guest-address-draft, .memo-input, .link-list .am-panel,
ul.address-list li.address-default, .store-item {
    border-radius: var(--flat-radius) !important;
}

/* Circles that must stay circular (icon controls, dots, avatars). */
.am-direction-nav a, .am-control-nav li a, .am-slider .am-direction-nav a,
.swiper-pagination-bullet, .goods-video-submit-start, .goods-video-submit-close,
.tt-rail__dot, .tt-hero__nav button, .tt-history__nav button,
.tt-hero__bullets .swiper-pagination-bullet, .theme-poptit .close,
img.avatar, .user-avatar img, .b2b-utility-user img {
    border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
   5. Gradients, gloss and decorative image treatments
   -------------------------------------------------------------------------- */
/* Top band: one solid scrim instead of a vertical gradient. */
.header,
.header.pc_fixed { background-image: none !important; }
.header:not(.pc_fixed) { background-color: rgba(18, 10, 10, .58) !important; }
.header.pc_fixed { background-color: var(--flat-surface) !important; }

.hsh-footer {
    background-image: none !important;
    background-color: var(--flat-dark-footer) !important;
}

.tt-progress { background-image: none !important; background-color: var(--flat-brass) !important; }
.tt-hero__scrim { background-image: none !important; background-color: rgba(12, 6, 5, .6) !important; }
.tt-hero__grain { display: none !important; }
/* The dark panels used to take their colour from the gradient removed above, so
   they need an explicit solid base - otherwise their light text lands on the
   ivory canvas. The hero keeps its own maroon-ink base plus the photo scrim. */
.tt-panel--dark { background-image: none !important; }
.tt-home .tt-panel--dark:not(.tt-hero) { background-color: #2a0d0f !important; }
.tt-scope-card--cta { background-image: none !important; background-color: var(--flat-warm) !important; }
/* Photographic scrims are not UI gradients: the design language asks for a
   directional dark overlay so captions stay readable on top of real photos. */
.tt-home .tt-scene::after,
.tt-home .tt-case::after { background-image: none !important; background-color: rgba(18, 5, 6, .62) !important; }
.tt-case__go { background-image: none !important; }

/* Translucent pills that faked glass - keep a solid tint for contrast. */
.tt-hero__eyebrow { background-color: rgba(16, 6, 6, .62) !important; }
.tt-scene__tag { background-color: rgba(16, 6, 6, .7) !important; }
.tt-btn--ghost-light { background-color: rgba(16, 6, 6, .55) !important; }
.b2b-language-current { background-color: rgba(18, 10, 10, .72) !important; color: #fff !important; }
.header.pc_fixed .b2b-language-current { background-color: var(--flat-surface) !important; }

/* No photographic gloss, no decorative blur. */
.goods-images, .module-goods-grid-base .goods-images, .module-goods-list-base .goods-images,
.like-item a img, .browse .recommend-goods ul li .p-img img,
.module-goods-slider-binding .am-slider li .content-item img {
    filter: none !important;
    -webkit-filter: none !important;
}
.floor .aggregation .category-bg-images { display: none !important; }

/* --------------------------------------------------------------------------
   6. Header chrome
   -------------------------------------------------------------------------- */
/* Interior pages render the B2B storefront chrome (utility bar + brand and
   search band + category navigation). The legacy .header nav was built for the
   homepage hero; on those pages it floated over the utility bar and the two
   link rows printed on top of each other. One header per page: keep the
   storefront chrome, drop the legacy overlay. The homepage keeps .header. */
@media only screen and (min-width: 768px) {
    body:has(.b2b-utility-bar) .header { display: none !important; }
}

/* -- utility bar: one dark single-line strip ------------------------------ */
.b2b-utility-bar {
    border-bottom: 1px solid var(--flat-on-dark-line) !important;
    color: var(--flat-on-dark) !important;
    background-color: var(--flat-dark) !important;
}
.b2b-utility-inner { min-height: 40px !important; gap: 16px !important; }
/* one row that can never overlap: the description takes only the leftover
   space and truncates, the contact block keeps its natural width. */
.b2b-utility-inner { flex-wrap: nowrap !important; }
.b2b-utility-inner > span {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.b2b-utility-contact {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    white-space: nowrap;
}
.b2b-utility-quick { flex: 0 0 auto !important; }
.b2b-utility-bar a, .b2b-utility-bar .b2b-language-current { white-space: nowrap !important; }
@media only screen and (max-width: 1280px) {
    .b2b-utility-inner > span { display: none !important; }
}
@media only screen and (max-width: 1100px) {
    .b2b-utility-contact > a[href^="mailto:"],
    .b2b-utility-contact > a[href^="tel:"],
    .b2b-utility-contact > a[target="_blank"] { display: none !important; }
}

/* language / currency switch, placed inside the utility bar */
.b2b-utility-bar .b2b-language-switch { position: relative; display: inline-flex; align-items: center; }
.b2b-utility-bar .b2b-language-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--flat-radius);
    background-color: transparent !important;
    color: #e7e1dd !important;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
}
.b2b-utility-bar .b2b-language-current .am-icon-angle-down { display: none; }
.b2b-utility-bar .b2b-language-current::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform var(--flat-dur) var(--flat-ease);
}
.b2b-utility-bar .b2b-language-switch.am-active .b2b-language-current::after { transform: rotate(180deg); }
.b2b-utility-bar .b2b-language-current:hover,
.b2b-utility-bar .b2b-language-switch.am-active .b2b-language-current {
    border-color: #fff;
    color: #fff !important;
    background-color: rgba(255, 255, 255, .12) !important;
}
.b2b-utility-bar .b2b-language-switch .am-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1300;
    display: none;
    min-width: 170px;
    margin: 6px 0 0;
    padding: 4px;
    border: 1px solid var(--flat-line);
    border-radius: var(--flat-radius);
    background: var(--flat-surface);
    box-shadow: none !important;
}
.b2b-utility-bar .b2b-language-switch:hover > .am-dropdown-content,
.b2b-utility-bar .b2b-language-switch.am-active > .am-dropdown-content { display: block; }
.b2b-utility-bar .am-dropdown-content::before,
.b2b-utility-bar .am-dropdown-content::after { display: none; }
.b2b-utility-bar .b2b-currency-switch > .am-dropdown-content {
    right: 0;
    left: auto;
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.b2b-utility-bar .am-dropdown-content > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: var(--flat-radius);
    color: var(--flat-body);
    font-size: 12.5px;
    line-height: 1.4;
}
.b2b-utility-bar .am-dropdown-content > li > a:hover,
.b2b-utility-bar .am-dropdown-content > .am-active > a {
    color: var(--flat-oxblood);
    background-color: var(--flat-oxblood-tint);
}
.b2b-utility-bar .am-dropdown-content > .am-active > a { font-weight: 700; }
/* -- brand + search band --------------------------------------------------- */
.b2b-site-header {
    border-bottom: 1px solid var(--flat-line) !important;
    background-color: var(--flat-surface) !important;
}
.b2b-site-header-inner { min-height: 88px !important; padding: 12px 0 !important; gap: 24px !important; }
.b2b-site-header .b2b-brand-logo img { height: 44px !important; max-height: 44px !important; }
.b2b-header-hot-keywords { font-size: 12px !important; }
.b2b-header-hot-keywords a, .b2b-header-hot-keywords-list a { color: var(--flat-muted) !important; }
.b2b-header-hot-keywords a:hover, .b2b-header-hot-keywords-list a:hover { color: var(--flat-oxblood) !important; }

.b2b-header-search-group {
    height: 46px !important;
    border: 1px solid var(--flat-control-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.b2b-header-search-group:hover,
.b2b-header-search-group:focus-within {
    border-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
}
.b2b-header-search-group input { color: var(--flat-ink) !important; font-size: 13px !important; }
.b2b-header-search-group input::placeholder { color: var(--flat-muted) !important; }
.b2b-header-search-group button {
    flex: 0 0 96px !important;
    width: 96px !important;
    border-radius: 0 !important;
    background-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
}
.b2b-header-search-group button:hover,
.b2b-header-search-group button:focus { background-color: var(--flat-oxblood-dark) !important; box-shadow: none !important; }
.b2b-header-search-group button:active { transform: none !important; }
.b2b-header-search-group button .iconfont { font-size: 16px !important; }
.b2b-header-search-group button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* -- category navigation --------------------------------------------------- */
.b2b-main-nav {
    border-bottom: 1px solid var(--flat-line) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.b2b-main-nav .b2b-nav-list > li > a {
    border-radius: var(--flat-radius) !important;
    color: var(--flat-ink) !important;
}
.b2b-main-nav .b2b-nav-list > li > a:hover,
.b2b-main-nav .b2b-nav-list > li > a.active,
.b2b-main-nav .b2b-nav-list > li > a:focus {
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-oxblood-tint) !important;
}
.b2b-main-nav .b2b-nav-list > li.active > a { box-shadow: inset 0 -2px 0 var(--flat-oxblood) !important; }
.b2b-nav-catalog, .b2b-nav-toggle {
    border: 1px solid var(--flat-line-strong) !important;
    border-radius: var(--flat-radius) !important;
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-surface) !important;
}
.b2b-nav-catalog:hover, .b2b-nav-toggle:hover { border-color: var(--flat-oxblood) !important; }
.b2b-nav-inquiry, .b2b-header-cta, .b2b-goods-inquiry-btn {
    border: 1px solid var(--flat-oxblood) !important;
    border-radius: var(--flat-radius) !important;
    color: #fff !important;
    background-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
}
.b2b-nav-inquiry:hover, .b2b-header-cta:hover, .b2b-goods-inquiry-btn:hover {
    border-color: var(--flat-oxblood-dark) !important;
    color: #fff !important;
    background-color: var(--flat-oxblood-dark) !important;
}

/* every pane / dropdown shares one flat panel treatment */
.b2b-nav-submenu, .b2b-category-mega, .b2b-procurement-mega, .am-dropdown-content {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.am-dropdown-content > li > a { color: var(--flat-body); }
.am-dropdown-content > li > a:hover,
.am-dropdown-content > li.am-active > a { color: var(--flat-oxblood); background-color: var(--flat-oxblood-tint); }

.b2b-site-header a:focus-visible,
.b2b-main-nav a:focus-visible,
.b2b-main-nav button:focus-visible,
.hsh-footer a:focus-visible {
    outline: 2px solid var(--flat-brass) !important;
    outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   7. Procurement mega menu - restore the layout it never received
   header_nav.html renders .b2b-procurement-mega, but only hsh-minimal.css
   (which the hotel theme never loads) ever positioned it. The panel therefore
   printed in normal flow and pushed every page ~1000px down. This is its flat
   pane: absolute under the trigger, hairline separated, no shadow.
   -------------------------------------------------------------------------- */
.b2b-main-nav .b2b-nav-list > li.has-submenu { position: relative; }
.b2b-main-nav .b2b-procurement-mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    display: none;
    width: max-content;
    max-width: min(96vw, 1120px);
    padding: 0;
    line-height: 1.5;
    text-align: left;
}
.b2b-main-nav .has-submenu:hover > .b2b-procurement-mega,
.b2b-main-nav .has-submenu:focus-within > .b2b-procurement-mega,
.b2b-main-nav .has-submenu.is-open > .b2b-procurement-mega,
.b2b-main-nav .has-submenu:hover > .b2b-nav-submenu,
.b2b-main-nav .has-submenu.is-open > .b2b-nav-submenu {
    display: flex;
}
.b2b-procurement-mega-main { flex: 1 1 auto; min-width: 0; padding: 18px 20px 20px; }
.b2b-procurement-mega-intro {
    margin: 0 0 14px;
    color: var(--flat-muted);
    font-size: 13px;
    line-height: 1.6;
}
.b2b-procurement-mega-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--flat-line);
    background-color: var(--flat-line);
}
.b2b-procurement-mega-wide .b2b-procurement-mega-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b2b-procurement-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: var(--flat-surface) !important;
    background-image: none !important;
    text-decoration: none;
    transition: background-color var(--flat-dur) var(--flat-ease);
}
.b2b-procurement-link:hover, .b2b-procurement-link:focus, .b2b-procurement-link.active {
    background-color: var(--flat-oxblood-tint) !important;
    box-shadow: none !important;
}
.b2b-procurement-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--flat-line-strong);
    border-radius: var(--flat-radius) !important;
    color: var(--flat-oxblood);
    background-color: var(--flat-warm);
    box-shadow: none !important;
    font-size: 15px;
}
.b2b-procurement-link.active .b2b-procurement-link-icon,
.b2b-procurement-link:hover .b2b-procurement-link-icon {
    border-color: var(--flat-oxblood);
    color: #fff;
    background-color: var(--flat-oxblood);
}
.b2b-procurement-link-copy { min-width: 0; }
.b2b-procurement-link-copy strong { display: block; color: var(--flat-ink); font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.b2b-procurement-link-copy small { display: block; margin-top: 3px; color: var(--flat-muted); font-size: 11.5px; line-height: 1.5; }
.b2b-procurement-link-arrow { margin-left: auto; color: var(--flat-muted); font-size: 12px; opacity: .5; }
.b2b-procurement-feature {
    flex: 0 0 260px;
    padding: 18px 20px 20px;
    border: 0;
    border-left: 1px solid var(--flat-line);
    border-radius: 0 !important;
    background-color: var(--flat-warm) !important;
    background-image: none !important;
}
.b2b-procurement-feature::before { display: none !important; }
.b2b-procurement-feature-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--flat-brass-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.b2b-procurement-feature strong { display: block; color: var(--flat-ink); font-size: 15px; line-height: 1.4; }
.b2b-procurement-feature p { margin: 8px 0 0; color: var(--flat-body); font-size: 12.5px; line-height: 1.65; }
.b2b-procurement-feature a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: 14px;
    padding: 0 16px;
    border: 1px solid var(--flat-oxblood);
    border-radius: var(--flat-radius) !important;
    color: #fff !important;
    background-color: var(--flat-oxblood);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.b2b-procurement-feature a:hover, .b2b-procurement-feature a:focus {
    border-color: var(--flat-oxblood-dark);
    background-color: var(--flat-oxblood-dark);
}
/* Small screens: the panel becomes a plain in-flow list under its trigger. */
@media only screen and (max-width: 640px) {
    .b2b-main-nav .b2b-procurement-mega {
        position: static;
        width: 100%;
        max-width: none;
        border: 0 !important;
        border-top: 1px solid var(--flat-line) !important;
    }
    .b2b-main-nav .has-submenu.is-open > .b2b-procurement-mega { display: block; }
    .b2b-procurement-mega { flex-direction: column; }
    .b2b-procurement-mega-links { grid-template-columns: minmax(0, 1fr); }
    .b2b-procurement-feature { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--flat-line); }
}

/* category mega pane */
.b2b-category-mega-left { background-color: var(--flat-warm) !important; }
.b2b-category-mega-right { background-color: var(--flat-surface) !important; }
.b2b-category-root-link {
    border-radius: var(--flat-radius) !important;
    color: var(--flat-body) !important;
    box-shadow: none !important;
}
.b2b-category-root-link:hover,
.b2b-category-root-link:focus,
.b2b-category-root-link.is-active {
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: inset 2px 0 0 var(--flat-oxblood) !important;
}
.b2b-category-root-image {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
}
.b2b-category-image-placeholder { border-radius: var(--flat-radius) !important; }
.b2b-category-panel-heading { border-bottom: 1px solid var(--flat-line) !important; }
.b2b-category-panel-heading a { color: var(--flat-ink) !important; }
.b2b-category-group-title { color: var(--flat-oxblood) !important; }
.b2b-category-leaves a { color: var(--flat-body) !important; }
.b2b-category-leaves a:hover, .b2b-category-leaves a:focus { color: var(--flat-oxblood) !important; }

/* legacy header mega panes (homepage) - the one surface that floats
   --------------------------------------------------------------------------
   The primary navigation popup is the only overlay in this theme, so it keeps a
   real elevation: a two-layer soft shadow, an eased fade/rise entrance and a
   brass rail along its top edge. Everything inside stays flat - 1px hairlines,
   solid warm tints, small chips - so the panel still reads as part of the
   language of the page behind it.
   -------------------------------------------------------------------------- */
.header .navbar .pc_menu .pc_menu_right > li > .sub {
    border: 1px solid var(--flat-line) !important;
    border-top: 2px solid var(--flat-brass) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 24px 48px -26px rgba(36, 9, 11, .34),
                0 6px 16px -10px rgba(36, 9, 11, .18) !important;
}
/* a panel taller than the viewport scrolls inside itself instead of running off
   the bottom of the screen (the products pane is the tall one) */
.header .navbar .pc_menu .pc_menu_right > li > .sub.sub-mega {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
/* entrance: short fade + rise - the flat layer had switched this off */
.header .navbar .pc_menu .pc_menu_right > li:hover > .sub,
.header .navbar .pc_menu .pc_menu_right > li:focus-within > .sub,
.header .navbar .pc_menu .pc_menu_right > li.is-open > .sub {
    animation: hsh-sub-card-in .24s var(--flat-ease) both !important;
}
.header .navbar .pc_menu .pc_menu_right > li.hsh-mega-li:hover > .sub.sub-mega,
.header .navbar .pc_menu .pc_menu_right > li.hsh-mega-li:focus-within > .sub.sub-mega,
.header .navbar .pc_menu .pc_menu_right > li.hsh-mega-li.is-open > .sub.sub-mega {
    animation: hsh-sub-mega-in .26s var(--flat-ease) both !important;
}

/* -- panel head: brass marker, taller title, chip CTA ---------------------- */
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__head {
    position: relative;
    gap: 10px 24px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--flat-line);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background-color: var(--flat-brass);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .18em;
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__kicker::before {
    content: "";
    width: 16px;
    height: 1px;
    background-color: var(--flat-brass);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__title {
    margin-top: 6px;
    font-size: 21px;
    letter-spacing: -.01em;
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__more {
    display: inline-flex;
    padding: 8px 14px;
    border: 1px solid var(--flat-line-strong);
    border-radius: var(--flat-radius);
    background-color: var(--flat-surface);
    font-size: 13px;
    line-height: 1;
    transition: color var(--flat-dur) var(--flat-ease),
                border-color var(--flat-dur) var(--flat-ease),
                background-color var(--flat-dur) var(--flat-ease);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__more > span {
    transition: transform var(--flat-dur) var(--flat-ease);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__more:hover,
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__more:focus {
    border-color: var(--flat-oxblood);
    background-color: var(--flat-oxblood-tint);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__more:hover > span,
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-mega__more:focus > span {
    transform: translateX(3px);
}

/* -- brochure rows: breathing room, brass rail on hover, slide-in chevron --- */
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links { gap: 4px 20px; }
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__item a {
    position: relative;
    /* two explicit rows: title first, description underneath. The element
       defaults to display:block here, which runs the two spans together on one
       line, and the theme's inherited text-align:center centres them. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 32px 12px 14px;
    border-left: 2px solid transparent;
    border-radius: var(--flat-radius);
    text-align: left;
    transition: color var(--flat-dur) var(--flat-ease),
                background-color var(--flat-dur) var(--flat-ease),
                border-color var(--flat-dur) var(--flat-ease);
}
/* the panel's own single-class type rules (header.html) lose to a theme
   declaration, so the whole popup renders at the body size. Re-declare the
   hierarchy with a panel-scoped selector. */
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__name {
    font-size: 15px;
    line-height: 1.45;
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__desc {
    font-size: 13px;
    line-height: 1.6;
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-cats__name {
    font-size: 14px;
    line-height: 1.45;
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__item a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 1.5px solid var(--flat-brass);
    border-right: 1.5px solid var(--flat-brass);
    opacity: 0;
    transform: translateX(-4px) rotate(45deg);
    transition: opacity var(--flat-dur) var(--flat-ease),
                transform var(--flat-dur) var(--flat-ease);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__item a:hover,
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__item a:focus {
    background-color: var(--flat-warm);
    border-left-color: var(--flat-brass);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__item a:hover::after,
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links__item a:focus::after {
    opacity: 1;
    transform: translateX(0) rotate(45deg);
}
/* one or two entries keep two columns - a single card floating in a three
   column row is what made the "Contact us" popup look unfinished */
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links:has(> .hsh-links__item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-links:has(> .hsh-links__item:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

/* -- category cards: brass frame ------------------------------------------ */
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-cats { gap: 16px 18px; }
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-cats__item a {
    /* media above name in one column, both left-aligned (the card defaults to
       display:block, which ran the name across the card edge) */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 10px 10px 12px;
    border: 1px solid var(--flat-line);
    border-radius: 4px;
    background-color: var(--flat-surface);
    text-align: left;
    transition: border-color var(--flat-dur) var(--flat-ease),
                background-color var(--flat-dur) var(--flat-ease);
}
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-cats__item a:hover,
.header .navbar .pc_menu .pc_menu_right > li > .sub .hsh-cats__item a:focus {
    border-color: var(--flat-brass);
    background-color: #fffdf9;
}

/* the flat layer disables motion globally; the panel keeps its own switch */
@media (prefers-reduced-motion: reduce) {
    .header .navbar .pc_menu .pc_menu_right > li:hover > .sub,
    .header .navbar .pc_menu .pc_menu_right > li:focus-within > .sub,
    .header .navbar .pc_menu .pc_menu_right > li.is-open > .sub {
        animation: none !important;
    }
}
/* The header's generic `.nav span { color:#999 }` was overriding the mega menu's
   own label colours (2.9:1 on white). One extra class restores the intended
   dark ink / muted grey without out-ranking the hover states. */
.header .hsh-links__name,
.header .hsh-cats__name,
.header .hsh-mega__title { color: var(--flat-ink); }
.header .hsh-links__desc { color: var(--flat-muted); }
.header .hsh-mega__kicker { color: var(--flat-brass-strong); }

/* mobile bottom navigation */
.mobile-navigation {
    border-top: 1px solid var(--flat-line) !important;
    box-shadow: none !important;
}
/* --------------------------------------------------------------------------
   8. Buttons, forms, badges, pagination, tabs, tables
   -------------------------------------------------------------------------- */
.am-btn {
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
    transition: color var(--flat-dur) var(--flat-ease),
                background-color var(--flat-dur) var(--flat-ease),
                border-color var(--flat-dur) var(--flat-ease);
}
.am-btn:active { transform: none !important; }
.am-btn-primary { border-color: var(--flat-oxblood) !important; color: #fff !important; background-color: var(--flat-oxblood) !important; }
.am-btn-primary:hover, .am-btn-primary:focus { border-color: var(--flat-oxblood-dark) !important; background-color: var(--flat-oxblood-dark) !important; }
.am-btn-secondary { border-color: var(--flat-oxblood) !important; color: var(--flat-oxblood) !important; background-color: transparent !important; }
.am-btn-secondary:hover, .am-btn-secondary:focus { color: #fff !important; background-color: var(--flat-oxblood) !important; }
.am-btn-default { border: 1px solid var(--flat-line-strong) !important; color: var(--flat-ink) !important; background-color: var(--flat-surface) !important; }
.am-btn-default:hover, .am-btn-default:focus { border-color: var(--flat-oxblood) !important; color: var(--flat-oxblood) !important; }
.am-btn-danger { border-color: #a8442c !important; background-color: #a8442c !important; }
.am-input-group-btn > .am-btn.am-btn-default:hover { border-color: #f0f0f0 !important; }

.am-form select, .am-form textarea,
.am-form input[type='text'], .am-form input[type='password'], .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='date'], .am-form input[type='datetime'],
.am-form input[type='datetime-local'], .am-form input[type='month'], .am-form input[type='week'],
.am-form input[type='time'], .am-form input[type='color'],
.am-form-field, .am-input-inner, .ipt, .memo-input, .guest-address-draft .am-form-field {
    border: 1px solid var(--flat-control-line) !important;
    border-radius: var(--flat-radius) !important;
    color: var(--flat-ink) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.am-form select:focus, .am-form textarea:focus, .am-form input:focus,
.am-form-field:focus, .ipt:focus, .am-input-inner:focus {
    border-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
    outline: 2px solid var(--flat-oxblood);
    outline-offset: 0;
}
input:-webkit-autofill { box-shadow: 0 0 0 1000px var(--flat-surface) inset !important; }
.am-form label, .am-form-group > label { color: var(--flat-ink); font-weight: 700; }
.am-form-help { color: var(--flat-muted); }

.am-badge { border-radius: var(--flat-radius) !important; font-weight: 700; }
.am-badge-default { color: var(--flat-body); background-color: var(--flat-warm); }
.am-badge-primary { color: #fff; background-color: var(--flat-oxblood); }
.am-badge-success { color: #fff; background-color: #2f6b45; }
.am-badge-warning { color: #fff; background-color: #9a6a15; }
.am-badge-danger, .am-badge-secondary { color: #fff; background-color: #a8442c; }

.am-pagination > li > a, .am-pagination > li > span,
.am-pagination-container > li > a, .am-pagination-container > li > span {
    border: 1px solid var(--flat-control-line) !important;
    border-radius: var(--flat-radius) !important;
    color: var(--flat-body) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.am-pagination > .am-active > a, .am-pagination > .am-active > span,
.am-pagination-container > .am-active > a, .am-pagination-container > .am-active > span {
    border-color: var(--flat-oxblood) !important;
    color: #fff !important;
    background-color: var(--flat-oxblood) !important;
}
.am-pagination > li > a:hover, .am-pagination-container > li > a:hover {
    border-color: var(--flat-oxblood) !important;
    color: var(--flat-oxblood) !important;
}

.am-tabs-nav > li > a { border-radius: var(--flat-radius) var(--flat-radius) 0 0 !important; }
.am-tabs-border > ul.am-tabs-nav,
.b2b-product-detail .introduce-main ul.am-tabs-nav { border-bottom: 1px solid var(--flat-line) !important; }
.am-tabs-nav > li.am-active > a,
.introduce-main ul.am-tabs-nav > li.am-active > a {
    border-color: var(--flat-line) !important;
    border-bottom-color: var(--flat-surface) !important;
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: inset 0 2px 0 var(--flat-oxblood) !important;
}
.am-alert { border-radius: var(--flat-radius) !important; border-width: 1px; }

.am-panel, .am-panel-default {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.am-panel-default > .am-panel-hd {
    border-bottom: 1px solid var(--flat-line) !important;
    border-radius: 0 !important;
    color: var(--flat-ink) !important;
    background-color: var(--flat-warm) !important;
    font-weight: 700;
}

.am-table { border-color: var(--flat-line) !important; background-color: var(--flat-surface); }
.am-table > thead > tr > th {
    border-bottom: 1px solid var(--flat-line-strong) !important;
    color: var(--flat-ink) !important;
    background-color: var(--flat-warm) !important;
    font-weight: 700;
}
.am-table > tbody > tr > td { border-top: 1px solid var(--flat-line) !important; }
.am-table > tbody > tr:hover > td { background-color: #fbf9f5; }

/* --------------------------------------------------------------------------
   9. Product discovery surfaces (grid / list / category / search)
   -------------------------------------------------------------------------- */
.module-goods-grid-base .item, .module-goods-list-base .item {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--flat-dur) var(--flat-ease),
                background-color var(--flat-dur) var(--flat-ease);
}
.module-goods-grid-base .item:hover, .module-goods-list-base .item:hover,
.b2b-search-page .module-goods-grid-base .item:hover,
.b2b-search-page .module-goods-list-base .item:hover {
    border-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
    transform: none !important;
}
.module-goods-grid-base .item .goods-info, .module-goods-list-base .item .goods-info {
    background-color: var(--flat-warm) !important;
}
.goods-title a { color: var(--flat-ink) !important; }
.module-goods-grid-base .item:hover .goods-title a,
.module-goods-list-base .item:hover .goods-title a,
.goods-title a:hover { color: var(--flat-oxblood) !important; }
.price, .price strong, .goods-price, .goods-sale-price-value, .goods-sale-price {
    color: var(--flat-oxblood) !important;
}
.price .unit, .original-price { color: var(--flat-muted) !important; }

/* category page */
.category-nav, .zero-title, .zero-left > ul, .zero-right, .zero-right-content,
.zero-title.am-sticky, .item.am-padding-main, .model-one .item-content,
.module-goods-list-container, .pagelibrary {
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.category-nav, .zero-right, .zero-right-content, .model-one .item-content {
    border: 1px solid var(--flat-line) !important;
    background-color: var(--flat-surface) !important;
}
ul.category-nav li, .b2b-category-page ul.category-nav li {
    border-radius: var(--flat-radius) !important;
    color: var(--flat-body);
}
ul.category-nav li:hover, ul.category-nav li.active,
.b2b-category-page ul.category-nav li:hover, .b2b-category-page ul.category-nav li.active {
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-oxblood-tint) !important;
    box-shadow: inset 2px 0 0 var(--flat-oxblood) !important;
}
.zero-right-content:hover, .model-one .item-content:hover, .zero-right-title a:hover {
    border-color: var(--flat-oxblood) !important;
    transform: none !important;
    box-shadow: none !important;
}
.zero-content-img a { border: 1px solid var(--flat-line); background-color: var(--flat-warm); }
.zero-content-img a:hover { transform: none !important; border-color: var(--flat-oxblood); }
.zero-right-item .item, .two-content ul li { border-color: var(--flat-line) !important; }

/* sort / filter bar */
.sort-nav {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.sort-nav li.active a, .b2b-search-page .sort-nav li.active a {
    color: var(--flat-oxblood) !important;
    background-color: transparent !important;
    box-shadow: inset 0 -2px 0 var(--flat-oxblood) !important;
}
.sort-nav li a:hover, .sort-nav-map-price:hover .sort-nav-map-price-content { color: var(--flat-oxblood) !important; }
.sort-nav-map-price-content, .map-base-tips, .map-images-text-items ul > li > a,
.map-text-items ul > li > a {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.sort-nav-map-price-input input:focus { border-color: var(--flat-oxblood) !important; }
.b2b-search-page #search-map .am-offcanvas-bar, .am-offcanvas-bar {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
/* --------------------------------------------------------------------------
   10. Product detail
   -------------------------------------------------------------------------- */
.b2b-product-detail .item-inform, .b2b-product-detail .introduce {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
}
.b2b-product-detail .item-inform .detail-title { color: var(--flat-ink) !important; }
.b2b-product-detail .item-inform .detail-title::after { height: 2px; background-color: var(--flat-oxblood); }
.b2b-product-detail .items.goods-price, .b2b-product-detail .goods-sale-price-value {
    color: var(--flat-oxblood) !important;
}
.b2b-product-detail .item-inform .items .name { color: var(--flat-muted) !important; }
.b2b-product-detail .tb-booth, .b2b-product-detail .tb-pic img,
.b2b-product-detail .goods-images { border-radius: var(--flat-radius) !important; }
.b2b-product-detail .tb-thumb, .b2b-product-detail .tb-thumb ul.am-slides li,
.tb-thumb ul.am-slides li {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
}
.b2b-product-detail .tb-thumb ul.am-slides .tb-selected,
.tb-thumb ul.am-slides .tb-selected { border-color: var(--flat-oxblood) !important; box-shadow: none !important; }
.theme-signin-left .sku-line, .sku-line {
    border: 1px solid var(--flat-control-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
}
.theme-signin-left .sku-line.selected, .theme-signin-left .sku-line:hover,
.sku-line.selected, .sku-line:hover { border-color: var(--flat-oxblood) !important; color: var(--flat-oxblood); }
.sku-line-images img { border-radius: var(--flat-radius) !important; }
.sku-not-active, .sku-items-disabled, .sku-dont-choose {
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-warm) !important;
}
.b2b-product-detail .tb-detail-panel-base, .b2b-product-detail .parameters-content-base,
.b2b-product-detail .goods-base-data-content, .b2b-product-detail .parameters-content-detail,
.b2b-product-detail .tb-detail-panel-top-price-content {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.b2b-product-detail .b2b-goods-inquiry {
    border: 1px solid var(--flat-line) !important;
    background-color: var(--flat-warm) !important;
}
.b2b-product-detail .goods-recommend .goods-recommend-body .item {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
    box-shadow: none !important;
}
.b2b-product-detail .goods-recommend .goods-recommend-body .item:hover {
    border-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
    transform: none !important;
}
.b2b-product-detail .item-inform .am-btn-primary,
.b2b-product-detail .item-inform .am-btn-secondary.cart-submit,
.b2b-product-detail .item-inform .buy-submit,
.b2b-product-detail .item-inform .cart-submit {
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.theme-poptit .close { text-shadow: none !important; }
.goods-qrcode, .img-info { border: 1px solid var(--flat-line) !important; }

/* --------------------------------------------------------------------------
   11. Cart, checkout, order and account
   -------------------------------------------------------------------------- */
.cart-content table, .cart-content table tbody tr, .cart-content table tbody td {
    border-color: var(--flat-line) !important;
    background-color: var(--flat-surface) !important;
}
.cart-nav > .am-container { border-color: var(--flat-line) !important; }
ul.address-list li.address-default, ul.address-list li.address-default.address-cart {
    border: 1px solid var(--flat-oxblood) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.address-list, .addr-list, .addr-drop-title a { border-color: var(--flat-line) !important; }
.guest-address-draft {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-warm) !important;
}
.memo-input, .link-list .am-panel, .extraction-address-item, .business-item ul li {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.business-item ul li:hover { border-color: var(--flat-oxblood) !important; transform: none !important; }
ul.progress li .digital { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.order-state .am-alert { border-radius: var(--flat-radius) !important; }
.order-goods > table > thead > tr > th { background-color: var(--flat-warm) !important; }
.user-content .user-content-body, .various .am-panel { border-radius: var(--flat-radius) !important; }
.user-menu {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.international-region-code code {
    border-radius: var(--flat-radius) !important;
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-warm) !important;
}
.country-mobile-input .country-code-select,
.country-mobile-input input[name="accounts"] { border-radius: var(--flat-radius) !important; }

/* --------------------------------------------------------------------------
   12. Articles, CMS and custom view pages
   -------------------------------------------------------------------------- */
.article-sidebar .am-panel { border: 1px solid var(--flat-line) !important; box-shadow: none !important; }
.article-nav-button { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.article-content .article-right .category-content-list li .article-cover,
.article-content .article-right .category-content-list li .article-cover-describe {
    border-radius: var(--flat-radius) !important;
}
.article-content .article-right .category-content-list li:hover .article-cover,
.article-content .article-right .category-content-list li:hover .article-cover-describe { transform: none !important; }
.richtext img, .customview-content img { border-radius: var(--flat-radius); }
.customview-content [class*="card"], .customview-content [class*="panel"],
.customview-content [class*="box"], .customview-content [class*="tile"],
.customview-content [class*="deck"] { box-shadow: none !important; }
.breadcrumb-data { border-bottom: 1px solid var(--flat-line); background-color: transparent; }
/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.hsh-footer { border-top: 1px solid rgba(255, 255, 255, .08); }
.hsh-footer__logo, .b2b-footer-logo { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.hsh-footer__social a, a.hsh-footer__cta, .hsh-footer__cta {
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.hsh-footer__contact-image img, .b2b-global-footer-contact-image img { border-radius: var(--flat-radius) !important; }
.hsh-footer a { transition: color var(--flat-dur) var(--flat-ease); }

/* --------------------------------------------------------------------------
   14. Homepage layer (tt-home)
   -------------------------------------------------------------------------- */
.tt-home .tt-btn { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.tt-home .tt-btn--primary {
    border-color: var(--flat-oxblood) !important;
    background-color: var(--flat-oxblood) !important;
}
.tt-home .tt-btn--primary:hover,
.tt-home .tt-btn--primary:focus {
    border-color: var(--flat-oxblood-dark) !important;
    background-color: var(--flat-oxblood-dark) !important;
}
.tt-home .tt-btn--outline { border-radius: var(--flat-radius) !important; }
.tt-home .tt-quicklink {
    border: 1px solid var(--flat-line-strong) !important;
    border-radius: var(--flat-radius) !important;
    background-color: var(--flat-surface) !important;
}
.tt-home .tt-quicklink:hover, .tt-home .tt-quicklink:focus {
    border-color: var(--flat-oxblood) !important;
    color: var(--flat-oxblood) !important;
}
.tt-home .tt-tab, .tt-home .tt-tabs { border-radius: var(--flat-radius) !important; }
.tt-home .tt-tab.active, .tt-home .tt-tab.is-active,
.tt-home .tt-tab[aria-selected="true"] { background-color: var(--flat-oxblood) !important; color: #fff !important; }

/* hero: solid scrim, no film grain, no Ken Burns drift */
.tt-home .tt-hero__eyebrow { border-radius: var(--flat-radius) !important; }
.tt-home .tt-hero__bg .tt-hero__scene,
.tt-home .tt-hero__bg .swiper-slide-active .tt-hero__scene {
    transform: none !important;
    transition: none !important;
}
.tt-home .tt-hero__product img, .tt-home .tt-hero__products img { filter: none !important; }
.tt-home .tt-hero__note i { background-image: none !important; }

/* cards: hairline panes, no lift, no image zoom */
.tt-home .tt-scope-card, .tt-home .tt-hot-card, .tt-home .tt-svc-card,
.tt-home .tt-tl-card, .tt-home .tt-promise, .tt-home .tt-case,
.tt-home .tt-scene, .tt-home .tt-pillar, .tt-home .tt-matrix, .tt-home .tt-stat,
.tt-home .tt-logo, .tt-home .tt-history__bar, .tt-home .tt-cases__panel,
.tt-home .tt-form, .tt-home .tt-inquiry {
    border: 1px solid var(--flat-line) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.tt-home .tt-scope-card, .tt-home .tt-hot-card, .tt-home .tt-svc-card,
.tt-home .tt-tl-card, .tt-home .tt-promise, .tt-home .tt-matrix,
.tt-home .tt-stat, .tt-home .tt-form {
    background-color: var(--flat-surface) !important;
}
.tt-home .tt-panel--ivory .tt-scope-card, .tt-home .tt-panel--ivory .tt-hot-card,
.tt-home .tt-panel--ivory .tt-svc-card, .tt-home .tt-panel--ivory .tt-promise,
.tt-home .tt-panel--ivory .tt-tl-card, .tt-home .tt-panel--ivory .tt-matrix,
.tt-home .tt-panel--ivory .tt-stat {
    background-color: var(--flat-surface) !important;
}
.tt-home .tt-scope-card:hover, .tt-home .tt-hot-card:hover, .tt-home .tt-svc-card:hover,
.tt-home .tt-tl-card:hover, .tt-home .tt-promise:hover, .tt-home .tt-scope-card--cta:hover,
.tt-home .tt-case:hover, .tt-home .tt-scene:hover, .tt-home .tt-logo:hover {
    border-color: var(--flat-oxblood) !important;
    box-shadow: none !important;
    transform: none !important;
}
.tt-home .tt-scope-card__media img, .tt-home .tt-hot-card__media img,
.tt-home .tt-svc-card__media img, .tt-home .tt-scene img, .tt-home .tt-case img {
    transition: none !important;
}
.tt-home .tt-scope-card__index, .tt-home .tt-hot-card__rank, .tt-home .tt-scope-card__tag,
.tt-home .tt-hot-card__tag, .tt-home .tt-scene__tag, .tt-home .tt-matrix__badge,
.tt-home .tt-pillar__icon, .tt-home .tt-svc-card__icon, .tt-home .tt-promise__icon {
    border-radius: var(--flat-radius) !important;
    box-shadow: none !important;
}
.tt-home .tt-hot-card__tag, .tt-home .tt-scope-card__tag { border: 1px solid var(--flat-line-strong) !important; }
.tt-home .tt-scope-card--cta { border-style: solid !important; }
.tt-home .tt-scope-card__cta-arrow { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.tt-home .tt-history__nav button { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.tt-home .tt-history__progress, .tt-home .tt-history__bar { background-image: none !important; }
.tt-home .tt-field input, .tt-home .tt-field textarea {
    border: 1px solid var(--flat-control-line) !important;
    border-radius: var(--flat-radius) !important;
    background-color: #fbf9f5 !important;
    box-shadow: none !important;
}
.tt-home .tt-field input:focus, .tt-home .tt-field textarea:focus {
    border-color: var(--flat-brass) !important;
    outline: 2px solid var(--flat-brass);
    outline-offset: 0;
}
/* The enquiry card is a light surface, but it inherited the dark band's light
   text colour - labels and body copy inside it must be dark. */
.tt-home .tt-form { color: var(--flat-body) !important; }
.tt-home .tt-form__submit { border-radius: var(--flat-radius) !important; box-shadow: none !important; }
.tt-home .tt-inquiry { background-color: transparent !important; }
.tt-home .tt-case__go i, .tt-home .tt-scope-card__more i { transition: none !important; }
/* --------------------------------------------------------------------------
   15. Motion - colour and border only
   -------------------------------------------------------------------------- */
/* no hover lift, no press scale, no image zoom anywhere in the theme */
.module-goods-grid-base .item:hover, .module-goods-list-base .item:hover,
.module-goods-grid-base .item:hover .goods-images,
.module-goods-list-base .item:hover .goods-images,
.b2b-search-page .module-goods-grid-base .item:hover,
.b2b-search-page .module-goods-grid-base .item:hover .goods-images,
.b2b-search-page .module-goods-list-base .item:hover,
.b2b-card:hover, .b2b-product-card:hover, .b2b-product-card:hover .b2b-product-image img,
.b2b-story-card:hover .b2b-story-image img, .b2b-process-item:hover,
.tt-home .tt-btn:hover, .tt-home .tt-btn:active,
.tt-home .tt-scope-card:hover, .tt-home .tt-scope-card:hover .tt-scope-card__media img,
.tt-home .tt-hot-card:hover, .tt-home .tt-hot-card:hover .tt-hot-card__media img,
.tt-home .tt-svc-card:hover, .tt-home .tt-svc-card:hover .tt-svc-card__media img,
.tt-home .tt-tl-card:hover, .tt-home .tt-promise:hover, .tt-home .tt-quicklink:hover,
.tt-home .tt-scope-card--cta:hover, .tt-home .tt-scene:hover img, .tt-home .tt-case:hover img,
.tt-home .tt-logo:hover,
.like-item a img:hover, .browse .recommend-goods ul li .p-img img:hover,
.module-goods-slider-binding .am-slider li .content-item img:hover,
.zero-content-img a:hover, .b2b-header-search-group button:active,
.goods-images:hover, .tb-pic img:hover, .product .product_content .list:hover,
.xiu_product_list .content .boxlist .list:hover {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .header, .header *, .hsh-footer, .hsh-footer *, .tt-home, .tt-home *,
    [class*="b2b-"], .module-goods-grid-base .item, .module-goods-list-base .item {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* --------------------------------------------------------------------------
   16. Accent normalisation (legacy orange / teal / green leftovers)
   -------------------------------------------------------------------------- */
/* The category, search and product-detail palettes are declared on their own
   page class, so they have to be re-pointed there as well. */
.b2b-category-page, .b2b-search-page, .catalog-page {
    --catalog-accent: var(--flat-oxblood);
    --catalog-accent-hover: var(--flat-oxblood-dark);
    --catalog-ink: var(--flat-ink);
    --catalog-text: var(--flat-body);
    --catalog-muted: var(--flat-muted);
    --catalog-line: var(--flat-line);
    --catalog-soft: var(--flat-warm);
    --catalog-warm: var(--flat-oxblood-tint);
    --catalog-surface: var(--flat-surface);
    --catalog-radius: var(--flat-radius);
}
.b2b-product-detail {
    --goods-accent: var(--flat-oxblood);
    --goods-accent-hover: var(--flat-oxblood-dark);
    --goods-ink: var(--flat-ink);
    --goods-text: var(--flat-body);
    --goods-muted: var(--flat-muted);
    --goods-line: var(--flat-line);
    --goods-soft: var(--flat-warm);
    --goods-warm: var(--flat-oxblood-tint);
    --goods-surface: var(--flat-surface);
    --goods-radius: var(--flat-radius);
}
.b2b-home {
    --b2b-green: var(--flat-brass);
    --b2b-green-deep: var(--flat-oxblood);
    --b2b-green-soft: var(--flat-oxblood-tint);
    --b2b-blue: var(--flat-brass);
    --b2b-bg: var(--flat-canvas);
    --b2b-bg-soft: var(--flat-warm);
    --b2b-bg-blue: var(--flat-warm);
    --b2b-surface-warm: var(--flat-warm);
    --b2b-border: var(--flat-line);
    --b2b-border-blue: var(--flat-line);
    --b2b-line: var(--flat-line);
    --b2b-line-strong: var(--flat-line-strong);
    --b2b-ink: var(--flat-ink);
    --b2b-ink-soft: var(--flat-body);
    --b2b-heading: var(--flat-ink);
    --b2b-text: var(--flat-body);
    --b2b-muted: var(--flat-muted);
}

/* Hard-coded warm-orange / teal leftovers in the storefront chrome. */
.b2b-header-search-group:focus-within,
.b2b-header-search-group:hover:not(:focus-within) { border-color: var(--flat-oxblood) !important; box-shadow: none !important; }
.b2b-header-search-group input { caret-color: var(--flat-oxblood) !important; }
.b2b-header-search-group button:focus { background-color: var(--flat-oxblood) !important; }
.b2b-header-search {
    border: 1px solid var(--flat-oxblood) !important;
    border-radius: var(--flat-radius) !important;
    color: var(--flat-oxblood) !important;
    background-color: transparent !important;
}
.b2b-header-search:hover, .b2b-header-search:focus { color: #fff !important; background-color: var(--flat-oxblood) !important; }
.b2b-header-cta, .b2b-nav-catalog, .b2b-nav-inquiry, .b2b-goods-inquiry-btn {
    background-color: var(--flat-oxblood) !important;
    color: #fff !important;
}
.b2b-nav-catalog { background-color: var(--flat-surface) !important; color: var(--flat-oxblood) !important; }
.b2b-header-cta:hover, .b2b-nav-catalog:hover, .b2b-nav-inquiry:hover, .b2b-nav-inquiry:focus,
.b2b-goods-inquiry-btn:hover {
    border-color: var(--flat-oxblood-dark) !important;
    background-color: var(--flat-oxblood-dark) !important;
    color: #fff !important;
}
.b2b-nav-brand-mark { background-color: var(--flat-oxblood) !important; }
.b2b-nav-item-icon, .b2b-product-category-heading-icon,
.b2b-category-group-title::before, .b2b-category-leaves a::before,
.b2b-new-arrivals .b2b-new-heading > div > span::before,
.b2b-top-sellers:not(.b2b-new-arrivals) .b2b-new-heading > div > span::before { color: var(--flat-oxblood) !important; }
.b2b-product-category-heading-icon { background-color: var(--flat-oxblood-tint) !important; }
.b2b-nav-submenu li a:hover, .b2b-nav-submenu li a:focus, .b2b-nav-submenu li a.active {
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-oxblood-tint) !important;
}
.b2b-language-current:hover {
    border-color: var(--flat-oxblood) !important;
    color: var(--flat-oxblood-dark) !important;
    background-color: var(--flat-oxblood-tint) !important;
}
.b2b-utility-bar .b2b-language-current:hover {
    border-color: #fff !important;
    color: #fff !important;
    background-color: rgba(255, 255, 255, .12) !important;
}
.b2b-language-switch .am-dropdown-content > li > a:hover,
.b2b-language-switch .am-dropdown-content > .am-active > a {
    color: var(--flat-oxblood) !important;
    background-color: var(--flat-oxblood-tint) !important;
}
.b2b-global-footer-contact h4:after, .b2b-global-footer-column h4:after { background-color: var(--flat-brass) !important; }
.items-nav-title .more .more-link { background-color: var(--flat-oxblood) !important; border-radius: var(--flat-radius) !important; }

/* Category root icons: hairline by default, 2px accent border when active. */
.b2b-category-page .zero-item > a { border-color: var(--flat-line) !important; }
.b2b-category-page .zero-title ul.am-slides li.active .zero-item > a,
.b2b-category-page .zero-item > a:focus-visible {
    border-color: var(--flat-oxblood) !important;
    border-width: 2px !important;
    box-shadow: none !important;
}

/* Focus rings the legacy "outline: 0" resets would otherwise remove. */
.b2b-utility-inner > a:focus-visible, .b2b-utility-contact > a:focus-visible,
.b2b-utility-quick a:focus-visible, .b2b-utility-user a:focus-visible,
.b2b-utility-bar .b2b-language-current:focus-visible,
.b2b-site-header a:focus-visible, .b2b-header-search-group input:focus-visible,
.b2b-main-nav a:focus-visible, .b2b-main-nav button:focus-visible,
.hsh-footer a:focus-visible, .am-btn:focus-visible, .am-dropdown-toggle:focus-visible {
    outline: 2px solid var(--flat-brass) !important;
    outline-offset: 2px !important;
}
.b2b-utility-inner > a:focus-visible, .b2b-utility-contact > a:focus-visible,
.b2b-utility-quick a:focus-visible, .b2b-utility-user a:focus-visible,
.b2b-utility-bar .b2b-language-current:focus-visible,
.b2b-header-search-group input:focus-visible {
    outline-color: #fff !important;
}
/* Product detail: the page paints its own inset glows on gallery thumbs and
   pill buttons; a scoped reset plus equal-specificity overrides flatten them. */
.b2b-product-detail, .b2b-product-detail * { box-shadow: none !important; }
.b2b-product-detail .item-inform .am-btn-primary.buy-submit,
.b2b-product-detail .item-inform .am-btn-primary,
.b2b-product-detail .item-inform .am-btn-secondary.cart-submit,
.b2b-product-detail .item-inform .am-btn-secondary,
.b2b-product-detail .item-inform .am-btn,
.b2b-product-detail .b2b-goods-inquiry .b2b-goods-inquiry-btn,
.b2b-product-detail .b2b-goods-inquiry-btn.b2b-goods-inquiry-inline,
.b2b-product-detail .introduce-main .buy-submit-top > button,
.b2b-product-detail .goods-recommend .goods-recommend-body .item {
    border-radius: var(--flat-radius) !important;
}
.b2b-product-detail .clearfix-left .tb-thumb li a,
.b2b-product-detail .tb-thumb ul.am-slides li a { box-shadow: none !important; border-radius: var(--flat-radius) !important; }
/* --------------------------------------------------------------------------
   17. Modal / overlay surfaces
   -------------------------------------------------------------------------- */
.am-modal-dialog, .am-modal-hd, .am-modal-bd, .am-popup-inner, .am-popup-hd,
.am-popup-bd, .am-offcanvas-bar, .am-offcanvas-content, .theme-popover,
.theme-poptit, .am-dropdown-flip {
    box-shadow: none !important;
    border-radius: var(--flat-radius) !important;
    border: 1px solid var(--flat-line);
}
.am-modal-dialog { border: 0; }

/* --------------------------------------------------------------------------
   18. Custom view (CMS) pages
   Ninety bespoke marketing pages ship their own css and are not wrapped in
   .customview-content (the newest ones mount straight under <body>), so the
   page type is used as the scope. Nineteen of them share one module kit (page
   roots ending in "-page"), the older ones live under main.page-main, and the
   newest three use the ttsv- / tta- / ttdl- kits.

   Flat pass: drop elevation, unify corners to 2px, keep the motifs that are
   genuinely circular, and replace the soft maroon gradients on the newest
   pages with solid brand fills. Hard-stop two-tone splits (a flat device in
   its own right) and photo-legibility scrims elsewhere are left untouched.
   -------------------------------------------------------------------------- */
body.index-customview-index { color: var(--flat-body); }

body.index-customview-index [class$="-page"],
body.index-customview-index main.page-main {
    --shadow-sm: none;
    --shadow-md: none;
}
/* blanket: every element of a CMS page loses elevation and gets the flat
   corner (unclassed <button>/<article>/<input> elements included). */
body.index-customview-index * {
    box-shadow: none !important;
    border-radius: var(--flat-radius) !important;
}
/* the motifs that read as dots, hubs or icon nodes stay round. Each selector
   repeats the scope of the blanket rule above so it wins on specificity. */
body.index-customview-index .am-direction-nav a,
body.index-customview-index .am-control-nav li a,
body.index-customview-index .swiper-pagination-bullet,
body.index-customview-index .theme-poptit .close,
body.index-customview-index img.avatar,
body.index-customview-index .user-avatar img,
body.index-customview-index .b2b-utility-user img,
body.index-customview-index [class$="-page"] .pbw-check-grid i,
body.index-customview-index [class$="-page"] .pbw-process-list li > span,
body.index-customview-index [class$="-page"] .pbw-logistics-hub,
body.index-customview-index [class$="-page"] .pbw-node,
body.index-customview-index [class$="-page"] .pba-hub,
body.index-customview-index [class$="-page"] .pgs-route span,
body.index-customview-index [class$="-page"] .poc-hub,
body.index-customview-index [class$="-page"] .poc-point,
body.index-customview-index [class$="-page"] .pqr-order > div:not(.pqr-order-head) i,
body.index-customview-index [class$="-page"] .pgb-hub,
body.index-customview-index [class$="-page"] .pgb-node,
body.index-customview-index [class$="-page"] .pbn-trend-list > a > span,
body.index-customview-index [class$="-page"] .pbn-trend-list > a > i,
body.index-customview-index main.page-main .card-number,
body.index-customview-index .tt-sv .ttsv-card__point::before,
body.index-customview-index .tt-sv .ttsv-step__num,
body.index-customview-index .tt-about .tta-timeline__item::before,
body.index-customview-index .tt-about .tta-value__icon,
body.index-customview-index .tt-about .tta-lightbox__close,
body.index-customview-index .tt-dl .ttdl-hero__badge {
    border-radius: 50% !important;
}

/* solid scrims instead of the fade-to-dark hero gradients */
body.index-customview-index .ttsv-hero__body,
body.index-customview-index .ttdl-hero__body {
    background-image: none !important;
    background-color: rgba(24, 8, 9, .66) !important;
}
/* solid brand fills instead of soft maroon blends */
body.index-customview-index .ttsv-cta {
    background-image: none !important;
    background-color: var(--flat-oxblood) !important;
}
body.index-customview-index .tta-section--dark {
    background-image: none !important;
    background-color: #331012 !important;
}
body.index-customview-index .tta-section--inquiry {
    background-image: none !important;
    background-color: #2a0d0f !important;
}
body.index-customview-index .tta-timeline::before {
    background-image: none !important;
    background-color: var(--flat-brass) !important;
}
body.index-customview-index a[class$="-primary"], body.index-customview-index button[class$="-primary"],
body.index-customview-index a[class$="-btn"], body.index-customview-index button[class$="-btn"] {
    background-image: none !important;
}
.hsh-cap-hero, .hsh-deck-section { background-image: none !important; }
.hsh-cap-hero { background-color: #0b1f19 !important; }
.hsh-cap-hero button, .hsh-deck-section button {
    background-image: none !important;
    box-shadow: none !important;
    border-radius: var(--flat-radius) !important;
}

/* --------------------------------------------------------------------------
   19. One content shell for the whole site (the homepage ladder)
   --------------------------------------------------------------------------
   The homepage (tt-home) is the reference: 1000px, 1200px from 1260px and
   1500px from 1600px, with a 92% cap so the column can never overflow the
   viewport. Every other page family used a different system - interior pages
   75/85/95% capped at 1440px, the storefront chrome 1760px plus a fluid
   gutter, the CMS page kits 1000-1500px with their own gutters, the footer
   75/85/95%. All of them are re-pointed here, so every page (homepage,
   category, search, product, cart, account, article and every custom view
   page) is centred on the same grid at the same breakpoints.
   -------------------------------------------------------------------------- */
:root {
    --flat-content: 1000px;
    /* 32px of breathing room, so the column can never overflow the viewport the
       way a bare 1000px shell does between 781px and 1030px. */
    --flat-shell: min(var(--flat-content), calc(100% - 32px));

    /* interior page content + breadcrumb (the gztaitang content system) */
    --gz-content-width: 100%;
    --gz-content-max: var(--flat-shell);

    /* storefront chrome inners and every custom-view "shell" container */
    --pbh-content-max: var(--flat-shell);
    --pbh-content-gutter: 0px;

    /* footer */
    --hsh-f-shell: 100%;
}
@media only screen and (min-width: 1260px) { :root { --flat-content: 1200px; } }
@media only screen and (min-width: 1600px) { :root { --flat-content: 1500px; } }
@media only screen and (max-width: 780px) { :root { --flat-content: 92%; --flat-shell: 92%; } }

/* The homepage keeps its own --tt-shell ladder; give it the same safety cap so
   the reference column and every other page agree at every width (below
   1030px a bare 1000px column no longer fits and was being clipped). */
@media only screen and (min-width: 781px) and (max-width: 1259px) {
    .tt-home { --tt-shell: min(1000px, calc(100% - 32px)); }
}

/* Storefront navigation in the 768-1000px band: the shell is narrower than the
   navigation's natural width, so the items tighten instead of overflowing. */
@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .b2b-main-nav .b2b-nav-list > li { margin-right: 1px !important; }
    .b2b-main-nav .b2b-nav-list > li > a {
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: 11.5px !important;
    }
    .b2b-utility-contact { gap: 8px !important; }
}

/* The same tokens are re-declared on the custom-view page root, so mirror them
   there (an element-level declaration beats an inherited one). */
body .customview-content > [class$="-page"] {
    --pbh-content-max: var(--flat-shell) !important;
    --pbh-content-gutter: 0px !important;
}

/* Interior page content: keep it centred whatever the source rule declared. */
body .b2b-search-page > .b2b-catalog-inner,
body main.category-list-container,
body .system-goods-detail > .am-container,
body .cart-content > .am-container,
body .article-content,
body .user-main,
body .user-forgetpwd-container,
body .user-login-container > .am-container,
body .user-register-container > .am-container,
body:not(.index-design-index) > .am-container:not(#goods-category),
body .breadcrumb-data > .am-container {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Footer: one shared shell everywhere. The homepage used to cap its own footer
   at 1440px/75%, which no longer lined up with its content column. */
.hsh-footer__inner,
.hsh-footer__main {
    width: 100% !important;
    max-width: var(--flat-shell) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Custom-view shells that hard-code their own width (the b2bp page kit, the
   capability deck, ttsv / tta / ttdl). A shell nested inside another shell
   keeps its designed inset. */
body.index-customview-index [class*="-shell"]:not([class*="-shell"] [class*="-shell"]) {
    width: 100% !important;
    max-width: var(--flat-shell) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}


/* The b2bp page kit and the pb* kits painted decorative brass glows, dark
   blends and gradient buttons. They all sit on an explicit base colour, so a
   solid fill keeps the same contrast with one flat surface. */
body.index-customview-index [class$="-hero"],
body.index-customview-index [class*="-hero "],
body.index-customview-index .b2bp-hero,
body.index-customview-index .b2bp-cta,
body.index-customview-index .b2bp-cover,
body.index-customview-index .b2bp-cover::after,
body.index-customview-index .b2bp-hero-panel,
body.index-customview-index [class$="-final"],
body.index-customview-index [class*="-final "] {
    background-image: none !important;
}
body.index-customview-index [class$="-hero"]:not(.is-light),
body.index-customview-index [class*="-hero "]:not(.is-light),
body.index-customview-index .b2bp-hero:not(.is-light),
body.index-customview-index .b2bp-cta,
body.index-customview-index [class$="-final"],
body.index-customview-index [class*="-final "] {
    background-color: var(--b2bp-navy, #0b1720) !important;
}
body.index-customview-index .b2bp-cover { background-color: var(--b2bp-navy-2, #13293b) !important; }
body.index-customview-index .b2bp-cover::after { background-color: var(--b2bp-brass, #b98a4e) !important; }
body.index-customview-index a[class$="-primary"],
body.index-customview-index button[class$="-primary"],
body.index-customview-index [class*="-primary "] {
    background-image: none !important;
    background-color: var(--b2bp-brass, #b98a4e) !important;
}

/* --------------------------------------------------------------------------
   20. Legacy gztaitang-markup CMS pages (202-205)
   --------------------------------------------------------------------------
   Four custom views (honours, hotel-solutions / procurement plan,
   restaurant-solutions, contact-us) are still built on the old Taitang skin
   markup: their bands (.navigation, .taitang_main, .purchasing_plan, .contact)
   mount straight under <body> and their column is .content, which the skin
   sized at 66.6-75% capped at 1440px. Align those columns with the same shell
   as every other page. The full-bleed honours slider band (.honor) keeps its
   own width - it is a deliberate edge-to-edge gallery.
   -------------------------------------------------------------------------- */
body.index-customview-index > div:not(.honor) > .content {
    width: 100% !important;
    max-width: var(--flat-shell) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Unified header: on interior commerce pages the fixed header needs a matching
   document-flow offset, otherwise it covers the first content block. */
:root { --hsh-fixed-header-height: 110px; }
@media (max-width: 1200px) {
    :root { --hsh-fixed-header-height: 60px; }
}

body[class^="index-buy-"],
body[class^="index-order"],
body[class^="index-pay-"],
body[class^="index-user"],
body[class^="index-safety"],
body[class^="index-personal"],
body[class^="index-message-"] {
    padding-top: var(--hsh-fixed-header-height);
}

body[class^="index-cart-"] {
    padding-top: var(--hsh-fixed-header-height);
}
/* Cart rows and the empty-state message carry their own top margins. Reset
   them so both states start exactly below the fixed header. */
body[class^="index-cart-"] .cart-content,
body[class^="index-cart-"] .cart-content > :first-child {
    margin-top: 0 !important;
}
/* Keep the custom checkbox icon inside its row instead of positioning it
   against the document (which placed it under the fixed header). */
body[class^="index-cart-"] .cart-content label.am-checkbox-inline,
body[class^="index-cart-"] .cart-content .guest-checkbox {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}
body[class^="index-cart-"] .cart-content .am-ucheck-icons {
    position: absolute;
    top: 0;
    left: 0;
}
body[class^="index-category-"] {
    padding-top: var(--hsh-fixed-header-height);
}


/* --------------------------------------------------------------------------
   Brand logo visibility
   --------------------------------------------------------------------------
   The transparent/dark header uses a white version of the configured logo,
   while the scrolled white header uses the original logo. The legacy mobile
   rule in common.css hid the uploaded logo and replaced it with a fixed,
   dark-red footer image, which is nearly invisible on the dark header used by
   cart, checkout and other interior pages. Keep the configured logo instead,
   in both header states, on every page. */
.header:not(.pc_fixed) .navbar .pc_menu .pc_logo a img {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}
.header.pc_fixed .navbar .pc_menu .pc_logo a img {
    filter: none !important;
    -webkit-filter: none !important;
}
@media (max-width: 550px) {
    .header .navbar .pc_menu .pc_logo a img {
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important;
        -webkit-filter: brightness(0) invert(1) !important;
    }
    .header .navbar .pc_menu .pc_logo a::after {
        content: none !important;
        display: none !important;
    }
    .header.pc_fixed .navbar .pc_menu .pc_logo a img {
        filter: none !important;
        -webkit-filter: none !important;
    }
}


/* --------------------------------------------------------------------------
   Order payment popup: PayPal + wire transfer
   -------------------------------------------------------------------------- */
.order-payment-manual {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--flat-line);
}
.order-payment-manual__head { margin-bottom: 12px; }
.order-payment-manual__title {
    margin: 0 0 4px;
    color: var(--flat-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}
.order-payment-manual__desc {
    margin: 0;
    color: var(--flat-muted);
    font-size: 12px;
    line-height: 1.6;
}
.order-payment-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.order-payment-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--flat-line);
    border-radius: var(--flat-radius);
    background: var(--flat-surface);
    color: var(--flat-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--flat-dur) var(--flat-ease), background-color var(--flat-dur) var(--flat-ease);
}
.order-payment-method:hover,
.order-payment-method:focus-visible {
    border-color: var(--flat-oxblood);
    background: var(--flat-oxblood-tint);
    color: var(--flat-ink);
    text-decoration: none;
}
.order-payment-method:focus-visible {
    box-shadow: 0 0 0 2px var(--flat-oxblood);
    outline: none;
}
.order-payment-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--flat-radius);
    background: var(--flat-warm);
    color: var(--flat-oxblood);
    font-size: 22px;
}
.order-payment-method__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.order-payment-method__name {
    color: var(--flat-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}
.order-payment-method__desc {
    color: var(--flat-muted);
    font-size: 12px;
    line-height: 1.6;
}
.order-payment-method__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--flat-oxblood);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.order-wire-transfer-modal .am-modal-dialog { max-width: 760px; }
.order-wire-info__line {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--flat-line);
    color: var(--flat-ink);
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}
.order-wire-info__line:last-child { border-bottom: 0; }
.order-wire-info__tips {
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--flat-brass-pale);
    background: var(--flat-brass-pale);
    color: var(--flat-brass-strong);
    font-size: 12px;
    line-height: 1.6;
}
.order-wire-info__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
    border: 1px solid var(--flat-line);
}
.order-wire-info__reference {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--flat-line);
    color: var(--flat-muted);
    font-size: 13px;
    line-height: 1.6;
}
.order-wire-info__reference strong { color: var(--flat-ink); }
.order-wire-info__empty {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--flat-line);
    background: var(--flat-warm);
    color: var(--flat-muted);
    font-size: 13px;
    line-height: 1.6;
}
@media (max-width: 767px) {
    .order-payment-method { padding: 14px; }
    .order-wire-info__line { font-size: 13px; }
}

.order-payment-support-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}
.order-payment-support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--flat-oxblood);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}
.order-payment-support-link:hover,
.order-payment-support-link:focus-visible {
    color: var(--flat-oxblood-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}