/* ==========================================================================
 * afx-cart.css — cart-page corrections aligning the Hyvä cart with the original storefront.
 *
 * Kept separate from afx-base.css because that file's deployed copy under pub/static is a
 * frozen root-owned copy on this box, so edits to its source are never served. Loaded body-end
 * (after afx-base.css) via Magento_Checkout::html/cart_assets.phtml, so equal-specificity
 * rules here win over afx-base.css section 2.
 *
 * Accents use --color-primary / --color-primary-darker from afx-store.css and resolve per
 * store; the only fixed colours are semantic (neutral greys, the "unavailable" red).
 * ========================================================================== */

:root {
    /* Semantic (non-brand) tokens used by the cart. The reference storefront shows
       the "No longer supplied" status in pure red on BOTH stores, so this is
       deliberately not tied to --color-primary. */
    --afx-cart-status-unavailable: #ff0000;
    --afx-cart-border: #dee2e6;
    --afx-cart-muted: #686868;
    --afx-cart-control-h: 2.25rem; /* 36px — reference control height */
}

/* ==========================================================================
 * 1. Cart toolbar: "Search SKU : [input] [add] [Upload Order]" on ONE line.
 *    Markup: autostore_child AFX_Products::cart/link_top.phtml
 * ========================================================================== */
.afx-cart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0 1.5rem;
}

.afx-cart-toolbar__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    position: relative;
}

.afx-cart-toolbar__search label {
    margin: 0;
    white-space: nowrap;
    font-size: .875rem;
    color: var(--afx-cart-muted);
}

/* Input and both buttons share one height so nothing sits off-baseline. */
.afx-cart-toolbar__search input[type="text"],
.afx-cart-toolbar__search input:not([type]),
.afx-cart-toolbar__search input#automplete-1 {
    height: var(--afx-cart-control-h);
    min-height: var(--afx-cart-control-h);
    width: 14rem;
    padding: 0 .625rem;
    font-size: .875rem;
    line-height: normal;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.afx-cart-toolbar__search input:focus {
    outline: none;
    border-color: var(--color-primary, #137C4E);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(19, 124, 78, .25));
}

.afx-cart-toolbar .afx-cart-btn,
.afx-cart-toolbar__search button[type="submit"],
.afx-cart-toolbar__upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--afx-cart-control-h);
    min-height: var(--afx-cart-control-h);
    padding: 0 1.25rem;
    box-sizing: border-box;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background: var(--color-primary, #137C4E);
    color: #fff;
    transition: background-color .15s ease-in-out;
}

.afx-cart-toolbar__search button[type="submit"] {
    padding: 0 .875rem; /* icon-only button */
}

/* "Search cart" (AFX_Products::cart/search.phtml, rendered only when the cart is
   paginated) shares the toolbar row rather than dropping to its own line.
   `flex: 0 1 auto` keeps it at its natural width so the row stays Search SKU ->
   Search cart -> Upload Order grouped from the left, instead of the field stretching
   and pushing Upload Order to the far edge. */
.afx-cart-toolbar .afx-cart-search {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.afx-cart-toolbar .afx-cart-search__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    width: 100%;
}

.afx-cart-toolbar .afx-cart-search__label {
    margin: 0;
    white-space: nowrap;
    font-size: .875rem;
    color: var(--afx-cart-muted);
}

.afx-cart-toolbar .afx-cart-search__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    width: 18rem;
    max-width: 100%;
}

/* cart-search.css pins this input to 40px / 6px radius with !important, which left it
   4px taller than every other control once it joined the toolbar row. Matching
   !important at equal specificity, later in the cascade, aligns it to the row. */
.afx-cart-search .afx-cart-search__field .afx-cart-search__input {
    height: var(--afx-cart-control-h) !important;
    min-height: var(--afx-cart-control-h) !important;
    line-height: normal !important;
    border-radius: 4px !important;
    border-color: #cfcfcf !important;
    font-size: .875rem !important;
}

.afx-cart-toolbar .afx-cart-search__input:focus {
    outline: none;
    border-color: var(--color-primary, #137C4E);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(19, 124, 78, .25));
}

.afx-cart-toolbar .afx-cart-search__icon {
    position: absolute;
    left: .625rem;
    color: #9aa3ab;
    pointer-events: none;
    font-size: .875rem;
}

.afx-cart-toolbar .afx-cart-search__clear {
    position: absolute;
    right: .5rem;
    border: none;
    background: none;
    color: #9aa3ab;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}

.afx-cart-toolbar .afx-cart-search__clear--hidden {
    display: none;
}

/* Loading state while the remaining cart pages are fetched before a search. */
.afx-cart-toolbar .afx-cart-search__field.is-loading .afx-cart-search__icon {
    animation: afx-cart-spin .8s linear infinite;
}

/* Result message ("N matching product(s) highlighted." / "No products found..."). */
.afx-cart-toolbar .afx-cart-search-message {
    flex: 1 1 100%;
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--color-primary, #137C4E);
}

.afx-cart-toolbar .afx-cart-search-message--empty {
    color: #c0392b;
}

/* Validation message on the Search SKU field (empty SKU / request failure). */
.afx-cart-toolbar .afx-sku-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    white-space: nowrap;
    font-size: .75rem;
    color: #c0392b;
}

/* Rows matched by an in-cart search. */
#shopping-cart-table > tbody.cart.item.afx-cart-hl > tr > td {
    background-color: #fff7d6;
    transition: background-color .2s ease;
}

#shopping-cart-table > tbody.cart.item.afx-cart-hl > tr.item-info > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary, #137C4E);
}

.afx-cart-toolbar .afx-cart-btn:hover,
.afx-cart-toolbar__search button[type="submit"]:hover,
.afx-cart-toolbar__upload:hover {
    background: var(--color-primary-darker, #0f5d3a);
    color: #fff;
    text-decoration: none;
}

.afx-cart-toolbar .afx-cart-btn:focus-visible,
.afx-cart-toolbar__search button[type="submit"]:focus-visible,
.afx-cart-toolbar__upload:focus-visible {
    outline: 2px solid var(--color-primary-darker, #0f5d3a);
    outline-offset: 2px;
}

/* NB: Upload Order keeps the pill shape custom.css gives `a.action.primary`
   (border-radius 2rem, font-weight 400, specificity 0,2,1 so it wins over the
   shared rule above). That is intentional — the pill is the wanted look; do not
   "normalise" it to the 4px radius the other cart buttons use. */

/* Disabled / in-flight state — same box, so the row never shifts. */
.afx-cart-toolbar .afx-cart-btn:disabled,
.afx-cart-toolbar__search button[type="submit"]:disabled,
.afx-cart-toolbar__upload[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
}

.afx-cart-toolbar__search button[type="submit"] svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
}

/* Spinner shown in place of the icon while the add-to-cart POST is in flight,
   sized identically to the icon so the button never changes width. */
.afx-cart-spinner {
    width: 18px;
    height: 18px;
    display: block;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: afx-cart-spin .6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .afx-cart-spinner { animation-duration: 2s; }
}

/* SKU autocomplete suggestions (moved out of the inline <style> in link_top.phtml). */
.afx-sku-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin: 2px 0 0;
    width: 16.25rem;
    max-height: 13.75rem;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.afx-sku-suggest li {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .875rem;
}

.afx-sku-suggest li:hover,
.afx-sku-suggest li[aria-selected="true"] {
    background: #f3f3f3;
}

/* ==========================================================================
 * 2. Cart item table corrections (overrides afx-base.css section 2).
 * ========================================================================== */

/* afx-base.css hardcodes #137C4E for .stock.available on BOTH stores, and colours
   the status by saleability only — so "No longer supplied" renders green here while
   the reference renders it red. Key the colour off the status TEXT class the
   template already emits, which matches the reference on both stores. */
.afx-cart-table .stock.available,
.afx-cart-table .stock.in-stock {
    color: var(--color-primary, #137C4E);
    font-size: .75rem;
}

.afx-cart-table .stock.no-longer-supplied,
.afx-cart-table .stock.unavailable,
.afx-cart-table .stock.superseded {
    color: var(--afx-cart-status-unavailable);
    font-weight: 700;
    font-size: .75rem;
}

.afx-cart-table .stock.qty {
    font-size: .75rem;
    color: var(--afx-cart-muted);
}

/* "Qty Available: 0" was being cut mid-word. Two rules combine to cause it:
   afx-base.css clips .product-item-details with overflow:hidden (it clears the
   floated thumbnail), and AFX_Products::css/cart-search.css pins the status line to
   `flex-wrap: nowrap; white-space: nowrap`. The reference storefront keeps both parts
   on one line only because its item column is ~50px wider than the Hyvä layout's.
   Allowing the line to wrap keeps them on one line when there is room (desktop,
   matching the reference) and wraps instead of clipping when there is not.

   cart-search.css lives in the read-only app/code/AFX tree and its selector carries an
   ID (specificity 1,4,0), so this override matches that specificity and wins on order. */
#shopping-cart-table .product-item-details .product.attribute.status {
    flex-wrap: wrap;
    white-space: normal;
    column-gap: .875rem;
    row-gap: .25rem;
}

/* Keep each part at its intrinsic width so it wraps onto the next line rather than
   being squeezed and then clipped. */
#shopping-cart-table .product-item-details .product.attribute.status > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Reference thumbnail is 88px; afx-base.css sets 70px. */
.afx-cart-table .product-item-photo,
.afx-cart-table .product-item-photo img {
    width: 88px;
}

.afx-cart-table .product-brand,
.afx-cart-table .product-sku {
    text-transform: uppercase;
}

.afx-cart-table .product-sku {
    font-size: .75rem;
}

.afx-cart-table .product-description {
    font-size: .75rem;
}

/* Reference prices are bold 14px; local rendered them regular weight. */
.afx-cart-table td.col.price,
.afx-cart-table td.col.subtotal {
    font-size: .875rem;
}

.afx-cart-table td.col.price .price,
.afx-cart-table td.col.subtotal .price {
    font-weight: 700;
}

/* ==========================================================================
 * 3. Cart main actions (Continue Shopping / Update Shopping Cart).
 *    Reference: uppercase, 36px tall, primary fill.
 * ========================================================================== */
.afx-cart-actions .action.continue,
.afx-cart-actions .action.update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--afx-cart-control-h);
    min-height: var(--afx-cart-control-h);
    padding: 0 1.25rem;
    box-sizing: border-box;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 4px;
    background: var(--color-primary, #137C4E);
    color: #fff;
}

.afx-cart-actions .action.continue:hover,
.afx-cart-actions .action.update:hover {
    background: var(--color-primary-darker, #0f5d3a);
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
 * 4. Summary column — bordered card, uppercase title, contained comment box.
 * ========================================================================== */
/* Hyvä wraps the summary in `.card`, but the deployed tailwind.css predates that
   class and defines no rule for it — hence the borderless, unpadded column. The
   bordered box the reference has is drawn here instead. */
.checkout-cart-index .afx-cart-summary-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1.5rem;
    background: #fff;
    box-sizing: border-box;
}

.checkout-cart-index .afx-cart-summary-title {
    display: block;
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #404040;
}

/* Reference summary column is 396px wide; `lg:w-80` (320px) is what the deployed
   tailwind.css offers, and `lg:w-96` is not in the build — so widen in CSS. */
@media (min-width: 1024px) {
    .checkout-cart-index .afx-cart-summary-card {
        width: 24rem;
        flex: 0 0 24rem;
    }
}

/* The reference puts Proceed to Checkout in its own box below the summary; the
   Hyvä layout nests it in the same column, so separate it with a rule instead. */
.checkout-cart-index .afx-cart-summary-card .checkout-methods-items {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--afx-cart-border);
}

/* The comment textarea carried cols="50" from the Luma template, giving it an
   intrinsic ~491px width inside a 272px column — that pushed document
   scrollWidth to 1499px on a 1440px viewport (horizontal page scroll).
   Width is now driven by the column. */
.checkout-cart-index .order-comments {
    margin: 1rem 0 0;
}

.checkout-cart-index .order-comments > label {
    display: block;
    margin-bottom: .25rem;
    font-size: .875rem;
    color: var(--afx-cart-muted);
}

.checkout-cart-index .order-msg-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: .5rem .625rem;
    font-size: .875rem;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    resize: vertical;
}

.checkout-cart-index .order-msg-input:focus {
    outline: none;
    border-color: var(--color-primary, #137C4E);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(19, 124, 78, .25));
}

.checkout-cart-index .order-comment-counter {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--afx-cart-muted);
    text-align: right;
}

.checkout-cart-index .order-comment-input-error {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: #c0392b;
}

/* Proceed to Checkout — full-width primary, matching the reference.
   `border: none` removes the stray Bootstrap `.btn-primary` border (a 1px solid
   #007bff blue outline) that Bootstrap contributes and Hyvä's .btn-primary never
   resets — it was drawing a blue ring around the green/red button. */
.checkout-cart-index .checkout-methods-items .btn-checkout,
.checkout-cart-index .checkout-methods-items .action.primary.checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    border: none;
    border-radius: 4px;
    background: var(--color-primary, #137C4E);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
}

.checkout-cart-index .checkout-methods-items .btn-checkout:hover,
.checkout-cart-index .checkout-methods-items .action.primary.checkout:hover {
    background: var(--color-primary-darker, #0f5d3a);
    color: #fff;
    text-decoration: none;
}

.checkout-cart-index .checkout-methods-items .btn-checkout:focus-visible {
    outline: 2px solid var(--color-primary-darker, #0f5d3a);
    outline-offset: 2px;
}

/* The Active Cart / Order Method "Update" button is the one cart control that kept
   sentence case; align it with every other action on the page. */
.checkout-cart-index .afxSaveCartsDd .action.primary,
.checkout-cart-index .afxSaveCartsDd #update_afx_cart_name {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .75rem;
    font-weight: 600;
    border: none;
}

/* Disabled while the comment exceeds its limit (mirrors the old jQuery behaviour). */
.checkout-cart-index .checkout-methods-items .btn-checkout[aria-disabled="true"] {
    opacity: .6;
    pointer-events: none;
}

/* Estimate Shipping and Tax — reference renders it directly under the title,
   above the totals, on a light grey header bar. */
.checkout-cart-index .cart-summary .estimate-shipping-form > summary {
    background: #fafafa;
    border: 1px solid var(--afx-cart-border);
    border-radius: 4px;
    padding: .5rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
}

/* ==========================================================================
 * 5. Empty cart — reference shows a sentence with an inline link, not a button.
 * ========================================================================== */
.cart-empty .afx-cart-empty-text {
    margin: 0 0 .5rem;
    font-size: .875rem;
    color: var(--afx-cart-muted);
}

.cart-empty .afx-cart-empty-link {
    color: var(--color-primary, #137C4E);
    text-decoration: underline;
}

.cart-empty .afx-cart-empty-link:hover {
    color: var(--color-primary-darker, #0f5d3a);
}

/* ==========================================================================
 * 6. Responsive — no horizontal overflow, controls stay usable.
 * ========================================================================== */
@media (max-width: 767px) {
    .afx-cart-toolbar {
        gap: .75rem;
    }

    .afx-cart-toolbar__search {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    /* Small flex-basis (not the 14rem desktop width) so the input shrinks and the
       add button stays on the same row instead of dropping to a line of its own. */
    .afx-cart-toolbar__search input#automplete-1 {
        flex: 1 1 6rem;
        width: auto;
        min-width: 0;
    }

    .afx-cart-toolbar__upload {
        flex: 1 1 100%;
    }

    .afx-sku-suggest {
        width: 100%;
    }

    .afx-cart-actions .action.continue,
    .afx-cart-actions .action.update {
        flex: 1 1 100%;
    }

    .afx-cart-table .product-item-photo,
    .afx-cart-table .product-item-photo img {
        width: 64px;
    }
}