/*
 * WooCommerce Mini-Cart block, restyled to the header design.
 *
 * The prototype's cart item is an icon beside two stacked lines — "Cart(n)" over the subtotal.
 * The block gives us a flex row of [icon + absolutely-positioned badge] then the amount, so the
 * button is re-laid-out as a grid: the badge and the amount are pulled into a second column, one
 * per row, and the icon is drawn as the button's ::before so the theme's SVG is kept.
 *
 * Mirrors the .tacc-icon / .tacc-dtl rules in header.css, including their breakpoints — that file
 * belongs to the UI team, so nothing here edits it.
 */

.taccount-ul .wc-block-mini-cart {
    display: block;
}

.taccount-ul .wc-block-mini-cart__button {
    display: grid;
    grid-template-columns: 36px auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    justify-content: start;
    padding: 0;
    gap: 0 10px;
    line-height: 1.2;
}

/* The theme's cart icon, in the column the badge and amount sit beside. */
.taccount-ul .wc-block-mini-cart__button::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    background: url(../images/icon/cart-icon.svg) no-repeat center;
    background-size: contain;
}

/* Lets the badge escape its wrapper and become a grid item of the button. */
.taccount-ul .wc-block-mini-cart__quantity-badge {
    display: contents;
}

.taccount-ul .wc-block-mini-cart__icon {
    display: none;
}

/* Out of WooCommerce's floating bubble and back into the text flow as the "Cart(n)" line. */
.taccount-ul .wc-block-mini-cart__badge {
    grid-column: 2;
    grid-row: 1;
    position: static;
    display: block;
    left: auto;
    margin: 0 0 4px 0;
    padding: 0;
    height: auto;
    min-width: 0;
    border-radius: 0;
    transform: none;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    /* The block binds badge colours as inline styles (data-wp-style--background-color / --color),
       so a class rule cannot win. !important is the only lever short of theming the block. */
    background-color: transparent !important;
    color: var(--black) !important;
}

.taccount-ul .wc-block-mini-cart__badge::before {
    content: "Cart(";
}

.taccount-ul .wc-block-mini-cart__badge::after {
    content: ")";
}

.taccount-ul .wc-block-mini-cart__amount {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--black);
    line-height: 1.2;
}

.taccount-ul .wc-block-mini-cart__button:hover .wc-block-mini-cart__badge,
.taccount-ul .wc-block-mini-cart__button:hover .wc-block-mini-cart__amount {
    color: var(--theme) !important;
}

@media (max-width: 1199.98px) {
    .taccount-ul .wc-block-mini-cart__button {
        grid-template-columns: 32px auto;
        gap: 0 6px;
    }

    .taccount-ul .wc-block-mini-cart__button::before {
        width: 32px;
        height: 32px;
    }
}

/* Icon only below the desktop nav breakpoint, as a bordered circle. */
@media (max-width: 991.98px) {
    .taccount-ul .wc-block-mini-cart__button {
        display: flex;
        gap: 0;
    }

    .taccount-ul .wc-block-mini-cart__button::before {
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-color);
        border-radius: 100%;
        padding: 2px;
        background-size: 28px 28px;
    }

    .taccount-ul .wc-block-mini-cart__badge,
    .taccount-ul .wc-block-mini-cart__amount {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .taccount-ul .wc-block-mini-cart__button::before {
        width: 36px;
        height: 36px;
        background-size: 24px 24px;
    }
}

@media (max-width: 374.98px) {
    .taccount-ul .wc-block-mini-cart__button::before {
        width: 34px;
        height: 34px;
    }
}