/* ================================
   VARIABLES & THEME
   ================================ */
:root {
    --card-bg: #ffffff;
    --text-color: #1c1c1e;
}

.dark-theme {
    --card-bg: #1c1c1e;
    --text-color: #ffffff;
}

/* ================================
   BASE BODY
   ================================ */
/* Always reserve the scrollbar's space. Without this, pages that are
   short (Wishlist, Explore) have no scrollbar and tall ones (Home) do, so
   the viewport width — and the centered layout with the sidebar in it —
   changes by ~15px every time you switch between them. */
html {
    scrollbar-gutter: stable;
}

body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    overflow-x: hidden;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

body.dark-theme {
    background-color: #1c1c1e;
    color: #f5f5f5;
}
/* ================================
   LOGO
   ================================ */
.logo-container {
    padding: 0 0 25px 20px;
}

.main-logo {
    width: 100px;
    height: 25px;
    display: block;
    mix-blend-mode: multiply;
}

/* ================================
   SIDEBAR
   ================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 150px;
    display: flex;
    flex-direction: column;
    padding: 5px 12px 0 12px;
    z-index: 1000;
}

.sidebar-brand {
    padding: 10px 12px 25px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand-name {
    font-size: 17px;
    font-weight: 900;
    color: #1c1c1e;
    letter-spacing: -0.6px;
    font-family: "Outfit", sans-serif;
}

.sidebar-brand-tld {
    font-size: 9.5px;
    font-weight: 700;
    color: #ff8c00;
    letter-spacing: 0.5px;
    font-family: "Outfit", sans-serif;
}

body.dark-theme .sidebar-brand-name {
    color: #ffffff;
}

.glass-nav-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 15px;
}

body.dark-theme .glass-nav-container {
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-separator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    margin: 5px 15px;
}

body.dark-theme .nav-separator {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 12px;
    gap: 5px;
    text-decoration: none;
    color: #161823;
    font-weight: 700;
    font-size: 18px;
    border-radius: 14px;
    background: transparent;
    outline: none;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease,
        color 0.4s ease;
}

/* Keeps keyboard-focus visible for accessibility, without the browser's
   default yellow focus ring. */
.sidebar a:focus-visible {
    outline: 2px solid rgba(255, 140, 0, 0.5);
    outline-offset: 2px;
}

.sidebar a:hover {
    transform: scale(1.08);
    background-color: rgba(0, 0, 0, 0.05);
    color: #161823;
}

.sidebar a:active {
    transform: scale(0.94);
}

.sidebar a.active {
    color: #ff8c00;
}

.sidebar a.active i,
.sidebar a.active:hover i {
    color: #ffa500;
}

body.dark-theme .sidebar a {
    color: #f2f2f7;
}

/* ================================
   STICKY HEADER & SEARCH
   ================================ */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-left: 0;
    padding: 12px 20px 12px 200px;
    background: rgba(247, 247, 247, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

body.dark-theme .sticky-header {
    background: rgba(28, 28, 30, 0.85);
    border-bottom: none;
}

.top-header {
    margin: 0;
    padding: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.search-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.search-wrapper > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.search-wrapper:focus-within > i {
    color: #ff8c00;
    transform: translateY(-50%) scale(1.1);
}

.search-bar {
    width: 100%;
    padding: 12px 46px 12px 45px;
    font-size: 15px;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: inherit;
}

.search-bar:focus {
    border-color: #ff8c00;
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
    background: white;
}

body.dark-theme .search-bar {
    background: rgba(44, 44, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* ================================
   SEARCH FILTER (icon + dropdown panel)
   ================================ */
.search-filter-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-filter-btn:hover {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.search-filter-icon {
    width: 15px;
    height: 15px;
    filter: brightness(0) opacity(0.55);
    transition: filter 0.2s ease;
}

.search-filter-btn:hover .search-filter-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}

.search-filter-btn.active .search-filter-icon {
    filter: brightness(0) invert(1);
}

.search-filter-btn.active {
    background: #ff8c00;
    color: #ffffff;
}

body.dark-theme .search-filter-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #d1d1d6;
}

body.dark-theme .search-filter-icon {
    filter: brightness(0) invert(1) opacity(0.7);
}

body.dark-theme .search-filter-btn.active .search-filter-icon {
    filter: brightness(0) invert(1) opacity(1);
}

body.dark-theme .search-filter-btn:hover {
    background: rgba(255, 140, 0, 0.25);
    color: #ffa733;
}

.search-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px;
    box-sizing: border-box;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 16px;
}

.search-filter-panel.active {
    display: flex;
}

body.dark-theme .search-filter-panel {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-field label {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
}

.filter-field select,
.filter-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
    font-size: 14px;
    font-family: inherit;
    color: #1c1c1e;
    box-sizing: border-box;
    outline: none;
}

.filter-field select:focus,
.filter-field input:focus {
    border-color: #ff8c00;
}

body.dark-theme .filter-field select,
body.dark-theme .filter-field input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

body.dark-theme .filter-field label {
    color: #a1a1a6;
}

.filter-price-row {
    flex-direction: row;
    gap: 12px;
}

.filter-price-row > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.filter-clear-btn,
.filter-apply-btn {
    flex: 1;
    padding: 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease;
}

.filter-clear-btn {
    background: rgba(0, 0, 0, 0.06);
    border: none;
    color: #1c1c1e;
}

body.dark-theme .filter-clear-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.filter-apply-btn {
    background: #ff8c00;
    border: none;
    color: #ffffff;
}

.filter-clear-btn:hover,
.filter-apply-btn:hover {
    opacity: 0.85;
}

/* ================================
   SELL BUTTON (outline pill)
   ================================ */
.sell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    flex-shrink: 0;
    border-radius: 20px;
    background: transparent;
    border: 1.5px solid #ff8c00;
    color: #ff8c00;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sell-btn i {
    font-size: 16px;
}

.sell-btn:hover {
    transform: translateY(-1px);
}

.sell-btn:active {
    transform: scale(0.96);
}

body.dark-theme .sell-btn {
    border-color: #ff8c00;
    color: #ff9c33;
}

/* ================================
   PROMO BANNER
   ================================ */
.promo-banner {
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 20px;
    height: 190px;
    border-radius: 1px 1px 20px 20px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #ff8c00, #ff0050, #ff8c00);
    background-size: 300% 300%;
    animation: gradient-shift 6s ease infinite;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.banner-content h1 {
    font-size: 50px;
    margin: 0;
    font-weight: 800;
    color: white;
}

.banner-content p {
    font-size: 15px;
    margin: 5px 0 0 0;
    opacity: 0.9;
    color: white;
}

/* ================================
   MODAL OVERLAY
   ================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.modal-overlay.active {
    opacity: 1;
}

.glass-modal {
    width: 75%;
    height: 75%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.92);
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.22s ease;
}

.modal-overlay.active .glass-modal {
    transform: scale(1);
}

/* ================================
   ACCOUNT MODAL (Deactivate / Delete)
   ================================ */
.account-modal-card {
    width: 320px;
    max-width: 88vw;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    padding: 8px 0 28px;
    cursor: default;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .account-modal-card {
    background: #2c2c2e;
}

.modal-overlay.active .account-modal-card {
    transform: scale(1);
}

.account-row-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1c1c1e;
    cursor: pointer;
    text-align: center;
}

body.dark-theme .account-row-btn {
    color: #ffffff;
}

.account-row-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.dark-theme .account-row-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.account-modal-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 0 24px;
}

body.dark-theme .account-modal-divider {
    background: rgba(255, 255, 255, 0.1);
}

.account-delete-btn {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: 1.5px solid #ff3b30;
    color: #ff3b30;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 22px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.account-delete-btn:hover {
    background: rgba(255, 59, 48, 0.08);
}

.account-delete-btn:active {
    transform: scale(0.97);
}

.account-delete-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ================================
   DELETE ACCOUNT CONFIRMATION MODAL
   ================================ */
.delete-confirm-card {
    width: 360px;
    max-width: 88vw;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    padding: 32px 28px 28px;
    cursor: default;
    position: relative;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .delete-confirm-card {
    background: #2c2c2e;
}

.modal-overlay.active .delete-confirm-card {
    transform: scale(1);
}

.delete-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: #ff3b30;
}

.delete-confirm-title {
    font-family: "Outfit", sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1c1c1e;
}

body.dark-theme .delete-confirm-title {
    color: #ffffff;
}

.delete-confirm-subtitle {
    font-size: 14px;
    color: #86868b;
    line-height: 1.5;
    margin: 0 0 24px;
}

.delete-confirm-text-input {
    text-align: center;
    letter-spacing: 1px;
}

.delete-confirm-final-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1.5px solid #ff3b30;
    background: transparent;
    color: #ff3b30;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.delete-confirm-final-btn:hover:not(:disabled) {
    background: rgba(255, 59, 48, 0.08);
}

.delete-confirm-final-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.delete-confirm-final-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Delete-listing confirmation (reuses .delete-confirm-card look) */
.delete-listing-card .delete-confirm-subtitle {
    margin-bottom: 22px;
    word-break: break-word;
}

.delete-listing-card .delete-confirm-subtitle strong {
    color: #1c1c1e;
}

body.dark-theme .delete-listing-card .delete-confirm-subtitle strong {
    color: #ffffff;
}

.delete-listing-actions {
    display: flex;
    gap: 10px;
}

.delete-listing-cancel,
.delete-listing-confirm {
    flex: 1;
    padding: 13px;
    border-radius: 12px;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.delete-listing-cancel {
    border: none;
    background: #ececef;
    color: #1c1c1e;
}

body.dark-theme .delete-listing-cancel {
    background: #3a3a3c;
    color: #ffffff;
}

.delete-listing-confirm {
    border: none;
    background: #ff3b30;
    color: #ffffff;
}

.delete-listing-confirm:hover {
    background: #e0352b;
}

.delete-listing-cancel:active,
.delete-listing-confirm:active {
    transform: scale(0.98);
}

.modal-inner {
    text-align: center;
    color: #161823;
}

.empty-icon {
    font-size: 80px;
    color: #ff8c00;
    margin-bottom: 20px;
    opacity: 0.8;
}

.close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2100;
}

.close-modal i {
    color: #ffffff;
    font-size: 32px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.close-modal:hover {
    transform: scale(1.1);
    opacity: 0.7;
}

/* ================================
   TOAST NOTIFICATION
   ================================ */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 14px;
    background: #1c1c1e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: min(90vw, 420px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.error {
    background: #ff3b30;
}

body.dark-theme .toast {
    background: #2c2c2e;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-theme .toast.error {
    background: #ff453a;
}

/* ================================
   NOTIFICATIONS DRAWER
   ================================ */
#notifications-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: none !important;
}

.notifications-drawer {
    position: absolute;
    right: -400px;
    top: 16px;
    bottom: 16px;
    width: 380px;
    height: auto;
    /* Acrylic / frosted-glass look (Windows-style): translucent tint +
       heavy blur + saturation boost so the page behind glows through. */
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow:
        -15px 0 35px rgba(0, 0, 0, 0.1),
        -4px 0 10px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: right 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    cursor: auto;
    overflow: hidden;
}

.modal-overlay.active .notifications-drawer {
    right: 16px;
}

.notifications-content {
    flex: 1;
    overflow-y: auto;
}

body.dark-theme .notifications-drawer {
    background: rgba(32, 32, 36, 0.92);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header {
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-theme .modal-header {
    border-color: rgba(255, 255, 255, 0.05);
}

.modal-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    margin-right: 32px;
}

body.dark-theme h3 {
    color: white;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #86868b;
    padding: 10px;
    line-height: 1;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #ff3b30;
}

/* ================================
   PRODUCT GRID
   ================================ */
.product-grid {
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    padding: 20px 0 50px 0;
}

.product-card {
    background: transparent;
    overflow: visible;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e5e5e7;
    border-radius: 16px;
    display: block;
    transition: transform 0.2s ease;
}

.product-card:hover .product-image {
    transform: scale(1.02);
}

.product-name {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    margin: 10px 0 4px 0;
}

body.dark-theme .product-name {
    color: #ffffff;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    color: #86868b;
    margin: 0;
    /* Truncates instead of wrapping/pushing the button when the price
       is long — the fade mask below makes that truncation look
       intentional (the text recedes into the card) rather than an
       abrupt cut-off. */
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 calc(100% - 18px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 calc(100% - 18px),
        transparent 100%
    );
}

.product-description {
    font-size: 13px;
    color: #86868b;
    margin: 4px 0 8px 0;
    /* Keep the card's footprint fixed no matter how long the
       description is: cap it at ~2 lines and let it scroll
       internally instead of growing the card / spilling past it.
       The scrollbar itself is hidden so it reads as a quiet
       "more text below" affordance rather than a UI chrome element. */
    line-height: 18px;
    height: 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-description::-webkit-scrollbar {
    display: none;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.add-to-bag-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1c1c1e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin-top: 0 !important;
    height: auto !important;
    width: auto !important;
    flex-shrink: 0;
}

.add-to-bag-btn:hover {
    opacity: 0.75;
}

body.dark-theme .add-to-bag-btn {
    background: #ffffff;
    color: #1c1c1e;
}

/* ================================
   MAIN CONTENT VIEW
   ================================ */
.main-content-view {
    padding: 40px;
    min-height: 100vh;
    display: none;
    animation: fadeIn 0.4s ease;
}

/* Home and Explore(discover) sit right under the hero-banner/tabs-nav,
   which run edge-to-edge with no side padding -- keep their own listings
   flush with those same left/right edges instead of the shared 40px
   side padding every other view uses. Top padding is trimmed way down
   too (was the full 40px, then 14px) so the banner and the first row of
   listing images sit right up against each other with just a slim gap. */
#home-view,
#discover-view {
    padding-left: 0;
    padding-right: 0;
    padding-top: 6px;
}

/* .product-grid carries its own 20px top padding globally (used to give
   breathing room under a plain page header elsewhere) — that was stacking
   on top of the padding-top above, so the gap under the banner was really
   ~26px, not 6px. Zeroed out just for these two grids specifically. */
#home-view .product-grid,
#discover-view .product-grid {
    padding-top: 0;
}

#profile-view {
    height: auto;
    overflow: visible;
    transition: background 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-header h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 30px;
}

body.dark-theme .view-header h2 {
    color: #ffffff !important;
}

/* Wishlist page only: the "My wishlist" heading stays pinned to the top
   while the grid underneath scrolls past it, instead of scrolling away
   with the rest of the page like .view-header does elsewhere. Solid bg
   (matches the page background) so scrolled-up items are clipped cleanly
   behind it rather than showing through. Scoped to #pinned-view so the
   shared .view-header class used by other views is unaffected. */
#pinned-view.main-content-view {
    padding-top: 0;
}

#pinned-view .view-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -40px 0;
    padding: 40px 40px 16px;
    background: #f7f7f7;
}

#pinned-view .view-header h2 {
    margin-bottom: 0;
}

body.dark-theme #pinned-view .view-header {
    background: #1c1c1e;
}

.history-clear-btn {
    background: transparent;
    border: none;
    color: #ff5900;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 30px;
    padding: 6px 4px;
}

.history-clear-btn:hover {
    text-decoration: underline;
}

.empty-state {
    text-align: center;
    padding-top: 100px;
    color: #888;
}

.empty-state i {
    font-size: 50px;
    color: #ff8c00;
    margin-bottom: 15px;
    display: block;
}

/* ================================
   SETTINGS / "MORE" PAGE
   Precision rebuild matching design mock exactly:
   card bg #fafafa, border/divider #dbdbdb, radius 20px,
   bare black outline icons, dark chevrons, gray secondary values.
   ================================ */
.settings-group {
    background: #fafafa;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #dbdbdb;
    margin-bottom: 20px;
}

body.dark-theme .settings-group {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    transition: background 0.2s ease;
    border-bottom: 1px solid #dbdbdb;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

body.dark-theme .settings-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .settings-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.settings-label {
    padding-left: 16px;
    font-size: 13px;
    color: #86868b;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.row-left {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #1c1c1e;
}

body.dark-theme .row-left {
    color: #ffffff;
}

.row-title {
    font-size: 16px;
    font-weight: 500;
}

.studio-delete-listing-btn {
    background: none;
    border: none;
    color: #86868b;
    font-size: 15px;
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 8px;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.studio-delete-listing-btn:hover {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.08);
}

.studio-delete-listing-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.row-subtitle {
    display: block;
    font-size: 12.5px;
    color: #86868b;
    font-weight: 400;
    margin-top: 2px;
}

/* ================================
   STUDIO LISTING ROW — horizontal action bar per listing, similar to
   YouTube Studio's video management table: thumbnail, editable title,
   a row of compact stat pills, then delete — all in one line.
   ================================ */
.studio-listing-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.studio-listing-row:last-child {
    border-bottom: none;
}

body.dark-theme .studio-listing-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.studio-listing-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.studio-listing-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 0 1 260px;
}

.studio-listing-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.studio-listing-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-theme .studio-listing-title {
    color: #ffffff;
}

.studio-listing-title-input {
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #1c1c1e;
    border: 1px solid #ff8c00;
    border-radius: 6px;
    padding: 3px 8px;
    width: 100%;
    max-width: 220px;
    background: var(--card-bg, #fff);
}

body.dark-theme .studio-listing-title-input {
    color: #ffffff;
    background: var(--card-bg, #1c1c1e);
}

.studio-listing-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: none;
    color: #a0a0a5;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.studio-listing-edit-btn:hover {
    color: #ff8c00;
    background: rgba(255, 140, 0, 0.1);
}

.studio-listing-sub {
    font-size: 12.5px;
    color: #86868b;
    margin-top: 2px;
}

.studio-listing-stats {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
}

.studio-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6e6e73;
    cursor: default;
}

.studio-stat-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.studio-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #a0a0a5;
    white-space: nowrap;
}

body.dark-theme .studio-stat-label {
    color: #8a8a8e;
}

.studio-stat i {
    font-size: 13px;
    color: #a0a0a5;
}

body.dark-theme .studio-stat {
    color: #c7c7cc;
}

body.dark-theme .studio-stat i {
    color: #8a8a8e;
}

@media (max-width: 720px) {
    .studio-listing-row {
        flex-wrap: wrap;
    }
    .studio-listing-stats {
        order: 3;
        flex: 1 1 100%;
        padding: 8px 0 0 0;
        justify-content: space-around;
        gap: 16px;
    }
}

.arrow-icon {
    font-size: 14px;
    color: #1c1c1e;
}

body.dark-theme .arrow-icon {
    color: #ffffff;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:active {
    background-color: rgba(0, 0, 0, 0.06);
}

body.dark-theme .clickable-row:active {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ================================
   ICON BOXES — bare outline icons, no badge background
   ================================ */
.icon-box {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    color: #1c1c1e;
    font-size: 19px;
    background: none;
}

body.dark-theme .icon-box {
    color: #ffffff;
}

/* Currency's coin icon needs its own circular ring, per design */
.more-icon-circle {
    width: 24px;
    height: 24px;
    border: 1.3px solid #1c1c1e;
    border-radius: 50%;
    font-size: 11px;
}

body.dark-theme .more-icon-circle {
    border-color: #ffffff;
}

/* About row's bare question mark — slightly larger, no ring */
.more-icon-plain {
    font-size: 21px;
}

/* ================================
   "MORE" PAGE — TWO COLUMN GRID
   Right column card stretches to match the combined height of the
   two stacked left cards (Preferences + Notifications), exactly like
   the design mock.
   ================================ */
.more-grid {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}

.more-col {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.more-col-right {
    flex: 1;
    display: flex;
}

.more-card-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.more-card-header {
    text-align: center;
    padding: 24px 20px;
    font-size: 22px;
    font-weight: 500;
    color: #86868b;
    border-bottom: 1px solid #dbdbdb;
}

body.dark-theme .more-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.more-section-label {
    margin-top: 4px;
}

.more-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .more-grid {
        flex-direction: column;
    }
}

/* ================================
   THEME SEGMENTED CONTROL (Auto / Dark / Light)
   ================================ */
.theme-seg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border: 1.5px solid #dbdbdb;
    border-radius: 999px;
}

body.dark-theme .theme-seg {
    border-color: rgba(255, 255, 255, 0.15);
}

.theme-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #1c1c1e;
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1.3px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme .theme-opt {
    color: #ffffff;
}

.theme-opt,
.theme-opt.active,
body.dark-theme .theme-opt.active {
    border-color: transparent;
    background: none;
    box-shadow: none;
    outline: none;
}

.theme-opt.active {
    color: #ff8c00;
}

.theme-opt.active .theme-opt-badge {
    border-color: #ff8c00;
    color: #ff8c00;
}

.theme-opt-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.3px solid #1c1c1e;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

body.dark-theme .theme-opt-badge {
    border-color: #ffffff;
}

/* Dark option: the moon icon itself turns the brand orange when active,
   instead of relying on a sliding background capsule to show selection. */
.theme-opt[data-theme="dark"] .nav-icon {
    filter: brightness(0);
    transition: filter 0.2s ease;
}

.theme-opt[data-theme="dark"].active .nav-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}

body.dark-theme .theme-opt[data-theme="dark"] .nav-icon {
    filter: brightness(0) invert(1);
}

body.dark-theme .theme-opt[data-theme="dark"].active .nav-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}

.theme-opt[data-theme="auto"] {
    padding: 4px;
}

/* ================================
   BRAND ROW (About card)
   ================================ */
.more-brand {
    color: #ff470a;
    font-weight: 700;
}

.more-beta {
    color: #515151;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

body.dark-theme .more-beta {
    color: #c7c7cc;
}

/* ================================
   TOGGLE SWITCH
   ================================ */
/* ================================
      APPLE SWITCH
      ================================ */
.apple-switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 26px;
}

.apple-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.apple-switch input:checked + .slider {
    background: linear-gradient(135deg, #ff9500 0%, #ff5e00 100%);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 29px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* ================================
   AI BETA BUTTON
   ================================ */
.ai-beta-button {
    position: relative;
    width: 100%;
    padding: 2px;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    background: linear-gradient(135deg, #ff9500, #ffcc00);
    box-shadow: 0 0 5px rgba(255, 149, 0, 0.2);
    animation: breathing-glow 4s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.ai-button-content {
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1c1c1e);
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

@keyframes breathing-glow {
    0%,
    100% {
        box-shadow:
            0 0 8px rgba(255, 149, 0, 0.3),
            0 0 2px rgba(255, 204, 0, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 18px rgba(255, 149, 0, 0.5),
            0 0 10px rgba(255, 204, 0, 0.3);
        transform: scale(1.005);
    }
}

/* ================================
   LOGIN BUTTON
   ================================ */
.main-login-btn {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    margin-top: 25px;
    cursor: pointer;
    border: none;
    color: white;
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px rgba(255, 108, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-login-btn:hover {
    background: linear-gradient(90deg, #ff9c33 0%, #ff5a1f 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 16px rgba(255, 108, 0, 0.4) !important;
    transform: translateY(-1px);
}

.main-login-btn:active {
    transform: scale(0.97);
    background: linear-gradient(90deg, #e67300 0%, #ff470a 100%) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* ================================
   PROFILE VIEW INPUTS
   ================================ */
#profile-view input[type="email"],
#profile-view input[type="password"] {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 10px 20px rgba(0, 0, 0, 0.06) !important;
    color: #1c1c1e;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme #profile-view input[type="email"],
body.dark-theme #profile-view input[type="password"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: white;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

#profile-view input:focus {
    outline: none;
    border-color: rgba(255, 140, 0, 0.6) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(255, 140, 0, 0.1) !important;
}

/* ================================
   BUTTON LOADING
   ================================ */
.button-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.button-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.6s linear infinite;
}

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

/* ================================
   SHAKE ANIMATION
   ================================ */
.input-group.input-error-shake {
    animation: appleShake 0.4s ease-in-out !important;
}

.input-group.input-error-shake input {
    border-color: #ff3b30 !important;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.2);
}

@keyframes appleShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-10px);
    }
    40% {
        transform: translateX(10px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
}

/* ================================
   SOCIAL BUTTONS
   ================================ */
.social-auth-btn,
.google-btn,
.social-btn {
    flex: 1;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    border-radius: 14px !important;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1c1e !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body.dark-theme .social-auth-btn,
body.dark-theme .google-btn,
body.dark-theme .social-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.social-auth-btn:hover,
.google-btn:hover {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

body.dark-theme .social-auth-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.social-auth-btn:active {
    transform: scale(0.97);
}

/* ================================
   FEEDBACK MODAL
   ================================ */
.feedback-content {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

body.dark-theme .feedback-content {
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================
   OTP / FORGOT PASSWORD / RESET PASSWORD MODALS
   Small popup — background is dimmed but never blurred, and everything
   else is simply covered by the full-screen overlay underneath it.
   ================================ */
#otp-modal.modal-overlay,
#forgot-password-modal.modal-overlay,
#reset-password-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ================================
   ABOUT MODAL (desktop) — mirrors the copy/structure of the mobile
   About screen (m-pf-screen-about) so both surfaces stay in sync.
   ================================ */
#about-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.about-modal-content {
    position: relative;
    text-align: left;
    background: #ffffff;
    max-width: 420px;
}

body.dark-theme .about-modal-content {
    background: #1c1c1e;
}

.about-modal-content .feedback-header {
    text-align: left;
    margin-bottom: 16px;
}

.about-modal-content .feedback-header h1 {
    font-size: 20px;
}

.about-modal-content .m-pf-about-p {
    font-size: 14px;
    line-height: 1.6;
    color: #4c4c4e;
    margin: 0 0 14px;
}

body.dark-theme .about-modal-content .m-pf-about-p {
    color: #c7c7cc;
}

.about-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #1c1c1e;
}

body.dark-theme .about-help-row {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
}

.about-help-row svg {
    flex-shrink: 0;
}

body.dark-theme .about-help-row svg path,
body.dark-theme .about-help-row svg polyline,
body.dark-theme .about-help-row svg line {
    stroke: #aaaaae;
}

.about-copyright {
    text-align: center;
    font-size: 11px;
    color: #86868b;
    margin-top: 22px;
}

body.dark-theme .about-copyright {
    color: #8a8a8e;
}

.otp-content {
    position: relative;
    background: #ffffff;
    text-align: center;
}

body.dark-theme .otp-content {
    background: #1c1c1e;
}

.otp-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-close-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

body.dark-theme .otp-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.dark-theme .otp-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.otp-content .feedback-header p {
    color: #6e6e73;
    font-size: 14px;
    margin-top: 6px;
}

body.dark-theme .otp-content .feedback-header p {
    color: #a1a1a6;
}

.otp-content .input-group {
    text-align: left;
}

.otp-code-input {
    letter-spacing: 8px;
    font-weight: 700;
    text-align: center;
}

.otp-footer-row {
    margin-top: 18px;
    font-size: 14px;
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.dark-theme .otp-footer-row {
    color: #a1a1a6;
}

.otp-resend-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.otp-resend-btn:disabled {
    color: #a1a1a6;
    cursor: not-allowed;
    text-decoration: none;
}

.feedback-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.feedback-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-chip.selected {
    background: #ff8c00;
    color: white;
    border-color: #ff8c00;
}

textarea {
    width: 90%;
    height: 80px;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.3);
    resize: none;
    font-family: inherit;
    margin-bottom: 20px;
}

/* ================================
   PROFILE PAGE
   ================================ */
.pf-banner {
    position: relative;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    padding: 26px 30px 22px;
    box-sizing: border-box;
    background: linear-gradient(115deg, #cdf6e8 0%, #eafcf6 42%, #ffffff 78%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    margin-bottom: 34px;
}

.pf-banner-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    max-width: 320px;
    height: 100%;
    pointer-events: none;
}

.pf-banner-deco svg {
    width: 100%;
    height: 100%;
}

.pf-banner .profile-avatar-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin-top: 0;
}

.pf-banner .avatar-circle {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.pf-banner .profile-name-group h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #1c1c1e;
    line-height: 1.3;
}

.pf-banner .profile-name-group h2 strong {
    font-weight: 700;
}

.pf-handle {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    padding-left: 120px;
    font-size: 17px;
    font-weight: 700;
    color: #4c4c4e;
}

body.dark-theme .pf-banner .profile-name-group h2 {
    color: #1c1c1e;
}

body.dark-theme .pf-handle {
    color: #4c4c4e;
}

.pf-body {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 860px) {
    .pf-body {
        grid-template-columns: 1fr;
    }
    .pf-handle {
        padding-left: 0;
        margin-top: 10px;
    }
}

.pf-stats-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 34px;
}

.pf-stat {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.pf-stat i {
    font-size: 20px;
    color: #1c1c1e;
}

body.dark-theme .pf-stat i {
    color: #f5f5f5;
}

.pf-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1e;
}

body.dark-theme .pf-stat-label {
    color: #f5f5f5;
}

.pf-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1c1c1e;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.dark-theme .pf-stat-value {
    color: #f5f5f5;
}

.pf-orders-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: #1c1c1e;
}

body.dark-theme .pf-orders-title {
    color: #f5f5f5;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.pf-orders-section {
    margin-top: 18px;
}

.pf-orders-subtitle {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #1c1c1e;
}

body.dark-theme .pf-orders-subtitle {
    color: #f5f5f5;
}

.pf-order-list {
    display: flex;
    flex-direction: column;
}

.pf-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: #1c1c1e;
}

body.dark-theme .pf-order-row {
    color: #f5f5f5;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pf-order-row:last-child {
    border-bottom: none;
}

.pf-order-status {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #1c1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 auto;
}

body.dark-theme .pf-order-status {
    border-color: #f5f5f5;
}

.pf-order-status.delivered {
    color: #1c1c1e;
}

body.dark-theme .pf-order-status.delivered {
    color: #f5f5f5;
}

.pf-order-status.pending {
    color: #8e8e93;
    border-color: #8e8e93;
}

.pf-order-empty {
    text-align: center;
    font-size: 13px;
    color: #8e8e93;
    margin: 0;
    padding: 8px 0 4px;
}

.pf-info-card {
    background: #e6e6e8;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 26px;
}

body.dark-theme .pf-info-card {
    background: #2c2c2e;
}

.pf-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
}

.pf-info-label {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
}

body.dark-theme .pf-info-label {
    color: #f5f5f5;
}

.pf-info-value {
    font-size: 14px;
    color: #6b6b6f;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-info-value-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pf-info-value-group .pf-info-value {
    min-width: 0;
}

.pf-verify-email-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: #ff8c00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.pf-verify-email-btn:hover {
    background: #e67e00;
}

.pf-verify-email-btn:active {
    transform: scale(0.96);
}

.pf-verify-email-btn:disabled {
    background: #c7c7cc;
    cursor: default;
}

body.dark-theme .pf-info-value {
    color: #aeaeb2;
}

.pf-info-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}

.pf-info-editable:hover {
    color: #ff5900;
}

.pf-password-block {
    margin-bottom: 28px;
}

.pf-password-block h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1c1c1e;
}

body.dark-theme .pf-password-block h4 {
    color: #f5f5f5;
}

.pf-password-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: #f0f0f1;
    border: none;
    border-radius: 27px;
    padding: 8px;
    cursor: pointer;
    text-align: left;
}

body.dark-theme .pf-password-trigger {
    background: #2c2c2e;
}

.pf-lock-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1c1c1e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
}

.pf-password-dots {
    font-size: 20px;
    letter-spacing: 3px;
    color: #8e8e93;
}

.pf-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 1.5px solid #1c1c1e;
    border-radius: 27px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

body.dark-theme .pf-logout-btn {
    border-color: #f5f5f5;
    color: #f5f5f5;
}

.pf-logout-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .pf-logout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pf-logout-btn:active {
    transform: scale(0.97);
}

.avatar-circle {
    width: 100px;
    height: 100px;
    background: var(--card-bg, #fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.avatar-circle .user-main-icon {
    font-size: 40px;
    color: #ff8c00;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.avatar-circle .camera-hover-icon {
    position: absolute;
    font-size: 28px;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.avatar-circle:hover {
    background: rgba(0, 0, 0, 0.4);
}

.avatar-circle:hover .user-main-icon {
    opacity: 0;
    transform: scale(0.8);
}

.avatar-circle:hover .camera-hover-icon {
    opacity: 1;
    transform: translateY(0);
}

body.dark-theme .avatar-circle {
    background: #1c1c1e;
}

body.dark-theme .profile-name-group h2 {
    color: #ffffff;
}

body.dark-theme .profile-name-group p {
    color: #a1a1a6;
}

/* ================================
   SECONDARY BUTTON
   ================================ */
.secondary-btn {
    background: transparent;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

.alt-separator {
    margin: 20px 0 !important;
    opacity: 0.6;
}

/* ================================
   BENTO CARDS
   ================================ */
.bento-card {
    padding: 25px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #fff;
    transition: all 0.3s ease;
}

body.dark-theme .bento-card {
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.bento-card.wide {
    grid-column: span 2;
}

.bento-card i {
    font-size: 24px;
    color: #ff8c00;
    margin-bottom: 15px;
}

.bento-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}
.bento-card p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

body.dark-theme h2,
body.dark-theme h3 {
    color: #f2f2f7;
}

.bento-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================================
   CART MODAL
   ================================ */
.cart-modal-box {
    width: 75%;
    height: 75%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.22s ease;
}

.modal-overlay.active .cart-modal-box {
    transform: scale(1);
}

body.dark-theme .cart-modal-box {
    background: rgba(44, 44, 46, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.cart-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    position: relative;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
}

body.dark-theme .cart-modal-header {
    color: #ffffff;
}

.cart-close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1c1c1e;
    line-height: 1;
    padding: 4px 8px;
}

body.dark-theme .cart-close-btn {
    color: #ffffff;
}

.cart-close-btn:hover {
    opacity: 0.6;
}

.cart-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 16px;
}

.cart-items-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 12px;
}

body.dark-theme .cart-item-row {
    background: rgba(255, 255, 255, 0.08);
}

.cart-item-img {
    width: 130px;
    height: 130px;
    border-radius: 12px;
    object-fit: cover;
    background: #e5e5e7;
    flex-shrink: 0;
}

/* ================================
   CART QTY CONTROLS
   ================================ */
.cart-qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: #1c1c1e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.2s ease;
}

.qty-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.qty-btn:active {
    transform: scale(0.9);
}

body.dark-theme .qty-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

body.dark-theme .qty-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.qty-number {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    min-width: 16px;
    text-align: center;
}

body.dark-theme .qty-number {
    color: #ffffff;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    margin-bottom: 6px;
}

body.dark-theme .cart-item-name {
    color: #ffffff;
}

.cart-item-price {
    font-size: 14px;
    color: #86868b;
    background: rgba(0, 0, 0, 0.06);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
}

.cart-request-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.3);
    color: #ff8c00;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.cart-request-btn:hover {
    background: rgba(255, 140, 0, 0.18);
}

.cart-request-btn:active {
    transform: scale(0.96);
}

.cart-request-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.dark-theme .cart-request-btn {
    background: rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.35);
    color: #ffa733;
}

.qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qty-btn:disabled:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .qty-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cart-remove-btn {
    background: none;
    border: none;
    color: #ff3b30;
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
}

.cart-divider {
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 40px;
    flex-shrink: 0;
    align-self: stretch;
}

body.dark-theme .cart-divider {
    background: rgba(255, 255, 255, 0.08);
}

.cart-summary {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cart-count {
    font-size: 18px;
    font-weight: 700;
    color: #1c1c1e;
}

body.dark-theme .cart-count {
    color: #ffffff;
}

.cart-total {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
}

body.dark-theme .cart-total {
    color: #ffffff;
}

.cart-checkout-btn {
    background: #1c1c1e;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    width: 100%;
}

body.dark-theme .cart-checkout-btn {
    background: #ffffff;
    color: #1c1c1e;
}

.cart-checkout-btn:hover {
    opacity: 0.8;
}

.cart-checkout-btn:disabled,
.cart-checkout-btn.disabled {
    background: #d1d1d6;
    color: #8e8e93;
    cursor: not-allowed;
    opacity: 1;
}

body.dark-theme .cart-checkout-btn:disabled,
body.dark-theme .cart-checkout-btn.disabled {
    background: #3a3a3c;
    color: #6e6e73;
}

/* ================================
   SHIMMER / SKELETON
   ================================ */
.skeleton-box {
    position: relative;
    overflow: hidden;
    background: #e5e5e7;
}

.skeleton-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: shimmer-slide 1.2s infinite;
}

@keyframes shimmer-slide {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}

body.dark-theme .skeleton-box {
    background: #3a3a3c;
}

body.dark-theme .skeleton-box::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

/* ================================
   CART EMPTY STATE
   ================================ */
.cart-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #86868b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cart-empty-state i {
    font-size: 60px;
    color: #ff8c00;
    margin-bottom: 16px;
    display: block;
}

.cart-empty-state p {
    font-size: 18px;
    font-weight: 600;
    color: #1c1c1e;
    margin: 0 0 6px 0;
}

body.dark-theme .cart-empty-state p {
    color: #ffffff;
}

.cart-empty-state small {
    display: block;
    font-size: 14px;
    color: #86868b;
    margin-top: 4px;
}

/* ================================
   LANGUAGE DROPDOWN
   ================================ */
#language-dropdown {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    animation: dropdownPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 4px 16px;
}

body.dark-theme #language-dropdown {
    background: rgba(44, 44, 46, 0.97);
    border-color: rgba(255, 255, 255, 0.08);
}

.language-item {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #1c1c1e;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .language-item {
    color: #ffffff;
}
body.dark-theme .language-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.currency-dropdown-panel {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 4px 16px;
    animation: dropdownPop 0.2s;
    max-height: 60vh;
    overflow-y: auto;
    max-width: 100%;
    box-sizing: border-box;
}

body.dark-theme .currency-dropdown-panel {
    background: rgba(30, 30, 32, 0.97);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.currency-item-code {
    font-weight: 700;
}

.currency-item-name {
    font-size: 12px;
    color: #86868b;
}

.language-item.active-language {
    color: #ff8c00;
    font-weight: 700;
}

.language-item.active-language::after {
    content: "✓";
    margin-left: auto;
    color: #ff8c00;
}

.lang-indicator {
    font-size: 15px;
    color: #4d4d4d;
    margin-left: 8px;
    font-weight: 400;
}

body.dark-theme .lang-indicator {
    color: #a1a1a6;
}

/* ================================
   NOTIFICATION DOT & ITEMS
   ================================ */
.noti-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -2px;
    border: 1.5px solid white;
    z-index: 10;
}

body.dark-theme .noti-dot {
    border-color: #1c1c1e;
}

.noti-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.3s ease;
}

body.dark-theme .noti-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.noti-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.noti-item-icon i {
    font-size: 18px;
    color: #ff8c00;
}

.noti-item-content {
    flex: 1;
}

.noti-item-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #1c1c1e;
    margin: 0;
}

body.dark-theme .noti-item-content p {
    color: #ffffff;
}

.noti-dismiss-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #86868b;
    font-size: 16px;
    padding: 4px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

/* ================================
   FOLLOWING LIST (profile -> "Following" stat)
   Same row skeleton as .noti-item, but with a real seller avatar
   instead of an icon, and an unfollow action instead of dismiss.
   ================================ */
.following-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
    animation: fadeIn 0.3s ease;
}

.following-row:hover {
    background: rgba(255, 140, 0, 0.06);
}

body.dark-theme .following-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .following-row:hover {
    background: rgba(255, 140, 0, 0.1);
}

.following-row-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #ccc;
    flex-shrink: 0;
}

.following-row-content {
    flex: 1;
    min-width: 0;
}

.following-row-name {
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1e;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-theme .following-row-name {
    color: #ffffff;
}

.following-row-handle {
    font-size: 13px;
    color: #86868b;
    margin: 0;
}

.following-row-unfollow-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.following-row-unfollow-btn:hover {
    background: #ff3b30;
    border-color: #ff3b30;
    color: #ffffff;
}

body.dark-theme .following-row-unfollow-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.noti-dismiss-btn:hover {
    color: #ff3b30;
}

.noti-approve-btn {
    display: inline-block;
    margin-top: 8px;
    background: linear-gradient(135deg, #ff4500, #ff8c00);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.noti-approve-btn:hover {
    opacity: 0.9;
}

.noti-approve-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.noti-item-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.noti-item-clickable:hover {
    background: rgba(255, 140, 0, 0.06);
}

body.dark-theme .noti-item-clickable:hover {
    background: rgba(255, 140, 0, 0.1);
}

/* ================================
   LIVE NOTIFICATION POPUP
   A single reusable "toast" that slides in from the top-right the
   instant a realtime notification arrives while the app is open —
   the in-app equivalent of a push notification (YouTube-bell style).
   Distinct from .toast (which is bottom-center, for short-lived
   confirmations like "Added to wishlist!").
   ================================ */
.live-noti-popup {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(360px, calc(100vw - 48px));
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 16px 16px 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    z-index: 6000;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    cursor: pointer;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.live-noti-popup.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

body.dark-theme .live-noti-popup {
    background: #2c2c2e;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.live-noti-popup-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.live-noti-popup-icon i {
    font-size: 16px;
    color: #ff8c00;
}

.live-noti-popup-body {
    flex: 1;
    min-width: 0;
}

.live-noti-popup-title {
    margin: 0 0 2px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ff8c00;
}

.live-noti-popup-msg {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1c1c1e;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.dark-theme .live-noti-popup-msg {
    color: #ffffff;
}

.live-noti-popup-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #86868b;
    font-size: 14px;
    padding: 4px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.live-noti-popup-close:hover {
    color: #ff3b30;
}

@media (max-width: 640px) {
    .live-noti-popup {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ================================
   CUSTOM SVG NAV ICONS
   ================================ */
.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Sized to match .nav-icon exactly so wrapping it changes nothing about
   the existing icon/text gap — it just gives the dot a home to anchor to. */
.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Sidebar icons only, a bit larger than the shared 22px .nav-icon default
   used elsewhere (e.g. the More page's theme-toggle icons, which must stay
   at 22px). */
.sidebar .nav-icon,
.sidebar .nav-icon-wrap {
    width: 26px;
    height: 26px;
}

.nav-icon-fill {
    display: none;
}

.sidebar a.active .nav-icon-outline {
    display: none;
}

.sidebar a.active .nav-icon-fill {
    display: block;
}

/* ================================
   STUDIO LINK — REVEAL STATE
   ================================ */
#studio-link {
    overflow: hidden;
}

/* Fully hidden / collapsed — before first login ever happens */
.studio-nav-hidden {
    display: none !important;
}

/* Present but not yet animated in (e.g. returning users after the
   one-time reveal has already played) */
.studio-nav-ready {
    display: flex;
}

/* One-time reveal: sidebar grows to make room, link pops + fades in.
   Short and pulsy on purpose — this only ever plays once per user. */
.studio-reveal-pop {
    display: flex;
    animation: studioPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes studioPopIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-4px);
    }
    60% {
        opacity: 1;
        transform: scale(1.06) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Brief orange glow so the reveal reads as a small reward, then settles
   back to the normal resting nav-link style automatically. */
.studio-reveal-pop {
    background-color: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
    animation:
        studioPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        studioGlowSettle 0.9s ease-out 0.15s both;
}

@keyframes studioGlowSettle {
    0% {
        background-color: rgba(255, 140, 0, 0.28);
    }
    100% {
        background-color: transparent;
    }
}

/* Sidebar grows in height to make room for the new Studio link.
   Uses max-height so it animates smoothly without knowing exact px. */
.glass-nav-container.studio-growing {
    animation: navGrow 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes navGrow {
    0% {
        transform: scaleY(0.97);
    }
    100% {
        transform: scaleY(1);
    }
}

/* ================================
   SVG ICON THEMING
   ================================ */

/* Default (light theme, inactive) - black */
.nav-icon {
    filter: brightness(0);
}

/* Active - orange */
.sidebar a.active .nav-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}

/* Dark theme inactive - white */
body.dark-theme .nav-icon {
    filter: brightness(0) invert(1);
}

/* Dark theme active - still orange */
body.dark-theme .sidebar a.active .nav-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}
#discover-view,
#pinned-view,
#profile-view,
#payments-view,
#signup-view {
    min-height: unset;
    height: auto;
    overflow: hidden;
}
#guest-wrapper {
    overflow: hidden;
}
/* ============ SCROLLBAR HIDE ============ */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
}

/* ============ WISHLIST HEART OVERLAY ============ */
.product-img-wrap {
    position: relative;
    overflow: hidden;
}
.wishlist-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}
.product-card:hover .wishlist-heart,
.wishlist-heart.active {
    opacity: 1;
}
.wishlist-heart:active {
    transform: scale(0.86);
}
.wishlist-heart i {
    font-size: 19px;
    color: #ffffff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    transition: all 0.2s ease;
}
.wishlist-heart:hover i,
.wishlist-heart.active i {
    background: linear-gradient(135deg, #ff4500, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============ CART MODAL — BEHIND NAV ============ */
#recent-modal {
    z-index: 1800 !important;
}
#notifications-modal {
    z-index: 1800 !important;
}

/* ============ EDIT PROFILE BOTTOM SHEET ============ */
.edit-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.edit-profile-modal.open {
    display: flex;
}
.edit-profile-sheet {
    background: #fff;
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 640px;
    padding: 24px 20px 36px;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
}
body.dark-theme .edit-profile-sheet {
    background: #1c1c1e;
}
.ep-handle {
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 4px;
    margin: 0 auto 20px;
}
body.dark-theme .ep-handle {
    background: #3a3a3c;
}
.edit-profile-sheet h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}
.ep-banner-zone {
    width: 100%;
    height: 80px;
    border: 2px dashed #ff8c00;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #ff8c00;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.ep-field {
    margin-bottom: 14px;
}
.ep-field label {
    font-size: 11px;
    font-weight: 700;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}
.ep-field input,
.ep-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid #e0e0e0;
    font-size: 15px;
    box-sizing: border-box;
    background: #f2f2f7;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s;
}
.ep-field input:focus,
.ep-field textarea:focus {
    border-color: #ff8c00;
}
body.dark-theme .ep-field input,
body.dark-theme .ep-field textarea {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #fff;
}
.ep-field textarea {
    resize: none;
    height: 80px;
    line-height: 1.5;
}
.btn-ep-save {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    border: none;
    background: #ff8c00;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    font-family: inherit;
}
.btn-ep-cancel {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: #ff3b30;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin-top: 4px;
}
/* ================================
   PRODUCT DETAIL VIEW — EXACT LUNACY DESIGN
   ================================ */

#product-detail-view.main-content-view {
    padding: 70px 40px 40px 40px;
}

body.dark-theme #product-detail-view.main-content-view {
    color: #ffffff;
}

/* Two-column layout: image + thumbnails on the left, product info
   (name → seller card) in its own left-aligned column beside it.
   "You may also like" wraps to a new row and spans the full width. */
.pd-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 60px;
}

.pd-left {
    flex: 0 0 auto;
}

.pd-right {
    flex: 1 1 380px;
    min-width: 300px;
    text-align: left;
}

.pd-similar {
    flex: 1 1 100%;
    width: 100%;
}

/* Product Image */
.pd-hero {
    width: 508px;
    height: 471px;
    border-radius: 30px;
    border: 1px solid #808080;
    background: #f5f5f5;
    overflow: hidden;
}

.pd-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnails Container */
.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.pd-thumb {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border-radius: 10px;
    border: 1px solid #808080;
    background: #eeeeee;
    cursor: pointer;
    overflow: hidden;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb.active {
    border: 2px solid #ff5900;
}

/* Product Info Section */
.pd-info {
    margin-top: 0;
    text-align: left;
}

.pd-info h1 {
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    color: #000000;
    margin: 0 0 16px 0;
}

body.dark-theme .pd-info h1 {
    color: #ffffff;
}

/* Price Badge */
.pd-price-badge {
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 31px;
    color: #000000;
    margin-bottom: 24px;
}

body.dark-theme .pd-price-badge {
    color: #ffffff;
}

/* Description Section */
.pd-description-box {
    width: 453px;
    height: 89px;
    border-radius: 10px;
    border: 1px solid #808080;
    padding: 16px;
    margin-bottom: 24px;
}

body.dark-theme .pd-description-box {
    border-color: #48484a;
    background: rgba(255, 255, 255, 0.05);
}

.pd-desc-label {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #000000;
    margin-bottom: 8px;
}

body.dark-theme .pd-desc-label {
    color: #ffffff;
}

.pd-description-box p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #000000;
    margin: 0;
}

body.dark-theme .pd-description-box p {
    color: #aeaeb2;
}

/* Product detail page only: the "Description" label sits outside as
   plain text, and the actual description content lives inside the
   outline below it — a little taller than the original box (110px vs
   89px) so there's more room, with a quiet internal scroll for
   anything that still doesn't fit, so it never spills past the box. */
.pd-desc-outline {
    width: 100%;
    box-sizing: border-box;
    height: 110px;
    border-radius: 10px;
    border: 1px solid #808080;
    padding: 16px;
    margin-bottom: 24px;
}

body.dark-theme .pd-desc-outline {
    border-color: #48484a;
    background: rgba(255, 255, 255, 0.05);
}

.pd-description-text {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #000000;
    margin: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pd-description-text::-webkit-scrollbar {
    display: none;
}

body.dark-theme .pd-description-text {
    color: #aeaeb2;
}

/* Order Request Button */
.pd-btn-order {
    width: 275px;
    height: 48px;
    border-radius: 27px;
    background: #fafafa;
    border: 1px solid rgba(74, 74, 74, 0.38);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.22);
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.dark-theme .pd-btn-order {
    background: #2c2c2e;
    border-color: #48484a;
    color: #ffffff;
}

.pd-btn-order:hover {
    opacity: 0.9;
}

.pd-btn-order:disabled {
    background: #ececec;
    border-color: rgba(0, 0, 0, 0.12);
    color: #a1a1a6;
    cursor: not-allowed;
    opacity: 1;
}

body.dark-theme .pd-btn-order:disabled {
    background: #3a3a3c;
    border-color: #48484a;
    color: #6e6e73;
}

.pd-btn-order:disabled i {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

.pd-btn-order i {
    font-size: 20px;
    background: linear-gradient(90deg, #ff9696 0%, #ff5900 96%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Seller-own-listing read-only stats — shown in place of the order
   request / add-to-cart / wishlist buttons when the logged-in viewer
   is the product's own seller. Mirrors the pill language of
   .pd-btn-order / .pd-btn-primary above rather than introducing a new
   visual style. */
.pd-owner-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.pd-owner-stat-box {
    flex: 1;
    height: 64px;
    border-radius: 20px;
    background: #fafafa;
    border: 1px solid rgba(74, 74, 74, 0.38);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

body.dark-theme .pd-owner-stat-box {
    background: #2c2c2e;
    border-color: #48484a;
}

.pd-owner-stat-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6e6e73;
}

body.dark-theme .pd-owner-stat-label {
    color: #aeaeb2;
}

.pd-owner-stat-value {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

body.dark-theme .pd-owner-stat-value {
    color: #ffffff;
}

/* Action Buttons Container */
.pd-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* Add to Cart Button */
.pd-btn-primary {
    width: 201px;
    height: 41px;
    border-radius: 27px;
    background: #ff5900;
    border: 1px solid #ff5900;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pd-btn-primary:hover {
    background: #e04e00;
}

.pd-btn-primary:active {
    transform: scale(0.98);
}

/* Wishlist Button */
.pd-btn-wishlist {
    width: 201px;
    height: 41px;
    border-radius: 27px;
    background: transparent;
    border: 1px solid #ff2f00;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
}

body.dark-theme .pd-btn-wishlist {
    color: #ffffff;
    border-color: #ff5900;
}

.pd-btn-wishlist:hover {
    background: rgba(255, 89, 0, 0.05);
}

/* Seller Card */
.pd-seller-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    cursor: pointer;
}

.pd-seller-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #a3a3a3;
    object-fit: cover;
}

.pd-seller-info {
    flex: 1;
}

.pd-seller-name {
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    color: #000000;
    margin: 0;
}

body.dark-theme .pd-seller-name {
    color: #ffffff;
}

.pd-seller-handle {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #5e5e5e;
    margin: 4px 0 0 0;
}

body.dark-theme .pd-seller-handle {
    color: #aeaeb2;
}

.pd-seller-distance {
    width: 147px;
    height: 73px;
    border-radius: 13px;
    background: rgba(211, 211, 211, 0.34);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pd-distance-number {
    font-family: "Inter", sans-serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 53px;
    color: #616161;
    margin: 0;
}

.pd-distance-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    color: #616161;
    margin: 0;
}

.pd-distance-unit {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: #595959;
    margin: 0;
}

/* You May Also Like Section */
.pd-similar {
    margin-top: 60px;
    border-top: 1px solid #bdbdbd;
    padding-top: 32px;
}

body.dark-theme .pd-similar {
    border-top-color: #48484a;
}

.pd-similar h3 {
    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 22px;
    color: #8c8c8c;
    margin: 0 0 24px 0;
}

body.dark-theme .pd-similar h3 {
    color: #aeaeb2;
}

.pd-similar-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
}

.pd-similar-item {
    flex: 0 0 auto;
    width: 191px;
    cursor: pointer;
}

.pd-similar-img {
    width: 191px;
    height: 146px;
    border-radius: 31px;
    background: #eeeeee;
    border: 1px solid rgba(128, 128, 128, 0.22);
    box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.09);
    object-fit: cover;
    margin-bottom: 12px;
}

body.dark-theme .pd-similar-img {
    background: #3a3a3c;
    border-color: #48484a;
}

.pd-similar-name {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    color: #6b6b6b;
    margin: 0 0 6px 0;
}

body.dark-theme .pd-similar-name {
    color: #aeaeb2;
}

.pd-similar-price {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: #6b6b6b;
    margin: 0;
}

body.dark-theme .pd-similar-price {
    color: #aeaeb2;
}

/* ================================
   SELLER MARKETPLACE VIEW
   ================================ */

#seller-marketplace-view.main-content-view {
    padding: 40px;
}

body.dark-theme #seller-marketplace-view.main-content-view {
    color: #ffffff;
}

.sm-banner {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #000000 0%, #808080 100%);
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    margin-bottom: 0;
}

.sm-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 4px;
    margin-bottom: 28px;
}

.sm-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #ffffff;
    object-fit: cover;
    margin-top: -54px;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    flex: 0 0 auto;
}

body.dark-theme .sm-avatar {
    background: #2c2c2e;
    border-color: #1c1c1e;
}

.sm-header-main {
    flex: 1;
    min-width: 0;
    padding-top: 10px;
}

.sm-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
}

.sm-stats {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #5c5c5c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-stats strong {
    color: #1c1c1e;
    font-weight: 700;
}

body.dark-theme .sm-stats {
    color: #aeaeb2;
}

body.dark-theme .sm-stats strong {
    color: #ffffff;
}

.sm-dot {
    color: #bdbdbd;
}

.sm-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.sm-follow-btn {
    height: 36px;
    padding: 0 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1.5px solid #ff5900;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ff5900;
    cursor: pointer;
}

body.dark-theme .sm-follow-btn {
    background: #2c2c2e;
}

.sm-follow-btn:hover {
    background: rgba(255, 89, 0, 0.06);
}

.sm-follow-btn.is-following {
    background: #ff5900;
    color: #ffffff;
}

body.dark-theme .sm-follow-btn.is-following {
    background: #ff5900;
    color: #ffffff;
}

.sm-follow-btn[hidden] {
    display: none;
}

.sm-more-wrap {
    position: relative;
}

.sm-more-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    color: #1c1c1e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-theme .sm-more-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.sm-more-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.sm-more-menu {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: var(--card-bg, #ffffff);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 20;
    min-width: 160px;
}

.sm-more-menu.active {
    display: block;
}

.sm-more-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 12px 16px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--text-color, #1c1c1e);
    cursor: pointer;
}

.sm-more-menu button:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .sm-more-menu button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sm-header-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-top: 10px;
}

.sm-identity {
    flex: 0 0 auto;
    min-width: 0;
}

.sm-identity h2 {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    color: #1c1c1e;
    margin: 0 0 4px 0;
}

body.dark-theme .sm-identity h2 {
    color: #f5f5f7;
}

.sm-handle {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #757575;
    margin: 0;
}

body.dark-theme .sm-handle {
    color: #aeaeb2;
}

.sm-bio {
    flex: 1;
    min-width: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #5c5c5c;
    margin: 0;
}

body.dark-theme .sm-bio {
    color: #aeaeb2;
}

.sm-tabs {
    border-bottom: 1px solid #bdbdbd;
    margin-bottom: 32px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

body.dark-theme .sm-tabs {
    border-bottom-color: #48484a;
}

.sm-tab {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    color: #5c5c5c;
    background: transparent;
    border: none;
    padding: 16px 6px;
    cursor: pointer;
}

body.dark-theme .sm-tab {
    color: #aeaeb2;
}

.sm-tab.active {
    border-bottom: 2px solid #ff5900;
    color: #000000;
}

body.dark-theme .sm-tab.active {
    color: #ffffff;
}

.sm-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .sm-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm-header-bottom {
        flex-direction: column;
        gap: 10px;
    }
}

.sm-product-card {
    cursor: pointer;
}

.sm-product-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background: linear-gradient(135deg, #1c1c1e 0%, #808080 100%);
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
}

body.dark-theme .sm-product-img {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
}

.sm-product-price {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: #1c1c1e;
    margin: 0 0 4px 0;
}

body.dark-theme .sm-product-price {
    color: #f5f5f7;
}

.sm-product-name {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    color: #6b6b6b;
    margin: 0;
}

body.dark-theme .sm-product-name {
    color: #aeaeb2;
}
/* ================================
   AUTH CARD (LOGIN / SIGNUP)
   ================================ */
.auth-card {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 24px;
    box-sizing: border-box;
}

.auth-card-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    color: var(--text-color, #1c1c1e);
}

.auth-subtitle {
    margin: 6px 0 0 0;
    font-size: 17px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: var(--text-color, #1c1c1e);
}

.auth-form-container {
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
}

.auth-forgot-row {
    text-align: right;
    margin: -8px 0 20px 0;
}

.auth-link {
    color: #007aff !important;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
}

.auth-divider span {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.25);
}

body.dark-theme .auth-divider span {
    background: rgba(255, 255, 255, 0.25);
}

.auth-divider p {
    margin: 0;
    font-size: 14px;
    color: #86868b;
    font-family: "Outfit", sans-serif;
}

.auth-social-row {
    display: flex;
    gap: 14px;
}

.auth-footer-row {
    text-align: center;
    margin-top: 22px;
}

.auth-footer-row p {
    font-size: 13px;
    color: #86868b;
    margin: 0;
    line-height: 1.5;
    font-family: "Outfit", sans-serif;
}

.auth-footer-row a {
    color: #007aff;
    text-decoration: underline;
    font-weight: 500;
}

.auth-switch-row {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #86868b;
    font-family: "Outfit", sans-serif;
}

.auth-switch-row a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.auth-switch-row a:hover {
    text-decoration: underline;
}

/* ================================
   STUDIO (SELLER DASHBOARD)
   ================================ */
.studio-dashboard {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-family:
        "Outfit",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    color: var(--text-color, #1c1c1e);
    font-size: 16px;
}

.studio-dash-header h1 {
    font-size: 34px;
    font-weight: 800;
    margin: 0;
}
.studio-dash-header p {
    font-size: 16px;
    color: #86868b;
    margin: 4px 0 20px;
}

.studio-dash-tabs {
    display: flex;
    gap: 34px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 -40px 32px;
    padding: 16px 40px 0;
    overflow-x: auto;
    /* Stuck to the top of the view instead of scrolling away with the
       page — content scrolls up and is clipped hard behind this bar
       (solid bg, no blur) right at the active-tab line. The studio view
       has no sticky-header above it (that only shows on Home), so top:0
       pins this to the very top of the viewport. */
    position: sticky;
    top: 0;
    z-index: 40;
    background: #f4f5f8;
}
body.dark-theme .studio-dash-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: #1c1c1e;
}

.studio-tab {
    background: none;
    border: none;
    padding: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: #86868b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.studio-tab:hover {
    color: var(--text-color, #1c1c1e);
}
.studio-tab.active {
    color: #ff8c00;
    border-bottom-color: #ff8c00;
}
.studio-tab:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
}

.studio-tab-panel {
    display: none;
}
.studio-tab-panel.active {
    display: block;
}

/* Profile */
.studio-banner {
    position: relative;
    height: 220px;
    border-radius: 24px;
    background: #c9c9c9;
    margin-bottom: 36px;
}
.studio-edit-banner {
    position: absolute;
    bottom: 18px;
    right: 18px;
    padding: 10px 22px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease;
}
.studio-edit-banner:hover {
    background: rgba(0, 0, 0, 0.4);
}
.studio-edit-banner:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.studio-profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.studio-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.studio-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86868b;
}
.studio-avatar svg {
    width: 56px;
    height: 56px;
}
.studio-change-pic {
    padding: 12px 24px;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    font-size: 16px;
    font-family: "Outfit", sans-serif;
    color: var(--text-color, #1c1c1e);
    cursor: pointer;
    transition: background 0.2s ease;
}
.studio-change-pic:hover {
    background: rgba(0, 0, 0, 0.04);
}
body.dark-theme .studio-change-pic:hover {
    background: rgba(255, 255, 255, 0.08);
}
.studio-change-pic:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
}

.studio-field {
    width: 100%;
    max-width: 640px;
    margin-bottom: 24px;
}
.studio-field label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.studio-field .studio-hint {
    display: block;
    font-size: 14px;
    color: #86868b;
    margin-bottom: 10px;
}
.studio-field input,
.studio-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    font-size: 16px;
    color: var(--text-color, #1c1c1e);
    font-family: "Outfit", sans-serif;
    box-sizing: border-box;
    background: var(--card-bg, #fff);
    transition: border-color 0.2s ease;
}
.studio-field textarea {
    resize: vertical;
    line-height: 1.6;
}
.studio-field input:focus,
.studio-field textarea:focus {
    outline: none;
    border-color: #ff8c00;
}

/* Handle field — fixed "@" prefix sitting inside the same bordered box
   as the input, so it reads as one control rather than two. */
.studio-handle-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    transition: border-color 0.2s ease;
}
.studio-handle-wrap:focus-within {
    border-color: #ff8c00;
}
.studio-handle-at {
    padding-left: 16px;
    font-size: 16px;
    color: #86868b;
    user-select: none;
}
.studio-handle-wrap input {
    border: none;
    padding-left: 2px;
}
.studio-handle-wrap input:focus {
    border: none;
}
.studio-handle-status {
    display: block;
    min-height: 18px;
    font-size: 13px;
    margin-top: 6px;
}
.studio-handle-status.checking {
    color: #86868b;
}
.studio-handle-status.available {
    color: #1fa34d;
}
.studio-handle-status.taken,
.studio-handle-status.invalid {
    color: #e0392b;
}

body.dark-theme .studio-handle-wrap {
    background: var(--card-bg, #1c1c1e);
    border-color: rgba(255, 255, 255, 0.14);
}
body.dark-theme .studio-handle-at {
    color: #9a9a9e;
}

/* Bio / description textareas — auto-expanding box with a live
   "typed/max" counter pinned to the bottom-right corner. */
.studio-textarea-wrap,
.listing-textarea-wrap {
    position: relative;
}
.studio-textarea-wrap textarea,
.listing-textarea-wrap textarea {
    overflow: hidden;
    resize: none;
    padding-bottom: 28px;
}
.studio-char-count,
.listing-char-count {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 12px;
    color: #86868b;
    pointer-events: none;
    background: var(--card-bg, #fff);
    padding: 0 2px;
}
.studio-char-count.limit-near,
.listing-char-count.limit-near {
    color: #e0392b;
}
body.dark-theme .studio-char-count,
body.dark-theme .listing-char-count {
    background: var(--card-bg, #1c1c1e);
}

.studio-save-btn {
    margin-top: 16px;
    padding: 10px 30px;
    background:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box,
        linear-gradient(90deg, #ff8b17 0%, #ff470a 100%) border-box;
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: #ff8c00;
    font-size: 14px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        transform 0.15s ease;
}
.studio-save-btn:hover {
    opacity: 0.85;
}
.studio-save-btn:active {
    transform: scale(0.97);
}
.studio-save-btn:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
}
.studio-save-btn.button-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ================================
   TOGGLE SWITCH (iOS-style pill)
   ================================ */
.toggle {
    position: relative;
    width: 66px;
    height: 31px;
    border-radius: 999px;
    border: none;
    background: #e5e5ea;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.25s ease;
}
body.dark-theme .toggle {
    background: #3a3a3c;
}
.toggle[aria-checked="true"] {
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
}
/* Same knob height as the standard iOS switch (27px, 2px gap top/bottom)
   but stretched horizontally into an actual pill shape. Track widened
   to 66px so the knob still has clean 2px gaps on both ends as it
   slides from one side to the other. */
.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 38px;
    height: 27px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle[aria-checked="true"] .toggle-knob {
    transform: translateX(24px);
}

.studio-empty-state {
    color: #86868b;
    font-size: 14px;
    text-align: center;
    padding: 60px 0;
}

/* ================================
   STUDIO — NEW LISTING TOOLBAR BUTTON
   ================================ */
.studio-products-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.new-listing-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    border: none;
    color: white;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
    box-shadow: 0 4px 12px rgba(255, 108, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-listing-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 108, 0, 0.32);
}

.new-listing-btn:active {
    transform: scale(0.96);
}

/* ================================
   NEW LISTING WIZARD — multi-tile upload flow
   (photo → gallery → details → item info → preview → success)
   Colors/layout follow the standalone upload-modal design as given;
   only the font is swapped to match the rest of the app (Outfit).
   ================================ */
.listing-sheet-overlay {
    align-items: center;
}

.listing-sheet {
    position: relative;
    width: min(480px, 94vw);
    max-height: 92vh;
    background: #eeeeee;
    border: 1px solid #dcdcdc;
    border-radius: 32px;
    padding: 32px 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.24s ease;
}

.modal-overlay.active .listing-sheet {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.listing-close-x {
    position: absolute;
    top: 20px;
    right: 22px;
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    color: #444444;
    line-height: 1;
    z-index: 5;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.listing-close-x:hover {
    color: #000000;
    transform: scale(1.1);
}

.listing-back-btn {
    position: absolute;
    top: 20px;
    left: 22px;
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444444;
    z-index: 5;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.listing-back-btn:hover {
    color: #000000;
    transform: translateX(-2px);
}

.listing-steps-viewport {
    width: 100%;
    position: relative;
    transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.listing-tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(45px) scale(0.95);
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.45s;
}

.listing-tile.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.listing-tile.exit-left {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-45px) scale(0.95);
}

.listing-tile-title {
    font-family: "Outfit", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: -0.3px;
}

/* TILE 1: Photo dropzone */
.listing-dropzone {
    width: 220px;
    height: 180px;
    border: 2px solid #333333;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.25);
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.2s ease;
}

.listing-dropzone:hover,
.listing-dropzone.listing-dragover {
    border-color: #000000;
    background-color: rgba(255, 255, 255, 0.65);
    transform: scale(1.02);
}

.listing-dropzone-icon {
    margin-bottom: 12px;
    color: #222222;
}

.listing-dropzone-text {
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    line-height: 1.3;
}

/* TILE 2: Gallery grid */
.listing-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    margin-bottom: 28px;
}

.listing-gallery-card {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.listing-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-gallery-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-add-photo-btn {
    background: #e4e4e4;
    border: 1px solid #cccccc;
    border-radius: 20px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.listing-add-photo-btn:hover {
    background: #d8d8d8;
    transform: scale(1.02);
}

/* TILE 3: Input fields */
.listing-field-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.listing-input-label {
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #555555;
    margin-left: 4px;
    margin-bottom: -8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.listing-pill-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid #777777;
    border-radius: 24px;
    padding: 0 20px;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #222222;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.listing-pill-input:focus {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.listing-price-pill {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    border: 1.5px solid #777777;
    border-radius: 24px;
    padding: 0 20px;
    background: transparent;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.listing-price-pill:focus-within {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.listing-price-currency {
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #777777;
    margin-right: 8px;
    flex-shrink: 0;
}

.listing-price-input {
    flex: 1;
    height: 100%;
    border: none;
    padding: 0;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #222222;
    background: transparent;
    outline: none;
}

.listing-category-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.listing-category-field {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1.5px solid #555555;
    padding: 10px 4px;
    cursor: pointer;
    background: transparent;
    transition: border-color 0.2s ease;
}

.listing-category-field:hover {
    border-color: #000000;
}

/* Category "reel" — a fixed-height, overflow-hidden window that the AI's
   guesses slide through: each candidate slides up out the top while the
   next slides in from the bottom, fast at first then slowing to a stop
   on the final pick (see spinCategoryReel() in script.js). */
.listing-category-reel {
    position: relative;
    width: 100%;
    height: 20px;
    overflow: hidden;
}

.listing-category-frame {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    text-align: center;
    white-space: nowrap;
    transform: translateY(0);
    opacity: 1;
    transition:
        transform 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.12s ease;
}

.listing-category-frame.listing-reel-entering {
    transform: translateY(100%);
    opacity: 0;
}

.listing-category-frame.listing-reel-exiting {
    transform: translateY(-100%);
    opacity: 0;
}

.listing-category-chevron {
    position: absolute;
    right: 4px;
    color: #333333;
    display: flex;
    align-items: center;
}

/* TILE 4: Condition toggle + description */
.listing-toggle-container {
    position: relative;
    display: flex;
    background: #e0e0e0;
    border: 1px solid #cccccc;
    border-radius: 24px;
    padding: 1.5px;
    width: 100%;
    margin-bottom: 20px;
}

.listing-toggle-pill {
    position: absolute;
    top: 1.5px;
    bottom: 1.5px;
    left: 1.5px;
    width: calc(50% - 1.5px);
    background: #ffffff;
    border-radius: 22.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.listing-toggle-opt {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #666666;
    border-radius: 22.5px;
    cursor: pointer;
    border: none;
    background: transparent;
    position: relative;
    z-index: 2;
    transition: color 0.25s ease;
}

.listing-toggle-opt.active {
    color: #111111;
}

.listing-description-box {
    width: 100%;
    height: 140px;
    border: 1.5px solid #777777;
    border-radius: 20px;
    padding: 16px 20px;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #222222;
    background: transparent;
    outline: none;
    resize: none;
    margin-bottom: 28px;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.listing-description-box:focus {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* TILE 5: Preview */
.listing-preview-card {
    width: 100%;
    max-width: 260px;
    margin: 0 auto 28px;
}

/* TILE 6: Success */
.listing-success-icon {
    width: 64px;
    height: 64px;
    background: #e6f9ed;
    color: #12b76a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.listing-success-sub {
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    color: #555555;
    margin-bottom: 28px;
}

/* Shared action button (Next / Finish) */
.listing-action-btn {
    width: 100%;
    max-width: 220px;
    height: 48px;
    background-color: #222222;
    color: #ffffff;
    border: none;
    border-radius: 24px;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.listing-action-btn:hover {
    background-color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.listing-action-btn:active {
    transform: translateY(0);
}

.listing-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.listing-text-btn {
    background: none;
    border: none;
    color: #6e6e73;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 14px;
    padding: 8px;
}

.listing-text-btn:hover {
    color: #1c1c1e;
}
/* ============================================================
   SHARED IMAGE CROP OVERLAY (item 1)
   Free-form crop tool, usable from both desktop's listing wizard
   and mobile's upload flow. Sits above everything at the top of
   the stacking order since it's appended at the very end of body.
   ============================================================ */
.img-crop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    flex-direction: column;
}

.img-crop-overlay.img-crop-open {
    display: flex;
}

.img-crop-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
}

.img-crop-title {
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.img-crop-cancel,
.img-crop-use {
    background: none;
    border: none;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    cursor: pointer;
    padding: 6px 4px;
}

.img-crop-cancel {
    color: #d0d0d0;
    font-weight: 400;
}

.img-crop-use {
    color: #ff5900;
    font-weight: 700;
}

.img-crop-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.img-crop-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.img-crop-box {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

.img-crop-handle {
    position: absolute;
    width: 26px;
    height: 26px;
    touch-action: none;
}

.img-crop-handle::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.img-crop-handle.tl { top: -13px; left: -13px; cursor: nwse-resize; }
.img-crop-handle.tr { top: -13px; right: -13px; cursor: nesw-resize; }
.img-crop-handle.bl { bottom: -13px; left: -13px; cursor: nesw-resize; }
.img-crop-handle.br { bottom: -13px; right: -13px; cursor: nwse-resize; }

.img-crop-hint {
    flex-shrink: 0;
    text-align: center;
    color: #a3a3a3;
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    padding: 10px 20px max(16px, env(safe-area-inset-bottom));
}

/* ================================
   OFFLINE BANNER
   ================================ */
#offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #1c1c1e;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    z-index: 10000;
    box-sizing: border-box;
}

#offline-banner.show {
    display: flex;
}

#offline-banner i {
    font-size: 14px;
}

body.dark-theme #offline-banner {
    background: #2c2c2e;
}

/* ================================
   OFFLINE EMPTY STATE ICON
   ================================ */
/* icons/internet.svg is drawn in black — mask-image recolors it using
   background-color instead, so it matches the app's orange (#ff8c00)
   like every other icon, regardless of the source file's own fill. */
.offline-empty-icon {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 16px auto;
    background-color: #ff8c00;
    -webkit-mask-image: url("icons/internet.svg");
    mask-image: url("icons/internet.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cart-empty-icon {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px auto;
    background-color: #ff8c00;
    -webkit-mask-image: url("icons/cart.svg");
    mask-image: url("icons/cart.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ================================
   IMAGE LIGHTBOX (product photo viewer)
   Shared by desktop (.pd-hero) and mobile (.m-pd-hero) — tap/click any
   listing image to view it full-screen. Reuses the same dark blurred
   overlay + fade/scale-in language as .modal-overlay elsewhere in the
   app, and the app's orange accent for controls.
   ================================ */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: pan-y;
}

.lightbox-track {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox-track.dragging {
    transition: none;
}

.lightbox-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
}

.lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3010;
    transition: background 0.18s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3010;
    transition: background 0.18s ease, opacity 0.18s ease;
}

.lightbox-chevron:hover {
    background: #ff8c00;
}

.lightbox-chevron.prev {
    left: 20px;
}

.lightbox-chevron.next {
    right: 20px;
}

.lightbox-chevron[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Small hint chevrons overlaid on the hero image itself (before opening
   the lightbox) — only shown when a listing has more than one photo.
   These are real prev/next controls (see script.js), so they need their
   own pointer-events + cursor rather than passing clicks through to the
   hero underneath, which opens the lightbox/zoom instead of navigating. */
.pd-hero-hint-chevron,
.m-pd-hero-hint-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
    transition: background 0.18s ease;
}

.pd-hero-hint-chevron:hover,
.m-pd-hero-hint-chevron:hover {
    background: rgba(0, 0, 0, 0.55);
}

.pd-hero-hint-chevron.next,
.m-pd-hero-hint-chevron.next {
    right: 12px;
}

.pd-hero-hint-chevron.prev,
.m-pd-hero-hint-chevron.prev {
    left: 12px;
}

.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    z-index: 3010;
}

@media (max-width: 768px) {
    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
    }
    .lightbox-chevron {
        width: 40px;
        height: 40px;
    }
    .lightbox-chevron.prev { left: 10px; }
    .lightbox-chevron.next { right: 10px; }
    .lightbox-slide { padding: 16px; }
}

/* ================================
   STUDIO ORDERS TAB
   Matches the existing .studio-listing-row / .studio-stat visual
   language already used elsewhere in Studio, so this doesn't look like
   a bolted-on separate feature.
   ================================ */
.studio-orders-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 12px;
}

body.dark-theme .studio-orders-subtabs {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.studio-orders-subtab {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #86868b;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.studio-orders-subtab:hover {
    background: rgba(255, 140, 0, 0.08);
    color: #ff8c00;
}

.studio-orders-subtab.active {
    background: #ff8c00;
    color: #ffffff;
}

.studio-order-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.studio-order-approve-btn,
.studio-order-decline-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease;
}

.studio-order-approve-btn {
    background: #ff8c00;
    color: #ffffff;
}

.studio-order-decline-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
}

body.dark-theme .studio-order-decline-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.studio-order-approve-btn:hover,
.studio-order-decline-btn:hover {
    opacity: 0.85;
}

.studio-order-approve-btn:disabled,
.studio-order-decline-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.studio-order-status {
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    flex-shrink: 0;
}

.studio-order-status-approved {
    background: rgba(52, 199, 89, 0.14);
    color: #248a3d;
}

.studio-order-status-declined {
    background: rgba(255, 59, 48, 0.12);
    color: #d70015;
}

body.dark-theme .studio-order-status-approved {
    background: rgba(52, 199, 89, 0.2);
    color: #63e685;
}

body.dark-theme .studio-order-status-declined {
    background: rgba(255, 59, 48, 0.2);
    color: #ff6961;
}

@media (max-width: 720px) {
    .studio-order-row {
        flex-wrap: wrap;
    }
    .studio-order-actions {
        order: 3;
        width: 100%;
        padding-left: 62px;
        margin-top: 6px;
    }
}


/* ================================
   DESKTOP HOME — verbatim from the approved DEX.html mockup.
   Every rule below is copied as-is from that file (values unchanged).
   Applied to real markup with the same class names as the mockup
   (.desktop-container, .sidebar, .nav-item, .brand-logo, .tabs-nav,
   .tab-link, .product-card, etc). Functional IDs the app's JS needs
   (.search-bar, #sell-btn, #search-filter-btn, #main-product-grid,
   nav link IDs) are kept on this same markup so behavior still works.
   ================================ */

.desktop-container {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  gap: 14px;
  /* The sidebar is sticky (top: 12px) inside this box. On a short page the
     box was only as tall as the sidebar itself, leaving no room for the
     12px offset, so the sidebar sat 12px higher than on long pages. A
     viewport-tall minimum keeps it in the same place on every view. */
  min-height: 100vh;
}

.sidebar {
  width: 84px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 34px;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    0 12px 32px 0 rgba(31, 38, 135, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  height: calc(100vh - 24px);
  position: sticky;
  top: 12px;
  flex-shrink: 0;
  z-index: 200;
}

body.dark-theme .sidebar {
  background: linear-gradient(135deg, rgba(44, 44, 46, 0.6), rgba(28, 28, 30, 0.4));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 32px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.brand-logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.brand-logo img {
  width: 32px;
  height: 32px;
}

.nav-item {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #222222;
  background: transparent;
  border: none;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-decoration: none;
}

/* No highlight box on active -- the outline-to-fill icon swap (see
   .sidebar a.active .nav-icon-outline/.nav-icon-fill above) is what shows
   which nav item is active. */
.nav-item.active {
  background: transparent;
}

.nav-item:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

body.dark-theme .nav-item:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-divider {
  width: 30px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.08);
  margin: 2px 0;
}

body.dark-theme .nav-divider {
  background-color: rgba(255, 255, 255, 0.1);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.unified-sticky-header {
  position: sticky;
  top: 0;
  z-index: 150;
  background: rgba(244, 245, 248, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 8px 10px 10px 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-header-wrapper {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.3s ease,
              max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  max-height: 80px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
}

/* The filter dropdown panel pops out below the search bar, taller than
   this wrapper's own 80px -- let it escape the clip while it's actually
   open, without giving up the clip needed for the collapse animation the
   rest of the time. */
.top-header-wrapper:has(.search-filter-panel.active) {
  overflow: visible;
}

.top-header-wrapper.hidden {
  max-height: 0px;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 2px;
  padding-bottom: 4px;
}

.search-wrapper {
  flex: 1;
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}

.search-bar {
  width: 100%;
  height: 46px;
  background-color: #ffffff;
  border: 1px solid #e2e4e8;
  border-radius: 30px;
  padding: 0 60px 0 44px;
  font-size: 15px;
  color: #111111;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar::placeholder {
  color: #aaa;
}

.search-bar:focus {
  border-color: #ff3000;
  box-shadow: 0 4px 12px rgba(255, 48, 0, 0.1);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #222222;
  pointer-events: none;
}

.filter-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 34px;
  background-color: #d1d1d6;
  border: none;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.filter-btn:hover {
  background-color: #b8b8bd;
  transform: translateY(-50%) scale(1.02);
}

.sell-btn {
  background-color: #ffffff;
  border: 1.5px solid #222222;
  color: #111111;
  padding: 9px 22px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.sell-btn:hover {
  border-color: #000000;
}

body.dark-theme .sell-btn {
  background-color: transparent;
  border-color: #f5f5f5;
  color: #f5f5f5;
}

body.dark-theme .sell-btn:hover {
  border-color: #ffffff;
}

.tabs-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  width: fit-content;
  max-width: 580px;
  /* Centered via auto margins, then nudged slightly left so the tab
     group lines up with the search bar above it instead of sitting a
     touch right of it. */
  margin: 0 auto;
  transform: translateX(-10px);
}

.tab-link {
  font-size: 16px;
  font-weight: 700;
  color: #555555;
  background: none;
  border: none;
  padding: 6px 4px 8px 4px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
  z-index: 2;
}

.tab-link.active {
  color: #000000;
}

body.dark-theme .tab-link {
  color: #9a9a9e;
}

body.dark-theme .tab-link.active {
  color: #ffffff;
}

.tab-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #000000;
  border-radius: 3px;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

body.dark-theme .tab-underline {
  background-color: #ffffff;
}

.hero-banner {
  width: 100%;
  height: 230px;
  background-color: #ffffff;
  border: 1px solid #e0e2e5;
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* .product-card here keeps the OLD layout's structure (image on top,
   name/description/price/button stacked below, same as before) — DEX's
   mockup card was a bare centered image with no room for that text, so
   only its rounded corners + hover-lift are carried over, not its
   height/centering/overflow (which would crush the text). */
.product-card {
  border-radius: 20px;
  cursor: pointer;
}

/* Desktop home body/base: folded into the existing body rule's context
   instead of a bare `body{}`/`*{}` reset (which would blow out spacing
   across the rest of the app's 6000+ other rules). Same visual result
   for this page, scoped safely. */
body {
  background-color: #f4f5f8;
  display: flex;
  padding: 6px 10px 12px;
  box-sizing: border-box;
}

body * {
  box-sizing: border-box;
}

/* Small order-count badge over the sidebar's Orders icon — same anchor
   pattern as .noti-dot, sized for a 1-2 digit number instead of a dot. */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: #ff8c00;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* .promo-banner + .hero-banner combined on #promo-banner: neutralize the
   old fixed-sidebar-era margins/gradient so the DEX .hero-banner rule's
   flat white box (already appended above) is what actually shows. */
.promo-banner.hero-banner {
  margin: 0;
  animation: none;
  background: #ffffff;
}


/* ================================
   SIDEBAR LOGO AS A BUTTON (refreshes the page)
   ================================ */
button.brand-logo {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
button.brand-logo:focus-visible {
  outline: 2px solid rgba(255, 140, 0, 0.5);
  outline-offset: 2px;
}

/* ================================
   LISTING WIZARD — DARK THEME
   (the wizard's base styles are all light colors; these flip them)
   ================================ */
body.dark-theme .listing-sheet {
  background: #1c1c1e;
  border-color: #2c2c2e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
body.dark-theme .listing-close-x,
body.dark-theme .listing-back-btn { color: #a8a8ad; }
body.dark-theme .listing-close-x:hover,
body.dark-theme .listing-back-btn:hover { color: #ffffff; }
body.dark-theme .listing-tile-title { color: #f5f5f7; }

body.dark-theme .listing-dropzone {
  border-color: #5a5a5e;
  background: rgba(255, 255, 255, 0.04);
}
body.dark-theme .listing-dropzone:hover,
body.dark-theme .listing-dropzone.listing-dragover {
  border-color: #f5f5f7;
  background-color: rgba(255, 255, 255, 0.09);
}
body.dark-theme .listing-dropzone-icon,
body.dark-theme .listing-dropzone-text { color: #e5e5ea; }

body.dark-theme .listing-gallery-card {
  background: #2c2c2e;
  border-color: #3a3a3c;
}
body.dark-theme .listing-add-photo-btn {
  background: #2c2c2e;
  border-color: #3a3a3c;
  color: #f5f5f7;
}
body.dark-theme .listing-add-photo-btn:hover { background: #3a3a3c; }

body.dark-theme .listing-input-label { color: #a8a8ad; }
body.dark-theme .listing-pill-input,
body.dark-theme .listing-price-pill,
body.dark-theme .listing-description-box { border-color: #5a5a5e; }
body.dark-theme .listing-pill-input,
body.dark-theme .listing-price-input,
body.dark-theme .listing-description-box { color: #f5f5f7; }
body.dark-theme .listing-pill-input::placeholder,
body.dark-theme .listing-price-input::placeholder,
body.dark-theme .listing-description-box::placeholder { color: #7a7a7e; }
body.dark-theme .listing-pill-input:focus,
body.dark-theme .listing-price-pill:focus-within,
body.dark-theme .listing-description-box:focus {
  border-color: #f5f5f7;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
body.dark-theme .listing-price-currency { color: #9a9a9e; }

body.dark-theme .listing-category-field { border-bottom-color: #5a5a5e; }
body.dark-theme .listing-category-field:hover { border-color: #f5f5f7; }
body.dark-theme .listing-category-frame { color: #f5f5f7; }
body.dark-theme .listing-category-chevron { color: #c7c7cc; }

body.dark-theme .listing-toggle-container {
  background: #2c2c2e;
  border-color: #3a3a3c;
}
body.dark-theme .listing-toggle-pill {
  background: #48484a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body.dark-theme .listing-toggle-opt { color: #9a9a9e; }
body.dark-theme .listing-toggle-opt.active { color: #ffffff; }

body.dark-theme .listing-success-icon {
  background: rgba(48, 209, 88, 0.16);
  color: #32d74b;
}
body.dark-theme .listing-success-sub { color: #a8a8ad; }

body.dark-theme .listing-action-btn {
  background-color: #f5f5f7;
  color: #1c1c1e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
body.dark-theme .listing-action-btn:hover {
  background-color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
body.dark-theme .listing-text-btn { color: #98989d; }
body.dark-theme .listing-text-btn:hover { color: #f5f5f7; }

/* ================================
   LISTING PUBLISH PROGRESS (ring over the wizard)
   ================================ */
.listing-publish-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(238, 238, 238, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s;
}
.listing-publish-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.listing-publish-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 34px 44px 28px;
  background: #eeeeee;
  border: 1px solid #dcdcdc;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
  transform: scale(0.94);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.listing-publish-overlay.active .listing-publish-card { transform: scale(1); }
.listing-publish-ring { position: relative; width: 132px; height: 132px; }
.listing-publish-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.listing-publish-ring-bg { fill: none; stroke: #dcdcdc; stroke-width: 8; }
.listing-publish-ring-fg {
  fill: none;
  stroke: #ff8c00;
  stroke-width: 8;
  stroke-linecap: round;
  will-change: stroke-dashoffset;
  transition: stroke 0.35s ease;
}
.listing-publish-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #111111;
  font-variant-numeric: tabular-nums;
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.listing-publish-check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  color: #12b76a;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.listing-publish-overlay.done .listing-publish-percent { opacity: 0; transform: scale(0.8); }
.listing-publish-overlay.done .listing-publish-check { opacity: 1; transform: scale(1); }
.listing-publish-overlay.done .listing-publish-ring-fg { stroke: #12b76a; }
.listing-publish-status {
  margin: 0;
  min-height: 20px;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555555;
}

body.dark-theme .listing-publish-overlay { background: rgba(0, 0, 0, 0.45); }
body.dark-theme .listing-publish-card {
  background: #1c1c1e;
  border-color: #2c2c2e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
body.dark-theme .listing-publish-ring-bg { stroke: #2c2c2e; }
body.dark-theme .listing-publish-percent { color: #f5f5f7; }
body.dark-theme .listing-publish-status { color: #a8a8ad; }
body.dark-theme .listing-publish-overlay.done .listing-publish-check { color: #32d74b; }
body.dark-theme .listing-publish-overlay.done .listing-publish-ring-fg { stroke: #32d74b; }

@media (prefers-reduced-motion: reduce) {
  .listing-publish-overlay,
  .listing-publish-card,
  .listing-publish-percent,
  .listing-publish-check { transition-duration: 0.01s; }
}


/* ============================================================
   FIXES: banner slideshow, theme icons, toggles, delete modal,
   photo carousel, publish cancel, centered guest login
   ============================================================ */

/* ---- Banner: shuffled, Apple-smooth crossfade (same in both themes) ---- */
.promo-banner.hero-banner { overflow: hidden; }
.promo-banner .banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity var(--banner-fade, 1600ms) cubic-bezier(0.4, 0, 0.2, 1),
    transform calc(var(--banner-fade, 1600ms) * 4) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.promo-banner .banner-slide.show { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .promo-banner .banner-slide { transition-duration: 0.01s; transform: none; }
}

/* ---- Theme selector: no capsule, only the active icon turns orange ---- */
.theme-opt[data-theme="light"] .nav-icon {
  filter: brightness(0);
  transition: filter 0.2s ease;
}
body.dark-theme .theme-opt[data-theme="light"] .nav-icon {
  filter: brightness(0) invert(1);
}
.theme-opt[data-theme="light"].active .nav-icon,
body.dark-theme .theme-opt[data-theme="light"].active .nav-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
    hue-rotate(1deg) brightness(103%) contrast(104%);
}
body.dark-theme .theme-opt.active { color: #ff8c00; }
body.dark-theme .theme-opt.active .theme-opt-badge {
  border-color: #ff8c00;
  color: #ff8c00;
}

/* ---- Toggles in dark theme ---- */
body.dark-theme .toggle { background: #39393d; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
body.dark-theme .toggle[aria-checked="true"] {
  background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
  box-shadow: none;
}
body.dark-theme .toggle-knob {
  background: #f5f5f7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
body.dark-theme .toggle[aria-checked="true"] .toggle-knob { background: #ffffff; }

/* ---- Delete-listing modal: same look as the listing wizard sheet ---- */
.delete-listing-sheet {
  width: min(400px, 92vw);
  padding: 32px 36px 24px;
  text-align: center;
}
.delete-listing-sheet .delete-confirm-icon { margin-bottom: 14px; }
.delete-listing-sheet .listing-tile-title { margin-bottom: 10px; }
.delete-listing-text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #6e6e73;
  word-break: break-word;
}
.delete-listing-text strong { color: #111111; }
body.dark-theme .delete-listing-text { color: #a8a8ad; }
body.dark-theme .delete-listing-text strong { color: #f5f5f7; }
.delete-listing-sheet .delete-listing-confirm,
body.dark-theme .delete-listing-sheet .delete-listing-confirm {
  flex: none;
  padding: 0;
  background-color: #ff3b30;
  color: #ffffff;
  border-radius: 24px;
}
.delete-listing-sheet .delete-listing-confirm:hover,
body.dark-theme .delete-listing-sheet .delete-listing-confirm:hover {
  background-color: #e0352b;
}
.delete-listing-sheet .listing-text-btn { margin-top: 10px; }

/* ---- Photo gallery: one horizontal, scrollable carousel ---- */
.listing-gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 4px;
  padding: 2px 2px 4px;
  margin-bottom: 24px;
  overscroll-behavior-x: contain;
}
.listing-gallery-grid > .listing-gallery-card,
.listing-gallery-grid > .listing-add-photo-btn {
  flex: 0 0 calc((100% - 28px) / 3);
  width: calc((100% - 28px) / 3);
  scroll-snap-align: start;
}

/* ---- Publish: small cancel button under the progress card ---- */
.listing-publish-overlay {
  flex-direction: column;
  gap: 14px;
}
.listing-publish-cancel {
  width: 112px;
  height: 38px;
  border: none;
  border-radius: 19px;
  background: #e4e4e4;
  color: #111111;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, background 0.2s ease, transform 0.15s ease;
}
.listing-publish-overlay.active .listing-publish-cancel { opacity: 1; }
.listing-publish-cancel:hover { background: #d6d6d6; }
.listing-publish-cancel:active { transform: scale(0.97); }
.listing-publish-cancel:disabled { opacity: 0.4 !important; cursor: default; }
.listing-publish-overlay.done .listing-publish-cancel { visibility: hidden; }
body.dark-theme .listing-publish-cancel { background: #2c2c2e; color: #f5f5f7; }
body.dark-theme .listing-publish-cancel:hover { background: #3a3a3c; }

/* ---- Pre-login screen: centred in the viewport ---- */
#guest-wrapper:not([style*="display: none"]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
}
#guest-wrapper:not([style*="display: none"]) > .auth-card {
  margin: 0 auto;
}

#signup-view:not([style*="display: none"]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
}