/**
 * Styles for local_pstore.
 *
 * Everything is namespaced under .pstore- so nothing here can leak into the
 * host theme or any other plugin.
 */

/* ---------------------------------------------------------------- layout */

.pstore-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-top: 20px;
}

.pstore-sidebar {
    flex: 0 0 230px;
    max-width: 230px;
    min-width: 0;
}

.pstore-main {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 767px) {
    .pstore-layout {
        flex-direction: column;
    }

    .pstore-sidebar {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ---------------------------------------------------------------- search */

.pstore-searchbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
}

.pstore-searchbar .form-control {
    width: auto;
    flex: 1 1 220px;
    min-width: 150px;
}

.pstore-searchbar select.form-control {
    flex: 0 0 auto;
    width: auto;
}

/* ---------------------------------------------------------------- sidebar */

.pstore-catlist {
    margin-bottom: 10px;
}

.pstore-catitem {
    padding: 4px 0;
}

.pstore-catitem a {
    color: #444;
    text-decoration: none;
    font-size: 14px;
}

.pstore-catitem a:hover,
.pstore-catitem a.active {
    color: #0f6cbf;
    font-weight: 700;
}

.pstore-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pstore-tag {
    display: inline-block;
    background: #eef1f4;
    color: #495057;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 20px;
    text-decoration: none;
    margin: 2px 2px 2px 0;
}

.pstore-tag:hover,
.pstore-tag.active {
    background: #0f6cbf;
    color: #fff;
    text-decoration: none;
}

.pstore-activefilters {
    background: #f1f6fb;
    border: 1px solid #d5e4f3;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 14px;
}

.pstore-count {
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------- grid */

.pstore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 575px) {
    .pstore-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
}

.pstore-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pstore-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .09);
}

.pstore-card-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f4f6f8;
}

.pstore-card-media img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    display: block;
}

.pstore-flag {
    position: absolute;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    color: #fff;
    letter-spacing: .3px;
    z-index: 2;
}

.pstore-flag.featured {
    top: 8px;
    left: 8px;
    background: #0f6cbf;
}

.pstore-flag.sale {
    top: 8px;
    right: 8px;
    background: #d9480f;
}

.pstore-flag.oos {
    bottom: 8px;
    left: 8px;
    background: #c92a2a;
}

.pstore-flag.photos {
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, .62);
}

.pstore-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px;
    min-width: 0;
}

.pstore-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #212529;
    text-decoration: none;
    line-height: 1.35;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    min-height: 39px;
}

.pstore-card-title:hover {
    color: #0f6cbf;
    text-decoration: none;
}

.pstore-card-sub {
    font-size: 12px;
    color: #868e96;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

.pstore-card-price {
    margin-bottom: 8px;
}

.pstore-price {
    font-size: 17px;
    font-weight: 700;
    color: #0f6cbf;
}

.pstore-was {
    font-size: 12.5px;
    color: #adb5bd;
    margin-left: 6px;
}

.pstore-card-meta {
    font-size: 11.5px;
    color: #868e96;
    margin-bottom: 8px;
}

.pstore-card-action {
    margin-top: auto;
}

.pstore-card-btn {
    display: block;
    width: 100%;
    text-align: center;
}

/* ---------------------------------------------------------------- product */

.pstore-product {
    display: flex;
    gap: 34px;
    align-items: flex-start;
    margin: 18px 0 30px;
    flex-wrap: wrap;
}

.pstore-product-gallery {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 520px;
}

.pstore-product-details {
    flex: 1 1 340px;
    min-width: 0;
}

.pstore-mainphoto {
    width: 100%;
    max-height: 430px;
    object-fit: contain;
    background: #f4f6f8;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    display: block;
}

.pstore-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pstore-thumbimg {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border: 2px solid #e6e9ec;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.pstore-thumbimg:hover,
.pstore-thumbimg.active {
    border-color: #0f6cbf;
}

.pstore-product-title {
    margin: 0 0 6px;
    font-weight: 700;
    overflow-wrap: break-word;
}

.pstore-product-sku {
    font-size: 12.5px;
    color: #868e96;
    margin-bottom: 10px;
}

.pstore-product-summary {
    font-size: 15px;
    color: #495057;
    margin-bottom: 14px;
}

.pstore-product-price {
    margin: 14px 0 6px;
}

.pstore-price-main {
    font-size: 28px;
    font-weight: 700;
    color: #0f6cbf;
}

.pstore-saving {
    display: inline-block;
    margin-left: 10px;
    background: #e6fcf5;
    color: #087f5b;
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}

.pstore-product-tax {
    font-size: 12.5px;
    color: #868e96;
    margin-bottom: 10px;
}

.pstore-stock {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    margin: 8px 0 14px;
}

.pstore-stock.in {
    background: #ebfbee;
    color: #2b8a3e;
}

.pstore-stock.low {
    background: #fff4e6;
    color: #d9480f;
}

.pstore-stock.out {
    background: #fff5f5;
    color: #c92a2a;
}

/* ---------------------------------------------------------------- variants */

.pstore-variants {
    margin: 16px 0;
}

.pstore-variant-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin: 12px 0 6px;
    color: #343a40;
}

.pstore-variant-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pstore-variant-btn {
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.pstore-variant-btn:hover:not(.disabled) {
    border-color: #0f6cbf;
}

.pstore-variant-btn.selected {
    border-color: #0f6cbf;
    background: #e7f1fb;
    font-weight: 700;
}

.pstore-variant-btn.disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.pstore-variant-adj {
    color: #868e96;
    font-size: 12px;
    margin-left: 4px;
}

/* ---------------------------------------------------------------- prices */

.pstore-priceoptions {
    border: 1px solid #e6e9ec;
    border-radius: 8px;
    overflow: hidden;
}

.pstore-priceoption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f3f5;
}

.pstore-priceoption:last-child {
    border-bottom: none;
}

.pstore-priceoption-label {
    font-size: 14px;
    color: #343a40;
    min-width: 0;
    overflow-wrap: break-word;
}

.pstore-priceoption-amount {
    font-weight: 700;
    color: #0f6cbf;
    white-space: nowrap;
}

.pstore-shipping {
    font-size: 13px;
    color: #495057;
    margin: 14px 0;
}

.pstore-shipping.free {
    color: #2b8a3e;
    font-weight: 700;
}

.pstore-actions {
    margin: 18px 0;
}

.pstore-product-tags {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pstore-description {
    margin: 30px 0;
    max-width: 900px;
    overflow-wrap: break-word;
}

.pstore-description img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------- admin */

.pstore-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0 22px;
}

.pstore-stat {
    flex: 1 1 130px;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-left: 4px solid #adb5bd;
    border-radius: 8px;
    padding: 14px 16px;
    min-width: 0;
}

.pstore-stat.ok {
    border-left-color: #2b8a3e;
}

.pstore-stat.warn {
    border-left-color: #f08c00;
}

.pstore-stat.bad {
    border-left-color: #c92a2a;
}

.pstore-stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #212529;
}

.pstore-stat-label {
    font-size: 12.5px;
    color: #868e96;
    margin-top: 2px;
}

.pstore-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pstore-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 18px;
}

.pstore-filters .form-control {
    width: auto;
    flex: 0 1 190px;
    min-width: 120px;
}

.pstore-table td,
.pstore-table th {
    vertical-align: middle;
}

.pstore-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e6e9ec;
    background: #f4f6f8;
}

.pstore-imgcount {
    display: inline-block;
    font-size: 11px;
    color: #868e96;
    margin-left: 4px;
    vertical-align: top;
}

.pstore-name {
    font-weight: 700;
    color: #212529;
}

.pstore-sku {
    font-size: 11.5px;
    color: #868e96;
    font-family: monospace;
}

.pstore-meta {
    font-size: 11.5px;
    color: #868e96;
    margin-top: 2px;
}

.pstore-taglist {
    margin-top: 4px;
}

.pstore-taglist .pstore-tag {
    font-size: 10.5px;
    padding: 1px 7px;
}

.pstore-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f1f3f5;
    color: #495057;
}

.pstore-badge.ok {
    background: #ebfbee;
    color: #2b8a3e;
}

.pstore-badge.warn {
    background: #fff4e6;
    color: #d9480f;
}

.pstore-badge.bad {
    background: #fff5f5;
    color: #c92a2a;
}

.pstore-badge.muted {
    background: #f1f3f5;
    color: #868e96;
}

/* Image gallery preview on the edit form. */

.pstore-gallery-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 18px;
}

.pstore-gallery-preview > p {
    flex: 1 1 100%;
    margin: 0;
}

.pstore-gallery-item {
    text-align: center;
    max-width: 120px;
}

.pstore-gallery-item img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    display: block;
}

.pstore-gallery-item.is-main img {
    border-color: #0f6cbf;
}

.pstore-gallery-name {
    font-size: 10.5px;
    color: #868e96;
    font-family: monospace;
    margin-top: 4px;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ---------------------------------------------------------------- cart */

.pstore-cart {
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
}

.pstore-cart-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px solid #f1f3f5;
    flex-wrap: wrap;
}

.pstore-cart-line:last-child {
    border-bottom: none;
}

.pstore-cart-line.unavailable {
    background: #fff9f9;
}

.pstore-cart-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e6e9ec;
    flex: 0 0 auto;
}

.pstore-cart-info {
    flex: 1 1 200px;
    min-width: 0;
}

.pstore-cart-name {
    font-weight: 700;
    color: #212529;
    text-decoration: none;
    overflow-wrap: break-word;
}

.pstore-cart-variant {
    font-size: 12.5px;
    color: #868e96;
}

.pstore-cart-unit {
    font-size: 12.5px;
    color: #495057;
    margin-top: 3px;
}

.pstore-cart-warning {
    font-size: 12.5px;
    color: #c92a2a;
    font-weight: 700;
}

.pstore-cart-qty {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}

.pstore-cart-qty .form-control {
    width: 74px;
}

.pstore-cart-total {
    font-weight: 700;
    color: #0f6cbf;
    flex: 0 0 100px;
    text-align: right;
}

.pstore-totals {
    max-width: 340px;
    margin-left: auto;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    padding: 14px 18px;
}

.pstore-total-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14.5px;
}

.pstore-total-row.grand {
    border-top: 1px solid #e6e9ec;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #0f6cbf;
}

.pstore-cart-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
}

/* ---------------------------------------------------------------- checkout */

.pstore-checkoutintro {
    background: #f1f6fb;
    border: 1px solid #d5e4f3;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.pstore-ordersummary,
.pstore-deliveryblock,
.pstore-orderpanel {
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
    min-width: 0;
}

.pstore-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid #f5f6f7;
    font-size: 14.5px;
}

.pstore-summary-line:last-child {
    border-bottom: none;
}

.pstore-summary-name {
    min-width: 0;
    overflow-wrap: break-word;
}

.pstore-summary-amount {
    white-space: nowrap;
    font-weight: 600;
}

.pstore-summary-line.grand {
    border-top: 2px solid #e6e9ec;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #0f6cbf;
}

.pstore-address {
    background: #f8f9fa;
    border: 1px solid #eceef0;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    white-space: pre-wrap;
    margin: 0 0 10px;
}

.pstore-orderref {
    font-size: 15px;
    margin-bottom: 14px;
}

.pstore-payblock {
    margin: 22px 0;
}

.pstore-paynote {
    font-size: 12.5px;
    color: #868e96;
    margin-top: 8px;
}

.pstore-thankyou {
    background: #ebfbee;
    border: 1px solid #b2f2bb;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 22px;
}

.pstore-thankyou h3 {
    margin: 0 0 6px;
    color: #2b8a3e;
}

.pstore-orderdetail {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pstore-orderdetail .pstore-orderpanel {
    flex: 1 1 320px;
}

/* ---------------------------------------------------------------- buy form */

.pstore-buyform {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 280px;
}

.pstore-qty {
    width: 100px;
}

.pstore-addbtn {
    margin-top: 8px;
}

.pstore-loginnote {
    font-size: 14px;
    color: #495057;
    margin-bottom: 8px;
}

@media (max-width: 575px) {
    .pstore-cart-total {
        flex: 1 1 100%;
        text-align: left;
    }

    .pstore-totals {
        max-width: 100%;
    }
}

/* ==========================================================
   Admin dashboard
   ========================================================== */

.pstore-jumpnav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: #f4f6f8;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 20px;
}

.pstore-jumplabel {
    font-size: 12.5px;
    font-weight: 700;
    color: #868e96;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-right: 8px;
}

.pstore-jumplink {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #495057;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.pstore-jumplink:hover {
    background: #e3e8ed;
    color: #0f6cbf;
    text-decoration: none;
}

.pstore-jumplink.active {
    background: #0f6cbf;
    color: #fff;
}

.pstore-dash-title {
    font-weight: 700;
    margin: 0 0 18px;
}

/* KPI cards */

.pstore-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.pstore-kpi {
    background: #fff;
    border: 1px solid #e6e9ec;
    border-top: 3px solid #adb5bd;
    border-radius: 10px;
    padding: 15px 17px;
    min-width: 0;
}

.pstore-kpi.primary {
    border-top-color: #0f6cbf;
}

.pstore-kpi.ok {
    border-top-color: #2b8a3e;
}

.pstore-kpi.warn {
    border-top-color: #f08c00;
}

.pstore-kpi.bad {
    border-top-color: #c92a2a;
}

.pstore-kpi-label {
    font-size: 12px;
    color: #868e96;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 6px;
}

.pstore-kpi-value {
    font-size: 25px;
    font-weight: 700;
    color: #212529;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.pstore-kpi-delta {
    margin-top: 6px;
    font-size: 11.5px;
}

.pstore-kpi-note {
    color: #adb5bd;
}

.pstore-delta {
    display: inline-block;
    font-weight: 700;
    font-size: 11.5px;
    padding: 2px 7px;
    border-radius: 20px;
}

.pstore-delta.up {
    background: #ebfbee;
    color: #2b8a3e;
}

.pstore-delta.down {
    background: #fff5f5;
    color: #c92a2a;
}

.pstore-delta.neutral {
    background: #f1f3f5;
    color: #868e96;
}

/* Panels */

.pstore-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 18px;
    align-items: start;
}

.pstore-panel {
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    padding: 18px 20px;
    min-width: 0;
    overflow: hidden;
}

.pstore-panel.wide {
    grid-column: 1 / -1;
}

.pstore-panel h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #212529;
}

.pstore-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pstore-panel-head h3 {
    margin: 0;
}

.pstore-panel-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pstore-panel-controls .form-control {
    width: auto;
    font-size: 13px;
    padding: 4px 8px;
    height: auto;
}

.pstore-panel-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f5;
    font-size: 13.5px;
    color: #495057;
}

.pstore-chart {
    width: 100%;
    height: auto;
    display: block;
}

.pstore-chart-empty {
    padding: 26px 14px;
    text-align: center;
    color: #adb5bd;
    font-size: 13.5px;
    background: #f8f9fa;
    border-radius: 8px;
}

.pstore-chart-empty.ok {
    color: #2b8a3e;
    background: #ebfbee;
}

/* Status bars */

.pstore-statusbars {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pstore-statusrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pstore-statuslabel {
    flex: 0 0 130px;
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pstore-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pstore-statustrack {
    flex: 1 1 auto;
    height: 9px;
    background: #f1f3f5;
    border-radius: 20px;
    overflow: hidden;
    min-width: 0;
}

.pstore-statusfill {
    height: 100%;
    border-radius: 20px;
    transition: width .3s ease;
}

.pstore-statuscount {
    flex: 0 0 38px;
    text-align: right;
    font-weight: 700;
    font-size: 13px;
    color: #212529;
}

/* Ranked lists */

.pstore-ranklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pstore-rankrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pstore-rankinfo {
    flex: 1 1 150px;
    min-width: 0;
}

.pstore-rankname {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #212529;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pstore-rankname:hover {
    color: #0f6cbf;
}

.pstore-rankunits {
    font-size: 11.5px;
    color: #868e96;
}

.pstore-ranktrack {
    flex: 1 1 90px;
    height: 7px;
    background: #f1f3f5;
    border-radius: 20px;
    overflow: hidden;
    min-width: 60px;
}

.pstore-rankfill {
    height: 100%;
    background: #0f6cbf;
    border-radius: 20px;
}

.pstore-rankfill.alt {
    background: #7048e8;
}

.pstore-rankvalue {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: #0f6cbf;
    white-space: nowrap;
}

/* Stock alerts */

.pstore-alertlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pstore-alertrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: #fafbfc;
    border-radius: 6px;
}

.pstore-alertinfo {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .pstore-dash-grid {
        grid-template-columns: 1fr;
    }

    .pstore-statuslabel {
        flex: 0 0 100px;
        font-size: 12px;
    }
}

/* ==========================================================
   Printable documents: invoices, labels, packing slips
   ========================================================== */

.pstore-doc-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: #f4f6f8;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
}

.pstore-doc-hint {
    font-size: 12.5px;
    color: #868e96;
}

.pstore-doc {
    background: #fff;
    color: #212529;
    max-width: 860px;
    margin: 0 auto 30px;
    padding: 36px 40px;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.pstore-doc-head {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    border-bottom: 2px solid #212529;
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.pstore-doc-head h1 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px;
}

.pstore-doc-meta h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 10px;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pstore-doc-metatable {
    font-size: 13px;
    margin-left: auto;
}

.pstore-doc-metatable th {
    text-align: left;
    color: #6c757d;
    font-weight: 600;
    padding: 2px 14px 2px 0;
    white-space: nowrap;
}

.pstore-doc-metatable td {
    text-align: right;
    padding: 2px 0;
}

.pstore-doc-status {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 3px;
    text-transform: uppercase;
}

.pstore-doc-status.paid {
    background: #d3f9d8;
    color: #2b8a3e;
}

.pstore-doc-status.unpaid {
    background: #ffe3e3;
    color: #c92a2a;
}

.pstore-doc-addr {
    white-space: pre-line;
}

.pstore-doc-parties {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pstore-doc-party h3 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #6c757d;
    margin: 0 0 6px;
}

.pstore-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.pstore-doc-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6c757d;
    border-bottom: 2px solid #dee2e6;
    padding: 8px 10px;
}

.pstore-doc-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: top;
}

.pstore-doc-table .num {
    text-align: right;
    white-space: nowrap;
}

.pstore-doc-table .tick {
    width: 34px;
    text-align: center;
}

.pstore-checkbox {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1.5px solid #868e96;
    border-radius: 2px;
}

.pstore-doc-sub {
    font-size: 12px;
    color: #6c757d;
}

.pstore-doc-sku {
    font-family: monospace;
    font-size: 11.5px;
    color: #868e96;
}

.pstore-doc-totals {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 22px;
}

.pstore-doc-totals table {
    min-width: 290px;
}

.pstore-doc-totals th {
    text-align: left;
    font-weight: 500;
    color: #495057;
    padding: 5px 20px 5px 0;
}

.pstore-doc-totals td {
    text-align: right;
    padding: 5px 0;
    white-space: nowrap;
}

.pstore-doc-totals tr.grand th,
.pstore-doc-totals tr.grand td {
    border-top: 2px solid #212529;
    padding-top: 10px;
    font-size: 17px;
    font-weight: 800;
}

.pstore-doc-barcode {
    text-align: center;
    margin: 22px 0;
}

.pstore-doc-barcode svg {
    max-width: 320px;
}

.pstore-doc-barcode-text,
.pstore-label-barcodetext {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 3px;
}

.pstore-doc-notes {
    background: #f8f9fa;
    border-left: 3px solid #dee2e6;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
}

.pstore-doc-footer {
    border-top: 1px solid #dee2e6;
    padding-top: 14px;
    font-size: 12px;
    color: #6c757d;
    text-align: center;
}

.pstore-doc-generated {
    font-style: italic;
    margin: 0;
}

/* Shipping label: 4 x 6 inch proportions */

.pstore-sheet {
    margin: 0 auto 26px;
    max-width: 860px;
}

.pstore-label {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    padding: 18px 20px;
    max-width: 460px;
    margin: 0 auto;
    font-size: 13px;
}

.pstore-label-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.pstore-label-tag {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #444;
    margin-bottom: 3px;
}

.pstore-label-from {
    font-size: 11.5px;
    line-height: 1.35;
}

.pstore-label-ref {
    text-align: right;
}

.pstore-label-reftext {
    font-family: monospace;
    font-weight: 700;
    font-size: 14px;
}

.pstore-label-date {
    font-size: 11px;
    color: #444;
}

.pstore-label-to {
    border: 2px solid #000;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.pstore-label-toname {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.pstore-label-toaddr {
    font-size: 15px;
    line-height: 1.35;
    margin-top: 4px;
}

.pstore-label-postcode {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-top: 6px;
}

.pstore-label-country {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.pstore-label-phone {
    font-size: 12px;
    margin-top: 6px;
}

.pstore-label-barcode {
    text-align: center;
    margin-bottom: 10px;
}

.pstore-label-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #000;
    padding-top: 8px;
    font-size: 11.5px;
}

.pstore-packing {
    background: #fff;
    color: #212529;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 30px 34px;
    max-width: 800px;
    margin: 0 auto;
}

.pstore-packing-qty {
    font-size: 17px;
    font-weight: 800;
}

.pstore-packing-sign {
    display: flex;
    gap: 20px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.pstore-packing-signbox {
    flex: 1 1 150px;
    border-top: 1px solid #868e96;
    padding-top: 6px;
    font-size: 11.5px;
    color: #6c757d;
    min-height: 46px;
}

/* Activity feed on the dashboard */

.pstore-activity {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pstore-activityrow {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 10px;
    background: #fafbfc;
    border-radius: 6px;
}

.pstore-activitytext {
    min-width: 0;
    flex: 1 1 auto;
}

.pstore-activitydesc {
    font-size: 13.5px;
    color: #212529;
    overflow-wrap: break-word;
}

.pstore-activitymeta {
    font-size: 11.5px;
    color: #868e96;
    margin-top: 2px;
}

.pstore-logdetail {
    font-size: 11.5px;
    color: #868e96;
    margin-top: 3px;
}

.pstore-logtable td {
    font-size: 13px;
}

/* ---------------------------------------------------------------- print */

@media print {
    .pstore-noprint,
    .pstore-doc-toolbar,
    nav,
    header,
    footer,
    #page-header,
    #page-footer,
    .navbar,
    .moodle-actionmenu,
    #nav-drawer,
    .drawer,
    .breadcrumb {
        display: none !important;
    }

    body,
    #page,
    #page-content,
    #region-main {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .pstore-doc,
    .pstore-packing {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pstore-label {
        margin: 0 !important;
    }

    /* One document per sheet when printing in bulk. */
    .pstore-sheet {
        page-break-after: always;
        break-after: page;
        margin: 0 !important;
    }

    .pstore-sheet:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .pstore-doc-table thead {
        display: table-header-group;
    }

    .pstore-doc-table tr,
    .pstore-activityrow {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    a[href]::after {
        content: none !important;
    }
}

@page {
    margin: 12mm;
}

/* ---------------------------------------------------------------- coupons */

.pstore-couponbox {
    max-width: 340px;
    margin-left: auto;
    margin-bottom: 12px;
}

.pstore-couponform {
    display: flex;
    gap: 8px;
}

.pstore-couponform .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.pstore-couponapplied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #ebfbee;
    border: 1px solid #b2f2bb;
    border-radius: 8px;
    padding: 9px 12px;
}

.pstore-couponinfo {
    min-width: 0;
}

.pstore-couponcode {
    display: inline-block;
    font-family: monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    background: #212529;
    color: #fff;
    padding: 2px 9px;
    border-radius: 4px;
}

.pstore-couponvalue {
    font-size: 12.5px;
    color: #2b8a3e;
    font-weight: 600;
}

.pstore-couponwarning {
    background: #fff4e6;
    border: 1px solid #ffd8a8;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: #d9480f;
    margin-bottom: 8px;
}

.pstore-total-row.discount,
.pstore-summary-line.discount {
    color: #2b8a3e;
    font-weight: 600;
}

@media (max-width: 575px) {
    .pstore-couponbox {
        max-width: 100%;
    }
}

/* ==========================================================
   Rental
   ========================================================== */

.pstore-rentalbadge {
    display: inline-block;
    background: #7048e8;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .3px;
    vertical-align: middle;
}

.pstore-rentalbox {
    background: #f6f3ff;
    border: 1px solid #e3dbff;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 16px 0;
}

.pstore-rentalbox h5 {
    font-size: 14.5px;
    font-weight: 700;
    color: #5f3dc4;
    margin: 0 0 10px;
}

.pstore-rentalfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.pstore-rentalfact {
    min-width: 0;
}

.pstore-rentalfact-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #868e96;
}

.pstore-rentalfact-value {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #5f3dc4;
}

.pstore-rentalnote,
.pstore-depositnote {
    font-size: 12.5px;
    color: #6c757d;
    margin-top: 8px;
}

.pstore-depositnote {
    background: #fff9db;
    border-left: 3px solid #f59f00;
    padding: 8px 12px;
    border-radius: 4px;
    color: #664d03;
}

/* Buy / rent picker */

.pstore-buyrent {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.pstore-ptype-option {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s ease, background .15s ease;
}

.pstore-ptype-option:hover {
    border-color: #b197fc;
}

.pstore-ptype-option:has(.pstore-ptype:checked) {
    border-color: #7048e8;
    background: #f6f3ff;
}

.pstore-ptype-label {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 14px;
    min-width: 0;
}

.pstore-ptype-label small {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: #868e96;
}

.pstore-ptype-price {
    font-weight: 700;
    color: #0f6cbf;
    white-space: nowrap;
}

.pstore-rentalfields {
    border-left: 3px solid #7048e8;
    padding-left: 14px;
    margin-bottom: 12px;
}

.pstore-delivery-option {
    display: block;
    font-size: 13.5px;
    padding: 4px 0;
    cursor: pointer;
    margin: 0;
}

.pstore-terms {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 12px 0;
    max-height: 220px;
    overflow-y: auto;
}

.pstore-terms h6 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #868e96;
    margin: 0 0 8px;
}

.pstore-terms-body {
    font-size: 13px;
    line-height: 1.55;
}

.pstore-acceptlabel {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin: 10px 0 0;
    cursor: pointer;
}

.pstore-addbtn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.pstore-card-rental {
    font-size: 12px;
    color: #7048e8;
    font-weight: 600;
    margin-bottom: 6px;
}

.pstore-cart-deposit {
    font-size: 12px;
    color: #664d03;
}

.pstore-total-row.deposit {
    color: #664d03;
}

.pstore-rentalflag {
    color: #5f3dc4;
}