/**
 * TransferJet — cart surfaces.
 *
 * The drawer, the add-to-cart modal's secondary button, and the cart page.
 * Styling only: Hyvä's cart-drawer.phtml is a 400-line template carrying the
 * whole cart state machine, and the cart page is spread across a dozen
 * php-cart partials. Forking either to change spacing and a border colour
 * would be a poor trade.
 */

/* The edit and remove buttons ship at gap-1 (4px), close enough that they read
   as one control and are easy to mis-tap. */
#cart-drawer li .inline-flex {
    gap: 0.75rem;
}

/* btn-secondary is Hyvä's grey outline button, and it sits directly under the
   red "Kasse" button.
 *
   A red border was used here first, on the grounds that Hyvä's grey outline
   read as disabled rather than secondary. That was true of Hyvä's grey, but it
   is not true of this one: white on #cfcdcb is the same treatment now carrying
   the pagination roundels, the category tiles, the filter trigger and the
   add-to-cart modal's secondary. Using it here means the two cart surfaces
   agree, and the red stays on the one action that leads out of the drawer.

   Scoped to the drawer — btn-secondary is used site-wide. */
#cart-drawer .btn-secondary {
    background: #fff;
    border-color: #cfcdcb;
    color: #1f1a16;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#cart-drawer .btn-secondary:hover {
    background: #f7f7f7;
    border-color: #a8a5a3;
    color: #1f1a16;
}

/* Both drawer actions taken from 44px to 52px. The 44 comes out of .btn's own
   padding-block of 8px on a 24px line box plus a 2px border; only the padding
   moves, so the type and the border stay exactly as they are.

   Height rather than type size: 18px text would have bought the same 8px but
   left `Se og endre handlekurv` close to wrapping in a 320px drawer, and a
   wrapped secondary label undoes the legibility the change was for.

   Scoped to the drawer by id, so .btn-primary keeps its shipped size on the
   product page, the cart page and checkout. */
#cart-drawer .btn-primary,
#cart-drawer .btn-secondary {
    padding-block: 0.75rem;
}

/* ---------------------------------------------------------------------------
   The add-to-cart modal's secondary button.

   Hyvä UI gives it a bare `btn`, which in this theme resolves to a tinted fill —
   a quieter red beside the red primary, so the pair reads as one colour at two
   strengths rather than as two ranks of action.

   Outlined instead, on the same white-and-#cfcdcb the pagination roundels, the
   category tiles and the filter trigger already use. It borrows no brand colour
   to say "lesser", which leaves the red primary unambiguous.
   --------------------------------------------------------------------------- */

.tj-atc-secondary {
    background: #fff;
    border: 1px solid #cfcdcb;
    box-shadow: none;
    color: #1f1a16;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tj-atc-secondary:hover {
    background: #f7f7f7;
    border-color: #a8a5a3;
    color: #1f1a16;
}

/* ---------------------------------------------------------------------------
   The cart page.

   Same two problems the drawer had, in the same order.

   The edit and remove controls ship inside .item-actions at gap-1 (4px), close
   enough to read as one control and to mis-tap.

   They need a fill rather than an outline — outlined, the page was nothing but
   white controls on white — but not the red tint the bare `btn` class gives
   them. Magento's error notices on this page are themselves a pale red panel,
   and a cart update that exceeds stock puts one directly above the controls,
   where two pale reds a few pixels apart read as one confused state.

   Grey instead: #f2f2f2, the same fill the search pill uses. Icon-only controls
   filled grey, labelled secondary buttons outlined white — two shapes, two
   treatments, and neither borrowing a colour that means something else.

   The page's text buttons — Update Shopping Cart, Apply Discount, Cancel
   Coupon — are btn-secondary, which in this theme is a red outline. Beside the
   red "Gå til kassen" that makes three reds of two different kinds on one
   screen. They join the convention: white on #cfcdcb, with red left to the one
   action that leaves the page.

   Scoped to the cart page body class, since btn-secondary is used site-wide.
   --------------------------------------------------------------------------- */

.checkout-cart-index .item-actions {
    gap: 0.75rem;
}

/* Both cart surfaces: the drawer's icon buttons carry the same bare `btn` and
   the same tint, so they take the same grey. */
#cart-drawer li .inline-flex > .btn,
.checkout-cart-index .item-actions > .btn {
    background: #f2f2f2;
    border: 0;
    box-shadow: none;
    color: #1f1a16;
    transition: background-color 0.2s ease;
}

#cart-drawer li .inline-flex > .btn:hover,
.checkout-cart-index .item-actions > .btn:hover {
    background: #e6e5e4;
    color: #1f1a16;
}

.checkout-cart-index .actions-toolbar .btn-secondary,
.checkout-cart-index .btn-secondary {
    background: #fff;
    border: 1px solid #cfcdcb;
    box-shadow: none;
    color: #1f1a16;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.checkout-cart-index .actions-toolbar .btn-secondary:hover,
.checkout-cart-index .btn-secondary:hover {
    background: #f7f7f7;
    border-color: #a8a5a3;
    color: #1f1a16;
}

/* Update Shopping Cart, below md.

   From md up the actions toolbar is flex-row-reverse and the button sits
   inline at its natural width, which is distinction enough. Below md it goes
   full width, and at 44px a white outlined bar spanning the column reads as a
   divider rather than a control — the screenshot that prompted this had it
   sitting between the item row and the footer looking like neither.

   Taken to the same 52px as the drawer actions, by the same means: padding
   only, type and border untouched. It stays outlined, because the red above
   it is still the one action that leaves the page.

   Matched on the data attribute rather than .btn-secondary. Clear Shopping
   Cart and the coupon controls carry that class too, and only this one is
   full width and stranded. */
@media (max-width: 767px) {
    .checkout-cart-index [data-cart-item-update] {
        padding-block: 0.75rem;
    }
}