/* =====================================================================
   Design review round 4 (draft): the redesigned shop, category, sub-category,
   child-category, brand, brand-list and search pages ("listing_refresh").
   Loaded only on those pages while the switch is on. Colours come from the
   theme variables, so the approved new colours repaint this too.
   Everything that moves (sheets, floating bar) moves with transform only.
   ===================================================================== */

.twl-page {
    --twl-line: #e8e9ec;
    --twl-soft: #f3f4f6;
    padding: 12px 0 36px;
    color: var(--text);
}

.tw-i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Breadcrumbs ---------- */
.twl-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--muted);
}

.twl-crumbs li + li::before {
    content: "›";
    margin-right: 6px;
    color: #b3b8c1;
}

.twl-crumbs a {
    color: inherit;
}

.twl-crumbs a:hover {
    color: var(--primary);
}

.twl-crumbs [aria-current] {
    color: var(--text);
    font-weight: 600;
}

/* ---------- Page header ---------- */
.twl-banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--twl-soft);
}

.twl-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.twl-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--twl-line);
    border-radius: 10px;
}

.twl-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.twl-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--twl-soft);
    font-size: 13px;
    color: var(--muted);
}

.twl-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.twl-pills {
    display: flex;
    gap: 8px;
    padding: 12px 0 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.twl-pills::-webkit-scrollbar {
    display: none;
}

.twl-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--twl-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}

.twl-pill .tw-i,
.twl-pill img {
    width: 18px;
    height: 18px;
    color: var(--primary);
    object-fit: contain;
}

.twl-pill:hover {
    border-color: var(--primary);
    color: var(--text);
}

.twl-pill.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.twl-pill.is-active .tw-i {
    color: #fff;
}

/* ---------- Toolbar, chips ---------- */
.twl-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
}

.twl-tool {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--twl-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.twl-tool span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.twl-tool-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.twl-sort-desk {
    display: none;
}

.twl-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
}

.twl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 8px 0 12px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .1);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
}

.twl-chip:hover {
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .16);
}

.twl-chip .tw-i {
    width: 14px;
    height: 14px;
}

.twl-chip-clear {
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: underline;
}

/* ---------- Bottom sheets (phone) ---------- */
.twl-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    max-height: 86dvh;
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -8px 30px rgba(15, 17, 21, .18);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    contain: layout paint;
    outline: none;
}

.twl-sheet.is-open {
    transform: none;
    visibility: visible;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.twl-sheet.is-drag {
    transition: none;
}

.twl-sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 12px 10px 16px;
    border-bottom: 1px solid var(--twl-line);
    touch-action: none;
}

.twl-sheet-grip {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: #d8dbe0;
}

.twl-sheet-head strong {
    font-size: 16px;
}

.twl-sheet-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--twl-soft);
    color: var(--text);
    cursor: pointer;
}

.twl-sheet-body {
    flex: 1 1 auto;
    margin: 0;
    padding: 4px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.twl-sheet-foot {
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--twl-line);
}

.twl-btn,
.twl-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.twl-btn {
    flex: 1 1 auto;
    border: 0;
    background: var(--primary);
    color: #fff;
}

.twl-btn:hover {
    color: #fff;
    background: var(--primary-dark);
}

.twl-btn-ghost {
    flex: 0 0 auto;
    border: 1px solid var(--twl-line);
    background: #fff;
    color: var(--text);
}

.twl-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(15, 17, 21, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}

.twl-page.has-sheet .twl-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease;
}

html.twl-lock,
html.twl-lock body {
    overflow: hidden;
}

html.twl-lock .twl-float,
html.twl-lock #gcc-toggle {
    visibility: hidden;
}

/* ---------- Filter groups ---------- */
.twl-group {
    min-width: 0;
    margin: 0;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--twl-line);
}

.twl-group:last-child {
    border-bottom: 0;
}

.twl-group legend {
    float: left;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.twl-group legend + * {
    clear: both;
}

.twl-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 0;
    font-size: 14px;
    cursor: pointer;
}

.twl-check[hidden] {
    display: none;
}

.twl-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.twl-check span {
    flex: 1 1 auto;
}

.twl-check em {
    font-style: normal;
    font-size: 12px;
    color: var(--muted);
}

.twl-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.twl-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-size: 14px;
    color: var(--text);
}

.twl-links a.is-active {
    font-weight: 700;
    color: var(--primary);
}

.twl-links .tw-i,
.twl-links img {
    width: 18px;
    height: 18px;
    color: var(--primary);
    object-fit: contain;
}

.twl-brand-search {
    width: 100%;
    height: 40px;
    margin-bottom: 6px;
    padding: 0 12px;
    border: 1px solid var(--twl-line);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
}

.twl-brand-list.is-long {
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Two native range inputs on one track: the browser drags the thumbs. */
.twl-range {
    position: relative;
    height: 30px;
    margin: 6px 11px 8px;
}

.twl-range::before,
.twl-range::after {
    content: "";
    position: absolute;
    top: 13px;
    height: 4px;
    border-radius: 2px;
}

.twl-range::before {
    left: -11px;
    right: -11px;
    background: #e5e7eb;
}

.twl-range::after {
    left: var(--lo, 0%);
    right: calc(100% - var(--hi, 100%));
    background: var(--primary);
}

.twl-range input {
    position: absolute;
    top: 0;
    left: -11px;
    z-index: 1;
    width: calc(100% + 22px);
    height: 30px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.twl-range input::-webkit-slider-runnable-track {
    background: none;
}

.twl-range input::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
}

.twl-range input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: #fff;
    pointer-events: auto;
    cursor: pointer;
}

.twl-price-inputs {
    display: flex;
    gap: 10px;
}

.twl-price-inputs label {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.twl-price-inputs input {
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--twl-line);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: var(--text);
}

.twl-sort-list {
    list-style: none;
}

.twl-sort-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    border-bottom: 1px solid var(--twl-line);
    font-size: 15px;
    color: var(--text);
}

.twl-sort-list li:last-child a {
    border-bottom: 0;
}

.twl-sort-list a.is-active {
    font-weight: 700;
    color: var(--primary);
}

/* ---------- Product grid and cards ---------- */
.twl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-card.twl-card {
    min-width: 0;
    border-color: var(--twl-line);
    border-radius: 12px;
    background: #fff;
}

/* The grey square is the placeholder until the photo arrives; nothing moves when it does. */
.product-thumb.twl-thumb {
    background: var(--twl-soft);
}

.twl-thumb img {
    display: block;
    border-radius: 0;
}

.twl-off {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.twl-out {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(15, 17, 21, .75);
    font-size: 12px;
    color: #fff;
}

.product-body.twl-body {
    gap: 4px;
    text-align: left;
}

.product-title.twl-name {
    min-height: 0;
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.twl-name a {
    display: -webkit-box;
    min-height: 2.8em;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.twl-rating {
    font-size: 12px;
    color: var(--muted);
}

.twl-rating span {
    color: #f5a623;
}

.twl-rating em {
    font-style: normal;
}

.product-price.twl-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin: 0 0 8px;
    font-family: inherit;
}

.twl-price strong {
    font-size: 16px;
    color: var(--primary);
}

.twl-price del {
    font-size: 12px;
    font-weight: 400;
    color: #9aa1ab;
}

.twl-save {
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary);
}

/* ---------- Page switching ---------- */
.twl-pager {
    margin: 24px 0 8px;
    text-align: center;
}

.twl-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.twl-page-btn {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 6px;
    border: 1px solid var(--twl-line);
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    color: var(--text);
}

a.twl-page-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.twl-page-btn.is-current {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.twl-page-btn.is-off {
    opacity: .4;
}

.twl-gap {
    color: var(--muted);
}

.twl-far {
    display: none;
}

.twl-pager-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.twl-more {
    display: none;
}

@media (max-width: 991px) {
    .twl-pager.is-more .twl-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 50px;
        border: 1.5px solid var(--primary);
        border-radius: 12px;
        background: #fff;
        font-size: 15px;
        font-weight: 700;
        color: var(--primary);
    }

    .twl-pager.is-more .twl-more small {
        font-weight: 500;
        color: var(--muted);
    }

    .twl-pager.is-more .twl-more.is-loading {
        opacity: .6;
        pointer-events: none;
    }

    .twl-pager.is-more .twl-pages {
        display: none;
    }
}

/* ---------- Empty and no-result states ---------- */
.twl-empty {
    padding: 36px 16px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.twl-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--primary);
}

.twl-empty h2 {
    margin: 12px 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.twl-empty p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--muted);
}

.twl-empty .twl-btn {
    flex: 0 0 auto;
}

.twl-suggest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/* ---------- Floating filter/sort bar once the toolbar has scrolled away ---------- */
.twl-float {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tw-nav-h, 0px) + 16px);
    z-index: 260;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: #1e2939;
    box-shadow: 0 6px 20px rgba(15, 17, 21, .28);
    transform: translate(-50%, calc(100% + 40px + var(--tw-nav-h, 0px)));
    transition: transform .25s ease;
}

.twl-float.is-shown {
    transform: translate(-50%, 0);
}

.twl-float button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.twl-float-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .3);
}

/* ---------- Brand list page ---------- */
.twb-search {
    width: 100%;
    max-width: 420px;
    height: 44px;
    margin: 12px 0 16px;
    padding: 0 14px;
    border: 1px solid var(--twl-line);
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
}

.twb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.twb-grid li[hidden] {
    display: none;
}

.twb-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px 12px;
    border: 1px solid var(--twl-line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
}

.twb-grid a:hover {
    border-color: var(--primary);
}

.twb-grid img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.twb-grid span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.twb-grid em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

/* ---------- Tablet and desktop ---------- */
@media (min-width: 768px) {
    .twl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .twb-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .twl-page {
        padding-top: 20px;
    }

    .twl-title {
        font-size: 26px;
    }

    /* The filter sidebar lists the same categories on a wide screen. */
    .twl-head .twl-pills {
        display: none;
    }

    .twl-toolbar {
        justify-content: flex-end;
        margin: 16px 0 12px;
    }

    .twl-tool,
    .twl-float,
    .twl-sort,
    .twl-backdrop,
    .twl-sheet-grip,
    .twl-filter .twl-sheet-close {
        display: none;
    }

    .twl-sort-desk {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 14px;
        color: var(--muted);
    }

    .twl-sort-desk select {
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--twl-line);
        border-radius: 10px;
        background: #fff;
        font: inherit;
        font-size: 14px;
        color: var(--text);
    }

    .twl-layout {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .twl-sheet.twl-filter {
        position: static;
        z-index: auto;
        max-height: none;
        border: 1px solid var(--twl-line);
        border-radius: 14px;
        box-shadow: none;
        transform: none;
        visibility: visible;
        transition: none;
        contain: none;
    }

    .twl-filter .twl-sheet-head {
        padding: 14px 16px;
    }

    .twl-filter .twl-sheet-body {
        overflow: visible;
    }

    .twl-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .twl-far {
        display: block;
    }

    .twb-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .twl-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .twl-sheet,
    .twl-sheet.is-open,
    .twl-backdrop,
    .twl-float {
        transition: none;
    }
}

/* Nothing here and nothing filtered: sorting and filtering have nothing to work on,
   so only the message and the suggestions show. */
.twl-page.is-empty .twl-toolbar,
.twl-page.is-empty .twl-float,
.twl-page.is-empty .twl-filter {
    display: none;
}

@media (min-width: 992px) {
    .twl-page.is-empty .twl-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Opening a sheet used to flip its visibility, which passes down to every filter
   inside it, so the browser restyled all of them on each open and close. Here a
   closed sheet is only moved off screen and its contents skipped
   (content-visibility), which also keeps them out of the tab order and screen
   readers; tw-listing.js lays them out once while the page is idle, so opening only
   slides. Browsers without these features keep the old way. */
@supports (content-visibility: hidden) and (transition-behavior: allow-discrete) {
    .twl-sheet {
        visibility: visible;
        content-visibility: hidden;
        /* Far enough that the shadow does not show at the bottom edge. */
        transform: translateY(calc(100% + 48px));
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), content-visibility 0s linear .28s;
        transition-behavior: allow-discrete;
    }

    .twl-sheet.is-open,
    .twl-sheet.is-warm {
        content-visibility: visible;
    }

    .twl-sheet.is-open {
        transform: none;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    .twl-sheet.is-warm {
        transition: none;
    }

    .twl-sheet.is-drag {
        transition: none;
    }

    @media (min-width: 992px) {
        .twl-sheet.twl-filter {
            content-visibility: visible;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .twl-sheet,
        .twl-sheet.is-open {
            transition: none;
        }
    }
}