/* ============================================================
   DFNS — DAILY FORTNITE SHOP
   SHOP PAGE STYLES
   ============================================================ */


/* ============================================================
   SHOP PAGE VARIABLES
   ============================================================ */

:root {

    --shop-section-spacing: 72px;

    --shop-card-radius: 18px;

    --shop-toolbar-radius: 16px;

    --shop-control-height: 46px;

    --shop-grid-gap: 20px;

    --shop-content-width: 1440px;

    --shop-accent: #7c5cff;

    --shop-accent-bright: #987dff;

    --shop-accent-soft: rgba(124, 92, 255, 0.14);

    --shop-accent-border: rgba(124, 92, 255, 0.32);

    --shop-success: #4ade80;

    --shop-warning: #facc15;

    --shop-danger: #fb7185;

    --shop-text-primary: #f4f4f5;

    --shop-text-secondary: #a1a1aa;

    --shop-text-muted: #71717a;

    --shop-background: #09090b;

    --shop-surface: #111113;

    --shop-surface-raised: #18181b;

    --shop-surface-hover: #202024;

    --shop-border: rgba(255, 255, 255, 0.08);

    --shop-border-strong: rgba(255, 255, 255, 0.14);

}


/* ============================================================
   SHOP PAGE BASE
   ============================================================ */

.shop-page {

    position: relative;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124, 92, 255, 0.035),
            transparent 38%
        );

}


/* ============================================================
   SHOP HERO
   ============================================================ */

.shop-page-hero {

    position: relative;

    overflow: hidden;

    padding:
        110px
        0
        95px;

    border-bottom: 1px solid var(--shop-border);

    background:
        linear-gradient(
            180deg,
            rgba(18, 18, 22, 0.96),
            rgba(9, 9, 11, 0.98)
        );

}


/* ============================================================
   HERO BACKGROUND
   ============================================================ */

.shop-hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}


.shop-hero-glow {

    position: absolute;

    width: 760px;

    height: 420px;

    top: -260px;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(124, 92, 255, 0.18),
            rgba(124, 92, 255, 0.06) 38%,
            transparent 72%
        );

    filter: blur(20px);

}


.shop-hero-grid {

    position: absolute;

    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );

}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.shop-hero-content {

    position: relative;

    z-index: 1;

    max-width: 860px;

    margin: 0 auto;

    text-align: center;

}


.shop-page-hero .hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    margin-bottom: 25px;

    border: 1px solid rgba(74, 222, 128, 0.18);

    border-radius: 999px;

    background: rgba(74, 222, 128, 0.06);

    color: var(--shop-success);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.shop-page-title {

    margin: 0;

    font-size: clamp(48px, 7vw, 92px);

    line-height: 0.92;

    font-weight: 950;

    letter-spacing: -0.055em;

    color: var(--shop-text-primary);

}


.shop-page-title span {

    display: block;

    margin-top: 8px;

    color: var(--shop-accent-bright);

}


.shop-page-description {

    max-width: 690px;

    margin: 28px auto 0;

    color: var(--shop-text-secondary);

    font-size: 17px;

    line-height: 1.75;

}


.shop-date-display {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 36px;

    padding: 13px 18px;

    border: 1px solid var(--shop-border);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);

}


.date-display-label {

    color: var(--shop-text-muted);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 0.12em;

}


.date-display-value {

    color: var(--shop-text-primary);

    font-size: 13px;

    font-weight: 750;

}


/* ============================================================
   SHOP TOOLBAR
   ============================================================ */

.shop-toolbar-section {

    position: sticky;

    top: 0;

    z-index: 20;

    padding: 16px 0;

    border-bottom: 1px solid var(--shop-border);

    background:
        rgba(9, 9, 11, 0.88);

    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

}


.shop-toolbar {

    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        auto
        auto;

    align-items: center;

    gap: 14px;

}


/* ============================================================
   SHOP SEARCH
   ============================================================ */

.shop-search {

    min-width: 0;

}


.shop-search-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}


.shop-search-icon {

    position: absolute;

    left: 16px;

    color: var(--shop-text-muted);

    font-size: 21px;

    line-height: 1;

    pointer-events: none;

}


.shop-search-input {

    width: 100%;

    height: var(--shop-control-height);

    padding:
        0
        46px
        0
        46px;

    border: 1px solid var(--shop-border);

    border-radius: 12px;

    outline: none;

    background: var(--shop-surface);

    color: var(--shop-text-primary);

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;

}


.shop-search-input::placeholder {

    color: var(--shop-text-muted);

}


.shop-search-input:hover {

    border-color: var(--shop-border-strong);

}


.shop-search-input:focus {

    border-color: var(--shop-accent-border);

    background: var(--shop-surface-raised);

    box-shadow:
        0 0 0 4px var(--shop-accent-soft);

}


.clear-search-button {

    position: absolute;

    right: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--shop-text-muted);

    font-size: 19px;

    cursor: pointer;

}


.clear-search-button:hover {

    background: rgba(255, 255, 255, 0.06);

    color: var(--shop-text-primary);

}


/* ============================================================
   VIEW CONTROLS
   ============================================================ */

.shop-view-controls {

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 4px;

    border: 1px solid var(--shop-border);

    border-radius: 12px;

    background: var(--shop-surface);

}


.view-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--shop-text-muted);

    font-size: 19px;

    cursor: pointer;

    transition:
        background 160ms ease,
        color 160ms ease;

}


.view-button:hover {

    color: var(--shop-text-primary);

}


.view-button.active {

    background: var(--shop-accent-soft);

    color: var(--shop-accent-bright);

}


/* ============================================================
   SHOP SORT
   ============================================================ */

.shop-sort {

    display: flex;

    align-items: center;

    gap: 9px;

}


.sort-label {

    color: var(--shop-text-muted);

    font-size: 11px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}


.shop-sort-select {

    height: var(--shop-control-height);

    padding:
        0
        38px
        0
        14px;

    border: 1px solid var(--shop-border);

    border-radius: 12px;

    outline: none;

    background:
        var(--shop-surface);

    color: var(--shop-text-primary);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

}


.shop-sort-select:focus {

    border-color: var(--shop-accent-border);

    box-shadow:
        0 0 0 4px var(--shop-accent-soft);

}


/* ============================================================
   FILTER SECTION
   ============================================================ */

.shop-filters-section {

    border-bottom: 1px solid var(--shop-border);

    background: rgba(255, 255, 255, 0.012);

}


.shop-filters {

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 25px 0;

}


.filter-group {

    display: flex;

    align-items: flex-start;

    gap: 24px;

}


.filter-label {

    flex: 0 0 76px;

    padding-top: 10px;

    color: var(--shop-text-muted);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.filter-options {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.filter-button {

    min-height: 35px;

    padding: 0 13px;

    border: 1px solid var(--shop-border);

    border-radius: 9px;

    background: transparent;

    color: var(--shop-text-secondary);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease;

}


.filter-button:hover {

    border-color: var(--shop-border-strong);

    background: rgba(255, 255, 255, 0.035);

    color: var(--shop-text-primary);

}


.filter-button:active {

    transform: scale(0.97);

}


.filter-button.active {

    border-color: var(--shop-accent-border);

    background: var(--shop-accent-soft);

    color: var(--shop-accent-bright);

}


.filter-actions {

    display: flex;

    justify-content: flex-end;

    padding-top: 2px;

}


.reset-filters-button {

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--shop-text-muted);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition: color 160ms ease;

}


.reset-filters-button:hover {

    color: var(--shop-danger);

}


/* ============================================================
   SHOP CONTENT
   ============================================================ */

.shop-content-section {

    padding:
        44px
        0
        80px;

}


/* ============================================================
   SHOP SUMMARY
   ============================================================ */

.shop-summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 45px;

}


.shop-summary-left {

    display: flex;

    align-items: baseline;

    gap: 7px;

}


.shop-summary-count {

    color: var(--shop-text-primary);

    font-size: 19px;

    font-weight: 850;

}


.shop-summary-label {

    color: var(--shop-text-muted);

    font-size: 12px;

}


.shop-summary-right {

    display: flex;

    align-items: center;

}


.active-filter-summary {

    padding: 7px 11px;

    border: 1px solid var(--shop-border);

    border-radius: 8px;

    background: var(--shop-surface);

    color: var(--shop-text-muted);

    font-size: 10px;

    font-weight: 750;

}


/* ============================================================
   CATEGORY SECTIONS
   ============================================================ */

.shop-category-section {

    margin-bottom: var(--shop-section-spacing);

}


.category-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;

}


.category-heading {

    min-width: 0;

}


.category-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--shop-accent-bright);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.category-heading h2 {

    margin: 0;

    color: var(--shop-text-primary);

    font-size: clamp(25px, 3vw, 34px);

    font-weight: 900;

    letter-spacing: -0.035em;

}


.category-heading p {

    margin: 9px 0 0;

    color: var(--shop-text-muted);

    font-size: 13px;

    line-height: 1.6;

}


.category-count {

    flex-shrink: 0;

    color: var(--shop-text-muted);

    font-size: 11px;

    font-weight: 700;

}


/* ============================================================
   SHOP GRID
   ============================================================ */

.shop-grid {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: var(--shop-grid-gap);

}


/* ============================================================
   SHOP CARD
   ============================================================ */

.shop-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--shop-border);

    border-radius: var(--shop-card-radius);

    background: var(--shop-surface);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;

}


.shop-card:hover {

    transform: translateY(-5px);

    border-color: var(--shop-border-strong);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28);

}


/* ============================================================
   SHOP CARD IMAGE
   ============================================================ */

.shop-card-image {

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #18181b,
            #27272a
        );

}


.shop-card-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);

}


.shop-card:hover
.shop-card-image img {

    transform: scale(1.055);

}


/* ============================================================
   SHOP CARD OVERLAY
   ============================================================ */

.shop-card-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 13px;

    opacity: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.05) 65%
        );

    transition: opacity 200ms ease;

}


.shop-card:hover .shop-card-overlay {

    opacity: 1;

}


/* ============================================================
   SHOP CARD FAVORITE
   ============================================================ */

.shop-card-favorite {

    position: absolute;

    top: 11px;

    right: 11px;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    background:
        rgba(9, 9, 11, 0.72);

    backdrop-filter: blur(10px);

    color: rgba(255, 255, 255, 0.7);

    font-size: 17px;

    cursor: pointer;

    opacity: 0;

    transform: translateY(-5px);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        background 180ms ease,
        color 180ms ease;

}


.shop-card:hover .shop-card-favorite {

    opacity: 1;

    transform: translateY(0);

}


.shop-card-favorite:hover {

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

}


.shop-card-favorite.active {

    color: #fb7185;

}


/* ============================================================
   SHOP CARD BADGE
   ============================================================ */

.shop-card-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    z-index: 2;

    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 7px;

    background:
        rgba(9, 9, 11, 0.75);

    backdrop-filter: blur(10px);

    color: rgba(255, 255, 255, 0.86);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


/* ============================================================
   SHOP CARD CONTENT
   ============================================================ */

.shop-card-content {

    padding: 14px;

}


.shop-card-name {

    margin: 0;

    overflow: hidden;

    color: var(--shop-text-primary);

    font-size: 13px;

    font-weight: 800;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.shop-card-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-top: 8px;

}


.shop-card-rarity {

    overflow: hidden;

    color: var(--shop-text-muted);

    font-size: 9px;

    font-weight: 750;

    text-overflow: ellipsis;

    text-transform: uppercase;

    white-space: nowrap;

}


.shop-card-price {

    display: flex;

    align-items: center;

    gap: 4px;

    flex-shrink: 0;

    color: var(--shop-text-primary);

    font-size: 11px;

    font-weight: 850;

}


.shop-card-vbucks {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 14px;

    height: 14px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    color: var(--shop-text-secondary);

    font-size: 7px;

    font-weight: 900;

}


/* ============================================================
   RARITY STATES
   ============================================================ */

.shop-card.rarity-common {

    --rarity-color: #9ca3af;

}


.shop-card.rarity-uncommon {

    --rarity-color: #4ade80;

}


.shop-card.rarity-rare {

    --rarity-color: #60a5fa;

}


.shop-card.rarity-epic {

    --rarity-color: #c084fc;

}


.shop-card.rarity-legendary {

    --rarity-color: #f59e0b;

}


.shop-card.rarity-mythic {

    --rarity-color: #facc15;

}


.shop-card[class*="rarity-"] {

    border-bottom-color:
        color-mix(
            in srgb,
            var(--rarity-color) 30%,
            transparent
        );

}


.shop-card[class*="rarity-"]
.shop-card-rarity {

    color: var(--rarity-color);

}


/* ============================================================
   COMPACT VIEW
   ============================================================ */

.shop-grid.compact-view {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

}


.shop-grid.compact-view
.shop-card {

    display: grid;

    grid-template-columns: 110px minmax(0, 1fr);

}


.shop-grid.compact-view
.shop-card-image {

    aspect-ratio: 1 / 1;

    height: 110px;

}


.shop-grid.compact-view
.shop-card-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* ============================================================
   SKELETON LOADING
   ============================================================ */

.skeleton-card {

    overflow: hidden;

    pointer-events: none;

}


.skeleton-image {

    aspect-ratio: 1 / 1;

    background:
        linear-gradient(
            100deg,
            #18181b 20%,
            #27272a 38%,
            #18181b 56%
        );

    background-size: 200% 100%;

    animation:
        skeleton-loading
        1.5s
        infinite;

}


.skeleton-content {

    padding: 14px;

}


.skeleton-line {

    width: 76%;

    height: 11px;

    border-radius: 6px;

    background: #27272a;

    animation:
        skeleton-loading
        1.5s
        infinite;

}


.skeleton-line.short {

    width: 45%;

    margin-top: 9px;

}


@keyframes skeleton-loading {

    0% {

        background-position: 200% 0;

    }

    100% {

        background-position: -200% 0;

    }

}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.shop-empty-state {

    padding: 110px 20px;

    border: 1px dashed var(--shop-border-strong);

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.012);

    text-align: center;

}


.empty-state-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    margin: 0 auto 22px;

    border: 1px solid var(--shop-border);

    border-radius: 18px;

    background: var(--shop-surface);

    color: var(--shop-text-muted);

    font-size: 28px;

}


.shop-empty-state h2 {

    margin: 0;

    color: var(--shop-text-primary);

    font-size: 25px;

    font-weight: 850;

}


.shop-empty-state p {

    max-width: 430px;

    margin: 12px auto 25px;

    color: var(--shop-text-muted);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   ERROR STATE
   ============================================================ */

.shop-error-state {

    padding: 30px 0 60px;

}


.error-card {

    max-width: 650px;

    margin: 0 auto;

    padding: 60px 35px;

    border: 1px solid rgba(251, 113, 133, 0.14);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(251, 113, 133, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    text-align: center;

}


.error-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    margin: 0 auto 20px;

    border: 1px solid rgba(251, 113, 133, 0.2);

    border-radius: 16px;

    background: rgba(251, 113, 133, 0.08);

    color: var(--shop-danger);

    font-size: 24px;

    font-weight: 900;

}


.error-card h2 {

    margin: 10px 0 0;

    color: var(--shop-text-primary);

    font-size: 27px;

    font-weight: 850;

}


.error-card p {

    max-width: 480px;

    margin: 12px auto 25px;

    color: var(--shop-text-muted);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   SHOP UPDATE CARD
   ============================================================ */

.shop-update-section {

    padding:
        0
        0
        80px;

}


.shop-update-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 20px 22px;

    border: 1px solid var(--shop-border);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        );

}


.update-status {

    display: flex;

    align-items: center;

    gap: 12px;

}


.update-status .status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--shop-success);

    box-shadow:
        0 0 0 4px rgba(74, 222, 128, 0.08),
        0 0 14px rgba(74, 222, 128, 0.3);

}


.update-status-label {

    display: block;

    color: var(--shop-text-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.update-status strong {

    display: block;

    margin-top: 3px;

    color: var(--shop-success);

    font-size: 12px;

}


.update-information {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--shop-text-muted);

    font-size: 11px;

}


.update-information time {

    color: var(--shop-text-secondary);

    font-weight: 700;

}


.refresh-shop-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    height: 38px;

    padding: 0 13px;

    border: 1px solid var(--shop-border);

    border-radius: 9px;

    background: var(--shop-surface);

    color: var(--shop-text-secondary);

    font-family: inherit;

    font-size: 11px;

    font-weight: 750;

    cursor: pointer;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;

}


.refresh-shop-button:hover {

    border-color: var(--shop-accent-border);

    background: var(--shop-accent-soft);

    color: var(--shop-accent-bright);

}


.refresh-icon {

    display: inline-block;

    font-size: 15px;

    transition: transform 400ms ease;

}


.refresh-shop-button.loading
.refresh-icon {

    animation:
        refresh-spin
        800ms
        linear
        infinite;

}


@keyframes refresh-spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* ============================================================
   TOAST
   ============================================================ */

.toast {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 10px;

    max-width: 360px;

    padding: 13px 16px;

    border: 1px solid var(--shop-border);

    border-radius: 12px;

    background:
        rgba(24, 24, 27, 0.94);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(18px);

    color: var(--shop-text-primary);

    font-size: 12px;

    font-weight: 650;

}


.toast-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: rgba(74, 222, 128, 0.12);

    color: var(--shop-success);

    font-size: 11px;

    font-weight: 900;

}


/* ============================================================
   RESPONSIVE — LARGE DESKTOP
   ============================================================ */

@media (max-width: 1400px) {

    .shop-grid {

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

    }

}


/* ============================================================
   RESPONSIVE — DESKTOP
   ============================================================ */

@media (max-width: 1150px) {

    .shop-toolbar {

        grid-template-columns:
            1fr
            auto
            auto;

    }


    .shop-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }


    .filter-group {

        flex-direction: column;

        gap: 10px;

    }


    .filter-label {

        flex-basis: auto;

        padding-top: 0;

    }

}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 850px) {

    :root {

        --shop-section-spacing: 58px;

        --shop-grid-gap: 14px;

    }


    .shop-page-hero {

        padding:
            85px
            0
            75px;

    }


    .shop-toolbar-section {

        position: relative;

    }


    .shop-toolbar {

        grid-template-columns: 1fr;

    }


    .shop-view-controls {

        display: none;

    }


    .shop-sort {

        justify-content: space-between;

    }


    .shop-sort-select {

        flex: 1;

    }


    .shop-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .shop-summary {

        margin-bottom: 35px;

    }


    .shop-update-card {

        flex-wrap: wrap;

    }


    .update-information {

        order: 3;

        width: 100%;

        padding-top: 14px;

        border-top: 1px solid var(--shop-border);

    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 600px) {

    :root {

        --shop-section-spacing: 48px;

        --shop-grid-gap: 10px;

        --shop-card-radius: 13px;

    }


    .shop-page-hero {

        padding:
            65px
            0
            55px;

    }


    .shop-page-title {

        font-size: clamp(42px, 14vw, 62px);

    }


    .shop-page-description {

        margin-top: 20px;

        font-size: 14px;

        line-height: 1.65;

    }


    .shop-date-display {

        width: 100%;

        justify-content: center;

        margin-top: 25px;

    }


    .shop-filters {

        gap: 16px;

    }


    .filter-options {

        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 4px;

        scrollbar-width: none;

    }


    .filter-options::-webkit-scrollbar {

        display: none;

    }


    .filter-button {

        flex-shrink: 0;

    }


    .shop-content-section {

        padding:
            30px
            0
            55px;

    }


    .shop-summary {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 28px;

    }


    .category-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        margin-bottom: 18px;

    }


    .category-heading p {

        font-size: 12px;

    }


    .shop-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .shop-card:hover {

        transform: none;

    }


    .shop-card-content {

        padding: 11px;

    }


    .shop-card-name {

        font-size: 11px;

    }


    .shop-card-meta {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }


    .shop-card-price {

        font-size: 10px;

    }


    .shop-card-favorite {

        width: 30px;

        height: 30px;

        opacity: 1;

        transform: none;

    }


    .shop-update-card {

        align-items: flex-start;

        flex-direction: column;

    }


    .update-information {

        order: initial;

        width: auto;

        padding: 0;

        border: 0;

    }


    .refresh-shop-button {

        width: 100%;

        justify-content: center;

    }


    .toast {

        right: 14px;

        bottom: 14px;

        left: 14px;

        max-width: none;

    }

}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .shop-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

    }


    .shop-card-content {

        padding: 9px;

    }


    .shop-card-rarity {

        font-size: 8px;

    }


    .shop-card-price {

        font-size: 9px;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .shop-card,
    .shop-card-image img,
    .filter-button,
    .view-button,
    .shop-search-input,
    .refresh-shop-button {

        transition: none;

    }


    .skeleton-image,
    .skeleton-line,
    .refresh-icon {

        animation: none;

    }

}