/* ═══════════════════════════════════════════════════════════════════════════
   Serigest Grouped Cart — Custom card layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mini cart: titolo e pulsanti ────────────────────────────────────────── */

/* Contenuto drawer — padding generale */
.wc-block-mini-cart__drawer .components-panel__body,
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
.wc-block-mini-cart__template-part,
[class*="mini-cart__template-part"] {
    padding: 0 16px !important;
}

/* Area items — respiro in cima */
.wc-block-mini-cart__items,
[class*="mini-cart__items"] {
    padding-top: 8px !important;
}

/* Titolo "Il tuo carrello (articoli: N)" */
.wc-block-mini-cart__title,
[data-block-name="woocommerce/mini-cart-title-block"] h2,
[data-block-name="woocommerce/mini-cart-title-block"] .wc-block-mini-cart__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: #111 !important;
    margin: 0 0 16px !important;
    line-height: 1.3 !important;
    padding-top: 4px !important;
}

/* Pulsante "Visualizza il mio carrello" — outline */
[data-block-name="woocommerce/mini-cart-shopping-button-block"] a,
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer a.wc-block-mini-cart__footer-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    border: 1.5px solid #111 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 10px 16px !important;
    transition: background .15s, color .15s !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
}

[data-block-name="woocommerce/mini-cart-shopping-button-block"] a:hover,
.wc-block-mini-cart__footer-cart:hover {
    background: #111 !important;
    color: #fff !important;
}

/* Pulsante "Vai al pagamento" — filled nero */
[data-block-name="woocommerce/mini-cart-checkout-button-block"] a,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer a.wc-block-mini-cart__footer-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 10px 16px !important;
    transition: background .15s !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

[data-block-name="woocommerce/mini-cart-checkout-button-block"] a:hover,
.wc-block-mini-cart__footer-checkout:hover {
    background: #333 !important;
}

/* Footer container — colonna verticale */
.wc-block-mini-cart__footer-actions,
.wc-block-mini-cart__footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px 20px !important;
}

.wc-block-mini-cart__footer-actions > *,
.wc-block-mini-cart__footer > * {
    width: 100% !important;
    flex: none !important;
}

/* Subtotale */
.wc-block-mini-cart__footer-cart-link,
.wc-block-mini-cart__subtotal,
[class*="mini-cart__subtotal"] {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    padding: 10px 0 !important;
    border-top: 1px solid #e8e8e8 !important;
    margin-top: 4px !important;
}

.wc-block-mini-cart__subtotal .wc-block-components-totals-item__label,
[class*="mini-cart__subtotal"] .wc-block-components-totals-item__label {
    font-size: 13px !important;
    color: #555 !important;
    font-weight: 500 !important;
}

.wc-block-mini-cart__subtotal .wc-block-formatted-money-amount,
[class*="mini-cart__subtotal"] .wc-block-formatted-money-amount {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

/* ── Checkout: riga totale pezzi ─────────────────────────────────────────── */
.sgc-checkout-total-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-top: 1px solid #e8e8e8 !important;
    margin-bottom: 2px !important;
    font-size: 13px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.sgc-checkout-total-row__label {
    color: #555 !important;
    font-weight: 500 !important;
}

.sgc-checkout-total-row__value {
    color: #111 !important;
    font-weight: 700 !important;
}

/* ── Badge carrello: pallino rosso senza numero ──────────────────────────── */
.wc-block-mini-cart__badge {
    font-size: 0 !important;
    min-width: 10px !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #e53e3e !important;
    top: 0px !important;
    right: 0px !important;
}

/* ── Hide original WC rows (kept in DOM for React) ───────────────────────── */
.sgc-row-hidden {
    display: none !important;
}

/* ── Card wrapper (inserted as sibling of WC rows) ───────────────────────── */

/* Allow card to span all columns in the WC block cart grid */
.wc-block-cart-items > .sgc-card,
.wc-block-cart-items-table > .sgc-card-tr {
    grid-column: 1 / -1 !important;
}

.sgc-card-tr td {
    padding: 0 !important;
    border: none !important;
}

.sgc-card {
    display: grid;
    grid-template-columns: 108px 1fr;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow .15s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.sgc-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
}

/* Rows, toggle e footer si estendono su entrambe le colonne */
.sgc-card__rows,
.sgc-card__details-toggle,
.sgc-card__footer {
    grid-column: 1 / -1;
}

/* ── Image: colonna sinistra, allineata verticalmente al nome ─────────────── */

.sgc-card__img {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 14px 12px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}

.sgc-card__img img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    display: block;
}

.sgc-card__img a {
    display: block;
    line-height: 0;
}

/* ── Header: colonna destra, nome + bottone rimuovi ──────────────────────── */

.sgc-card__header {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.sgc-card__name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.sgc-card__name:hover {
    text-decoration: underline;
    color: #111;
}

/* ── Variation rows ──────────────────────────────────────────────────────── */

.sgc-card__rows {
    padding: 0 16px;
}

.sgc-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.sgc-card__row:last-child {
    border-bottom: none;
}

.sgc-card__row--perso {
    padding-top: 0;
    padding-bottom: 10px;
}

/* Left: color/size/qty */
.sgc-card__row-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    color: #555;
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

.sgc-card__row-attrs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sgc-card__row-info strong {
    font-weight: 600;
    color: #333;
}

.sgc-pair-sep {
    color: #ccc;
    font-size: 11px;
    margin: 0 1px;
    line-height: 1;
}

/* ── Footer: totale pezzi + totale prezzo ────────────────────────────────── */

.sgc-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
    font-size: 12px;
    color: #888;
    background: #fafafa;
    border-top: 1px solid #ebebeb;
    gap: 12px;
}

.sgc-card__footer strong {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-left: 4px;
}

.sgc-card__footer-qty {
    flex: 1;
}

.sgc-card__footer-price {
    text-align: right;
    white-space: nowrap;
}

/* ── Remove-all button ────────────────────────────────────────────────────── */

.sgc-remove-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #999;
    cursor: pointer;
    letter-spacing: .01em;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

.sgc-remove-all-btn__label {
    font-size: 11px;
}

.sgc-remove-all-btn:hover {
    border-color: #f8a0a0;
    color: #e53e3e;
    background: #fef2f2;
}

/* ── Color dot ───────────────────────────────────────────────────────────── */

.sgc-color-dot--inline {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* ── Qty pill ────────────────────────────────────────────────────────────── */

.sgc-qty-pill {
    display: inline-flex;
    align-items: center;
    background: #f0f0f0;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #333;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1.6;
}

/* ── Personalizzazioni ───────────────────────────────────────────────────── */

.sgc-personalizzazioni-block {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    background: #f7f7f7;
    border-radius: 6px;
    padding: 5px 9px;
    width: 100%;
}

.sgc-perso-header strong {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
    color: #999;
}

.sgc-perso-line { display: block; font-size: 12px; line-height: 1.5; }
.sgc-perso-line strong { font-weight: 600; color: #444; }

/* ── Mini cart: card compatta e minimal ──────────────────────────────────── */

.wc-block-mini-cart__items .sgc-card,
.wc-block-mini-cart__drawer .sgc-card,
[class*="mini-cart__items"] .sgc-card,
[class*="mini-cart__drawer"] .sgc-card {
    margin-bottom: 10px !important;
    border-radius: 10px !important;
    border: 1px solid #e8e8e8 !important;
    font-size: 13px !important;
}

/* Mini cart: colonna immagine più stretta */
.wc-block-mini-cart__items .sgc-card,
.wc-block-mini-cart__drawer .sgc-card {
    grid-template-columns: 84px 1fr !important;
}

.wc-block-mini-cart__items .sgc-card__img,
.wc-block-mini-cart__drawer .sgc-card__img {
    padding: 10px !important;
    background: #fff !important;
    justify-content: center !important;
    min-height: auto !important;
}

.wc-block-mini-cart__items .sgc-card__img img,
.wc-block-mini-cart__drawer .sgc-card__img img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
}

.wc-block-mini-cart__items .sgc-card__header,
.wc-block-mini-cart__drawer .sgc-card__header {
    padding: 8px 14px 6px !important;
}

.wc-block-mini-cart__items .sgc-card__name,
.wc-block-mini-cart__drawer .sgc-card__name {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.wc-block-mini-cart__items .sgc-card__rows,
.wc-block-mini-cart__drawer .sgc-card__rows {
    padding: 0 14px !important;
}

.wc-block-mini-cart__items .sgc-card__row,
.wc-block-mini-cart__drawer .sgc-card__row {
    padding: 6px 0 !important;
    font-size: 12px !important;
    border-bottom: 1px solid #f3f3f3 !important;
}

.wc-block-mini-cart__items .sgc-card__row:last-child,
.wc-block-mini-cart__drawer .sgc-card__row:last-child {
    border-bottom: none !important;
}

.wc-block-mini-cart__items .sgc-card__row-info,
.wc-block-mini-cart__drawer .sgc-card__row-info {
    gap: 4px !important;
    flex-wrap: wrap !important;
}

.wc-block-mini-cart__items .sgc-card__row-info strong,
.wc-block-mini-cart__drawer .sgc-card__row-info strong {
    font-size: 12px !important;
    color: #555 !important;
}

.wc-block-mini-cart__items .sgc-qty-pill,
.wc-block-mini-cart__drawer .sgc-qty-pill {
    font-size: 10px !important;
    padding: 1px 7px !important;
    background: #f0f0f0 !important;
    color: #333 !important;
}

.wc-block-mini-cart__items .sgc-color-dot--inline,
.wc-block-mini-cart__drawer .sgc-color-dot--inline {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
}

.wc-block-mini-cart__items .sgc-card__footer,
.wc-block-mini-cart__drawer .sgc-card__footer {
    padding: 8px 14px 10px !important;
    font-size: 11px !important;
    background: #fafafa !important;
}

.wc-block-mini-cart__items .sgc-card__footer strong,
.wc-block-mini-cart__drawer .sgc-card__footer strong {
    font-size: 12px !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
    .sgc-card { grid-template-columns: 84px 1fr; }
    .sgc-card__img { padding: 10px; }
    .sgc-card__img img { width: 58px; height: 58px; }
    .sgc-card__header { padding: 10px 12px; }
    .sgc-card__rows { padding: 0 12px; }
    .sgc-card__footer { padding: 8px 12px 12px; }
    .sgc-card__name { font-size: 13px; }

    /* Corregge il contenitore WC che su mobile aggiunge padding asimmetrico */
    .wc-block-cart-items,
    .wc-block-cart-items__contents {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .sgc-card {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}