/**
 * Packing Shipping - shop front styles.
 *
 * Theme agnostic: no reliance on Bootstrap classes and no !important.
 *
 * ONE PALETTE, everywhere: the surface, the border, the accent and the radius are the same ones
 * the delivery block uses (.ppse-shipping-estimate in productcatalogmassedit). Everything this
 * module shows the customer - the parcel summary in the cart, the line at checkout, the strip in
 * the "product added" modal, both pickers - is about delivery, so it reads as one voice:
 *
 *   surface  #f5f9ff      border  #d0e4f7      radius  6px
 *   accent   #1a6fb5      icons   #2980b9      seam    #e3eef8 solid / #cfe3f6 dashed
 *   muted    #6b7280
 *
 * The green accent this module started with (#2f6f4f) is gone: it belonged to no part of the
 * shop and made the parcel blocks look like a third-party bolt-on next to the delivery box.
 *
 * Colours are always stated, never inherited. Something in this theme's chain resolves to white
 * inside .tax-shipping-delivery-label, which once left correct text invisible until selected.
 */

.ps-packing {
    border: 1px solid #d0e4f7;
    border-radius: 6px;
    background: #f5f9ff;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.45;
    color: #2c3e50;
}

.ps-packing-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ps-packing-icon {
    flex: 0 0 auto;
    color: #1a6fb5;
    margin-top: 1px;
}

.ps-packing-head strong {
    display: block;
    font-weight: 600;
}

.ps-packing-note {
    display: block;
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.ps-packing-note--block {
    margin: 10px 0 0;
    padding: 7px 10px;
    border-radius: 5px;
    background: #eaf3fc;
}

/* Staff only (see cart_packing.tpl). Marked as such on purpose - it must be obvious at a glance
   that this line is not part of what the customer sees. */
.ps-packing-note--staff {
    background: #fff8e6;
    border: 1px dashed #e4cf9a;
    color: #7a6122;
}

.ps-packing-staff-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 3px;
    background: #e4cf9a;
    color: #4d3c0e;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ps-packing-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ps-packing-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-packing-box {
    flex: 0 0 auto;
    min-width: 155px;
    font-size: 13px;
}

.ps-packing-box small {
    display: block;
    color: #6b7280;
    font-size: 11.5px;
}

.ps-packing-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin-left: 6px;
    vertical-align: middle;
}

.ps-packing-badge--box {
    background: #e1effe;
    color: #1a56db;
    border: 1px solid #c3ddfd;
}

.ps-packing-badge--oversized {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.ps-packing-badge--table {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.ps-packing-badge--fixed {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.ps-packing-badge--weight {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.ps-packing-prod-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-packing-status {
    flex: 0 0 auto;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    white-space: nowrap;
}

.ps-packing-bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: #dfeaf5;
    overflow: hidden;
}

.ps-packing-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #1a6fb5;
}

.ps-packing-pct {
    flex: 0 0 auto;
    min-width: 40px;
    text-align: right;
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/*
 * Desktop: the list is one grid, so "Paczka N", the product name and the fill bar / status line up
 * in the same columns on every row, whether or not a row has a badge. The first column is as wide
 * as its widest cell instead of a fixed 155 px that only made room for the badge.
 */
@media (min-width: 641px) {
    .ps-packing-list {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        column-gap: 14px;
        row-gap: 7px;
        align-items: center;
    }
    .ps-packing-list li {
        display: contents;
    }
    /* Explicit columns: a row with fewer cells (no bar, no status) must still start a new grid row. */
    .ps-packing-box {
        grid-column: 1;
        min-width: 0;
        white-space: nowrap;
    }
    .ps-packing-prod-name {
        grid-column: 2;
    }
    .ps-packing-bar {
        grid-column: 3;
        width: 120px;
        flex: none;
    }
    .ps-packing-pct {
        grid-column: 4;
    }
    .ps-packing-status {
        grid-column: 3 / span 2;
    }
}
@media (max-width: 640px) {
    .ps-packing-list li {
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .ps-packing-box {
        min-width: auto;
    }
    .ps-packing-prod-name {
        flex: 1 1 100%;
        order: 3;
    }
    .ps-packing-status {
        margin-left: auto;
        order: 2;
    }
}

/* ---------------------------------------------------------------- upsell */
.ps-packing-fits {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #cfe3f6;
}

.ps-packing-fits-title {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1a6fb5;
}

.ps-packing-fits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 12px;
}

.ps-fit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Equal on all four sides. The name used to look inset on the right because the card was only
       as wide as the grid's 120px minimum: the text was clipped mid-word and the ragged edge read
       as padding. The grid below is wider now and the name fills the line. */
    padding: 8px;
    border: 1px solid #d0e4f7;
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    color: #2c3e50;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ps-fit-card:hover {
    background: #eef6ff;
    border-color: #a8d0f5;
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(26, 111, 181, 0.08);
}

.ps-fit-card-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* White, not grey. Product photos here are letterboxed by object-fit: contain, and a grey plate
   showed through around every one of them - in the cart block, where the cards are narrow, it read
   as a broken image frame rather than as a background. */
.ps-fit-card img,
.ps-fit-noimg {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 92px;
    object-fit: contain !important;
    background: #fff;
    border-radius: 4px;
    margin: 0 auto;
}

/* The placeholder for a product with no photo is the one case that needs a visible surface. */
.ps-fit-noimg {
    background: #f1f5fa;
}

.ps-fit-name {
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-fit-price {
    font-size: 13px;
    font-weight: 600;
}

/* Overlay with buttons on hover (PC) or click/tap (mobile) */
.ps-fit-actions {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
    border-radius: 5px;
}

@media (hover: hover) and (pointer: fine) {
    .ps-fit-card:hover .ps-fit-actions,
    .ps-fit-card:focus-within .ps-fit-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.ps-fit-card.ps-fit-active .ps-fit-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ps-fit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ps-fit-btn-add {
    background: #1a6fb5;
    border: 1px solid #1a6fb5;
    color: #fff !important;
}

.ps-fit-btn-add:hover {
    background: #14588f;
    border-color: #14588f;
}

.ps-fit-btn-add[disabled] {
    opacity: 0.65;
    cursor: default;
}

.ps-fit-btn-view {
    background: #f4f8fc;
    border: 1px solid #d0e4f7;
    color: #1a6fb5 !important;
}

.ps-fit-btn-view:hover {
    background: #e8f2fa;
    border-color: #b5d7f5;
}

/* ---------------------------------------------------------------- product page box (fallback)
   Only used when `productcatalogmassedit` is absent, disabled or too old: with that module
   present the same facts are rendered as rows INSIDE its delivery widget
   (views/templates/hook/product_fits_rows.tpl) and styled by its stylesheet.

   Shape, colours, sizes and spacing still mirror that widget, because this box lands in the same
   place and answers the neighbouring question.

   EVERY colour is stated explicitly. The first version inherited them, and something in the
   theme's chain resolves to white inside .tax-shipping-delivery-label - so the text was there
   but invisible until selected. Inheritance is not worth the risk in a foreign theme. */
.ps-parcel-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 10px 14px;
    background: #f5f9ff;
    border: 1px solid #d0e4f7;
    border-radius: 6px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #2c3e50;
}

/* No .ps-joined here any more. Gluing this box to the delivery widget side by side was a
   wrapper built by JavaScript around two elements owned by two modules, laid out with
   `inline-flex; flex-wrap: wrap` - so as soon as the product column was narrower than both boxes
   together (anywhere between 992 px and roughly 1120 px) the pair wrapped onto two lines, with
   the radii and the dashed seam still set for a horizontal join. It looked broken, and the
   breakage depended on the window width.

   The two are now ONE block, assembled on the server: this module renders rows, the widget
   renders the box. See renderProductWidgetRows(). */

.ps-parcel-box--alone {
    margin-top: 10px;
}

/* The one line version: checkout column and the "product added" modal.
   Deliberately smaller than the product page box. It sits among the order totals, where every
   other line is a short label and a figure, and at full size it was the loudest thing in a window
   whose job is to say "added, carry on". */
.ps-parcel-box--line {
    margin: 6px 0 0;
    width: auto;
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.8rem;
}

.ps-parcel-box--line .ps-parcel-icon svg {
    width: 14px;
    height: 14px;
}

.ps-parcel-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Same seam the delivery widget uses between its own two rows. */
.ps-parcel-row + .ps-parcel-row {
    margin-top: 1px;
    padding-top: 6px;
    border-top: 1px solid #e3eef8;
}

.ps-parcel-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: #2980b9;
}

.ps-parcel-label {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

/* No `margin-left: auto` here. The box is as wide as its widest row - the sentence in the note
   below - so pushing the value to the far edge left a hand-width gap after "W jednej paczce:".
   It sits right after the label instead. */
.ps-parcel-value {
    flex: 0 0 auto;
    font-weight: 700;
    color: #1a6fb5;
    white-space: nowrap;
}

.ps-parcel-row--note {
    font-size: 0.88rem;
    color: #555;
}

.ps-parcel-row--note .ps-parcel-icon {
    color: #1a6fb5;
}

/* The note is the one line that is allowed to wrap - it is a sentence, not a label. */
.ps-parcel-row--note .ps-parcel-label {
    white-space: normal;
    flex: 1 1 auto;
}

@media (max-width: 767px) {
    .ps-parcel-box {
        width: 100%;
        padding: 9px 11px;
        font-size: 0.88rem;
    }

    .ps-parcel-row--note {
        font-size: 0.82rem;
        align-items: flex-start;
    }

    .ps-parcel-row--note .ps-parcel-icon {
        margin-top: 2px;
    }
}

/* The theme hides the delivery widget in its sticky bottom bar; do the same, or the parcel box
   turns up in a 40px tall bar at the bottom of the screen. */
.tvfooter-product-sticky-bottom .ps-parcel-box {
    display: none;
}

/* ---------------------------------------------------------------- "top up the parcel" */
.ps-packing-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ps-packing-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid #1a6fb5;
    border-radius: 6px;
    background: #1a6fb5;
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.ps-packing-btn:hover {
    filter: brightness(1.08);
    color: #fff;
}

.ps-packing-btn:active {
    transform: translateY(1px);
}

.ps-packing-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.ps-packing-room {
    font-size: 12.5px;
    color: #6b7280;
}

/* ---------------------------------------------------------------- modal */
.ps-modal {
    position: fixed;
    inset: 0;
    z-index: 2000000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 18, 28, 0.65);
    animation: ps-fade 0.16s ease;
}

.ps-modal[hidden] {
    display: none;
}

/* Shaped like the delivery module's own modal ("Koszty i terminy dostawy"): same radius, same
   shadow weight, same header tint. A customer can open both from the same block. */
.ps-modal-dialog {
    width: min(1200px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: ps-rise 0.18s ease;
}

.ps-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    flex: 0 0 auto;
}

/* The footer holds one button and nothing to read, so it takes as little height as it can: the
   products are what the window is for. */
.ps-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 20px;
    flex: 0 0 auto;
}

.ps-modal-foot .ps-packing-btn {
    padding: 7px 14px;
    font-size: 13px;
}

.ps-modal-head {
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}

.ps-modal-foot {
    border-top: 1px solid #f0f2f5;
    flex-wrap: wrap;
}

.ps-modal-head strong {
    font-size: 15px;
    color: #2c3e50;
}

.ps-modal-head p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #6b7280;
}

.ps-modal-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: #eef2f5;
    color: #2c3e50;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ps-modal-close:hover {
    background: #dfe7ee;
}

.ps-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
}

/* Wide enough for the whole button caption on one line ("Dodaj oba do koszyka" wrapped at 150 px
   and made every card look differently padded). */
.ps-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
}

/* One rhythm inside the card: the same gap between every pair of elements, and the price and the
   button pinned to the bottom so cards of different name lengths still line up. */
.ps-modal-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d0e4f7;
    border-radius: 8px;
    background: #fff;
    color: #2c3e50;
}

.ps-modal-card img,
.ps-modal-card .ps-fit-noimg {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 150px;
    object-fit: contain !important;
    background: #fff;
    border-radius: 4px;
    margin: 0 auto;
}

.ps-modal-card .ps-fit-name {
    font-size: 13.5px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    /* Two lines reserved whatever the name: without it a short name pulled its price and button up
       and the cards stopped agreeing with each other. */
    min-height: 2.7em;
    flex: 1 1 auto;
}

.ps-modal-card .ps-fit-price {
    font-size: 15px;
}

/* A block-level flex link, not an inline one. Inline, the anchor shrank to the width of its own
   content and the `width: 100%` image inside measured itself against that box instead of the card -
   which is why the photo sat off to the left of the card it belongs to. */
.ps-modal-card a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.ps-modal-card a:hover .ps-fit-name {
    text-decoration: underline;
}

/* Same hover as the delivery block on the product page: a touch of blue and a single pixel of
   lift, so a card that can be opened says so the same way everywhere in this shop. */
.ps-modal-card {
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.ps-modal-card:hover {
    background: #eef6ff;
    border-color: #a8d0f5;
    transform: translateY(-1px);
}

.ps-modal-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #1a6fb5;
    border-radius: 6px;
    background: #fff;
    color: #1a6fb5;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ps-modal-add:hover {
    background: #1a6fb5;
    color: #fff;
}

.ps-modal-add[disabled] {
    opacity: 0.55;
    cursor: default;
}

.ps-modal-empty,
.ps-modal-loading {
    padding: 28px 10px;
    text-align: center;
    color: #6b7280;
    font-size: 13.5px;
}

.ps-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #dfeaf5;
    border-top-color: #1a6fb5;
    border-radius: 50%;
    animation: ps-spin 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}

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

@keyframes ps-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ps-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-modal,
    .ps-modal-dialog,
    .ps-spinner {
        animation-duration: 0.001ms;
    }
}

@media (max-width: 767px) {
    .ps-modal {
        padding: 10px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(10px + env(safe-area-inset-left, 0px));
        padding-right: calc(10px + env(safe-area-inset-right, 0px));
        align-items: center;
        justify-content: center;
    }

    .ps-modal-dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        border-radius: 10px;
    }

    .ps-modal-head {
        padding: 12px 14px;
        gap: 10px;
    }

    .ps-modal-head strong {
        font-size: 14px;
        line-height: 1.3;
    }

    .ps-modal-head p {
        font-size: 11.5px;
        line-height: 1.35;
        margin-top: 2px;
    }

    .ps-modal-close {
        width: 34px;
        height: 34px;
        border-radius: 6px;
        font-size: 22px;
        line-height: 34px;
    }

    .ps-modal-body {
        padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .ps-modal-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ps-modal-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 8px;
    }

    .ps-modal-card img,
    .ps-modal-card .ps-fit-noimg {
        height: 120px;
        object-fit: contain !important;
    }

    .ps-modal-card .ps-fit-name {
        font-size: 12.5px;
        line-height: 1.3;
        min-height: 2.6em;
    }

    .ps-modal-card .ps-fit-price {
        font-size: 14px;
    }

    .ps-modal-add {
        padding: 9px 12px;
        font-size: 13px;
        border-radius: 6px;
        width: 100%;
    }

    .ps-modal-foot {
        padding: 8px 14px;
        gap: 8px;
    }

    .ps-modal-foot .ps-packing-btn {
        padding: 7px 16px;
        font-size: 13px;
    }

    .ps-modal-empty,
    .ps-modal-loading {
        padding: 20px 10px;
        font-size: 12.5px;
    }
}

/* No prefers-color-scheme block here. The shop has one light theme; repainting only our two
   blocks for a visitor whose SYSTEM is dark left them as the only dark surfaces on a white page. */

/* ---------------------------------------------------------------- "product added" modal
   Injected by front-packing.js: the theme's only hook in that modal is wrapped in a <p>, which
   cannot hold a grid of cards. Sizes are smaller than in the cart - this is a passing glance,
   not a shopping surface.

   The container is created empty and hidden, then refilled in place; see fillBlockcart(). */
.ps-blockcart-fits {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #cfe3f6;
}

.ps-blockcart-fits[hidden] {
    display: none;
}

.ps-blockcart-title {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1a6fb5;
    line-height: 1.35;
}

.ps-blockcart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.ps-blockcart-grid .ps-fit-card {
    padding: 6px;
    gap: 4px;
}

.ps-blockcart-grid .ps-fit-card img,
.ps-blockcart-grid .ps-fit-noimg {
    height: 62px;
}

.ps-blockcart-grid .ps-fit-name {
    font-size: 11px;
    -webkit-line-clamp: 2;
}

.ps-blockcart-grid .ps-fit-price {
    font-size: 12px;
}

@media (max-width: 767px) {
    .ps-blockcart-grid {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    }
}

/* The "what else fits" invitation inside the product page box. A link, not a button: it opens a
   list, it does not commit to anything. */
.ps-parcel-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a6fb5;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ps-parcel-link:hover {
    text-decoration-style: solid;
    color: #14588f;
}

.ps-parcel-link[hidden] {
    display: none;
}


/* ------------------------------------------------------------- product page card, hover states
   The parcel card on the product page is rendered by this module (product_fits_rows.tpl) straight
   into the delivery widget's stack and wears that widget's classes, so its frame, palette and
   spacing come from productcatalogmassedit's stylesheet and the two cards cannot drift apart.

   The one thing that stylesheet cannot decide is whether the card reacts to a click: that depends
   on whether anything really fits next to this product, and only this module knows. front-packing.js
   marks the card with .ppse-clickable, so both states belong here, next to the script that chooses
   between them.

     clickable     - the same lift, surface and border as the delivery card above it. One gesture,
                     one answer: a click anywhere opens a window.
     not clickable - nothing moves and the cursor stays default, so the card never invites a click
                     that would do nothing.

   Both selectors carry one class more than the widget's base rules on purpose: the state then wins
   wherever the two stylesheets land in the cascade, including a shop still running an older
   productcatalogmassedit whose rules flattened the hover of this card. */
.ppse-shipping-estimate--parcel.ppse-clickable {
    cursor: pointer;
}

.ppse-shipping-estimate--parcel.ppse-clickable:hover {
    background: #eef6ff;
    border-color: #a8d0f5;
    transform: translateY(-1px);
}

.ppse-shipping-estimate--parcel:not(.ppse-clickable) {
    cursor: default;
}

.ppse-shipping-estimate--parcel:not(.ppse-clickable):hover {
    background: #f5f9ff;
    border-color: #d0e4f7;
    transform: none;
}