/* ==========================================================================
   CMobiler — public storefront theme
   Warm cream ground, terracotta primary, forest-green secondary, heavily
   rounded surfaces. Loaded last from the public header partials so it wins
   over the built user.css / ecommvue.css bundles without touching them.
   Scoped to body.u-bg-c, which both public layouts already set, so the vendor
   console (body.vendor-body) is untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body.u-bg-c {
    --pf-ground: #f7f1ea;
    --pf-surface: #ffffff;
    --pf-surface-alt: #fbf7f3;
    --pf-ink: #26221f;
    --pf-ink-soft: #5c554f;
    --pf-muted: #857c74;
    --pf-line: #ebe1d7;
    --pf-line-firm: #ddd0c2;

    --pf-terracotta: #d9694a;
    --pf-terracotta-deep: #c1553a;
    --pf-terracotta-wash: #fbede7;
    /* darkened until it clears 4.5:1 on the wash, for small text on chips */
    --pf-terracotta-ink: #a54831;

    --pf-forest: #216b4e;
    --pf-forest-deep: #1a5540;

    --pf-danger: #b3402f;

    --pf-radius-lg: 24px;
    --pf-radius: 14px;
    --pf-radius-sm: 10px;
    --pf-pill: 999px;

    --pf-shadow-sm: 0 1px 2px rgba(38, 34, 31, .04), 0 4px 12px rgba(38, 34, 31, .05);
    --pf-shadow: 0 2px 6px rgba(38, 34, 31, .05), 0 14px 40px rgba(38, 34, 31, .07);

    --pf-font: "Poppins", "Helvetica Neue", Arial, sans-serif;

    background: var(--pf-ground) !important;
    color: var(--pf-ink);
    font-family: var(--pf-font);
    -webkit-font-smoothing: antialiased;
}

body.u-bg-c h1,
body.u-bg-c h2,
body.u-bg-c h3,
body.u-bg-c h4,
body.u-bg-c h5 {
    font-family: var(--pf-font);
    color: var(--pf-ink);
    letter-spacing: -.02em;
    font-weight: 600;
}

body.u-bg-c a { color: var(--pf-terracotta); }
body.u-bg-c a:hover,
body.u-bg-c a:focus { color: var(--pf-terracotta-deep); }

/* Floating pill navbar ----------------------------------------------------
   The reference puts the nav on a white pill floating over the cream ground
   rather than a full-bleed coloured bar. */
body.u-bg-c #nav-bar {
    position: sticky;
    top: 0;
    z-index: 1060;
    background: var(--pf-ground) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* The sticky nav sits at 1060, above Bootstrap's modal (1050) and backdrop
   (1040), so it painted over the top of the login modal. Lift modals, and
   their backdrop, above the nav and the filter drawer (1070). */
body.u-bg-c .modal { z-index: 1080; }
body.u-bg-c .modal-backdrop { z-index: 1075; }

body.u-bg-c #nav-bar hr,
body.u-bg-c #nav-bar hr.colorgraph,
body.u-bg-c .indigo-header hr,
body.u-bg-c .indigo-header hr.colorgraph,
body.u-bg-c #article-nav hr,
body.u-bg-c #article-nav hr.colorgraph,
body.u-bg-c .articleNav hr,
body.u-bg-c .articleNav hr.colorgraph,
body.u-bg-c hr.colorgraph {
    display: none !important;
    border: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.u-bg-c .indigo-header {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding-top: 18px;
    padding-bottom: 0;
}

body.u-bg-c .indigo-nav,
body.u-bg-c .navbar-default.indigo-nav {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-pill) !important;
    box-shadow: var(--pf-shadow-sm) !important;
    padding: 6px 18px;
    margin-bottom: 18px !important;
    min-height: 0;
}

/* While the bar is stacked (logo, search, and the opened menu), a 999px
   radius turns it into an oval. Use the normal corner radius through the
   hamburger range. */
@media (max-width: 991px) {
    body.u-bg-c .indigo-nav,
    body.u-bg-c .navbar-default.indigo-nav {
        border-radius: var(--pf-radius-lg) !important;
    }
}

body.u-bg-c .indigo-nav .navbar-nav > li > a {
    color: var(--pf-ink-soft) !important;
    background: transparent !important;
    font-weight: 500;
    font-size: 15px;
    border-radius: var(--pf-pill);
    padding: 9px 12px;
    transition: background .18s ease, color .18s ease;
}

body.u-bg-c .indigo-nav .navbar-nav > li > a:hover,
body.u-bg-c .indigo-nav .navbar-nav > li > a:focus {
    color: var(--pf-terracotta) !important;
    background: var(--pf-terracotta-wash) !important;
}

body.u-bg-c .indigo-nav .navbar-nav > li.active > a,
body.u-bg-c .indigo-nav .navbar-nav > li.open > a {
    color: var(--pf-terracotta) !important;
    background: var(--pf-terracotta-wash) !important;
}

body.u-bg-c .navbar-brand { padding: 6px 14px; height: auto; }
body.u-bg-c .navbar-brand img { max-height: 34px; width: auto; }

/* The collapse toggle kept the white icon bars from the old indigo bar, which
   made it invisible on the white pill. */
body.u-bg-c .navbar-default .navbar-toggle {
    border-color: var(--pf-line-firm);
    border-radius: var(--pf-radius-sm);
}

body.u-bg-c .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--pf-ink-soft) !important;
}

body.u-bg-c .navbar-default .navbar-toggle:hover,
body.u-bg-c .navbar-default .navbar-toggle:focus {
    background-color: var(--pf-terracotta-wash);
}

/* Search field in the nav */
body.u-bg-c .navbar-form .form-control,
body.u-bg-c .navbar-form input[type="text"],
body.u-bg-c .navbar-form input[type="search"] {
    background: var(--pf-surface-alt) !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-pill) !important;
    color: var(--pf-ink) !important;
    box-shadow: none !important;
    height: auto;
    padding: 9px 16px;
    font-size: 14px;
}

body.u-bg-c .navbar-form .form-control::placeholder { color: var(--pf-muted); }

body.u-bg-c .navbar-form .form-control:focus {
    border-color: var(--pf-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14) !important;
}

/* The magnifier label alignment & navbar search pill styling */
body.u-bg-c .icon-addon .glyphicon,
body.u-bg-c .icon-addon .fa,
body.u-bg-c .icon-addon.addon-lg .glyphicon,
body.u-bg-c .icon-addon.addon-lg .fa,
body.u-bg-c .navbar-form .icon-addon .glyphicon,
body.u-bg-c .navbar-form .icon-addon .fa {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: var(--pf-muted, #94a3b8) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

body.u-bg-c .navbar-search-widget,
body.u-bg-c .icon-addon.addon-lg,
body.u-bg-c .navbar-form .icon-addon {
    position: relative !important;
    height: 40px !important;
    display: block !important;
    width: 100% !important;
}

body.u-bg-c .icon-addon .form-control,
body.u-bg-c .icon-addon.addon-lg .form-control,
body.u-bg-c .navbar-form .icon-addon .form-control {
    height: 40px !important;
    padding-left: 44px !important;
    padding-right: 36px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    border-radius: var(--pf-pill, 999px) !important;
    background: var(--pf-surface-alt, #fdfbf7) !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    color: var(--pf-ink, #1e293b) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
}

body.u-bg-c .icon-addon .form-control:focus,
body.u-bg-c .icon-addon.addon-lg .form-control:focus,
body.u-bg-c .navbar-form .icon-addon .form-control:focus {
    border-color: var(--pf-terracotta, #d9694a) !important;
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14) !important;
    background: #ffffff !important;
}

body.u-bg-c .icon-addon:hover .glyphicon,
body.u-bg-c .icon-addon:hover .fa,
body.u-bg-c .icon-addon .form-control:focus + .glyphicon,
body.u-bg-c .icon-addon .form-control:focus + .fa,
body.u-bg-c .navbar-form .icon-addon:hover .glyphicon,
body.u-bg-c .navbar-form .icon-addon:hover .fa,
body.u-bg-c .navbar-form .icon-addon .form-control:focus + .glyphicon,
body.u-bg-c .navbar-form .icon-addon .form-control:focus + .fa {
    color: var(--pf-terracotta, #d9694a) !important;
}

/* From 768 to 991 the header sits in a 750px container, which cannot hold
   the logo, search field and full menu. Use the phone pattern: hamburger,
   full-width search, menu opens below the pill. */
@media (min-width: 768px) and (max-width: 991px) {
    body.u-bg-c .indigo-nav .navbar-header {
        float: none;
    }

    body.u-bg-c .indigo-nav .navbar-toggle {
        display: block;
        margin-right: 0;
    }

    body.u-bg-c .indigo-nav .navbar-collapse.collapse {
        display: none !important;
    }

    body.u-bg-c .indigo-nav .navbar-collapse.collapse.in {
        display: block !important;
        overflow: visible !important;
    }

    body.u-bg-c .indigo-nav .search-nav-col {
        float: none !important;
        width: 100% !important;
        clear: both;
        padding: 0;
    }

    body.u-bg-c .indigo-nav .navbar-form {
        margin: 0;
        padding: 8px 0 2px !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    body.u-bg-c .indigo-nav .input-group,
    body.u-bg-c .indigo-nav .typeahead__container,
    body.u-bg-c .indigo-nav .typeahead__field,
    body.u-bg-c .indigo-nav .typeahead__query,
    body.u-bg-c .indigo-nav .search-bar,
    body.u-bg-c .indigo-nav .icon-addon,
    body.u-bg-c .indigo-nav .navbar-form .form-control {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }

    body.u-bg-c .indigo-nav .navbar-collapse .navbar-nav,
    body.u-bg-c .indigo-nav .navbar-collapse .navbar-nav > li {
        float: none;
        width: 100%;
    }

    body.u-bg-c .indigo-nav .navbar-collapse .rightnav {
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Desktop navbar layout: allow search input to grow cleanly */
@media (min-width: 992px) {
    body.u-bg-c .indigo-nav {
        display: flex;
        align-items: center;
    }

    body.u-bg-c .indigo-nav .navbar-header {
        float: none;
        flex: 0 0 auto;
    }

    body.u-bg-c .indigo-nav > [class*="col-"] {
        float: none;
        flex: 1 1 auto !important;
        max-width: 680px !important;
        min-width: 220px !important;
    }

    body.u-bg-c .indigo-nav .navbar-nav > li > a {
        white-space: nowrap;
    }

    body.u-bg-c .indigo-nav .navbar-form {
        margin-top: 0;
        margin-bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    body.u-bg-c .indigo-nav .input-group,
    body.u-bg-c .indigo-nav .typeahead__container,
    body.u-bg-c .indigo-nav .typeahead__field,
    body.u-bg-c .indigo-nav .typeahead__query,
    body.u-bg-c .indigo-nav .search-bar,
    body.u-bg-c .indigo-nav .icon-addon {
        width: 100% !important;
        display: block !important;
    }

    body.u-bg-c .indigo-nav .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
        padding-bottom: 0;
        overflow: visible;
    }

    body.u-bg-c .indigo-nav .navbar-collapse .navbar-nav {
        float: none;
        display: flex;
        align-items: center;
        margin: 0;
    }

    body.u-bg-c .indigo-nav .navbar-collapse .navbar-nav > li {
        float: none;
    }

    body.u-bg-c .indigo-nav .navbar-collapse .rightnav {
        margin-left: auto;
    }
}

/* Below 1200 the full menu shares the row with the search box, so trim the
   link padding to keep everything on one line inside the pill. */
@media (min-width: 992px) and (max-width: 1199px) {
    body.u-bg-c .indigo-nav { padding: 6px 10px; }

    body.u-bg-c .indigo-nav .navbar-nav > li > a {
        padding: 9px 10px;
        font-size: 14px;
    }
}

/* Profile dropdown ---------------------------------------------------------
   Identity block (avatar / name / email / role chip), then grouped actions,
   then sign-out. Replaces the navbar-login/dropdown-menu-triangle layout. */
body.u-bg-c .rightnav .profile-menu {
    min-width: 300px;
    margin-top: 10px;
    padding: 8px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    font-size: 14px;
}

body.u-bg-c .profile-menu .profile-menu-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 12px;
}

body.u-bg-c .profile-menu .profile-menu-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

body.u-bg-c .profile-menu .profile-menu-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
}

body.u-bg-c .profile-menu .profile-menu-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.u-bg-c .profile-menu .profile-menu-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-ink);
    line-height: 1.35;
}

body.u-bg-c .profile-menu .profile-menu-email {
    font-size: 13px;
    color: var(--pf-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.u-bg-c .profile-menu .profile-menu-role {
    align-self: flex-start;
    margin-top: 5px;
    padding: 2px 10px;
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
    border-radius: var(--pf-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.6;
}

body.u-bg-c .profile-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--pf-radius-sm);
    background: transparent;
    color: var(--pf-ink-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

body.u-bg-c .profile-menu > li > a:hover,
body.u-bg-c .profile-menu > li > a:focus {
    background: var(--pf-terracotta-wash);
    color: var(--pf-ink);
}

/* Leading icons: nav.css pins .rightnav dropdown glyphicons to the panel's
   right edge (absolute right:20px top:10px); put them back in flow. */
body.u-bg-c .profile-menu > li > a .glyphicon {
    position: static;
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--pf-terracotta);
}

body.u-bg-c .profile-menu .divider {
    height: 1px;
    margin: 6px 4px;
    background-color: var(--pf-line);
}

body.u-bg-c .profile-menu .profile-menu-count {
    margin-left: auto;
    padding: 2px 8px;
    min-width: 24px;
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    color: var(--pf-ink-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

/* Notch pointing back at the trigger; only when the menu actually floats. */
@media (min-width: 768px) {
    body.u-bg-c .rightnav .profile-menu::before,
    body.u-bg-c .rightnav .profile-menu::after {
        content: "";
        position: absolute;
        bottom: 100%;
        border: 8px solid transparent;
    }

    body.u-bg-c .rightnav .profile-menu::before {
        right: 23px;
        border-width: 9px;
        border-bottom-color: var(--pf-line);
    }

    body.u-bg-c .rightnav .profile-menu::after {
        right: 24px;
        border-bottom-color: var(--pf-surface);
    }
}

/* Brands mega-dropdown menu ------------------------------------------------
   Columns for Weekly Brand and Popular Brands. Restyled to match the floating
   white pill navbar and storefront design system. */
body.u-bg-c .mega-dropdown {
    position: relative !important;
}

body.u-bg-c .mega-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px !important;
    padding: 18px 20px !important;
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--pf-shadow) !important;
    min-width: 580px;
    max-width: calc(100vw - 32px);
    width: max-content;
    z-index: 1050;
    list-style: none !important;
}

body.u-bg-c .mega-dropdown.open > .mega-dropdown-menu {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
}

/* Notch pointing back at the Brands trigger button */
@media (min-width: 768px) {
    body.u-bg-c .mega-dropdown-menu::before,
    body.u-bg-c .mega-dropdown-menu::after {
        content: "";
        position: absolute;
        bottom: 100%;
        border: 8px solid transparent;
    }

    body.u-bg-c .mega-dropdown-menu::before {
        left: 28px;
        border-width: 9px;
        border-bottom-color: var(--pf-line);
    }

    body.u-bg-c .mega-dropdown-menu::after {
        left: 29px;
        border-bottom-color: var(--pf-surface);
    }
}

/* Column structure */
body.u-bg-c .mega-dropdown-menu > li {
    float: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 18px !important;
    display: flex;
    flex-direction: column;
}

/* Weekly Brand column */
body.u-bg-c .mega-dropdown-menu > li:first-child {
    flex: 0 0 190px !important;
    width: 190px !important;
    padding-left: 0 !important;
    padding-right: 18px !important;
    border-right: 1px solid var(--pf-line) !important;
}

/* Popular Brands columns */
body.u-bg-c .mega-dropdown-menu > li:not(:first-child) {
    flex: 1 1 160px !important;
    min-width: 150px !important;
    width: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-left: none !important;
}

body.u-bg-c .mega-dropdown-menu > li:not(:first-child) + li {
    border-left: 1px solid var(--pf-line) !important;
}

body.u-bg-c .mega-dropdown-menu > li:last-child {
    padding-right: 0 !important;
}

/* Column lists and items */
body.u-bg-c .mega-dropdown-menu > li > ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.u-bg-c .mega-dropdown-menu > li > ul > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Headers */
body.u-bg-c .mega-dropdown-menu .dropdown-header,
body.u-bg-c .mega-dropdown-menu .dropdown-header-bfw {
    font-family: var(--pf-font) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--pf-muted) !important;
    padding: 0 8px 8px !important;
    margin: 0 0 6px 0 !important;
    border-bottom: 1px solid var(--pf-line) !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

body.u-bg-c .mega-dropdown-menu .dropdown-header strong,
body.u-bg-c .mega-dropdown-menu .dropdown-header-bfw strong,
body.u-bg-c .mega-dropdown-menu .dropdown-header .indigo-text,
body.u-bg-c .mega-dropdown-menu .dropdown-header-bfw .indigo-text {
    color: var(--pf-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* Brand links */
body.u-bg-c .mega-dropdown-menu > li > ul > li > a.submenu,
body.u-bg-c .mega-dropdown-menu > li > ul > li > a {
    display: flex !important;
    align-items: center;
    padding: 5px 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--pf-ink-soft) !important;
    border-radius: var(--pf-radius-sm) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    transition: background .15s ease, color .15s ease !important;
}

body.u-bg-c .mega-dropdown-menu > li > ul > li > a.submenu:hover,
body.u-bg-c .mega-dropdown-menu > li > ul > li > a.submenu:focus,
body.u-bg-c .mega-dropdown-menu > li > ul > li > a:hover,
body.u-bg-c .mega-dropdown-menu > li > ul > li > a:focus {
    color: var(--pf-terracotta) !important;
    background: var(--pf-terracotta-wash) !important;
}

body.u-bg-c .mega-dropdown-menu > li > ul > li > a i,
body.u-bg-c .mega-dropdown-menu > li > ul > li > a .icon-file-alt {
    display: none !important;
}

/* Weekly Brand content */
body.u-bg-c .mega-dropdown-menu .fa-mobile {
    color: var(--pf-line-firm) !important;
    margin: 12px 0 6px !important;
    display: inline-block;
}

body.u-bg-c .mega-dropdown-menu p {
    color: var(--pf-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 4px 0 !important;
}

body.u-bg-c .mega-dropdown-menu .divider {
    height: 1px !important;
    margin: 12px 0 !important;
    background-color: var(--pf-line) !important;
}

body.u-bg-c .mega-dropdown-menu a[title="All Brands"] {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--pf-terracotta) !important;
    background: var(--pf-terracotta-wash) !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-pill) !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
    margin-top: 4px;
}

body.u-bg-c .mega-dropdown-menu a[title="All Brands"]:hover,
body.u-bg-c .mega-dropdown-menu a[title="All Brands"]:focus {
    background: var(--pf-terracotta) !important;
    color: #ffffff !important;
    border-color: var(--pf-terracotta) !important;
}

body.u-bg-c .mega-dropdown-menu .carousel .thumbnail {
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-radius-sm) !important;
    padding: 6px !important;
    margin-bottom: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.u-bg-c .mega-dropdown-menu .carousel h4 small {
    color: var(--pf-ink-soft) !important;
    font-size: 12px !important;
    display: block;
    margin-bottom: 8px;
}

body.u-bg-c .mega-dropdown-menu .carousel .btn-primary {
    background: var(--pf-terracotta) !important;
    border-color: var(--pf-terracotta) !important;
    color: #fff !important;
    border-radius: var(--pf-pill) !important;
    font-size: 12px !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
}

body.u-bg-c .mega-dropdown-menu .carousel .btn-primary:hover {
    background: var(--pf-terracotta-deep) !important;
    border-color: var(--pf-terracotta-deep) !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
    body.u-bg-c .mega-dropdown-menu {
        position: static !important;
        display: none;
        flex-direction: column !important;
        min-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid var(--pf-line) !important;
        border-radius: var(--pf-radius) !important;
        padding: 12px !important;
        margin-top: 8px !important;
    }

    body.u-bg-c .mega-dropdown.open > .mega-dropdown-menu {
        display: flex !important;
    }

    body.u-bg-c .mega-dropdown-menu > li:first-child {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        border-right: none !important;
        margin-bottom: 12px !important;
    }

    body.u-bg-c .mega-dropdown-menu > li:not(:first-child) {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        border-left: none !important;
        border-top: 1px solid var(--pf-line) !important;
        padding: 12px 0 0 0 !important;
        margin-top: 12px !important;
    }

    body.u-bg-c .mega-dropdown-menu::before,
    body.u-bg-c .mega-dropdown-menu::after {
        display: none !important;
    }
}

/* Profile edit page --------------------------------------------------------
   Identity hero (avatar / name / photo controls), segmented Profile/Password
   tabs, and the form card. Replaces the hovercard/justified-button layout. */
body.u-bg-c .profile-page {
    max-width: 880px;
    margin: 0 auto;
}

body.u-bg-c .profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 22px 24px;
    margin-bottom: 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
}

body.u-bg-c .profile-hero-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body.u-bg-c .profile-hero-avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

body.u-bg-c .profile-hero-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .02em;
}

body.u-bg-c .profile-hero-name {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}

body.u-bg-c .profile-hero-email {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--pf-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.u-bg-c .profile-photo-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

body.u-bg-c .profile-photo-form .btn { padding: 9px 16px; }

body.u-bg-c .profile-photo-filename {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--pf-ink-soft);
}

body.u-bg-c .profile-photo-filename:empty { display: none; }

/* Segmented Profile / Password control; the page's own JS swaps
   btn-primary/btn-default on click. */
body.u-bg-c .profile-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    margin-bottom: 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    box-shadow: var(--pf-shadow-sm);
}

body.u-bg-c .profile-tabs .btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pf-pill) !important;
    border-color: transparent;
}

body.u-bg-c .profile-tabs .btn-default {
    background: transparent;
    color: var(--pf-ink-soft);
}

body.u-bg-c .profile-tabs .btn-default:hover,
body.u-bg-c .profile-tabs .btn-default:focus {
    background: var(--pf-surface-alt);
    border-color: transparent;
    color: var(--pf-ink);
}

/* Three equal buttons plus icons overran the pill on a phone, clipping
   "Password"; flex items will not shrink past min-content without this. */
@media (max-width: 600px) {
    body.u-bg-c .profile-tabs { gap: 4px; padding: 5px; }
    body.u-bg-c .profile-tabs .btn {
        min-width: 0;
        gap: 6px;
        padding: 9px 10px;
        font-size: 13px;
    }
}

body.u-bg-c .profile-card {
    padding: 26px 28px;
    margin-bottom: 22px;
}

@media (max-width: 600px) {
    body.u-bg-c .profile-card { padding: 20px 16px; }
}

body.u-bg-c .profile-card h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    font-size: 17px;
}

body.u-bg-c .profile-card h4 .fa { color: var(--pf-terracotta); }

body.u-bg-c .profile-card hr {
    margin: 14px 0 6px;
    border-top: 1px solid var(--pf-line);
}

/* Bootstrap sizes control-label padding for its 34px inputs; ours are ~42px. */
@media (min-width: 768px) {
    body.u-bg-c .profile-card .control-label { padding-top: 11px; }
}

/* Surfaces ---------------------------------------------------------------- */
body.u-bg-c .panel,
body.u-bg-c .well,
body.u-bg-c .thumbnail,
body.u-bg-c .card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
}

body.u-bg-c .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
    font-weight: 600;
    color: var(--pf-ink);
    padding: 16px 22px;
}

body.u-bg-c .panel-body { padding: 22px; }
body.u-bg-c .panel-footer { background: var(--pf-surface-alt); border-top: 1px solid var(--pf-line); }

/* Buttons ----------------------------------------------------------------- */
body.u-bg-c .btn {
    border-radius: var(--pf-radius-sm) !important;
    font-family: var(--pf-font);
    font-weight: 500;
    font-size: 14px;
    padding: 10px 18px;
    border: 1px solid var(--pf-line-firm);
    background: var(--pf-surface);
    color: var(--pf-ink);
    box-shadow: none;
    text-shadow: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body.u-bg-c .btn:hover,
body.u-bg-c .btn:focus { background: var(--pf-surface-alt); border-color: var(--pf-line-firm); color: var(--pf-ink); }

body.u-bg-c .btn-primary,
body.u-bg-c .btn-warning {
    background: var(--pf-terracotta);
    border-color: var(--pf-terracotta);
    color: #fff;
}
body.u-bg-c .btn-primary:hover,
body.u-bg-c .btn-primary:focus,
body.u-bg-c .btn-warning:hover,
body.u-bg-c .btn-warning:focus {
    background: var(--pf-terracotta-deep);
    border-color: var(--pf-terracotta-deep);
    color: #fff;
}

body.u-bg-c .btn-success {
    background: var(--pf-forest);
    border-color: var(--pf-forest);
    color: #fff;
}
body.u-bg-c .btn-success:hover,
body.u-bg-c .btn-success:focus { background: var(--pf-forest-deep); border-color: var(--pf-forest-deep); color: #fff; }

body.u-bg-c .btn-danger {
    background: transparent;
    border-color: #e6c4bd;
    color: var(--pf-danger);
}
body.u-bg-c .btn-danger:hover,
body.u-bg-c .btn-danger:focus { background: #fbeceb; border-color: #d9a79d; color: var(--pf-danger); }

body.u-bg-c .btn-default { background: var(--pf-surface); border-color: var(--pf-line-firm); color: var(--pf-ink); }

/* Forms ------------------------------------------------------------------- */
body.u-bg-c .form-control,
body.u-bg-c input[type="text"],
body.u-bg-c input[type="email"],
body.u-bg-c input[type="tel"],
body.u-bg-c input[type="number"],
body.u-bg-c input[type="password"],
body.u-bg-c textarea,
body.u-bg-c select {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line-firm);
    border-radius: var(--pf-radius-sm);
    color: var(--pf-ink);
    font-family: var(--pf-font);
    font-size: 14px;
    box-shadow: none;
    height: auto;
    padding: 10px 14px;
}

body.u-bg-c .form-control:focus,
body.u-bg-c input:focus,
body.u-bg-c textarea:focus,
body.u-bg-c select:focus {
    border-color: var(--pf-terracotta);
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14);
    outline: none;
}

body.u-bg-c label { font-weight: 500; color: var(--pf-ink-soft); font-size: 14px; }
body.u-bg-c .help-block { color: var(--pf-muted); font-size: 13px; }

body.u-bg-c .input-group-addon {
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line-firm);
    border-radius: var(--pf-radius-sm) 0 0 var(--pf-radius-sm);
    color: var(--pf-muted);
}

/* Tables ------------------------------------------------------------------ */
body.u-bg-c .table { color: var(--pf-ink); }
body.u-bg-c .table > thead > tr > th {
    border-bottom: 1px solid var(--pf-line);
    color: var(--pf-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.u-bg-c .table > tbody > tr > td { border-top: 1px solid var(--pf-line); padding: 12px; vertical-align: middle; }
body.u-bg-c .table-striped > tbody > tr:nth-of-type(odd) { background: var(--pf-surface-alt); }
body.u-bg-c .table-hover > tbody > tr:hover { background: var(--pf-terracotta-wash); }

/* Alerts ------------------------------------------------------------------ */
body.u-bg-c .alert { border-radius: var(--pf-radius); border: 1px solid transparent; font-size: 14px; }
body.u-bg-c .alert-success { background: #e7f2ec; border-color: #c6e0d3; color: var(--pf-forest-deep); }
body.u-bg-c .alert-danger  { background: #fbeceb; border-color: #efcdc7; color: var(--pf-danger); }
body.u-bg-c .alert-warning { background: #fdf3e6; border-color: #f0dcc0; color: #8a5a1e; }
body.u-bg-c .alert-info    { background: var(--pf-terracotta-wash); border-color: #f0d5cb; color: var(--pf-terracotta-deep); }

/* Labels / badges --------------------------------------------------------- */
body.u-bg-c .label,
body.u-bg-c .badge {
    border-radius: var(--pf-pill);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .03em;
    padding: 4px 10px;
}
body.u-bg-c .label-success { background: #e7f2ec; color: var(--pf-forest-deep); }
body.u-bg-c .label-info    { background: var(--pf-terracotta-wash); color: var(--pf-terracotta-deep); }
body.u-bg-c .label-default { background: var(--pf-surface-alt); color: var(--pf-muted); }

/* Pagination -------------------------------------------------------------- */
body.u-bg-c .pagination > li > a,
body.u-bg-c .pagination > li > span {
    color: var(--pf-ink-soft);
    background: var(--pf-surface);
    border-color: var(--pf-line);
}
body.u-bg-c .pagination > .active > a,
body.u-bg-c .pagination > .active > span {
    background: var(--pf-terracotta);
    border-color: var(--pf-terracotta);
    color: #fff;
}

/* Footer ------------------------------------------------------------------ */
body.u-bg-c footer,
body.u-bg-c .footer { background: transparent; color: var(--pf-ink-soft); }

/* Accessibility ----------------------------------------------------------- */
body.u-bg-c a:focus-visible,
body.u-bg-c .btn:focus-visible,
body.u-bg-c button:focus-visible,
body.u-bg-c input:focus-visible,
body.u-bg-c select:focus-visible,
body.u-bg-c textarea:focus-visible {
    outline: 2px solid var(--pf-terracotta);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.u-bg-c *,
    body.u-bg-c *::before,
    body.u-bg-c *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Links on coloured grounds -----------------------------------------------
   The link colour above is set at body-level specificity, which would beat a
   component's own rule and paint terracotta on terracotta. Anything that
   paints its own dark/branded ground opts out here. */
/* `inherit` was wrong for .btn: inside a coloured panel it inherited white and
   produced white text on a white button. Buttons keep their own ink; only
   genuinely inheriting elements opt out. */
body.u-bg-c .label a,
body.u-bg-c .navbar-brand { color: inherit; }

body.u-bg-c .btn-default,
body.u-bg-c a.btn-default { color: var(--pf-ink); }

body.u-bg-c .btn-primary,
body.u-bg-c .btn-success,
body.u-bg-c .btn-warning { color: #fff; }


/* The site's rainbow divider predates this palette and fights it. Replaced
   with a single hairline in the theme's own line colour. */
body.u-bg-c hr.colorgraph {
    background: var(--pf-line) !important;
    background-image: none !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 0 26px !important;
}

/* ==========================================================================
   Product page and cart
   These come from the Vue bundle, so their markup is fixed here; the layout
   problems that can be solved in CSS are solved in CSS.
   ========================================================================== */

/* Quantity stepper: the number was squeezed to 35px and clipped its own
   value. Give it room and stop the group stretching the full row. */
/* Bootstrap's table-cell input-group loses its flush join once the widths
   above are applied; flex keeps the three parts as one control. */
body.u-bg-c .c-b .input-group,
body.u-bg-c .input-group.has-error,
body.u-bg-c form .input-group,
body.u-bg-c td .input-group {
    display: inline-flex;
    align-items: stretch;
    width: auto;
}
body.u-bg-c .c-b .input-group > .input-group-btn,
body.u-bg-c form .input-group > .input-group-btn { display: flex; width: auto; }
body.u-bg-c .c-b .input-group > .input-group-btn > .btn,
body.u-bg-c form .input-group > .input-group-btn > .btn { height: 100%; }

body.u-bg-c .quantity-left-minus,
body.u-bg-c .quantity-right-plus {
    background: var(--pf-surface-alt) !important;
    border: 1px solid var(--pf-line-firm) !important;
    color: var(--pf-ink) !important;
    padding: 8px 13px;
    line-height: 1;
}
body.u-bg-c .quantity-left-minus:hover,
body.u-bg-c .quantity-right-plus:hover {
    background: var(--pf-terracotta-wash) !important;
    border-color: var(--pf-terracotta) !important;
    color: var(--pf-terracotta-deep) !important;
}
body.u-bg-c .quantity-left-minus { border-radius: var(--pf-radius-sm) 0 0 var(--pf-radius-sm) !important; }
body.u-bg-c .quantity-right-plus { border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0 !important; }

body.u-bg-c input.input-number {
    width: 58px !important;
    min-width: 58px;
    text-align: center;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    font-variant-numeric: tabular-nums;
    padding: 9px 4px;
}

/* Cart header: the two secondary links were full-width filled primaries that
   outweighed Checkout, the one action that matters. */
body.u-bg-c .btn-block { display: inline-block; width: auto; }

body.u-bg-c .cart-actions .btn,
body.u-bg-c .btn-block.btn-primary:not([type="submit"]) {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line-firm);
    color: var(--pf-ink);
}
body.u-bg-c .cart-actions .btn:hover,
body.u-bg-c .btn-block.btn-primary:not([type="submit"]):hover {
    background: var(--pf-surface-alt);
    border-color: var(--pf-terracotta);
    color: var(--pf-terracotta-deep);
}

body.u-bg-c h2.m-0 { font-size: 24px; white-space: nowrap; }

/* Product page ------------------------------------------------------------ */
/* .ctitle is used for both the product h1 and the small section labels
   ("Quantity", "Description"), so the label treatment must exclude the
   heading or it uppercases the product name. */
body.u-bg-c h2.ctitle,
body.u-bg-c h3.ctitle,
body.u-bg-c h4.ctitle {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pf-muted);
    margin: 22px 0 8px;
}

body.u-bg-c h1.ctitle {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--pf-ink);
    text-transform: none;
    margin: 0 0 10px;
}

/* The "click to enlarge" hint and the views counter were floating loose. */
/* Sleek Views Badge Pill — reused from homepage (.cardDate) */
body.u-bg-c .a-v {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: auto;
    height: auto;
    padding: 4px 12px;
    background: rgba(38, 34, 31, .82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--pf-pill) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    pointer-events: none;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: #ffffff !important;
    float: none;
    text-transform: none;
}

body.u-bg-c .aitem-col > a,
body.u-bg-c .featured-article > a,
body.u-bg-c .news .media a.pull-left {
    position: relative;
    display: block;
}

body.u-bg-c .p-thumb,
body.u-bg-c .thumb-list img {
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    background: var(--pf-surface-alt);
}

/* Keep the floating cart button clear of page content. */
body.u-bg-c .cart-items-counter,
body.u-bg-c [class*="cart-counter"] { z-index: 20; }

/* ==========================================================================
   Sign in / sign up modal
   The markup lives in include/loginModal.blade.php + auth/_login/_register.
   Legacy rules (client_user_styles.css, client-include-loginModal.css) still
   load first: the 80%-width headings, the 30%-wide square social buttons and
   the struck-through "OR" band are all overridden here.
   ========================================================================== */

@media (min-width: 768px) {
    body.u-bg-c .login-wrapper .modal-dialog { width: 440px; }
}

body.u-bg-c .login-wrapper .modal-content {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow);
    overflow: hidden;
}

/* Header: centred title + supporting line, no divider rule. */
body.u-bg-c .login-wrapper .modal-header {
    position: relative;
    text-align: center;
    padding: 30px 32px 0;
    border-bottom: 0;
}

body.u-bg-c .login-wrapper .login-sign-in-heading,
body.u-bg-c .login-wrapper .login-sign-up-heading {
    width: 100%;
    margin: 0;
}

body.u-bg-c .login-wrapper .login-modal-title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3;
}

body.u-bg-c .login-wrapper .login-modal-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--pf-ink-soft);
}

/* Bootstrap's .close is a floated bold "x"; make it a real round target. */
body.u-bg-c .login-wrapper .close {
    position: absolute;
    top: 14px;
    right: 14px;
    float: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pf-muted);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

body.u-bg-c .login-wrapper .close:hover,
body.u-bg-c .login-wrapper .close:focus {
    background: var(--pf-terracotta-wash);
    color: var(--pf-ink);
    opacity: 1;
}

body.u-bg-c .login-wrapper .modal-body { padding: 22px 32px 6px; }

/* The form partials wrap themselves in grid columns; the modal supplies its
   own gutters, so flatten theirs to keep fields flush with the heading. */
body.u-bg-c .login-wrapper .modal-body .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}

body.u-bg-c .login-wrapper .form-horizontal .form-group,
body.u-bg-c .login-wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

body.u-bg-c .login-wrapper .form-group { margin-bottom: 16px; }

body.u-bg-c .login-wrapper label {
    display: block;
    margin-bottom: 6px;
}

/* Password field with the show/hide toggle riding inside the input. */
body.u-bg-c .password-field { position: relative; }

body.u-bg-c .password-field .form-control {
    padding-right: 48px;
    width: 100%;
}

body.u-bg-c .password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--pf-radius-sm);
    background: transparent;
    color: var(--pf-muted);
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

body.u-bg-c .password-field .password-toggle:hover,
body.u-bg-c .password-field .password-toggle:focus {
    color: var(--pf-ink);
    background: var(--pf-surface-alt);
}

/* Remember-me / forgot-password row. */
body.u-bg-c .login-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}

body.u-bg-c .login-form-meta .login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
    color: var(--pf-ink-soft);
    cursor: pointer;
}

body.u-bg-c .login-form-meta .login-remember input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--pf-terracotta);
    cursor: pointer;
}

body.u-bg-c .login-form-meta .login-forgot { font-weight: 500; }

/* The cart page shrinks .btn-block to content width; the auth submit really
   is full-width. */
body.u-bg-c .login-wrapper .btn-block {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
}

/* Sign in <-> sign up switcher line. */
body.u-bg-c .login-wrapper .login-switch {
    margin: 4px 0 10px;
    text-align: center;
    font-size: 14px;
    color: var(--pf-ink-soft);
}

body.u-bg-c .login-wrapper .login-switch a { font-weight: 600; }

/* Social sign-in footer. */
body.u-bg-c .login-wrapper .modal-footer {
    padding: 0 32px 26px;
    border-top: 0;
    background: var(--pf-surface);
    text-align: center;
}

body.u-bg-c .login-wrapper .login-social-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 0 16px;
    color: var(--pf-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.u-bg-c .login-wrapper .login-social-divider::before,
body.u-bg-c .login-wrapper .login-social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pf-line);
}

body.u-bg-c .login-wrapper #social {
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* Legacy .smGlobalBtn is a 30%-wide bar with vendor-prefix-only rounding;
   render the providers as equal round buttons instead, keeping their brand
   fills for recognisability. */
body.u-bg-c .login-wrapper .smGlobalBtn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    font-size: 19px;
    line-height: 48px;
    color: #fff;
    transition: filter .18s ease, transform .18s ease;
}

body.u-bg-c .login-wrapper .smGlobalBtn:hover,
body.u-bg-c .login-wrapper .smGlobalBtn:focus {
    color: #fff;
    border: 0;
    filter: brightness(.92);
    transform: translateY(-1px);
}

body.u-bg-c .login-wrapper .smGlobalBtn.facebookBtn,
body.u-bg-c .login-wrapper .smGlobalBtn.facebookBtn:hover,
body.u-bg-c .login-wrapper .smGlobalBtn.facebookBtn:focus { background: #4060A5; }

body.u-bg-c .login-wrapper .smGlobalBtn.googleplusBtn,
body.u-bg-c .login-wrapper .smGlobalBtn.googleplusBtn:hover,
body.u-bg-c .login-wrapper .smGlobalBtn.googleplusBtn:focus { background: #e64522; }

body.u-bg-c .login-wrapper .smGlobalBtn.twitterBtn,
body.u-bg-c .login-wrapper .smGlobalBtn.twitterBtn:hover,
body.u-bg-c .login-wrapper .smGlobalBtn.twitterBtn:focus { background: #00ABE3; }

/* The label rule above out-specifies the legacy .display-none utility that
   keeps the empty #login_error placeholder hidden. */
body.u-bg-c .login-wrapper .display-none { display: none; }

/* The register pane still wraps its fields in icon-addon input-groups, which
   the sign-in pane no longer uses — and the cart's quantity-stepper rule
   above shrinks any form .input-group to content width. Inside the modal,
   drop the addon boxes and let the bare inputs span the pane. */
body.u-bg-c .login-wrapper .input-group {
    display: block;
    width: 100%;
}

body.u-bg-c .login-wrapper .input-group-addon { display: none; }

body.u-bg-c .login-wrapper .input-group .form-control {
    display: block;
    float: none;
    width: 100%;
    border-radius: var(--pf-radius-sm) !important;
}

/* ==========================================================================
   Home page
   Scroll-snap model rails (replacing the per-breakpoint Bootstrap
   carousels), latest-updates ticker, filter sidebar, and the load-more grid.
   ========================================================================== */

/* Model rails --------------------------------------------------------------- */
body.u-bg-c .pf-rail {
    margin-bottom: 34px;
    scroll-margin-top: 96px;
}

body.u-bg-c .pf-rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

body.u-bg-c .pf-rail-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

body.u-bg-c .pf-rail-sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--pf-ink-soft);
}

body.u-bg-c .pf-rail-nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

body.u-bg-c .pf-rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--pf-line-firm);
    border-radius: 50%;
    background: var(--pf-surface);
    color: var(--pf-ink-soft);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

body.u-bg-c .pf-rail-btn:hover,
body.u-bg-c .pf-rail-btn:focus {
    background: var(--pf-terracotta);
    border-color: var(--pf-terracotta);
    color: #fff;
}

body.u-bg-c .pf-rail-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 8px 4px 10px;
    margin-top: -6px;
    margin-bottom: -4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.u-bg-c .pf-rail-track::-webkit-scrollbar { display: none; }

/* Model card (rail) --------------------------------------------------------- */
body.u-bg-c .pf-mcard {
    flex: 0 0 auto;
    width: 184px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-sm);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.u-bg-c .pf-mcard:hover {
    transform: translateY(-3px);
    border-color: var(--pf-terracotta);
    box-shadow: var(--pf-shadow);
}

body.u-bg-c .pf-mcard-link {
    display: block;
    flex: 1 1 auto;
    padding: 10px 12px 10px;
    color: var(--pf-ink);
}

body.u-bg-c .pf-mcard-link:hover,
body.u-bg-c .pf-mcard-link:focus {
    color: var(--pf-ink);
    text-decoration: none;
}

body.u-bg-c .pf-mcard-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 10px;
    background: var(--pf-surface-alt);
    border-radius: var(--pf-radius-sm);
    overflow: hidden;
}

body.u-bg-c .pf-mcard-img,
body.u-bg-c .pf-mcard-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

body.u-bg-c .pf-mcard-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 37px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}

body.u-bg-c .pf-mcard-price {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pf-terracotta-ink);
}

body.u-bg-c .pf-mcard-price.is-soon {
    padding: 3px 11px;
    background: #e7f2ec;
    border-radius: var(--pf-pill);
    color: var(--pf-forest-deep);
    font-size: 12px;
}

body.u-bg-c .pf-mcard-hint {
    font-size: 12px;
    font-weight: 500;
    color: var(--pf-muted);
}

/* "Available at N shops": sits between the card's main link and its meta
   row, and opens the marketplace filtered to this model. */
body.u-bg-c .pf-mcard-shops {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 10px;
    padding: 6px 10px;
    border-radius: var(--pf-pill);
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-deep);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

body.u-bg-c .pf-mcard-shops:hover,
body.u-bg-c .pf-mcard-shops:focus {
    background: var(--pf-terracotta);
    color: #fff;
    text-decoration: none;
}

body.u-bg-c .pf-mcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--pf-line);
    background: var(--pf-surface-alt);
    border-radius: 0 0 var(--pf-radius) var(--pf-radius);
    font-size: 13px;
    color: var(--pf-ink-soft);
}

body.u-bg-c .pf-rail-btn i {
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

body.u-bg-c .pf-mcard-fav,
body.u-bg-c .pf-mcard-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.u-bg-c .pf-mcard-views i { color: var(--pf-muted); font-size: 13px; }

/* Favourite hearts (rails, grids, model pages) */
body.u-bg-c .add-to-fav-ancher,
body.u-bg-c .add-to-fav-ancher:hover,
body.u-bg-c .add-to-fav-ancher:focus {
    color: var(--pf-terracotta) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
body.u-bg-c .add-to-fav-text {
    color: var(--pf-ink-soft) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Coming-soon rail sits beside the updates panel on desktop */
body.u-bg-c .pf-home-split { margin-bottom: 0; }

@media (min-width: 992px) {
    body.u-bg-c .pf-home-split .pf-updates {
        max-height: 355px;
        margin-bottom: 34px;
    }
}

/* Latest updates ticker ------------------------------------------------------ */
body.u-bg-c .pf-updates {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    padding: 8px 8px 10px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

body.u-bg-c .pf-updates-head {
    padding: 12px 14px 4px;
    flex: 0 0 auto;
}

body.u-bg-c .pf-updates-title { margin: 0; font-size: 15px; }

body.u-bg-c .pf-updates-body {
    padding: 2px 4px 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pf-line-firm, #cbd5e1) transparent;
}

body.u-bg-c .pf-updates-body::-webkit-scrollbar {
    width: 5px;
}

body.u-bg-c .pf-updates-body::-webkit-scrollbar-track {
    background: transparent;
}

body.u-bg-c .pf-updates-body::-webkit-scrollbar-thumb {
    background-color: var(--pf-line-firm, #cbd5e1);
    border-radius: 4px;
}

body.u-bg-c .todayLatestUpdates {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.u-bg-c .todayLatestUpdates .news-item {
    border-bottom: 1px solid var(--pf-line);
}

body.u-bg-c .todayLatestUpdates .news-item:last-child { border-bottom: 0; }

body.u-bg-c .pf-update-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--pf-radius-sm);
    color: var(--pf-ink);
}

body.u-bg-c .pf-update-row:hover,
body.u-bg-c .pf-update-row:focus {
    background: var(--pf-terracotta-wash);
    color: var(--pf-ink);
    text-decoration: none;
}

body.u-bg-c .pf-update-thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
}

body.u-bg-c .pf-update-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.u-bg-c .pf-update-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.u-bg-c .pf-update-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-terracotta-ink);
}

/* Prev/next controls appended by jquery.bootstrap.newsbox into a
   .panel-footer it creates at the end of the panel. */
body.u-bg-c .pf-updates .panel-footer {
    background: transparent;
    border-top: 1px solid var(--pf-line);
    border-radius: 0 0 var(--pf-radius-lg) var(--pf-radius-lg);
    margin-top: 8px;
    padding: 10px 8px 2px;
    flex: 0 0 auto;
}

body.u-bg-c .pf-updates .btn-group {
    display: flex;
    gap: 8px;
}

body.u-bg-c .pf-updates .btn-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    padding: 0;
    border-radius: var(--pf-pill) !important;
    float: none;
}

/* Filter sidebar ------------------------------------------------------------- */
@media (min-width: 768px) {
    body.u-bg-c #_userLeftBar,
    body.u-bg-c .sidebar-offcanvas {
        position: sticky;
        top: 98px;
        z-index: 1010;
        margin-top: 2px;
    }
}

body.u-bg-c #_userLeftBar .m-shadow {
    background: transparent;
    box-shadow: none;
}

body.u-bg-c #_userLeftBar .sky-form {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
}

body.u-bg-c #_userLeftBar .sky-form h4 {
    background: transparent;
    margin: 0;
    padding: 14px 16px 6px;
    color: var(--pf-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.u-bg-c #_userLeftBar .row1 {
    height: auto;
    max-height: 190px;
    overflow-y: auto;
    padding: 2px 8px 10px;
}

body.u-bg-c #_userLeftBar .sky-form .col {
    float: none;
    width: 100%;
    padding: 0;
}

body.u-bg-c #_userLeftBar .sky-form .radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--pf-radius-sm);
    font-size: 13px;
    line-height: 1.4;
    color: var(--pf-ink-soft);
    transition: background .15s ease, color .15s ease;
}

body.u-bg-c #_userLeftBar .sky-form .radio:hover {
    background: var(--pf-terracotta-wash);
    color: var(--pf-ink);
}

body.u-bg-c #_userLeftBar .sky-form .radio i {
    position: static;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 2px solid var(--pf-line-firm);
    border-radius: 50%;
    background: var(--pf-surface);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

body.u-bg-c #_userLeftBar .sky-form .radio i:after { display: none; }

body.u-bg-c #_userLeftBar .sky-form .radio input:checked + i {
    border-color: var(--pf-terracotta);
    background: var(--pf-terracotta);
    box-shadow: inset 0 0 0 3px var(--pf-surface);
}

body.u-bg-c #_userLeftBar .sky-form .radio input:focus-visible + i {
    outline: 2px solid var(--pf-terracotta);
    outline-offset: 2px;
}

/* Legacy model cards (load-more grid, search results, brand pages) ----------- */
body.u-bg-c .col-item {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--pf-shadow-sm);
    overflow: hidden;
    margin-bottom: 12px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.u-bg-c .col-item:hover {
    transform: translateY(-3px);
    border-color: var(--pf-terracotta);
    box-shadow: var(--pf-shadow);
}

body.u-bg-c .col-item .mask { padding: 12px 10px 8px; }

body.u-bg-c .col-item .model-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--pf-ink);
}

body.u-bg-c .price-text-color {
    color: var(--pf-terracotta-ink) !important;
    font-weight: 600;
}

body.u-bg-c .col-item .separator { border-top: 1px solid var(--pf-line); }
body.u-bg-c .col-item .separator .btn-add { border-right: 1px solid var(--pf-line); }
body.u-bg-c .col-item .info { background: var(--pf-surface-alt); }

/* Section headings & browse-all ----------------------------------------------
   The old purple .indigo-text predates the palette. */
body.u-bg-c .indigo-text { color: var(--pf-ink) !important; }
body.u-bg-c a.indigo-text:hover,
body.u-bg-c a.indigo-text:focus { color: var(--pf-terracotta) !important; }

body.u-bg-c .pf-browse { margin: 2px 0 30px; }

/* The legacy .loader rule (user.css) draws a 100px gray circle — the old
   round load-more control. The pill button replaces it; flatten the wrapper
   so the circle never shows behind the pill. */
body.u-bg-c .pf-browse .loader {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    cursor: default;
    display: inline-block;
}
body.u-bg-c .pf-browse .loader a { margin: 0; }

body.u-bg-c .pf-load-more {
    border-radius: var(--pf-pill) !important;
    padding: 12px 28px;
    font-weight: 600;
    display: inline-block;
    width: auto;
}

/* Trending article cards */
body.u-bg-c article.card { overflow: hidden; }
body.u-bg-c article.card .cardCategory a { color: #ffffff; text-decoration: none; }
body.u-bg-c article.card .cardTitle a { color: var(--pf-ink); }
body.u-bg-c article.card .cardTitle a:hover { color: var(--pf-terracotta); }

/* The old purple accent bar beside the filter column predates the palette. */
body.u-bg-c .single-right { border-left: 0; }

/* ==========================================================================
   Article pages (zformative package views)
   The layout now shares the app header/navbar, so the palette applies here;
   these rules retire the old gray category bar, purple headings, and the
   price-tag style tag chips.
   ========================================================================== */

/* Category bar under the main nav ------------------------------------------ */
body.u-bg-c #article-nav { background: var(--pf-ground); }

body.u-bg-c #article-nav hr.colorgraph { margin-bottom: 14px !important; }

/* Sticky (Bootstrap affix) state: keep it opaque and above content. */
body.u-bg-c #article-nav.affix {
    z-index: 100;
    width: 100%;
    padding-top: 6px;
    box-shadow: 0 8px 24px rgba(38, 34, 31, .08);
}

body.u-bg-c .articleNav,
body.u-bg-c .navbar-default.articleNav {
    max-width: 1200px;
    margin: 0 auto 16px;
    padding: 8px 14px;
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    min-height: 0;
}

body.u-bg-c .articleNav .navbar-nav > li > a {
    padding: 8px 14px;
    border-radius: var(--pf-pill);
    background: transparent !important;
    color: var(--pf-ink-soft) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background .18s ease, color .18s ease;
}

body.u-bg-c .articleNav .navbar-nav > li > a:hover,
body.u-bg-c .articleNav .navbar-nav > li > a:focus {
    background: var(--pf-terracotta-wash) !important;
    color: var(--pf-terracotta-ink) !important;
}

body.u-bg-c .articleNav .navbar-toggle { float: left; margin-left: 8px; }

/* Article navbar search box */
body.u-bg-c .googleSearch {
    padding-top: 6px;
    padding-bottom: 6px;
}

body.u-bg-c .article-search-container {
    max-width: 260px;
    float: right;
    margin-right: 10px;
}

body.u-bg-c .article-search-group {
    display: flex;
    align-items: center;
}

body.u-bg-c .article-search-input {
    background-color: var(--pf-surface-alt, #ffffff) !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    border-right: none !important;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 5px 14px !important;
    height: 34px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    color: var(--pf-ink, #2d3748) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.u-bg-c .article-search-input:focus {
    border-color: var(--pf-terracotta, #e53e3e) !important;
    outline: none !important;
}

body.u-bg-c .article-search-btn {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 34px !important;
    padding: 5px 14px !important;
    background-color: var(--pf-terracotta, #e53e3e) !important;
    border: 1px solid var(--pf-terracotta, #e53e3e) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.u-bg-c .article-search-btn:hover,
body.u-bg-c .article-search-btn:focus {
    background-color: var(--pf-terracotta-deep, #c53030) !important;
    border-color: var(--pf-terracotta-deep, #c53030) !important;
    color: #ffffff !important;
}

/* Search clear button in top navbar */
.navbar-search-widget {
    position: relative;
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--pf-text-subtle, #a0aec0);
    cursor: pointer;
    padding: 0 4px;
    border-radius: 50%;
    transition: color 0.15s ease;
}

.search-clear-btn:hover {
    color: var(--pf-terracotta, #e53e3e);
}


/* Sticky Right Categories Sidebar Toggle & Drawer
   The wrapper is the stacking context for the drawer, so it must sit above
   the sticky nav (1060) and below modals (1075+). */
#article-sidebar-wrapper {
    position: relative;
    z-index: 1070;
}

.article-sidebar-toggle-btn {
    position: fixed;
    top: 140px;
    right: 0;
    left: auto !important;
    z-index: 1040;
    background-color: var(--pf-surface-alt, #ffffff) !important;
    color: var(--pf-terracotta-ink, #7c2d12) !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    border-right: none !important;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: ns-resize !important;
    user-select: none !important;
    touch-action: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.article-sidebar-toggle-btn.dragging {
    opacity: 0.95;
    box-shadow: -4px 6px 20px rgba(0, 0, 0, 0.22) !important;
}

.article-sidebar-toggle-btn:hover,
.article-sidebar-toggle-btn:focus {
    background-color: var(--pf-terracotta-wash, #fff7ed) !important;
    color: var(--pf-terracotta, #c2410c) !important;
    box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.article-sidebar-toggle-btn i {
    font-size: 14px;
    margin-right: 6px;
    color: var(--pf-terracotta, #c2410c);
}

.article-sidebar-panel {
    position: fixed;
    top: 0;
    right: -310px;
    left: auto !important;
    width: 290px;
    height: 100vh;
    z-index: 1050;
    background-color: var(--pf-surface-alt, #ffffff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#article-sidebar-wrapper.open .article-sidebar-panel {
    right: 0;
}

#article-sidebar-wrapper.open .article-sidebar-toggle-btn {
    right: 290px;
}

.article-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--pf-line, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--pf-terracotta-wash, #fff7ed);
}

.article-sidebar-header .sidebar-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--pf-terracotta-ink, #7c2d12);
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-sidebar-header .sidebar-title i {
    color: var(--pf-terracotta, #c2410c);
}

.btn-close-sidebar {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--pf-text-subtle, #718096);
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s ease;
}

.btn-close-sidebar:hover {
    color: var(--pf-terracotta, #c2410c);
}

.article-sidebar-nav {
    padding: 16px;
}

.article-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-category-list li {
    margin-bottom: 2px;
}

.article-category-list li a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--pf-ink, #2d3748);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.article-category-list li a:hover,
.article-category-list li.active a {
    background-color: var(--pf-terracotta-wash, #fff7ed);
    color: var(--pf-terracotta, #c2410c);
    font-weight: 600;
    padding-left: 18px;
}

.article-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1045;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    transition: opacity 0.25s ease;
}

#article-sidebar-wrapper.open .article-sidebar-backdrop {
    display: block;
}

/* Sticky Left Filters Sidebar Toggle & Drawer */
#filter-sidebar-wrapper {
    position: relative;
    z-index: 1040;
}

.filter-sidebar-toggle-btn {
    position: fixed;
    top: 140px;
    left: 0;
    right: auto !important;
    z-index: 1040;
    background-color: var(--pf-surface-alt, #ffffff) !important;
    color: var(--pf-terracotta-ink, #7c2d12) !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    border-left: none !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: ns-resize !important;
    user-select: none !important;
    touch-action: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-sidebar-toggle-btn.dragging {
    opacity: 0.95;
    box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.22) !important;
}

.filter-sidebar-toggle-btn:hover,
.filter-sidebar-toggle-btn:focus {
    background-color: var(--pf-terracotta-wash, #fff7ed) !important;
    color: var(--pf-terracotta, #c2410c) !important;
    box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.filter-sidebar-toggle-btn i {
    font-size: 14px;
    margin-right: 6px;
    color: var(--pf-terracotta, #c2410c);
}

.filter-sidebar-panel {
    position: fixed;
    top: 0;
    left: -320px;
    right: auto !important;
    width: 300px;
    height: 100vh;
    z-index: 1050;
    background-color: var(--pf-surface-alt, #ffffff);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#filter-sidebar-wrapper.open .filter-sidebar-panel {
    left: 0;
}

#filter-sidebar-wrapper.open .filter-sidebar-toggle-btn {
    left: 300px;
}

.filter-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--pf-line, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--pf-terracotta-wash, #fff7ed);
}

.filter-sidebar-header .sidebar-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--pf-terracotta-ink, #7c2d12);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-sidebar-header .sidebar-title i {
    color: var(--pf-terracotta, #c2410c);
}

.filter-sidebar-nav {
    padding: 16px 20px;
}

.filter-tags-container {
    margin-bottom: 15px;
}
.filter-tags-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-tags-container li {
    background-color: var(--pf-terracotta-wash, #fff7ed);
    color: var(--pf-terracotta, #c2410c);
    border: 1px solid rgba(194, 65, 12, 0.2);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-tags-container li a {
    color: #e53e3e;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    margin-left: 4px;
}

.filter-group-section {
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--pf-line, #e2e8f0);
    padding-bottom: 14px;
}
.filter-group-section:last-child {
    border-bottom: none;
}

.filter-group-title {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pf-terracotta-ink, #7c2d12);
}

.filter-group-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--pf-ink, #2d3748);
    transition: background-color 0.15s ease, color 0.15s ease;
    margin-bottom: 0;
}

.filter-radio-label:hover {
    background-color: var(--pf-terracotta-wash, #fff7ed);
    color: var(--pf-terracotta, #c2410c);
}

.filter-radio-label input[type="radio"] {
    accent-color: var(--pf-terracotta, #c2410c);
    cursor: pointer;
    width: 15px;
    height: 15px;
    margin: 0;
}

.filter-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1045;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    transition: opacity 0.25s ease;
}

#filter-sidebar-wrapper.open .filter-sidebar-backdrop {
    display: block;
}



/* Article body --------------------------------------------------------------- */
body.u-bg-c .blogArticals { padding-top: 4px; }

body.u-bg-c .blogArticals .thumbnail {
    padding: 18px 20px;
    margin-bottom: 16px;
}

body.u-bg-c .blogArticals article h1.thumbnail {
    position: relative;
    padding: 20px 115px 20px 24px !important;
    margin: 0 0 16px !important;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -.02em;
}

body.u-bg-c .blogArticals .article_para {
    font-size: 15px;
    line-height: 1.75;
    color: var(--pf-ink-soft);
    text-align: left;
    text-justify: auto;
}

body.u-bg-c .blogArticals article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pf-radius-sm);
}

/* The "click to see bigger picture" arrow PNG predates the palette. */
body.u-bg-c .blogArticals .article-tip { display: none; }

/* Numbered list badge on multi-section articles */
body.u-bg-c .blogArticals .step-size-cnt {
    float: left;
    width: auto;
    padding: 4px 16px !important;
    margin: 2px 12px 8px 0;
    background: var(--pf-terracotta-wash);
    border-radius: var(--pf-pill);
    color: var(--pf-terracotta-ink);
    font-size: 15px;
    font-weight: 600;
}

/* Tag chips: retire the skeuomorphic price-tag look (purple notch + orange
   sliding tail) in favour of the palette's pill chips. */
body.u-bg-c .tags {
    margin: 0;
    padding: 2px;
}

body.u-bg-c .tags li {
    position: static;
    float: left;
    margin: 0 6px 8px 0;
    list-style: none;
}

body.u-bg-c .tags li a {
    display: inline-block;
    height: auto;
    max-width: none;
    padding: 6px 14px;
    background: var(--pf-surface-alt);
    background-image: none;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    box-shadow: none;
    color: var(--pf-ink-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

body.u-bg-c .tags li a:hover,
body.u-bg-c .tags li a:focus {
    background: var(--pf-terracotta-wash);
    border-color: var(--pf-terracotta);
    color: var(--pf-terracotta-ink);
    text-decoration: none;
}

body.u-bg-c .tags li::before,
body.u-bg-c .tags li::after,
body.u-bg-c .tags li a::before,
body.u-bg-c .tags li a::after {
    content: none;
    display: none;
}

/* Sidebar -------------------------------------------------------------------- */
body.u-bg-c .blog-sidebar .blog-side-title {
    margin: 6px 0 12px;
    font-size: 16px;
    font-weight: 600;
}

body.u-bg-c .blog-sidebar .related-article-card {
    position: relative;
    overflow: hidden;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.u-bg-c .blog-sidebar .related-article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(38, 34, 31, .12);
}

body.u-bg-c .blog-sidebar .related-article-card .cardThumb {
    position: relative;
    height: 155px;
    background-color: var(--pf-surface-alt);
    overflow: hidden;
}

body.u-bg-c .blog-sidebar .related-article-card .cardThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

body.u-bg-c .blog-sidebar .related-article-card:hover .cardThumb img {
    transform: scale(1.05);
}

body.u-bg-c .blog-sidebar .related-article-card .cardDate {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
}

body.u-bg-c .blog-sidebar .related-article-card .cardBody {
    padding: 14px 16px 14px;
    min-height: auto;
    max-height: none;
}

body.u-bg-c .blog-sidebar .related-article-card .cardTitle {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 6px;
}

body.u-bg-c .blog-sidebar .related-article-card .cardTitle a {
    color: var(--pf-ink);
    transition: color .18s ease;
}

body.u-bg-c .blog-sidebar .related-article-card .cardTitle a:hover {
    color: var(--pf-terracotta);
}

body.u-bg-c .blog-sidebar .related-article-card .cardSubtitle,
body.u-bg-c .blog-sidebar .related-article-card .cardSubtitle a {
    color: var(--pf-ink-soft);
    font-size: 12.5px;
    line-height: 1.5;
}

body.u-bg-c .blog-sidebar .related-article-card .cardSubtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Shop SPA (nero/ecomm Vue app: product page, listings, cart)
   The markup ships inside the built ecommvue.js bundle, so everything here is
   CSS-only. The layout now renders the common blade navbar instead of the
   bundle's stripped <navbar> component.
   ========================================================================== */

/* The 90px top margin compensated for the old Vue header; the common navbar
   is in normal flow, so the offset just left a hole under it. */
body.u-bg-c .container-alp { margin-top: 0 !important; }

/* "Click on image to see in larger view" hint */
body.u-bg-c #alp .container-alp small,
body.u-bg-c #alp .container-alp small strong {
    color: var(--pf-muted);
    font-weight: 500;
}

/* Gallery ------------------------------------------------------------------- */
body.u-bg-c #alp .item-img-display {
    height: auto;
    min-height: 300px;
    max-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

body.u-bg-c #alp .item-img-display img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
}

body.u-bg-c #alp #cg { padding: 4px 0 14px; }

body.u-bg-c #alp #cg .img-thumbnail {
    display: inline-block;
    margin: 4px;
    padding: 6px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.u-bg-c #alp #cg .img-thumbnail:hover {
    border-color: var(--pf-terracotta);
    box-shadow: var(--pf-shadow-sm);
}

body.u-bg-c #alp .item-img-display-thumb {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.u-bg-c #alp .item-img-display-thumb img {
    max-width: 100%;
    max-height: 100%;
}

/* Product info card ----------------------------------------------------------- */
body.u-bg-c #alp .well { border-radius: var(--pf-radius-lg); }

body.u-bg-c #alp .well.p-30 h5 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pf-ink-soft);
}

/* The price is the lone h3 in the product card. */
body.u-bg-c #alp .well.p-30 > h3 {
    margin: 10px 0 6px;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pf-terracotta-ink);
}

body.u-bg-c #alp .vue-star-rating { margin: 2px 0 4px; }

body.u-bg-c #alp .section { margin-top: 6px; }

body.u-bg-c #alp .attr {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--pf-ink-soft);
    white-space: pre-line;
}

/* Feature checklist */
body.u-bg-c #alp .list-group { margin-bottom: 4px; }

body.u-bg-c #alp .list-group-item {
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    margin-bottom: 6px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--pf-ink-soft);
}

body.u-bg-c #alp .list-group-item .fa,
body.u-bg-c #alp .list-group-item .glyphicon { color: var(--pf-forest); }

/* Discount ribbon: the bundle draws a green rotated corner ribbon. */
body.u-bg-c #alp .ribbon span {
    background: var(--pf-terracotta);
    box-shadow: 0 3px 10px -5px rgba(38, 34, 31, .5);
    font-size: 12px;
}

body.u-bg-c #alp .ribbon span::before,
body.u-bg-c #alp .ribbon span::after {
    border-left-color: var(--pf-terracotta-deep);
    border-right-color: var(--pf-terracotta-deep);
    border-top-color: var(--pf-terracotta-deep);
    border-bottom-color: transparent;
}

body.u-bg-c #alp .ribbon span::before { border-right-color: transparent; }
body.u-bg-c #alp .ribbon span::after { border-left-color: transparent; }

/* Reviews well */
body.u-bg-c #alp .well { margin-bottom: 20px; }

/* ==========================================================================
   Model detail page
   Retires the paper-texture spec hero, rainbow spec colours, purple headings,
   and embossed text-shadows; brings the spec table, related list, and the
   shared carousel controls onto the palette.
   ========================================================================== */

/* The spec hero forced a full-bleed paper texture; the panel theme wants a
   plain surface. */
body.u-bg-c .detailBox {
    background: var(--pf-surface) !important;
    border-radius: var(--pf-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--pf-shadow-sm) !important;
}

body.u-bg-c .detailBox .panel-footer {
    background: var(--pf-surface-alt);
    border-top: 1px solid var(--pf-line);
    overflow: hidden;
}

/* The rounded card clips its content; while the "Compare with Model" list
   is open it has to hang out of the card. */
body.u-bg-c .detailBox:has(.typeahead__container.result),
body.u-bg-c .detailBox .panel-footer:has(.typeahead__container.result) {
    overflow: visible !important;
}

body.u-bg-c .detailBox .panel-footer .btn,
body.u-bg-c .detailBox .panel-footer a.btn {
    border-radius: var(--pf-pill) !important;
    border: 1px solid var(--pf-line) !important;
    background-color: var(--pf-surface-alt) !important;
    color: var(--pf-ink-soft) !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

body.u-bg-c .detailBox .panel-footer .btn:hover,
body.u-bg-c .detailBox .panel-footer a.btn:hover {
    background-color: var(--pf-terracotta-wash) !important;
    color: var(--pf-terracotta) !important;
    border-color: rgba(194, 65, 12, 0.3) !important;
}

/* Align right-side ad box with detailBox top border & enforce width containment */
body.u-bg-c .LR-336-228,
body.u-bg-c .LR-336-228.thumbnail,
body.u-bg-c .col-md-3 .thumbnail {
    margin-top: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--pf-radius-lg) !important;
    border: 1px solid var(--pf-line) !important;
    box-shadow: var(--pf-shadow-sm) !important;
    background: var(--pf-surface) !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

body.u-bg-c .LR-336-228 ins.adsbygoogle,
body.u-bg-c .thumbnail ins.adsbygoogle,
body.u-bg-c .thumbnail img,
body.u-bg-c .thumbnail iframe {
    max-width: 100% !important;
}

/* Purple embossed headings (model title, About Device, spec-table groups) */
body.u-bg-c .model-title-s-des,
body.u-bg-c .model-title-s-des a {
    color: var(--pf-ink);
    font-family: var(--pf-font);
    text-shadow: none;
    font-weight: 600;
}

body.u-bg-c .model-title-s-des small { color: var(--pf-terracotta-ink) !important; font-weight: 600; }

/* Rainbow spec strip: one ink for the values, terracotta for the icons. */
body.u-bg-c .detailBox .green,
body.u-bg-c .detailBox .blue,
body.u-bg-c .detailBox .sky-blue,
body.u-bg-c .detailBox .brown,
body.u-bg-c .detailBox .light-brown,
body.u-bg-c .detailBox .orange,
body.u-bg-c .detailBox .lbig {
    color: var(--pf-ink);
}

body.u-bg-c .detailBox .media-left .fa {
    color: var(--pf-terracotta);
}

body.u-bg-c .detailBox .item-specs strong { font-weight: 600; }

body.u-bg-c .shadow,
body.u-bg-c .pro-h,
body.u-bg-c .pro-h2,
body.u-bg-c .pro-h2 a,
body.u-bg-c .model-title-price {
    text-shadow: none !important;
}

/* Spec table group / row headers */
body.u-bg-c .pro-h {
    background-color: var(--pf-surface-alt);
    color: var(--pf-ink);
    font-size: 1.05em;
    font-weight: 600;
}

body.u-bg-c .pro-h a { color: var(--pf-terracotta-ink); }
body.u-bg-c .pro-h a:hover { color: var(--pf-terracotta-deep); }
body.u-bg-c .pro-h2, body.u-bg-c .pro-h2 a { font-weight: 600; color: var(--pf-ink-soft); }

body.u-bg-c .white-bg { background: var(--pf-surface); }

body.u-bg-c .table-responsive,
body.u-bg-c #view_model {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: var(--pf-radius-lg) !important;
    box-shadow: var(--pf-shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

body.u-bg-c #view_model {
    margin-bottom: 0 !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.u-bg-c #view_model td,
body.u-bg-c #view_model th {
    border-color: var(--pf-line) !important;
}

body.u-bg-c #view_model_head td {
    background-color: var(--pf-surface-alt) !important;
    color: var(--pf-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--pf-line) !important;
}

/* About Device / read-more body */
body.u-bg-c .panel-body.sd {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--pf-ink-soft);
}

/* Old purple carousel/compare buttons (shared carousel partial) */
body.u-bg-c .indogo-bg,
body.u-bg-c a.btn.indogo-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: 6px;
    background-color: var(--pf-surface);
    border: 1px solid var(--pf-line-firm);
    border-radius: 50% !important;
    color: var(--pf-ink-soft);
}

body.u-bg-c .indogo-bg:hover,
body.u-bg-c .indogo-bg:focus {
    background-color: var(--pf-terracotta);
    border-color: var(--pf-terracotta);
    color: #fff;
}

body.u-bg-c .indogo-bg i {
    font-size: 13px;
    line-height: 1;
    color: inherit;
}

/* Carousel header spacing & card hover padding */
body.u-bg-c .pf-carousel-header,
body.u-bg-c .controls {
    margin-bottom: 12px;
}

body.u-bg-c .carousel-inner {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: -8px;
    margin-bottom: -4px;
}

/* Star-rating caption chip ("Five Stars") and average badge */
body.u-bg-c .rating-box .ar {
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    padding: 4px 12px;
    font-size: 13px;
    color: var(--pf-ink-soft);
    width: auto !important;
    white-space: nowrap !important;
    display: inline-block !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
}

body.u-bg-c .rating-box .caption .label {
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
}

/* Related models sidebar */
/* Phone page: "Where to buy" — vendor listings of this catalog model. */
body.u-bg-c .pf-wtb {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    padding: 18px 20px 8px;
    margin: 0 0 20px;
}
body.u-bg-c .pf-wtb-title { margin: 0; font-size: 20px; font-weight: 700; }
body.u-bg-c .pf-wtb-sub { margin: 4px 0 10px; color: var(--pf-ink-soft); font-size: 14px; }
body.u-bg-c .pf-wtb-list { list-style: none; margin: 0; padding: 0; }
body.u-bg-c .pf-wtb-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--pf-line);
}
body.u-bg-c .pf-wtb-shop { flex: 1 1 auto; min-width: 0; }
body.u-bg-c .pf-wtb-shop-name { font-weight: 600; color: var(--pf-ink); }
body.u-bg-c .pf-wtb-shop-name:hover { color: var(--pf-terracotta-deep); }
body.u-bg-c .pf-wtb-shop-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--pf-ink-soft);
}
body.u-bg-c .pf-wtb-cond {
    padding: 2px 9px;
    border-radius: var(--pf-pill);
    background: #e7f2ec;
    color: var(--pf-forest-deep);
    font-weight: 600;
}
body.u-bg-c .pf-wtb-cond--used,
body.u-bg-c .pf-wtb-cond--refurbished,
body.u-bg-c .pf-wtb-cond--open_box { background: #fff4dc; color: #8a5a00; }
body.u-bg-c .pf-wtb-out { color: #b42318; font-weight: 600; }
body.u-bg-c .pf-wtb-price {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--pf-terracotta-ink);
    white-space: nowrap;
}
body.u-bg-c .pf-wtb-actions { flex: 0 0 auto; display: flex; gap: 8px; }
body.u-bg-c .pf-wtb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--pf-pill);
    border: 1px solid var(--pf-line-firm);
    background: var(--pf-surface);
    color: var(--pf-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
body.u-bg-c .pf-wtb-btn:hover { border-color: var(--pf-terracotta); color: var(--pf-terracotta-deep); text-decoration: none; }
body.u-bg-c .pf-wtb-btn--wa { background: #25d366; border-color: #25d366; color: #fff; }
body.u-bg-c .pf-wtb-btn--wa:hover { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }

@media (max-width: 600px) {
    body.u-bg-c .pf-wtb { padding: 14px 14px 6px; }
    body.u-bg-c .pf-wtb-row { flex-wrap: wrap; gap: 8px 12px; }
    body.u-bg-c .pf-wtb-shop { flex-basis: 100%; }
    body.u-bg-c .pf-wtb-actions { margin-left: auto; }
}

body.u-bg-c .pf-related {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    padding: 16px 8px 8px;
    max-height: 560px;
    display: flex;
    flex-direction: column;
}

body.u-bg-c .pf-related-title {
    margin: 0 0 8px;
    padding: 0 10px;
    font-size: 15px;
    flex: 0 0 auto;
}

body.u-bg-c .pf-related-list {
    list-style: none;
    margin: 0;
    padding: 0 4px;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pf-line-firm, #cbd5e1) transparent;
}

body.u-bg-c .pf-related-list::-webkit-scrollbar {
    width: 6px;
}

body.u-bg-c .pf-related-list::-webkit-scrollbar-track {
    background: transparent;
}

body.u-bg-c .pf-related-list::-webkit-scrollbar-thumb {
    background-color: var(--pf-line-firm, #cbd5e1);
    border-radius: 4px;
}

body.u-bg-c .pf-related-list a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--pf-radius-sm);
    color: var(--pf-ink-soft);
    font-size: 13.5px;
    transition: background .15s ease, color .15s ease;
}

body.u-bg-c .pf-related-list a:hover,
body.u-bg-c .pf-related-list a:focus {
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
    text-decoration: none;
}

/* ==========================================================================
   Compare page
   ========================================================================== */
body.u-bg-c .compare-container {
    background: var(--pf-surface, #ffffff) !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    border-radius: var(--pf-radius-lg, 24px) !important;
    box-shadow: var(--pf-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04)) !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.u-bg-c .compare-container .main_head {
    color: var(--pf-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Only the panel's own header rounds — the per-group headers inside #specs
   share the .main_head class and must stay square. */
body.u-bg-c .compare-container > .main_head {
    border-top-left-radius: calc(var(--pf-radius-lg, 24px) - 1px) !important;
    border-top-right-radius: calc(var(--pf-radius-lg, 24px) - 1px) !important;
}

body.u-bg-c .compare-container .main_head .glyphicon { color: var(--pf-terracotta); }

/* Hide typeahead hint input globally so it never covers typed text or creates double pills */
body.u-bg-c .typeahead__hint,
body.u-bg-c input.typeahead__hint,
.typeahead__hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

body.u-bg-c .compare-container .typeahead__container,
body.u-bg-c .compare-container .typeahead__field,
body.u-bg-c .compare-container .typeahead__query {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

body.u-bg-c .compare-container .typeahead__query input:not(.typeahead__hint),
body.u-bg-c .compare-container input.form-control,
body.u-bg-c .compare-container input.m1,
body.u-bg-c .compare-container input.m2,
body.u-bg-c .compare-container input.m3,
body.u-bg-c .compare-container input.compare-model {
    width: 100% !important;
    background: var(--pf-surface-alt, #fdfbf7) !important;
    border: 1px solid var(--pf-line-firm, #d1d5db) !important;
    border-radius: var(--pf-pill, 999px) !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    color: var(--pf-ink, #1e293b) !important;
    height: 40px !important;
    outline: none !important;
    box-shadow: none !important;
}

body.u-bg-c .compare-container .typeahead__query input:focus,
body.u-bg-c .compare-container input.form-control:focus,
body.u-bg-c .compare-container input.m1:focus,
body.u-bg-c .compare-container input.m2:focus,
body.u-bg-c .compare-container input.m3:focus,
body.u-bg-c .compare-container input.compare-model:focus {
    border-color: var(--pf-terracotta, #d9694a) !important;
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14) !important;
    background: #ffffff !important;
}

/* Typeahead search results dropdown menu */
body.u-bg-c .typeahead__container {
    position: relative !important;
    width: 100% !important;
    z-index: 1051 !important;
}

body.u-bg-c .typeahead__backdrop {
    z-index: 1050 !important;
}

body.u-bg-c .typeahead__container .typeahead__result {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    min-width: 320px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}

body.u-bg-c .typeahead__container .typeahead__list {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    min-width: 320px !important;
    background: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    list-style: none !important;
}

body.u-bg-c .typeahead__container.result .typeahead__result,
body.u-bg-c .typeahead__container.result .typeahead__list,
body.u-bg-c .typeahead__container.filter .typeahead__dropdown {
    display: block !important;
}

body.u-bg-c .typeahead__container:not(.result) .typeahead__result,
body.u-bg-c .typeahead__container:not(.result) .typeahead__list {
    display: none !important;
}

body.u-bg-c .typeahead__item {
    display: block !important;
    border-bottom: 1px solid #eee !important;
    padding: 0 !important;
}

body.u-bg-c .typeahead__item:last-child {
    border-bottom: none !important;
}

body.u-bg-c .typeahead__item a,
body.u-bg-c .typeahead__item > a {
    display: block !important;
    padding: 10px 14px !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

body.u-bg-c .typeahead__item a:hover,
body.u-bg-c .typeahead__item.active a {
    background-color: #fff7ed !important;
    color: #c2410c !important;
}

body.u-bg-c .typeahead__item img {
    border-radius: 4px;
    object-fit: cover;
}

body.u-bg-c .typeahead__group {
    display: block !important;
}

body.u-bg-c .typeahead__group a,
body.u-bg-c .typeahead__group > a {
    display: block !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #17639f !important;
    background: #ecf5fc !important;
    border-bottom: 1px solid #bfdef6 !important;
    pointer-events: none;
}

body.u-bg-c .compare-container .cTab td,
body.u-bg-c .compare-container .cTab th { border-color: var(--pf-line); }

body.u-bg-c #goto.static-tab .btn {
    border-radius: var(--pf-pill) !important;
}

body.u-bg-c #goto .glyphicon-triangle-right { color: var(--pf-terracotta); }

/* ==========================================================================
   Article / comparison cards (.card with cardThumb/cardBody)
   ========================================================================== */
body.u-bg-c .card {
    position: relative;
    overflow: hidden;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s ease;
}

body.u-bg-c .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(38, 34, 31, .12);
    border-color: var(--pf-line-firm);
}

body.u-bg-c .cardThumb {
    position: relative;
    height: 195px;
    background-color: var(--pf-surface-alt);
    overflow: hidden;
}

body.u-bg-c .card:hover .cardThumb { height: 195px; }

body.u-bg-c .cardThumb > a {
    display: block;
    height: 100%;
    color: inherit;
}

body.u-bg-c .cardThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, opacity .35s ease;
}

/* The shared placeholder is a circle on a transparent square. Cover crops
   the circle against the card body. Keep the whole mark inside the thumb. */
body.u-bg-c .cardThumb img[src*="no-image.png"] {
    object-fit: contain;
    padding: 28px;
    background: var(--pf-surface-alt);
}

body.u-bg-c .cardThumbEmpty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--pf-surface-alt);
    color: var(--pf-muted);
}

body.u-bg-c .card:hover .cardThumb img {
    opacity: 1;
    transform: scale(1.05);
}

body.u-bg-c .cardBody {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 16px 18px 12px;
}

body.u-bg-c .card:hover .cardBody { height: auto; }

body.u-bg-c .cardTitle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px;
}

body.u-bg-c .cardTitle a {
    color: var(--pf-ink);
    transition: color .18s ease;
}

body.u-bg-c .cardTitle a:hover {
    color: var(--pf-terracotta);
}

body.u-bg-c .cardSubtitle,
body.u-bg-c .cardSubtitle a {
    color: var(--pf-ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
}

body.u-bg-c .cardSubtitle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}

/* Comparison and trending rows: equal cards, footer pinned to the bottom. */
body.u-bg-c .pf-card-grid {
    display: flex;
    flex-wrap: wrap;
}

body.u-bg-c .pf-card-grid > [class*="col-"] {
    display: flex;
    float: none;
    flex: 0 0 auto;
}

body.u-bg-c .pf-card-grid > .col-md-12 {
    display: block;
    width: 100%;
    flex: 0 0 100%;
}

body.u-bg-c .pf-card-grid .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 22px;
}

body.u-bg-c .pf-card-grid .cardBody {
    flex: 1 1 auto;
}

body.u-bg-c .cardDescription { display: none; }

/* Sleek Views Badge Pill — neatly inset inside the top-right image corner */
body.u-bg-c .cardDate {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: auto;
    height: auto;
    padding: 4px 12px;
    background: rgba(38, 34, 31, .82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--pf-pill) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    pointer-events: none;
}

body.u-bg-c .cardDateDay,
body.u-bg-c .cardDateMonth {
    display: inline;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: #ffffff !important;
}

body.u-bg-c .cardCategory {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 5;
    background: var(--pf-terracotta);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 0 var(--pf-pill) var(--pf-pill) 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

body.u-bg-c .cardFooter {
    padding: 12px 20px 14px;
    color: var(--pf-muted);
    font-size: 12.5px;
    font-weight: 500;
    border-top: 1px solid var(--pf-line);
    background: var(--pf-surface);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Static pages (about, terms, privacy, disclaimer, contact)
   The old hovercard header expects a banner photo + avatar that don't exist;
   reduce it to a plain page heading over the content card.
   ========================================================================== */
body.u-bg-c .hovercard .card-up-background,
body.u-bg-c .hovercard .useravatar { display: none; }

body.u-bg-c .hovercard { text-align: center; padding: 24px 0 4px; }

body.u-bg-c .hovercard .card-up-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--pf-ink);
}

body.u-bg-c .col-md-12.thumbnail {
    padding: 10px 36px 32px;
    margin-top: 14px;
}

body.u-bg-c .col-md-12.thumbnail p {
    color: var(--pf-ink-soft);
    line-height: 1.75;
}

/* Mobile filter-drawer toggle (app layout, visible-xs only) */
body.u-bg-c #toggle.navbar-toggle {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 0 10px;
    padding: 0;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line-firm);
    border-radius: 50%;
    color: var(--pf-terracotta);
    box-shadow: var(--pf-shadow-sm);
}

/* ==========================================================================
   Verification (KYC) message panel — steps 1, 3 and 4 all share this shape:
   round badge, title, lede, an optional notice and a single call to action.
   ========================================================================== */
body.u-bg-c .kyc-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 0 6px;
    text-align: center;
}

body.u-bg-c .kyc-panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--pf-terracotta-wash);
    border: 2px solid #f0d5cb;
    color: var(--pf-terracotta);
}

body.u-bg-c .kyc-panel-badge--ok {
    background: #e7f2ec;
    border-color: #c6e0d3;
    color: var(--pf-forest);
}

body.u-bg-c .kyc-panel-badge--bad {
    background: var(--pf-terracotta-wash);
    border-color: #efcdc7;
    color: var(--pf-danger);
}

body.u-bg-c .kyc-panel-title {
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.u-bg-c .kyc-panel-sub {
    max-width: 54ch;
    margin: 0 auto 26px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pf-ink-soft);
}

/* Next-step cards */
body.u-bg-c .kyc-next {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
    text-align: left;
}

body.u-bg-c .kyc-next-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-sm);
    color: var(--pf-ink);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.u-bg-c .kyc-next-card:hover,
body.u-bg-c .kyc-next-card:focus {
    transform: translateY(-2px);
    border-color: var(--pf-terracotta);
    box-shadow: var(--pf-shadow);
    color: var(--pf-ink);
    text-decoration: none;
}

body.u-bg-c .kyc-next-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--pf-radius-sm);
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta);
}

body.u-bg-c .kyc-next-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.u-bg-c .kyc-next-meta strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
body.u-bg-c .kyc-next-meta span { font-size: 12.5px; color: var(--pf-muted); line-height: 1.45; }

/* Verification record */
body.u-bg-c .kyc-cert {
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    padding: 16px 18px;
    text-align: left;
}

body.u-bg-c .kyc-cert-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pf-forest-deep);
}

/* Under review, not yet approved: the same record without the green, which
   would otherwise read as a pass before anyone has passed it. */
body.u-bg-c .kyc-cert--plain .kyc-cert-head { color: var(--pf-muted); }

body.u-bg-c .kyc-cert-list { margin: 0; }

body.u-bg-c .kyc-cert-list > div {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--pf-line);
    font-size: 13.5px;
}

body.u-bg-c .kyc-cert-list > div:last-child { border-bottom: 0; }

body.u-bg-c .kyc-cert-list dt {
    flex: 0 0 150px;
    font-weight: 500;
    color: var(--pf-muted);
}

body.u-bg-c .kyc-cert-list dd { margin: 0; font-weight: 600; color: var(--pf-ink); }

body.u-bg-c .kyc-panel-cta {
    border-radius: var(--pf-pill) !important;
    padding: 12px 30px;
    font-weight: 600;
}

body.u-bg-c .kyc-panel-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 26px;
    font-size: 12.5px;
    color: var(--pf-muted);
}

/* ==========================================================================
   Verification (KYC) — the /user/verification screens
   Steps 1-4 were built with hard-coded hex and inline styles that drifted from
   the storefront palette (admin slate greys, a second webfont, #d9653b instead
   of the terracotta). Everything below is the same UI on the --pf-* tokens, so
   the KYC flow reads as part of the site rather than a bolted-on wizard.
   ========================================================================== */

/* Step rail --------------------------------------------------------------
   Four steps across, connected. State is never colour alone: a finished step
   also carries a tick, and the current one is filled and ringed. */
body.u-bg-c .kyc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 26px;
    padding: 18px 6px 16px;
    list-style: none;
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}

body.u-bg-c .kyc-steps > li {
    position: relative;
    min-width: 0;
    text-align: center;
}

/* Connector runs from the previous badge's edge to this one's. */
body.u-bg-c .kyc-steps > li + li::before {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(-50% + 21px);
    right: calc(50% + 21px);
    height: 2px;
    background: var(--pf-line-firm);
}

body.u-bg-c .kyc-steps > li.is-done::before,
body.u-bg-c .kyc-steps > li.is-current::before { background: var(--pf-terracotta); }
body.u-bg-c .kyc-steps > li.is-ok::before { background: var(--pf-forest); }

body.u-bg-c .kyc-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    color: var(--pf-muted);
}

body.u-bg-c a.kyc-step { text-decoration: none; }
body.u-bg-c a.kyc-step:hover .kyc-step-badge,
body.u-bg-c a.kyc-step:focus .kyc-step-badge { border-color: var(--pf-terracotta); }
body.u-bg-c a.kyc-step:hover .kyc-step-label,
body.u-bg-c a.kyc-step:focus .kyc-step-label { color: var(--pf-terracotta-ink); }
body.u-bg-c a.kyc-step:focus-visible { outline: 2px solid var(--pf-terracotta); outline-offset: 3px; border-radius: var(--pf-radius-sm); }

body.u-bg-c .kyc-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pf-surface);
    border: 2px solid var(--pf-line-firm);
    color: var(--pf-muted);
    font-size: 14px;
    font-weight: 600;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body.u-bg-c .kyc-steps > li.is-done .kyc-step-badge,
body.u-bg-c .kyc-steps > li.is-current .kyc-step-badge {
    background: var(--pf-terracotta);
    border-color: var(--pf-terracotta);
    color: #fff;
}

body.u-bg-c .kyc-steps > li.is-current .kyc-step-badge {
    box-shadow: 0 0 0 4px rgba(217, 105, 74, .16);
}

body.u-bg-c .kyc-steps > li.is-ok .kyc-step-badge {
    background: var(--pf-forest);
    border-color: var(--pf-forest);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(33, 107, 78, .14);
}

body.u-bg-c .kyc-step-label {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pf-muted);
}

body.u-bg-c .kyc-steps > li.is-current .kyc-step-label {
    color: var(--pf-terracotta-ink);
    font-weight: 600;
}

body.u-bg-c .kyc-steps > li.is-ok .kyc-step-label { color: var(--pf-forest-deep); font-weight: 600; }

@media (max-width: 600px) {
    body.u-bg-c .kyc-steps { padding: 14px 2px 12px; }
    body.u-bg-c .kyc-step-badge { width: 30px; height: 30px; font-size: 13px; }
    body.u-bg-c .kyc-steps > li + li::before { top: 14px; left: calc(-50% + 18px); right: calc(50% + 18px); }
    body.u-bg-c .kyc-step-label { font-size: 11.5px; }
}

/* Notices ----------------------------------------------------------------
   One component for the reassurance box on step 1, the pending box on step 3
   and the rejection reason on step 4. */
body.u-bg-c .kyc-note {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin: 0 0 26px;
    padding: 14px 18px;
    background: var(--pf-terracotta-wash);
    border: 1px solid #f0d5cb;
    border-left: 4px solid var(--pf-terracotta);
    border-radius: var(--pf-radius);
    text-align: left;
}

body.u-bg-c .kyc-note-icon { flex: 0 0 auto; margin-top: 1px; color: var(--pf-terracotta-ink); }
body.u-bg-c .kyc-note-body { font-size: 13.5px; line-height: 1.6; color: var(--pf-ink-soft); }
body.u-bg-c .kyc-note-body strong { display: block; color: var(--pf-ink); font-weight: 600; }

body.u-bg-c .kyc-note--wait {
    background: #fdf3e6;
    border-color: #f0dcc0;
    border-left-color: #b9762a;
}
body.u-bg-c .kyc-note--wait .kyc-note-icon { color: #8a5a1e; }

body.u-bg-c .kyc-note--bad {
    background: #fbeceb;
    border-color: #efcdc7;
    border-left-color: var(--pf-danger);
}
body.u-bg-c .kyc-note--bad .kyc-note-icon { color: var(--pf-danger); }
body.u-bg-c .kyc-note--bad .kyc-note-body strong { color: var(--pf-danger); }

/* Step 2 form ------------------------------------------------------------ */
body.u-bg-c .kyc-form-head {
    margin-bottom: 24px;
    text-align: center;
}

body.u-bg-c .kyc-form-head h2 {
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.u-bg-c .kyc-form-head p {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--pf-ink-soft);
}

/* Numbered section header, so a long form reads as three short ones. */
body.u-bg-c .kyc-section {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 30px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pf-line);
}

body.u-bg-c .kyc-section:first-of-type { margin-top: 0; }

body.u-bg-c .kyc-section-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--pf-radius-sm);
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
    font-size: 13px;
    font-weight: 600;
}

body.u-bg-c .kyc-section-meta { min-width: 0; }
body.u-bg-c .kyc-section-meta h3 { margin: 0; font-size: 16px; font-weight: 600; }
body.u-bg-c .kyc-section-meta p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--pf-muted); }

body.u-bg-c .kyc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 20px;
}

body.u-bg-c .kyc-grid--full { grid-template-columns: 1fr; }

/* The four document cards carry longer titles, so they sit two-up. */
body.u-bg-c .kyc-grid--docs { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
body.u-bg-c .kyc-field { min-width: 0; margin: 0; }

body.u-bg-c .kyc-field > label:not(.kyc-file) {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pf-ink);
}

body.u-bg-c .kyc-field .form-control { width: 100%; }
body.u-bg-c .kyc-req { color: var(--pf-danger); font-weight: 600; }

body.u-bg-c .kyc-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pf-muted);
}

/* File pickers ----------------------------------------------------------
   The label is the click target, so the pointer path is native and needs no
   JS; the input keeps its place in the tab order behind it. */
body.u-bg-c .kyc-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body.u-bg-c .kyc-file {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 14px 16px;
    background: var(--pf-surface-alt);
    border: 1px dashed var(--pf-line-firm);
    border-radius: var(--pf-radius);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

body.u-bg-c .kyc-file:hover { border-color: var(--pf-terracotta); background: var(--pf-terracotta-wash); }
body.u-bg-c .kyc-file:focus-within {
    border-color: var(--pf-terracotta);
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14);
}

body.u-bg-c .kyc-file-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pf-radius-sm);
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    color: var(--pf-terracotta);
}

body.u-bg-c .kyc-file-meta { min-width: 0; }
body.u-bg-c .kyc-file-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--pf-ink); }
body.u-bg-c .kyc-file-name {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pf-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Already on file: the card goes green and the hint line names the file. */
body.u-bg-c .kyc-file.has-file { border-style: solid; border-color: #c6e0d3; background: #f2f8f5; }
body.u-bg-c .kyc-file.has-file .kyc-file-icon { color: var(--pf-forest); border-color: #c6e0d3; }
body.u-bg-c .kyc-file.has-file .kyc-file-name { color: var(--pf-forest-deep); }

body.u-bg-c .kyc-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--pf-line);
}

body.u-bg-c .kyc-submit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 32px;
    border-radius: var(--pf-pill) !important;
    font-size: 15px;
    font-weight: 600;
}

/* Error summary: one list at the top of the form, per WCAG 3.3.1. */
body.u-bg-c .kyc-errors { margin-bottom: 24px; padding: 14px 18px; }
body.u-bg-c .kyc-errors strong { display: block; margin-bottom: 6px; font-weight: 600; }
body.u-bg-c .kyc-errors ul { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }

/* ==========================================================================
   Shop landing (/products) — the category "floors"
   The ecommvue bundle ships this grid as square grey-bordered boxes with
   uppercase Roboto titles and images free to be any height up to 180/310px,
   so every row came out ragged and the badges inherited the shouting from
   .item-title. Restyled here on the --pf-* tokens; #landing keeps it off the
   product detail page and the phone catalog, which share these class names.
   ========================================================================== */

/* Category heading -------------------------------------------------------
   The bundle underlines it in near-black, which is the one hard edge on an
   otherwise soft page. */
body.u-bg-c #landing .category { margin: 34px 0 20px; }

body.u-bg-c #landing .category .title {
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pf-terracotta) !important;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.02em;
}

body.u-bg-c #landing .category .title .ct,
body.u-bg-c #landing .category .title .ct:hover,
body.u-bg-c #landing .category .title .ct:focus {
    color: var(--pf-ink) !important;
    text-decoration: none;
}

body.u-bg-c #landing .category .title .ct:hover { color: var(--pf-terracotta) !important; }
body.u-bg-c #landing .category .title i { margin-right: 8px; }

/* Cards ------------------------------------------------------------------
   .col-item is already themed globally; here it becomes a column so the
   title block and price sit at a predictable height in every card. */
body.u-bg-c #landing .col-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

body.u-bg-c #landing .col-item > .item-wrapper,
body.u-bg-c #landing .col-item > .model,
body.u-bg-c #landing .item-wrapper.model {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* The wide card splits into two bootstrap halves (col-xs-6 image, col-xs-6
   text) on phones, which as flex children of the card became two 50%-wide
   stacked blocks with a void beside each. A product card wants the image
   above the text at every width. */
body.u-bg-c #landing .item-wrapper > [class*="col-"],
body.u-bg-c #landing .col-item > [class*="col-"] {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

/* Browse-all grid (#lm): the cards are floated bootstrap columns, so one
   card a few pixels taller than its neighbours caught the next row's cards
   and left holes in the grid. Flex-wrap starts every row clean and gives
   the cards in a row one height. */
body.u-bg-c #lm {
    display: flex;
    flex-wrap: wrap;
}

body.u-bg-c #lm::before,
body.u-bg-c #lm::after,
body.u-bg-c #lm > .clearfix { display: none; }

body.u-bg-c #lm > [class*="col-"] {
    float: none;
    display: flex;
}

body.u-bg-c #lm > [class*="col-"] > .col-item {
    flex: 1 1 auto;
    width: 100%;
}

/* Gutters: the markup carries plr-0 / plr-1, i.e. none and one pixel. */
body.u-bg-c #landing .plr-0 { padding-left: 6px !important; padding-right: 6px !important; }
body.u-bg-c #landing .plr-1 { padding-left: 6px !important; padding-right: 6px !important; }

/* Image tiles ------------------------------------------------------------
   One fixed tile per size, so a row cannot go ragged and the space is
   reserved before the lazy-loaded image arrives (no layout shift). Press
   shots are transparent PNGs of wildly different crops, hence contain
   rather than cover. */
body.u-bg-c #landing .item-img-lr,
body.u-bg-c #landing .item-img-c {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: var(--pf-surface-alt);
    border-bottom: 1px solid var(--pf-line);
    overflow: hidden;
}

/* The wide card is the floor's feature slot, flanking a two-row mosaic of
   small ones; a taller tile lets it read that way instead of looking like a
   stretched version of its neighbours. */
body.u-bg-c #landing .item-img-lr { height: 282px; }
body.u-bg-c #landing .item-img-c { height: 168px; }

body.u-bg-c #landing .item-img-lr img,
body.u-bg-c #landing .item-img-c img {
    max-width: 100%;
    max-height: 100% !important;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .25s ease;
}

body.u-bg-c #landing .col-item:hover .item-img-lr img,
body.u-bg-c #landing .col-item:hover .item-img-c img { transform: scale(1.04); }

/* Views badge ------------------------------------------------------------
   Sits inside the image tile in one corner on every card. It used to
   inherit text-transform from .item-title on the mosaic cards only, which
   is why some read "75 VIEWS" and others "572 views". */
body.u-bg-c #landing .a-v {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    float: none;
    background: rgba(38, 34, 31, .82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--pf-pill) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2) !important;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: .02em;
    color: #ffffff !important;
}

/* The link is the positioning context for the badge and the ribbon. */
body.u-bg-c #landing .col-item .mask { position: relative; display: block; padding: 0; }

/* Title + price ----------------------------------------------------------
   .item-title arrives uppercase, in Roboto, with 20px of top padding; the
   page's own font and sentence case read as a product name rather than a
   shout, and clamping to two lines keeps a row's cards the same height. */
body.u-bg-c #landing .item-title,
body.u-bg-c #landing .col-item .item-title {
    display: block;
    padding: 12px 14px 0 !important;
    font-family: var(--pf-font) !important;
    text-transform: none !important;
    color: var(--pf-ink) !important;
    text-decoration: none;
}

body.u-bg-c #landing .item-title h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    margin: 0 !important;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--pf-ink);
}

body.u-bg-c #landing .item-title:hover h4 { color: var(--pf-terracotta); }

/* The price is the lone <p><small> under the title. */
body.u-bg-c #landing .col-item .no_padding > p,
body.u-bg-c #landing .col-item > .item-wrapper p {
    margin: 0;
    padding: 4px 14px 14px;
}

body.u-bg-c #landing .col-item p small {
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-terracotta-ink);
}

/* Buttons ----------------------------------------------------------------
   Most products have neither a template nor a quote flow, so this wrapper
   renders empty and was still taking up room under every image. */
body.u-bg-c #landing .customize_btn:empty { display: none; }

body.u-bg-c #landing .customize_btn {
    padding: 0 14px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.u-bg-c #landing .customize_btn .btn {
    flex: 1 1 auto;
    padding: 8px 12px;
    font-size: 13px;
}

/* Discount ribbon: same treatment as the product page. */
body.u-bg-c #landing .ribbon span {
    background: var(--pf-terracotta);
    box-shadow: 0 3px 10px -5px rgba(38, 34, 31, .5);
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: 0;
}

/* Keyboard: the card is two links (image, then title), and the bundle's
   reset leaves neither with a visible focus ring. */
body.u-bg-c #landing .col-item a:focus-visible {
    outline: 2px solid var(--pf-terracotta);
    outline-offset: -2px;
    border-radius: var(--pf-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    body.u-bg-c #landing .col-item,
    body.u-bg-c #landing .item-img-lr img,
    body.u-bg-c #landing .item-img-c img { transition: none; }

    body.u-bg-c #landing .col-item:hover { transform: none; }
    body.u-bg-c #landing .col-item:hover .item-img-lr img,
    body.u-bg-c #landing .col-item:hover .item-img-c img { transform: none; }
}

/* Phones ----------------------------------------------------------------
   The mosaic cards are col-xs-6, so two sit side by side; shorter tiles
   keep a pair on screen at once. */
@media (max-width: 767px) {
    body.u-bg-c #landing .category { margin: 26px 0 16px; }
    body.u-bg-c #landing .category .title { font-size: 19px; }
    body.u-bg-c #landing .item-img-lr { height: 170px; }
    body.u-bg-c #landing .item-img-c { height: 140px; }
    body.u-bg-c #landing .item-title h4 { font-size: 13.5px; }
    body.u-bg-c #landing .col-xs-12 > .item-wrapper .item-title h4 { min-height: 0; }
    body.u-bg-c #landing .plr-0,
    body.u-bg-c #landing .plr-1 { padding-left: 4px !important; padding-right: 4px !important; }
}

/* ==========================================================================
   Compare Page: Table & Sticky Affix Header
   ========================================================================== */
body.u-bg-c table.cTab,
body.u-bg-c .cTab {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.u-bg-c .compare-container {
    background: #ffffff !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    border-radius: var(--pf-radius-lg, 24px) !important;
    overflow: visible !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    width: 100% !important;
    max-width: 100% !important;
}

body.u-bg-c .compare-container .main_head {
    background: #ffffff !important;
    color: var(--pf-terracotta, #c2410c) !important;
    padding: 14px 20px !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--pf-line, #e2e8f0) !important;
}

body.u-bg-c .compare-container > .main_head {
    border-top-left-radius: calc(var(--pf-radius-lg, 24px) - 1px) !important;
    border-top-right-radius: calc(var(--pf-radius-lg, 24px) - 1px) !important;
}

body.u-bg-c .compare-container #specs {
    border-bottom-left-radius: calc(var(--pf-radius-lg, 24px) - 1px);
    border-bottom-right-radius: calc(var(--pf-radius-lg, 24px) - 1px);
}

/* `>` matters: every group's nested .childt is also a `table:last-child`, so an
   unscoped selector rounds the bottom of every group instead of just the last. */
body.u-bg-c .compare-container #specs > table:last-child,
body.u-bg-c .compare-container #specs > table:last-child tbody:last-child,
body.u-bg-c .compare-container #specs > table:last-child .childt,
body.u-bg-c .compare-container #specs > table:last-child tr:last-child {
    border-bottom-left-radius: calc(var(--pf-radius-lg, 24px) - 1px);
    border-bottom-right-radius: calc(var(--pf-radius-lg, 24px) - 1px);
}

body.u-bg-c .compare-container #specs > table:last-child tr:last-child th:first-child,
body.u-bg-c .compare-container #specs > table:last-child tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--pf-radius-lg, 24px) - 1px);
}

body.u-bg-c .compare-container #specs > table:last-child tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--pf-radius-lg, 24px) - 1px);
}

body.u-bg-c .compare-header,
body.u-bg-c td.compare-header {
    background: #ffffff !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

body.u-bg-c #ec-first {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--pf-nav-height, 96px) !important;
    z-index: 1050 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 2px solid var(--pf-terracotta, #d9694a) !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* When sticky bar is stuck */
body.u-bg-c .compare-container.is-stuck {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.u-bg-c #ec-first.is-stuck,
body.u-bg-c #ec-first.is-stuck .accordian-body,
body.u-bg-c #ec-first.is-stuck .accordian-body .affix-wrap {
    border-top-left-radius: var(--pf-radius-lg, 24px) !important;
    border-top-right-radius: var(--pf-radius-lg, 24px) !important;
}

body.u-bg-c #ec-first.is-stuck {
    border-top: 1px solid var(--pf-line, #e2e8f0) !important;
    border-left: 1px solid var(--pf-line, #e2e8f0) !important;
    border-right: 1px solid var(--pf-line, #e2e8f0) !important;
    border-bottom: 2px solid var(--pf-terracotta, #d9694a) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

body.u-bg-c .compare-container.is-stuck #specs {
    background: #ffffff !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    border-top: none !important;
    border-radius: 0 0 var(--pf-radius-lg, 24px) var(--pf-radius-lg, 24px) !important;
    box-shadow: var(--pf-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04)) !important;
}

body.u-bg-c #ec-first .accordian-body {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: static !important;
    box-sizing: border-box !important;
}

body.u-bg-c #ec-first .accordian-body .affix-wrap {
    background: #ffffff !important;
    padding: 12px 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body.u-bg-c #ec-first .accordian-body .col-sm-2 {
    width: 16.666667% !important;
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
    padding: 0 8px 0 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

body.u-bg-c #ec-first .accordian-body .col-sm-10,
body.u-bg-c .accordian-body.affix .col-sm-10 {
    width: 83.333333% !important;
    flex: 0 0 83.333333% !important;
    max-width: 83.333333% !important;
    padding: 0 12px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body.u-bg-c #ec-first .accordian-body .comp-col,
body.u-bg-c .accordian-body.affix .comp-col {
    padding-left: 6px;
    padding-right: 6px;
    width: 33.333333% !important;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

body.u-bg-c .accordian-body .comp-col .typeahead__container {
    margin-bottom: 6px;
}

body.u-bg-c .accordian-body .comp-col .form-control,
body.u-bg-c .accordian-body .comp-col input[type="search"] {
    height: 38px !important;
    border-radius: var(--pf-pill, 999px) !important;
    background: var(--pf-surface-alt, #fdfbf7) !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    width: 100% !important;
}

body.u-bg-c .accordian-body .comp-col .form-control:focus,
body.u-bg-c .accordian-body .comp-col input[type="search"]:focus {
    border-color: var(--pf-terracotta, #d9694a) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14) !important;
}

body.u-bg-c .accordian-body .media {
    margin-top: 4px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.u-bg-c .accordian-body .media .media-left {
    padding-right: 0 !important;
    flex-shrink: 0;
}

body.u-bg-c .accordian-body .media .media-object {
    border-radius: 4px;
    object-fit: contain;
    max-height: 48px;
    width: auto;
}

body.u-bg-c .accordian-body .media .media-body {
    flex: 1;
    min-width: 0 !important;
    overflow: hidden !important;
}

body.u-bg-c .accordian-body .media .media-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--pf-ink, #1e293b);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.u-bg-c .accordian-body .media .csd-p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-terracotta, #c2410c);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.u-bg-c .accordian-body .media .csd-p .btn {
    padding: 2px 8px !important;
    font-size: 11px !important;
    margin: 0 !important;
}

body.u-bg-c .accordian-body #goto {
    position: relative !important;
    overflow: visible !important;
}

body.u-bg-c .accordian-body #goto .dropdown {
    position: relative !important;
    overflow: visible !important;
}

body.u-bg-c .accordian-body #goto .btn {
    border-radius: var(--pf-pill, 999px);
    background: var(--pf-surface-alt, #fdfbf7);
    border: 1px solid var(--pf-line, #e2e8f0);
    color: var(--pf-ink, #1e293b);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    margin-top: 2px;
}

body.u-bg-c .accordian-body #goto .dropdown-menu,
body.u-bg-c #goto .dropdown-menu,
body.u-bg-c #gotomenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 99999 !important;
    min-width: 175px !important;
    max-height: 380px;
    overflow-y: auto !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16) !important;
    border-radius: 8px !important;
    border: 1px solid var(--pf-line, #e2e8f0) !important;
    background: #ffffff !important;
    padding: 6px 0 !important;
    margin-top: 4px !important;
}

body.u-bg-c #goto .dropdown:hover .dropdown-menu,
body.u-bg-c #goto.static-tab li.dropdown:hover .dropdown-menu {
    display: block !important;
}

body.u-bg-c #goto .dropdown-menu > li > a,
body.u-bg-c #gotomenu > li > a {
    color: var(--pf-ink, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    line-height: 1.4 !important;
    transition: background-color .15s ease, color .15s ease;
    display: block;
    text-decoration: none !important;
}

body.u-bg-c #goto .dropdown-menu > li > a:hover,
body.u-bg-c #goto .dropdown-menu > li > a:focus,
body.u-bg-c #gotomenu > li > a:hover,
body.u-bg-c #gotomenu > li > a:focus {
    background-color: var(--pf-surface-alt, #f8fafc) !important;
    color: var(--pf-terracotta, #d9694a) !important;
    font-weight: 600 !important;
}


/* Expert Opinion / Description row */
body.u-bg-c .cTab td:not(.compare-header),
body.u-bg-c .compare-expert-opinion {
    max-width: 100% !important;
    overflow: hidden;
}

body.u-bg-c .cTab .panel-group,
body.u-bg-c .compare-expert-opinion .panel-group {
    margin: 12px 16px !important;
    border-radius: var(--pf-radius, 8px);
    overflow: hidden;
}

body.u-bg-c .cTab .panel-default,
body.u-bg-c .compare-expert-opinion .panel-default {
    border: 1px solid var(--pf-line, #e2e8f0);
    border-radius: var(--pf-radius, 8px);
    box-shadow: none;
}

body.u-bg-c .cTab .panel-heading,
body.u-bg-c .compare-expert-opinion .panel-heading {
    background: var(--pf-surface-alt, #f8fafc);
    border-bottom: 1px solid var(--pf-line, #e2e8f0);
    padding: 10px 16px;
}

body.u-bg-c .cTab .panel-title,
body.u-bg-c .compare-expert-opinion .panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pf-ink, #1e293b);
    margin: 0;
}

body.u-bg-c .cTab .panel-title a,
body.u-bg-c .compare-expert-opinion .panel-title a {
    color: var(--pf-ink, #1e293b);
    text-decoration: none;
}

body.u-bg-c .cTab .panel-body.sd,
body.u-bg-c .compare-expert-opinion .panel-body.sd {
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--pf-ink, #334155);
    background: #ffffff;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Compare table rows & specs styling */
body.u-bg-c #specs table {
    margin: 0 !important;
    border-collapse: collapse;
    table-layout: fixed !important;
    width: 100% !important;
}

body.u-bg-c #specs .main_head {
    background: var(--pf-surface-alt, #f8fafc) !important;
    color: var(--pf-ink, #1e293b) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    border-top: 1px solid var(--pf-line, #e2e8f0) !important;
    border-bottom: 1px solid var(--pf-line, #e2e8f0) !important;
    cursor: pointer;
}

body.u-bg-c #specs .main_head .glyphicon {
    color: var(--pf-terracotta, #d9694a);
    margin-right: 8px;
    font-size: 10px;
}

body.u-bg-c #specs .childt {
    background: #ffffff;
    margin-bottom: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
}

body.u-bg-c #specs .childt tr {
    border-bottom: 1px solid #f1f5f9;
}

body.u-bg-c #specs .childt th.ssn {
    width: 16.666667% !important;
    font-weight: 600;
    color: #475569;
    background: #fbfcfe !important;
    border-right: 1px solid var(--pf-line, #e2e8f0) !important;
    font-size: 12.5px;
    padding: 10px 14px;
    vertical-align: middle;
}

body.u-bg-c #specs .childt td {
    width: 27.777778% !important;
    font-size: 12.5px;
    color: var(--pf-ink, #1e293b);
    padding: 10px 14px;
    border-right: 1px solid #f1f5f9;
    vertical-align: middle;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Multi-model comparison (>3 models) horizontal scroll */
body.u-bg-c .compare-container.compare-multi-models #ec-first .accordian-body .col-sm-2 {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex: 0 0 160px !important;
    background: #ffffff !important;
    z-index: 20 !important;
    border-right: 1px solid var(--pf-line, #e2e8f0) !important;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04) !important;
}

body.u-bg-c .compare-container.compare-multi-models #ec-first .accordian-body .col-sm-10 {
    width: calc(100% - 160px) !important;
    max-width: calc(100% - 160px) !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.u-bg-c .compare-container.compare-multi-models #ec-first .accordian-body .col-sm-10::-webkit-scrollbar {
    display: none !important;
}

body.u-bg-c .compare-container.compare-multi-models #ec-first .accordian-body .comp-col {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

body.u-bg-c .compare-container.compare-multi-models #specs {
    overflow-x: auto !important;
    width: 100% !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
}

body.u-bg-c .compare-container.compare-multi-models #specs::-webkit-scrollbar {
    height: 8px;
}

body.u-bg-c .compare-container.compare-multi-models #specs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

body.u-bg-c .compare-container.compare-multi-models #specs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

body.u-bg-c .compare-container.compare-multi-models #specs::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

body.u-bg-c .compare-container.compare-multi-models #specs table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: fixed !important;
}

body.u-bg-c .compare-container.compare-multi-models #specs th.main_head .main-head-title {
    position: sticky !important;
    left: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: 20 !important;
}

body.u-bg-c .compare-container.compare-multi-models #specs .childt th.ssn {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    background: #ffffff !important;
    border-right: 1px solid var(--pf-line, #e2e8f0) !important;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04) !important;
}

body.u-bg-c .compare-container.compare-multi-models #specs .childt td {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    box-sizing: border-box !important;
}


/* Phone width: the header took 184px of a ~700px screen (Bootstrap's
   collapsed navbar-form adds borders, padding and margins) and the search
   box stopped short; the Filters tab sat over page headings; and a nested
   .row on the phone page pushed the page 15px wider than the screen. */
@media (max-width: 767px) {
    body.u-bg-c .indigo-header { padding-top: 10px; }
    body.u-bg-c .indigo-nav { margin-bottom: 10px; }
    body.u-bg-c .indigo-nav .search-nav-col { padding: 0; }
    body.u-bg-c .indigo-nav .navbar-form {
        margin: 0;
        padding: 0 0 10px !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    body.u-bg-c .indigo-nav .navbar-form .form-group,
    body.u-bg-c .indigo-nav .input-group,
    body.u-bg-c .indigo-nav .typeahead__container,
    body.u-bg-c .indigo-nav .typeahead__field,
    body.u-bg-c .indigo-nav .typeahead__query,
    body.u-bg-c .indigo-nav .search-bar,
    body.u-bg-c .indigo-nav .icon-addon,
    body.u-bg-c .indigo-nav .navbar-form .form-control {
        width: 100% !important;
        display: block !important;
    }
    .filter-sidebar-toggle-btn { top: calc(100% - 84px); }
    body.u-bg-c .row > .row.pf-carousel-header { margin-left: 0; margin-right: 0; }
}

/* Article pages: /articles landing (.nw), category and tag listings (.nw-card grid). */
.nw { padding: 8px 0 48px; color: var(--pf-ink); }
.nw a, .nw a:hover, .nw a:focus { text-decoration: none; color: inherit; }

.nw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
.nw-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-terracotta-deep); }
.blogArticals .nw-title { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--pf-ink); }

.nw-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.nw-chips::-webkit-scrollbar { display: none; }
.nw .nw-chip { flex: 0 0 auto; padding: 7px 16px; border: 1px solid var(--pf-line-firm); border-radius: var(--pf-pill); background: var(--pf-surface); font-size: 14px; font-weight: 500; color: var(--pf-ink-soft); transition: background .15s, color .15s, border-color .15s; }
.nw .nw-chip:hover { border-color: var(--pf-terracotta); color: var(--pf-terracotta-deep); }
.nw .nw-chip.is-active { background: var(--pf-ink); border-color: var(--pf-ink); color: #fff; }

.nw-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--pf-ink-soft); }
.nw-meta span + span:before { content: "\2022"; margin-right: 12px; opacity: .6; }
.nw-meta-light { color: rgba(255,255,255,.85); }

/* Top: hero + "just in" list */
.nw-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-bottom: 40px; }
.nw .nw-hero { position: relative; display: block; min-height: 420px; border-radius: var(--pf-radius-lg); overflow: hidden; background: var(--pf-ink); box-shadow: var(--pf-shadow); }
.nw-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nw .nw-hero:hover .nw-hero-img { transform: scale(1.04); }
.nw-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,14,0) 35%, rgba(20,16,14,.55) 62%, rgba(20,16,14,.92) 100%); }
.nw-hero-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px; }
.nw-tag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: var(--pf-pill); background: var(--pf-terracotta-deep); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.blogArticals .nw-hero-title { margin: 0 0 10px; font-size: 30px; line-height: 1.2; font-weight: 700; color: #fff; }

.nw-side { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); background: var(--pf-surface); }
.blogArticals .nw-side-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-terracotta-deep); }
.nw .nw-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--pf-line); }
.nw .nw-row:first-of-type { border-top: 0; }
.nw-row-img { flex: 0 0 96px; height: 72px; border-radius: var(--pf-radius-sm); overflow: hidden; background: var(--pf-surface-alt); }
.nw-row-body { min-width: 0; }
.blogArticals .nw-row-title { margin: 0 0 4px; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--pf-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.nw .nw-row:hover .nw-row-title { color: var(--pf-terracotta-deep); }

.nw-cover { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Sections */
.nw-section { margin-bottom: 40px; scroll-margin-top: 100px; }
.nw-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.blogArticals .nw-section-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--pf-ink); }
.nw-section-tools { display: flex; align-items: center; gap: 8px; }
.nw .nw-more { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--pf-terracotta-deep); white-space: nowrap; }
.nw .nw-more:hover { color: var(--pf-ink); }
.nw-arrow { width: 36px; height: 36px; border: 1px solid var(--pf-line-firm); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); font-size: 22px; line-height: 1; padding: 0 0 3px; cursor: pointer; transition: background .15s, border-color .15s; }
.nw-arrow:hover:not(:disabled) { border-color: var(--pf-terracotta); background: var(--pf-terracotta-wash); }
.nw-arrow:disabled { opacity: .35; cursor: default; }
.nw-no-scroll .nw-arrow { display: none; }

.nw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.nw-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; margin: -4px -2px 0; }
.nw-rail::-webkit-scrollbar { display: none; }
.nw-rail > .nw-card { scroll-snap-align: start; }

a.nw-card, a.nw-card:hover, a.nw-card:focus { color: inherit; text-decoration: none; }
.nw-card { display: flex; flex-direction: column; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: var(--pf-surface); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
a.nw-card:hover { transform: translateY(-3px); box-shadow: var(--pf-shadow); border-color: var(--pf-line-firm); }
.nw-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--pf-surface-alt); overflow: hidden; }
.nw-card-img .nw-cover { transition: transform .4s ease; }
.nw-card:hover .nw-card-img .nw-cover { transform: scale(1.05); }
.nw-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: var(--pf-pill); background: rgba(20,16,14,.72); color: #fff; font-size: 12px; font-weight: 500; }
.nw-card-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px 16px 16px; }
body.u-bg-c .nw-card-title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--pf-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
a.nw-card:hover .nw-card-title { color: var(--pf-terracotta-deep); }

@media (max-width: 1199px) {
    .nw-rail { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 991px) {
    .nw-top { grid-template-columns: 1fr; }
    .nw .nw-hero { min-height: 360px; }
    .nw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nw-rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 767px) {
    .blogArticals .nw-title { font-size: 26px; }
    .nw .nw-hero { min-height: 300px; border-radius: var(--pf-radius); }
    .nw-hero-body { padding: 20px; }
    .blogArticals .nw-hero-title { font-size: 22px; }
    .nw-side { padding: 12px 16px; }
    .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .nw-rail { grid-auto-columns: 62%; gap: 12px; }
    .nw-arrow { display: none; }
    .nw-card-body { padding: 10px 12px 12px; }
    body.u-bg-c .nw-card-title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .nw * { transition: none !important; }
}

/* Card excerpt (category / tag listings) */
.nw-card-excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pf-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-card-text { display: flex; flex-direction: column; gap: 8px; }
.nw-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.nw .nw-eyebrow a { color: var(--pf-terracotta-deep); }
.nw .nw-eyebrow a:hover { color: var(--pf-ink); }
.nw-loading { padding: 24px 0; text-align: center; font-size: 14px; color: var(--pf-ink-soft); }
@media (max-width: 991px) { .nw-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 575px) { .nw-grid-wide { grid-template-columns: 1fr; } }

/* Single article page (/blog/{slug}). */
.rd-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.rd-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pf-terracotta), var(--pf-terracotta-deep)); transform: scaleX(0); transform-origin: 0 50%; }
.rd { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; color: var(--pf-ink); }

/* Header */
.rd-head { margin: 0 0 24px; }
.rd-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); }
.rd-crumbs a { padding: 4px 12px; border-radius: var(--pf-pill); background: var(--pf-terracotta-wash); color: var(--pf-terracotta-deep); }
.rd-crumbs a:hover { background: var(--pf-terracotta-deep); color: #fff; text-decoration: none; }
.rd-crumbs span { align-self: center; }
body.u-bg-c .blogArticals .rd-title { margin: 0 0 12px; font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--pf-ink); text-align: left; }
.rd-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; color: var(--pf-ink-soft); }
.rd-meta > * + *:before { content: "\2022"; margin-right: 12px; opacity: .6; }

/* Hero: the whole picture, on a blurred copy of itself so odd shapes never crop */
.rd-hero { position: relative; margin: 0 0 28px; border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-ink); isolation: isolate; }
.rd-hero:before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--rd-hero) center / cover no-repeat; filter: blur(40px) saturate(1.2); opacity: .75; }
.rd-hero a { display: block; }
body.u-bg-c .rd-hero-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 380px; margin: 0 auto; }

/* Body + sidebar */
.rd-layout { display: grid; grid-template-columns: minmax(0, 816px) 300px; justify-content: center; gap: 64px; align-items: start; }
.rd-main { min-width: 0; padding: 40px 48px 48px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); background: var(--pf-surface); box-shadow: var(--pf-shadow-sm); }
.rd-lead { margin-bottom: 24px; font-size: 21px; line-height: 1.6; color: var(--pf-ink); }
.rd-lead p { font-size: inherit; margin: 0 0 12px; }
.rd-lead:first-letter { float: left; margin: 6px 10px 0 0; font-size: 64px; line-height: .8; font-weight: 700; color: var(--pf-terracotta-deep); }

.rd-share { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.rd a.rd-share-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--pf-line-firm); border-radius: var(--pf-pill); background: var(--pf-surface); color: var(--pf-ink-soft); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s, background .15s, transform .15s; }
.rd a.rd-share-btn:hover { border-color: var(--pf-terracotta); color: var(--pf-terracotta-deep); background: var(--pf-terracotta-wash); transform: translateY(-1px); }
.rd a.rd-share-btn.is-done { border-color: var(--pf-forest); color: var(--pf-forest); }
.rd-share-btn svg { width: 18px; height: 18px; fill: currentColor; }

.rd-body { padding-top: 32px; border-top: 1px solid var(--pf-line); }
.rd-section { position: relative; margin-bottom: 32px; }
.rd-step { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--pf-terracotta-wash); color: var(--pf-terracotta-deep); font-weight: 700; }
.rd-prose { font-size: 18px; line-height: 1.8; color: #3a3430; overflow-wrap: break-word; }
body.u-bg-c .rd-prose p, .rd-prose li { font-size: 18px; line-height: 1.8; }
.rd-prose p { margin: 0 0 20px; }
.rd-prose h2, .rd-prose h3, .rd-prose h4 { margin: 40px 0 14px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--pf-ink); scroll-margin-top: 96px; }
.rd-prose h2 { font-size: 28px; } .rd-prose h3 { font-size: 25px; } .rd-prose h4 { font-size: 20px; }
.rd-section:first-child .rd-prose > :first-child, .rd-section:first-child .rd-prose > :first-child > :first-child { margin-top: 0; }
.rd-prose a { color: var(--pf-terracotta-deep); font-weight: 500; text-decoration: none; background-image: linear-gradient(var(--pf-terracotta-wash), var(--pf-terracotta-wash)); background-size: 100% 35%; background-position: 0 90%; background-repeat: no-repeat; transition: background-size .2s; }
.rd-prose a:hover { background-size: 100% 90%; text-decoration: none; }
.rd-prose strong { color: var(--pf-ink); }
.rd-prose ul, .rd-prose ol { margin: 0 0 20px; padding-left: 24px; }
.rd-prose li { margin-bottom: 8px; }
.rd-prose li::marker { color: var(--pf-terracotta); }
.rd-prose blockquote { margin: 28px 0; padding: 18px 24px; border: 0; border-left: 4px solid var(--pf-terracotta); border-radius: 0 var(--pf-radius) var(--pf-radius) 0; background: var(--pf-surface-alt); font-size: 20px; color: var(--pf-ink); }
body.u-bg-c .rd-prose img { max-width: 100%; height: auto; border-radius: var(--pf-radius); }
.rd-prose table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; border-radius: var(--pf-radius); background: var(--pf-surface); }
.rd-prose th, .rd-prose td { padding: 12px 14px; border-bottom: 1px solid var(--pf-line); text-align: left; }
.rd-prose th { background: var(--pf-surface-alt); font-weight: 600; }
.rd-figure { margin: 24px 0 0; border-radius: var(--pf-radius-lg); overflow: hidden; background: var(--pf-surface-alt); }
body.u-bg-c .rd-figure-img { display: block; width: 100%; height: auto; margin: 0; }

.rd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 40px 0 24px; padding-top: 28px; border-top: 1px solid var(--pf-line); }
.rd-tags-label { margin-right: 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-soft); }
.rd a.nw-chip { flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--pf-line-firm); border-radius: var(--pf-pill); background: var(--pf-surface); font-size: 14px; color: var(--pf-ink-soft); text-decoration: none; }
.rd a.nw-chip:hover { border-color: var(--pf-terracotta); color: var(--pf-terracotta-deep); }
.rd-share-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; border-radius: var(--pf-radius-lg); background: var(--pf-ink); color: #fff; }
.rd-share-end strong { font-size: 18px; }
.rd-share-end p { margin: 2px 0 0; font-size: 14px; color: rgba(255,255,255,.75); }
.rd-share-end .rd-share { margin: 0; }
.rd .rd-share-end a.rd-share-btn { border-color: rgba(255,255,255,.25); background: transparent; color: #fff; }
.rd .rd-share-end a.rd-share-btn:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.rd-comments { margin-top: 32px; }

.rd-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.rd-toc, .rd-aside-inner { padding: 20px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); background: var(--pf-surface); }
.rd-toc[hidden] { display: none; }
body.u-bg-c .blogArticals .rd-aside-title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-terracotta-deep); }
.rd-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.rd-toc li { counter-increment: toc; }
.rd-toc a, body.u-bg-c .rd-toc a { display: flex; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--pf-radius-sm); font-size: 14px; line-height: 1.4; color: var(--pf-ink-soft); text-decoration: none; transition: background .15s, color .15s; }
.rd-toc a:before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 600; color: var(--pf-muted); padding-top: 1px; }
body.u-bg-c .rd-toc a:hover { background: var(--pf-surface-alt); color: var(--pf-ink); text-decoration: none; }
body.u-bg-c .rd-toc a.is-active { background: var(--pf-terracotta-wash); color: var(--pf-terracotta-deep); font-weight: 600; }
.rd-toc a.is-active:before { color: var(--pf-terracotta-deep); }
.rd a.nw-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--pf-line); color: inherit; text-decoration: none; }
.rd a.nw-row:first-of-type { border-top: 0; }
.rd .nw-row-img { flex: 0 0 72px; height: 72px; }
body.u-bg-c .rd .nw-row-title { font-size: 14px; }
.rd a.nw-row:hover .nw-row-title { color: var(--pf-terracotta-deep); }

.rd-more { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--pf-line); }
.rd-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

body.u-bg-c .rd-top { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--pf-ink); color: #fff; box-shadow: var(--pf-shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; cursor: pointer; }
body.u-bg-c .rd-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.rd-top svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 1099px) {
    .rd-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
}
@media (max-width: 991px) {
    .rd-layout { grid-template-columns: 1fr; gap: 32px; }
    .rd-main { max-width: 816px; margin: 0 auto; width: 100%; }
    .rd-aside { position: static; max-width: 816px; margin: 0 auto; width: 100%; }
    .rd-toc { display: none !important; }
    .rd-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .rd { padding: 12px 0 48px; }
    .rd-main { padding: 24px 18px 28px; border-radius: var(--pf-radius); }
    .rd-head { margin-bottom: 20px; }
    body.u-bg-c .blogArticals .rd-title { font-size: 26px; }
    .rd-hero { margin-bottom: 20px; }
    body.u-bg-c .rd-hero-img { max-height: 280px; }
    .rd-lead { font-size: 18px; }
    .rd-lead:first-letter { font-size: 52px; }
    .rd-prose, body.u-bg-c .rd-prose p, .rd-prose li { font-size: 17px; }
    .rd-prose h2 { font-size: 24px; } .rd-prose h3 { font-size: 21px; }
    .rd-share-btn .rd-share-label { display: none; }
    .rd a.rd-share-btn { width: 42px; justify-content: center; padding: 0; }
    .rd-share-end { padding: 20px; }
    .rd-more-grid { grid-template-columns: 1fr; }
    .rd-more-grid .nw-card-img { aspect-ratio: 16 / 9; }
    .rd-top { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .rd *, .rd-top { transition: none !important; }
}