/*some text here */
.product {
    border-bottom: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    margin-bottom: 0 !important;
    transition: all 0.1s ease;
    position: relative;
}

/* Watchlist star — overlaid on the top-left of the card (the fee ribbon
   owns the top-right). Sits outside the product <a> so a click toggles
   the watchlist instead of opening the item. Shared by grid + list view. */
.ssv2-wl-star {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    width: 30px;
    height: 30px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background 0.1s ease, transform 0.1s ease;
}
.ssv2-wl-star:hover { background: #fff; transform: scale(1.1); }
.ssv2-wl-star svg { display: block; }
.ssv2-wl-busy { opacity: 0.5; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
    .product:hover {
        transform: scale(1.03);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        z-index: 10;
        position: relative;
        background-color: #fff;
        border-radius: 4px;
    }
    /* Full-width list rows feel jumpy under the grid-view 1.03 scale —
       a 3% bump on a 700 px wide card translates to ~20 px of horizontal
       jitter. Drop the scale; keep just a soft shadow so hover still
       reads as interactive without the wobble. */
    .products.list-view .product:hover {
        transform: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        border-radius: 6px;
    }
}

/* No-fee / lower-fee corner ribbon (grid view): absolutely-positioned
   chip on the top-right of the card. The closest positioned ancestor
   is Bootstrap's .col-xs-6 wrapper, so it lands flush with the card
   corner. List view overrides further down dock it into the badges
   row instead — at full card width the corner would be far from the
   item it's about. */
.product-fee-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 2px 5px;
    margin: 6px 6px 0 0;
    line-height: 1;
    color: #fff;
    font-weight: 600;
    background-color: #ff7272;
    font-size: 10px;
}

/* Default pricing row (grid view): horizontal flex, end-time + price side-by-side. */
.product-pricing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.product-pricing-amount {
    display: flex;
    align-items: end;
}
.product-pricing-buyout { display: flex; }
.product-pricing-buyout-sep { padding: 0 7px; color: #333; }
.product-pricing-endtime {
    padding: 2px 5px;
    color: #777;
    font-weight: 600;
    font-size: 11px;
}

/* List view: single column of full-width rows. Each card is a 2-col grid:
   image (fixed) · content (everything else, stacked vertically). Pricing
   sits right under the title instead of being banished to a far-right
   column — on wide screens the old 3-col layout left the price floating
   way off to the side of the title it belonged to. */
.products.list-view {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}
.products.list-view .product {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.products.list-view .product-item {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-areas:
        "img title"
        "img pricing"
        "img badges"
        "img endtime"
        "img cats";
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 16px;
    row-gap: 6px;
    padding: 14px;
    align-items: start;
    text-decoration: none;
}
.products.list-view .img-wrap {
    grid-area: img;
    width: 140px;
    height: 140px;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products.list-view .img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.products.list-view .title-container {
    grid-area: title;
    margin: 0;
}
.products.list-view .title-container h3 {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    /* Two-line clamp keeps cards uniform-height-ish without
       fighting the surrounding grid layout. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.products.list-view .product-badges {
    grid-area: badges;
    margin: 0;
}
/* In grid view the ribbon hangs in the card's top-right corner. In a
   full-width list row that lands acres to the right of the title, so
   pull it inline with the rest of the badges — matches the visual
   weight of the surrounding chips but keeps its accent colour. */
.products.list-view .product-fee-ribbon {
    position: static;
    margin: 0;
    border-radius: 2px;
}
/* `display: contents` makes .product-pricing transparent to the grid:
   the inner amount and endtime become direct grid items and can each
   slot into their own area. Lets the list view split the price-row
   that grid view keeps glued together — no template restructure. */
.products.list-view .product-pricing {
    display: contents;
}
.products.list-view .product-pricing-amount {
    grid-area: pricing;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}
.products.list-view .product-pricing-amount .current-price {
    font-size: 20px !important;
}
.products.list-view .product-pricing-buyout {
    display: inline-flex;
    align-items: baseline;
}
.products.list-view .product-pricing-buyout-sep {
    display: inline;
    padding: 0 4px;
}
.products.list-view .product-pricing-endtime {
    grid-area: endtime;
    align-self: end;
    padding: 0;
}
.products.list-view > .product { display: block; }

.filter-button.active {
    box-shadow: none !important;
    background-color: #2891ff;
    color: #fff;
    font-weight: 600;
}
/* Hover on the active tab keeps the same accent — Bootstrap's default
   .btn:hover would otherwise flash a grey tone over the blue. */
.filter-button.active:hover,
.filter-button.active:focus,
.filter-button.active:active {
    background-color: #1e7ce8;
    color: #fff;
}

@media (max-width: 767px) {
    #main {
        padding: 15px 5px;
        margin: 0;
    }

    .img-wrap {
        height: 150px !important;
    }

    .img-wrap img {
        height: 100% !important;
        width: auto !important;
    }

    /* Narrow screens: same layout as desktop list view (image | stacked
       content with title → price → badges → endtime), just with a
       smaller thumbnail and tighter padding. The display: contents
       split on .product-pricing carries through from the base rule. */
    .products.list-view .product-item {
        grid-template-columns: 100px minmax(0, 1fr);
        column-gap: 12px;
        padding: 12px;
    }
    .products.list-view .img-wrap {
        width: 100px;
        height: 100px;
    }
    .products.list-view .product-pricing-amount .current-price {
        font-size: 16px !important;
    }

    .product {
        margin-bottom: 0 !important;
    }
}

/* View-mode toggle: borderless icon buttons that sit next to the Sort by
   control on desktop and inline with the Filter+Sort row on mobile. The
   active mode keeps a subtle blue tint so the user can read state at a
   glance without an extra label. */
.view-toggle-group {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
/* Right-align the toggle inside #topPanel — the row is justify:
   space-between, so without this push the group sat in the middle
   between the Sort by control and the trailing clearfix div. */
.view-toggle-group-desktop {
    margin-left: auto;
}
.view-toggle-group-mobile {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px;
    /* Match the height of the Filter button + Sort select sitting next
       to it on mobile — Bootstrap's .form-control is 34 px tall, the
       Filter chip lives at 32 px from its 5+5 vertical padding, and an
       unsized toggle wrapper would land at 38 px and out-tower both.
       Lock the wrapper to 38 px (border included) and shrink the
       inner buttons to fit so the whole row reads as one strip. */
    height: 38px;
    box-sizing: border-box;
    align-items: center;
}
.view-toggle-group-mobile .view-toggle-btn {
    height: 32px;
    width: 32px;
}
@media (max-width: 991px) {
    /* Same 38 px height for the Filter chip + Sort select so the
       three controls in the mobile row align cleanly. The Filter
       chip's inline style sets padding only, so the height comes
       from its content (icon + text); pin a min-height instead of
       overriding the padding. */
    .visible-sm.show-filters,
    .visible-xs.show-filters,
    .show-filters {
        min-height: 38px;
    }
    .sortby-menu #sortSelect {
        height: 38px;
    }
}
.view-toggle-btn {
    background: transparent;
    border: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #888;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.view-toggle-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}
.view-toggle-btn:hover,
.view-toggle-btn:focus {
    color: #333;
    background-color: #f5f7fa;
    outline: none;
}
.view-toggle-btn.active {
    color: #2891ff;
    background-color: #eef5fc;
}
.view-toggle-btn.active:hover,
.view-toggle-btn.active:focus {
    color: #2891ff;
    background-color: #e3eefb;
}

.header-cart-navi .btn-group {
    display: flex;
}

.header-cart-navi .btn-group > .btn,
.header-cart-navi .btn-group > a.btn {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    padding: 2px 0;
}

.checkbox-item label {
    margin: 6px 0 0 0;
    cursor: pointer;
}

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d1d1;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    vertical-align: middle;
    outline: none;
}

.custom-checkbox:focus {
    outline: none;
    box-shadow: none;
}

.custom-checkbox:hover {
    border-color: #4096ff;
}

.custom-checkbox:checked {
    background-color: #4096ff;
    border-color: #4096ff;
}

.custom-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

.cat-item a {
    color: black;
    font-weight: normal;
    text-decoration: none;
    padding-bottom: 5px;
}

.cat-item a:hover {
    color: black;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}


.cat-item-header a {
    color: #3e77aa;
    font-weight: normal;
    text-decoration: none;
    padding-bottom: 5px;
}

.cat-item-header:not(:first-child) {
    padding-top: 15px;
}

.cat-item-header a:hover {
    color: #3e77aa;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}

.cat-menu {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
}

.cat-menu a {
    color: #333;
    text-decoration: none;
}

.cat-menu a:hover {
    color: #333;
    text-decoration: underline;
}

.arrow {
    display: inline-block;
    font-size: 10px;
    transition: transform 0.3s ease;
    margin-left: 5px;
}

.rotate {
    transform: rotate(90deg);
}

.submenu {
    margin-left: 24px;
}

.custom-icon-arrow-right {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #aaa; /* icon color */
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g transform='scale(1.6 1.6)'><path fill='white' stroke='white' stroke-linejoin='round' stroke-linecap='round' stroke-width='9' d='M 24.25 90 c -0.896 0 -1.792 -0.342 -2.475 -1.025 c -1.367 -1.366 -1.367 -3.583 0 -4.949 L 60.8 45 L 21.775 5.975 c -1.367 -1.367 -1.367 -3.583 0 -4.95 c 1.367 -1.366 3.583 -1.366 4.95 0 l 41.5 41.5 c 1.367 1.366 1.367 3.583 0 4.949 l -41.5 41.5 C 26.042 89.658 25.146 90 24.25 90 z'/></g></svg>") no-repeat center / contain;
    /* The masked SVG glyph sits in the top portion of the 16x16 box,
       so the icon looks visually above the text baseline. Nudge down
       to match sibling arrow-left / arrow-down (which carry the same
       translateY). */
    transform: translateY(3px);
}

.custom-icon-arrow-left {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background-color: #777; /* icon color */
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g transform='scale(1.6 1.6)'><path fill='white' stroke='white' stroke-linejoin='round' stroke-linecap='round' stroke-width='9' d='M 65.75 90 c 0.896 0 1.792 -0.342 2.475 -1.025 c 1.367 -1.366 1.367 -3.583 0 -4.949 L 29.2 45 L 68.225 5.975 c 1.367 -1.367 1.367 -3.583 0 -4.95 c -1.367 -1.366 -3.583 -1.366 -4.95 0 l -41.5 41.5 c -1.367 1.366 -1.367 3.583 0 4.949 l 41.5 41.5 C 63.958 89.658 64.854 90 65.75 90 z'/></g></svg>") no-repeat center / contain;
    transform:translateY(3px);
}

.custom-icon-arrow-down {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #333; /* icon color */
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g transform='scale(1.6 1.6)'><path fill='white' stroke='white' stroke-linejoin='round' stroke-linecap='round' stroke-width='9' d='M 90 24.25 c 0 -0.896 -0.342 -1.792 -1.025 -2.475 c -1.366 -1.367 -3.583 -1.367 -4.949 0 L 45 60.8 L 5.975 21.775 c -1.367 -1.367 -3.583 -1.367 -4.95 0 c -1.366 1.367 -1.366 3.583 0 4.95 l 41.5 41.5 c 1.366 1.367 3.583 1.367 4.949 0 l 41.5 -41.5 C 89.658 26.042 90 25.146 90 24.25 z'/></g></svg>") no-repeat center / contain;
    transform: translateY(4px);
}

.custom-icon-arrow-up {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #aaa; /* icon color */
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g transform='scale(1.6 1.6)'><path fill='white' stroke='white' stroke-linejoin='round' stroke-linecap='round' stroke-width='9' d='M 90 65.75 c 0 0.896 -0.342 1.792 -1.025 2.475 c -1.366 1.367 -3.583 1.367 -4.949 0 L 45 29.2 L 5.975 68.225 c -1.367 1.367 -3.583 1.367 -4.95 0 c -1.366 -1.367 -1.366 -3.583 0 -4.95 l 41.5 -41.5 c 1.366 -1.367 3.583 -1.367 4.949 0 l 41.5 41.5 C 89.658 63.958 90 64.854 90 65.75 z'/></g></svg>") no-repeat center / contain;
}

/* Apply / Clear all footer in the cross-site search filter. Visual
   styling lives here; the actual pinning to the viewport bottom is
   done by pinFilterActions() in cross-site-searchv2.js, which adds
   the .filter-actions-pinned class with explicit left / width
   matching the filter column. position: sticky on .filter-actions
   doesn't engage on search.aspx because #main carries
   overflow-x: hidden (application.css:218), which makes #main the
   scroll context for sticky instead of the window. */
.filter-actions {
    background: #fff;
    padding: 12px 15px 14px;
    margin: 14px -15px 0;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.filter-actions.filter-actions-pinned {
    position: fixed;
    bottom: 0;
    z-index: 100;
    margin: 0;
    box-sizing: border-box;
}
.filter-actions .filter-actions-apply {
    width: 100%;
    background: #2891ff;
    border-color: #2891ff;
    color: #fff;
    font-weight: 600;
    padding: 8px 12px;
}
.filter-actions .filter-actions-apply:hover,
.filter-actions .filter-actions-apply:focus {
    background: #1f7ad6;
    border-color: #1f7ad6;
    color: #fff;
}
/* .filter-dirty warning highlight lives further down (existing rule
   pulls Apply to yellow when there are unapplied changes); nothing to
   override here so the footer-sticky version inherits that. */
.filter-actions .filter-actions-clear {
    width: 100%;
    color: #777;
    font-size: 13px;
    padding: 4px 8px;
    text-decoration: none;
}
.filter-actions .filter-actions-clear:hover,
.filter-actions .filter-actions-clear:focus {
    color: #d9534f;
    text-decoration: underline;
}


@media (max-width: 991px) {
    .mobile-filter-trigger {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9990;
    }

    .filters-mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 9998;
    }

    .filters-mobile-overlay.active {
        display: block;
    }

    .facets-container {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
        transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    }

    .facets-container.active {
        right: 0;
        background: #fff;
    }

    .filters-wrapper {
        padding: 15px;
    }

    .filter-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }

    .filters-container {
        z-index: auto;
    }

    #categoryModal .modal-dialog {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    #categoryModal .modal-content {
        height: 100%;
        border-radius: 0;
    }

    #categoryModal .modal-body {
        padding: 0;
        overflow-y: auto;
    }

    .mobile-category-level {
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .mobile-category-header {
        padding: 15px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .btn-back-category {
        background: none;
        border: none;
        font-size: 16px;
        font-weight: 500;
        padding: 0;
        color: #333;
        display: flex;
    }

    .mobile-category-list {
        padding: 0;
    }

    .mobile-cat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }

    .mobile-category-link {
        flex: 1;
        font-size: 16px;
        color: #333;
    }

    .cat2, .cat3, .cat4, .cat5 {
        display: none !important;
    }

    .category-arrow {
        padding: 5px 15px;
        cursor: pointer;
    }

    .store-item-container {
        padding-top: 10px;
    }
}

@media (min-width: 991px) {
    .mobile-filter-trigger,
    .filters-mobile-overlay {
        display: none;
    }
}

@media (max-width: 1200px) {
    .container {
        width: 95%;
    }

    .search-line .input-group {
        width: 100%;
    }
}

/* Store collapsible content */
[class^="store-collapsible-content-"] {
    overflow: hidden;
    transition: max-height 0.2s ease;
}

[class^="store-collapsible-content-"].collapsed {
    max-height: 0 !important;
}

/* Search progress bar */
.search-progress {
    width: 100%;
    height: 3px;
    background: #e9e9e9;
    overflow: hidden;
    border-radius: 2px;
}

.search-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #4096ff, #69b1ff, #4096ff);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(430%); }
}

/* Skeleton card styles for progressive search loading */
.skeleton-card {
    position: relative;
    overflow: hidden;
    padding: 10px;
}

.skeleton-card .skeleton-image {
    width: 100%;
    height: 200px;
    background: #e8e8e8;
    border-radius: 4px;
}

.skeleton-card .skeleton-badges {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.skeleton-card .skeleton-badge {
    width: 60px;
    height: 16px;
    background: #e8e8e8;
    border-radius: 2px;
}

.skeleton-card .skeleton-title {
    margin-top: 8px;
}

.skeleton-card .skeleton-title-line {
    height: 14px;
    background: #e8e8e8;
    border-radius: 2px;
    margin-bottom: 4px;
}

.skeleton-card .skeleton-title-line:first-child {
    width: 100%;
}

.skeleton-card .skeleton-title-line:last-child {
    width: 60%;
}

.skeleton-card .skeleton-price {
    margin-top: 8px;
    width: 80px;
    height: 18px;
    background: #e8e8e8;
    border-radius: 2px;
}

.skeleton-card .skeleton-image,
.skeleton-card .skeleton-badge,
.skeleton-card .skeleton-title-line,
.skeleton-card .skeleton-price {
    position: relative;
    overflow: hidden;
}

.skeleton-card .skeleton-image::after,
.skeleton-card .skeleton-badge::after,
.skeleton-card .skeleton-title-line::after,
.skeleton-card .skeleton-price::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.skeleton-card.skeleton-exit {
    animation: skeleton-collapse 0.3s ease forwards;
}

@keyframes skeleton-collapse {
    0% { opacity: 1; max-height: 400px; padding: 10px; }
    100% { opacity: 0; max-height: 0; padding: 0; overflow: hidden; }
}

/* Search status indicator */
.search-status {
    text-align: center;
    padding: 12px;
    color: #888;
    font-size: 13px;
}

.search-status .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: #4096ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Load More button */
.load-more-container {
    text-align: center;
    padding: 20px;
    clear: both;
}

.load-more-btn {
    padding: 10px 40px;
    font-size: 14px;
    font-weight: 600;
    color: #4096ff;
    background: #fff;
    border: 2px solid #4096ff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    background: #4096ff;
    color: #fff;
}

@media (max-width: 767px) {
    .skeleton-card .skeleton-image {
        height: 150px;
    }
}

/* Apply-button warning state: highlighted yellow when the user has unapplied
   filter changes; reverts to the default colour after Apply is clicked. */
#btnApplyFilter.filter-dirty,
#btnApplyFilter.filter-dirty:hover,
#btnApplyFilter.filter-dirty:active,
#btnApplyFilter.filter-dirty:focus,
#btnApplyUnifiedCategory.filter-dirty,
#btnApplyUnifiedCategory.filter-dirty:hover,
#btnApplyUnifiedCategory.filter-dirty:active,
#btnApplyUnifiedCategory.filter-dirty:focus {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #fff;
}

/* "Save this search" button — lives in the filter footer under
   Apply / Clear all. Outline / secondary style so it doesn't visually
   compete with the primary Apply CTA above it. Class-based styling so
   Bootstrap's .btn base + any background-image gradient can't override. */
.filter-actions .filter-actions-save {
    background: transparent;
    background-image: none;
    border: 1px solid #c7d6e3;
    color: #2080cb;
    font-weight: 500;
    padding: 7px 12px;
    margin-top: 6px;
    width: 100%;
}
.filter-actions .filter-actions-save:hover,
.filter-actions .filter-actions-save:focus,
.filter-actions .filter-actions-save:active {
    background: #f4f9fd;
    background-image: none;
    border-color: #b8d4ec;
    color: #2080cb;
}
.filter-actions .filter-actions-save:disabled,
.filter-actions .filter-actions-save:disabled:hover {
    background: transparent;
    border-color: #c7d6e3;
    color: #2080cb;
    opacity: 0.55;
    cursor: not-allowed;
}

/* Saved-searches modal — mirrors #ssv2Modal (Choose stores) layout so
   the user sees a familiar dialog when naming a search. The display
   rules duplicate the Choose-stores CSS scoped to this modal's ID. */
#savedSearchModal .modal-dialog { width: 560px; max-width: calc(100vw - 32px); margin: 60px auto; }
#savedSearchModal .modal-content { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); position: relative; border-radius: 0; }
#savedSearchModal .ssv2-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; padding: 6px; color: #94a3b8; cursor: pointer; line-height: 0; }
#savedSearchModal .ssv2-modal-close:hover { color: #334155; }
#savedSearchModal .ssv2-modal-head { padding: 24px 28px 16px; }
#savedSearchModal .ssv2-modal-title { font-size: 19px; font-weight: 600; color: #0f172a; }
#savedSearchModal .ssv2-modal-body { padding: 0 28px 16px; }
#savedSearchModal .ssv2-modal-body label { font-size: 13px; font-weight: 600; color: #334155; display: block; margin-bottom: 6px; }
#savedSearchModal .ssv2-modal-body input.form-control { height: 38px; padding: 0 12px; border: 1px solid #e2e8f0; box-shadow: none; font-size: 14px; outline: none; background: #fff; color: #0f172a; border-radius: 0; }
#savedSearchModal .ssv2-modal-body input.form-control:focus { border-color: #47A0E9; box-shadow: 0 0 0 3px rgba(71, 160, 233, 0.18); }
#savedSearchModal .ssv2-modal-error { color: #c0392b; font-size: 13px; margin-top: 8px; }
#savedSearchModal .ssv2-modal-footer { padding: 14px 28px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid #f1f5f9; }
#savedSearchModal .ssv2-modal-btn { border: 0; padding: 9px 18px; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.2; }
#savedSearchModal .ssv2-modal-btn-ghost { background: transparent; color: #475569; border: 1px solid #e2e8f0; }
#savedSearchModal .ssv2-modal-btn-ghost:hover { background: #f8fafc; color: #0f172a; }
#savedSearchModal .ssv2-modal-btn-primary { background: #47A0E9; color: #fff; }
#savedSearchModal .ssv2-modal-btn-primary:hover { background: #2080cb; }
#savedSearchModal .ssv2-modal-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Saved-searches list — lives at the top of #storesFilterContainer, so
   it shows in Manual mode and hides automatically in Recommended. */
/* Saved-searches list — rendered only when the customer has entries.
   Heading reuses .facet-title so it matches STORE / SELLER TYPE / etc. */
.ssv2-saved-section { padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.ssv2-saved-section .ssv2-saved-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid #eee; }
.ssv2-saved-section .ssv2-saved-row:first-child { border-top: 0; }
.ssv2-saved-section .ssv2-saved-load { flex: 1; color: #333; text-decoration: none; font-weight: 500; }
.ssv2-saved-section .ssv2-saved-load:hover { color: #1f7ad6; }
.ssv2-saved-section .ssv2-saved-remove { border: 0; background: transparent; color: #a00; font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; }

/* Colour filter (Mercari) — each option is a clickable row:
   [swatch]  [label] ………… [✓ right edge]. Vertically centred; the tick
   is pushed to the right edge with margin-left:auto (robust regardless
   of label width) and shown only when active. */
.filter-color-option {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 4px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
}
.filter-color-option:hover { background: #f4f9fd; }
.filter-color-option .ssv2-color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 12px;
}
.filter-color-option .ssv2-color-swatch-light { border: 1px solid #ccc; }
.filter-color-option .ssv2-color-label {
    font-size: 13px;
    line-height: 18px;
    color: #4a4a4a;
}
.filter-color-option .ssv2-color-tick {
    margin-left: auto;
    flex-shrink: 0;
    color: #1f7ad6;
    opacity: 0;
    transition: opacity 0.12s;
}
.filter-color-option.active .ssv2-color-tick { opacity: 1; }
.filter-color-option.active .ssv2-color-label { color: #1f7ad6; font-weight: 600; }

/* The unified-category panel (search-by-category.js) renders the same
   colour rows inside .hierarchy-navigation-menu, whose generic
   `.hierarchy-navigation-menu a { display: block }` rule in application.css
   outranks .filter-color-option. The row then falls back to inline flow:
   once the sidebar gets narrow the label wraps under the swatch and the
   tick lands on its own line, and grid rows with wrapped cells stretch,
   so the gaps between colours look uneven. Re-assert the flex row with a
   more specific selector and let a long label wrap beside the swatch
   while the tick stays on the first line. */
.hierarchy-navigation-menu .filter-color-option {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    font-size: 13px;
}
.hierarchy-navigation-menu .filter-color-option .ssv2-color-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Product card badges: keep each badge on a single line, wrap whole
   badges (not their text) when the row runs out of space. */
.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 10px;
    font-size: 10px;
}
.product-badge {
    padding: 2px 5px;
    line-height: 1;
    font-weight: 600;
    border: 1px solid #aaa;
    white-space: nowrap;
    flex: 0 0 auto;
}
.product-badge-store        { color: #777; }
.product-badge-shop         { color: #333; background-color: #e1e1e1; }
.product-badge-condition-used {
    color: #fff;
    border-color: #E78B29;
    background-color: #FFAB51;
}
/* Cashback promo chip: matches the orange/amber accent the legacy
   yahoo.aspx list rows used so the visual cue carries over for users
   who already associate that colour with the promotion. List view
   keeps it inline with the rest of the badges (rule further below);
   grid view docks it into the top-right corner the same way the
   Lower fee / No fee ribbon does — and stacks under that ribbon if
   both are active on the same card. */
.product-badge-cashback {
    color: #fff;
    border-color: #f39800;
    background-color: #ffa726;
}
.products:not(.list-view) .product-badge-cashback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    margin: 6px 6px 0 0;
    padding: 2px 5px;
    line-height: 1;
    font-size: 10px;
    border: 0;
    border-radius: 2px;
}
/* When a fee ribbon is rendered first in DOM (and it is — the
   template puts noFee / lowerFee before the cashback chip), the
   sibling combinator pushes the cashback chip down so the two
   don't overlap in the corner stack. */
.products:not(.list-view) .product-fee-ribbon ~ .product-badge-cashback {
    margin-top: 26px;
}
.product-badge-condition-new {
    color: #fff;
    border-color: #1875D8;
    background-color: #2891FF;
}

/* Equal-height grid rows: when one card grows because its badges
   wrapped onto a second line, sibling cards in the same row stretch
   to match instead of leaving staircase gaps. Bootstrap's float-based
   col-xs-* still defines width; flex parent takes over height. */
.products {
    display: flex;
    flex-wrap: wrap;
}
/* Card content fills the stretched cell so the hover background and
   box-shadow extend to the full height instead of cutting off below
   the natural content size. */
.products > .product { display: flex; flex-direction: column; }
.products > .product > .product-item { flex: 1 1 auto; }

/* Desktop sort dropdown.
   The old row of <a class="top-menu-button"> chips wrapped onto two
   lines once a store with a richer sort set (Yahoo Auction = 10
   options) was the only one selected, burying the control. Collapse
   to a borderless toggle that opens a soft-shadow menu — modern look,
   active option shown inline on the toggle. */
.sortby-menu .sortby-dropdown { display: inline-block; }
.sortby-menu .sortby-toggle {
    background: transparent;
    border: 0;
    padding: 6px 4px;
    color: #333;
    font-size: 14px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.sortby-menu .sortby-toggle:hover,
.sortby-menu .sortby-toggle:focus,
.sortby-menu .sortby-dropdown.open .sortby-toggle {
    color: #2891ff;
    outline: none;
}
.sortby-menu .sortby-toggle-label { font-weight: 600; }
.sortby-menu .sortby-toggle-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.sortby-menu .sortby-dropdown.open .sortby-toggle-icon { transform: rotate(180deg); }

.sortby-menu .sortby-dropdown-menu {
    margin-top: 6px;
    min-width: 220px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    padding: 6px 0;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06);
}
.sortby-menu .sortby-dropdown-menu > li > a {
    padding: 10px 18px;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
    border: 0;
    border-bottom: 0 !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.sortby-menu .sortby-dropdown-menu > li > a:hover,
.sortby-menu .sortby-dropdown-menu > li > a:focus {
    background-color: #eef5fc;
    color: #333;
    text-decoration: none;
}
.sortby-menu .sortby-dropdown-menu > li.active > a,
.sortby-menu .sortby-dropdown-menu > li.active > a:hover,
.sortby-menu .sortby-dropdown-menu > li.active > a:focus {
    background-color: #2891ff;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
/* The legacy .active-menu pill style (border-bottom underline used by
   the old chip row) leaks through whenever the cross-site search JS
   still tags the active option. Neutralise it for the dropdown. */
.sortby-menu .sortby-dropdown-menu .active-menu {
    border-bottom: 0 !important;
    color: inherit;
}

/* Browse-mode category tree reuses .cat-menu / .submenu styling shared
   with Custom-mode category selection — see selectors above. */

/* =====================================================================
   Browse-mode landing surface (search.aspx?browse=<id> at rest).
   Replaces the empty product grid with a featured-categories homepage.
   Mercari-only for now — see controls/MercariBrowseLanding.ascx.
   ===================================================================== */
.ssv2-landing { padding: 0; color: #1a2533; }
.ssv2-landing *,
.ssv2-landing *::before,
.ssv2-landing *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */
.ssv2-landing-hero {
    position: relative;
    border-radius: 20px;
    padding: 44px 36px;
    margin: 0 0 40px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 207, 226, 0.55), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(186, 222, 251, 0.55), transparent 45%),
        linear-gradient(135deg, #f7faff 0%, #eef3fb 60%, #fbeef4 100%);
}
.ssv2-landing-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 75% 80%, rgba(214, 51, 132, 0.10) 0, transparent 50%),
        radial-gradient(circle at 25% 30%, rgba(29, 114, 201, 0.10) 0, transparent 50%);
}
.ssv2-landing-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .ssv2-landing-hero-inner { grid-template-columns: 1.05fr 1fr; align-items: center; }
}
.ssv2-landing-hero-logo {
    display: block;
    width: auto;
    max-height: 40px;
    margin: 0 0 18px;
}
.ssv2-landing-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #1a2533;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(20, 30, 50, 0.08);
}
.ssv2-landing-hero-badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.ssv2-landing-hero-title h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 16px;
    color: #1a2533;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
@media (min-width: 992px) {
    .ssv2-landing-hero-title h1 { font-size: 3.4rem; }
}
.ssv2-landing-hero-title p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5764;
    max-width: 540px;
    margin: 0;
}
.ssv2-landing-hero-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ssv2-landing-feature-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.7);
}
.ssv2-landing-feature-img {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.ssv2-landing-feature-text h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1a2533;
}
.ssv2-landing-feature-text p {
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    color: #5a6878;
}

/* ---------- Section common ---------- */
.ssv2-landing-section { margin: 0 0 36px; }
.ssv2-landing-section-header {
    /* Title + "See all →" share one block; the accent bar on the left
       spans the whole block height so it visually groups them as a
       single header unit. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 16px;
    padding-left: 14px;
}
.ssv2-landing-section-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #d63384, #1d72c9);
}
.ssv2-landing-section-title {
    /* Reset the site-wide h2 { padding: 0 0 30px } — without this the
       header has 30px between the title and the See-all link below. */
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a2533;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.ssv2-landing-see-all {
    font-size: 13px;
    color: #1d72c9;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}
.ssv2-landing-see-all:hover { color: #134d8d; text-decoration: none; }

/* ---------- Popular Categories (large feature tiles) ----------
   Each tile is a flex column: label pinned top, decorative product
   image filling the bottom 70% of the card. Image scales `contain`
   so the original artwork keeps its aspect ratio on any width. */
.ssv2-landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 768px) {
    .ssv2-landing-feature-grid { grid-template-columns: repeat(4, 1fr); }
}
.ssv2-landing-feature-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 20px;
    border-radius: 18px;
    color: #1a2533;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ssv2-landing-feature-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20, 30, 50, 0.15);
    text-decoration: none;
    color: #1a2533;
}
.ssv2-landing-tile-label {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.ssv2-landing-tile-img {
    margin-top: auto;
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    align-self: center;
    transition: transform 0.25s ease;
}
.ssv2-landing-feature-tile:hover .ssv2-landing-tile-img {
    transform: scale(1.06);
}
.ssv2-landing-feature-tile.--feat-pink   { background: linear-gradient(140deg, #D2F0FF 0%, #C0EAFF 100%); }
.ssv2-landing-feature-tile.--feat-blue   { background: linear-gradient(140deg, #D7F8FF 0%, #BCF1FE 100%); }
.ssv2-landing-feature-tile.--feat-amber  { background: linear-gradient(140deg, #EAFBFF 0%, #DFF9FF 100%); }
.ssv2-landing-feature-tile.--feat-red    { background: linear-gradient(140deg, #AADFFF 0%, #81CAF8 100%); }
.ssv2-landing-feature-tile.--feat-purple { background: linear-gradient(140deg, #DFF9FF 0%, #CFF6FF 100%); }
.ssv2-landing-feature-tile.--feat-mint   { background: linear-gradient(140deg, #C4E8FF 0%, #A6DDFF 100%); }
/* Mercari Shops promo tile — solid red CTA pointing at the blog
   post explaining what Mercari Shops are. Unlike the other tiles
   it's a brand callout, not a category jump, so it gets bolder
   contrast and a faded Mercari mark behind the label. */
.ssv2-landing-feature-tile.--feat-mercari {
    background: #e60b19;
    color: #fff;
}
.ssv2-landing-feature-tile.--feat-mercari:hover { color: #fff; }
.ssv2-landing-feature-tile.--feat-mercari .ssv2-landing-tile-label { color: #fff; }
.ssv2-landing-feature-tile.--feat-mercari .ssv2-landing-tile-img {
    opacity: 0.35;
    transform: scale(1.4);
    transform-origin: 70% 70%;
}
.ssv2-landing-feature-tile.--feat-mercari:hover .ssv2-landing-tile-img {
    transform: scale(1.45);
}

/* Five-tile variant used by the individual-seller landing's Popular
   Categories row (Toy/Game, Women, Men, Brand bags, Electronics). */
@media (min-width: 768px) {
    .ssv2-landing-feature-grid.--five {
        grid-template-columns: repeat(3, 1fr); /*changed from 5 to 3 for medium screens*/
    }
}

/*added a new @media query*/
@media (min-width: 992px) {
    .ssv2-landing-feature-grid.--five {
        grid-template-columns: repeat(6, 1fr); /*changed from 5 to 6 for large screens*/
    }
}

/* Single-column hero used by the individual-seller landing — no
   Trusted/Brand-new/Restock cards, just logo + headline + subtitle. */
.ssv2-landing-hero.--simple .ssv2-landing-hero-inner {
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .ssv2-landing-hero.--simple .ssv2-landing-hero-inner {
        grid-template-columns: 1fr;
    }
}
.ssv2-landing-hero.--simple .ssv2-landing-hero-title p { max-width: 720px; }

/* Amazon brand accent: section title bar + see-all links pick up the
   Amazon yellow/orange instead of the default pink-to-blue gradient,
   and the hero gets a warmer tint matching the brand palette. */
.ssv2-landing.--amazon .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #ff9500, #ffb545);
}
.ssv2-landing.--amazon .ssv2-landing-see-all { color: #d97706; }
.ssv2-landing.--amazon .ssv2-landing-see-all:hover { color: #a35408; }
.ssv2-landing-hero.--amazon-hero {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 181, 69, 0.45), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(255, 220, 150, 0.55), transparent 45%),
        linear-gradient(135deg, #fffaf0 0%, #fff1d8 60%, #fde6c2 100%);
}

/* Rakuten brand accent: deep red on the section title bar + see-all
   links, warm red wash on the hero. */
.ssv2-landing.--rakuten .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #bf0000, #ff6b6b);
}
.ssv2-landing.--rakuten .ssv2-landing-see-all { color: #bf0000; }
.ssv2-landing.--rakuten .ssv2-landing-see-all:hover { color: #800000; }

/* Yahoo Auction (JDirectItems Auction) brand accent: dark olive-gold
   #6d5b00 on section bar + see-all, golden hero wash. */
.ssv2-landing.--yahoo .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #6d5b00, #d4af37);
}
.ssv2-landing.--yahoo .ssv2-landing-see-all { color: #6d5b00; }
.ssv2-landing.--yahoo .ssv2-landing-see-all:hover { color: #443900; }
.ssv2-landing-hero.--yahoo-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.20), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.12), transparent 45%),
        linear-gradient(135deg, #fff7d6 0%, #f1d76b 55%, #d4af37 100%);
}
/* Gold tag chip variant for the Yahoo Tutorial promo banner. */
.ssv2-landing-promo-card .--tag-gold { background: rgba(109, 91, 0, 0.92); color: #fff; }
.ssv2-landing-promo-card .--cta-gold { color: #6d5b00; }

/* Rakuma brand accent: coral-crimson (distinct from Rakuten's pure red)
   on the section bar + see-all, with a matching hero wash. */
.ssv2-landing.--rakuma .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #d6005c, #ff5e8a);
}
.ssv2-landing.--rakuma .ssv2-landing-see-all { color: #d6005c; }
.ssv2-landing.--rakuma .ssv2-landing-see-all:hover { color: #99003f; }
.ssv2-landing-hero.--rakuma-hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 150, 185, 0.45), transparent 42%),
        radial-gradient(circle at 12% 88%, rgba(255, 200, 220, 0.5), transparent 45%),
        linear-gradient(135deg, #fff5f8 0%, #ffe3ec 60%, #ffc9da 100%);
}
/* Green tag chip variant for the Rakuma Free Appraisal promo banner. */
.ssv2-landing-promo-card .--tag-green { background: rgba(50, 120, 55, 0.92); color: #fff; }
.ssv2-landing-promo-card .--cta-green { color: #327837; }

/* ZenPlus brand accent: purple. Matches the live ZenPlus header
   (https://zenplus.jp). Section bar uses a deeper-to-lighter purple
   gradient; the hero takes a saturated purple wash with white copy. */
.ssv2-landing.--zenplus .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #5b3a85, #9b7cc4);
}
.ssv2-landing.--zenplus .ssv2-landing-see-all { color: #7a55a1; }
.ssv2-landing.--zenplus .ssv2-landing-see-all:hover { color: #4d2f6b; }
.ssv2-landing-hero.--zenplus-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.18), transparent 45%),
        linear-gradient(135deg, #563880 0%, #7a55a1 50%, #a079c2 100%);
}
.ssv2-landing-hero.--zenplus-hero .ssv2-landing-hero-title h1 { color: #fff; }
.ssv2-landing-hero.--zenplus-hero .ssv2-landing-hero-title p {
    color: rgba(255, 255, 255, 0.9);
}
/* Purple tag chip variant for the ZenPlus pre-loved luxury bags promo. */
.ssv2-landing-promo-card .--tag-teal { background: rgba(122, 85, 161, 0.92); color: #fff; }
.ssv2-landing-promo-card .--cta-teal { color: #7a55a1; }

/* Yahoo Shopping (JDirectItems Shopping) brand accent: hot red. The
   live yshopping uses #f61240 as the primary brand colour, so the
   section bar runs deeper to brighter red and the hero takes a
   saturated red gradient with white copy. */
.ssv2-landing.--yshopping .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #b00d2f, #f61240);
}
.ssv2-landing.--yshopping .ssv2-landing-see-all { color: #d10e36; }
.ssv2-landing.--yshopping .ssv2-landing-see-all:hover { color: #82091f; }
.ssv2-landing-hero.--yshopping-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.18), transparent 45%),
        linear-gradient(135deg, #b00d2f 0%, #d10e36 50%, #f61240 100%);
}
.ssv2-landing-hero.--yshopping-hero .ssv2-landing-hero-title h1 { color: #fff; }
.ssv2-landing-hero.--yshopping-hero .ssv2-landing-hero-title p {
    color: rgba(255, 255, 255, 0.9);
}
.ssv2-landing-hero.--yshopping-hero .ssv2-landing-hero-logo {
    /* Logo ships in red — invert so it reads on the red background. */
    filter: brightness(0) invert(1);
}
/* Red tag chip variant for the JDirectItems Shopping tutorial promo. */
.ssv2-landing-promo-card .--tag-yshopping { background: rgba(246, 18, 64, 0.92); color: #fff; }
.ssv2-landing-promo-card .--cta-yshopping { color: #d10e36; }

/* =====================================================================
   Compact landing layout — used by smaller stores (SnkrDunk, …)
   that only need a single hero + a 4-tile category row + FAQ block,
   not the full 10+ category-section stack of the big-store landings.
   ===================================================================== */
.ssv2-landing-hero.--compact-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.30), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(70, 130, 200, 0.10), transparent 45%),
        linear-gradient(135deg, #e6f3ff 0%, #cfe5fa 60%, #b9d6f0 100%);
}
.ssv2-landing-hero-inner-compact {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 992px) {
    .ssv2-landing-hero-inner-compact { grid-template-columns: 1.4fr 1fr; }
}
.ssv2-landing-hero.--compact-hero .ssv2-landing-hero-title h1 {
    font-size: 2rem;
    color: #1d4f9c;
    line-height: 1.2;
}
@media (min-width: 992px) {
    .ssv2-landing-hero.--compact-hero .ssv2-landing-hero-title h1 { font-size: 2.4rem; }
}
.ssv2-landing-hero.--compact-hero .ssv2-landing-hero-title p {
    color: #4a5764;
    margin: 0 0 12px;
}

/* Hashtag chip row sits between headline and description. Compact
   info-density: same hairline border style as the rest of the landing. */
.ssv2-landing-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 18px;
}
.ssv2-landing-hashtag {
    font-size: 13px;
    font-weight: 600;
    color: #1d4f9c;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
}

/* Coupon / promo callout — soft white card under the description. */
.ssv2-landing-coupon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1a2533;
    box-shadow: 0 2px 8px rgba(20, 30, 50, 0.06);
}
.ssv2-landing-coupon-icon { flex: none; font-size: 20px; line-height: 1; }
.ssv2-landing-coupon b { color: #1d4f9c; }

/* Right-side hero illustration. Floats to fill the column without
   forcing a fixed height — the card height follows the text. */
.ssv2-landing-hero-side {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssv2-landing-hero-side img {
    max-width: 100%;
    max-height: 320px;
    height: auto;
    object-fit: contain;
}

/* Category + FAQ row.
   - mobile  : 2-col grid of category tiles, FAQ stacked underneath
   - desktop : 5 equal columns (4 tiles + 1 FAQ block) */
.ssv2-landing-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 768px) {
    .ssv2-landing-compact-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
    .ssv2-landing-compact-grid {
        grid-template-columns: repeat(5, 1fr);
        align-items: start;
    }
}
.ssv2-landing-compact-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    padding: 16px 16px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5ecf3;
    color: #1a2533;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ssv2-landing-compact-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 30, 50, 0.10);
    border-color: transparent;
    text-decoration: none;
    color: #1a2533;
}
.ssv2-landing-compact-tile-text {
    position: relative;
    padding-bottom: 20px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ssv2-landing-compact-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: #6f7c8a;
}
.ssv2-landing-compact-tile-label {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ssv2-landing-compact-tile-img {
    margin-top: auto;
    margin-bottom: auto;
    align-self: center;
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
    transition: transform 0.25s ease;
}
.ssv2-landing-compact-tile:hover .ssv2-landing-compact-tile-img {
    transform: scale(1.06);
}

/* FAQ block sits as the 5th column on desktop, full-width below the
   tile grid on mobile (it spans every column of the 2-col layout).
   Each item is a clickable row: icon chip + label + right chevron. */
.ssv2-landing-faq {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5ecf3;
}
@media (min-width: 992px) {
    .ssv2-landing-faq { grid-column: auto; }
}
.ssv2-landing-faq-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: 12px;
    color: #1a2533;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.ssv2-landing-faq-item:hover {
    background: rgba(212, 233, 250, 0.5);
    color: #1c5798;
    text-decoration: none;
}
.ssv2-landing-faq-icon-wrap {
    /* color drives the inline SVG stroke (stroke="currentColor"), so
       per-landing accents flow through without per-icon overrides. */
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ecf3fb, #d4e6f7);
    color: #1c5798;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d3e3f3, #a5c6ea);
    color: #0e3666;
    transform: scale(1.05);
}
.ssv2-landing-faq-icon {
    display: block;
    width: 22px;
    height: 22px;
}
.ssv2-landing-faq-item-text { flex: 1 1 auto; min-width: 0; }
.ssv2-landing-faq-item-arrow {
    flex: none;
    margin-left: 4px;
    color: rgba(28, 87, 152, 0.4);
    font-size: 20px;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}
.ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #1c5798;
    transform: translateX(3px);
}

/* SnkrDunk accent — soft blue (mirrors the brand's marketing site). */
.ssv2-landing.--snkrdunk .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #1d4f9c, #5fa0e6);
}
.ssv2-landing.--snkrdunk .ssv2-landing-see-all { color: #1d4f9c; }
.ssv2-landing.--snkrdunk .ssv2-landing-see-all:hover { color: #12305f; }

/* RAGTAG accent — deeper editorial blue (#1c5798). The landing's hero
   gradient stays on the shared --compact-hero so the two compact
   landings feel related; the accent strip / hashtags / coupon-style
   text picks up the brand colour. */
.ssv2-landing.--ragtag .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #1c5798, #6ca8e2);
}
.ssv2-landing.--ragtag .ssv2-landing-see-all { color: #1c5798; }
.ssv2-landing.--ragtag .ssv2-landing-see-all:hover { color: #0e3666; }
.ssv2-landing.--ragtag .ssv2-landing-hero-title h1 { color: #1c5798; }
.ssv2-landing.--ragtag .ssv2-landing-hashtag { color: #1c5798; }

/* BRAND OFF accent — luxury gold-on-cream. Brand identity skews to a
   refined champagne-gold so the hero gets a warm cream-to-gold wash
   distinct from the cool-blue compact landings (SnkrDunk / Ragtag). */
.ssv2-landing.--brandoff .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #8c6d2b, #d4b264);
}
.ssv2-landing.--brandoff .ssv2-landing-see-all { color: #8c6d2b; }
.ssv2-landing.--brandoff .ssv2-landing-see-all:hover { color: #5a4519; }
.ssv2-landing.--brandoff .ssv2-landing-hero-title h1 { color: #5a4519; }
.ssv2-landing.--brandoff .ssv2-landing-hashtag { color: #8c6d2b; }
.ssv2-landing.--brandoff .ssv2-landing-hero.--compact-hero,
.ssv2-landing-hero.--compact-hero.--brandoff-hero { /* unused, see scoped rule below */ }
.ssv2-landing.--brandoff .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(160, 125, 50, 0.10), transparent 45%),
        linear-gradient(135deg, #fbf6e8 0%, #f1e3b9 60%, #e6cf8a 100%);
}
.ssv2-landing.--brandoff .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f8f0d5, #ecdcaa);
    color: #8c6d2b;
}
.ssv2-landing.--brandoff .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #efe1ad, #d4b264);
    color: #5a4519;
}
.ssv2-landing.--brandoff .ssv2-landing-faq-item:hover {
    background: rgba(241, 224, 175, 0.45);
    color: #5a4519;
}
.ssv2-landing.--brandoff .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #8c6d2b;
}

/* Digimart accent — warm amber/orange. Digimart specialises in musical
   instruments (guitars / effects) and the brand mark leans red-orange,
   so the hero gets a warm cream-to-amber wash distinct from the
   cool-blue (SnkrDunk / Ragtag) and gold (BrandOff) compact landings. */
.ssv2-landing.--digimart .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #c0500f, #f0a050);
}
.ssv2-landing.--digimart .ssv2-landing-see-all { color: #c0500f; }
.ssv2-landing.--digimart .ssv2-landing-see-all:hover { color: #7a3208; }
.ssv2-landing.--digimart .ssv2-landing-hero-title h1 { color: #7a3208; }
.ssv2-landing.--digimart .ssv2-landing-hashtag { color: #c0500f; }
.ssv2-landing.--digimart .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(192, 80, 15, 0.10), transparent 45%),
        linear-gradient(135deg, #fdf3e8 0%, #fad9b1 60%, #f4be82 100%);
}
.ssv2-landing.--digimart .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #fbe6cc, #f4c89a);
    color: #c0500f;
}
.ssv2-landing.--digimart .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f4c89a, #e89e5c);
    color: #7a3208;
}
.ssv2-landing.--digimart .ssv2-landing-faq-item:hover {
    background: rgba(250, 217, 177, 0.45);
    color: #7a3208;
}
.ssv2-landing.--digimart .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #c0500f;
}

/* Minne accent — soft handmade-craft pink. Minne's brand mark is a
   warm coral pink, fitting for a handmade-goods marketplace; the hero
   gets a pastel pink wash distinct from the cool blues (SnkrDunk /
   Ragtag), gold (BrandOff) and amber (Digimart). */
.ssv2-landing.--minne .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #c8347a, #f08bb4);
}
.ssv2-landing.--minne .ssv2-landing-see-all { color: #c8347a; }
.ssv2-landing.--minne .ssv2-landing-see-all:hover { color: #802052; }
.ssv2-landing.--minne .ssv2-landing-hero-title h1 { color: #802052; }
.ssv2-landing.--minne .ssv2-landing-hashtag { color: #c8347a; }
.ssv2-landing.--minne .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(200, 52, 122, 0.10), transparent 45%),
        linear-gradient(135deg, #fdeef4 0%, #fbd2e0 60%, #f7b3cc 100%);
}
.ssv2-landing.--minne .ssv2-landing-coupon b { color: #c8347a; }
.ssv2-landing.--minne .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #fbdde8, #f6bcd0);
    color: #c8347a;
}
.ssv2-landing.--minne .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f6bcd0, #ec90b3);
    color: #802052;
}
.ssv2-landing.--minne .ssv2-landing-faq-item:hover {
    background: rgba(251, 210, 224, 0.45);
    color: #802052;
}
.ssv2-landing.--minne .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #c8347a;
}

/* Colleize accent — vibrant anime/gaming indigo-violet. Picks up the
   pop-culture energy of the brand without colliding with ZenPlus's
   muted purple or Minne's softer pink. */
.ssv2-landing.--colleize .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #5a2eb8, #a07ce0);
}
.ssv2-landing.--colleize .ssv2-landing-see-all { color: #5a2eb8; }
.ssv2-landing.--colleize .ssv2-landing-see-all:hover { color: #361a72; }
.ssv2-landing.--colleize .ssv2-landing-hero-title h1 { color: #361a72; }
.ssv2-landing.--colleize .ssv2-landing-hashtag { color: #5a2eb8; }
.ssv2-landing.--colleize .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(90, 46, 184, 0.12), transparent 45%),
        linear-gradient(135deg, #f1ecfb 0%, #d7c5f3 60%, #b89be8 100%);
}
.ssv2-landing.--colleize .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ebe1fa, #d2bdf1);
    color: #5a2eb8;
}
.ssv2-landing.--colleize .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d2bdf1, #b094e3);
    color: #361a72;
}
.ssv2-landing.--colleize .ssv2-landing-faq-item:hover {
    background: rgba(215, 197, 243, 0.45);
    color: #361a72;
}
.ssv2-landing.--colleize .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #5a2eb8;
}

/* BOOKOFF accent — sunny yellow with deep ink-brown text. Matches the
   instantly-recognisable BOOKOFF shop signage (yellow background, bold
   red mark) without clashing with the other warm landings (BrandOff
   gold, Digimart amber). */
.ssv2-landing.--bookoff .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #e0a800, #f4d65a);
}
.ssv2-landing.--bookoff .ssv2-landing-see-all { color: #a36b00; }
.ssv2-landing.--bookoff .ssv2-landing-see-all:hover { color: #5a3a00; }
.ssv2-landing.--bookoff .ssv2-landing-hero-title h1 { color: #5a3a00; }
.ssv2-landing.--bookoff .ssv2-landing-hashtag { color: #a36b00; }
.ssv2-landing.--bookoff .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(224, 168, 0, 0.12), transparent 45%),
        linear-gradient(135deg, #fff8db 0%, #ffe98a 60%, #ffd83a 100%);
}
.ssv2-landing.--bookoff .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #fff1b8, #ffe07a);
    color: #a36b00;
}
.ssv2-landing.--bookoff .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ffe07a, #f4c430);
    color: #5a3a00;
}
.ssv2-landing.--bookoff .ssv2-landing-faq-item:hover {
    background: rgba(255, 233, 138, 0.45);
    color: #5a3a00;
}
.ssv2-landing.--bookoff .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #a36b00;
}

/* Kakaku accent — fresh teal/turquoise. Picks up the brand's
   price-comparison teal palette and stays clearly distinct from the
   cool-blue (SnkrDunk / Ragtag) and warm landings. */
.ssv2-landing.--kakaku .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #0e8c8c, #4fc3c0);
}
.ssv2-landing.--kakaku .ssv2-landing-see-all { color: #0e8c8c; }
.ssv2-landing.--kakaku .ssv2-landing-see-all:hover { color: #075454; }
.ssv2-landing.--kakaku .ssv2-landing-hero-title h1 { color: #075454; }
.ssv2-landing.--kakaku .ssv2-landing-hashtag { color: #0e8c8c; }
.ssv2-landing.--kakaku .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(14, 140, 140, 0.12), transparent 45%),
        linear-gradient(135deg, #e6f7f5 0%, #b8e7e3 60%, #8ed4cf 100%);
}
.ssv2-landing.--kakaku .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d4efed, #a8dedb);
    color: #0e8c8c;
}
.ssv2-landing.--kakaku .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #a8dedb, #6cc4be);
    color: #075454;
}
.ssv2-landing.--kakaku .ssv2-landing-faq-item:hover {
    background: rgba(184, 231, 227, 0.45);
    color: #075454;
}
.ssv2-landing.--kakaku .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #0e8c8c;
}

/* NATURUM accent — forest green. Fits the outdoor / fishing / camping
   identity (trees, gear, nature) and is clearly distinct from Kakaku's
   teal and all other compact landing accents. */
.ssv2-landing.--naturum .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #2f7a3e, #6cb47a);
}
.ssv2-landing.--naturum .ssv2-landing-see-all { color: #2f7a3e; }
.ssv2-landing.--naturum .ssv2-landing-see-all:hover { color: #184a23; }
.ssv2-landing.--naturum .ssv2-landing-hero-title h1 { color: #184a23; }
.ssv2-landing.--naturum .ssv2-landing-hashtag { color: #2f7a3e; }
.ssv2-landing.--naturum .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(47, 122, 62, 0.12), transparent 45%),
        linear-gradient(135deg, #ecf6ee 0%, #c7e3cd 60%, #9fcfaa 100%);
}
.ssv2-landing.--naturum .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #dceee0, #b7dcbf);
    color: #2f7a3e;
}
.ssv2-landing.--naturum .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #b7dcbf, #84c391);
    color: #184a23;
}
.ssv2-landing.--naturum .ssv2-landing-faq-item:hover {
    background: rgba(199, 227, 205, 0.45);
    color: #184a23;
}
.ssv2-landing.--naturum .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #2f7a3e;
}

/* Caster House accent — deep marine navy. Evokes ocean fishing and
   stays clearly distinct from Naturum's forest green (the other
   fishing store) and the lighter blues used by SnkrDunk / Ragtag. */
.ssv2-landing.--casterhouse .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #133b66, #4a7aa8);
}
.ssv2-landing.--casterhouse .ssv2-landing-see-all { color: #133b66; }
.ssv2-landing.--casterhouse .ssv2-landing-see-all:hover { color: #08213c; }
.ssv2-landing.--casterhouse .ssv2-landing-hero-title h1 { color: #08213c; }
.ssv2-landing.--casterhouse .ssv2-landing-hashtag { color: #133b66; }
.ssv2-landing.--casterhouse .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(19, 59, 102, 0.14), transparent 45%),
        linear-gradient(135deg, #e3edf7 0%, #b2cae3 60%, #82a8cc 100%);
}
.ssv2-landing.--casterhouse .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d6e3f1, #a8c2dd);
    color: #133b66;
}
.ssv2-landing.--casterhouse .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #a8c2dd, #6e93bd);
    color: #08213c;
}
.ssv2-landing.--casterhouse .ssv2-landing-faq-item:hover {
    background: rgba(178, 202, 227, 0.45);
    color: #08213c;
}
.ssv2-landing.--casterhouse .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #133b66;
}

/* Mycalinks accent — bold crimson / wine red. Fits the trading-card
   collectible energy (Pokemon, Yu-Gi-Oh, One Piece) and stays clearly
   distinct from Rakuten's brighter saturated red. */
.ssv2-landing.--mycalinks .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #a01a2a, #e26577);
}
.ssv2-landing.--mycalinks .ssv2-landing-see-all { color: #a01a2a; }
.ssv2-landing.--mycalinks .ssv2-landing-see-all:hover { color: #5e0d18; }
.ssv2-landing.--mycalinks .ssv2-landing-hero-title h1 { color: #5e0d18; }
.ssv2-landing.--mycalinks .ssv2-landing-hashtag { color: #a01a2a; }
.ssv2-landing.--mycalinks .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(160, 26, 42, 0.12), transparent 45%),
        linear-gradient(135deg, #fbeaec 0%, #f3c0c7 60%, #eb96a2 100%);
}
.ssv2-landing.--mycalinks .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f5d8dc, #ecb1b9);
    color: #a01a2a;
}
.ssv2-landing.--mycalinks .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ecb1b9, #d97f8c);
    color: #5e0d18;
}
.ssv2-landing.--mycalinks .ssv2-landing-faq-item:hover {
    background: rgba(243, 192, 199, 0.45);
    color: #5e0d18;
}
.ssv2-landing.--mycalinks .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #a01a2a;
}

/* Booth accent — vibrant coral / red-orange. Picks up the indie pop-
   culture energy of Booth.pm without colliding with Mycalinks's deep
   wine red or the gold / amber / yellow warm landings. */
.ssv2-landing.--booth .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #e54a4a, #ff8c7a);
}
.ssv2-landing.--booth .ssv2-landing-see-all { color: #e54a4a; }
.ssv2-landing.--booth .ssv2-landing-see-all:hover { color: #8a1f1f; }
.ssv2-landing.--booth .ssv2-landing-hero-title h1 { color: #8a1f1f; }
.ssv2-landing.--booth .ssv2-landing-hashtag { color: #e54a4a; }
.ssv2-landing.--booth .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(229, 74, 74, 0.12), transparent 45%),
        linear-gradient(135deg, #fdeae8 0%, #fbc4be 60%, #f99c91 100%);
}
.ssv2-landing.--booth .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #fbd9d4, #f7b3ab);
    color: #e54a4a;
}
.ssv2-landing.--booth .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f7b3ab, #ec7b6d);
    color: #8a1f1f;
}
.ssv2-landing.--booth .ssv2-landing-faq-item:hover {
    background: rgba(251, 196, 190, 0.45);
    color: #8a1f1f;
}
.ssv2-landing.--booth .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #e54a4a;
}

/* Surugaya accent — vibrant magenta / fuchsia. Captures the anime &
   collectibles energy of Suruga-ya without overlapping Minne's soft
   pink, Mycalinks's wine red or Booth's coral. */
.ssv2-landing.--surugaya .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #c4148f, #e676b8);
}
.ssv2-landing.--surugaya .ssv2-landing-see-all { color: #c4148f; }
.ssv2-landing.--surugaya .ssv2-landing-see-all:hover { color: #720952; }
.ssv2-landing.--surugaya .ssv2-landing-hero-title h1 { color: #720952; }
.ssv2-landing.--surugaya .ssv2-landing-hashtag { color: #c4148f; }
.ssv2-landing.--surugaya .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(196, 20, 143, 0.12), transparent 45%),
        linear-gradient(135deg, #fbeaf4 0%, #f4c2e0 60%, #ec97c8 100%);
}
.ssv2-landing.--surugaya .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f5d8ea, #edb2d6);
    color: #c4148f;
}
.ssv2-landing.--surugaya .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #edb2d6, #df7ebd);
    color: #720952;
}
.ssv2-landing.--surugaya .ssv2-landing-faq-item:hover {
    background: rgba(244, 194, 224, 0.45);
    color: #720952;
}
.ssv2-landing.--surugaya .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #c4148f;
}

/* LASHINBANG accent — saturated bright orange. Lashinbang's brand mark
   leans bright orange/yellow; this picks up that energy and stays
   distinct from Digimart's softer amber and Booth's coral. */
.ssv2-landing.--lashinbang .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #f06a00, #ffae5e);
}
.ssv2-landing.--lashinbang .ssv2-landing-see-all { color: #c45300; }
.ssv2-landing.--lashinbang .ssv2-landing-see-all:hover { color: #7a3300; }
.ssv2-landing.--lashinbang .ssv2-landing-hero-title h1 { color: #7a3300; }
.ssv2-landing.--lashinbang .ssv2-landing-hashtag { color: #c45300; }
.ssv2-landing.--lashinbang .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.35), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(240, 106, 0, 0.12), transparent 45%),
        linear-gradient(135deg, #fff1e3 0%, #ffd2a3 60%, #ffb472 100%);
}
.ssv2-landing.--lashinbang .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ffe2c4, #ffc78f);
    color: #c45300;
}
.ssv2-landing.--lashinbang .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ffc78f, #f59a55);
    color: #7a3300;
}
.ssv2-landing.--lashinbang .ssv2-landing-faq-item:hover {
    background: rgba(255, 210, 163, 0.45);
    color: #7a3300;
}
.ssv2-landing.--lashinbang .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #c45300;
}

/* Yumetenbo (Dreamvs) accent — soft pastel lavender / lilac. Suits
   the kawaii ladies' fashion identity (DearMyLove, Jirai-kei, gyaru)
   without overlapping Minne's warm pink, Surugaya's hot magenta or
   Colleize's deeper indigo violet. */
.ssv2-landing.--dreamvs .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #9b6dc8, #c9a8e3);
}
.ssv2-landing.--dreamvs .ssv2-landing-see-all { color: #7f4eb3; }
.ssv2-landing.--dreamvs .ssv2-landing-see-all:hover { color: #4d2a78; }
.ssv2-landing.--dreamvs .ssv2-landing-hero-title h1 { color: #4d2a78; }
.ssv2-landing.--dreamvs .ssv2-landing-hashtag { color: #7f4eb3; }
.ssv2-landing.--dreamvs .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(155, 109, 200, 0.10), transparent 45%),
        linear-gradient(135deg, #f6effb 0%, #e0cdf1 60%, #cdb1e6 100%);
}
.ssv2-landing.--dreamvs .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ecdef7, #d8c1ec);
    color: #7f4eb3;
}
.ssv2-landing.--dreamvs .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d8c1ec, #b994d8);
    color: #4d2a78;
}
.ssv2-landing.--dreamvs .ssv2-landing-faq-item:hover {
    background: rgba(224, 205, 241, 0.45);
    color: #4d2a78;
}
.ssv2-landing.--dreamvs .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #7f4eb3;
}

/* SPINNS accent — vibrant lime / chartreuse green. Captures the bold,
   playful Tokyo streetwear energy and stays clearly distinct from
   Naturum's deeper forest green and the cooler accents. */
.ssv2-landing.--spinns .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #8bc20a, #c8eb55);
}
.ssv2-landing.--spinns .ssv2-landing-see-all { color: #6b9608; }
.ssv2-landing.--spinns .ssv2-landing-see-all:hover { color: #3d5604; }
.ssv2-landing.--spinns .ssv2-landing-hero-title h1 { color: #3d5604; }
.ssv2-landing.--spinns .ssv2-landing-hashtag { color: #6b9608; }
.ssv2-landing.--spinns .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(139, 194, 10, 0.12), transparent 45%),
        linear-gradient(135deg, #f4faea 0%, #d9efa3 60%, #c1e572 100%);
}
.ssv2-landing.--spinns .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #eaf6c8, #d3eb95);
    color: #6b9608;
}
.ssv2-landing.--spinns .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d3eb95, #aed35e);
    color: #3d5604;
}
.ssv2-landing.--spinns .ssv2-landing-faq-item:hover {
    background: rgba(217, 239, 163, 0.45);
    color: #3d5604;
}
.ssv2-landing.--spinns .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #6b9608;
}

/* TOKYO FAB accent — sophisticated slate / charcoal with cool steel
   undertones. Befits the high-end Flesh and Blood collector identity
   and stays clearly distinct from CasterHouse's marine navy. */
.ssv2-landing.--tokyofab .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #334155, #7a8aa0);
}
.ssv2-landing.--tokyofab .ssv2-landing-see-all { color: #334155; }
.ssv2-landing.--tokyofab .ssv2-landing-see-all:hover { color: #1a2233; }
.ssv2-landing.--tokyofab .ssv2-landing-hero-title h1 { color: #1a2233; }
.ssv2-landing.--tokyofab .ssv2-landing-hashtag { color: #334155; }
.ssv2-landing.--tokyofab .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(51, 65, 85, 0.14), transparent 45%),
        linear-gradient(135deg, #ecf0f4 0%, #c7d1de 60%, #9faebf 100%);
}
.ssv2-landing.--tokyofab .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #dfe5ee, #bfc9d8);
    color: #334155;
}
.ssv2-landing.--tokyofab .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #bfc9d8, #8a99af);
    color: #1a2233;
}
.ssv2-landing.--tokyofab .ssv2-landing-faq-item:hover {
    background: rgba(199, 209, 222, 0.45);
    color: #1a2233;
}
.ssv2-landing.--tokyofab .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #334155;
}

/* WORM TOKYO accent — saturated electric cyan. Picks up an edgy
   underground sneaker-culture vibe and stays clearly distinct from
   SnkrDunk's softer pastel blue (the other sneakers landing) and
   Kakaku's deeper teal. */
.ssv2-landing.--wormtokyo .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #06a8c9, #4dd6ea);
}
.ssv2-landing.--wormtokyo .ssv2-landing-see-all { color: #06a8c9; }
.ssv2-landing.--wormtokyo .ssv2-landing-see-all:hover { color: #04606f; }
.ssv2-landing.--wormtokyo .ssv2-landing-hero-title h1 { color: #04606f; }
.ssv2-landing.--wormtokyo .ssv2-landing-hashtag { color: #06a8c9; }
.ssv2-landing.--wormtokyo .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(6, 168, 201, 0.12), transparent 45%),
        linear-gradient(135deg, #e6f8fc 0%, #b3e8f3 60%, #7fd4e8 100%);
}
.ssv2-landing.--wormtokyo .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d1eff6, #a3dfec);
    color: #06a8c9;
}
.ssv2-landing.--wormtokyo .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #a3dfec, #5fc5dc);
    color: #04606f;
}
.ssv2-landing.--wormtokyo .ssv2-landing-faq-item:hover {
    background: rgba(179, 232, 243, 0.45);
    color: #04606f;
}
.ssv2-landing.--wormtokyo .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #06a8c9;
}

/* NARUMIYA accent — soft pastel mint. Suits the gentle kids' &
   baby-fashion identity and stays clearly distinct from Naturum's
   deeper forest green and Spinns' brighter lime. */
.ssv2-landing.--narumiya .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #3aa888, #8ed4bd);
}
.ssv2-landing.--narumiya .ssv2-landing-see-all { color: #2e8a6f; }
.ssv2-landing.--narumiya .ssv2-landing-see-all:hover { color: #195443; }
.ssv2-landing.--narumiya .ssv2-landing-hero-title h1 { color: #195443; }
.ssv2-landing.--narumiya .ssv2-landing-hashtag { color: #2e8a6f; }
.ssv2-landing.--narumiya .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(58, 168, 136, 0.10), transparent 45%),
        linear-gradient(135deg, #eaf7f1 0%, #c6e8d8 60%, #a3d8bf 100%);
}
.ssv2-landing.--narumiya .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #def0e6, #b8dfcc);
    color: #2e8a6f;
}
.ssv2-landing.--narumiya .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #b8dfcc, #84c5a8);
    color: #195443;
}
.ssv2-landing.--narumiya .ssv2-landing-faq-item:hover {
    background: rgba(198, 232, 216, 0.45);
    color: #195443;
}
.ssv2-landing.--narumiya .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #2e8a6f;
}

/* NANIWA CAMERA accent — warm sepia / sienna brown. Photography
   aesthetic (vintage cameras, darkroom, leather straps); a unique
   warm-earth tone that doesn't overlap any other accent. */
.ssv2-landing.--cameranonaniwa .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #8b4a1a, #c98558);
}
.ssv2-landing.--cameranonaniwa .ssv2-landing-see-all { color: #8b4a1a; }
.ssv2-landing.--cameranonaniwa .ssv2-landing-see-all:hover { color: #4d2810; }
.ssv2-landing.--cameranonaniwa .ssv2-landing-hero-title h1 { color: #4d2810; }
.ssv2-landing.--cameranonaniwa .ssv2-landing-hashtag { color: #8b4a1a; }
.ssv2-landing.--cameranonaniwa .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(139, 74, 26, 0.12), transparent 45%),
        linear-gradient(135deg, #f9efe2 0%, #e9cfae 60%, #d6ae7f 100%);
}
.ssv2-landing.--cameranonaniwa .ssv2-landing-coupon b { color: #8b4a1a; }
.ssv2-landing.--cameranonaniwa .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f0dec3, #e0c39a);
    color: #8b4a1a;
}
.ssv2-landing.--cameranonaniwa .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #e0c39a, #c79c66);
    color: #4d2810;
}
.ssv2-landing.--cameranonaniwa .ssv2-landing-faq-item:hover {
    background: rgba(233, 207, 174, 0.45);
    color: #4d2810;
}
.ssv2-landing.--cameranonaniwa .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #8b4a1a;
}

/* Magi accent — vibrant electric periwinkle / indigo-blue. Fits the
   trading-card / "magic" theme and stays distinct from the three
   other TCG-ish landings (Mycalinks wine red, TokyoFab slate,
   Colleize deeper indigo). */
.ssv2-landing.--magicamp .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #4f5cd0, #8e98e8);
}
.ssv2-landing.--magicamp .ssv2-landing-see-all { color: #4f5cd0; }
.ssv2-landing.--magicamp .ssv2-landing-see-all:hover { color: #2a3590; }
.ssv2-landing.--magicamp .ssv2-landing-hero-title h1 { color: #2a3590; }
.ssv2-landing.--magicamp .ssv2-landing-hashtag { color: #4f5cd0; }
.ssv2-landing.--magicamp .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(79, 92, 208, 0.12), transparent 45%),
        linear-gradient(135deg, #eef0fc 0%, #ccd2f2 60%, #aab3e8 100%);
}
.ssv2-landing.--magicamp .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #e1e5fa, #c2c9ee);
    color: #4f5cd0;
}
.ssv2-landing.--magicamp .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #c2c9ee, #9aa4e2);
    color: #2a3590;
}
.ssv2-landing.--magicamp .ssv2-landing-faq-item:hover {
    background: rgba(204, 210, 242, 0.45);
    color: #2a3590;
}
.ssv2-landing.--magicamp .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #4f5cd0;
}

/* Kurosawa Gakki accent — deep emerald. Suits the heritage musical-
   instruments identity (store since 1957) and stays clearly distinct
   from the other green landings (Naturum forest, Spinns lime,
   Narumiya mint) and from Digimart's warm amber. */
.ssv2-landing.--kurosawagakki .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #0e6e54, #4cb594);
}
.ssv2-landing.--kurosawagakki .ssv2-landing-see-all { color: #0e6e54; }
.ssv2-landing.--kurosawagakki .ssv2-landing-see-all:hover { color: #053f2f; }
.ssv2-landing.--kurosawagakki .ssv2-landing-hero-title h1 { color: #053f2f; }
.ssv2-landing.--kurosawagakki .ssv2-landing-hashtag { color: #0e6e54; }
.ssv2-landing.--kurosawagakki .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(14, 110, 84, 0.12), transparent 45%),
        linear-gradient(135deg, #e6f3ed 0%, #bedfd2 60%, #95caaf 100%);
}
.ssv2-landing.--kurosawagakki .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d2ebde, #aad7c1);
    color: #0e6e54;
}
.ssv2-landing.--kurosawagakki .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #aad7c1, #74bd9d);
    color: #053f2f;
}
.ssv2-landing.--kurosawagakki .ssv2-landing-faq-item:hover {
    background: rgba(190, 223, 210, 0.45);
    color: #053f2f;
}
.ssv2-landing.--kurosawagakki .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #0e6e54;
}

/* Shimamura Music accent — vermilion / tomato red. Differentiates the
   third musical-instruments landing from Digimart's warm amber and
   Kurosawa's deep emerald, while sitting clearly apart from the
   other reds (Rakuten bright, Mycalinks wine, Booth coral). */
.ssv2-landing.--shimamura .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #d63b23, #ee8473);
}
.ssv2-landing.--shimamura .ssv2-landing-see-all { color: #b32f1c; }
.ssv2-landing.--shimamura .ssv2-landing-see-all:hover { color: #6b1b10; }
.ssv2-landing.--shimamura .ssv2-landing-hero-title h1 { color: #6b1b10; }
.ssv2-landing.--shimamura .ssv2-landing-hashtag { color: #b32f1c; }
.ssv2-landing.--shimamura .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(214, 59, 35, 0.12), transparent 45%),
        linear-gradient(135deg, #fdebe7 0%, #fac4ba 60%, #f49b8a 100%);
}
.ssv2-landing.--shimamura .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #fbd9d1, #f5b3a4);
    color: #b32f1c;
}
.ssv2-landing.--shimamura .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f5b3a4, #e8806b);
    color: #6b1b10;
}
.ssv2-landing.--shimamura .ssv2-landing-faq-item:hover {
    background: rgba(250, 196, 186, 0.45);
    color: #6b1b10;
}
.ssv2-landing.--shimamura .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #b32f1c;
}

/* MediaWorld accent — deep plum / aubergine. A unique sophisticated
   purple-red tone that sits clearly apart from Colleize's indigo
   violet, Surugaya's hot magenta, Mycalinks's wine red and the rest
   of the warm-purple family. */
.ssv2-landing.--mediaworld .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #6b2d5c, #b377a3);
}
.ssv2-landing.--mediaworld .ssv2-landing-see-all { color: #6b2d5c; }
.ssv2-landing.--mediaworld .ssv2-landing-see-all:hover { color: #3d1734; }
.ssv2-landing.--mediaworld .ssv2-landing-hero-title h1 { color: #3d1734; }
.ssv2-landing.--mediaworld .ssv2-landing-hashtag { color: #6b2d5c; }
.ssv2-landing.--mediaworld .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(107, 45, 92, 0.12), transparent 45%),
        linear-gradient(135deg, #f5ecf2 0%, #ddc1d5 60%, #c39bb6 100%);
}
.ssv2-landing.--mediaworld .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ebdce5, #d4b3c8);
    color: #6b2d5c;
}
.ssv2-landing.--mediaworld .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #d4b3c8, #b384a5);
    color: #3d1734;
}
.ssv2-landing.--mediaworld .ssv2-landing-faq-item:hover {
    background: rgba(221, 193, 213, 0.45);
    color: #3d1734;
}
.ssv2-landing.--mediaworld .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #6b2d5c;
}

/* J-Guitar accent — warm mustard / khaki. Earthy heritage tone for
   the fourth musical-instruments landing; clearly distinct from the
   sibling instrument stores (Digimart amber, Kurosawa emerald,
   Shimamura vermilion) and from BookOff's bright yellow /
   BrandOff's champagne gold. */
.ssv2-landing.--jguitar .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #9a8420, #d4be62);
}
.ssv2-landing.--jguitar .ssv2-landing-see-all { color: #9a8420; }
.ssv2-landing.--jguitar .ssv2-landing-see-all:hover { color: #5a4b0e; }
.ssv2-landing.--jguitar .ssv2-landing-hero-title h1 { color: #5a4b0e; }
.ssv2-landing.--jguitar .ssv2-landing-hashtag { color: #9a8420; }
.ssv2-landing.--jguitar .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(154, 132, 32, 0.12), transparent 45%),
        linear-gradient(135deg, #faf6e1 0%, #ecdf9d 60%, #d8c660 100%);
}
.ssv2-landing.--jguitar .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f1e8b8, #e0d086);
    color: #9a8420;
}
.ssv2-landing.--jguitar .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #e0d086, #c2ad4a);
    color: #5a4b0e;
}
.ssv2-landing.--jguitar .ssv2-landing-faq-item:hover {
    background: rgba(236, 223, 157, 0.45);
    color: #5a4b0e;
}
.ssv2-landing.--jguitar .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #9a8420;
}

/* Toranoana accent — burnt orange / rust. Nods to the tiger mascot
   and the doujinshi-store identity; sits darker and redder than
   Lashinbang's brighter orange and Digimart's softer amber, and
   stays clearly distinct from the wine / coral / vermilion reds. */
.ssv2-landing.--toranoana .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #c1440f, #ee8a4d);
}
.ssv2-landing.--toranoana .ssv2-landing-see-all { color: #c1440f; }
.ssv2-landing.--toranoana .ssv2-landing-see-all:hover { color: #6e2607; }
.ssv2-landing.--toranoana .ssv2-landing-hero-title h1 { color: #6e2607; }
.ssv2-landing.--toranoana .ssv2-landing-hashtag { color: #c1440f; }
.ssv2-landing.--toranoana .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(193, 68, 15, 0.14), transparent 45%),
        linear-gradient(135deg, #fdeee0 0%, #fbc8a3 60%, #f5a373 100%);
}
.ssv2-landing.--toranoana .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #fbdcc6, #f5b88c);
    color: #c1440f;
}
.ssv2-landing.--toranoana .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f5b88c, #ea8b4f);
    color: #6e2607;
}
.ssv2-landing.--toranoana .ssv2-landing-faq-item:hover {
    background: rgba(251, 200, 163, 0.45);
    color: #6e2607;
}
.ssv2-landing.--toranoana .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #c1440f;
}

/* Selected Auctions accent — dusty rose / old mauve. Carries
   over the muted burgundy of the legacy selectedauctions.aspx landing
   (#664849) for a soft luxury feel, warmer and pinker than MediaWorld's
   plum and clearly apart from the vermilion / rust reds. */
.ssv2-landing.--selectedauctions .ssv2-landing-section-header::before {
    background: linear-gradient(180deg, #664849, #a97e82);
}
.ssv2-landing.--selectedauctions .ssv2-landing-see-all { color: #664849; }
.ssv2-landing.--selectedauctions .ssv2-landing-see-all:hover { color: #3e2a2b; }
.ssv2-landing.--selectedauctions .ssv2-landing-hero-title h1 { color: #3e2a2b; }
.ssv2-landing.--selectedauctions .ssv2-landing-hashtag { color: #664849; }
.ssv2-landing.--selectedauctions .ssv2-landing-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(102, 72, 73, 0.14), transparent 45%),
        linear-gradient(135deg, #f7ecec 0%, #e6c9cc 60%, #d3a7ac 100%);
}
.ssv2-landing.--selectedauctions .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #f0dcde, #ddb8bc);
    color: #664849;
}
.ssv2-landing.--selectedauctions .ssv2-landing-faq-item:hover .ssv2-landing-faq-icon-wrap {
    background: linear-gradient(135deg, #ddb8bc, #bd8e93);
    color: #3e2a2b;
}
.ssv2-landing.--selectedauctions .ssv2-landing-faq-item:hover {
    background: rgba(230, 201, 204, 0.45);
    color: #3e2a2b;
}
.ssv2-landing.--selectedauctions .ssv2-landing-faq-item:hover .ssv2-landing-faq-item-arrow {
    color: #664849;
}
/* Vibrant saturated red — Rakuten's brand colour leading the gradient,
   not a pastel wash. Slight overlay orbs add depth without diluting it. */
.ssv2-landing-hero.--rakuten-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.18), transparent 45%),
        linear-gradient(135deg, #bf0000 0%, #d51a1a 50%, #ff5252 100%);
}
.ssv2-landing-hero.--rakuten-hero .ssv2-landing-hero-title h1,
.ssv2-landing-hero.--rakuten-hero .ssv2-landing-hero-title p {
    color: #fff;
}
.ssv2-landing-hero.--rakuten-hero .ssv2-landing-hero-title p {
    color: rgba(255, 255, 255, 0.9);
}
.ssv2-landing-hero.--rakuten-hero .ssv2-landing-hero-logo {
    /* The brand mark ships in red — invert so it reads on the red bg. */
    filter: brightness(0) invert(1);
}

/* Tile eyebrow (small line above the title) — used by feature tiles
   that need extra context like the Rakuten Bags "Authentic LV, Chanel
   and more" descriptor. */
.ssv2-landing-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: rgba(26, 37, 51, 0.75);
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Four-column variant used by Amazon landing for DVD / Car Parts rows. */
@media (min-width: 992px) {
    .ssv2-landing-cat-grid.--four { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Promo banners (individual-seller landing) ----------
   Three side-by-side cards advertising the Mercari tutorial,
   the ZenMarket help video and the ZenPlus marketplace. Each is
   a full-bleed image with a coloured tag chip + pill CTA on the
   left so the message reads over any artwork. */
.ssv2-landing-promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.ssv2-landing-promo-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 160px;
    padding: 22px;
    border-radius: 16px;
    overflow: hidden;
    background: #f4f7fb;
    color: #1a2533;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ssv2-landing-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 30, 50, 0.12);
    text-decoration: none;
    color: #1a2533;
}
.ssv2-landing-promo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.ssv2-landing-promo-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.ssv2-landing-promo-tag {
    font-size: 15px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
    line-height: 1.2;
}
.ssv2-landing-promo-cta {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(20, 30, 50, 0.10);
}
.ssv2-landing-promo-card .--tag-red    { background: rgba(191, 0, 0, 0.92); }
.ssv2-landing-promo-card .--tag-blue   { background: rgba(13, 91, 180, 0.92); }
.ssv2-landing-promo-card .--tag-purple { background: rgba(101, 49, 201, 0.92); }
.ssv2-landing-promo-card .--cta-red    { color: #bf0000; }
.ssv2-landing-promo-card .--cta-blue   { color: #0d5bb4; }
.ssv2-landing-promo-card .--cta-purple { color: #6531c9; }

/* ---------- Popular Stores ---------- */
.ssv2-landing-store-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 576px) { .ssv2-landing-store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ssv2-landing-store-grid { grid-template-columns: repeat(5, 1fr); } }
.ssv2-landing-store-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5ecf3;
    color: #1a2533;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    min-height: 160px;
}
.ssv2-landing-store-card:hover {
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(20, 30, 50, 0.10);
    transform: translateY(-3px);
    text-decoration: none;
    color: #1a2533;
}
.ssv2-landing-store-tag {
    display: inline-block;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 700;
    color: #5a6878;
    background: #f4f7fb;
    padding: 4px 10px;
    border-radius: 999px;
}
.ssv2-landing-store-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 90px;
    padding: 4px;
}
.ssv2-landing-store-logo img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* ---------- Category card grid (per-section rows) ---------- */
.ssv2-landing-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 576px) { .ssv2-landing-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ssv2-landing-cat-grid { grid-template-columns: repeat(6, 1fr); } }
.ssv2-landing-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eef2f6;
    color: #2c3a4a;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ssv2-landing-cat-card:hover {
    border-color: transparent;
    color: #1a2533;
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(20, 30, 50, 0.12);
    text-decoration: none;
}
.ssv2-landing-cat-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.ssv2-landing-cat-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ssv2-landing-cat-card:hover .ssv2-landing-cat-img {
    transform: scale(1.06);
}
.ssv2-landing-cat-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/* Brand cards (Luxury Brands, Watch Brands) — the original logos sit
   on their own coloured backgrounds, so we don't add a tile gradient.
   Same shape as regular cat cards, just no extra chrome. */
.ssv2-landing-cat-card.--brand .ssv2-landing-cat-img { height: 150px; }
.ssv2-landing-cat-card.--brand .ssv2-landing-cat-img img { max-height: 100%; }

/* Mobile tweaks. */
@media (max-width: 575px) {
    .ssv2-landing-hero { padding: 28px 20px; border-radius: 16px; }
    .ssv2-landing-hero-title h1 { font-size: 2rem; }
    .ssv2-landing-section-title { font-size: 1.3rem; }
    .ssv2-landing-feature-tile { min-height: 180px; padding: 16px; }
    .ssv2-landing-tile-label { font-size: 16px; }
    .ssv2-landing-tile-img { max-height: 110px; }
    .ssv2-landing-cat-card { padding: 14px 8px; }
    .ssv2-landing-cat-img { height: 150px; }
    .ssv2-landing-store-card { min-height: 120px; }
    .ssv2-landing-store-logo { min-height: 60px; }
    .ssv2-landing-store-logo img { max-height: 60px; }
}


/* Card category links (yahoo.aspx-style, injected under the card). In list
   view the card is a grid with a fixed image column — indent the category
   row past it so it reads as part of the text zone, not under the photo. */
/* Category row + auction price labels are list-view-only refinements —
   grid cards stay compact (labels hidden, prices joined by the dash). */
.products .ssv2-card-cats,
.products .ssv2-price-label { display: none; }
.products.list-view .ssv2-card-cats { display: block; grid-area: cats; color: #333; }
.products.list-view .ssv2-price-label { display: block; }
.products.list-view .ssv2-price-col { display: inline-flex; flex-direction: column; vertical-align: top; }
.products.list-view .product-pricing-buyout.ssv2-price-col { margin-left: 14px; }
.products.list-view .ssv2-auction-sep { display: none; }