/* ==========================================================================
   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 .indigo-header {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-top: 18px;
}

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: 22px;
    min-height: 0;
}

/* On phones the navbar stacks (logo / search / expanded menu), and a 999px
   radius on a tall box renders as an oval that clips the corners. */
@media (max-width: 767px) {
    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 16px;
    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 is absolutely positioned by the old nav.css for a 46px
   input with 40px left padding; the pill input above dropped to 9px/16px, which
   left the icon sitting on the placeholder text. Re-make room and centre it. */
body.u-bg-c .navbar-form .icon-addon .form-control {
    padding-left: 42px;
}

body.u-bg-c .navbar-form .icon-addon .glyphicon,
body.u-bg-c .navbar-form .icon-addon .fa {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: auto;
    font-size: 15px;
    line-height: 1;
    color: var(--pf-muted);
}

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);
}

/* Bootstrap floats every navbar block to the top edge, so the brand (44px),
   search (39px) and the two menus (38px and 48px) all hung from the top at
   different depths. On desktop, lay the pill out as one centred flex row:
   brand, search, primary links, then the right-hand group pushed to the end. */
@media (min-width: 768px) {
    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: 0 1 auto;
        min-width: 180px;
    }

    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;
    }

    body.u-bg-c .indigo-nav .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex: 1 1 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;
    }
}

/* Between 768 and 991 the full menu shares the row with the search box, so
   trim the link padding to keep everything on one line. */
@media (min-width: 768px) and (max-width: 991px) {
    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);
    }
}

/* 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. */
body.u-bg-c .a-v {
    display: inline-block;
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 12px;
    color: var(--pf-muted);
}

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
   Hero, scroll-snap model rails (replacing the per-breakpoint Bootstrap
   carousels), latest-updates ticker, filter sidebar, and the load-more grid.
   ========================================================================== */

/* Hero chips jump to rail anchors; land them below the floating navbar. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Hero --------------------------------------------------------------------- */
body.u-bg-c .pf-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 36px 40px 32px;
    margin: 2px 0 28px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    overflow: hidden;
}

body.u-bg-c .pf-hero::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--pf-terracotta-wash), rgba(251, 237, 231, 0));
    pointer-events: none;
}

body.u-bg-c .pf-hero-copy {
    position: relative;
    flex: 1 1 55%;
    min-width: 0;
}

body.u-bg-c .pf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    margin-bottom: 16px;
    background: var(--pf-terracotta-wash);
    color: var(--pf-terracotta-ink);
    border-radius: var(--pf-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

body.u-bg-c .pf-hero-title {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 700;
}

body.u-bg-c .pf-hero-sub {
    margin: 0 0 22px;
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pf-ink-soft);
}

body.u-bg-c .pf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

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

body.u-bg-c .pf-hero-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.u-bg-c .pf-hero-chips-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pf-muted);
    margin-right: 2px;
}

body.u-bg-c .pf-chip {
    display: inline-block;
    padding: 7px 15px;
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    color: var(--pf-ink-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

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

body.u-bg-c .pf-hero-art {
    position: relative;
    flex: 0 1 42%;
    max-width: 440px;
}

@media (max-width: 991px) {
    body.u-bg-c .pf-hero { padding: 28px 26px 26px; }
}

@media (max-width: 767px) {
    body.u-bg-c .pf-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 18px 22px;
    }
    body.u-bg-c .pf-hero-art { display: none; }
}

/* 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: 2px 2px 8px;
    -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);
}

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-mcard-fav,
body.u-bg-c .pf-mcard-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.u-bg-c .pf-mcard-views svg { color: var(--pf-muted); }

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

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

/* 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;
}

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

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

body.u-bg-c .pf-updates-body { padding: 2px 4px 0; }

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;
}

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 ------------------------------------------------------------- */
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: var(--pf-terracotta-ink); }
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; }

/* Google CSE box in the category bar */
body.u-bg-c .googleSearch { padding-top: 2px; }

body.u-bg-c .googleSearch .gsc-control-cse {
    background: transparent;
    border: 0;
}

body.u-bg-c .googleSearch .gsc-input-box {
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    padding: 2px 10px;
}

body.u-bg-c .googleSearch input.gsc-input { background: transparent !important; }

body.u-bg-c .googleSearch .gsc-search-button-v2 {
    padding: 8px 14px;
    margin-left: 6px;
    border-radius: var(--pf-pill);
    border-color: var(--pf-terracotta);
    background-color: var(--pf-terracotta);
}

body.u-bg-c .googleSearch .gsc-search-button-v2:hover,
body.u-bg-c .googleSearch .gsc-search-button-v2:focus {
    border-color: var(--pf-terracotta-deep);
    background-color: var(--pf-terracotta-deep);
}

/* 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 {
    padding: 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 .thumbnail {
    position: relative;
    padding: 16px;
}

/* The bundle positions the views badge absolutely at top: -48px, which lands
   it on the card's title (these cards often have no image, so the title is the
   first content). Let it sit in flow, floated clear of the text instead. */
body.u-bg-c .blog-sidebar .thumbnail .a-v {
    position: static;
    float: right;
    margin: 0 0 8px 10px;
}

body.u-bg-c .blog-sidebar .section-box h4 {
    margin: 10px 0 6px;
    font-size: 15px;
    line-height: 1.45;
}

body.u-bg-c .blog-sidebar .section-box p {
    color: var(--pf-ink-soft);
    font-size: 13px;
    line-height: 1.6;
}

body.u-bg-c .blog-sidebar .section-box a:hover,
body.u-bg-c .blog-sidebar .section-box a:focus { text-decoration: none; }

/* ==========================================================================
   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;
}

/* 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 #view_model {
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    overflow: hidden;
}

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

/* 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;
}

/* 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: 3px 12px;
    font-size: 13px;
    color: var(--pf-ink-soft);
}

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

/* Related models sidebar */
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;
}

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

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

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);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
    padding: 6px 10px;
    overflow-x: auto;
}

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

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

body.u-bg-c .compare-container .typeahead__query input {
    width: 100%;
    background: var(--pf-surface-alt);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    padding: 9px 16px;
    font-size: 13.5px;
    color: var(--pf-ink);
    outline: none;
}

body.u-bg-c .compare-container .typeahead__query input:focus {
    border-color: var(--pf-terracotta);
    box-shadow: 0 0 0 3px rgba(217, 105, 74, .14);
}

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)
   The old design black-boxed the thumb, grew/shrank heights on hover, and let
   the fixed-height body overflow into the footer. Calm it down.
   ========================================================================== */
body.u-bg-c .cardThumb {
    height: 190px;
    background-color: var(--pf-surface-alt);
}

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

body.u-bg-c .cardThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

body.u-bg-c .cardBody {
    height: auto;
    min-height: 150px;
    max-height: 190px;
    overflow: hidden;
    padding: 18px 20px 8px;
}

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

body.u-bg-c .cardTitle { font-size: 17px; line-height: 1.35; }
body.u-bg-c .cardTitle a { color: var(--pf-ink); }
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: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The hover-reveal second half of the excerpt (with its "__" seams) is
   redundant once the subtitle is clamped. */
body.u-bg-c .cardDescription { display: none; }

body.u-bg-c .cardDate {
    width: auto;
    height: auto;
    padding: 5px 12px;
    top: 12px;
    right: 12px;
    background: rgba(38, 34, 31, .78);
    border-radius: var(--pf-pill);
    line-height: 1.2;
}

body.u-bg-c .cardDateDay,
body.u-bg-c .cardDateMonth { display: inline; font-size: 12px; letter-spacing: 0; }

body.u-bg-c .cardCategory {
    background: var(--pf-terracotta);
    border-radius: 0 var(--pf-pill) var(--pf-pill) 0;
}

body.u-bg-c .cardFooter {
    padding: 10px 20px 16px;
    color: var(--pf-muted);
    border-top: 1px solid var(--pf-line);
}

/* ==========================================================================
   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;
}

/* 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: 8px;
    right: 8px;
    z-index: 2;
    float: none;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--pf-line);
    border-bottom: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pf-ink-soft);
    backdrop-filter: blur(2px);
}

/* 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; }
}