/* =====================================================
   SHARED "EMPTY STATE" (Notifications / Chat / guest views)
===================================================== */

.empty-state {
    max-width: 480px;
    margin: 50px auto 70px;
    text-align: center;
    padding: 50px 30px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
}

.empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #d0001b;
}

.empty-state h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #111;
}

.empty-state p {
    color: #777;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 auto 24px;
    max-width: 360px;
}

.empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #d0001b;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 11px 26px;
    border-radius: 24px;
    cursor: pointer;
    transition: .2s;
}

.empty-cta:hover {
    background: #a80016;
    color: #fff;
}

.empty-cta-secondary {
    display: block;
    color: #d0001b;
    font-weight: 600;
    font-size: 12.5px;
    margin-top: 16px;
}

.empty-cta-secondary:hover {
    color: #a80016;
}

/* =====================================================
   PROFILE PAGE
===================================================== */

.profile-card {
    max-width: 600px;
    margin: 40px auto 70px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 36px 40px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
}

.profile-name {
    font-size: 19px;
    font-weight: 700;
    color: #111;
}

.profile-email {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 13.5px;
}

.profile-row:last-of-type {
    border-bottom: none;
}

.profile-row span:first-child {
    color: #777;
}

.profile-row span:last-child {
    color: #111;
    font-weight: 600;
}

.profile-edit-btn {
    margin-top: 26px;
    width: 100%;
    height: 46px;
    background: #d0001b;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: not-allowed;
    opacity: .7;
}

/* =====================================================
   NOTIFICATIONS PAGE
===================================================== */

.header-page-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .3px;
}

.header-page-title i {
    color: #d9a441;
    font-size: 18px;
}

body:has(.notif-page) {
    background: linear-gradient(180deg, #fbf5f5 0, #fff 260px);
}

body:has(.chat-shell) {
    overflow: hidden;
    height: 100vh;
}

.notif-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 20px 70px;
    /* body is display:flex; flex-direction:column — without an explicit
       width, this flex item's cross-axis size is decided by its own
       content's max-content size, not stretched to fill body. It only
       ever LOOKED full-width because some descendant grid inside was wide
       enough by coincidence to push it out to the max-width cap; any page
       whose content doesn't happen to do that (e.g. a shop-folder-grid
       with few fixed-size tiles) collapses to a tiny centered column. */
}

/* Notifications opts out of .notif-page's 900px cap — same fluid,
   full-width treatment as .gocoins-page, so a wide or zoomed-out window
   doesn't leave a growing block of empty margin on either side. (Profile
   gets the same treatment too, but profile.css loads after this file and
   already has its own .profile-page rule — see the max-width there.) */
.notifications-page {
    max-width: none;
}

.notif-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 22px;
    transition: .15s;
}

.notif-back:hover {
    color: #d0001b;
}

.notif-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.notif-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
}

.notif-page-title i {
    color: #d9a441;
    font-size: 22px;
}

.notif-page-subtitle {
    font-size: 14px;
    color: #666;
}

/* -----------------------------------------------------
   BUTTONS
----------------------------------------------------- */

.notif-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: .15s;
    white-space: nowrap;
}

.notif-btn-outline {
    background: #fff;
    color: #d0001b;
    border-color: #d0001b;
}

.notif-btn-outline:hover {
    background: #d0001b;
    color: #fff;
}

.notif-btn-outline:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #fff;
    color: #d0001b;
}

.notif-btn-sm {
    background: #fdeaea;
    color: #d0001b;
    padding: 8px 15px;
    font-size: 11.5px;
}

.notif-btn-sm:hover {
    background: #d0001b;
    color: #fff;
}

.notif-btn-buy {
    background: #d9a441;
    color: #1c0707;
    border-color: #d9a441;
}

.notif-btn-buy:hover {
    background: #e8c377;
    border-color: #e8c377;
}

.notif-btn-buy:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #d9a441;
    border-color: #d9a441;
}

/* -----------------------------------------------------
   CARD + TABS
----------------------------------------------------- */

.notif-card {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 1px rgba(16,24,40,.03),
        0 8px 16px -6px rgba(16,24,40,.10),
        0 20px 34px -14px rgba(16,24,40,.12);
}

.notif-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d9a441, #d0001b, #d9a441);
}

/* -----------------------------------------------------
   CARD HEADER (icon + title + description, used on
   profile, help center, and other notif-card pages)
----------------------------------------------------- */

.profile-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-card-head > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.profile-card-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.profile-card-head p {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.profile-card-head-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.notif-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 20px 0;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
}

.notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #777;
    background: #f6f6f6;
    border: none;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
    white-space: nowrap;
}

.notif-tab:hover {
    color: #d0001b;
    background: #fdeaea;
}

.notif-tab.active {
    color: #fff;
    background: #d0001b;
}

.notif-tab-count {
    background: #e2e2e2;
    color: #777;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

.notif-tab.active .notif-tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.notif-body-wrap {
    padding: 6px 0 4px;
}

/* -----------------------------------------------------
   GROUPS + ITEMS
----------------------------------------------------- */

.notif-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
    padding: 18px 20px 8px;
}

.notif-group-title i {
    color: #d0001b;
    font-size: 12px;
}

.notif-list {
    display: flex;
    flex-direction: column;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #f2f2f2;
    transition: background .15s;
}

.notif-group:last-child .notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: #fafafa;
}

.notif-item.notif-unread {
    background: #fff9f8;
}

.notif-item.notif-unread:hover {
    background: #fdf0ee;
}

.notif-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.notif-icon-blue { background: #e8f1fd; color: #2563eb; }
.notif-icon-green { background: #e6f7ec; color: #1f9254; }
.notif-icon-gold { background: #fdf3e0; color: #b8790a; }
.notif-icon-orange { background: #fdece0; color: #d9601a; }
.notif-icon-slate { background: #eef0f4; color: #4b5563; }
.notif-icon-red { background: #fdeaea; color: #d0001b; }

.notif-unread .notif-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d0001b;
    border: 2px solid #fff;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #111;
}

.notif-desc {
    font-size: 12.5px;
    color: #777;
    margin-top: 3px;
    line-height: 1.6;
}

.notif-time {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}

.notif-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

#notifEmptyFiltered.empty-state {
    border: none;
    background: none;
    margin: 20px auto 34px;
}

/* =====================================================
   MY PROFILE PAGE
===================================================== */

.profile-hero-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 20px;
    box-shadow: 0 12px 34px rgba(17, 17, 17, 0.06);
}

.profile-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero-info {
    flex: 1;
    min-width: 0;
}

.profile-hero-name {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.profile-hero-email {
    font-size: 13px;
    color: #777;
    margin-top: 2px;
}

.profile-hero-meta {
    font-size: 11.5px;
    color: #999;
    margin-top: 6px;
}

.profile-update-card {
    padding: 20px 22px;
    margin-bottom: 20px;
}

.profile-update-error {
    background: rgba(208,0,27,0.08);
    border: 1px solid rgba(208,0,27,0.25);
    color: #c9001a;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    margin-bottom: 16px;
}

.profile-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.profile-form-row-1 {
    grid-template-columns: 1fr;
}

.profile-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #444;
    margin-bottom: 6px;
}

/* Keeps the line breaks in a message (the composer is one line, so only
   multi-line messages like "Ask about this product" have any). */
.chat-bubble-text {
    white-space: pre-line;
}

/* -----------------------------------------------------
   PAY WITH GCASH MODAL (partials/gcash-pay-modal.blade.php)
   Self-contained — the order page doesn't load cart.css.
----------------------------------------------------- */
.gcm-box {
    --gcm-blue: #0a6cff;
    --gcm-blue-dark: #0057d9;
    --gcm-blue-soft: #eef5ff;
    --gcm-ink: #101828;
    --gcm-muted: #667085;
    --gcm-line: #e4e7ec;
    width: 520px;
    padding: 28px 28px 22px;
    color: var(--gcm-ink);
}

.gcm-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.gcm-head-icon {
    flex: 0 0 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--gcm-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(10, 108, 255, .28);
}

.gcm-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.gcm-head p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--gcm-muted);
}

.gcm-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gcm-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.gcm-amount {
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gcm-blue) 0%, #2f86ff 100%);
    color: #fff;
}

.gcm-amount .gcm-label { color: rgba(255, 255, 255, .8); }

.gcm-amount-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gcm-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gcm-amount-value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.gcm-payto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.gcm-payto-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
}

.gcm-dot { opacity: .6; }

.gcm-copy {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}

.gcm-copy:hover { background: rgba(255, 255, 255, .3); }
.gcm-copy.copied { background: #12b76a; }

.gcm-scan {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--gcm-line);
    border-radius: 14px;
}

.gcm-qr {
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid var(--gcm-line);
}

.gcm-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.gcm-qr-missing {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--gcm-muted);
    font-size: 12px;
}

.gcm-qr-missing i { font-size: 28px; }

.gcm-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #344054;
}

.gcm-steps li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.gcm-steps li span {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gcm-blue-soft);
    color: var(--gcm-blue);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcm-steps p {
    margin: 1px 0 0;
}

.gcm-error {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: 13px;
}

.gcm-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gcm-field label:first-child {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}

.gcm-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--gcm-muted);
}

.gcm-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.gcm-input i { color: #98a2b3; font-size: 13px; }

.gcm-input input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--gcm-ink);
}

.gcm-input:focus-within {
    border-color: var(--gcm-blue);
    box-shadow: 0 0 0 4px rgba(10, 108, 255, .12);
}

.gcm-input.has-error, .gcm-drop.has-error { border-color: #f04438; }

.gcm-drop {
    position: relative;
    display: block;
    border: 1.5px dashed #d0d5dd;
    border-radius: 12px;
    background: #fcfcfd;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.gcm-drop:hover, .gcm-drop.dragging {
    border-color: var(--gcm-blue);
    background: var(--gcm-blue-soft);
}

/* Kept in the form (and focusable/required) but out of sight. */
.gcm-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gcm-drop-empty {
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: #475467;
}

.gcm-drop-empty i {
    display: block;
    margin-bottom: 6px;
    font-size: 24px;
    color: var(--gcm-blue);
}

.gcm-drop-empty strong { color: var(--gcm-blue); }

.gcm-drop-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.gcm-drop-file[hidden] { display: none; }

.gcm-drop-file img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--gcm-line);
}

.gcm-drop-file-info {
    flex: 1;
    min-width: 0;
}

.gcm-drop-file-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gcm-drop-remove {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    cursor: pointer;
}

.gcm-drop-remove:hover { background: #e4e7ec; }

.gcm-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    margin-top: 4px;
}

.gcm-btn {
    height: 46px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}

.gcm-btn i { margin-right: 6px; }

.gcm-btn-ghost {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
}

.gcm-btn-ghost:hover { background: #f9fafb; }

.gcm-btn-primary {
    border: none;
    background: var(--gcm-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(10, 108, 255, .3);
}

.gcm-btn-primary:hover { background: var(--gcm-blue-dark); }
.gcm-btn-primary:disabled { opacity: .7; cursor: wait; }

.gcm-secure {
    margin: 2px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--gcm-muted);
}

.gcm-secure i { color: #12b76a; margin-right: 4px; }

@media (max-width: 520px) {
    .gcm-box { padding: 24px 18px 18px; }
    .gcm-amount-value { font-size: 26px; }
    .gcm-scan { flex-direction: column; text-align: left; }
    .gcm-qr { flex-basis: auto; width: 190px; }
    .gcm-payto { flex-direction: column; align-items: flex-start; }
    .gcm-payto-value { text-align: left; }
}

/* Seller Vacation Mode — buyer-facing tag, banner and disabled buttons. */
.vacation-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff4e0;
    color: #b54708;
    border: 1px solid #fedf89;
    font-size: 11.5px;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}

.vacation-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #93370d;
    font-size: 13.5px;
    line-height: 1.5;
}

.vacation-banner i {
    margin-top: 2px;
    color: #dc6803;
}

.vacation-disabled-btn,
.vacation-disabled-btn:hover {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.6);
    transform: none;
}

.shop-product-thumb .vacation-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
}

/* Chat — a product message (partials/chat-product-card.blade.php): the
   bubble turns into a white card on either side of the conversation —
   except once unsent, when it looks like any other unsent message. */
.chat-bubble.chat-bubble-type-product:not(.chat-bubble-unsent) {
    padding: 0;
    overflow: hidden;
    width: 280px;
    max-width: 100%;
    background: #fff;
    color: #101828;
    border: 1px solid #eaecf0;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
}

.chat-bubble.chat-bubble-type-product.chat-bubble-sent:not(.chat-bubble-unsent) {
    border-color: #f3c5cb;
}

.chat-product-card-greeting {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    background: #d0001b;
    color: #fff;
}

.chat-bubble-received .chat-product-card-greeting {
    background: #f2f4f7;
    color: #101828;
}

.chat-product-card-body {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}

.chat-product-card-body:hover {
    background: #fafafa;
}

.chat-product-card-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 22px;
}

.chat-product-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-product-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-product-card-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-product-card-price {
    font-size: 15px;
    font-weight: 800;
    color: #d0001b;
}

.chat-product-card-cta {
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    color: #d0001b;
}

.chat-product-card-cta i {
    font-size: 10px;
    margin-left: 2px;
}

.chat-product-card-gone {
    padding: 14px;
    font-size: 13px;
    color: #667085;
}

.chat-bubble.chat-bubble-type-product:not(.chat-bubble-unsent) .chat-bubble-time {
    display: block;
    padding: 0 14px 10px;
    color: #98a2b3;
}

/* Chat — "Ask about this product?" card above the composer. */
.chat-product-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 14px 10px;
    padding: 10px 12px;
    border: 1px solid #f5d48a;
    border-radius: 12px;
    background: #fffaf0;
}

.chat-product-suggestion-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
}

.chat-product-suggestion-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-product-suggestion-info {
    flex: 1;
    min-width: 0;
}

.chat-product-suggestion-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #b54708;
}

.chat-product-suggestion-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-product-suggestion-price {
    font-size: 12.5px;
    color: #d0001b;
    font-weight: 700;
}

.chat-product-suggestion-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-product-suggestion-ok {
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: #d0001b;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.chat-product-suggestion-close {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.chat-product-suggestion-close:hover {
    background: #f2f4f7;
}

/* GCash checkout — buyer order page status/modal, My Orders chip, admin review. */
.gcash-status {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff8e6;
    border: 1px solid #f5d48a;
    font-size: 13px;
}

.gcash-status-verified { background: #ecfdf3; border-color: #a6f4c5; }
.gcash-status-expired, .gcash-status-refunded { background: #f2f4f7; border-color: #d0d5dd; }
.gcash-status-line { margin: 0 0 8px; line-height: 1.5; }
.gcash-status-line:last-child { margin-bottom: 0; }
.gcash-countdown { color: #d0001b; font-variant-numeric: tabular-nums; }
.gcash-pay-btn { margin-top: 4px; }

.gcash-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff1f0;
    color: #d0001b;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.gcash-due-chip-muted { background: #f2f4f7; color: #475467; }

.gcash-review-row {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eaecf0;
}

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

.gcash-review-proof img {
    width: 90px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eaecf0;
}

.gcash-review-info { flex: 1; min-width: 0; }

.gcash-reject-form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gcash-reject-form input {
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
}

.gcash-settings-form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.gcash-settings-qr {
    width: 160px;
    border-radius: 10px;
    border: 1px solid #eaecf0;
}

/* "Limit 2 per buyer." under the product page's quantity stepper. */
.product-buyer-limit {
    margin: 8px 0 0;
    color: #b54708;
}

.profile-form-group input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: .15s;
}

/* Region dropdown: same look as the text inputs, with a chevron. */
.profile-form-group select {
    width: 100%;
    padding: 11px 36px 11px 13px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 13px;
    font-family: inherit;
    color: #111827;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: .15s;
}

.profile-form-group select:focus,
.profile-form-group input:focus {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208,0,27,0.08);
}

/* -----------------------------------------------------
   ORDERS - SEARCH + TABS + LIST
----------------------------------------------------- */

.orders-search-row {
    padding: 18px 20px 0;
}

.orders-search-input {
    position: relative;
}

.orders-search-input input {
    width: 100%;
    padding: 11px 16px 11px 40px;
    border: 1px solid #ddd;
    border-radius: 22px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: .15s;
}

.orders-search-input input:focus {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208,0,27,0.08);
}

.orders-search-input i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 13px;
}

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

.order-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #f2f2f2;
    transition: background .15s;
}

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

.order-item:hover {
    background: #fafafa;
}

.order-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-item-id {
    font-size: 11.5px;
    color: #999;
    font-weight: 700;
}

/* Each shop present in the order gets its own header + its own item
   rows underneath — items never merge across shops just because they
   were bought in the same order. */
.order-item-shop-group + .order-item-shop-group {
    margin-top: 4px;
}

.order-item-shop-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8f6f2;
    border: 1px solid #eee;
    border-radius: 8px;
    width: 100%;
}

/* This shop's own share of the order — its items' subtotal plus its cut
   of shipping/discounts — never the whole order's total. See
   Order::shopBreakdown(). */
.order-item-shop-total {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: #b8790a;
    flex-shrink: 0;
    white-space: nowrap;
}

.order-item-shop-mall {
    background: #d0001b;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .3px;
    flex-shrink: 0;
}

.order-item-shop-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-shop-name i {
    font-size: 10px;
    color: #b8790a;
    flex-shrink: 0;
}

a.order-item-shop-name:hover {
    color: #d0001b;
}

.order-item-shop-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 0 4px;
}

.order-item-product-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-item-product-row img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: #f5f5f5;
    flex-shrink: 0;
}

.order-item-product-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
}

.order-item-product-name .variant {
    font-weight: 400;
    color: #999;
}

.order-item-product-qty {
    font-size: 11.5px;
    color: #999;
    flex-shrink: 0;
}

.order-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    color: #999;
    padding-top: 4px;
    border-top: 1px solid #f2f2f2;
}

.order-item-grand-total {
    flex-shrink: 0;
    white-space: nowrap;
}

.order-item-grand-total strong {
    color: #d0001b;
    font-size: 13px;
    font-weight: 700;
    margin-left: 3px;
}

.order-item-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Always-available "view full order" link — kept visually calmer than the
   status-specific action (Cancel/Track/Refund/etc.) so that one still
   reads as the primary action on the card. */
.order-item-details-btn {
    background: #f5f5f5;
    color: #555;
}

.order-item-details-btn:hover {
    background: #ececec;
    color: #111;
}

.order-rated-badge {
    font-size: 11.5px;
    color: #b8790a;
    font-weight: 700;
    white-space: nowrap;
}

.order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.order-status-pending { background: #fff4e0; color: #b8790a; }
.order-status-to-pay { background: #fff4e0; color: #b8790a; box-shadow: inset 0 0 0 1px #fde3b0; }
.order-status-to-pay::before { content: "\f555"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; }
.order-status-to-ship { background: #e8f1fd; color: #2563eb; }
.order-status-to-receive { background: #f3e8fd; color: #7c3aed; }
.order-status-completed { background: #e6f7ec; color: #1f9254; }
.order-status-return-refund { background: #fdece0; color: #d9601a; }
.order-status-cancelled { background: #fdeaea; color: #d0001b; }

/* -----------------------------------------------------
   WISHLIST
----------------------------------------------------- */

.wishlist-page {
    max-width: none;
}

/* auto-fill, not auto-fit: with auto-fit, empty tracks collapse and the
   surviving items' 1fr share stretches to fill the freed space — with
   only 1-2 wishlist items in a row that could fit 5, each one balloons to
   roughly half the row's width, image and all. auto-fill leaves those
   extra tracks in place (just empty), so each item stays a normal card
   width regardless of how few items there are — same pattern the other
   product grids in this file already use. */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    padding: 22px;
}

.wishlist-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 1px 1px rgba(16,24,40,.03),
        0 6px 14px -6px rgba(16,24,40,.10),
        0 14px 26px -12px rgba(16,24,40,.10);
    transition: box-shadow .2s, transform .2s;
}

.wishlist-item:hover {
    box-shadow:
        0 1px 1px rgba(16,24,40,.04),
        0 12px 22px -6px rgba(16,24,40,.16),
        0 24px 38px -14px rgba(16,24,40,.20);
    transform: translateY(-4px);
}

.wishlist-item-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-decoration: none;
    color: #ddd;
}

.wishlist-remove-form {
    display: contents;
}

.wishlist-item-thumb {
    position: relative;
}

.wishlist-item-soldout .wishlist-item-thumb img {
    opacity: .45;
}

.wishlist-soldout-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(17,17,17,.82);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.wishlist-soldout-note {
    font-size: 11.5px;
    color: #888;
    margin-top: 8px;
}

a.wishlist-item-name {
    text-decoration: none;
    cursor: pointer;
}

.wishlist-item-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wishlist-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #d0001b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: .15s;
    z-index: 1;
}

.wishlist-remove-btn:hover {
    background: #d0001b;
    color: #fff;
}

.wishlist-item-body {
    padding: 14px 16px 18px;
    flex: 1;
}

.wishlist-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wishlist-item-seller {
    font-size: 11.5px;
    color: #888;
    margin-top: 4px;
}

.wishlist-item-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.wishlist-price-now {
    font-size: 16px;
    font-weight: 700;
    color: #d0001b;
}

.wishlist-price-was {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
}

/* -----------------------------------------------------
   SHOP (single seller storefront)
----------------------------------------------------- */

.shop-page {
    max-width: 1200px;
}

/* The shared .empty-state component caps at 480px, which reads fine on a
   narrow page (notifications, wishlist) but collapses to a small floating
   box inside the shop page's much wider 1200px card — e.g. a no-results
   in-shop search. Widen it here only, so those narrower pages keep their
   original look. */
.shop-page .empty-state {
    max-width: none;
    width: 100%;
}

.shop-hero-card {
    position: relative;
    background: linear-gradient(135deg, #1c0707, #2a0810 60%, #170003);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 16px;
    color: #fff;
}

.shop-hero-edit-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(2px);
    transition: .15s;
}

.shop-hero-edit-btn:hover {
    background: var(--cart-gold, #d9a441);
    color: #1c0707;
    border-color: var(--cart-gold, #d9a441);
}

.shop-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.shop-hero-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.15);
    overflow: hidden;
}

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

.shop-hero-info {
    flex: 1;
    min-width: 0;
}

.shop-hero-info h1 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
}

.shop-hero-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 14px;
}

.shop-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.shop-status-dot.online {
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46,204,113,0.2);
}

.shop-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid var(--cart-gold, #d9a441);
    color: var(--cart-gold, #d9a441);
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: .15s;
}

.shop-hero-btn:hover {
    background: var(--cart-gold, #d9a441);
    color: #1c0707;
}

.shop-hero-btn.following {
    background: #d0001b;
    color: #fff;
    border-color: #d0001b;
}

.shop-hero-btn.following:hover {
    background: #a80016;
}

.shop-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.shop-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
}

.shop-hero-stat-clickable {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    transition: color .15s;
}

.shop-hero-stat-clickable:hover {
    color: var(--cart-gold, #d9a441);
}

.shop-hero-stat-clickable:hover strong {
    color: var(--cart-gold, #d9a441);
}

.shop-hero-stat i {
    width: 16px;
    text-align: center;
    color: var(--cart-gold, #d9a441);
}

.shop-hero-stat strong {
    color: #fff;
    font-weight: 700;
    margin-left: auto;
}

.shop-hero-stat .stat-sub {
    color: rgba(255,255,255,0.4);
    font-size: 11.5px;
}

@media (min-width: 640px) {
    .shop-hero-top {
        align-items: center;
    }
}

.shop-home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 4px;
}

.shop-home-section-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.shop-home-section-head a {
    font-size: 12.5px;
    font-weight: 700;
    color: #d0001b;
}

.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    padding: 20px;
}

/*
 * A fixed-count preview (Top Products always caps at 4, never grows or
 * shrinks) gets an explicit 4-column grid instead of auto-fit/auto-fill —
 * minmax-based sizing has a fit/no-fit threshold, and right around it
 * (e.g. ~1000px here) the 4th card can't fit next to the other 3 but the
 * row is too wide to drop to 2 columns either, so it wraps into a lopsided
 * 3-then-1 row. repeat(4, 1fr) always fills exactly 100% of the row width
 * with 4 even columns at any width down to the breakpoints below, so it
 * can never end up ragged — the tradeoff is cards do get proportionally
 * wider on very large screens, same as any 1fr grid.
 */
.shop-product-grid-capped {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .shop-product-grid-capped {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .shop-product-grid-capped {
        grid-template-columns: 1fr;
    }
}

.flash-deals-scroll {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.flash-deals-scroll .shop-product-item {
    flex: 0 0 260px;
}

.shop-product-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 1px 1px rgba(16,24,40,.03),
        0 6px 14px -6px rgba(16,24,40,.10),
        0 14px 26px -12px rgba(16,24,40,.10);
    transition: box-shadow .2s, transform .2s;
}

.shop-product-favorite-form {
    display: contents;
}

.shop-product-favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #999;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: .15s;
    z-index: 2;
    text-decoration: none;
}

.shop-product-favorite-btn:hover {
    color: #d0001b;
}

.shop-product-favorite-btn.active {
    color: #d0001b;
}

.shop-product-item:hover {
    box-shadow:
        0 1px 1px rgba(16,24,40,.04),
        0 12px 22px -6px rgba(16,24,40,.16),
        0 24px 38px -14px rgba(16,24,40,.20);
    transform: translateY(-4px);
}

.shop-product-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
    color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    overflow: hidden;
}

.shop-product-voucher-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d0001b;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    z-index: 2;
}

.shop-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-product-body {
    padding: 14px 16px 4px;
    flex: 1;
}

.shop-product-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-product-category {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 4px;
}

.shop-product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.shop-product-price-now {
    font-size: 16px;
    font-weight: 700;
    color: #d0001b;
}

.shop-product-price-was {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
}

.shop-product-stock {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.shop-product-shipping {
    font-size: 10.5px;
    color: #8a6d3b;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.shop-product-item > .notif-btn {
    margin: 12px 16px 16px;
    justify-content: center;
}

.shop-product-actions {
    display: flex;
    gap: 8px;
    margin: 12px 16px 16px;
}

.shop-product-actions .notif-btn {
    flex: 1;
    justify-content: center;
    margin: 0;
}

.shop-stats-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
}

.shop-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shop-stat strong {
    color: #111;
}

.rating-stars {
    color: #f5a623;
    font-size: 12px;
    letter-spacing: 1px;
}

.rating-stars .fa-regular {
    color: #ddd;
}

.shop-follow-btn.following {
    background: #d0001b;
    color: #fff;
    border-color: #d0001b;
}

.shop-follow-btn.following:hover {
    background: #a80016;
}

.shop-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #eee;
    padding: 0 20px;
}

.shop-tab-btn {
    background: none;
    border: none;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.shop-tab-btn.active {
    color: #d0001b;
    border-bottom-color: #d0001b;
}

.shop-tab-panel {
    display: none;
}

.shop-tab-panel.active {
    display: block;
}

.suspension-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #fdeaea;
    border: 1px solid #f3b8b8;
    border-radius: 8px;
    font-size: 13px;
    color: #8a1c2c;
    font-weight: 600;
}

.suspension-banner i {
    font-size: 16px;
}

.shop-search-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 20px 0;
    padding: 10px 14px;
    background: #fdf3e7;
    border: 1px solid #f0d9b5;
    border-radius: 8px;
    font-size: 13px;
    color: #6b4a1f;
}

.shop-search-banner a {
    color: #8a1c2c;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
}

.shop-search-banner a:hover {
    text-decoration: underline;
}

.shop-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 0;
    flex-wrap: wrap;
}

.shop-filter-row select {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    background: #fff;
}

.shop-reviews-list {
    padding: 4px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shop-review-card {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.shop-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.shop-review-name {
    font-weight: 700;
    font-size: 13px;
    color: #111;
}

.shop-review-date {
    font-size: 11px;
    color: #999;
}

.shop-review-product {
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
}

.shop-review-comment {
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

/* -----------------------------------------------------
   CHAT
----------------------------------------------------- */

.chat-page {
    width: 100%;
    max-width: none;
    padding-bottom: 20px;
}

.chat-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

.chat-sidebar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(17,17,17,0.05);
    overflow: hidden;
    height: 620px;
    display: flex;
    flex-direction: column;
}

.chat-sidebar-head {
    padding: 16px 18px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #999;
    flex-shrink: 0;
}

.chat-sidebar-admin-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 14px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fdeaea;
    color: #d0001b;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}

.chat-sidebar-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-archive-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}

.chat-archive-btn:hover {
    color: #d0001b;
    background: #fafafa;
}

.chat-archive-count {
    background: #d0001b;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 16px;
    text-align: center;
}

.chat-archive-item {
    cursor: default;
}

.chat-archive-restore-btn {
    background: #fdeaea;
    color: #d0001b;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-archive-restore-btn:hover {
    background: #d0001b;
    color: #fff;
}

/* -----------------------------------------------------
   BULK SELECT -> ARCHIVE
----------------------------------------------------- */

.chat-list-checkbox {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 5px;
    flex-shrink: 0;
    color: transparent;
    font-size: 11px;
    transition: background .15s, border-color .15s;
}

.chat-list.select-mode .chat-list-checkbox {
    display: flex;
}

.chat-list-item.selected .chat-list-checkbox {
    background: #d0001b;
    border-color: #d0001b;
    color: #fff;
}

.chat-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fdeaea;
    border-bottom: 1px solid #f5c6c6;
    flex-shrink: 0;
}

.chat-bulk-bar.show {
    display: flex;
}

.chat-bulk-bar-count {
    font-size: 12px;
    font-weight: 600;
    color: #a80016;
}

.chat-bulk-bar-actions {
    display: flex;
    gap: 8px;
}

.chat-bulk-cancel-btn {
    background: none;
    border: 1px solid #e6b3b8;
    color: #a80016;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.chat-bulk-archive-btn {
    background: #d0001b;
    border: none;
    color: #fff;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-bulk-archive-btn:disabled {
    background: #f3aab2;
    cursor: not-allowed;
}

.chat-list {
    overflow-y: auto;
    flex: 1;
}

.chat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f5f5f5;
    border-left: 3px solid transparent;
    text-align: left;
    width: 100%;
    background: none;
    transition: background .15s;
}

.chat-list-item:hover {
    background: #fafafa;
}

.chat-list-item.active {
    background: #fdeaea;
    border-left-color: #d0001b;
}

.chat-list-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.chat-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0001b;
    border: 2px solid #fff;
}

.chat-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
}

.chat-status-online {
    color: #22c55e;
    font-weight: 700;
}

.chat-list-body {
    flex: 1;
    min-width: 0;
}

.chat-list-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-preview {
    display: block;
    font-size: 11.5px;
    color: #888;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-time {
    font-size: 10.5px;
    color: #aaa;
    flex-shrink: 0;
}

.chat-list-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Every row previously looked identical (name always bold, preview always
   muted gray) whether or not it held a new message — nothing distinguished
   "someone just messaged you" from an already-read conversation. */
.chat-list-item.unread .chat-list-name {
    color: #d0001b;
}

.chat-list-item.unread .chat-list-preview {
    color: #222;
    font-weight: 600;
}

.chat-list-item.unread .chat-list-time {
    color: #d0001b;
    font-weight: 700;
}

.chat-list-unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d0001b;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.chat-list-empty {
    padding: 24px 18px;
    font-size: 12.5px;
    color: #999;
    line-height: 1.7;
}

.chat-thread {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(17,17,17,0.05);
    display: flex;
    flex-direction: column;
    height: 620px;
    overflow: hidden;
}

.chat-thread-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.chat-thread-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.chat-thread-sub {
    font-size: 11.5px;
    color: #999;
    margin-top: 2px;
}

/* -----------------------------------------------------
   THREAD HEADER MENU
----------------------------------------------------- */

.chat-thread-menu-wrap {
    position: relative;
    margin-left: auto;
}

.chat-thread-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.chat-thread-menu-btn:hover {
    background: #f5f5f5;
    color: #d0001b;
}

.chat-thread-menu {
    display: none;
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(17,17,17,0.14);
    padding: 6px;
    min-width: 190px;
}

.chat-thread-menu.show {
    display: block;
}

.chat-thread-menu a,
.chat-thread-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.chat-thread-menu a:hover,
.chat-thread-menu button:hover {
    background: #fafafa;
    color: #d0001b;
}

.chat-thread-menu i {
    width: 14px;
    text-align: center;
    color: #999;
}

.chat-thread-menu-danger,
.chat-thread-menu-danger i {
    color: #d0001b !important;
}

/* -----------------------------------------------------
   BLOCKED BANNER (replaces the composer)
----------------------------------------------------- */

.chat-blocked-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #fdeaea;
    color: #a80016;
    font-size: 12.5px;
    font-weight: 600;
    flex-shrink: 0;
}

/* A buyer ↔ rider chat that ended with Order Received (App\Support\DeliveryChat). */
.chat-blocked-banner.chat-ended-banner {
    justify-content: center;
    background: #ecfdf3;
    color: #067647;
}

.chat-blocked-unblock-btn {
    background: #fff;
    border: 1px solid #d0001b;
    color: #d0001b;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.chat-blocked-unblock-btn:hover {
    background: #d0001b;
    color: #fff;
}

.chat-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.chat-bubble-row.mine {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.chat-bubble-wrap {
    position: relative;
    max-width: 68%;
    min-width: 88px;
    display: flex;
    flex-direction: column;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
}

.chat-bubble-sent {
    background: #d0001b;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble-received {
    background: #f2f2f2;
    color: #222;
    border-bottom-left-radius: 4px;
}

.chat-inline-link {
    text-decoration: underline;
    word-break: break-all;
}

.chat-bubble-sent .chat-inline-link {
    color: #ffe0e0;
}

.chat-bubble-received .chat-inline-link {
    color: #a4000f;
}

.chat-bubble-time {
    display: block;
    font-size: 10px;
    opacity: .7;
    margin-top: 4px;
}

.chat-edited-tag {
    font-size: 10.5px;
    opacity: .7;
    margin-left: 4px;
}

.chat-bubble-unsent {
    background: none !important;
    border: 1px dashed #ddd;
    color: #999 !important;
}

.chat-unsent-label {
    font-size: 12.5px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-bubble-type-sticker {
    background: none !important;
    padding: 0;
}

.chat-sticker {
    display: block;
    font-size: 48px;
    line-height: 1;
}

.chat-bubble-type-sticker .chat-bubble-time {
    text-align: inherit;
    color: #999;
    opacity: 1;
}

.chat-bubble-type-image {
    padding: 5px;
}

.chat-bubble-image {
    display: block;
    max-width: 220px;
    max-height: 260px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.chat-bubble-type-image .chat-bubble-time {
    padding: 4px 4px 0;
}

.chat-image-caption {
    display: block;
    padding: 6px 4px 0;
    font-size: 13px;
    line-height: 1.5;
}

.chat-file-attachment {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.chat-file-attachment i {
    font-size: 17px;
}

.chat-bubble-sent .chat-file-attachment {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* -----------------------------------------------------
   PER-MESSAGE MENU (edit / unsend / delete for me)
----------------------------------------------------- */

.chat-bubble-actions {
    position: relative;
    flex-shrink: 0;
    align-self: center;
}

.chat-bubble-menu-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}

.chat-bubble-row:hover .chat-bubble-menu-btn {
    opacity: 1;
}

.chat-bubble-menu-btn:hover {
    background: #f2f2f2;
    color: #d0001b;
}

.chat-bubble-menu {
    display: none;
    position: absolute;
    top: 30px;
    z-index: 2;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(17,17,17,0.14);
    padding: 6px;
    min-width: 170px;
}

.mine .chat-bubble-menu {
    right: 0;
}

.theirs .chat-bubble-menu {
    left: 0;
}

.chat-bubble-menu.show {
    display: block;
}

.chat-bubble-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
}

.chat-bubble-menu button:hover {
    background: #fafafa;
    color: #d0001b;
}

/* -----------------------------------------------------
   INLINE EDIT FORM
----------------------------------------------------- */

.chat-edit-form {
    display: none;
    align-items: center;
    gap: 6px;
}

.chat-edit-form.show {
    display: flex;
}

.chat-edit-form input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d0001b;
    border-radius: 16px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.chat-edit-form button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
}

.chat-edit-form button[type="submit"] {
    background: #1f9254;
    color: #fff;
}

.chat-edit-form button[type="button"] {
    background: #f2f2f2;
    color: #666;
}

/* -----------------------------------------------------
   COMPOSER (text + sticker picker + photo upload)
----------------------------------------------------- */

.chat-thread-composer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.chat-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 16px;
    border: 1px solid #ddd;
    border-radius: 22px;
    background: #fff;
    transition: .15s;
}

.chat-input-wrap:focus-within {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208,0,27,0.08);
}

.chat-thread-composer input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 7px 0;
    border: none;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: none;
}

.chat-composer-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #777;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.chat-composer-icon-btn:hover {
    background: #fdeaea;
    color: #d0001b;
}

.chat-photo-chip {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    overflow: visible;
    flex-shrink: 0;
}

.chat-photo-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.chat-photo-chip button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d0001b;
    color: #fff;
    border: 2px solid #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.chat-photo-chip button:hover {
    background: #a80016;
}

.chat-composer-send {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #d0001b;
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 15px;
    transition: background .15s;
}

.chat-composer-send:hover {
    background: #a80016;
}

.chat-sticker-wrap {
    position: relative;
    flex-shrink: 0;
}

.sticker-picker {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(17,17,17,0.14);
    padding: 12px;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: min-content;
    gap: 2px;
    width: 260px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 3;
}

.sticker-picker.show {
    display: grid;
}

.sticker-picker button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    padding: 8px;
    border-radius: 8px;
    transition: background .15s;
}

.sticker-picker button:hover {
    background: #fafafa;
}

.chat-empty-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: #999;
    gap: 10px;
}

.chat-empty-thread i {
    font-size: 30px;
    color: #ddd;
}

.chat-empty-thread p {
    font-size: 13px;
    max-width: 260px;
}

.chat-composer-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 12px;
    padding: 10px 14px;
    background: rgba(208,0,27,0.08);
    border: 1px solid rgba(208,0,27,0.25);
    color: #c9001a;
    border-radius: 8px;
    font-size: 12.5px;
    flex-shrink: 0;
}

@media (max-width: 800px) {
    .chat-shell {
        grid-template-columns: 1fr;
    }

    .chat-sidebar,
    .chat-thread {
        height: 460px;
    }
}

/* -----------------------------------------------------
   RATE PRODUCT MODAL
----------------------------------------------------- */

.rate-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.55);
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 30px 16px;
    overflow-y: auto;
}

.rate-modal-overlay.show {
    display: flex;
}

.rate-modal-box {
    position: relative;
    width: 480px;
    max-width: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 32px 30px 28px;
    max-height: 90vh;
    overflow-y: auto;
    animation: rateModalIn .25s ease;
}

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

.rate-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.rate-modal-close:hover {
    color: #d0001b;
}

.rate-modal-box h2 {
    font-size: 18px;
    color: #111;
    margin-bottom: 4px;
}

.rate-modal-product {
    font-size: 13px;
    color: #777;
    margin-bottom: 20px;
}

.rate-modal-field {
    margin-bottom: 18px;
}

.appearance-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.appearance-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border: 2px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    transition: .15s;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-align: center;
}

.appearance-choice:hover {
    border-color: #ddd;
}

.appearance-choice.active {
    border-color: #d0001b;
    color: #d0001b;
    background: #fdf3f4;
}

.appearance-choice input[type="radio"] {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    accent-color: #d0001b;
}

.appearance-choice-preview {
    width: 100%;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.appearance-preview-light {
    background: #f7f7f7;
    color: #f5a623;
    border: 1px solid #e5e5e5;
}

.appearance-preview-dark {
    background: #1c1c1e;
    color: #9db4ff;
    border: 1px solid #333;
}

.rate-modal-field > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
    color: #444;
    margin-bottom: 8px;
}

.rate-modal-field .optional {
    font-weight: 400;
    color: #999;
}

.required-mark {
    color: #d0001b;
    font-weight: 700;
}

.rate-modal-hint {
    font-size: 12px;
    color: #999;
    margin: -6px 0 14px;
}

.char-count {
    font-weight: 400;
    color: #999;
    font-size: 11.5px;
}

.rate-modal-field textarea {
    width: 100%;
    min-height: 70px;
    padding: 11px 13px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: .15s;
}

.rate-modal-field textarea:focus {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208,0,27,0.08);
}

.variation-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 45vh;
    overflow-y: auto;
}

.variation-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #222;
    cursor: pointer;
}

.variation-picker-option:has(input:checked) {
    border-color: #d0001b;
    background: rgba(208,0,27,0.05);
}

.variation-picker-option.disabled {
    opacity: .5;
    cursor: not-allowed;
}

.variation-picker-option span:first-of-type {
    flex: 1;
}

.variation-picker-stock {
    font-size: 11px;
    color: #888;
}

.rate-modal-divider {
    height: 1px;
    background: #eee;
    margin: 20px 0;
}

.star-rating {
    display: flex;
    gap: 6px;
    font-size: 22px;
    color: #d9a441;
    cursor: pointer;
}

.star-rating i {
    transition: transform .1s;
}

.star-rating i:hover {
    transform: scale(1.15);
}

.rate-upload-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed #ddd;
    border-radius: 8px;
    padding: 14px;
    font-size: 12.5px;
    color: #777;
    cursor: pointer;
    transition: .15s;
}

.rate-upload-box:hover {
    border-color: #d0001b;
    color: #d0001b;
    background: #fff9f8;
}

.rate-upload-box i {
    font-size: 16px;
}

.media-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.media-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 5px 10px 5px 5px;
    font-size: 11px;
    color: #555;
    max-width: 160px;
}

.review-media-chip {
    width: 64px;
    height: 64px;
    padding: 0;
    max-width: none;
    justify-content: center;
    overflow: hidden;
}

/* .media-chip.review-media-chip (not just .review-media-chip) — the chips
   carry both classes, and .media-chip img/i further down sizes them for the
   OTHER (non-review) chip style at 26px; same specificity means source order
   would decide the winner, so this pins it down instead of depending on it. */
.media-chip.review-media-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.media-chip.review-media-chip i {
    width: auto;
    height: auto;
    background: none;
    font-size: 22px;
    color: #777;
}

.review-media-chip a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.media-chip.review-media-chip video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: #000;
}

.variation-manage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.variation-manage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
}

.variation-manage-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    flex-shrink: 0;
    overflow: hidden;
}

.variation-manage-thumb img,
.variation-manage-thumb video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.variation-manage-info {
    flex: 1;
    min-width: 120px;
}

.variation-manage-name {
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

.variation-manage-price {
    font-size: 11.5px;
    color: #888;
}

.variation-restock-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.variation-restock-form label {
    font-size: 11.5px;
    font-weight: 700;
    color: #555;
}

.variation-restock-form input {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

.media-chip img,
.media-chip video {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
}

.media-chip i {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.media-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-chip form {
    display: contents;
}

.media-chip-remove {
    border: none;
    background: none;
    color: #999;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.media-chip-remove:hover {
    color: #d33;
}

.rate-gocoin-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #a3720a;
    background: #fff8e8;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 4px 0 8px;
}

.rate-gocoin-hint i {
    color: #d9a441;
}

.rate-upload-row {
    display: flex;
    gap: 10px;
}

.rate-upload-row .rate-upload-box {
    flex: 1;
    justify-content: center;
    text-align: center;
}

.rate-camera-btn {
    background: none;
    font-family: inherit;
    width: 100%;
}

.review-media-chip {
    position: relative;
}

.review-media-chip .media-chip-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.review-media-chip .media-chip-remove:hover {
    background: rgba(208, 0, 27, .85);
    color: #fff;
}

.camera-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.camera-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #777;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: .12s;
}

.camera-mode-btn.active {
    border-color: #d0001b;
    color: #d0001b;
    background: rgba(208, 0, 27, .05);
}

.camera-preview-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.camera-preview-wrap video {
    width: 100%;
    max-height: 320px;
    display: block;
    background: #000;
}

.camera-rec-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.camera-rec-badge i {
    color: #d0001b;
    font-size: 8px;
    animation: cameraRecPulse 1s infinite;
}

@keyframes cameraRecPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.camera-error {
    color: #d0001b;
    font-size: 12.5px;
    margin-top: 10px;
}

.anon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #444;
    cursor: pointer;
}

.anon-toggle input {
    accent-color: #d0001b;
}

.rate-submit-btn {
    width: 100%;
    height: 46px;
    margin-top: 4px;
    background: #d0001b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
}

.rate-submit-btn:hover {
    background: #a80016;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 500px) {
    .empty-state {
        padding: 36px 20px;
        margin: 30px auto 50px;
    }

    .profile-card {
        padding: 28px 22px;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-hero-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-form-row {
        grid-template-columns: 1fr;
    }

    .order-item {
        flex-direction: column;
    }

    .order-item-action {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
}

/* =====================================================
   CATEGORY PAGE
===================================================== */

.category-page {
    max-width: 1200px;
}

.category-hero {
    background: linear-gradient(135deg, #1c0707, #2a0810 60%, #170003);
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 20px;
    color: #fff;
}

.category-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
}

.category-breadcrumb a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}

.category-breadcrumb a:hover {
    color: #d9a441;
}

.category-hero h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
}

.category-hero p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* =========================================================
   PRODUCT DETAIL PAGE
========================================================= */

.product-page {
    max-width: 1600px;
    padding: 20px 40px 60px;
}

.product-main-card {
    padding: 24px;
}

.product-detail-layout {
    display: grid;
    /* A fixed 420px gallery column left a growing dead strip of white space
       in .product-info as the page itself got wider — this scales the
       gallery proportionally (40% of however wide the card actually is,
       never below 320px) so both columns grow together instead of one
       staying frozen while the container widens around it. */
    grid-template-columns: minmax(320px, 40%) 1fr;
    gap: 32px;
    align-items: start;
}

.product-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #f7f7f7;
    overflow: hidden;
    /* Horizontal-scroll-snap strip instead of a single stacked image with
       display:none siblings — one full-size item per media file, swipeable
       on touch and click-to-jump from a thumbnail (selectProductImage()). */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.product-gallery-main::-webkit-scrollbar {
    display: none;
}

.product-gallery-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-main img,
.product-gallery-main video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery-empty {
    width: 100%;
    height: 100%;
    color: #ddd;
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-thumbs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 2px;
}

.product-gallery-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #f7f7f7;
}

.product-gallery-thumb img,
.product-gallery-thumb video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery-thumb.active {
    border-color: #d0001b;
}

.product-gallery-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.product-info {
    min-width: 0;
}

.product-title {
    font-size: 19px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
    line-height: 1.4;
}

.product-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #777;
    flex-wrap: wrap;
}

.product-meta-text {
    color: #777;
}

.product-meta-sep {
    color: #ddd;
}

.product-meta-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.product-top-actions {
    margin-bottom: 10px;
}

.product-report-link {
    color: #888;
    text-decoration: none;
    font-size: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.product-report-link:hover {
    color: #d0001b;
}

.product-favorite-form-compact {
    margin-left: 0;
}

.product-favorite-btn-compact {
    margin-left: 0;
    padding: 4px 10px;
    font-size: 11.5px;
}

.product-price-box {
    margin-top: 16px;
    background: #fafafa;
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.product-price-box .shop-product-price-now {
    font-size: 26px;
}

.product-discount-badge {
    background: #fff0f1;
    color: #d0001b;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.product-shipping-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    font-size: 12.5px;
    color: #444;
}

.product-shipping-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-voucher-banner {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(208,0,27,0.08);
    color: #d0001b;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
}

.product-variations-block {
    margin-top: 18px;
}

.product-variations-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.product-variations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Grouped products (Color/Size) repeat label+list per group — space the
   next group's label from the previous group's option row. */
.product-variations-list + .product-variations-label {
    margin-top: 16px;
}

.product-variation-swatch {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    background: #fff;
    transition: .12s;
}

.product-variation-swatch:hover:not(.disabled) {
    border-color: #d0001b;
}

.product-variation-swatch.selected {
    border-color: #d0001b;
    background: rgba(208,0,27,0.05);
    color: #d0001b;
    font-weight: 600;
}

.product-variation-swatch.disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.product-variation-swatch img,
.product-variation-swatch video {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: #f5f5f5;
}

.product-qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

/* Light-theme .cart-qty-stepper — the dark version lives in cart.css for
   the cart/checkout pages (which load that file after this one, so it
   still wins there); this page never loads cart.css, so without this the
   stepper renders with zero styling at all. */
.cart-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-qty-stepper button {
    width: 32px;
    height: 32px;
    background: #f7f7f7;
    border: none;
    color: #444;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}

.cart-qty-stepper button:hover {
    background: #eee;
}

.cart-qty-stepper button:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.cart-qty-stepper input {
    width: 44px;
    height: 32px;
    background: #fff;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    color: #222;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.product-qty-label {
    font-size: 12.5px;
    color: #555;
    font-weight: 600;
}

.product-actions {
    margin-top: 18px;
}

.product-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.product-share-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12.5px;
    border: none;
    cursor: pointer;
}

.product-share-icon:hover {
    background: #eee;
}

.product-favorite-form {
    margin-left: auto;
}

.product-favorite-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    margin-left: auto;
}

.product-favorite-btn.active {
    color: #d0001b;
    border-color: #d0001b;
}

.product-seller-card {
    margin-top: 20px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.product-seller-info {
    min-width: 160px;
}

.product-seller-name {
    font-weight: 700;
    color: #222;
    font-size: 14px;
}

.product-seller-actions {
    display: flex;
    gap: 10px;
}

.product-seller-stats {
    display: flex;
    gap: 22px;
    margin-left: auto;
    flex-wrap: wrap;
}

.product-seller-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.product-seller-avatar-wrap .shop-hero-avatar {
    background: #f5f5f5;
    border-color: #eee;
}

.product-seller-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ccc;
    border: 2.5px solid #fff;
}

.product-seller-dot.online {
    background: #2ecc71;
    box-shadow: 0 0 0 2px rgba(46,204,113,0.2);
}

.product-seller-address {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 3px 0 0;
    font-size: 12px;
    color: #888;
}

.product-seller-address i {
    color: #d0001b;
    font-size: 11px;
}

.product-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-stat strong {
    font-size: 14px;
    color: #222;
    font-weight: 700;
}

.product-stat span {
    font-size: 11px;
    color: #999;
}

/* Same shop-cover-photo background the shop page's own hero card uses
   (shop_cover_path) — adopted here too so the seller strip on a product
   page matches whatever look the seller set for their shop, with the same
   dark gradient overlay for text legibility over a photo. */
.product-seller-card-with-cover .product-seller-name,
.product-seller-card-with-cover .product-stat strong {
    color: #fff;
}

.product-seller-card-with-cover .product-seller-address {
    color: rgba(255, 255, 255, 0.75);
}

.product-seller-card-with-cover .product-seller-address i {
    color: #d9a441;
}

.product-seller-card-with-cover .product-stat span {
    color: rgba(255, 255, 255, 0.65);
}

.product-seller-card-with-cover .product-seller-avatar-wrap .shop-hero-avatar {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.product-specs-card,
.product-reviews-section {
    margin-top: 20px;
    padding: 24px;
}

.product-specs-card h3 {
    font-size: 15px;
    color: #222;
    margin: 0 0 14px;
}

.product-specs-list {
    display: flex;
    flex-direction: column;
}

.product-specs-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 13px;
    color: #333;
}

.product-specs-label {
    color: #999;
}

.product-description-text {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    white-space: pre-line;
}

.shop-product-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

/* Stacks well before the general 780px breakpoint below — the fixed-up-to-
   420px gallery column otherwise squeezes .product-info into a genuinely
   cramped ~270-300px strip in the 780-900px range (price/shipping text and
   the "123 available" label start wrapping awkwardly, same class of bug
   the services strip had) before there's enough room for two columns. */
@media (max-width: 920px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .product-page {
        padding: 16px 16px 40px;
    }

    /* A plain wrapping flex row left these 4 stats raggedly spaced once
       they dropped to their own line below the seller info — a longer
       label like "4 weeks ago" pushed its neighbors unevenly. A fixed
       2x2 grid keeps every stat the same width and evenly aligned. */
    .product-seller-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
        margin-top: 14px;
        width: 100%;
        gap: 14px 10px;
    }
}

/* =========================================================
   PRODUCT REVIEWS PAGE
========================================================= */

.review-page {
    padding: 20px 40px 60px;
}

.review-summary-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.review-summary-score {
    text-align: center;
    flex-shrink: 0;
}

.review-summary-number {
    font-size: 30px;
    font-weight: 800;
    color: #d0001b;
    line-height: 1;
}

.review-summary-number span {
    font-size: 15px;
    font-weight: 600;
    color: #aaa;
}

.review-summary-score .rating-stars {
    font-size: 14px;
    margin-top: 6px;
}

.review-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.review-filter-chip {
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: .15s;
}

.review-filter-chip:hover {
    border-color: #d0001b;
}

.review-filter-chip.active {
    background: #d0001b;
    border-color: #d0001b;
    color: #fff;
}

.review-page-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 680px;
}

@media (max-width: 780px) {
    .review-page {
        padding: 16px 16px 40px;
    }

    .review-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

.category-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: stretch;
}

.category-sidebar {
    position: sticky;
    /* Below the pinned top bar + site header (home.css). */
    top: calc(var(--site-pinned-h, 0px) + 16px);
    align-self: start;
}

.category-main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.category-empty-state {
    flex: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-filter-card {
    padding: 20px;
}

.category-filter-card h3 {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-filter-card h3 i {
    color: #d0001b;
}

.category-filter-group {
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
}

.category-filter-card > .category-filter-group:first-of-type {
    border-top: none;
    padding-top: 0;
}

.category-filter-group h4 {
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.category-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-price-inputs input {
    width: 0;
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #333;
}

.category-price-inputs input:focus {
    outline: none;
    border-color: #d9a441;
}

.category-price-inputs span {
    color: #bbb;
    font-size: 12px;
}

.category-subcat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-subcat-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    transition: .15s;
    line-height: 1.3;
}

.category-subcat-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.category-subcat-pill:hover {
    border-color: #d0001b;
    color: #d0001b;
}

.category-subcat-pill.active {
    background: #d0001b;
    border-color: #d0001b;
    color: #fff;
    font-weight: 600;
}

.category-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #333;
    padding: 6px 0;
    cursor: pointer;
}

.category-filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #d0001b;
    cursor: pointer;
}

.category-filter-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #d0001b;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 18px;
    transition: .15s;
}

.category-filter-apply:hover {
    background: #a80016;
}

.category-filter-clear {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 12px;
    text-decoration: none;
}

.category-filter-clear:hover {
    color: #d0001b;
    text-decoration: underline;
}

.category-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.category-result-count {
    font-size: 13px;
    color: #666;
}

.category-result-count strong {
    color: #111;
}

.category-sort select {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-family: inherit;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.category-shipping-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    margin-top: 6px;
    margin-right: 4px;
}

.category-shipping-tag.free {
    background: #e8f6ec;
    color: #1f8a4c;
}

.category-shipping-tag.fast {
    background: #fdf1de;
    color: #b8790a;
}

@media (max-width: 800px) {
    .category-layout {
        grid-template-columns: 1fr;
    }

    .category-sidebar {
        position: static;
    }
}

/* =====================================================
   SELLER SHOP PREVIEW BANNER (sellershop.blade.php)
===================================================== */

.seller-preview-banner {
    background: linear-gradient(90deg, #fdf1de, #fff8ec);
    border: 1px solid #f0dcb0;
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 20px;
}

.seller-preview-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7a5218;
    flex-wrap: wrap;
}

.seller-preview-banner-inner > i {
    color: #d9a441;
}

.seller-preview-banner-inner a {
    margin-left: auto;
    color: #d0001b;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.seller-preview-banner-inner a:hover {
    text-decoration: underline;
}

/* =====================================================
   SHOP POSTS FEED
===================================================== */

.shop-post-composer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 20px;
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    transition: .15s;
}

.shop-post-composer:hover {
    background: #f3f3f3;
}

.shop-post-composer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}

.shop-post-composer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-post-composer-input {
    flex: 1;
    font-size: 13px;
    color: #999;
}

.shop-post-composer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #d0001b;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.shop-post-composer-btn:hover {
    background: #a80016;
}

.shop-posts-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px 20px;
}

.shop-post-card {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.shop-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.shop-post-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fafafa;
    border: 1px solid #eee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}

.shop-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-post-head-info {
    flex: 1;
    min-width: 0;
}

.shop-post-shop-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.shop-post-time {
    font-size: 11px;
    color: #999;
}

.shop-post-menu {
    position: relative;
}

.shop-post-menu-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 15px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
}

.shop-post-menu-btn:hover {
    background: #f2f2f2;
    color: #333;
}

.shop-post-menu-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(17,17,17,0.12);
    padding: 6px;
    z-index: 20;
    min-width: 180px;
}

.shop-post-menu-list.show {
    display: block;
}

.shop-post-menu-list button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 9px 10px;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
}

.shop-post-menu-list button:hover {
    background: #f7f7f7;
}

.shop-post-menu-list button.danger {
    color: #d0001b;
}

.shop-post-caption {
    padding: 0 16px 10px;
    font-size: 13.5px;
    color: #333;
    line-height: 1.6;
    white-space: pre-line;
}

.shop-post-media {
    width: 100%;
    max-height: 480px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop-post-media img,
.shop-post-media video {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.shop-post-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 12px;
    color: #999;
    border-bottom: 1px solid #f2f2f2;
}

.shop-post-reaction-summary {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shop-post-reaction-summary-clickable {
    cursor: pointer;
}

.shop-post-reaction-summary-clickable:hover {
    text-decoration: underline;
}

.shop-post-reaction-icon-sm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    color: #fff;
    border: 1.5px solid #fff;
    margin-left: -6px;
}

.shop-post-reaction-icon-sm:first-child {
    margin-left: 0;
}

.shop-post-reaction-icon-sm.heart { background: #ed4956; }
.shop-post-reaction-icon-sm.like { background: #1877f2; }
.shop-post-reaction-icon-sm.angry { background: #e9710f; }
.shop-post-reaction-icon-sm.care { background: #f7b125; }
.shop-post-reaction-icon-sm.sad { background: #54c7ec; }

.shop-post-reaction-summary span:last-child,
.shop-post-comment-reaction-summary span:last-child {
    margin-left: 6px;
}

/* Per-comment reaction badge — same overlapping colored-circle icons as the
   post-level summary above, pushed to the far right of the meta row to
   match Facebook's own comment layout (time/Like/Reply on the left, the
   reaction count badge on the right). */
.shop-post-comment-reaction-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 11px;
    color: #777;
}

.shop-post-actions {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f2f2f2;
}

.shop-post-actions form {
    flex: 1;
    display: flex;
}

.shop-post-react-wrap {
    position: relative;
    flex: 1;
    display: flex;
}

.shop-post-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 11px;
    font-size: 12.5px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    transition: .1s;
}

.shop-post-action-btn:hover {
    background: #f7f7f7;
}

.shop-post-action-btn.reacted.heart { color: #ed4956; }
.shop-post-action-btn.reacted.like { color: #1877f2; }
.shop-post-action-btn.reacted.angry { color: #e9710f; }
.shop-post-action-btn.reacted.care { color: #b8790a; }
.shop-post-action-btn.reacted.sad { color: #54c7ec; }

.shop-post-reaction-picker {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    box-shadow: 0 10px 24px rgba(17,17,17,0.14);
    padding: 6px 8px 16px;
    gap: 4px;
    margin-bottom: -10px;
    z-index: 20;
}

/* Hover still works as a bonus on desktop, but is no longer the only way
   to open it — clicking (toggleReactionPicker(), shop-body.blade.php)
   keeps it open with a .show class, which is what actually lets someone
   move the mouse in and pick a reaction without it vanishing first. The
   padding-instead-of-margin gap above closes the old dead zone that broke
   :hover the instant the cursor left the button on the way up. */
.shop-post-react-wrap:hover .shop-post-reaction-picker,
.shop-post-reaction-picker.show {
    display: flex;
}

.shop-post-reaction-picker form {
    flex: none;
    display: block;
}

.shop-post-reaction-option {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: transform .1s;
}

.shop-post-reaction-option:hover {
    transform: scale(1.18);
}

/*
 * Colored at rest, not just on hover/active — matches the real Facebook
 * picker where every reaction is already its own color before you touch
 * it. Keyed by the reaction's own type class (each button already renders
 * with e.g. class="shop-post-reaction-option heart") rather than
 * :nth-child — every option button is the lone child of its own <form>
 * wrapper, so :nth-child(N) can only ever match N=1 and silently picks
 * whichever same-specificity rule happens to load last for every icon.
 * care and sad deliberately no longer collide on the same brown (#b8790a)
 * they used to share.
 */
.shop-post-reaction-option.heart i { color: #ed4956; }
.shop-post-reaction-option.like i { color: #1877f2; }
.shop-post-reaction-option.angry i { color: #e9710f; }
.shop-post-reaction-option.care i { color: #f7b125; }
.shop-post-reaction-option.sad i { color: #54c7ec; }

.shop-post-reaction-option.active { background: #fdf1de; }
.shop-post-reaction-option:hover i,
.shop-post-reaction-option.active i { filter: brightness(0.85); }

.shop-post-comments {
    padding: 10px 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-post-comment-count {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    padding: 0;
}

.shop-post-comment-count:hover {
    text-decoration: underline;
}

.shop-post-comment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.shop-post-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fafafa;
    border: 1px solid #eee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    overflow: hidden;
    margin-top: 2px;
}

.shop-post-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-post-comment-main {
    flex: 1;
    min-width: 0;
}

.shop-post-comment-body {
    font-size: 12.5px;
    color: #333;
    line-height: 1.5;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 8px 12px;
    /* display:table shrink-wraps the bubble to its text instead of
       stretching across the whole comment column, and (being block-level,
       unlike inline-block) plays nicely with margin-left:auto below. */
    display: table;
    max-width: 78%;
}

/* Chat-style side: the viewer's own comments float right, everyone else's
   stay left — mirrors on both the bubble and the time/Like/Reply row below
   it, and flips which side the avatar sits on to match. */
.shop-post-comment-own {
    flex-direction: row-reverse;
}

.shop-post-comment-own .shop-post-comment-body {
    margin-left: auto;
    background: #1877f2;
    color: #fff;
}

.shop-post-comment-own .shop-post-comment-body strong {
    color: #fff;
}

.shop-post-comment-own .shop-post-comment-body .shop-post-mention {
    color: #d6e6ff;
}

.shop-post-comment-own .shop-post-comment-meta {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 12px;
}

.shop-post-comment-own .shop-post-comment-reaction-summary {
    margin-left: 0;
}

.shop-post-comment strong {
    margin-right: 6px;
    color: #111;
}

.shop-post-mention {
    color: #1877f2;
    font-weight: 600;
}

.shop-post-comment-time {
    font-size: 10.5px;
    color: #aaa;
}

/* -----------------------------------------------------
   COMMENT META ROW — time · Like · Reply, Facebook-style
   text links directly under the comment bubble.
----------------------------------------------------- */

.shop-post-comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 12px;
}

.shop-post-comment-dot {
    color: #ccc;
    font-size: 11px;
}

.shop-post-comment-action {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    padding: 0;
}

.shop-post-comment-action:hover {
    text-decoration: underline;
    color: #333;
}

.shop-post-comment-action.reacted.heart { color: #ed4956; }
.shop-post-comment-action.reacted.like { color: #1877f2; }
.shop-post-comment-action.reacted.angry { color: #e9710f; }
.shop-post-comment-action.reacted.care { color: #b8790a; }
.shop-post-comment-action.reacted.sad { color: #54c7ec; }

/* inline-flex (not inline-block) so the wrap's box hugs the Like button's
   own height exactly — inline-block instead let the form's default 16px
   font metrics add an invisible "strut" that nudged Like a pixel off-center
   from Reply, which sits directly in the flex row with no such wrapper. */
.shop-post-comment-react-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.shop-post-comment-react-wrap form {
    display: inline-flex;
    margin: 0;
}

.shop-post-comment-reaction-picker {
    left: 0;
}

.shop-post-comment-replies {
    margin: 10px 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-post-comment-form {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
}

.shop-post-comment-form input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-family: inherit;
}

.shop-post-comment-form input:focus {
    outline: none;
    border-color: #d9a441;
}

/*
 * A contenteditable div standing in for what used to be a plain <input>
 * (see shop-post-card.blade.php) — only reason: an <input>'s value is one
 * plain string, so there's no way to render part of it (the auto-inserted
 * "@Name" mention) in a different color. Sized and bordered to look
 * identical to the input it replaced.
 */
.shop-post-comment-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-family: inherit;
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.shop-post-comment-input:focus {
    outline: none;
    border-color: #d9a441;
}

.shop-post-comment-input:empty::before {
    content: attr(data-placeholder);
    color: #999;
}

.shop-post-comment-form button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #d0001b;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.shop-post-comment-form button:hover {
    background: #a80016;
}

.shop-post-comments-off {
    padding: 0 16px 16px;
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* =====================================================
   PRODUCT SORT PILLS
===================================================== */

.shop-sort-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px 0;
}

.shop-sort-pill {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
    white-space: nowrap;
}

.shop-sort-pill:hover {
    border-color: #d9a441;
    color: #b8790a;
}

.shop-sort-pill.active {
    background: #d0001b;
    border-color: #d0001b;
    color: #fff;
}

/* =====================================================
   PRODUCT FOLDERS (CATEGORIES TAB)
===================================================== */

.shop-folder-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px 0;
}

.shop-folder-grid {
    display: grid;
    /* Fixed-size tiles, not stretchy 1fr columns: a folder card is mostly
       a square thumbnail (aspect-ratio 1/1) with two short lines of text
       below it — unlike a product card, it has no extra content to grow
       into, so letting it stretch to fill leftover row space (as the
       product grid does) blows the thumbnail up into an oversized square
       and makes the tile look disproportionate. justify-content keeps a
       row of fewer-than-full tiles left-aligned instead of stretched. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 200px));
    justify-content: start;
    gap: 16px;
    padding: 16px 20px 20px;
}

/* Seller's menu on a category card (shop-body, owner view only). */
.shop-folder-item {
    position: relative;
}

.shop-folder-menu {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 3;
}

.shop-folder-menu-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #344054;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .15);
    transition: background .15s;
}

.shop-folder-menu-btn:hover,
.shop-folder-menu.open .shop-folder-menu-btn {
    background: #fff;
    color: #d0001b;
}

.shop-folder-menu-list {
    display: none;
    position: absolute;
    top: 38px;
    right: 0;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}

.shop-folder-menu.open .shop-folder-menu-list {
    display: block;
}

.shop-folder-menu-list a,
.shop-folder-menu-list button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #344054;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.shop-folder-menu-list a:hover,
.shop-folder-menu-list button:hover {
    background: #f9fafb;
}

.shop-folder-menu-list form {
    margin: 0;
}

.shop-folder-menu-list .danger {
    color: #d0001b;
}

.shop-folder-menu-list .danger:hover {
    background: #fef3f2;
}

.shop-folder-card {
    display: block;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: .15s;
}

.shop-folder-card:hover {
    box-shadow: 0 12px 26px rgba(17,17,17,0.09);
    transform: translateY(-2px);
    border-color: #d9a441;
}

.shop-folder-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #f7f7f7;
}

.shop-folder-thumb {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 16px;
    overflow: hidden;
}

.shop-folder-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-folder-thumb.empty,
.shop-folder-thumb-solo {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.shop-folder-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.shop-folder-count {
    font-size: 11.5px;
    color: #999;
}

.shop-folder-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 4px;
}

.shop-folder-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #d0001b;
    text-decoration: none;
}

.shop-folder-back:hover {
    text-decoration: underline;
}

.shop-folder-detail-head h3 {
    font-size: 15px;
    color: #111;
    margin: 0;
}

/* =====================================================
   FOLLOWERS MODAL
===================================================== */

.followers-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 4px;
}

.followers-modal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
}

.followers-modal-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fafafa;
    border: 1px solid #eee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.followers-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.followers-modal-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.followers-modal-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.followers-modal-time {
    font-size: 11px;
    color: #999;
}

/* -----------------------------------------------------
   WHO-REACTED MODAL — tabs above the followers-style list,
   one per reaction type actually present, divided by a thin
   vertical rule like Facebook's own reaction modal.
----------------------------------------------------- */

.reactors-modal-tabs {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #eee;
    margin: 14px 0 14px;
    padding-bottom: 10px;
    overflow-x: auto;
}

.reactors-modal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    padding: 0 0 8px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.reactors-modal-tab.active {
    color: #111;
    border-bottom-color: #1877f2;
}

.reactors-modal-tab-divider {
    width: 1px;
    height: 16px;
    background: #eee;
    flex-shrink: 0;
}

/* -----------------------------------------------------
   ADD TO CART — FLY TO CART ANIMATION
   A floating GoMate + product thumbnail element, positioned with
   Web Animations API (see cart-actions-script.blade.php's flyToCart()),
   arcing from wherever "Add to Cart" was clicked to the header cart icon.
----------------------------------------------------- */

.fly-to-cart {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    width: 56px;
    height: 56px;
}

.fly-to-cart-mascot {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
}

.fly-to-cart-product {
    position: absolute;
    right: -4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.fly-to-cart-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes cartIconBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.35) rotate(-6deg); }
    60% { transform: scale(0.92) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.header-action.cart-bump .action-icon {
    animation: cartIconBump .5s cubic-bezier(.34,1.56,.64,1);
}

.header-action.cart-bump .badge {
    animation: cartIconBump .5s cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce) {
    .header-action.cart-bump .action-icon,
    .header-action.cart-bump .badge {
        animation: none;
    }
}

/* Chat 1,000-character limit counter (resources/js/lib/chat-limit.js) */
.chat-limit-counter { align-self: center; margin: 0 6px; font-size: 11.5px; font-weight: 700; color: #b45309; white-space: nowrap; }
.chat-limit-counter[hidden] { display: none; }
.chat-limit-counter.is-over { color: #dc2626; }
.chat-limit-over { outline: 2px solid #fca5a5 !important; border-radius: 8px; }

/* Rate modal — the one-edit notice and the 5-photo count */
.rate-edit-notice { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; line-height: 1.45; }
.rate-edit-notice[hidden] { display: none; }
.rate-edit-notice i { margin-top: 2px; }
.rate-media-count { float: right; font-size: 12px; font-weight: 700; color: #6b7280; }
.rate-media-count.is-full { color: #15803d; }
.rate-upload-row[hidden] { display: none; }

/* Edit Profile address (PSGC dropdowns) */
.profile-form-group select:disabled { background-color: #f9fafb; color: #9ca3af; cursor: not-allowed; }
.psgc-error { margin: 2px 0 10px; padding: 9px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; }

.shop-hero-desc { margin: 4px 0 6px; max-width: 640px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.88); white-space: pre-line; overflow-wrap: anywhere; }

.shop-folder-parent { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; }
.shop-folder-hidden { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 10.5px; font-weight: 700; }

.product-sale-ends { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #fff1f2; color: #b91c1c; font-size: 12px; font-weight: 700; }

/* Product page: Flash Deal bar with its live countdown */
.product-flash-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; padding: 10px 16px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #d0001b, #ff4d2e); color: #fff; }
.product-flash-bar + .product-price-box { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.pfb-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.pfb-title i { color: #ffe066; }
.pfb-timer { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pfb-clock { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.pfb-clock b { min-width: 26px; padding: 3px 5px; border-radius: 6px; background: #111827; color: #fff; font-size: 13px; text-align: center; }
.product-flash-bar.is-ended { background: #6b7280; }
.product-price-box.is-flash .shop-product-price-now { color: #d0001b; }
@media (max-width: 520px) { .product-flash-bar { padding: 10px 12px; } .pfb-title { font-size: 13.5px; } }

/* Product page: seller vouchers — compact tickets, two per row, scale to many */
.pv-block { margin: 4px 0 14px; }
.pv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pv-head span { font-size: 13.5px; font-weight: 800; color: #111827; }
.pv-head span i { color: #d0001b; margin-right: 6px; }
.pv-head span b { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #fff1f2; color: #d0001b; font-size: 11px; }
.pv-head em { font-style: normal; font-size: 11.5px; color: #9ca3af; }
.pv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pv-ticket { display: flex; align-items: stretch; height: 64px; border-radius: 10px; background: #fff; border: 1px solid #fde2e4; overflow: hidden; }
.pv-ticket[hidden] { display: none; }
.pv-stub { position: relative; flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #d0001b, #ff4d2e); color: #fff; }
.pv-stub strong { font-size: 17px; font-weight: 900; line-height: 1; letter-spacing: -.3px; white-space: nowrap; }
.pv-stub.is-long strong { font-size: 13px; }
.pv-stub span { margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.pv-stub::after { content: ""; position: absolute; top: 4px; bottom: 4px; right: -4px; width: 8px; background: radial-gradient(circle at 4px 4px, #fff 2.6px, transparent 3px) 0 0 / 8px 9px repeat-y; }
.pv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 8px 6px 12px; }
.pv-title { font-size: 12.5px; font-weight: 800; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-terms { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 10.5px; color: #9ca3af; white-space: nowrap; overflow: hidden; }
.pv-code { padding: 0 5px; border: 1px dashed #f3a6ad; border-radius: 4px; color: #d0001b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.pv-action { display: flex; align-items: center; padding-right: 8px; }
.pv-action form { margin: 0; }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; padding: 0 12px; border: none; border-radius: 6px; background: #d0001b; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pv-btn:hover { background: #a80016; }
.pv-btn[disabled] { opacity: .6; cursor: wait; }
.pv-btn.is-done { padding: 0 8px; background: #ecfdf3; color: #15803d; cursor: default; }
.pv-btn.is-muted { padding: 0 8px; background: #f3f4f6; color: #6b7280; cursor: default; }
.pv-ticket.is-claimed { border-color: #bbf7d0; }
.pv-ticket.is-used { opacity: .55; }
.pv-ticket.is-used .pv-stub { background: #9ca3af; }
.pv-more { display: block; margin: 8px auto 0; padding: 4px 12px; border: none; background: none; color: #d0001b; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
[data-theme="dark"] .pv-ticket { background: #1f2937; border-color: #3f1d22; }
[data-theme="dark"] .pv-title, [data-theme="dark"] .pv-head span { color: #f9fafb; }

/* Category card: a single cover photo */
.shop-folder-thumbs.shop-folder-cover { display: block; }
.shop-folder-cover .shop-folder-thumb-solo { width: 100%; height: 100%; display: grid; place-items: center; }
.shop-folder-cover .shop-folder-thumb-solo img { width: 100%; height: 100%; object-fit: contain; }
.shop-folder-cover .shop-folder-thumb-solo i { font-size: 28px; color: #d1d5db; }

/* =====================================================
   STORE FLASH DEALS — a seller's own flash deal on their
   store page (partials/shop-body), with a live countdown
===================================================== */
.store-flash { margin: 0 0 22px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #1c0707 0%, #3a0a10 55%, #170003 100%); color: #fff; box-shadow: 0 8px 24px rgba(28, 7, 7, .18); }
.store-flash.is-upcoming { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); }
.store-flash-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.store-flash-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.store-flash-bolt { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #f4d99a, #d9a441); color: #4a2e05; font-size: 18px; }
.store-flash-title h3 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.store-flash-title p { margin: 2px 0 0; font-size: 12.5px; color: #f4d99a; }
.store-flash-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.store-flash-timer small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d6c3a1; }
.store-flash-timer span { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #f4d99a; }
.store-flash-timer b { min-width: 34px; padding: 6px 0; border-radius: 8px; background: #fff; color: #b30019; font-size: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.store-flash.is-upcoming .store-flash-timer b { color: #111827; }
.store-flash-grid { margin: 0; }
.store-flash-grid .shop-product-item { background: #fff; border-radius: 12px; }
.store-flash-badge { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #d0001b; color: #fff; font-size: 11px; font-weight: 800; }
.store-flash.is-upcoming .store-flash-badge { background: #111827; color: #f4d99a; }
.store-flash-soon { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #1d4ed8; }
.store-flash-inline { background: #fff1f2; color: #b30019; }
.store-flash-inline b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .store-flash-timer { align-items: flex-start; }
    .store-flash-timer b { min-width: 30px; font-size: 14px; }
}

/* Store Flash Deals — inset like the composer, compact fixed-size cards */
.store-flash { margin: 16px 20px 6px; padding: 14px 16px 16px; border-radius: 14px; }
.store-flash-head { margin-bottom: 12px; }
.store-flash-bolt { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.store-flash-title h3 { font-size: 16px; }
.store-flash-timer b { min-width: 30px; padding: 5px 0; font-size: 14px; }
.store-flash-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.store-flash-row::-webkit-scrollbar { height: 6px; }
.store-flash-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 999px; }
.store-flash-card { flex: 0 0 168px; scroll-snap-align: start; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.store-flash-card .shop-product-thumb { aspect-ratio: 1 / 1; font-size: 28px; }
.store-flash-card .shop-product-body { padding: 8px 10px 10px; }
.store-flash-card .shop-product-name { font-size: 12.5px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.store-flash-card .shop-product-price { margin-top: 4px; flex-wrap: wrap; gap: 0 6px; }
.store-flash-card .shop-product-price-now { font-size: 14px; }
.store-flash-card .shop-product-price-was { font-size: 11px; }
.store-flash-card .shop-product-stock { margin-top: 2px; font-size: 11px; }
.store-flash-soon { font-size: 10.5px; }
.store-flash-badge { top: 6px; left: 6px; padding: 2px 7px; font-size: 10.5px; }
@media (max-width: 640px) {
    .store-flash { margin: 12px 12px 4px; }
    .store-flash-card { flex-basis: 142px; }
}

/* Shop (seller) Flash Deal on the product page — same bar as GoCart Flash Deals */
.pfb-shop-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.product-flash-bar.is-upcoming { background: linear-gradient(90deg, #111827, #374151); border-radius: 12px; }
.product-flash-bar.is-upcoming .pfb-title i { color: #f4d99a; }
.pfb-upcoming-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; padding: 9px 14px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; }
.pfb-upcoming-note strong { color: #b30019; }

/* Evidence / statement request modal (partials/evidence-request-modal) */
.er-modal { width: 560px; max-width: 94vw; max-height: 90vh; overflow-y: auto; }
.er-modal h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.er-modal h2 i { color: #d0001b; }
.er-ask { margin: 12px 0 14px; padding: 12px 14px; border-left: 3px solid #d0001b; border-radius: 10px; background: #fff5f5; }
.er-ask span { display: block; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.er-ask p { margin: 4px 0 0; font-size: 14px; color: #111827; white-space: pre-line; }
.er-form { display: grid; gap: 12px; }
.er-field { display: grid; gap: 6px; }
.er-field span { font-size: 12.5px; font-weight: 700; color: #374151; }
.er-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font: inherit; font-size: 13.5px; resize: vertical; }
.er-field textarea:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.er-upload { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed #d1d5db; border-radius: 12px; background: #fafafa; cursor: pointer; }
.er-upload:hover { border-color: #d0001b; background: #fff8f8; }
.er-upload i { font-size: 22px; color: #d0001b; }
.er-upload span { font-size: 12px; color: #6b7280; }
.er-upload strong { display: block; font-size: 13.5px; color: #111827; }
.er-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.er-files { margin-top: -6px; font-size: 12px; color: #374151; overflow-wrap: anywhere; }
.er-done { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #ecfdf3; color: #166534; }
.er-done i { margin-top: 2px; }
.er-done p { margin: 4px 0; color: #14532d; white-space: pre-line; }
.er-flash { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: #111827; color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: er-flash-out .4s ease 4s forwards; }
@keyframes er-flash-out { to { opacity: 0; visibility: hidden; } }

/* New-user vouchers (Select Voucher page) */
.voucher-newuser-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(120deg, #fff1f2, #fff7ed); border: 1px solid #fecdd3; color: #7f1d1d; font-size: 13px; line-height: 1.5; }
.voucher-newuser-banner i { margin-top: 2px; color: #d0001b; font-size: 16px; }
.voucher-tag.voucher-tag-newuser { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }