/* Companion-part suggestions shown inside the add-to-cart confirmation modal.
   Markup: templates/web/product/_cartSuggestions.html.twig
   Behaviour: web/assets/js/custom/cart-suggestions.js

   The card follows the category card (_productFrameV2 / product-card.css) — packaging rows, then
   warehouse availability, then quantity + add — at modal scale. Everything is scoped under .tcs so
   it cannot leak into the modal's existing "N pieces added" block. Loaded from the base layout
   because the modal appears on product detail, category and search pages, which have three
   different stylesheets between them. */

.tcs {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    text-align: left;
}

.tcs [hidden] {
    display: none !important;
}

.tcs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tcs-head-title {
    font-size: 15px;
    font-weight: 700;
    color: #232323;
    line-height: 1.2;
}

.tcs-head-hint {
    font-size: 12px;
    color: #8b8b8b;
    white-space: nowrap;
}

/* Horizontal strip. Scroll-snap keeps a card aligned to the left edge instead of stopping
   half-way, which matters because the cards are wider than a third of the modal. */
.tcs-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.tcs-strip::-webkit-scrollbar {
    height: 6px;
}

.tcs-strip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 999px;
}

.tcs-card {
    flex: 0 0 232px;
    width: 232px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 8px;
    padding: 12px;
    scroll-snap-align: start;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tcs-card:hover {
    border-color: rgba(0, 0, 0, .28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.tcs-media {
    display: block;
    height: 104px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: #f6f6f6;
    text-align: center;
}

.tcs-media img {
    height: 104px;
    width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.tcs-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* Part number leads the card: B2B buyers scan part numbers, not product titles. */
.tcs-partno {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #232323;
    text-decoration: none;
    word-break: break-word;
}

.tcs-partno:hover {
    color: #232323;
    text-decoration: underline;
}

/* The admin's "Show When Add To Cart Text" — the reason to buy, so it gets a real highlight
   rather than being buried in a tooltip. */
.tcs-reason {
    margin: 6px 0 0;
    padding: 6px 8px;
    border-left: 3px solid #ff9e18;
    border-radius: 3px;
    background: #fff7e9;
    font-size: 12px;
    line-height: 1.35;
    color: #6b4a06;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tcs-desc {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #7e7e7e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tcs-price {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.tcs-price-old {
    font-size: 12px;
    color: #d33;
    text-decoration: line-through;
}

.tcs-price-now {
    font-size: 17px;
    font-weight: 700;
    color: #232323;
}

.tcs-price-unit {
    font-size: 11px;
    color: #8b8b8b;
}

/* Packaging / Warehouse blocks, styled after the category card's labelled sections. */
.tcs-section {
    margin-top: 12px;
}

.tcs-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 11px;
    color: #2f6ea8;
    white-space: nowrap;
}

.tcs-section-title hr {
    flex-grow: 1;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(47, 110, 168, .35);
    opacity: 1;
}

.tcs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #232323;
}

/* Long warehouse names truncate instead of pushing the stock value out of the card. */
.tcs-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcs-row-old {
    font-size: 11px;
    font-weight: 400;
    color: #d33;
    text-decoration: line-through;
}

.tcs-row-unit {
    font-size: 10px;
    font-weight: 400;
    color: #8b8b8b;
}

.tcs-in {
    color: #16803c;
    white-space: nowrap;
}

.tcs-out {
    color: #d33;
    white-space: nowrap;
}

.tcs-na {
    color: #8b8b8b;
    white-space: nowrap;
}

.tcs-minorder {
    margin-top: 2px;
    font-size: 11px;
    color: #41505f;
}

.tcs-actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 12px;
}

.tcs-qty {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
    overflow: hidden;
}

.tcs-qty-btn {
    width: 26px;
    border: 0;
    background: #f4f4f4;
    color: #232323;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}

.tcs-qty-btn:hover {
    background: #e8e8e8;
}

.tcs-qty-input {
    width: 46px;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, .12);
    border-right: 1px solid rgba(0, 0, 0, .12);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #232323;
    -moz-appearance: textfield;
}

.tcs-qty-input::-webkit-outer-spin-button,
.tcs-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tcs-add {
    flex: 1 1 auto;
    min-height: 36px;
    border: 0;
    border-radius: 5px;
    background: #ff9e18;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
}

.tcs-add:hover {
    background: #ef8f0a;
}

.tcs-add:disabled {
    background: #f0c68a;
    cursor: default;
}

.tcs-incart {
    margin-top: 6px;
    font-size: 11px;
    color: #41505f;
}

.tcs-card--added {
    border-color: #16a34a;
    background: #f4fbf6;
}

.tcs-done {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
}

.tcs-done-text {
    font-size: 12px;
    font-weight: 600;
    color: #166534;
    line-height: 1.25;
}

.tcs-done-text::before {
    content: "\2713";
    margin-right: 4px;
    font-weight: 700;
}

.tcs-again {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #0d6efd;
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .tcs-card {
        flex-basis: 200px;
        width: 200px;
    }

    .tcs-head-hint {
        display: none;
    }
}