/*
 * GRIGOTEC SRL — Cart page styles
 * Scope: .grg-cart-* (page-cos.php) + override pe markup-ul Woo nativ din `.grg-cart-main`.
 * Tokens: vezi assets/css/global-styles.css.
 * AGENT 4 — Cart, Checkout & Fulfillment Logic.
 * ==========================================================================
 */

/* ==========================================================================
   0. RESETARI ASTRA / WOO PE PAGINA COS
   ========================================================================== */
body.grg-cart-body .site-content,
body.grg-cart-body #content,
body.grg-cart-body #primary,
body.grg-cart-body .ast-container {
    background-color: var(--grg-bg) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.grg-cart-body .entry-header,
body.grg-cart-body .ast-article-single .entry-title,
body.grg-cart-body .woocommerce-breadcrumb {
    display: none !important;
}

body.grg-cart-body .entry-content {
    margin: 0 !important;
}

/* ==========================================================================
   1. LAYOUT GENERAL
   ========================================================================== */
.grg-cart-page {
    background-color: var(--grg-bg);
    color: var(--grg-text);
    font-family: var(--grg-font-body);
    padding-bottom: var(--grg-s-16);
}

/* ==========================================================================
   2. HERO + BREADCRUMB
   ========================================================================== */
.grg-cart-hero {
    background: linear-gradient(180deg, var(--grg-bg-alt) 0%, var(--grg-bg) 100%);
    padding: var(--grg-s-12) 0 var(--grg-s-10);
    border-bottom: 1px solid var(--grg-divider);
    margin-bottom: var(--grg-s-10);
}

.grg-cart-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--grg-s-2);
    font-size: 0.9rem;
    color: var(--grg-text-muted);
    margin-bottom: var(--grg-s-4);
}

.grg-cart-breadcrumb a {
    color: var(--grg-accent-deep);
    font-weight: 500;
}

.grg-cart-breadcrumb a:hover,
.grg-cart-breadcrumb a:focus {
    color: var(--grg-cta);
    text-decoration: underline;
}

.grg-cart-breadcrumb__sep {
    color: var(--grg-text-muted);
}

.grg-cart-breadcrumb__current {
    color: var(--grg-text);
    font-weight: 500;
}

.grg-cart-hero__title {
    font-family: var(--grg-font-display);
    color: var(--grg-accent-deep);
    margin: 0 0 var(--grg-s-3) 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.grg-cart-hero__lead {
    color: var(--grg-text-muted);
    font-size: 1.05rem;
    margin: 0;
    max-width: 640px;
}

/* ==========================================================================
   3. LAYOUT 2 COLOANE
   ========================================================================== */
.grg-cart-shell {
    padding: 0 0 var(--grg-s-12);
}

.grg-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grg-s-8);
}

@media (min-width: 960px) {
    .grg-cart-layout {
        grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
        gap: var(--grg-s-10);
        align-items: flex-start;
    }
}

.grg-cart-main {
    background-color: var(--grg-surface);
    border: 1px solid var(--grg-border);
    border-radius: var(--grg-r-lg);
    padding: var(--grg-s-6);
    box-shadow: var(--grg-shadow-sm);
    min-width: 0;
}

@media (min-width: 768px) {
    .grg-cart-main {
        padding: var(--grg-s-8);
    }
}

/* ==========================================================================
   4. RESKIN PE WOO CART NATIV (in interiorul .grg-cart-main)
   ========================================================================== */

/* Containerul Woo */
.grg-cart-main .woocommerce {
    max-width: 100%;
}

/* Notices Woo */
.grg-cart-main .woocommerce-notices-wrapper {
    margin-bottom: var(--grg-s-5);
}

.grg-cart-main .woocommerce-message,
.grg-cart-main .woocommerce-info {
    background-color: var(--grg-surface-warm);
    border-left: 4px solid var(--grg-accent);
    color: var(--grg-text);
    padding: var(--grg-s-4) var(--grg-s-5);
    border-radius: var(--grg-r);
    margin-bottom: var(--grg-s-4);
    font-size: 0.95rem;
}

.grg-cart-main .woocommerce-error {
    background-color: #FDECE8;
    border-left: 4px solid var(--grg-danger);
    color: var(--grg-danger);
    padding: var(--grg-s-4) var(--grg-s-5);
    border-radius: var(--grg-r);
    list-style: none;
    margin: 0 0 var(--grg-s-4) 0;
}

/* --- Notice "added to cart" cu markup BLOCK nou (WooCommerce >= 8) ---
   `.wc-block-components-notice-banner` are border albastru + icon/buton albastru
   din stilul default Woo; le aducem in paleta warm GRIGOTEC. Ancorate la pagina
   de cos ca sa prinda notice-ul indiferent unde il randeaza Woo. */
body.grg-cart-body .wc-block-components-notice-banner,
body.grg-cart-body .woocommerce-message {
    display: flex;
    align-items: center;
    gap: var(--grg-s-3);
    background-color: var(--grg-surface-warm) !important;
    border: 1px solid var(--grg-border) !important;
    border-left: 4px solid var(--grg-accent) !important;
    box-shadow: none !important;
    color: var(--grg-text) !important;
    padding: var(--grg-s-4) var(--grg-s-5) !important;
    border-radius: var(--grg-r) !important;
    margin: 0 0 var(--grg-s-5) 0 !important;
    font-size: 0.95rem;
}

/* Iconita din notice (svg/::before) → accent warm in loc de albastru */
body.grg-cart-body .wc-block-components-notice-banner > svg,
body.grg-cart-body .wc-block-components-notice-banner .wc-block-components-notice-banner__content + svg {
    fill: var(--grg-accent) !important;
    color: var(--grg-accent) !important;
}

body.grg-cart-body .woocommerce-message::before {
    color: var(--grg-accent) !important;
}

/* Butonul "Vezi cosul" / "View cart" din notice → buton warm brand */
body.grg-cart-body .wc-block-components-notice-banner .button,
body.grg-cart-body .wc-block-components-notice-banner a.wc-forward,
body.grg-cart-body .woocommerce-message .button,
body.grg-cart-body .woocommerce-message a.wc-forward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--grg-s-2) var(--grg-s-4) !important;
    background-color: var(--grg-accent) !important;
    color: var(--grg-text-inverse) !important;
    border: 1px solid var(--grg-accent) !important;
    border-radius: var(--grg-r) !important;
    font-family: var(--grg-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color var(--grg-dur) var(--grg-ease),
                border-color var(--grg-dur) var(--grg-ease),
                transform var(--grg-dur) var(--grg-ease);
}

body.grg-cart-body .wc-block-components-notice-banner .button:hover,
body.grg-cart-body .wc-block-components-notice-banner a.wc-forward:hover,
body.grg-cart-body .woocommerce-message .button:hover,
body.grg-cart-body .woocommerce-message a.wc-forward:hover {
    background-color: var(--grg-accent-deep) !important;
    border-color: var(--grg-accent-deep) !important;
    transform: translateY(-1px);
}

/* Tabel cart */
.grg-cart-main .shop_table,
.grg-cart-main table.shop_table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border: none;
    margin: 0 0 var(--grg-s-6) 0;
}

.grg-cart-main .shop_table thead {
    background-color: var(--grg-bg-alt);
}

.grg-cart-main .shop_table thead th {
    font-family: var(--grg-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grg-accent-deep);
    padding: var(--grg-s-3) var(--grg-s-4);
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--grg-border);
}

.grg-cart-main .shop_table tbody tr {
    border-bottom: 1px solid var(--grg-divider);
}

.grg-cart-main .shop_table tbody tr:last-child {
    border-bottom: none;
}

.grg-cart-main .shop_table td {
    padding: var(--grg-s-4);
    vertical-align: middle;
    border: none;
    background: transparent;
    color: var(--grg-text);
    font-size: 0.95rem;
}

/* Imagine produs in tabel */
.grg-cart-main .shop_table td.product-thumbnail img,
.grg-cart-main .shop_table .product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--grg-r);
    border: 1px solid var(--grg-border);
    background-color: var(--grg-surface-warm);
}

/* Nume produs */
.grg-cart-main .shop_table .product-name a {
    color: var(--grg-accent-deep);
    font-weight: 600;
    font-size: 1rem;
}

.grg-cart-main .shop_table .product-name a:hover,
.grg-cart-main .shop_table .product-name a:focus {
    color: var(--grg-cta);
    text-decoration: underline;
}

/* Specificatiile tehnice (Format / Tip baza / Sortiment etc.) configurate la
   produs sunt ascunse in cos — lasam doar denumirea curata a produsului.
   Acopera ambele markup-uri Woo: `dl.variation` (produse variabile) si
   `ul.wc-item-meta` (cart item data custom din configurator). */
.grg-cart-main .shop_table .variation,
.grg-cart-main .shop_table dl.variation,
.grg-cart-main .shop_table .wc-item-meta,
.grg-cart-main .shop_table .product-name .wc-item-meta {
    display: none !important;
}

/* Pret unitar + subtotal */
.grg-cart-main .shop_table .product-price,
.grg-cart-main .shop_table .product-subtotal {
    color: var(--grg-text);
    font-weight: 500;
}

.grg-cart-main .shop_table .product-subtotal {
    color: var(--grg-accent-deep);
    font-weight: 700;
}

.grg-cart-main .shop_table .amount,
.grg-cart-main .shop_table bdi {
    color: inherit;
    font-family: var(--grg-font-body);
}

/* Cantitate input */
.grg-cart-main .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--grg-border);
    border-radius: var(--grg-r);
    overflow: hidden;
    background-color: var(--grg-surface-warm);
}

.grg-cart-main .quantity .qty {
    width: 56px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--grg-font-body);
    font-size: 0.95rem;
    color: var(--grg-text);
    padding: var(--grg-s-2);
    font-weight: 600;
}

.grg-cart-main .quantity .qty:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--grg-accent);
}

/* Hide spinner arrows pe number input — sa nu se duble cu Woo +/- daca apare */
.grg-cart-main .quantity .qty::-webkit-outer-spin-button,
.grg-cart-main .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    margin: 0;
}

/* Buton remove (cruciulita) */
.grg-cart-main .shop_table .product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--grg-r-pill);
    background-color: var(--grg-bg-alt);
    color: var(--grg-danger) !important;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--grg-border);
    transition: background-color var(--grg-dur) var(--grg-ease),
                color var(--grg-dur) var(--grg-ease),
                border-color var(--grg-dur) var(--grg-ease),
                transform var(--grg-dur) var(--grg-ease);
}

.grg-cart-main .shop_table .product-remove a.remove:hover,
.grg-cart-main .shop_table .product-remove a.remove:focus {
    background-color: var(--grg-danger);
    color: var(--grg-text-inverse) !important;
    border-color: var(--grg-danger);
    transform: scale(1.05);
}

/* Coupon + update */
.grg-cart-main .actions {
    padding: var(--grg-s-4) 0 !important;
}

.grg-cart-main .coupon {
    display: flex;
    align-items: center;
    gap: var(--grg-s-2);
    flex-wrap: wrap;
    margin-bottom: var(--grg-s-4);
}

.grg-cart-main .coupon label {
    flex-basis: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grg-accent-deep);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--grg-s-2);
}

.grg-cart-main .coupon .input-text,
.grg-cart-main input#coupon_code {
    flex: 1;
    min-width: 180px;
    padding: var(--grg-s-3) var(--grg-s-4);
    border: 1px solid var(--grg-border);
    border-radius: var(--grg-r);
    background-color: var(--grg-surface-warm);
    color: var(--grg-text);
    font-family: var(--grg-font-body);
    font-size: 0.95rem;
}

.grg-cart-main .coupon .input-text:focus,
.grg-cart-main input#coupon_code:focus {
    outline: none;
    border-color: var(--grg-accent);
    box-shadow: 0 0 0 3px rgba(200, 137, 58, 0.18);
}

/* Butoane Woo cart in .actions (Apply coupon + Update cart) */
.grg-cart-main .actions .button,
.grg-cart-main button[name="apply_coupon"],
.grg-cart-main button[name="update_cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--grg-s-2);
    padding: var(--grg-s-3) var(--grg-s-5);
    background-color: var(--grg-accent);
    color: var(--grg-text-inverse);
    border: 1px solid var(--grg-accent);
    border-radius: var(--grg-r);
    font-family: var(--grg-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--grg-dur) var(--grg-ease),
                border-color var(--grg-dur) var(--grg-ease),
                transform var(--grg-dur) var(--grg-ease);
    text-decoration: none;
    white-space: nowrap;
}

.grg-cart-main .actions .button:hover,
.grg-cart-main .actions .button:focus,
.grg-cart-main button[name="apply_coupon"]:hover,
.grg-cart-main button[name="apply_coupon"]:focus,
.grg-cart-main button[name="update_cart"]:hover,
.grg-cart-main button[name="update_cart"]:focus {
    background-color: var(--grg-accent-deep);
    border-color: var(--grg-accent-deep);
    color: var(--grg-text-inverse);
    transform: translateY(-1px);
}

.grg-cart-main .actions .button[disabled],
.grg-cart-main button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Cart totals — Woo afiseaza un block "Cart totals" + checkout button.
   Pe layout 2-col, lasam asta inline; pe layout 1-col mobil, e in continuare ok. */
.grg-cart-main .cart_totals,
.grg-cart-main .cart-collaterals .cart_totals {
    background-color: var(--grg-surface-warm);
    border: 1px solid var(--grg-border);
    border-radius: var(--grg-r-lg);
    padding: var(--grg-s-6);
    margin-top: var(--grg-s-6);
    width: 100%;
    float: none;
    box-shadow: var(--grg-shadow-sm);
}

.grg-cart-main .cart_totals h2 {
    font-family: var(--grg-font-display);
    color: var(--grg-accent-deep);
    font-size: 1.35rem;
    margin: 0 0 var(--grg-s-5) 0;
    padding-bottom: var(--grg-s-3);
    border-bottom: 1px solid var(--grg-border);
}

.grg-cart-main .cart_totals table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.grg-cart-main .cart_totals table th,
.grg-cart-main .cart_totals table td {
    padding: var(--grg-s-3) 0;
    border: none;
    border-bottom: 1px dashed var(--grg-divider);
    background: transparent;
    color: var(--grg-text);
    font-size: 0.98rem;
}

.grg-cart-main .cart_totals table th {
    font-weight: 600;
    color: var(--grg-text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    width: 45%;
}

.grg-cart-main .cart_totals .order-total {
    border-top: 2px solid var(--grg-accent-deep);
    margin-top: var(--grg-s-3);
}

.grg-cart-main .cart_totals .order-total th,
.grg-cart-main .cart_totals .order-total td {
    font-size: 1.1rem !important;
    color: var(--grg-accent-deep) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding-top: var(--grg-s-4);
}

/* Mesaj estimare transport */
.grg-cart-main .cart_totals .shipping td::after {
    content: " — " attr(data-grg-shipping-hint);
}

.grg-cart-main .shipping-calculator-button {
    color: var(--grg-accent-deep);
    font-weight: 600;
    text-decoration: underline;
}

.grg-cart-main .cart_totals .wc-proceed-to-checkout {
    padding: var(--grg-s-5) 0 0;
}

/* Buton finalizeaza comanda — full width, primary */
.grg-cart-main .wc-proceed-to-checkout .checkout-button,
.grg-cart-main a.checkout-button {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--grg-s-2);
    padding: var(--grg-s-4) var(--grg-s-6) !important;
    background-color: var(--grg-cta) !important;
    color: var(--grg-text-inverse) !important;
    border: 1px solid var(--grg-cta) !important;
    border-radius: var(--grg-r);
    font-family: var(--grg-font-body);
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background-color var(--grg-dur) var(--grg-ease),
                border-color var(--grg-dur) var(--grg-ease),
                transform var(--grg-dur) var(--grg-ease),
                box-shadow var(--grg-dur) var(--grg-ease);
    margin: 0 !important;
}

.grg-cart-main .wc-proceed-to-checkout .checkout-button:hover,
.grg-cart-main .wc-proceed-to-checkout .checkout-button:focus,
.grg-cart-main a.checkout-button:hover,
.grg-cart-main a.checkout-button:focus {
    background-color: var(--grg-cta-hover) !important;
    border-color: var(--grg-cta-hover) !important;
    color: var(--grg-text-inverse) !important;
    transform: translateY(-1px);
    box-shadow: var(--grg-shadow-warm);
}

/* Nota plata sub buton */
.grg-cart-main .wc-proceed-to-checkout::after {
    content: "Plata: transfer bancar sau numerar la livrare / ridicare. Livrare locala in Liesti si Galati municipiu.";
    display: block;
    margin-top: var(--grg-s-3);
    font-size: 0.82rem;
    color: var(--grg-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* ==========================================================================
   5. CARD INFO ASIDE (dreapta)
   ========================================================================== */
.grg-cart-aside {
    display: flex;
    flex-direction: column;
    gap: var(--grg-s-5);
    min-width: 0;
}

@media (min-width: 960px) {
    .grg-cart-aside {
        position: sticky;
        top: calc(var(--grg-s-8) + 80px); /* header sticky compensation */
    }
}

.grg-cart-info-card {
    background-color: var(--grg-surface);
    border: 1px solid var(--grg-border);
    border-radius: var(--grg-r-lg);
    padding: var(--grg-s-6);
    box-shadow: var(--grg-shadow-sm);
}

.grg-cart-info-card__title {
    font-family: var(--grg-font-display);
    color: var(--grg-accent-deep);
    font-size: 1.2rem;
    margin: 0 0 var(--grg-s-4) 0;
    padding-bottom: var(--grg-s-3);
    border-bottom: 1px solid var(--grg-divider);
}

.grg-cart-info-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--grg-s-4);
}

.grg-cart-info-card__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--grg-s-3);
}

.grg-cart-info-card__list li > i {
    color: var(--grg-accent);
    font-size: 1.1rem;
    margin-top: 2px;
    width: 22px;
    flex-shrink: 0;
    text-align: center;
}

.grg-cart-info-card__list li > div {
    display: flex;
    flex-direction: column;
    gap: var(--grg-s-1);
    flex: 1;
}

.grg-cart-info-card__list strong {
    color: var(--grg-accent-deep);
    font-weight: 600;
    font-size: 0.95rem;
}

.grg-cart-info-card__list span {
    color: var(--grg-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.grg-cart-info-card__hint {
    margin-top: var(--grg-s-5);
    padding-top: var(--grg-s-4);
    border-top: 1px dashed var(--grg-divider);
    font-size: 0.85rem;
    color: var(--grg-text-muted);
    line-height: 1.5;
}

.grg-cart-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--grg-s-2);
    color: var(--grg-accent-deep);
    font-weight: 600;
    font-size: 0.95rem;
    padding: var(--grg-s-2) 0;
}

.grg-cart-back-link:hover,
.grg-cart-back-link:focus {
    color: var(--grg-cta);
    text-decoration: underline;
}

/* ==========================================================================
   6. EMPTY STATE
   ========================================================================== */
.grg-cart-empty {
    text-align: center;
    padding: var(--grg-s-16) var(--grg-s-5);
    background-color: var(--grg-surface);
    border: 1px solid var(--grg-border);
    border-radius: var(--grg-r-lg);
    box-shadow: var(--grg-shadow-sm);
    max-width: 640px;
    margin: 0 auto;
}

.grg-cart-empty__icon {
    color: var(--grg-accent);
    margin-bottom: var(--grg-s-5);
    display: flex;
    justify-content: center;
    font-size: 4.5rem;
    line-height: 1;
}

.grg-cart-empty__title {
    font-family: var(--grg-font-display);
    color: var(--grg-accent-deep);
    font-size: 1.5rem;
    margin: 0 0 var(--grg-s-3) 0;
}

.grg-cart-empty__text {
    color: var(--grg-text-muted);
    font-size: 1rem;
    margin: 0 0 var(--grg-s-6) 0;
    line-height: 1.6;
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .grg-cart-hero {
        padding: var(--grg-s-8) 0 var(--grg-s-6);
    }

    .grg-cart-main {
        padding: var(--grg-s-4);
    }

    /* Pe mobil tabelul Woo devine "card list" — Woo aplica deja .responsive,
       dar fortam o forma curata. */
    .grg-cart-main .shop_table thead {
        display: none;
    }

    .grg-cart-main .shop_table tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--grg-s-2);
        padding: var(--grg-s-4) 0;
        border-bottom: 1px solid var(--grg-divider);
    }

    .grg-cart-main .shop_table tbody td {
        display: flex;
        flex: 1 1 50%;
        flex-direction: column;
        padding: var(--grg-s-2);
        font-size: 0.92rem;
        border: none;
    }

    .grg-cart-main .shop_table tbody td::before {
        content: attr(data-title);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--grg-text-muted);
        font-weight: 700;
        margin-bottom: var(--grg-s-1);
    }

    .grg-cart-main .shop_table tbody td.product-thumbnail,
    .grg-cart-main .shop_table tbody td.product-remove {
        flex: 0 0 auto;
    }

    .grg-cart-main .shop_table tbody td.product-name {
        flex: 1 1 100%;
    }

    .grg-cart-main .coupon {
        flex-direction: column;
        align-items: stretch;
    }

    .grg-cart-main .coupon .input-text,
    .grg-cart-main input#coupon_code {
        width: 100%;
    }
}

/* ==========================================================================
   8. FOCUS VISIBLE — accesibilitate
   ========================================================================== */
.grg-cart-page a:focus-visible,
.grg-cart-page button:focus-visible,
.grg-cart-main button:focus-visible,
.grg-cart-main input:focus-visible {
    outline: 2px solid var(--grg-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   9. PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .grg-cart-page * {
        transition: none !important;
        animation: none !important;
    }
}