/**
 * styles-mobile.css
 * Mobile-specific styles for MintYourCard Dashboard
 *
 * Loaded conditionally: <link rel="stylesheet" href="styles-mobile.css" media="(max-width: 768px)">
 *
 * Mobile header structure:
 * - Line 1: Title (left) | Indicator (right) - counter pill, timer, etc.
 * - Line 2: page-tabs OR filters-row
 * - No subtitle on mobile (hidden)
 */

/* ==========================================================================
   0. GLOBAL - Container padding
   ========================================================================== */

/* Override de: styles.css ligne 24048 */
/* Desktop: padding 16px gauche/droite */
/* Mobile: réduit à 8px pour plus d'espace contenu */
.dashboard-container {
    padding: var(--space-2) var(--space-2) 120px;
}

/* Ajouter padding-left aux titres de section pour alignement */
.section-header {
    padding-left: var(--space-3);
}

/* Réordonner sections dashboard sur mobile */
#dashboard-view .dashboard-row--65-35,
#dashboard-view .dashboard-row--50-50 {
    display: flex;
    flex-direction: column;
}

/* Cadeaux avant Classement */
#dashboard-view #section-leaderboard {
    order: 2;
}

#dashboard-view #section-gifts-preview {
    order: 1;
}

/* Évaluations terminées avant Cartes à noter */
#dashboard-view #section-cards-to-rate {
    order: 2;
}

#dashboard-view #section-rated-cards {
    order: 1;
}

/* ==========================================================================
   1. PAGE HEADER - Mobile Layout
   ========================================================================== */

.page-header {
    padding: var(--space-4) var(--space-4);
    min-height: auto;
    /* Sticky header on mobile - no top-app-bar so top: 0 */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-app);
}

/* Hide subtitle on mobile - completely remove from layout */
.page-header__subtitle {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Hide decorator emoji on mobile */
.page-header::after {
    display: none;
}

/* Content wrapper */
.page-header__content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

/* Title row: Title (left) | Indicator (right) */
.page-header__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Title: smaller on mobile */
.page-header__title {
    font-size: 22px;
    margin: 0;
}

/* Toolbar: full width, contains tabs */
.page-header__toolbar {
    width: 100%;
    margin-top: var(--space-2);
}

/* ==========================================================================
   1.1 PAGE HEADER - Scrolled State (Mobile)
   ========================================================================== */

.page-header.is-scrolled:not(.page-header--card-detail) {
    padding: var(--space-3) var(--space-1) var(--space-3) var(--space-4);
    min-height: auto;
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
}

/* In scrolled mode: title + toolbar on same row */
.page-header.is-scrolled:not(.page-header--card-detail) .page-header__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__title-row {
    flex: 1;
    min-width: 0;
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__title {
    font-size: 16px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__toolbar {
    margin-top: 0;
    width: auto;
    flex-shrink: 0;
}

/* ==========================================================================
   2. COUNTER PILLS & INDICATORS - Mobile
   ========================================================================== */

/* Counter pills - compact on mobile */
.counter-pill {
    padding: var(--space-1) var(--space-2);
    font-size: 12px;
    gap: 6px;
}

.counter-pill i,
.counter-pill svg {
    font-size: 10px;
}

/* Gallery card count icon */
.gallery-card-count .card-icon {
    width: 12px;
    height: 15px;
}

/* Missions timer - compact */
.missions-timer {
    font-size: 12px;
    padding: var(--space-1) var(--space-2);
}

/* ==========================================================================
   3. PAGE TABS - Mobile Layout
   ========================================================================== */

.page-tabs {
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    gap: var(--space-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.page-tabs::-webkit-scrollbar {
    display: none;
}

.page-tab {
    font-size: 13px;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Infos tabs - extra compact due to many tabs */
.infos-tabs .page-tab {
    font-size: 12px;
    padding: 6px var(--space-2);
}

/* ==========================================================================
   4. FILTERS ROW - Mobile Layout (Galerie, Mes cartes)
   ========================================================================== */

/*
 * MOBILE LAYOUT STRATEGY:
 * - Ligne 1: Titre + compteur (géré par .page-header__title-row)
 * - Ligne 2: Champ recherche pleine largeur (toujours visible)
 * - Ligne 3: Filtres (taille, tri, infos) sur une ligne
 */

/* Override de: styles.css ligne 3843-3849 */
/* Desktop: flex row avec wrap */
/* Mobile: flex wrap - recherche prend 100%, filtres sur ligne suivante */
.filters-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

/* Search - Mobile: toujours visible, pleine largeur (force nouvelle ligne pour filtres) */
.search-expandable {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    min-width: 100%;
    order: -1;
}

/* Cacher le toggle sur mobile - on veut le champ toujours visible */
.search-expandable .search-toggle {
    display: none !important;
}

/* Champ recherche toujours visible et pleine largeur */
/* Override de: styles.css ligne 3449-3451 */
/* Desktop: flex: 0 1 200px, max-width: 200px */
/* Mobile: pleine largeur - override flex et max-width */
.search-expandable .search-input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    opacity: 1 !important;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    font-size: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.search-expandable .search-input::placeholder {
    color: var(--text-tertiary);
}

.search-expandable .search-input:focus {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.search-expandable .search-input:focus:not(:focus-visible) {
    outline: none;
}

.search-expandable .search-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Filtres (selects + checkbox) - ligne 3 */
/* Les selects prennent l'espace disponible, Infos reste à droite */

/* Size/Sort selects - pleine largeur partagée */
.size-select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
}

.size-select select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
}

/* Toggle inline (Infos checkbox) - aligné à droite, même hauteur */
.toggle-inline {
    flex-shrink: 0;
    font-size: 12px;
    height: 36px;
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* ==========================================================================
   5. PAGE-SPECIFIC ADJUSTMENTS
   ========================================================================== */

/* --- Compte (Account) --- */
.page-header--account {
    padding: var(--space-4);
}

.page-header--account .page-header__content {
    flex-direction: column;
}

.account-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Align tops */
    gap: var(--space-3);
}

.account-header__avatar {
    flex-shrink: 0;
}

.account-header__avatar .profile-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.account-header__avatar .avatar-edit-btn {
    width: 16px;
    height: 16px;
    font-size: 8px;
}

.account-header__info {
    flex: 1;
    min-width: 0;
    padding-top: 2px; /* Align with avatar top */
}

.account-header__row1 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.account-header__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.account-header__row2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.account-header__date {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.2;
}

/* Hide logout button in header on mobile - available in sidebar */
.account-header__logout {
    display: none;
}

/* Account header scrolled - single row like other pages */
.page-header--account.is-scrolled .page-header__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.page-header--account.is-scrolled .account-header {
    flex: 1 1 auto !important;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.page-header--account.is-scrolled .account-header__avatar .profile-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px;
}

.page-header--account.is-scrolled .account-header__avatar .avatar-edit-btn {
    display: none !important;
}

.page-header--account.is-scrolled .account-header__info {
    padding-top: 0;
}

.page-header--account.is-scrolled .account-header__name {
    font-size: 14px;
}

.page-header--account.is-scrolled .account-header__row2 {
    display: none !important;
}

.page-header--account.is-scrolled .page-header__toolbar {
    margin-top: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Account page content - aligné avec le header (16px) */
#account-view .tab-content {
    padding: 0 var(--space-4);
}

#account-view .stats-layout {
    padding: 0;
}

#account-view .stats-column {
    padding: 0;
}

#account-view #tab-infos {
    padding: 0 var(--space-4);
}

/* Cartes niveau/streak - padding réduit pour compenser les marges */
/* Override de: styles.css ligne 6051 (level-card: 20px) et 6103 (streak-card: 16px 20px) */
#account-view .level-card {
    padding: var(--space-4);
}

#account-view .streak-card {
    padding: var(--space-3) var(--space-4);
}

/* Account page - reduce text sizes for mobile */
#account-view .stats-column__title {
    font-size: 14px;
}

#account-view .level-card__rank-label {
    font-size: 11px;
}

#account-view .level-card__rank-value {
    font-size: 22px;
}

#account-view .level-card__xp-info {
    font-size: 13px;
}

#account-view .level-card__xp-next {
    font-size: 11px;
}

#account-view .streak-card__title {
    font-size: 13px;
}

#account-view .streak-card__values {
    font-size: 18px;
}

#account-view .streak-card__label {
    font-size: 10px;
}

#account-view .badges-section__title {
    font-size: 14px;
}

#account-view .badge-item__name {
    font-size: 10px;
}

#account-view .activity-section__title {
    font-size: 14px;
}

#account-view .activity-table th,
#account-view .activity-table td {
    font-size: 12px;
    padding: var(--space-2);
}

/* Account page - Infos perso tab: reduce font sizes for mobile */
#account-view #tab-infos .stats-column__title {
    font-size: 12px;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

#account-view #tab-infos .section-title {
    font-size: 10px;
    margin-bottom: 8px;
}

#account-view #tab-infos .setting-row > span:first-child {
    font-size: 13px;
}

#account-view #tab-infos .setting-row .setting-value {
    font-size: 13px;
}

#account-view #tab-infos .setting-row {
    padding: 12px 0;
}

#account-view #tab-infos .settings-group {
    padding: 2px 14px;
}

#account-view #tab-infos .section-note {
    font-size: 11px;
    padding: 10px 12px;
}

#account-view #tab-infos .setting-row .setting-value {
    max-width: 45%;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

#account-view #tab-infos .setting-row .setting-value span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#account-view .parrain-cta-title {
    font-size: 13px;
}

#account-view .parrain-cta-subtitle {
    font-size: 12px;
}

#account-view .parrain-cta-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

#account-view .parrain-cta {
    padding: 12px 14px;
    gap: 10px;
}

#account-view .parrain-cta-bonus .bonus-value {
    font-size: 14px;
}

#account-view .parrain-cta-bonus .bonus-label {
    font-size: 9px;
}

#account-view .volume-value {
    font-size: 12px;
}

#account-view .btn-account-delete {
    font-size: 12px;
}

/* --- Missions --- */
/* Timer is now in title-row, no special positioning needed */

/* --- Collection (Mes cartes) --- */
/* Override styles.css which sets position: relative */
#my-cards-view .page-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    background: var(--bg-app);
}

#my-cards-view .page-header.is-scrolled {
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
}

/* Badges Collection : padding intérieur + border-radius */
#my-cards-view .my-cards-page .cards-grid .badge-overlay {
    padding: 2px 4px;
    border-radius: 3px;
}

#my-cards-view .my-cards-page .cards-grid .badge-sealed-icon {
    padding: 2px 3px;
    border-radius: 0 0 0 3px;
}

/* Toggle Infos : déplacer sur la ligne du titre, aligné droite */
#my-cards-view .page-header {
    position: relative;
}

#my-cards-view .toggle-inline {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}

/* Filters row : Petite + Plus récent + Public/Privé en 1/3 chacun */
#my-cards-view .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Search prend toute la largeur */
#my-cards-view .filters-row .search-input {
    flex: 0 0 100%;
    order: 1;
}

/* Cacher filter-chips vide */
#my-cards-view .filters-row .filter-chips {
    display: none;
}

/* Les 3 selects/toggles en ligne, 1/3 chacun */
#my-cards-view .filters-row .size-select {
    flex: 1 1 0;
    min-width: 0;
    order: 2;
}

#my-cards-view .filters-row .size-select select {
    width: 100%;
}

#my-cards-view .filters-row .collection-visibility-toggle {
    flex: 1 1 0;
    min-width: 0;
    order: 3;
    height: 36px;
}

#my-cards-view .filters-row .collection-visibility-toggle .visibility-toggle-wrapper {
    width: 100%;
    height: 36px;
    position: relative;
    display: flex;
    align-items: center;
}

#my-cards-view .filters-row .collection-visibility-toggle .visibility-toggle {
    width: 100%;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    min-width: auto;
    padding: 0 28px 0 var(--space-2);
    gap: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    justify-content: center;
}

#my-cards-view .filters-row .visibility-toggle-track {
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

#my-cards-view .filters-row .visibility-toggle-thumb {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
    background: var(--text-secondary);
    box-shadow: none;
}

#my-cards-view .filters-row .visibility-toggle[aria-pressed="true"] .visibility-toggle-thumb {
    left: calc(100% - 14px);
    background: #4ade80;
}

#my-cards-view .filters-row .visibility-toggle-label {
    display: inline;
    font-size: 10px;
}

#my-cards-view .filters-row .visibility-icon {
    display: none;
}

#my-cards-view .filters-row .visibility-tooltip {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: help;
}

#my-cards-view .filters-row .visibility-tooltip .fa-circle-info {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 8px;
    margin: -8px;
}

#my-cards-view .filters-row .visibility-tooltip-text {
    position: absolute;
    bottom: calc(100% + 12px);
    right: -8px;
    width: 200px;
    padding: 10px 12px;
    background: rgba(20, 20, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
}

#my-cards-view .filters-row .visibility-tooltip:active .visibility-tooltip-text,
#my-cards-view .filters-row .visibility-tooltip:focus .visibility-tooltip-text,
#my-cards-view .filters-row .visibility-tooltip:focus-within .visibility-tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   6. SMALL MOBILE (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
    .page-header {
        padding: var(--space-3) var(--space-3);
    }

    .page-header__title {
        font-size: 20px;
    }

    .page-tab {
        font-size: 12px;
        padding: 6px 10px;
    }

    .infos-tabs .page-tab {
        font-size: 11px;
        padding: 5px 8px;
    }

    .counter-pill {
        padding: 3px 8px;
        font-size: 11px;
    }

    /* Account */
    .account-header__avatar .profile-avatar {
        width: 44px;
        height: 44px;
    }

    .account-header__name {
        font-size: 16px;
    }
}

/* ==========================================================================
   7. EXTRA SMALL MOBILE (360px and below)
   ========================================================================== */

@media (max-width: 360px) {
    .page-header {
        padding: var(--space-2) var(--space-3);
    }

    .page-header__title {
        font-size: 18px;
    }

    .page-tab {
        font-size: 11px;
        padding: 5px 8px;
    }

    /* Filters row: keep horizontal with scroll on small screens */
    /* (no column stacking - scroll horizontal is better UX) */
}

/* ==========================================================================
   8. PAGE CADEAUX - Mobile Layout
   ========================================================================== */

/* Override de: styles.css ligne 13832-13836 */
/* Desktop: padding: 0 72px */
/* Mobile: padding réduit pour plus d'espace */
.gifts-panels {
    padding: 0 var(--space-4);
}

/* Override de: styles.css ligne 13860-13864 */
/* Desktop: flex avec 65%/35% côte à côte */
/* Mobile: stack vertical */
.contests-layout {
    flex-direction: column;
    gap: var(--space-4);
}

/* Override de: styles.css ligne 13866-13871 */
/* Desktop: flex: 0 0 65% */
/* Mobile: pleine largeur */
.contests-layout .rewards-timeline-section {
    flex: none;
    width: 100%;
}

/* Override de: styles.css ligne 13874-13880 */
/* Desktop: flex: 0 0 calc(35% - 24px) */
/* Mobile: pleine largeur */
.contests-layout .weekly-contest-section {
    flex: none;
    width: 100%;
    padding: var(--space-4);
}

/* --- Rewards Timeline Section - Mobile --- */

/* Override de: styles.css ligne 14070-14078 */
/* Desktop: padding: 24px, border-radius: 24px */
/* Mobile: padding et radius réduits */
.rewards-timeline-section {
    padding: var(--space-4);
    border-radius: 16px;
    margin-bottom: 0;
}

/* Override de: styles.css ligne 14080-14085 */
/* Desktop: flex avec space-between, margin-bottom: 40px */
/* Mobile: grid pour titre + pilule sur même ligne, sous-titre en dessous */
#gifts-view .section-header-simple {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}

#gifts-view .section-header-simple > div:first-child {
    display: contents;
}

#gifts-view .section-header-simple h3 {
    font-size: 18px;
    grid-column: 1;
    grid-row: 1;
}

#gifts-view .section-header-simple p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    grid-column: 1 / -1;
    grid-row: 2;
}

/* Participation pill - mobile compact, aligné droite du titre */
#gifts-view .participation-pill {
    padding: 5px var(--space-2);
    font-size: 11px;
    gap: 5px;
    grid-column: 2;
    grid-row: 1;
}

.participation-pill .pill-text-full {
    display: none;
}

.participation-pill .pill-text-short {
    display: inline;
}

/* Override de: styles.css ligne 14112-14119 */
/* Desktop: margin: 24px auto */
/* Mobile: margin réduit */
.timeline-container {
    margin: var(--space-3) 0;
}

/* Override de: styles.css ligne 14122-14129 */
/* Desktop: horizontal avec lignes de progression */
/* Mobile: markers superposés sur les cartes via position absolute */
#gifts-view .timeline-container {
    position: relative;
}

#gifts-view .timeline-markers-row {
    display: flex;
    position: absolute;
    top: 0;
    right: var(--space-4);
    bottom: 0;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}

/* Cacher les segments (lignes entre markers) sur mobile */
#gifts-view .timeline-segment {
    display: none;
}

/* Override de: styles.css ligne 14132-14147 */
/* Desktop: 40px */
/* Mobile: plus petit, flex pour s'aligner avec les cartes */
#gifts-view .timeline-marker {
    width: 28px;
    height: 28px;
    font-size: 10px;
    flex-shrink: 0;
}

#gifts-view .timeline-marker.ultimate {
    width: 32px;
    height: 32px;
}

/* Percentage text in marker */
#gifts-view .timeline-marker .marker-percent {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1;
}

/* Override de: styles.css ligne 14175-14182 */
/* Desktop: flex: 1, display: flex, height: 4px */
/* Mobile: même structure, hauteur réduite */
.timeline-segment {
    flex: 1;
    display: flex;
    align-items: center;
    height: 3px;
    margin: 0 -4px;
}

.timeline-segment__track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

/* Override de: styles.css ligne 14192-14199 */
/* Fill bar for progress - ensure visibility on mobile */
.timeline-segment__fill {
    display: block;
    width: 0%;
    height: 100%;
    min-height: 3px;
    background: linear-gradient(90deg, #23d6b4, #1abc9c);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(35, 214, 180, 0.4);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override de: styles.css ligne 14207-14213 */
/* Desktop: flex row, max-width: 800px */
/* Mobile: stack vertical */
.timeline-cards-row {
    flex-direction: column;
    gap: var(--space-3);
    max-width: none;
}

/* Override de: styles.css ligne 14215-14224 */
/* Desktop: max-width: 180px */
/* Mobile: pleine largeur avec icône à droite */
#gifts-view .timeline-step {
    width: 100%;
    max-width: none;
    position: relative;
}

/* Override de: styles.css ligne 14227-14234 */
/* Desktop: padding: 20px 16px */
/* Mobile: layout horizontal compact */
#gifts-view .step-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 12px;
}

/* Les icônes sont maintenant gérées par timeline-markers-row repositionné */

/* Override de: styles.css ligne 14281-14287 */
/* Desktop: height: 160px, margin-bottom: 12px */
/* Mobile: taille réduite, pas de margin */
.step-visual {
    height: 70px;
    width: 70px;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Override de: styles.css ligne 14307-14309 */
/* Desktop: text-align: center */
/* Mobile: text-align: left */
.step-info {
    text-align: left;
    flex: 1;
}

.step-title {
    font-size: 14px;
    margin-bottom: var(--space-1);
}

.step-desc {
    font-size: 12px;
}

/* Community Progress - Mobile - sur une seule ligne */
#gifts-view .community-progress {
    padding: var(--space-3);
    font-size: 11px;
    margin-bottom: var(--space-4);
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-1);
    white-space: nowrap;
}

/* --- Contest Progress Section - Mobile --- */

.contest-progress-section {
    padding-top: var(--space-4);
}

.contest-progress-section .progress-label,
.contest-progress-section .progress-value {
    font-size: 13px;
}

.contest-progress-section .progress-hint {
    font-size: 11px;
}

/* --- Weekly Contest Section - Mobile --- */
/* Redesign pour matcher le style du concours mensuel */

/* Header : titre + pilule sur même ligne */
#gifts-view .weekly-contest-section .section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}

#gifts-view .weekly-contest-section .section-title-group {
    display: contents;
}

#gifts-view .weekly-contest-section .section-title-group h3 {
    font-size: 18px;
    grid-column: 1;
    grid-row: 1;
}

#gifts-view .weekly-contest-section .section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

#gifts-view .weekly-contest-section .participation-pill {
    grid-column: 2;
    grid-row: 1;
}

/* Reward showcase : style carte comme concours mensuel */
#gifts-view .weekly-reward-showcase {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--space-3);
    gap: var(--space-3);
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
}

#gifts-view .weekly-reward-showcase .reward-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

#gifts-view .weekly-reward-showcase .reward-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#gifts-view .weekly-reward-showcase .reward-info {
    align-items: flex-start;
    flex: 1;
}

#gifts-view .weekly-reward-showcase .reward-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}

#gifts-view .weekly-reward-showcase .reward-title {
    font-size: 14px;
    font-weight: 600;
}

/* Cacher le texte explicatif long sur mobile */
#gifts-view .sealed-pregrade-info {
    display: none;
}

.sealed-pregrade-subtitle {
    font-size: 12px;
}

.sealed-pregrade-benefits li {
    font-size: 12px;
}

.sealed-pregrade-footer {
    font-size: 12px;
}

/* --- Referral Box - Mobile --- */

.referral-box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.referral-box .ref-content h4 {
    font-size: 14px;
}

.referral-box .ref-content p {
    font-size: 12px;
}

.referral-box .ref-link {
    align-self: flex-start;
    font-size: 13px;
}

/* --- Info Details Box - Mobile --- */

.info-details-box {
    margin-top: var(--space-4);
}

.info-details-box summary {
    font-size: 13px;
    padding: var(--space-3) var(--space-4);
}

.info-details-box ul {
    padding: var(--space-3) var(--space-4);
}

.info-details-box li {
    font-size: 12px;
    margin-bottom: var(--space-2);
}

/* --- Shop Section (Ambassadeurs tab) - Mobile --- */

#gifts-view .shop-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

#gifts-view .shop-balance-card {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    background: linear-gradient(135deg, #00897b 0%, #00695c 100%);
    border-radius: 16px;
    border: none;
}

#gifts-view .balance-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
}

#gifts-view .balance-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
}

#gifts-view .balance-amount {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

#gifts-view .balance-amount small {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Pending gifts summary - More prominent */
#gifts-view .pending-summary {
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
}

#gifts-view .pending-header {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: var(--space-2);
}

#gifts-view .pending-header i {
    margin-right: var(--space-2);
}

#gifts-view .pending-gifts-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

#gifts-view .pending-gifts-list li {
    font-size: 11px;
    background: rgba(0, 214, 180, 0.15);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Shop intro text */
#gifts-view .shop-intro {
    font-size: 13px;
    margin-bottom: var(--space-4);
    text-align: center;
    color: var(--text-secondary);
}

/* Shop grid - 2 columns on mobile */
#gifts-view .shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

/* Shop item card - Compact vertical layout */
#gifts-view .shop-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

#gifts-view .shop-item[data-affordable="false"] {
    opacity: 0.5;
}

#gifts-view .shop-visual {
    height: 110px;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

#gifts-view .shop-visual img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

#gifts-view .shop-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

#gifts-view .shop-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

#gifts-view .shop-cost {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

#gifts-view .shop-cost .old-price {
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: line-through;
    margin-right: 4px;
    font-weight: 400;
}

#gifts-view .btn-shop-action {
    font-size: 12px;
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

#gifts-view .btn-shop-action:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* ==========================================================================
   8.1 PAGE CADEAUX - Small Mobile (480px)
   ========================================================================== */

@media (max-width: 480px) {
    .gifts-panels {
        padding: 0 var(--space-3);
    }

    .rewards-timeline-section {
        padding: var(--space-3);
    }

    .weekly-contest-section {
        padding: var(--space-3) !important;
    }

    .section-header-simple h3,
    .weekly-contest-section .section-title-group h3 {
        font-size: 16px;
    }

    .step-visual {
        height: 60px;
        width: 60px;
    }

    .step-title {
        font-size: 13px;
    }

}

/* ==========================================================================
   8.2 PAGE CADEAUX - Extra Small Mobile (360px)
   ========================================================================== */

@media (max-width: 360px) {
    .section-header-simple h3,
    .weekly-contest-section .section-title-group h3 {
        font-size: 15px;
    }

    .step-visual {
        height: 50px;
        width: 50px;
    }

    .step-title {
        font-size: 12px;
    }

    .step-desc {
        font-size: 11px;
    }

    .weekly-reward-showcase .reward-image {
        width: 80px;
    }
}

/* ==========================================================================
   9. PAGE CLASSEMENTS - Mobile Layout
   ========================================================================== */

/*
 * STRATÉGIE : D'abord perfectionner .lb-card (rangs 4+),
 * puis appliquer le même design au podium (rangs 1-3)
 */

/* --- 9.1 LB-CARD MOBILE (rangs 4+) - LE MODÈLE --- */

#leaderboard-view .leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-3);
}

#leaderboard-view .lb-card {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(14, 14, 14, 0.7);
    border: none;
    border-radius: var(--radius-lg);
    width: 100%;
}

#leaderboard-view .lb-card__rank {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

#leaderboard-view .lb-card__user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

#leaderboard-view .lb-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

#leaderboard-view .lb-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#leaderboard-view .lb-card__name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#leaderboard-view .lb-card__badges {
    display: flex;
    gap: 2px;
}

#leaderboard-view .lb-card__badges img {
    width: 12px;
    height: 12px;
}

#leaderboard-view .lb-card__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 65px;
}

#leaderboard-view .lb-card__points {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary);
}

#leaderboard-view .lb-card__cards {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* --- 9.1b DASHBOARD - Top 20 noteurs (page accueil) --- */

/* Cacher les avatars sur le dashboard pour gagner de la place */
#dashboard-view .lb-card__avatar,
#dashboard-view .lb-card__avatar--placeholder {
    display: none;
}

/* Pseudo + badges sur la même ligne */
#dashboard-view .lb-card__info {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}

/* Pseudo : pas de troncature, afficher en entier */
#dashboard-view .lb-card__name {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    flex-shrink: 0;
}

/* Badges : peuvent être scrollés si trop nombreux */
#dashboard-view .lb-card__badges {
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
}

/* Réduire les badges (11px → 7px) */
#dashboard-view .lb-card__badges img {
    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;
}

/* --- 9.2 PODIUM MOBILE (rangs 1-3) - MÊME DESIGN --- */

#leaderboard-view .podium-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    margin: 0 0 var(--space-2);
    background: transparent;
    border: none;
}

/* Hide info badge on mobile */
#leaderboard-view .podium-container > .leaderboard-info-badge {
    display: none;
}

/* Reset ALL desktop styles and apply lb-card-like grid */
#leaderboard-view .podium-rank,
#leaderboard-view .podium-rank.rank-1,
#leaderboard-view .podium-rank.rank-2,
#leaderboard-view .podium-rank.rank-3 {
    /* Use grid like lb-card */
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: var(--space-3);
    /* Reset desktop sizing */
    position: relative;
    height: auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    max-width: none;
    flex: none;
    /* Appearance */
    padding: var(--space-3);
    background: rgba(14, 14, 14, 0.7);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
    text-align: left;
    animation: none;
}

/* Correct order: 1, 2, 3 (desktop uses 2, 1, 3) */
#leaderboard-view .podium-rank.rank-1 { order: 1; }
#leaderboard-view .podium-rank.rank-2 { order: 2; }
#leaderboard-view .podium-rank.rank-3 { order: 3; }

/* Position badge - first grid column */
#leaderboard-view .podium-rank .podium-position {
    grid-column: 1;
    grid-row: 1;
    position: static;
    transform: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
}

#leaderboard-view .podium-rank.rank-1 .podium-position {
    background: linear-gradient(135deg, #FFD700, #F4C60C);
    color: #0a0a0c;
}

#leaderboard-view .podium-rank.rank-2 .podium-position {
    background: linear-gradient(135deg, #E8E8E8, #C0C0C0);
    color: #0a0a0c;
}

#leaderboard-view .podium-rank.rank-3 .podium-position {
    background: linear-gradient(135deg, #E5A268, #CD7F32);
    color: #0a0a0c;
}

/* Avatar wrapper - part of second grid column */
#leaderboard-view .podium-rank .podium-avatar-wrapper {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: auto;
    height: auto;
    margin: 0;
}

/* Hide crown */
#leaderboard-view .podium-rank .podium-crown {
    display: none;
}

#leaderboard-view .podium-rank .podium-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    flex-shrink: 0;
}

/* Name follows avatar in same grid cell via absolute or we need to restructure */
/* Since HTML has: avatar-wrapper, position, name, stats - we use grid areas */
#leaderboard-view .podium-rank .podium-name {
    /* Name should be in column 2, but HTML order puts it after position */
    /* Use negative margin to pull it into avatar row, or accept grid flow */
    grid-column: 2;
    grid-row: 1;
    margin-left: 40px; /* 32px avatar + 8px gap */
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats - third grid column */
#leaderboard-view .podium-rank .podium-stats {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 65px;
}

#leaderboard-view .podium-rank .podium-points {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary);
}

#leaderboard-view .podium-rank .podium-rank-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

#leaderboard-view .podium-rank .podium-rank-row,
#leaderboard-view .podium-rank .podium-stats-row {
    font-size: 11px;
    color: var(--text-tertiary);
}

#leaderboard-view .podium-rank .podium-rank-separator {
    display: none;
}

#leaderboard-view .podium-rank .podium-flag {
    width: 14px;
    height: 10px;
}

#leaderboard-view .podium-rank .podium-badges {
    display: none; /* Hide badges on mobile podium for cleaner look */
}

/* ==========================================================================
   PAGE NOTER - Grading page
   ========================================================================== */

/* Override de: styles.css ligne 7026 */
/* Desktop: margin-left: 24px */
/* Mobile: margin-left: 0 pour aligner bord à bord */
.reviewer-section {
    margin-left: 0;
}

/* Override de: styles.css ligne 1003 */
/* Desktop: padding: 8px 20px 20px */
/* Mobile: pleine largeur pour la liste compacte */
.noter-page .cards-grid.compact-list-view {
    padding-left: 0;
    padding-right: 0;
}

/* Badges uniformes dans la liste compacte */
/* Override de: styles.css lignes 3129-3145 */
/* Desktop: padding variable, pas de largeur fixe */
/* Mobile: largeur fixe pour alignement parfait */
.compact-list-view .card-badges-external .badge-score,
.compact-list-view .card-badges-external .badge-user-note {
    min-width: 52px;
    width: 52px;
    box-sizing: border-box;
    padding: 8px 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    border-radius: 8px;
}

/* Réduire le gap entre les badges */
.compact-list-view .card-badges-external {
    gap: 6px;
    padding-right: 8px;
}

/* Badge score (droite avec étoile jaune) - fond subtil sans bordure */
/* Override de: styles.css ligne 3132 (border) et 3130 (background) */
/* Spécificité augmentée avec .noter-page pour override */
.noter-page .compact-list-view .card-badges-external .badge-score {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 9px 8px;
}

/* Titre carte dans liste compacte */
/* Override de: styles.css ligne 3238 (font-size: 13px) */
.compact-list-view .card-thumb-title {
    font-size: 12px;
}

/* Badge Scellée - masqué sur mobile (visible au clic sur la carte) */
.compact-list-view .card-badges-external .badge-sealed {
    display: none;
}

/* Search input pleine largeur sur mobile */
/* Override de: styles.css ligne 3450-3451 (flex: 0 1 200px, max-width: 200px) */
.noter-page .search-input {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
}

/* ==========================================================================
   EMPTY STATE - Global (toutes pages)
   ========================================================================== */

/* Override de: styles.css ligne 6877-6916 */
/* Desktop: padding 80px, icône 64px, titre 20px */
/* Mobile: plus compact */
.empty-state {
    padding: 40px 16px;
    gap: 12px;
}

.empty-state i {
    font-size: 40px;
    margin-bottom: 4px;
}

.empty-state-title {
    font-size: 16px;
}

.empty-state p {
    font-size: 14px;
}

/* ==========================================================================
   PAGE MES CARTES - Collection list-view
   ========================================================================== */

/* Override de: styles.css @media(max-width:480px) padding: 12px 10px */
/* Mobile: padding gauche/droite 8px */
.my-cards-page {
    padding-left: 8px;
    padding-right: 8px;
}

/* Override de: styles.css @media(max-width:540px) .card-thumb flex: 0 0 160px */
/* Ce flex-basis force la hauteur à 160px, on le reset pour list-view */
.my-cards-page .cards-grid.list-view .card-thumb {
    flex: 0 0 auto;
    height: 56px;
    min-height: 56px;
    gap: 10px;
    padding: 0 10px 0 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--bg-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Container list-view - pleine largeur, gap minimal */
.my-cards-page .cards-grid.list-view {
    padding: 0;
    gap: 0;
}

/* Image wrapper */
.my-cards-page .cards-grid.list-view .card-image-wrapper {
    width: 40px;
    height: 56px;
    border-radius: 0;
}

/* Titre carte */
.my-cards-page .cards-grid.list-view .card-thumb-title {
    font-size: 12px;
}

/* Serial */
.my-cards-page .cards-grid.list-view .card-thumb-serial {
    font-size: 10px;
}

/* Badge score - taille fixe, fond subtil, pas de bordure */
/* Spécificité avec #my-cards-view pour override de ligne 519 (padding: 2px 4px) */
#my-cards-view .my-cards-page .cards-grid.list-view .card-badges-external .badge-overlay {
    min-width: 52px;
    width: 52px;
    box-sizing: border-box;
    padding: 8px 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
}

/* Icône scellée - masquée sur mobile */
.my-cards-page .cards-grid.list-view .badge-sealed-icon {
    display: none;
}

/* Badge scellée externe - masqué */
.my-cards-page .cards-grid.list-view .card-badges-external .badge-sealed {
    display: none;
}

/* ============================================
   BOUTIQUE - PREMIUM MOBILE STYLES
   ============================================ */

/* Container */
.shop {
    padding: 0 16px 145px;
}

/* Particles - reduce on mobile */
.shop__particles::before,
.shop__particles::after {
    width: 150px;
    height: 150px;
    filter: blur(60px);
    opacity: 0.2;
}

/* Hero */
.shop-hero {
    padding: 24px 16px 24px;
    margin-bottom: 16px;
}
.shop-hero__img {
    width: 100px;
}
.shop-hero__title {
    font-size: 1.35rem;
}
.shop-hero__tagline {
    font-size: 0.85rem;
}

/* Savings */
.shop-savings {
    padding: 14px;
    margin-bottom: 16px;
}
.shop-savings__label {
    font-size: 0.75rem;
}
.shop-savings__value {
    font-size: 1rem;
}
.shop-savings__hint {
    font-size: 0.65rem;
}

/* Tiers */
.shop-tiers {
    gap: 6px;
    margin-bottom: 16px;
}
.shop-tier {
    padding: 12px 4px;
    border-radius: 10px;
}
.shop-tier__range {
    font-size: 0.7rem;
}
.shop-tier__price {
    font-size: 0.9rem;
    margin: 3px 0;
}
.shop-tier__discount {
    font-size: 0.55rem;
    padding: 2px 5px;
}
.shop-tier--pro .shop-tier__badge {
    font-size: 0.5rem;
    padding: 2px 6px;
}

/* Quantity */
.shop-quantity {
    padding: 14px;
    margin-bottom: 12px;
}
.shop-quantity__label {
    font-size: 0.85rem;
}
.shop-quantity__unit {
    font-size: 0.75rem;
}
.shop-qty-btn {
    width: 44px;
    height: 44px;
}
.shop-quantity__value {
    font-size: 2rem;
}
.shop-quantity__suffix {
    font-size: 0.65rem;
}

/* Subtotal */
.shop-subtotal {
    padding: 12px 16px;
    margin-bottom: 16px;
}
.shop-subtotal__empty {
    font-size: 0.8rem;
}
.shop-subtotal__formula {
    font-size: 0.85rem;
}
.shop-subtotal__result {
    font-size: 1.05rem;
}

/* Sections */
.shop-section {
    margin-bottom: 14px;
}
.shop-section__header {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

/* Checkbox */
.shop-check {
    padding: 12px 14px;
    gap: 10px;
}
.shop-check__box {
    width: 22px;
    height: 22px;
}
.shop-check__title {
    font-size: 0.85rem;
}
.shop-check__desc {
    font-size: 0.7rem;
}
.shop-check__price {
    font-size: 0.9rem;
}

/* Gift */
.shop-section--gift {
    padding: 14px;
}
.shop-gift__balance {
    font-size: 0.9rem;
}
.shop-gift__hint {
    font-size: 0.7rem;
}
.shop-qty-btn--sm {
    width: 32px;
    height: 32px;
}
.shop-gift__value {
    font-size: 1rem;
}

/* Shipping */
.shop-radio {
    padding: 12px 14px;
}
.shop-radio__label {
    font-size: 0.85rem;
}
.shop-radio__dot {
    width: 18px;
    height: 18px;
}
.shop-radio__dot::after {
    width: 8px;
    height: 8px;
}
.shop-shipping__free {
    font-size: 0.75rem;
}

/* Promo */
.shop-promo {
    margin-bottom: 16px;
}
.shop-promo__input {
    padding: 12px 14px;
    font-size: 0.85rem;
}
.shop-promo__btn {
    width: 46px;
}

/* Summary */
.shop-summary {
    padding: 16px;
    margin-bottom: 14px;
}
.shop-summary__title {
    font-size: 0.7rem;
    margin-bottom: 12px;
}
.shop-summary__row {
    font-size: 0.8rem;
}
.shop-summary__total {
    font-size: 0.9rem;
}
.shop-summary__total span:last-child {
    font-size: 1.25rem;
}

/* FAQ */
.shop-faq__item summary {
    padding: 12px 14px;
    font-size: 0.85rem;
}
.shop-faq__content {
    padding: 0 14px 14px;
    font-size: 0.8rem;
}

/* Support */
.shop-support {
    padding: 14px;
    font-size: 0.8rem;
}

/* Checkout Bar */
.shop-checkout {
    bottom: 56px;
    width: calc(100% - 24px);
    max-width: none;
    padding: 12px 16px;
    border-radius: 16px;
}
.shop-checkout__qty {
    font-size: 0.7rem;
}
.shop-checkout__price {
    font-size: 1.15rem;
}
.shop-checkout__btn {
    padding: 12px 20px;
    font-size: 0.9rem;
}

/* Extra small screens */
@media (max-width: 360px) {
    .shop {
        padding: 0 12px 140px;
    }

    .shop-hero {
        padding: 20px 12px;
    }
    .shop-hero__img {
        width: 85px;
    }
    .shop-hero__title {
        font-size: 1.2rem;
    }

    .shop-tier {
        padding: 10px 2px;
    }
    .shop-tier__price {
        font-size: 0.8rem;
    }
    .shop-tier__discount {
        font-size: 0.5rem;
        padding: 1px 4px;
    }

    .shop-quantity__value {
        font-size: 1.8rem;
    }
    .shop-qty-btn {
        width: 40px;
        height: 40px;
    }

    .shop-checkout {
        bottom: 52px;
        padding: 10px 14px;
    }
    .shop-checkout__price {
        font-size: 1.05rem;
    }
    .shop-checkout__btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
}