.page {
    padding: 24px 0 0;
}
.page .container {
    max-width: 1740px;
    margin-inline: auto;
}
svg,
img {
    vertical-align: bottom;
}
/*breadcumbs*/
.breadcumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.breadcumbs .breadcumb-link {
    font-size: 14px;
    line-height: 20px;
    padding-left: 15px;
    position: relative;
}
.breadcumbs li:first-child .breadcumb-link {
    padding-left: 0;
}
.breadcumbs li:last-child .breadcumb-link {
    color: #878d99;
}
.breadcumbs .breadcumb-link:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    background-color: #afb8cc;
    top: 50%;
    transform: translateY(-50%);
    left: 6px;
    border-radius: 5px;
}
.breadcumbs li:first-child .breadcumb-link:before {
    display: none;
}
.page .breadcumbs {
    margin-bottom: 16px;
}
/*end breadcumbs*/
.page-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.item-dates {
    width: 100%;
    display: flex;
    gap: 16px;
    margin-top: 4px;
}
.item-date {
    font-size: 14px;
    line-height: 20px;
    color: #878d99;
    font-weight: 400;
}
.tag {
    font-size: 13px;
    line-height: 20px;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
    background-color: var(--primary-light);
    color: var(--primary);
}
.tag.canceled {
    background: #fce5e2;
    color: #ba5e5e;
}
.tag.in-progress {
    background: #fdf2c6;
    color: #a18612;
}
.tag.requested {
    background: #e5f5fb;
    color: #2a7e9e;
}
/* Asset-status tags — one color per consignment_asset_status so the top-of-page
   badge is visually distinct for each stage. Registered=yellow, Processed=orange,
   Published=green, Ordered=blue, Paid=red, Shipped=purple, Delivered=solid green. */
.tag.registered {
    background: #fdf2c6;
    color: #a18612;
}
.tag.processed {
    background: #fff4e5;
    color: #b76e00;
}
.tag.published {
    background: #e8f5e9;
    color: #2aa466;
}
.tag.ordered {
    background: #e5f5fb;
    color: #2a7e9e;
}
.tag.paid {
    background: #fce5e2;
    color: #d92d20;
}
.tag.shipped {
    background: #f0e9fb;
    color: #7c3aed;
}
.tag.delivered {
    background: var(--primary);
    color: #fff;
}
/* View-only badge — neutral gray pill with a lock icon, sits beside the status
   tag to flag that the current user can't edit this item. */
.tag.view-only {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef0f3;
    color: #5a6472;
}
.tag.view-only svg {
    display: block;
}
.page-title-wrapper .tag {
    border-radius: 24px;
    padding: 4px 12px;
    white-space: nowrap;
}
.status-tab-wrapper {
    border: 1px solid #f3f3f3;
    border-radius: 32px;
    padding: 54px 16px;
    margin: 24px 0 40px;
    text-align: center;
}
.status-tab-wrapper ul {
    display: flex;
    gap: 0;
}
.status-label {
    font-size: 13px;
    line-height: 19px;
    color: #878d99;
    padding: 2px 10px;
    background-color: #f3f3f3;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    white-space: nowrap;
}
.status-tab-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: #cdcdcd;
    border-radius: 20px;
    background-image: url(../img/question-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.status-tab-block-info {
    display: none;
}
.status-label.current {
    background-color: var(--primary);
    color: #fff;
}
.status-label.current .status-tab-icon {
    background-color: rgba(255, 255, 255, 0.5);
}
.status-label.completed {
    background-color: var(--primary-light);
    color: var(--primary);
}
.status-tab-block {
    position: relative;
    display: flex;
    align-items: center;
}
.status-tab-block:before {
    position: absolute;
    content: "";
    width: 40px;
    height: 1px;
    background: #cdcfd4;
    left: -30px;
    z-index: -1;
}
.status-tab-wrapper ul li:first-child .status-tab-block:before {
    display: none;
}
.status-tab-wrapper li,
.status-bottom-sub-blocks .sub-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    position: relative;
}
.status-tab-wrapper li:first-child,
.status-bottom-sub-blocks .sub-block:first-child {
    padding: 0;
}
.status-tab-inner {
    max-width: max-content;
    margin-inline: auto;
    padding-left: 40px;
}
.status-tab-wrapper li.process-qi, .status-tab-wrapper li.processqi {
    padding-left: 210px;
}
.process-qi .status-tab-block:before, .processqi .status-tab-block:before {
    width: 230px;
    left: -220px;
}
.status-top-sub-blocks {
    width: 296px;
    text-align: center;
    border: 1px dashed #cdcfd4;
    height: 44px;
    border-bottom: 0;
    margin-left: 150px;
    border-radius: 12px 12px 0 0;
}
.status-top-sub-blocks .sub-block {
    margin-top: -12px;
}
.status-bottom-sub-blocks {
    display: inline-flex;
    padding-top: 62px;
    position: relative;
    left: -40px;
}
.status-bottom-sub-blocks .sub-block {
    justify-content: center;
}
.status-bottom-sub-blocks .sub-block status-label:before {
    left: 50%;
    width: 1px;
    height: 20px;
    top: -20px;
    transform: translateX(-50%);
}
.sub-block.recycled .status-label:before,
.sub-block.local-sale .status-label:before {
    position: absolute;
    content: "";
    left: 50%;
    width: 1px;
    height: 24px;
    top: -24px;
    background: #cdcfd4;
}
.status-bottom-sub-blocks:before {
    position: absolute;
    content: "";
    border: 1px solid #cdcfd4;
    width: 282px;
    height: 24px;
    border-radius: 12px 12px 0 0;
    left: 36px;
    bottom: 24px;
    border-bottom: 0;
}
.status-bottom-sub-blocks:after {
    position: absolute;
    content: "";
    top: 0;
    width: 1px;
    height: 38px;
    background: #cdcfd4;
    left: 190px;
}
.page-main {
    display: flex;
    gap: 20px;
    align-items: start;
    flex-wrap: wrap;
    margin-top: 40px;
}
.page-sidebar {
    box-shadow: 0 12px 40px 0 rgba(61, 66, 69, 0.12);
    border-radius: 24px;
    position: sticky;
    top: 110px;
    width: 280px;
    z-index: 8;
    background-color: #fff;
}
.page .action-buttons .btn {
    margin: 0;
    padding: 6px 16px;
    height: auto;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    gap: 8px;
    border-radius: 12px;
    height: 40px;
}
.action-buttons .btn:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: #17181a;
}
.action-buttons.card-abtn {
    gap: 32px;
}
.toggle-container .switch {
    all: unset;
}
.toggle-container .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 28px;
}
.switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: #898f99;
    border-radius: 50%;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-container input[type="checkbox"] {
    all: unset;
}
.toggle-container input[type="checkbox"]:before {
    display: none;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cdcfd4;
    transition: 0.4s;
    border-radius: 23px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background-color: #454b54;
    transition: 0.4s;
    border-radius: 50%;
}
.switch input:checked + .slider:before {
    transform: translateX(16px);
    background: var(--primary-light);
}
.switch input[type="checkbox"]:checked {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    opacity: 1;
}
.switch input:checked + .slider {
    background-color: var(--primary);
}
.toggle-container .toggle-text {
    width: calc(101% - 56px);
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch input:checked + .slider {
    background-color: var(--primary);
}
.switch input:checked + .slider:before {
    transform: translateX(16px);
    background: var(--primary-light);
}
.sidebar-tab a {
    display: flex;
    padding: 16px 20px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.action-buttons.action-top {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.action-buttons.action-bottom {
    padding: 8px 20px 20px;
}
.page .action-buttons .btn.discard-btn {
    border: 2px solid rgba(245, 98, 98, 0.2);
    background: transparent;
    color: #17181a;
    justify-content: center;
    width: 100%;
}
.page .action-buttons .btn.discard-btn:hover {
    background-color: #fcf1ef;
    border-color: #fcf1ef;
    color: #f56262;
}
.sidebar-tab a.active,
.sidebar-tab a:hover {
    color: var(--primary);
}
.sidebar-tab a:hover {
    background-color: var(--primary-light);
}
.sidebar-tab a.active>svg path,
.sidebar-tab a:hover>svg path {
    fill: var(--primary);
}
.sidebar-tab a.notes.active>svg path,
.sidebar-tab a.notes:hover>svg path,
.sidebar-tab a.connections.active>svg path,
.sidebar-tab a.connections:hover>svg path {
    fill: none;
    stroke: var(--primary);
}
.page-content {
    max-width: 1080px;
    width: calc(100% - 300px);
}
.page-content .sec {
    border: 6px solid var(--primary-light);
    border-radius: 32px;
    padding: 40px;
}
.slider-main-img, .slider-main-img a {
    width: 100%;
    height: 100%;
    display: block;
}
.slider-main-img {
    position: relative;
}
.main-img-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 3;
}
.main-img-actions.hidden {
    display: none;
}
.main-img-delete-btn,
.main-img-featured-btn {
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.main-img-delete-btn:hover {
    background: #f56262;
}
.main-img-delete-btn:hover svg path {
    fill: #fff;
}
.main-img-featured-btn:hover {
    background: var(--primary);
}
.main-img-featured-btn:hover svg path,
.main-img-featured-btn:hover svg {
    stroke: #fff;
}
.product-img-main .img {
    width: 490px;
    height: 490px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background-color: #f3f3f3;
}
.product-img-main .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fullscreen button overlay on the main product image (bottom-right, clear of
   the top-left condition badge and top-right image actions) */
.product-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #454B54;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.product-fullscreen-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: scale(1.05);
}
.product-fullscreen-btn svg {
    display: block;
}
/* Non-destructive rotate control — mirrors the fullscreen button, sits to its
   left so both hover in the bottom-right of the hero. */
.main-img-rotate-btn {
    position: absolute;
    bottom: 12px;
    right: 60px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #454B54;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.main-img-rotate-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: scale(1.05);
}
.main-img-rotate-btn svg {
    display: block;
}
.slider-arrows svg path {
    stroke: #000;
}
.thumbnail-img {
    border-radius: 12px;
    width: 90px;
    height: 90px;
    position: relative;
    overflow: hidden;
    border: 4px solid transparent;
}
.thumbnail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-thumbnail {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    cursor: pointer;
    width: max-content;
    align-items: flex-start;
}
.thumbnail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* Per-photo order badge + drag-reorder grip + tag control (owner edit mode) */
.thumb-order-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary, #2AA466);
    line-height: 1;
}
.thumb-drag-handle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: #666;
    font-size: 13px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.thumbnail-img:hover .thumb-drag-handle {
    opacity: 1;
}
.thumb-drag-handle:active {
    cursor: grabbing;
}
.thumbnail-item.thumb-dragging {
    opacity: 0.5;
}
.thumbnail-item.thumb-dragging .thumbnail-img {
    outline: 2px dashed var(--primary, #2AA466);
}
.thumb-tag-select {
    width: 90px;
    max-width: 90px;
    margin-top: 2px;
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid #cdcfd4;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
}
.thumb-tag-badge {
    display: inline-block;
    max-width: 90px;
    margin-top: 2px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #eef6f1;
    color: var(--primary, #2AA466);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.thumbnail-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 90px;
}
/* "Featured" markers — make it obvious which gallery image is the featured one.
   Small green pill on the featured thumbnail; larger badge on the hero when the
   featured image is the one currently displayed. */
.thumb-featured-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--primary, #2AA466);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}
.main-featured-badge {
    position: absolute;
    top: 8px;
    /* Right-aligned so it never overlaps the top-left condition/class badge
       (.text-icon-badge). The top-right corner is free whenever the hero is
       featured, because .main-img-actions is hidden in that state. */
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--primary, #2AA466);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.main-featured-badge.hidden {
    display: none;
}
.img-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 2px;
}
.thumbnail-img:hover .img-delete-btn {
    opacity: 1;
}
.img-checkbox-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 14px;
    color: #4b5563;
    cursor: pointer;
    white-space: nowrap;
}
.img-checkbox-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.thumbnail-img.active-thumb {
    border: 4px solid var(--primary);
}
.photo-sec {
    display: flex;
    gap: 20px;
}
.photo-sec .product-image {
    width: 490px;
}
.qr-image_and_file-upload {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 510px);
}
.photo-sec .upload-box {
    min-height: 240px;
}
.qr-image_and_file-upload .qr-image {
    padding: 24px;
    display: flex;
    border: 1px solid #f3f3f3;
    border-radius: 16px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 292px;
}
.qr-image_and_file-upload .qr-image img {
    width: 240px;
}
.qr-image_and_file-upload .custom-file-upload {
    min-height: 280px;
    border-radius: 16px;
}
.qr-image_and_file-upload .qr-image p {
    font-size: 16px;
    line-height: 20px;
    margin: 0;
}
.close-thumb {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 2px;
    background-color: #fdf0f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
h3.title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 24px;
}

.card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 385px;
}
.card-actions .icon-btn.delete {
    padding: 10px 13px 5px 13px;
}
.card-actions .action-buttons {
    margin-top: 25px;
}
.btn.evaluate {
    background: var(--primary);
    color: white;
    border: none;
}
.btn.confirmbtn {
    background: var(--primary);
    color: white;
    border: none;
}
.market-value {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    color: #454b54;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}
.market-value {
    font-size: 16px;
    line-height: 24px;
    color: #454b54;
}
.market-value strong {
    color: #17181a;
    font-weight: 800;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-start;
}
.tag-list .tag {
    background: #f3f3f3;
    color: #878d99;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px 8px 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-image: url(/assets/img/recycle.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 12px center;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}
.tag-list .tag.recycle {
    background-image: url(/assets/img/recycle-gray.svg);
}
.tag-list .tag.recycle.active {
    background-image: url(/assets/img/recycle-green.svg);
}
.tag-list .tag.storage {
    background-image: url(/assets/img/package-gray.svg);
}
.tag-list .tag.storage.active {
    background-image: url(/assets/img/package-green.svg);
}
.tag-list .tag.redeploy {
    background-image: url(/assets/img/truck-delivery-gray.svg);
}
.tag-list .tag.redeploy.active {
    background-image: url(/assets/img/truck-delivery-green.svg);
}
.tag-list .tag.consignment {
    background-image: url(/assets/img/package-check-gray.svg);
}
.tag-list .tag.consignment.active {
    background-image: url(/assets/img/package-check-green.svg);
}
.tag-list .tag.remote {
    background-image: url(/assets/img/globe-marker-pin-gray.svg);
}
.tag-list .tag.remote.active {
    background-image: url(/assets/img/globe-marker-pin-green.svg);
}
.tag-list .tag > img {
    width: 20px;
    height: 20px;
    filter: invert(64%) sepia(6%) saturate(350%) hue-rotate(183deg) brightness(92%) contrast(92%);
    -webkit-filter: invert(64%) sepia(6%) saturate(350%) hue-rotate(183deg) brightness(92%) contrast(92%);
    -moz-filter: invert(64%) sepia(6%) saturate(350%) hue-rotate(183deg) brightness(92%) contrast(92%);
}
.tag-list .tag.active {
    background-color: var(--primary-light);
    color: var(--primary);
}
.tag-list .tag.active > img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%);
    -webkit-filter: brightness(0) saturate(100%);
    -moz-filter: brightness(0) saturate(100%);
}
.sec .help, .completetion-wrapper .help {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: block;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    outline: 0;
    padding: 0;
    background-image: url(/assets/img/tool-tip-gray.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
}
.availability {
    display: flex;
    margin-top: 8px;
    gap: 16px;
    font-size: 14px;
    line-height: 20px;
    color: #454b54;
    justify-content: flex-start;
    font-weight: 500;
    padding: 2px 0 2px 8px;
}
.availability > span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.available_cc dd {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--primary-border);
    border-radius: 50px;
}
.noavailable_cc dd {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #cdcfd4;
    border-radius: 50px;
}
.new-popup-wrapper {
    display: flex;
    position: relative;
}
.card-actions .new-popup {
    top: 30px;
    width: 282px;
    right: -16px;
    left: inherit;
}
.card-actions .new-popup .polygon-shape {
    left: inherit;
    right: 18px;
}
.card-actions .new-popup-content p {
    font-weight: 500;
}
.pickup-required {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    margin-top: 10px;
    display: inline-block;
    color: var(--primary);
}
.help.active {
    background-image: url(/assets/img/tool-tip-green.svg);
}
.card-actions .new-popup-wrapper {
    display: flex;
}
.market-value__value {
    display: flex;
    align-items: center;
    gap: 4px;
}
.new-popup-content p,
.new-popup-content ul li {
    font-size: 12px;
    line-height: 16px;
    color: #454b54;
}
.new-popup-content p {
    margin-bottom: 0;
    font-weight: 500;
}
.basic-info-sec {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.page-content .sec {
    margin-bottom: 32px;
}
/*price chart*/
.price-chart-container {
    position: relative;
}
.price-chart-container .chart {
    display: flex;
    align-items: flex-end;
    height: 200px;
}
.price-chart-container .bar {
    width: 16px;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
}
.price-chart-container .bar.light-green {
    background: var(--primary-light);
}
.price-chart-container .bar.green {
    background: var(--primary);
}
.price-chart-container .bar.red {
    background: #f56262;
}
.price-chart-container .bar:hover .price-tooltip {
    opacity: 1;
}
.price-chart-container .price-tooltip {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: var(--primary-light);
    padding: 5px 10px;
    border-radius: 12px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}
.price-chart-container .price-tooltip .price {
    color: var(--primary);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    font-weight: 700;
}
.price-chart-container .price-tooltip .polygon-shape {
    width: 8px;
    height: 10px;
    background-color: var(--primary-light);
    bottom: -5px;
    top: initial;
    left: 50%;
    background-image: url(/assets/img/polygon-shape.svg);
    transform: translateX(-50%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.price-chart-container .date-label {
    text-align: center;
    margin-top: 8px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    color: #cdcfd4;
    font-weight: 700;
}
.price-chart-container .today-marker {
    position: absolute;
    top: -40px;
    font-size: 12px;
    text-align: center;
    color: #333;
}
.price-chart-container .today-line {
    position: absolute;
    top: 0;
    right: -1px;
    width: 2px;
    height: calc(100% - 32px);
    background: #f3f3f3;
}
.price-chart-container .day-text {
    font-size: 12px;
    line-height: 10px;
    position: absolute;
    top: 0;
    right: 6px;
    color: #878d99;
    font-weight: 600;
}
.price-chart-container .today-price {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 12px;
}
.price-chart-container .text-block {
    font-size: 10px;
    color: green;
    position: absolute;
    left: 24px;
    bottom: 0;
}
.price-chart-container .text-block .icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-light);
    border-radius: 2px;
    margin-bottom: 4px;
}
.price-chart-container .text-block p {
    margin: 0;
    font-size: 10px;
    line-height: 12px;
    color: #878d99;
}
.price-chart-container .bar-block {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
.price-chart-wrapper .title-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.price-chart-wrapper .info-icon {
    position: relative;
    cursor: pointer;
}
.new-popup-content ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.new-popup-content .item-block {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.new-popup-content .item-content {
    width: calc(100% - 28px);
}
.new-popup-content p {
    font-size: 12px;
    line-height: 16px;
    margin: 0;
}
.price-chart-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}
.bar-block.next-day .bar {
    display: none;
}
.price-chart-container .bar-block.today .date-label {
    background-color: var(--primary);
    color: #fff;
    border-radius: 80px;
}
.price-chart-container .bar-block.today .price-tooltip {
    opacity: 1;
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16);
}
.price-chart-container .bar-block.today .price-tooltip .polygon-shape {
    background-image: url(/assets/img/polygon-shape-white.svg);
}
.price-chart-container .bar-block.today .price-tooltip .price {
    color: #454b54;
}
.price-factors-content p {
    color: #878d99;
    font-weight: 400;
    margin-bottom: 16px;
}
.price-factors-content .icon-with-text {
    padding: 6px 12px;
    gap: 8px;
    display: inline-flex;
    border-radius: 40px;
    font-size: 16px;
    line-height: 20px;
    background-color: #F3F3F3;
    color: #878D99;
}
.price-factors-content ul {
    margin: 0;
    gap: 8px;
}
.price-factors-content .icon-with-text svg path {
    fill: #878D99;
}
.price-factors-content .icon-with-text.green {
    background-color: var(--primary-light);
    color: var(--primary);
}
.price-factors-content .icon-with-text.green svg path {
    fill: var(--primary);
}
.price-factors-content .icon-with-text.red {
    background-color: #FCE5E2;
    color: #BA5E5E;
}
.price-factors-content .icon-with-text.red svg path {
    fill: #BA5E5E;
}
.price-factors-content ul li {
    width: auto !important;
}
.price-chart-wrapper .info-icon:hover .new-popup, .price-factors .info-icon:hover .new-popup {
    display: block;
    top: 25px;
}
.price-factors .new-popup-content ul {
    margin: 0;
    gap: 14px;
    list-style: none;
    padding: 0;
}
.price-factors .new-popup-content ul li {
    width: 100%;
}
.price-factors .item-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.price-factors .green .item-title-wrapper .item-title {
    color: var(--primary);
}
.price-factors .red .item-title-wrapper .item-title {
    color: #ba5e5e;
}
.price-factors .item-title-wrapper .item-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}
.price-factors .item-block p {
    color: #454B54;
    margin: 0;
}
.price-chart-wrapper h3.title {
    margin: 0;
}
.price-factors-content ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    gap: 8px;
}
/*end price chart*/
.product-info h3.title,
.sec.notes h3.title,
.sec.attachments h3.title,
.sec.description h3.title,
.sec.basic-info-sec > .sec-block > .title-wrapper h3.title {
    margin: 0;
}
.product-info .title-wrapper,
.sec.notes .title-wrapper,
.sec.attachments .title-wrapper,
.sec.description .title-wrapper,
.sec.basic-info-sec > .sec-block > .title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
/*Fancy Input*/
.fancy-input {
    position: relative;
}
.fancy-input input,
.fancy-input select {
    width: 100%;
    padding: 20px 16px 6px 16px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
}
.fancy-input label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    background: white;
    padding: 0 4px;
    color: #454b54;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
}
body .fancy-input input:focus + label,
.fancy-input input:not(:placeholder-shown) + label,
.fancy-input input:-webkit-autofill + label,
body .fancy-input input:focus + label,
.fancy-input input:not(:placeholder-shown) + label,
.fancy-input input:-webkit-autofill + label,
.fancy-input select:not([value=""]) + label {
    top: 16px;
    font-size: 12px;
    color: #878d99;
}
.fancy-input input:placeholder-shown + label,
.fancy-input select + label {
    top: 50%;
    font-size: 16px;
    transform: translateY(-50%);
}
/*End Fancy Input*/
.sec .row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.sec .row .col {
    width: 100%;
}
.sec .row .col-12 {
    width: 100%;
}
.sec .row .col-6 {
    width: calc(50% - 10px);
}
.sec .row .col-3 {
    width: calc(25% - 15px);
}
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.select {
    position: relative;
    cursor: pointer;
}
.select:after {
    position: absolute;
    content: "";
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(/assets/img/down-arrow-new.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
}
.form-group textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #cdcfd4;
    padding: 16px;
    color: #17181a;
    min-height: 180px;
    vertical-align: bottom;
    font-size: 16px;
    line-height: 24px;
}
.file-name {
    font-size: 12px;
    line-height: 16px;
    color: #454b54;
    position: relative;
}
.file-name-block {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    width: fit-content;
}
.file-attachment {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}
.remove-file {
    width: 24px;
    height: 24px;
    padding: 2px;
    background-color: #fdf0f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 4px;
    display: none;
}
.file-name:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--primary);
    left: 0;
    bottom: -2px;
    display: none;
}
.file-name-block:hover .remove-file {
    display: flex;
}
.file-name-block:hover .file-name {
    color: #17181a;
}
.file-name-block:hover .file-name:after {
    display: block;
}
.equipment-identification-label .sec-inner {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
/* .qr-card {
    border: 1px solid #f3f3f3;
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    background-color: #fff;
}
.qr-card .warning {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #f56262;
}
.qr-card .logo {
    width: 100%;
    max-width: 180px;
    margin: 16px 0 18px;
}
.qr-card .qr-image {
    display: flex;
    flex-direction: column;
}
.qr-card .qr-image span {
    font-size: 15px;
    font-weight: 700;
    color: #454b54;
    line-height: 24px;
}
.qr-card .qr-image img {
    max-width: 132px;
    margin-inline: auto;
} */

.qr-card img {
    width: 230px;
}
.equipment-identification-label .text-block {
    max-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.equipment-identification-label .text-block h3.title {
    max-width: 220px;
    margin-bottom: 16px;
}
.equipment-identification-label .sec-block-content p {
    color: #454b54;
}
.icon-btn {
    width: 56px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s all;
}
.icon-btn:hover {
    background-color: var(--primary);
}
.icon-btn:hover svg path {
    fill: #fff;
}
.text-block .action-buttons {
    display: flex;
    gap: 8px;
}
.sec.equipment-identification-label {
    position: relative;
    overflow: hidden;
}
.equipment-identification-label .bg-img {
    position: absolute;
    right: -88px;
    bottom: -136px;
    width: 510px;
    height: 510px;
    background-image: url(/assets/img/pos-terminal-printing.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
    z-index: -1;
}
.slider-arrows {
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    transform: translateY(-50%);
}
.slider-arrows span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 16px;
    font-size: 16px;
    color: #878D99;
    transition: 0.3s all;
    cursor: pointer;
}
.slider-arrows span.prev {
    margin-left: 8px;
}
.slider-arrows span.next {
    margin-right: 8px;
}
.slider-number {
    display: inline-block;
    background: #000;
    border-radius: 16px;
    padding: 0px 8px 1px;
    opacity: 60%;
    position: absolute;
    bottom: 15px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}
.slider-number span {
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}
.slider-number .total-number {
    color: #CDCFD4;
}
.slider-number .separator {
    width: 10px;
    display: inline-flex;
    position: relative;
    margin: 0 1px;
}
.slider-number .separator:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #878D99;
    position: relative;
    top: -4px;
}
.price-chart-wrapper .price-factors .title-wrapper {
    margin-bottom: 24px;
}
.tag-list .new-popup {
    top: 30px;
    width: 340px;
    right: -16px;
    left: inherit;
}
.tag-list .new-popup .polygon-shape {
    left: inherit;
    right: 18px; 
}
.product-thumbnail-wrapper {
    width: 100%;
    overflow: auto;
}
.product-thumbnail-wrapper::-webkit-scrollbar-track, 
.product-thumbnail-wrapper::-webkit-scrollbar, 
.product-thumbnail-wrapper::-webkit-scrollbar-thumb {
    display: none;
}
.equipment-item .custom-file-upload .btn {
    width: 160px;
    height: 40px;
    font-size: 16px;
    line-height: 24px;
}
.equipment-item .custom-file-upload .file-text {
    margin-inline: auto;
}
.equipment-item .custom-file-upload {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/*upload box*/
.upload-box {
    border: 1px dashed var(--primary-border);
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.upload-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}
.upload-icon {
    background-color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    flex-shrink: 0;
}
#upload-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.upload-label {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.upload-label, .upload-subtext {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #17181A;
} 
.upload-box input[type="file"] {
    display: none;
}
.upload-box-inner {
    cursor: pointer;
    display: block;
    width: 100%;
}
/* .upload-box:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}
.upload-box:hover .upload-icon {
    background-color: #fff;
} */
/*end upload box*/
.disposition-cart-add:hover svg path {
    fill: var(--primary);
}
.btn.upload-btn {
    margin-top: 16px;
    padding: 4px 16px;
    font-size: 16px;
    line-height: 24px;
    height: 40px;
    max-width: 130px;
    width: 100%;
    justify-content: center;
}
.market-value__value .new-popup {
    top: 30px;
}
.new-popup-wrapper .new-popup p {
    margin: 0;
}
.price-factors .new-popup {
    width: 360px;
    top: 26px;
}
.new-popup-wrapper:has(.new-popup.show):after {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9;
}
.new-popup-wrapper .new-popup {
    z-index: 99;
}
.item-title-wrapper_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-label.current {
    background-color: var(--primary);
    color: #fff;
}
.status-label.completed {
    background-color: var(--primary-light);
    color: var(--primary);
}
.status-label.inactive {
    background-color: #CDCFD4;
    color: #454B54;
}
.status-label.inactive-canceled {
    background-color: #FCE5E2;
    color: #BA5E5E;
}

.sec .action-buttons {
    display: flex;
    justify-content: end;
}
.sec .action-buttons .btn:hover svg path {
    fill: var(--primary);
}
.sec.notes .action-buttons {
    margin-top: 24px;
}

/*nice select wrapper*/
.nice-select-wrapper .ts-control input {
    all: unset;
    width: 100%;
    padding: 20px 16px 6px 16px !important;
    font-size: 16px;
    border: 1px solid #cdcfd4 !important;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
}
.fancy-input.nice-select-wrapper>label,.my-equipment-page .input-iteams-wrapper .fancy-input>input+label,.my-equipment-page .fancy-input input:placeholder-shown + label {
    top: 16px;
    font-size: 12px;
    color: #878d99;
    z-index: 1;
}
.nice-select-wrapper .ts-control:not(.rtl) {
    padding: 0 !important;
}
.nice-select-wrapper .ts-wrapper.full .ts-control {
    width: 100%;
    padding: 20px 16px 6px 16px !important;
    font-size: 16px;
    border: 1px solid #cdcfd4 !important;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
}
.nice-select-wrapper .ts-control {
    border: 0;
}
.has-items .ts-control > input {
    padding: 0 !important;
    border: 0 !important;
    height: initial !important;
}
.nice-select-wrapper .ts-dropdown {
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69,.18);
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    overflow: auto;
}
.nice-select-wrapper .ts-dropdown .active {
    background-color: var(--primary-light);
}
.nice-select-wrapper .ts-dropdown .option,.nice-select-wrapper .ts-dropdown .optgroup-header,.nice-select-wrapper .ts-dropdown .no-results,.nice-select-wrapper .ts-dropdown .create {
    padding: 8px 14px;
    font-size: 14px;
}
.nice-select-wrapper .ts-control .item {
    align-items: center;
    line-height: 27px;
}

.nice-select-wrapper select {
    border: 0;
}
.nice-select-wrapper .nice-select {
    width: 100%;
    padding: 10px 16px 10px 16px;
    font-size: 16px;
    border: 1px solid #CDCFD4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181A;
    box-sizing: border-box;
    font-weight: 500;
    padding-right: 30px;
}
.nice-select-wrapper .nice-select:active,.nice-select-wrapper .nice-select.open,.nice-select-wrapper .nice-select:focus {
    border-color: #CDCFD4;
}
.nice-select-wrapper .nice-select span.current {
    color: #454B54;
    font-size: 16px;
    pointer-events: none;
    width: 100%;
    display: block;
    overflow: hidden;
}
.nice-select-wrapper {
    position: relative;
}
.nice-select-wrapper.select::after {
    width: 20px;
    height: 20px;
    right: 8px;
}
.nice-select-wrapper .nice-select:after {
    display: none;
}
.select:has(.nice-select.open):after {
    transform: translateY(-50%) rotate(180deg);
}
.nice-select-wrapper .nice-select .nice-select-dropdown {
    width: 100%;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69,.18);
    border-radius: 12px;
}
.nice-select-wrapper .nice-select .nice-select-search {
    border-radius: 12px;
}
.nice-select-wrapper .nice-select .option:hover,.nice-select-wrapper .nice-select .option.focus,.nice-select-wrapper .nice-select .option.selected.focus {
    background-color: var(--primary-light);
}
.nice-select-wrapper .nice-select .option.selected {
    font-weight: 500;
}
.nice-select-wrapper .nice-select .option {
    font-size: 16px;
    width: 100%;
    word-wrap: break-word;
    white-space: break-spaces;
    line-height: 24px;
    padding: 8px 16px;
}
.notes .new-popup {
    top: 30px;
}
.page-content>.sec:last-child {
    margin: 0;
}
.attachments .file-attachment:not(:has(*)) {
    margin: 0;
}

/*fancybox*/
body .fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
  }
  body .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }
  body .fancybox-thumbs__list {
    margin-inline: auto;
}
body .fancybox-thumbs__list {
    margin-inline: auto;
}

.fancy-textarea textarea {
    padding: 30px 16px 16px 16px;
}
.fancy-input.fancy-textarea label {
    top: 16px;
    font-size: 12px;
    color: #878d99;
}
.form-group textarea[disabled]+label {
    opacity: .8;
}
.page-content>.action-buttons {
    display: flex;
    justify-content: flex-end;
}
.page-content>.action-buttons .btn {
    height: 50px;
    font-size: 16px;
    min-width: 200px;
    justify-content: center;
}
.page-content>.action-buttons .btn:hover svg path {
    fill: var(--primary);
}

.price-factors .title-wrapper,
.ai-estimation-subsection > .row > .col-6 > .title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    margin-top: 16px;
}

.price-factors .title-wrapper h3.title,
.ai-estimation-subsection > .row > .col-6 > .title-wrapper h3.title {
    margin: 0;
}
/* .page .action-buttons .btn.download-flyer {
    font-size: 16px;
    justify-content: center;
    margin-top: 24px;
} */
.page .action-buttons .btn.download-flyer:hover svg path, .go-to-cart:hover svg path {
    fill: #2ba466;
}
.page-content>.action-buttons .discard-btn {
    display: none;
}

.page-title-wrapper-skeleton {
    width: 60%;
    height: 32px;
}
.product-image-skeleton {
    width: 50%;
    height: 490px;
    border-radius: 18px !important;
}
.file-upload-skeleton-wrapper {
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 20px;
}
.file-upload-skeleton-wrapper .skeleton-block {
    width: 100%;
    flex: 1;
    height: 240px;
    border-radius: 18px;
}
.disposition-strategy-skeleton {
    width: 100%;
    height: 56px;
}
.product-info-skeleton, 
.dimensions-skeleton, 
.pricing-sec-skeleton, 
.price-factors-skeleton, 
.attachments-skeleton {
    width: 100%;
    height: 56px;
}
.fancy-textarea-skeleton {
    width: 100%;
    height: 150px;
    border-radius: 14px;
}
.description-skeleton-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.description-skeleton-wrapper .skeleton-block {
    width: 100%;
    height: 32px;
}
.description-skeleton-wrapper .description-skeleton-2 {
    width: 80%;
}
.description-skeleton-wrapper .description-skeleton-3 {
    width: 60%;
}
/* Online Listing Section */
.online-listing .title-wrapper {
    margin-bottom: 20px;
}
.listing-status-wrapper {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}
.listing-status-label {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.listing-status-restriction {
    font-size: 14px;
    line-height: 1.5;
    color: #4B5563;
}
.online-listing-channels {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}
.online-listing-channel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #E5E7EB;
    background: #fff;
    transition: background 0.15s;
}
.online-listing-channel-item:last-child {
    border-bottom: none;
}
.online-listing-channel-item:hover {
    background: #F9FAFB;
}
.online-listing-channel-item .channel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.online-listing-channel-item .channel-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.online-listing-channel-item.channel-enabled .channel-status-dot {
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.online-listing-channel-item.channel-disabled .channel-status-dot {
    background: #D1D5DB;
}
.online-listing-channel-item .channel-label {
    font-size: 14px;
    font-weight: 500;
    color: #1F2937;
}
.online-listing-channel-item .channel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.online-listing-channel-item .channel-status-text {
    font-size: 13px;
    font-weight: 500;
}
.online-listing-channel-item.channel-enabled .channel-status-text {
    color: #16A34A;
}
.online-listing-channel-item.channel-disabled .channel-status-text {
    color: #9CA3AF;
}
.online-listing-channel-item .channel-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.online-listing-channel-item .channel-link:hover {
    text-decoration: underline;
}
/* end Online Listing Section */

/* E-Commerce Tab */
.ecommerce-tab-content {
    padding: 24px 0;
}
.ecommerce-error {
    padding: 20px;
    color: #DC2626;
    font-size: 14px;
}
.ecommerce-section {
    margin-bottom: 28px;
}
.ecommerce-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ecommerce-restrictions {
    margin-bottom: 24px;
    padding: 14px 18px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
}
.ecommerce-restrictions .ecommerce-section-title {
    color: #92400E;
    margin-bottom: 6px;
}
.ecommerce-restriction-item {
    font-size: 14px;
    line-height: 1.5;
    color: #92400E;
}
.ecommerce-info-note {
    margin-bottom: 24px;
    padding: 14px 18px;
    background: #F0FFF5;
    border: 1px solid #B7EBCB;
    border-left: 4px solid #2AA466;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #1F5E3D;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ecommerce-info-note svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #2AA466;
}
.ecommerce-info-note strong {
    font-weight: 700;
}
.ecommerce-channels-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ecommerce-channel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #E5E7EB;
    background: #fff;
    transition: background 0.15s;
}
.ecommerce-channel-item:last-child {
    border-bottom: none;
}
.ecommerce-channel-item:hover {
    background: #F9FAFB;
}
.ecommerce-channel-item .channel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ecommerce-channel-item .channel-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ecommerce-channel-item.channel-enabled .channel-status-dot {
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
/* Eligible but not yet listed — a third state the block never had. Amber, so it
   reads as "on its way" rather than either live (green) or blocked (grey). It is
   the state item 1120183110 was in while the page called it "Eligible" and the
   reader took that to mean it was on the website. */
.ecommerce-channel-item.channel-pending .channel-status-dot {
    background: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.ecommerce-channel-item.channel-pending .channel-status-text {
    color: #B45309;
}
.online-listing-channel-item.channel-pending .channel-status-dot {
    background: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.online-listing-channel-item.channel-pending .channel-status-text {
    color: #B45309;
}
.ecommerce-channel-item.channel-disabled .channel-status-dot {
    background: #D1D5DB;
}
.ecommerce-channel-item .channel-label {
    font-size: 14px;
    font-weight: 500;
    color: #1F2937;
}
.ecommerce-channel-item a.channel-link-a {
    color: #2563EB;
    text-decoration: none;
    transition: color 0.15s;
}
.ecommerce-channel-item a.channel-link-a:hover {
    color: #1D4ED8;
    text-decoration: underline;
}
.ecommerce-channel-item .channel-status-text {
    font-size: 13px;
    font-weight: 500;
}
.ecommerce-channel-item.channel-enabled .channel-status-text {
    color: #16A34A;
}
.ecommerce-channel-item.channel-disabled .channel-status-text {
    color: #9CA3AF;
}
/* Timeline Chart (Highcharts xrange) */
.ecommerce-timeline-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.timeline-title {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-weight: 650;
    font-size: 14px;
}
.timeline-subtitle {
    color: #475569;
    font-size: 12px;
    font-weight: 400;
}
.timeline-controls {
    display: flex;
    gap: 6px;
}
.timeline-zoom-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: #0f172a;
    transition: all 0.15s;
}
.timeline-zoom-btn:hover {
    background: #f1f5f9;
}
.timeline-zoom-btn.active {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}
#ecom-timeline-chart {
    padding: 0 8px;
}
#ecom-timeline-chart .highcharts-background {
    fill: transparent;
}
.timeline-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #475569;
    background: #fff;
}
@media only screen and (max-width: 768px) {
    .timeline-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
/* end E-Commerce Tab */

.qr-card-skeleton {
    width: 230px;
    height: 300px;
}

.info-poppup.error-popup .popup-img {
    width: 100px;
    height: 100px;
}
.error-popup .popup-img svg {
    width: 100%;
    height: 100%;
}

.tag-list-wrapper {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.tag-list-wrapper .d-flex {
    display: flex;
    align-items: center;
    gap: 4px;
}
.disposition-strategy-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}
.disposition-strategy-readonly,
.disposition-strategy-readonly .custom-select {
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
}
.disposition-strategy-readonly .custom-select::after,
.disposition-strategy-readonly .select-with-arrow::after {
    display: none !important;
}
.new-disposition-strategy .custom-select {
    margin-left: inherit;
}
.disposition-strategy-sec .action-buttons {
    gap: 10px;
    margin-top: 16px;
    position: relative;
}
.action-buttons .request-public-listing {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.action-buttons .request-public-listing:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.timeline.completed {
    fill: var(--primary-light);
}
.timeline-text.completed {
    fill: var(--primary);
}
.timeline.current {
    fill: var(--primary);
}
.timeline-text.current {
    fill: #fff;
}
.timeline-skeleton.skeleton-block {
    width: 100%;
    height: 160px;
}
.disposition-strategy-mv {
    display: flex;
    justify-content: space-between;
}

.disposition-strategy-wrapper .new-popup {
    left: inherit;
    right: -18px; 
}
.disposition-strategy-wrapper .new-popup .polygon-shape {
    left: inherit;
    right: 18px;
}
body .custom-select .options {
    right: 0;
    left: inherit;
}


.top-sidebar-completetion {
    padding: 16px 20px;
    background-color: #f3f3f3;
    border-radius: 24px 24px 0 0;
}
.completetion-wrapper {
    display: flex;
    gap: 5px;
    flex-direction: column;
}
.completetion-key {
    display: flex;
    gap: 4px;
    font-weight: 700;
    align-items: center;
}
.completetion-wrapper .help {
    width: 18px;
    height: 18px;
}
/* Extra horizontal breathing room for the right-side Pricing card values so the
   label (left) and value (right) don't sit flush against the card edges. Scoped
   to this panel via the #pricing-stat-hero id (higher specificity than the
   shared variant-economy.css rules) so the variant page's Variant Economy panel
   is unaffected. */
.page.equipment-item #pricing-stat-hero .rc-stat-card-row .rc-stat-card {
    padding-left: 30px;
    padding-right: 30px;
    /* No frame around each value row — the secondary cards read as plain
       label/value rows, not bordered boxes. */
    border: none;
    background: transparent;
}
.page.equipment-item #pricing-stat-hero .rc-stat-card-primary {
    padding-left: 32px;
    padding-right: 32px;
}
/* Smaller value numbers so they sit comfortably beside the labels. */
.page.equipment-item #pricing-stat-hero .rc-stat-card-row .rc-stat-card .rc-stat-value {
    font-size: 17px;
}
.page.equipment-item #pricing-stat-hero .rc-stat-card-primary .rc-stat-value {
    font-size: 26px;
}
/* Item Price History chart section (ERP-style bar chart, before Price factors). */
.price-history { margin-bottom: 8px; }
.price-history-sec { margin-bottom: 18px; }
.price-history-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 2px 0 10px;
    font-size: 12px;
    color: #878d99;
}
.price-history-legend span { display: inline-flex; align-items: center; gap: 6px; }
.price-history-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Lightweight CSS bar chart (no charting library) — clean, green, portal-native.
   A dollar Y axis + gridlines on the left; fixed-width bars that centre when few
   and scroll when many, scaled to a rounded axis max so it reads well at any count. */
.ph-chart { display: flex; align-items: flex-start; gap: 10px; padding-top: 22px; }
.ph-yaxis {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    text-align: right;
    font-size: 10px;
    line-height: 1;
    color: #9aa0ac;
}
.ph-plot { position: relative; flex: 1 1 auto; min-width: 0; }
.ph-grid {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.ph-grid i { display: block; width: 100%; height: 1px; background: #f2f4f6; }
.ph-bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    justify-content: space-around;
    overflow-x: auto;
}
.ph-bar-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.ph-bar-track { width: 46px; height: 180px; display: flex; align-items: flex-end; }
.ph-bar-fill {
    position: relative;
    width: 100%;
    min-height: 4px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: opacity .15s ease;
}
.ph-bar-col:hover .ph-bar-fill { opacity: .85; }
.ph-bar-val {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}
.ph-bar-date { margin-top: 7px; font-size: 11px; color: #9aa0ac; white-space: nowrap; }
/* Price Justification by AI block under the right-side Pricing rc-stat panel. */
.page.equipment-item .pricing-stat-justification {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #f7f8f9;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
}
.page.equipment-item .pricing-stat-justification .rc-stat-label {
    display: block;
    margin-bottom: 6px;
}
.page.equipment-item .pricing-stat-justification-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #454b54;
    white-space: pre-wrap;
}
.completetion-value {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}
.completetion-value.green {
    color: var(--primary);
}
.completetion-value.red {
    color: #F56262;
}
/* Red frame applied to a form field whose value is still missing, driven by
   the completion profile's per-field ids. Applied to the .fancy-input wrapper
   (or the block itself for section-level targets like Photos / Item Location)
   so the highlight surrounds the visible control. */
.field-incomplete {
    border: 1.5px solid #F56262 !important;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(245, 98, 98, 0.12);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field-incomplete.fancy-input input,
.field-incomplete.fancy-input select {
    border-color: transparent !important;
}
/* Missing-field lines in the completion popup are clickable shortcuts to the field. */
.completetion-key ol li.completion-missing-field {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.completetion-key ol li.completion-missing-field:hover {
    color: #F56262;
}
.completetion-key .new-popup-close, .disposition-strategy-sec .new-popup-close {
    margin-left: auto;
}
.completetion-key .new-popup-heading, .disposition-strategy-sec .new-popup-heading {
    margin-bottom: 8px;
}
/* .completetion-key ol li:not(:last-child), .disposition-strategy-sec ol li:not(:last-child) {
    margin-bottom: 10px;
} */
/* .page-sidebar .specific-icon svg {
    width: 20px;
    height: 20px;
} */
.sidebar-tab a>span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 34px);
    gap: 6px;
}
.page-content .sec {
    position: relative;
}
.page-content .sec .specific-icon {
    position: absolute;
    top: 14px;
    right: 14px;
}
.disposition-strategy-sec .title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
}
.disposition-strategy-mv {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.disposition-strategy-mv:not(:has(.disposition-strategy-desc:not(:empty))) .disposition-strategy-wrapper {
    margin-left: auto;
}
.disposition-strategy-left {
    flex: 1;
    min-width: 0;
}
.disposition-strategy-desc {
    flex: 1;
    color: #878D99;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    margin: 0;
}
.disposition-strategy-unpublish-note {
    display: inline;
    color: #D97706;
    font-weight: 600;
}
.basic-info-sec .market-value {
    margin: 20px 0 0;
}
.disposition-strategy-sec  .new-popup {
    width: 600px;
}
.page .page-sidebar .action-buttons .btn {
    margin: 0;
}
.action-buttons.action-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.market-value-group .new-popup {
    text-align: left;
    left: inherit;
    right: -18px;
}
.market-value-group .polygon-shape {
    left: inherit;
    right: 18px;
}

.specific-icon {
    background-color: var(--primary);
    border-radius: 40px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.specific-icon:has(svg.warning-svg) {
    background-color: #F56262;
}
.specific-icon:not(:has(svg)) {
    background-color: transparent !important;
}
.product-img-main .text-icon-badge {
    position: absolute;
    left: 12px;
    top: 12px;
}
body .new-popup-content ol ul {
    gap: 2px;
    margin: 6px 0 0;
}
.completetion-key ol>li:not(:last-child), .disposition-strategy-sec ol>li:not(:last-child) {
    margin-bottom: 12px;
}

/*new d r*/
@media (min-width: 768px) {
    .page .page-sidebar .action-buttons .btn {
        padding: 6px 12px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
    .action-buttons.final-action-buttons {
        display: none;
    }
}
@media (max-width: 1510px) {
    .page-sidebar {
        top: 150px;
    }
}
@media (max-width: 1199px) {
    .photo-sec {
        gap: 32px;
        display: flex;
        flex-direction: column;
    }
    .product-img-main .img {
        width: 100%;
        /* Keep the frame square (like desktop) instead of letting it become a
           short landscape box at narrow widths — a landscape frame + cover
           cropped portrait item photos to a thin band. Capped + centered. */
        max-width: 490px;
        margin-inline: auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .price-chart-wrapper {
        grid-template-columns: 1fr;
    }
    .qr-image_and_file-upload {
        flex-direction: row;
        width: 100%;
        gap: 16px;
    }
    .photo-sec .product-image {
        width: 100%;
    }
    .qr-image_and_file-upload .qr-image, .photo-sec .upload-box {
        width: calc(50% - 8px);
    }

    .page-title-wrapper-skeleton {
        width: 80%;
    }
    .product-image-skeleton {
        width: 100%;
    }
    .file-upload-skeleton-wrapper {
        width: 100%;
        flex-direction: row;
        gap: 20px;
    }
    .file-upload-skeleton-wrapper .skeleton-block {
        height: 300px;
    }

    body .disposition-strategy-wrapper .new-popup {
        top: 30px;
        right: -16px;
        left: inherit;
        width: 500px;
    }    
    body .disposition-strategy-wrapper .new-popup .polygon-shape {
        left: inherit;
        right: 18px;
    }
    .tag-list-wrapper {
        gap: 24px;
        row-gap: 16px;
    }

   
}
@media (max-width: 1023px) {
    .photo-sec {
        gap: 20px;
    }
    .status-tab-wrapper {
        padding: 44px 24px 40px;
        margin: 32px 0 40px;
    }
    .page-content .sec {
        border-width: 3px;
        padding: 32px;
    }
    .page-content .sec:not(:last-child) {
        margin-bottom: 16px;
    }
    .disposition-strategy-sec h3.title {
        margin-bottom: 16px;
    }
    .market-value {
        margin-bottom: 16px;
    }
    .sec .row {
        gap: 16px;
    }
    .sec .row .col-6 {
        width: 100%;
    }
    .sec .row .col-3 {
        width: calc(50% - 8px);
    }
    .equipment-identification-label .sec-inner {
        flex-direction: column;
        gap: 24px;
    }
    .equipment-identification-label .sec-block-content p {
        margin-bottom: 0;
    }
    .equipment-identification-label .text-block {
        gap: 24px;
    }
    /* .qr-card {
        width: fit-content;
        padding: 2px 20px 8px;
        border-radius: 8px;
    }
    .qr-card .warning {
        font-size: 7px;
    }
    .qr-card .logo {
        max-width: 110px;
        margin: 2px 0 9px;
    }
    .qr-card .qr-image span {
        font-size: 10px;
        line-height: 16px;
    }
    .qr-card .qr-image img {
        max-width: 80px;
    } */
    .equipment-identification-label .bg-img {
        right: -16px;
        bottom: -72px;
        width: 400px;
        height: 400px;
    }
    .qr-card img {
        width: 130px;
    }
    .equipment-item .custom-file-upload .btn {
        width: 120px;
    }
    .pickup-required {
        font-size: 16px;
        line-height: 24px;
        margin-top: 8px;
    }
    .market-value__value .new-popup {
        right: -16px;
        left: initial;
        width: 320px;
    }
    .market-value__value .polygon-shape {
        left: inherit;
        right: 18px;
    }
    .price-factors .item-title-wrapper .item-title {
        font-size: 16px;
        line-height: 20px;
    }

    .status-tab-wrapper li.process-qi, .status-tab-wrapper li.processqi {
        padding-left: 12px;
    }
    .status-top-sub-blocks {
        width: 98px;
        margin-left: 140px;
    }
    .status-tab-wrapper li, .status-bottom-sub-blocks .sub-block {
        padding-left: 12px;
    }
    .status-bottom-sub-blocks {
        left: 0;
        padding-top: 59px;
    }
    .status-bottom-sub-blocks:before {
        width: 258px;
        height: 20px;
        left: 38px;
    }
    .sub-block.recycled .status-label:before, .sub-block.local-sale .status-label:before {
        top: -21px;
        height: 21px;
    }
    .status-bottom-sub-blocks:after {
        left: 141px;
        height: 37px;
    }
    .status-tab-inner {
        padding-left: 0;
    }
    .process-qi .status-tab-block:before, .processqi .status-tab-block:before {
        width: 40px;
        left: -30px;
    }
    .notes .new-popup {
        left: inherit;
        right: -18px;
    }
    .notes .new-popup .polygon-shape {
        left: inherit;
        right: 20px;
    }
    .price-factors {
        margin-bottom: 24px;
    }
    .qr-card-skeleton {
        width: 130px;
        height: 170px;
    }
    .disposition-strategy-sec .action-buttons {
        justify-content: flex-start;
    }

     .status-tab-wrapper {
        border: 0;
        border-radius: 0;
        padding: 0;
        overflow: auto;
        text-align: left;
    }
    .status-tab-wrapper > svg {
        width: 956px;
    }
    .status-tab-wrapper::-webkit-scrollbar-track, 
    .status-tab-wrapper::-webkit-scrollbar, 
    .status-tab-wrapper::-webkit-scrollbar-thumb {
        display: none;
    }

    .disposition-strategy-mv {
        flex-direction: column;
    }
    .disposition-strategy-wrapper {
        align-items: flex-start;
    }
    body .custom-select .options {
        right: inherit;
        left: 0;
    }
    .disposition-strategy-sec .new-popup {
        left: inherit;
        right: -18px;
        width: 450px;
    }
    .disposition-strategy-sec .polygon-shape {
        left: inherit;
        right: 18px;
    }
    .basic-info-sec .market-value {
        margin: 36px 0 0;
    }
    .page-sidebar {
        z-index: 9;
    }
    .disposition-strategy-sec .action-buttons {
        flex-direction: column;
        width: auto;
        display: inline-flex;
    }
    .disposition-strategy-sec h3.title {
        margin-bottom: 24px;
    }
    .page-sidebar {
        top: 24px;
    }
}
@media (max-width: 991px) {
    .status-tab-wrapper {
        border: 0;
        border-radius: 0;
        padding: 0;
    }
    .status-tab-inner::-webkit-scrollbar-track, 
    .status-tab-inner::-webkit-scrollbar, 
    .status-tab-inner::-webkit-scrollbar-thumb {
        display: none;
    }
    .status-tab-inner {
        overflow: auto;
        padding-top: 14px;
    }
    .product-thumbnail-wrapper {
        width: 100%;
        overflow: auto;
    }
    .qr-image_and_file-upload .qr-image img {
        width: 180px;
    }
    .photo-sec .upload-box {
        min-height: 205px;
    }
    .qr-image_and_file-upload .qr-image {
        gap: 16px;
    }
    .qr-image_and_file-upload .custom-file-upload {
        min-height: auto;
        border-radius: 16px;
    }
    .page-content .sec {
        padding: 24px;
    }
    .product-img-main .img {
        /* height auto — square via aspect-ratio:1/1 from the <=1199 rule */
        height: auto;
    }
    .qr-image_and_file-upload .file-text {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
    }
    .qr-image_and_file-upload .file-text p {
        text-align: center;
        width: 110px;
    }
    .qr-image_and_file-upload {
        flex-direction: column;
    }
    .qr-image_and_file-upload .qr-image, .photo-sec .upload-box {
        width: 100%;
    }
    .price-factors .new-popup, .sec.attachments .new-popup {
        left: inherit;
        right: -18px;
    }
    .price-chart-wrapper .polygon-shape, .sec.attachments .polygon-shape, .price-factors .polygon-shape {
        right: 20px;
        left: initial;
    }
    .qr-image_and_file-upload .qr-image {
        min-height: auto;
    }

    .disposition-strategy-sec .action-buttons {
        flex-direction: column;
    }
    .disposition-strategy-sec .action-buttons .btn {
        justify-content: center;
    }
    .page-content .sec .specific-icon {
        z-index: 1;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .qr-image_and_file-upload {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .file-text {
        width: 100%;
    }
    .qr-image_and_file-upload .file-text p {
        width: 100%;
    }
}
@media (max-width: 830px) {
    .status-tab-inner {
        margin-right: -30px;
    }
}
/* Tablets (portrait + landscape, up to iPad Pro 1024): stack the page so the main
   column uses the FULL width. Above this the 280px left section-jump nav sits beside
   a cramped ~400px content column on tablets. Mirrors the phone stacking: the left
   nav links are hidden (redundant with in-page scrolling + the tab bar), the profile
   completion card stays, and the right-hand read-only Pricing summary drops below. */
@media (max-width: 1024px) {
    .page-main {
        flex-direction: column;
        gap: 24px;
    }
    .page-sidebar {
        position: static;
        top: auto;
        width: 100%;
    }
    .page-content {
        width: 100%;
        max-width: 100%;
    }
    .sidebar-tab {
        display: none;
    }
}
@media (max-width: 767px) {
    .page-title-wrapper h1.title {
        font-size: 18px;
        line-height: 24px;
    }
    .status-tab-wrapper {
        margin: 20px 0 40px;
    }
    .page-main {
        position: relative;
        gap: 24px;
        display: flex;
        flex-direction: column;
    }
    .page-sidebar, .page-content {
        width: 100%;
    }
    .sidebar-tab {
        display: none;
    }
    .page-sidebar {
        position: initial;
        box-shadow: none;
        border-radius: 0;
    }
    .action-buttons.action-bottom {
        position: absolute;
        left: 0;
        right: 0;
        padding: 0;
        bottom: 0;
    }
    .page .action-buttons .btn {
        height: 50px;
        line-height: 49px;
    }
    .action-buttons.action-top {
        padding: 0;
        flex-direction: column-reverse;
    }
    .page .action-buttons .btn.disposition-cart {
        width: 100%;
        justify-content: center;
    }
    .toggle-container {
        padding: 16px 0;
        border-top: 1px solid #F3F3F3;
        border-bottom: 1px solid #F3F3F3;
        width: 100%;
    }
    .page-content .sec {
        border: 0;
        border-radius: 0;
        padding: 0;
        position: relative;
    }
    .product-img-main .img {
        /* height auto — square via aspect-ratio:1/1 from the <=1199 rule */
        height: auto;
    }
    .status-tab-inner {
        margin-right: -20px;
    }
    .photo-sec {
        gap: 24px;
    }
    .qr-image_and_file-upload .qr-image p {
        font-size: 14px;
    }
    .qr-image_and_file-upload .file-text p {
        font-size: 14px;
        line-height: 20px;
    }
    .qr-image_and_file-upload {
        grid-template-columns: repeat(2, calc(50% - 8px));
        gap: 16px;
    }
    .page-content .sec:not(:last-child) {
        margin-bottom: 40px;
    }
    .availability {
        margin-top: 16px;
    }
    .price-chart-wrapper {
        gap: 24px;
        margin-top: 12px;
    }
    .price-chart-wrapper .price-factors .title-wrapper {
        margin-bottom: 16px;
    }
    .product-info .title-wrapper, .sec.notes .title-wrapper, .sec.description .title-wrapper {
        margin-bottom: 16px;
    }
    .sec .row {
        gap: 8px;
    }
    h3.title {
        margin-bottom: 16px;
    }
    .page-content .sec.equipment-identification-label {
        border: 3px solid var(--primary-light);
        border-radius: 24px;
        padding: 24px;
    }
    .equipment-identification-label .bg-img {
        right: -108px;
        bottom: -62px;
        width: 300px;
        height: 300px;
    }
    .file-name-block .file-name {
        word-wrap: break-word;
    }
    .tag-list {
        position: relative;
    }
    .tag-list .new-popup {
        width: 100%;
        left: 0;
        right: 0;
        top: initial;
        bottom: initial;
        margin-top: 28px;
    }
    .tag-list .new-popup .polygon-shape {
        display: none;
    }
    .tag-list .new-popup-wrapper {
        position: initial;
    }
    .equipment-item .custom-file-upload .btn {
        width: 120px;
    }
    .page-content .sec.photo-sec {
        margin-bottom: 24px;
    }
    .qr-image_and_file-upload {
        flex-direction: row;
    }
    .qr-image_and_file-upload .qr-image, .photo-sec .upload-box {
        width: calc(50% - 8px);
    }
    .photo-sec .upload-label,.photo-sec .upload-subtext {
        font-size: 14px;
        line-height: 20px;
    }
    .qr-image_and_file-upload .qr-image img {
        width: 140px;
    }
    .photo-sec .upload-box {
        min-height: auto;
    }
    .market-value__value .new-popup {
        width: 100%;
        left: 0;
        right: 0;
        top: initial;
        bottom: initial;
        margin-top: 28px;
    }
    .market-value .new-popup-wrapper {
        position: initial;
    }
    .market-value__value .polygon-shape {
        display: none;
    }
    .price-factors .new-popup, .notes .new-popup, .sec.attachments .new-popup {
        width: 100%;
        left: 0;
        right: 0;
        top: 28px;
    }
    .price-chart-wrapper .polygon-shape,.price-factors .new-popup, .notes .new-popup .polygon-shape, .sec.attachments .new-popup .polygon-shape {
        right: inherit;
        left: 125px;
        display: none;
    }
    .new-popup-wrapper {
        position: initial;
    }
    .price-factors {
        position: relative;
    }
    .sec .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .price-factors .new-popup {
        left: 0;
    }
    .price-factors .polygon-shape {
        display: none;
    }
    .price-factors .title-wrapper {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 16px;
        margin-top: 24px;
    }
    .price-factors {
        margin-bottom: 36px;
    }
    .page-content>.action-buttons .discard-btn {
        display: flex;
    }
    .action-buttons.action-bottom {
        display: none;
    }
    .page-content>.action-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 32px;
    }
    .page .action-buttons .btn.discard-btn:hover svg path {
        fill: #f56262;
    }
    .product-image-skeleton {
        height: 320px;
    }
    .file-upload-skeleton-wrapper .skeleton-block {
        height: 200px;
    }
    .page-title-wrapper-skeleton {
        width: 100%;
    }
    body .disposition-strategy-wrapper .new-popup {
        width: 100%;
        left: 0;
    }
    .page-main {
        gap: 0;
    }
    .tag-list-wrapper {
        position: relative;
    }
    body .disposition-strategy-wrapper .new-popup {
        margin-top: 0;
    }
    .disposition-strategy-sec .new-popup, .completetion-key .new-popup {
        left: 0;
        right: 0;
        width: 100%;
    }
    .disposition-strategy-sec .polygon-shape, .completetion-key .polygon-shape {
        display: none;
    }
    .top-sidebar-completetion {
        border-radius: 16px;
        border: 1px solid #f3f3f3;
        background: var(--primary-light);
        margin-bottom: 24px;
    }
    .completetion-key .new-popup {
        margin-top: 10px;
    }
    .page-content :not(.photo-sec) .specific-icon {
        top: 0;
        right: 0;
    }
    .page-content .sec.disposition-strategy-sec {
        border-radius: 16px;
        padding: 16px;
        border: 3px solid var(--primary-light);
        margin-top: 40px;
    }
    .disposition-strategy-sec .sec-block {
        position: relative;
    }
    .disposition-strategy-sec::before {
        border-radius: 16px;
    }
    .disposition-strategy-sec .action-buttons .btn {
        height: 40px;
        line-height: 40px;
    }
    .disposition-strategy-sec .new-popup {
        width: calc(100% + 32px);
        left: -16px;
    }
}
@media (max-width: 539px) {
    .photo-sec .upload-content {
        flex-direction: column;
    }
    .photo-sec .upload-label,.photo-sec .upload-subtext {
        text-align: center;
    }
}
@media (max-width: 479px) {
    .price-chart-container .bar {
        width: 10px;
    }
    .price-chart-container .date-label {
        margin-top: 5px;
        width: 18px;
        height: 18px;
        font-size: 9px;
        line-height: 18px;
    }
    .price-chart-container .today-line {
        height: calc(100% - 29px);
    }
    .price-chart-container .text-block {
        left: 19px;
    }
    .price-chart-wrapper .info-icon .new-popup, .price-factors .info-icon .new-popup  {
        left: -123px;
        right: inherit;
    }
    .price-chart-wrapper .polygon-shape, .price-factors .polygon-shape  {
        right: inherit;
        left: 126px;
    }
    .file-name-block {
        display: flex;
        width: 100%;
    }
    .file-name-block .file-name {
        word-wrap: break-word;
        width: calc(100% - 57px);
    }

    .qr-image_and_file-upload {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .file-text {
        width: 100%;
    }
    .qr-image_and_file-upload .file-text p {
        width: 100%;
    }
    .status-bottom-sub-blocks:after {
        height: 24px;
    }
    .status-bottom-sub-blocks {
        padding-top: 46px;
    }
    .page-content>.action-buttons .btn {
        width: 100%;
    }
}
@media (max-width: 400px)  {
    .page-title-wrapper {
        flex-wrap: wrap;
    }
}
@media (max-width: 374px) {
    .qr-image_and_file-upload {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .product-thumbnail {
        gap: 5px;
    }
    .market-value {
        flex-direction: column;
        align-items: flex-start;
    }
    .qr-image_and_file-upload {
        flex-direction: column;
    }
    .qr-image_and_file-upload .qr-image, .photo-sec .upload-box {
        width: 100%;
    }
    .file-upload-skeleton-wrapper {
        flex-direction: column;
        gap: 12px;
        height: 280px;
    }
}

@media only screen and (min-width: 1024px) {
    .fancybox-slide--image .fancybox-content {
        zoom: 1.2;
    }
}

/* AI Estimation subsection */
.ai-estimation-subsection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
/* Similar Products by AI - friendly links */
.similar-products-ai-wrapper {
    position: relative;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    padding: 38px 16px 16px 16px;
    min-height: 150px;
}
.similar-products-ai-label {
    position: absolute;
    top: 16px;
    left: 18px;
    font-size: 12px;
    color: #878d99;
    pointer-events: none;
}
.similar-products-ai-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.similar-products-ai-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #cdcfd4;
    border-radius: 10px;
    color: #17181a;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    word-break: break-all;
}
.similar-products-ai-list li a:hover {
    background: rgba(42, 164, 102, 0.06);
    border-color: #2aa466;
    color: #17181a;
}
.similar-products-ai-list li a svg {
    flex-shrink: 0;
    margin-left: auto;
    color: #878d99;
}
.similar-products-ai-list li a:hover svg {
    color: #2aa466;
}
.similar-products-ai-empty,
.similar-products-ai-text {
    color: #878d99;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* ── Connections Section (right-side, ERPNext style) ── */
.sec.connections-sec {
    margin-bottom: 0;
}
.conn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.conn-grid.conn-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 992px) {
    .conn-grid.conn-grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .conn-grid.conn-grid--5 {
        grid-template-columns: 1fr 1fr;
    }
}
.conn-col {
    border-right: 1px solid #F3F3F3;
    padding: 16px 0 12px;
}
.conn-col:last-child { border-right: none; }
.conn-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 10px;
    border-bottom: 1px solid #F3F3F3;
    margin-bottom: 4px;
}
.conn-col-label {
}
/* Connected-documents "add" (+) button. Brand-green so it reads as an action
   (the old faint gray icon was easy to miss). Shared by the Quotations and
   Variants group headers so both use one consistent, visible style. */
.conn-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: var(--primary, #2AA466);
    background: var(--primary-light, #EAF7F0);
    border: 1px solid var(--primary, #2AA466);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.conn-add-btn:hover { background: var(--primary, #2AA466); color: #fff; }
.conn-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.conn-row {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-bottom: 1px solid #F9F9F9;
}
.conn-row:last-child { border-bottom: none; }
.conn-row:hover { background: var(--primary-light); }
.conn-row-main {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.conn-row-name {
    font-size: 13px;
    font-weight: 600;
    color: #17181A;
}
.conn-row:hover .conn-row-name { color: var(--primary); }
.conn-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.conn-row-date {
    font-size: 11px;
    color: #878D99;
}
.conn-row-company {
    font-size: 11px;
    color: #878D99;
}
.conn-row-num  { color: #878D99; min-width: 18px; flex-shrink: 0; }
.conn-empty { padding: 10px 16px; color: #878D99; font-size: 13px; }

/* ========================================
   PAGE CONTENT TABS (same as quote-detail-tabs)
   ======================================== */
.equipment-item-tabs.quote-detail-tabs {
    display: flex;
    padding: 16px;
    background-color: #F3F3F3;
    border-radius: 32px 32px 0 0;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.equipment-item-tabs .tab-btn {
    background-color: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 40px;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s all;
    min-height: 44px;
    background-image: none;
}
.equipment-item-tabs .tab-btn span {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}
.equipment-item-tabs .tab-btn.active,
.equipment-item-tabs .tab-btn:hover {
    background-color: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}
.equipment-item-tabs .tab-btn.active span,
.equipment-item-tabs .tab-btn:hover span {
    color: var(--primary);
}
.page-content .tab-contents {
    border: 1px solid #F3F3F3;
    border-radius: 0 0 32px 32px;
}
.page-content .tab-contents .content {
    display: none;
    padding: 24px;
}
.page-content .tab-contents .content.show {
    display: block;
}
@media only screen and (max-width: 767px) {
    .equipment-item-tabs.quote-detail-tabs {
        padding: 12px;
        border-radius: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .equipment-item-tabs.quote-detail-tabs::-webkit-scrollbar {
        display: none;
    }
    .equipment-item-tabs .tab-btn * {
        white-space: nowrap;
    }
    .page-content .tab-contents {
        border: 0;
        border-radius: 0;
    }
    .page-content .tab-contents .content {
        padding: 16px;
    }
}

/* ========================================
   VARIANT SECTION
   ======================================== */
.variant-profile-header {
    border-radius: 0;
}
.variant-sidebar-item {
    display: flex;
    padding: 16px 20px;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #454B54;
    text-decoration: none;
    transition: 0.3s all;
}
.variant-sidebar-item:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}
.variant-sidebar-item.active {
    color: var(--primary);
}
.variant-sidebar-item.active > svg path {
    fill: var(--primary);
}
.variant-sidebar-item:hover > svg path {
    fill: var(--primary);
}
.variant-add-link {
    color: var(--primary);
}
.variant-add-link > svg path {
    fill: var(--primary);
}
.variant-sec-wrapper {
    padding: 0;
}
.variant-sec-wrapper > .title {
    margin-bottom: 16px;
}
.variant-form-wrapper .sec-block {
    margin-bottom: 0;
}
.variant-form-wrapper .fancy-input textarea,
#variant-form .fancy-input textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
    padding: 20px 16px 6px 16px;
    font-size: 16px;
    font-weight: 500;
    resize: vertical;
}
body .variant-form-wrapper .fancy-input textarea + label,
body .variant-form-wrapper .fancy-input textarea:placeholder-shown + label,
body #variant-form .fancy-input textarea + label,
body #variant-form .fancy-input textarea:placeholder-shown + label,
body .fancy-input textarea:focus + label,
body .fancy-input textarea:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 12px;
    color: #878d99;
    transform: none;
}
.variant-action-buttons {
    margin-top: 0;
}
.btn.variant-submit-btn {
    /* Same as submit-btn */
}
.variant-card-list {
    margin-bottom: 16px;
}
.variant-card-row {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #F3F3F3;
    cursor: pointer;
    transition: 0.2s all;
    align-items: center;
}
.variant-card-row:first-child {
    border-top: 1px solid #F3F3F3;
}
.variant-card-row:hover {
    background-color: var(--primary-light);
}
.variant-card-row.active {
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary);
}
.variant-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f9f9f9;
}
.variant-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.variant-card-info {
    flex: 1;
    min-width: 0;
}
.variant-card-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.variant-card-title .tag {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 18px;
}
.variant-card-title .tag.active {
    background-color: #e6f9f0;
    color: #2ba466;
}
.variant-card-title .tag.not-active {
    background-color: #fef3e6;
    color: #d4850a;
}
.variant-card-subtitle {
    font-size: 14px;
    color: #454B54;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.variant-card-seller {
    font-size: 13px;
    color: #878D99;
}
.variant-card-details {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}
.variant-card-field .title {
    font-size: 12px;
    color: #878D99;
    font-weight: 500;
    margin-bottom: 2px;
}
.variant-card-field .value {
    font-size: 14px;
    font-weight: 600;
    color: #17181A;
}
.variant-card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.variant-card-actions .variant-delete-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.variant-card-actions .variant-delete-btn:hover {
    background-color: #fcf1ef;
    border-color: #f56262;
}
.variant-card-actions .variant-delete-btn:hover svg path {
    fill: #f56262;
}
.variant-add-btn-wrapper .continue-shopping-btn {
    border: 2px solid var(--primary);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    gap: 8px;
    cursor: pointer;
    background-color: transparent;
    transition: 0.3s all;
    height: 44px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
}
.variant-add-btn-wrapper .continue-shopping-btn:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}
.variant-photo-sec .qr-image_and_file-upload {
    width: calc(100% - 510px);
}
.variant-ai-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
.variant-ai-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.variant-ai-label {
    font-size: 13px;
    color: #878D99;
    font-weight: 500;
}
.variant-ai-value {
    font-size: 16px;
    font-weight: 600;
    color: #17181A;
}
.variant-ai-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #454B54;
    margin: 0 0 8px;
}
.variant-ai-section .description-content {
    font-size: 14px;
    line-height: 22px;
    color: #454B54;
}
.field-desc {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #878D99;
    margin-top: 4px;
    font-style: italic;
}
.variant-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}
.variant-checkbox label {
    font-size: 14px;
    font-weight: 500;
    color: #454B54;
    cursor: pointer;
    margin: 0;
}
.variant-edit-only .fancy-input input[readonly] {
    background-color: #f9f9f9;
    color: #878D99;
    cursor: default;
}
.form-group.read-only .fancy-input input,
.form-group.read-only .fancy-input textarea,
.form-group.read-only .fancy-input select {
    background-color: #f9f9f9;
    color: #878D99;
    cursor: default;
    pointer-events: none;
}
.form-group.read-only .variant-checkbox input {
    pointer-events: none;
    opacity: 0.5;
}
.form-group.read-only .variant-checkbox label {
    color: #878D99;
}

/* Percent (%) input suffix */
.fancy-input.pct-input::after {
    content: '%';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 500;
    color: #878D99;
    pointer-events: none;
    z-index: 1;
}
.fancy-input.pct-input input {
    padding-right: 30px;
}

/* Original vs Variant comparison layout */
.origin-variant-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.origin-variant-header-row {
    align-items: center;
    margin-bottom: 4px;
}
.origin-variant-header-row .origin-ref-header,
.origin-variant-header-row .variant-edit-header {
    margin-bottom: 0;
}
.origin-variant-field-row {
    margin-top: 12px;
}
.origin-variant-field-row .origin-ref-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.origin-variant-field-row .variant-edit-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.origin-variant-field-row .variant-edit-panel > .col {
    width: 100%;
}
.origin-variant-field-row .variant-edit-panel > .col > .form-group {
    margin-bottom: 0;
}
.origin-variant-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #878D99;
}
@media (max-width: 768px) {
    .origin-variant-compare { grid-template-columns: 1fr; }
}

/* Original item reference panel */
.origin-ref-panel {
    background: #F9FAFB;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}
.origin-ref-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.origin-ref-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: #E6E6E6;
    color: #454B54;
}
.origin-ref-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}
.origin-ref-link:hover { text-decoration: underline; }
.origin-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.origin-ref-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.origin-ref-label {
    font-size: 11px;
    font-weight: 600;
    color: #878D99;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.origin-ref-value {
    font-size: 16px;
    font-weight: 500;
    color: #17181A;
    word-break: break-word;
}
.origin-ref-value.origin-ref-price {
    font-weight: 700;
    font-size: 16px;
}
.origin-ref-value.origin-ref-text {
    font-size: 16px;
    color: #17181A;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Variant edit panel */
.variant-edit-panel {
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}
.variant-edit-panel > .row { flex: 1; }
.variant-edit-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.variant-edit-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary);
}

/* Photos comparison panels */
.variant-photo-sec.photo-sec.photo-compare {
    display: block;
}
.origin-variant-photos .origin-photos-panel,
.origin-variant-photos .variant-photos-panel {
    padding: 16px;
}
.origin-variant-photos .product-image {
    margin: 0;
    width: 100%;
}
.origin-variant-photos .product-img-main .img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
.origin-variant-photos .product-img-main .img img {
    object-fit: contain;
    background: #f3f3f3;
}
.origin-variant-photos .product-thumbnail-wrapper {
    margin-top: 10px;
}
.origin-variant-photos .product-thumbnail {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: auto;
    margin-top: 10px;
}
.origin-variant-photos .product-thumbnail .thumbnail-item {
    width: auto;
}
.origin-variant-photos .product-thumbnail .thumbnail-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
}
.origin-variant-photos .product-thumbnail .thumbnail-img.active-thumb {
    border-color: var(--primary);
}
.origin-variant-photos .product-thumbnail .thumbnail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.origin-variant-photos .qr-image_and_file-upload {
    margin-top: 12px;
    width: 100%;
}
.origin-variant-photos .upload-box {
    min-height: auto;
    padding: 10px 16px;
}
.origin-variant-photos .upload-content {
    gap: 10px;
}
.origin-variant-photos .upload-label,
.origin-variant-photos .upload-subtext {
    font-size: 13px;
    line-height: 18px;
}
.origin-variant-photos .upload-icon svg {
    width: 18px;
    height: 18px;
}
.origin-variant-photos .slider-wrapper {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
}
/* Warehouse section */
.warehouse-autocomplete-wrapper {
    position: relative;
}
.create-warehouse-popup .popup-inner {
    max-width: 620px;
}
.create-warehouse-popup .popup-content {
    padding: 0 24px 8px;
}
.create-warehouse-popup .form-group {
    margin-bottom: 12px;
}
.create-warehouse-popup .show-address {
    font-size: 13px;
    color: #454B54;
    margin-top: 8px;
    line-height: 1.5;
}
.create-warehouse-popup .show-address .value {
    font-weight: 600;
}
.create-warehouse-popup gmp-place-autocomplete {
    border: 1px solid #CDCFD4;
    border-radius: 16px;
    min-height: 56px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Actions dropdown between Download Flyer and Discard */
.actions-dropdown {
    position: relative;
    display: inline-flex;
}
.actions-dropdown-toggle {
    margin: 0;
    padding: 6px 16px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    border-radius: 12px;
    background-color: var(--primary);
    color: #fff;
    border: 2px solid var(--primary);
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}
.actions-dropdown-toggle:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.actions-dropdown-toggle svg {
    transition: transform 0.15s ease;
}
.actions-dropdown.open .actions-dropdown-toggle svg {
    transform: rotate(180deg);
}
.actions-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid #E3E6EB;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 9999;
    display: none;
    flex-direction: column;
    gap: 4px;
}
.actions-dropdown.open .actions-dropdown-menu {
    display: flex;
}
.actions-dropdown-menu .btn,
.actions-dropdown-menu a.btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: 8px;
    height: auto;
    padding: 8px 12px;
    margin: 0;
}
.actions-dropdown-menu .btn svg,
.actions-dropdown-menu a.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.actions-dropdown-menu .btn.disposition-cart {
    background-color: transparent;
    color: #17181A;
    border: none;
}
.actions-dropdown-menu .btn.disposition-cart svg path {
    fill: var(--primary);
}
.actions-dropdown-menu .btn.disposition-cart:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}
.actions-dropdown-menu .btn.view-product {
    background-color: transparent;
    color: #17181A;
    border: none;
}
.actions-dropdown-menu .btn.view-product:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}
.actions-dropdown-menu .btn.view-product:hover svg path {
    fill: var(--primary);
    stroke: var(--primary);
}
.actions-dropdown-menu .go-to-cart {
    background-color: transparent;
    color: #17181A;
    border: none;
}
.actions-dropdown-menu .go-to-cart:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}
/* Read-only share guard (2026-06-24): muted, non-interactive write actions
   (Mark as Processed / Published / Create Variant) for view-only users. The
   buttons render with `disabled` so they emit no click; this greys them and
   shows a not-allowed cursor, and neutralizes the hover highlight. */
.actions-dropdown-menu .btn.action-readonly,
.actions-dropdown-menu .btn.view-product.action-readonly,
.actions-dropdown-menu .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.actions-dropdown-menu .btn.action-readonly:hover,
.actions-dropdown-menu .btn.view-product.action-readonly:hover {
    background-color: transparent;
    color: #17181A;
}
.actions-dropdown-menu .btn.action-readonly:hover svg path,
.actions-dropdown-menu .btn.view-product.action-readonly:hover svg path {
    fill: var(--primary);
    stroke: none;
}
.equipment-item-tabs.quote-detail-tabs {
    align-items: center;
    flex-wrap: nowrap;
}
.equipment-item-tabs .actions-dropdown {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    margin-top: -10px;
}
.equipment-item-tabs .actions-dropdown-toggle {
    min-height: 44px;
    height: auto;
    padding: 10px 20px;
    border-radius: 40px;
    border-width: 1px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    box-sizing: border-box;
}
/* Item status timeline (top-of-page stepper) */
.item-status-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 20px 24px 16px;
    margin: 0;
    background: #fff;
    border-left: 1px solid #F3F3F3;
    border-right: 1px solid #F3F3F3;
    border-radius: 0;
    box-shadow: none;
}
.item-status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.item-status-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #CDCFD4;
    background: #fff;
    color: #878D99;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    flex-shrink: 0;
}
.item-status-step-icon { display: block; color: inherit; }
.item-status-step-check {
    display: none;
    color: #fff;
}
.item-status-step-label {
    font-size: 13px;
    font-weight: 500;
    color: #878D99;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    transition: color .2s ease;
}
.item-status-connector {
    flex: 1 1 auto;
    height: 2px;
    min-width: 20px;
    background: #E6E6E6;
    margin: 17px 6px 0;
    border-radius: 2px;
    transition: background-color .2s ease;
}
.item-status-step.active .item-status-step-circle {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(44,158,99,.12);
}
.item-status-step.active .item-status-step-label {
    color: var(--primary);
    font-weight: 600;
}
.item-status-step.completed .item-status-step-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.item-status-step.completed .item-status-step-icon { display: none; }
.item-status-step.completed .item-status-step-check { display: block; }
.item-status-step.completed .item-status-step-label {
    color: #17181A;
    font-weight: 500;
}
.item-status-connector.completed { background: var(--primary); }
@media (max-width: 767px) {
    .item-status-timeline {
        overflow-x: auto;
        padding: 16px 12px;
        margin: 0;
        border-left: 0;
        border-right: 0;
    }
    .item-status-step-label { font-size: 11px; }
    .item-status-step-circle { width: 30px; height: 30px; font-size: 12px; }
    .item-status-connector { min-width: 16px; margin-top: 14px; }
}

/* Actions dropdown polish — panel, item, and disabled state */
.actions-dropdown-menu {
    border-radius: 14px;
    border: 1px solid #EDEFF3;
    box-shadow: 0 12px 32px rgba(23, 24, 26, 0.10), 0 2px 6px rgba(23, 24, 26, 0.04);
    padding: 8px;
    gap: 2px;
    min-width: 260px;
    animation: actionsDropdownFadeIn .14s ease-out;
}
@keyframes actionsDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.actions-dropdown-menu .btn,
.actions-dropdown-menu a.btn {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}
.actions-dropdown-menu .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
}
.actions-dropdown-menu .btn:active:not([disabled]):not(:disabled) {
    background-color: var(--primary-light);
    color: var(--primary);
}
.actions-dropdown-menu .btn[disabled],
.actions-dropdown-menu .btn:disabled {
    color: #A6ACB8 !important;
    background: transparent !important;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}
.actions-dropdown-menu .btn[disabled] svg,
.actions-dropdown-menu .btn:disabled svg {
    filter: grayscale(1) opacity(0.55);
}
.actions-dropdown-menu .btn[disabled]:hover,
.actions-dropdown-menu .btn:disabled:hover {
    background: transparent !important;
    color: #A6ACB8 !important;
}

/* Warehouse Location — generic key-value display of latest_picking_list */
.picking-list-block {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid #E5E8EE;
    border-radius: 10px;
    background: #FAFBFC;
}
.picking-list-title {
    font-size: 14px;
    font-weight: 600;
    color: #2A2F3A;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* .picking-list-block sits in a .sec-block (not a .sec), so the generic
   ".sec .help" icon rule doesn't reach it — scope the tool-tip icon here. */
.picking-list-title .help {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: block;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    outline: 0;
    padding: 0;
    background-image: url(/assets/img/tool-tip-gray.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
}
.picking-list-title .help.active {
    background-image: url(/assets/img/tool-tip-green.svg);
}
.picking-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
}
@media (max-width: 768px) {
    .picking-list-grid { grid-template-columns: 1fr; }
}
.picking-list-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px dashed #E5E8EE;
    min-width: 0;
}
.picking-list-row:last-child,
.picking-list-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
}
.picking-list-label {
    font-size: 12px;
    color: #878D99;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.picking-list-value {
    font-size: 14px;
    color: #2A2F3A;
    word-break: break-word;
}
.picking-list-empty {
    font-size: 13px;
    color: #878D99;
    font-style: italic;
}

/* Add / Edit Location form (accounting users only) + append-only location
   history timeline, both inside .picking-list-block. */
.picking-add-btn {
    margin-top: 12px;
}
.picking-add-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #E5E8EE;
}
.picking-add-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.picking-add-msg {
    font-size: 13px;
    color: #878D99;
}
.picking-add-msg.error { color: #C0392B; }
.picking-add-msg.success { color: #1E8449; }
.picking-list-history {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #E5E8EE;
}
.picking-list-history-title {
    font-size: 12px;
    font-weight: 600;
    color: #878D99;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.picking-list-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.picking-list-history-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px dashed #E5E8EE;
}
.picking-list-history-row:last-child { border-bottom: 0; }
.picking-list-history-loc {
    font-size: 14px;
    color: #2A2F3A;
    word-break: break-word;
}
.picking-list-history-prev {
    font-size: 12px;
    color: #878D99;
}
.picking-list-history-meta {
    font-size: 12px;
    color: #878D99;
}

/* AI lock toggle — sits below the title input and the description editor.
   Reuses the .switch / .slider pattern from the toggle styles above. We
   intentionally do NOT add the .toggle-container class on the wrapper —
   that class carries an `all: unset` rule on its child input which strips
   the opacity:0 that hides the native checkbox, leaking a stray browser
   checkbox glyph next to the slider. (Pre-existing footgun in the
   codebase; the only other .toggle-container usage is wrapped in
   <?php if(false): ?> at views/my-equipment-item/my-equipment-item.php
   so it was never rendered to expose the bug.) */
.ai-lock-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #f7f8fa;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #454b54;
    cursor: pointer;
}
.ai-lock-toggle .toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
}
.ai-lock-toggle .lock-icon {
    color: #878d99;
    flex-shrink: 0;
}
/* Defensive: ensure the native checkbox stays hidden even if a future
   parent rule re-applies `all: unset`. Without this, browsers paint a
   small checkbox glyph that bleeds out left of the slider on :checked. */
.ai-lock-toggle .switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Editable description block — contenteditable div so the AI's HTML description
   renders in place (paragraphs, lists, bold) instead of leaking raw tags as
   plain text in a textarea. innerHTML is read on save by the form submit handler. */
.description-editor-wrapper {
    display: block;
}
.description-editor {
    min-height: 220px;
    padding: 14px 16px;
    border: 1px solid #cdcfd4;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    color: #17181a;
    cursor: text;
    overflow-y: auto;
}
.description-editor:focus {
    outline: none;
    border-color: var(--primary, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.description-editor[data-disabled="1"] {
    background: #f3f3f3;
    color: #878d99;
    cursor: not-allowed;
}
.description-editor p {
    margin: 0 0 12px 0;
}
.description-editor p:last-child {
    margin-bottom: 0;
}
.description-editor ul,
.description-editor ol {
    margin: 0 0 12px 0;
    padding-left: 24px;
}
.description-editor h1,
.description-editor h2,
.description-editor h3 {
    margin: 0 0 8px 0;
    line-height: 1.3;
}
/* Match the spacing the AI Notes / Non-AI Context sections use between their
   editable content and the section-level Update button (see .sec.notes
   .action-buttons rule above). Without this the Update button sits flush
   against the lock-toggle row, looking cramped. */
.sec.description .action-buttons {
    margin-top: 24px;
}

/* Price factors — v2 "Net pricing pressure" widget.
   Layout:
     1. Empty state (.price-factors-empty) when no AI analysis exists.
     2. Net banner (.pf-net-banner) — headline label + direction arrow,
        confidence chip, recommended action, summary; tinted up/down/neutral.
     3. Factor cards grid (.pf-factors-grid > .pf-factor-card) — one per
        factor (demand / competition / condition / lifecycle / price_trend),
        each with direction arrow, strength bars, confidence tag, summary,
        and evidence pills.
   Tones: up → brand green, down → muted red, neutral → grey. Low confidence
   greys the card / banner down.
   Brand: green var(--primary), text #454B54, headings #2c3e50. */

/* --- Empty state --- */
.price-factors-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f8fa;
    border: 1px dashed #d6d9df;
    color: #878d99;
    font-size: 14px;
    font-weight: 500;
}
.price-factors-empty svg { flex: 0 0 auto; opacity: .7; }

/* --- Net banner --- */
.pf-net-banner {
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f8fa;
    border: 1px solid #e6e8ec;
    margin-bottom: 14px;
}
.pf-net-banner.up {
    background: var(--primary-light);
    border-color: var(--primary-light);
}
.pf-net-banner.down {
    background: #FCE5E2;
    border-color: #F5C9C2;
}
.pf-net-banner.low-confidence {
    opacity: .68;
    filter: saturate(.7);
}
.pf-net-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pf-net-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #454b54;
}
.pf-net-banner.up .pf-net-label { color: var(--primary); }
.pf-net-banner.down .pf-net-label { color: #BA5E5E; }
.pf-net-banner.neutral .pf-net-label { color: #878d99; }
.pf-net-action {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}
.pf-net-summary {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: #454b54;
}

/* Confidence chip on the net banner */
.pf-confidence-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    background: #ffffff;
    color: #6b7280;
    border: 1px solid #e6e8ec;
}
.pf-confidence-chip.pf-conf-high { color: var(--primary); border-color: var(--primary-light); }
.pf-confidence-chip.pf-conf-medium { color: #B07A1A; border-color: #FFE3A8; }
.pf-confidence-chip.pf-conf-low { color: #878d99; }

/* --- Factor groups (Pushing up / Pulling down) --- */
/* Side-by-side group layout so the widget fills the full section width.
   auto-fit: both groups present -> two equal columns; only one group -> it
   spans the full width (its .pf-factors-grid then auto-fits its own cards). */
.pf-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}
.pf-group {
    margin-top: 14px;
}
.pf-groups .pf-group {
    margin-top: 0;
}
.pf-group-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pf-group-title.up { color: var(--primary); }
.pf-group-title.down { color: #BA5E5E; }
.pf-no-pressure {
    margin-top: 14px;
    font-size: 13px;
    color: #878d99;
    font-style: italic;
}

/* --- Factor cards grid --- */
.pf-factors-grid {
    display: grid;
    /* Full-width section: auto-fit as many ~240px columns as fit (3–4 on
       desktop for the 5 factors), collapsing to fewer as the viewport narrows. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
@media (max-width: 600px) {
    .pf-factors-grid { grid-template-columns: 1fr; }
}
.pf-factor-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7f8fa;
    border: 1px solid #e6e8ec;
    text-align: left;
}
.pf-factor-card.up {
    background: var(--primary-light);
    border-color: var(--primary-light);
}
.pf-factor-card.down {
    background: #FCE5E2;
    border-color: #F5C9C2;
}
.pf-factor-card.low-confidence {
    opacity: .7;
    filter: saturate(.7);
}
.pf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pf-card-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
}
.pf-factor-card.up .pf-card-label { color: var(--primary); }
.pf-factor-card.down .pf-card-label { color: #BA5E5E; }
.pf-factor-card.neutral .pf-card-label { color: #454b54; }

/* Strength bars (1–3 filled) */
.pf-strength {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pf-strength-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}
.pf-strength-bar {
    width: 6px;
    border-radius: 2px;
    background: #d6d9df;
}
.pf-strength-bar:nth-child(1) { height: 8px; }
.pf-strength-bar:nth-child(2) { height: 11px; }
.pf-strength-bar:nth-child(3) { height: 14px; }
.pf-factor-card.up .pf-strength-bar.filled { background: var(--primary); }
.pf-factor-card.down .pf-strength-bar.filled { background: #BA5E5E; }
.pf-factor-card.neutral .pf-strength-bar.filled { background: #878d99; }
.pf-strength-text {
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    color: #6b7280;
}

/* Confidence tag (per factor) */
.pf-conf-tag,
.pf-lowconf-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: capitalize;
    background: #ffffff;
    color: #6b7280;
    border: 1px solid #e6e8ec;
    white-space: nowrap;
}
.pf-lowconf-tag { color: #B07A1A; border-color: #FFE3A8; }

/* Per-factor one-line summary */
.pf-card-summary {
    font-size: 12.5px;
    line-height: 1.4;
    color: #454b54;
}

/* Evidence pills */
.pf-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pf-evidence-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: #ffffff;
    color: #454b54;
    border: 1px solid #e0e3e8;
}

/* --- Price factors help popup (the "?" tooltip describing the 5 factors) --- */
.pf-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.pf-help-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
}
.pf-help-intro {
    font-size: 12.5px;
    line-height: 1.45;
    color: #454b54;
    margin: 0 0 10px;
}
.pf-help-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eceef1;
}
.pf-help-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #454b54;
}
.pf-help-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.pf-help-dot.up { background: var(--primary); }
.pf-help-dot.down { background: #BA5E5E; }
.pf-help-dot.neutral { background: #878d99; }

/* ----------------------- Shared Users tab ----------------------- */
.shared-users-sec {
    padding: 16px 0;
}
.shared-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.shared-users-header .title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #17181A;
}
.shared-users-loading,
.shared-users-empty,
.shared-users-denied {
    padding: 16px;
    color: #878D99;
    font-size: 14px;
    background: #F8F8F8;
    border-radius: 8px;
    text-align: center;
}
.shared-users-denied {
    background: #FCE5E2;
    color: #BA5E5E;
}
.shared-users-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    overflow: hidden;
}
.shared-users-table thead th {
    background: #F8F8F8;
    color: #17181A;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #E6E6E6;
}
.shared-users-table tbody td {
    padding: 12px 14px;
    font-size: 14px;
    color: #17181A;
    border-bottom: 1px solid #F3F3F3;
    vertical-align: middle;
}
.shared-users-table tbody tr:last-child td {
    border-bottom: none;
}
.shared-users-flag {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}
.shared-users-flag.on {
    background: #E6F4EA;
    color: #1A7F37;
}
.shared-users-flag.off {
    background: #F3F3F3;
    color: #878D99;
}
.shared-users-remove-row {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shared-users-remove-row:hover {
    background: #FCE5E2;
}

/* Add user popup */
.shared-users-add-popup .popup-inner {
    max-width: 480px;
}
/* Layout for the Add User popup form rows. Field-level styling (input border,
   floating label, focus state) is delegated to .fancy-input from the main
   form-field system on this page — see the .fancy-input block above. Plain
   <input type="email|text"> children are wrapped in <div class="fancy-input">
   in the popup markup; do not add input rules scoped to .shared-users-add-form
   here or they will override .fancy-input. */
.shared-users-add-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.shared-users-add-form .form-row.two-col {
    flex-direction: row;
    gap: 16px;
}
.shared-users-add-form .form-row.two-col > div {
    flex: 1;
}
.shared-users-add-form .checkboxes {
    flex-direction: row;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}
.shared-users-add-form .checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #17181A;
    font-weight: 500;
}
.shared-users-add-form .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}
@media (max-width: 600px) {
    .shared-users-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .shared-users-table thead {
        display: none;
    }
    .shared-users-table,
    .shared-users-table tbody,
    .shared-users-table tr,
    .shared-users-table td {
        display: block;
        width: 100%;
    }
    .shared-users-table tbody tr {
        border-bottom: 1px solid #E6E6E6;
        padding: 8px 0;
    }
    .shared-users-table tbody td {
        border: none;
        padding: 6px 12px;
    }
    .shared-users-add-form .form-row.two-col {
        flex-direction: column;
    }
}

/* ----------------------------------------------------------------------------
   Prev / Next / Jump item navigation (accounting view).
   Hidden by default (display:none) — my-equipment-item.js reveals it
   (sets inline display:flex) only when a valid saved nav-list ordering is
   available, so direct URL loads stay clean. All styling lives here in
   standard site tokens (--primary, #cdcfd4 border) instead of inline styles.
   The jump field is a compact inline pagination stepper, not a form field,
   so it intentionally does NOT use the .fancy-input floating-label pattern —
   it still matches the site input tokens (border colour, primary focus).
---------------------------------------------------------------------------- */
.mei-prevnext {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mei-prevnext .btn.outline-btn {
    padding: 6px 12px;
    font-size: 14px;
}
.mei-prevnext .btn.outline-btn svg {
    vertical-align: middle;
}
.mei-prevnext-pos {
    font-size: 13px;
    color: #454B54;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mei-jump-input {
    width: 64px;
    height: 50px;
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    text-align: center;
    color: #17181a;
    font-weight: 500;
    box-sizing: border-box;
    outline: none;
    /* hide native number spinners so it reads as a standard portal field */
    -moz-appearance: textfield;
    appearance: textfield;
}
.mei-jump-input::-webkit-outer-spin-button,
.mei-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mei-jump-input:focus {
    border-color: var(--primary);
}

/* ── Item comments + activity timeline (frameless, below the ID label) ── */
.item-comments { margin: 28px 0 8px; padding: 0; background: none; border: none; box-shadow: none; }
.item-comments-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: #1d2433; }
.item-comments-note { font-size: 12.5px; line-height: 1.4; margin: 0 0 6px; color: #6b7280; }
.item-comments-hint { font-size: 12.5px; line-height: 1.4; margin: 0 0 16px; color: #8a94a6; }
.item-comments-hint strong { color: var(--primary, #2f9e44); font-weight: 600; }
.item-comments-composer { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.item-comments-composer .fancy-input { flex: 1; }
.item-comments-composer .fancy-textarea textarea { min-height: 46px; resize: vertical; }
.ic-post-btn { flex: 0 0 auto; }
.ic-thread { display: flex; flex-direction: column; gap: 18px; }
.ic-empty { color: #8a94a6; font-size: 14px; padding: 8px 0; }
.ic-entry { display: flex; gap: 12px; align-items: flex-start; }
.ic-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--primary, #2f9e44); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.ic-body { flex: 1; min-width: 0; }
.ic-head { display: flex; align-items: center; gap: 8px; }
.ic-author { font-weight: 600; font-size: 14px; color: #1d2433; word-break: break-all; }
.ic-time { font-size: 12px; color: #8a94a6; }
.ic-delete { margin-left: auto; border: none; background: none; color: #b0b8c4; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ic-delete:hover { color: #e03131; }
.ic-content { margin-top: 3px; font-size: 14px; color: #353c49; white-space: pre-wrap; word-break: break-word; }
/* "Email notification sent to …" line under a comment that #-mentioned someone. */
.ic-mention-sent { margin-top: 5px; font-size: 12px; line-height: 1.4; color: #1e7a3c; }
.ic-mention-sent .ic-mention-to { font-weight: 600; word-break: break-all; }
/* Live "Will notify: …" preview under the composer while typing a #mention. */
.ca-mention-preview { margin: -14px 0 18px; font-size: 12.5px; color: #6b7280; }
.ca-mention-preview .ca-chip { display: inline-block; background: #eaf7ef; color: #1e7a3c; border-radius: 12px; padding: 1px 9px; margin: 2px 4px 2px 0; font-weight: 600; }
/* Service (view / edit) messages — muted single line */
.ic-service .ic-avatar { background: #cdd4df; color: #4a5160; }
.ic-service-line { font-size: 13px; color: #6b7280; }
.ic-service-line .ic-author { font-weight: 600; color: #4a5160; font-size: 13px; }
.ic-verb { color: #8a94a6; }
.ic-changes { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; color: #6b7280; }
.ic-changes li { margin: 2px 0; word-break: break-word; }
.ic-changes strong { color: #4a5160; font-weight: 600; }

/* Duplicate item — confirm popup button loading state (the Duplicate action
   itself lives in the shared in-card Actions dropdown, .actions-dropdown). */
.duplicate-item-popup .confirm-duplicate-btn:disabled { opacity: .7; cursor: default; }

/* Read-only derived Dimensions rows — a little breathing room between each row
   of fields (shipping inch / actual cm / shipping cm) so they don't crowd. */
.dims-row { margin-bottom: 14px; }
.dims-derived-row { margin-top: 14px; }
.dims-derived-row .form-group { margin-bottom: 0; }

/* Margin between the stacked Retail Price (USD) and Sale Price (USD) fields
   in the editable Pricing form. */
.pricing-sale-usd { margin-top: 16px; }

/* ── Order threads (trunk + threads timeline) ────────────────────────────────
   The trunk above shows what happened to the UNIT; each thread below shows one
   ORDER's own progress. A unit sold twice has two histories, and the single bar
   could only ever display one of them.
   Colours/radii reuse the trunk's tokens above so the two read as one component. */
.item-status-timeline.item-status-trunk { border-bottom: 0; padding-bottom: 12px; }
.item-order-threads {
    background: #fff;
    border-left: 1px solid #F3F3F3;
    border-right: 1px solid #F3F3F3;
    padding: 0 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.item-order-threads-empty { font-size: 13px; color: #878D99; padding: 2px 0 6px; }
.item-order-thread {
    border: 1px solid #EDEEF0;
    border-radius: 12px;
    padding: 12px 14px;
    background: #FCFCFD;
}
.item-order-thread.ended { background: #FAFAFB; }
.item-order-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.item-order-thread-order { font-size: 13px; font-weight: 600; color: #17181A; }
.item-order-thread-customer { font-size: 12px; color: #878D99; }
.item-order-thread-state {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(44,158,99,.10);
    color: var(--primary);
    white-space: nowrap;
}
/* An ended thread is a fact, not a failure — grey, never red. */
.item-order-thread-state.ended { background: #EFEFF1; color: #6B7280; }
.item-order-thread-steps { display: flex; align-items: center; gap: 0; }
.item-order-thread-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.item-order-thread-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid #CDCFD4;
    background: #fff;
    display: block;
}
.item-order-thread-label { font-size: 11px; color: #878D99; white-space: nowrap; }
.item-order-thread-step.done .item-order-thread-dot { background: var(--primary); border-color: var(--primary); }
.item-order-thread-step.done .item-order-thread-label { color: #17181A; }
.item-order-thread-step.current .item-order-thread-dot {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(44,158,99,.14);
}
.item-order-thread-step.current .item-order-thread-label { color: var(--primary); font-weight: 600; }
.item-order-thread-line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 14px;
    background: #E6E6E6;
    /* Pulled up to sit on the dots' centre line. The offset is tied to the
       step's height, which is now fixed by .item-order-thread-step's min-height
       (dot + label + date row) — so this stays correct whether or not a given
       checkpoint has a date to print. Was 15px, when the step ended at label. */
    margin: 0 5px 35px;
    border-radius: 2px;
}
.item-order-thread-line.done { background: var(--primary); }

/* Date under each checkpoint. It was a `title` attribute only, so the question
   people actually bring to a timeline needed a hover they had no reason to
   guess at, and could not be answered at all on a touch screen. Reserved height
   on every step, dated or not, so the labels stay on one baseline instead of
   the row jumping wherever a date happens to exist. */
.item-order-thread-step { min-height: 46px; }
.item-order-thread-date {
    font-size: 10px;
    color: #A6ABB5;
    white-space: nowrap;
    line-height: 1.2;
}
.item-order-thread-step.done .item-order-thread-date,
.item-order-thread-step.current .item-order-thread-date { color: #878D99; }

/* Quantity — rendered only when it is not 1, so it reads as an exception. */
.item-order-thread-qty {
    font-size: 11px;
    color: #878D99;
    background: #F4F4F6;
    border-radius: 4px;
    padding: 1px 6px;
}

/* A cancelled sale did not happen. Returned deliberately keeps the neutral
   treatment above: that sale DID happen and then reversed, and colouring both
   the same would call two different things one thing. */
.item-order-thread.cancelled { background: #FDF6F5; }
.item-order-thread.cancelled .item-order-thread-order { color: #C0392B; }
.item-order-thread.cancelled .item-order-thread-state.ended {
    background: #F8E6E3;
    color: #C0392B;
}

/* "Showing only your orders." Stated plainly and once, above the rows it
   qualifies. Says nothing about whether other orders exist — that is the fact
   the scoping withholds. */
.item-order-threads-scoped {
    font-size: 12px;
    color: #878D99;
    padding: 0 0 8px;
}

/* A disposition: the unit left the sale path rather than advancing along it.
   LEFT-ALIGNED, not centred. Centred, the chip lands under the middle of the
   bar and reads as though the unit sits at whichever stop it happens to line up
   with — "Storage" appeared to hang off Published on a four-stop trunk. It is a
   statement about the unit, not a position on the line, so it sits at the start
   with a leader and claims nothing about where it is. */
.item-status-branch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 10px;
}
.item-status-branch::before {
    content: "\21B3";
    color: #A6ABB5;
    font-size: 14px;
    line-height: 1;
}
.item-status-branch-label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    background: #F4F4F6;
    border: 1px dashed #CDCFD4;
    border-radius: 12px;
    padding: 3px 12px;
}
/* The stop it forked at is reached, but nothing is in progress there — the
   journey ended rather than paused. Hollow instead of filled. */
.item-status-step.active.departed .item-status-step-circle {
    background: #fff;
    border-style: dashed;
    color: #878D99;
}
.item-status-step.active.departed .item-status-step-label { color: #878D99; }

@media (max-width: 767px) {
    .item-order-threads { padding: 0 14px 14px; }
    /* Horizontal scroll rather than a collapsed, unreadable row of dots. */
    .item-order-thread-steps { overflow-x: auto; padding-bottom: 4px; }
    .item-order-thread-state { margin-left: 0; }
}

/* ── Variant settlement panel ────────────────────────────────────────────────
   Sits under Approval: approval opens the negotiation, settlement closes it.
   Reuses the same neutrals/green as the order-thread block above so the two
   read as one design rather than two bolted together. */
.variant-settlement-panel {
    border: 1px solid #EDEEF0;
    border-radius: 12px;
    padding: 14px 16px;
    background: #FCFCFD;
    margin-top: 4px;
}
.variant-settlement-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.variant-settlement-title { font-size: 13px; font-weight: 600; color: #17181A; }
.variant-settlement-state {
    margin-left: auto;
    font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(42,164,102,.10); color: #2AA466;
}
.variant-settlement-state.settled { background: #EFEFF1; color: #6B7280; }
.variant-settlement-figures {
    font-size: 12px; color: #454B54; line-height: 1.7; margin-bottom: 10px;
}
.variant-settlement-figures b { color: #17181A; }
.variant-settlement-parties { display: flex; gap: 10px; flex-wrap: wrap; }
.variant-settlement-party {
    flex: 1 1 200px;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #EDEEF0; border-radius: 10px;
    padding: 8px 10px; background: #fff;
}
.variant-settlement-party-label { font-size: 12px; font-weight: 600; color: #17181A; }
.variant-settlement-party-state { font-size: 11px; color: #878D99; }
.variant-settlement-party.confirmed .variant-settlement-party-state { color: #2AA466; font-weight: 600; }
.variant-settlement-btn { margin-left: auto; padding: 5px 14px !important; font-size: 12px !important; }
.variant-settlement-party.confirmed .variant-settlement-btn { display: none; }
.variant-settlement-note { font-size: 11px; color: #878D99; margin-top: 9px; line-height: 1.5; }
@media (max-width: 767px) {
    .variant-settlement-parties { flex-direction: column; }
}

/* A note under the description explaining why an item is not publishing, placed
   next to the control that causes it rather than in a listing-status block
   further down the page that nobody connects to it. */
.description-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}
.description-note-warn { background: #FFF7ED; color: #B45309; border: 1px solid #FDE3C3; }
.description-note-info { background: #F1F7FF; color: #2A5E9E; border: 1px solid #D6E6FA; }

/* Restore list markers inside the AI description editor/preview. The global
   reset (global.css `ol, ul { list-style: none }`) strips bullets everywhere;
   descriptions can carry <ul>/<ol> (e.g. Harloff warranty & returns), so scope
   the markers back on just for this container. Higher specificity than the
   type-only reset, so it wins. */
#description_editor ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
#description_editor ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
#description_editor li { margin: 2px 0; }