/* ============================================================
   ShifaStore – Cart Page
   Matches the My Account design language exactly.
   ============================================================ */

/* ------------------------------------------------------------------ */
/*  Page container — same pattern as my-account                        */
/* ------------------------------------------------------------------ */
.woocommerce-cart #primary.content-area {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 7rem !important;
}
.woocommerce-cart .entry-header,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-title { display: none !important; }

.woocommerce-cart article.page,
.woocommerce-cart .entry-content { padding: 0 !important; margin: 0 !important; }

.woocommerce-cart .entry-content {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 1.5rem 5rem !important;
}

/* ------------------------------------------------------------------ */
/*  Hero — reuses .page-hero from components.css                       */
/* ------------------------------------------------------------------ */
.shifa-cart-hero__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.shifa-cart-hero__icon-blob {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #0A6439 0%, #2E7D50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(10,100,57,.3);
}
.shifa-cart-hero__icon-blob .material-symbols-outlined {
    font-size: 1.625rem;
    color: #fff;
}

.shifa-cart-hero__title {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: .2rem 0 0;
}
.shifa-cart-hero__sub {
    font-size: .875rem;
    color: var(--color-on-surface-variant);
    margin: .2rem 0 0;
}

/* ------------------------------------------------------------------ */
/*  Two-column layout                                                   */
/* ------------------------------------------------------------------ */
.shifa-cart-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .shifa-cart-layout {
        grid-template-columns: 1fr 360px;
        gap: 2rem;
    }
}

/* Summary sidebar sticky on desktop */
@media (min-width: 1024px) {
    .shifa-cart-summary { position: sticky; top: 8.5rem; }
}

/* ------------------------------------------------------------------ */
/*  Column headers row (desktop only)                                  */
/* ------------------------------------------------------------------ */
.cart-table-head {
    display: none;
}
@media (min-width: 768px) {
    .cart-table-head {
        display: grid;
        grid-template-columns: 80px 1fr 110px 130px 110px 44px;
        gap: .75rem 1rem;
        padding: 0 1.25rem .625rem;
        font-family: var(--font-headline);
        font-size: .6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--color-on-surface-variant);
        border-bottom: 1.5px solid rgba(191,201,191,.3);
        margin-bottom: .5rem;
        align-items: center;
    }
}

/* ------------------------------------------------------------------ */
/*  Cart items list                                                     */
/* ------------------------------------------------------------------ */
.shifa-cart-items {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

/* Individual item card — same as .shifa-auth-card pattern */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-areas:
        "thumb  info"
        "thumb  price"
        "thumb  qty"
        "remove subtotal";
    gap: .625rem .875rem;
    background: #fff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-botanical);
    border: 1px solid rgba(191,201,191,.15);
    padding: 1.25rem;
    transition: box-shadow .2s;
}
.cart-item:hover { box-shadow: 0 8px 24px -4px rgba(0,0,0,.1); }

@media (min-width: 768px) {
    .cart-item {
        grid-template-columns: 80px 1fr 110px 130px 110px 44px;
        grid-template-areas: "thumb info price qty subtotal remove";
        align-items: center;
        padding: 1rem 1.25rem;
        border-radius: var(--radius-xl);
    }
}

/* Thumbnail */
.cart-item__thumb { grid-area: thumb; position: relative; }
.cart-item__thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
    background: var(--color-surface-container-low);
}
.cart-item__sale-badge {
    position: absolute;
    top: .375rem;
    left: .375rem;
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: linear-gradient(135deg, #0A6439, #2E7D50);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: .15rem .45rem;
}

/* Info */
.cart-item__info { grid-area: info; min-width: 0; }
.cart-item__name {
    font-family: var(--font-headline);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 .25rem;
    line-height: 1.3;
}
.cart-item__name a { 
    color: inherit;
    text-decoration: none !important;
}
.cart-item__name a:hover { color: var(--color-primary); }

.cart-item__info .variation,
.cart-item__info dl.variation { margin: .25rem 0 0; }
.cart-item__info .variation dt,
.cart-item__info .variation dd {
    font-size: .75rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    display: inline;
}
.cart-item__sku {
    font-size: .6875rem;
    color: var(--color-outline);
    margin: .25rem 0 0;
}

/* Mobile col labels */
.cart-item__col-label {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-on-surface-variant);
    margin-bottom: .125rem;
}
@media (min-width: 768px) { .cart-item__col-label { display: none; } }

/* Price */
.cart-item__price {
    grid-area: price;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--color-on-surface);
}
.cart-item__price del { color: var(--color-outline); font-weight: 400; font-size: .8125rem; }
.cart-item__price ins { text-decoration: none; }

/* Quantity */
.cart-item__qty { grid-area: qty; }
.cart-item__qty .quantity { display: inline-flex; align-items: center; }
.cart-item__qty input.qty {
    width: 72px !important;
    text-align: center;
    background: var(--color-surface-container-low) !important;
    border: 1.5px solid rgba(191,201,191,.5) !important;
    border-radius: var(--radius-md) !important;
    padding: .5rem .5rem !important;
    font-size: .9375rem !important;
    font-family: var(--font-headline) !important;
    font-weight: 700 !important;
    color: var(--color-on-surface) !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s !important;
    appearance: textfield;
    -moz-appearance: textfield;
    margin: 0 !important;
}
.cart-item__qty input.qty:focus {
    border-color: var(--color-primary) !important;
    background: #fff !important;
    outline: 2px solid rgba(10,100,57,.15) !important;
}
.cart-item__qty input.qty::-webkit-outer-spin-button,
.cart-item__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }

.cart-item__single-qty {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: .9375rem;
}

/* Subtotal */
.cart-item__subtotal {
    grid-area: subtotal;
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
}

/* Remove */
.cart-item__remove { grid-area: remove; display: flex; align-items: center; justify-content: flex-end; }
@media (min-width: 768px) { .cart-item__remove { justify-content: center; } }
.cart-item__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-low);
    color: var(--color-outline);
    text-decoration: none !important;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.cart-item__remove-btn:hover { background: var(--color-error-container); color: var(--color-error); }
.cart-item__remove-btn .material-symbols-outlined { font-size: 1.125rem; }

/* ------------------------------------------------------------------ */
/*  Actions bar                                                         */
/* ------------------------------------------------------------------ */
.shifa-cart-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(191,201,191,.15);
    box-shadow: var(--shadow-botanical);
}

.shifa-cart-actions__back {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-headline);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none !important;
    padding: .5rem 1.125rem;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(191,201,191,.5);
    background: var(--color-surface-container-low);
    transition: border-color .15s, color .15s, background .15s;
}
.shifa-cart-actions__back:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fff;
}
.shifa-cart-actions__back .material-symbols-outlined { font-size: .9375rem; }

.shifa-cart-actions__update {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-headline);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    background: var(--color-surface-container-low);
    border: 1.5px solid rgba(191,201,191,.5);
    border-radius: var(--radius-full);
    padding: .5rem 1.125rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.shifa-cart-actions__update:hover {
    background: var(--color-secondary-container);
    border-color: var(--color-secondary-container);
    color: var(--color-primary);
}
.shifa-cart-actions__update .material-symbols-outlined { font-size: .9375rem; }

/* ------------------------------------------------------------------ */
/*  Order Summary panel — same as .myaccount-sidebar__inner            */
/* ------------------------------------------------------------------ */
.shifa-order-summary {
    background: #fff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-botanical);
    border: 1px solid rgba(191,201,191,.15);
    overflow: hidden;
}

.shifa-order-summary__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(191,201,191,.15);
}
.shifa-order-summary__head-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #E8F5EE 0%, #D6F0E3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.shifa-order-summary__head-icon .material-symbols-outlined {
    font-size: 1.125rem;
    color: var(--color-primary);
}
.shifa-order-summary__heading {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0;
}

.shifa-order-summary__body { padding: 1.25rem 1.5rem; }

/* Line items */
.shifa-order-summary__lines {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(191,201,191,.15);
}
.shifa-order-summary__line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    font-size: .875rem;
}
.shifa-order-summary__label {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
    flex-shrink: 0;
}
.shifa-order-summary__label .material-symbols-outlined { font-size: .875rem; }
.shifa-order-summary__value { font-weight: 600; color: var(--color-on-surface); text-align: right; }
.shifa-order-summary__value bdi { font-weight: 700; }

/* Discount line */
.shifa-order-summary__line--discount .shifa-order-summary__label { color: #16a34a; }
.shifa-order-summary__value--green { color: #16a34a !important; }
.shifa-coupon-remove {
    display: inline-flex;
    align-items: center;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    margin-left: .25rem;
    vertical-align: middle;
}
.shifa-coupon-remove:hover { color: var(--color-error); }
.shifa-coupon-remove .material-symbols-outlined { font-size: .875rem; }

/* Total row */
.shifa-order-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--color-surface-container-low);
    border-radius: var(--radius-xl);
}
.shifa-order-summary__total-label {
    font-family: var(--font-headline);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
}
.shifa-order-summary__total-value {
    font-family: var(--font-headline);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
}
.shifa-order-summary__tax-note {
    font-size: .75rem;
    color: var(--color-on-surface-variant);
    text-align: center;
    margin: -.75rem 0 .875rem;
}

/* Proceed to checkout — matches .shifa-auth-btn */
.shifa-order-summary .wc-proceed-to-checkout { padding: 0; margin-bottom: .5rem; }
.shifa-order-summary .wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    width: 100% !important;
    border-radius: var(--radius-full) !important;
    padding: .875rem 1.5rem !important;
    font-family: var(--font-headline) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #0A6439 0%, #2E7D50 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(10,100,57,.25) !important;
    border: none !important;
    text-shadow: none !important;
    transition: box-shadow .2s, transform .1s !important;
}
.shifa-order-summary .wc-proceed-to-checkout a.checkout-button:hover {
    box-shadow: 0 12px 32px rgba(10,100,57,.35) !important;
    color: #fff !important;
}
.shifa-order-summary .wc-proceed-to-checkout a.checkout-button:active {
    transform: scale(.98) !important;
}

/* ------------------------------------------------------------------ */
/*  Coupon accordion                                                    */
/* ------------------------------------------------------------------ */
.shifa-coupon { padding: 0 1.5rem 1.25rem; }
.shifa-coupon__toggle {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    margin: 0 0 0;
    padding: .5rem 0;
    user-select: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
}
.shifa-coupon__toggle:hover { color: var(--color-primary); }
.shifa-coupon__toggle .material-symbols-outlined { font-size: .9375rem; }
.shifa-coupon__chevron { margin-left: auto; transition: transform .2s; font-size: 1.125rem !important; }

.shifa-coupon__form { margin-top: .625rem; }
.shifa-coupon__input-wrap { display: flex; gap: .5rem; }
.shifa-coupon__input {
    flex: 1;
    min-width: 0;
    background: var(--color-surface-container-low) !important;
    border: 1.5px solid rgba(191,201,191,.4) !important;
    border-radius: var(--radius-md) !important;
    padding: .625rem .875rem !important;
    font-size: .875rem !important;
    font-family: var(--font-body) !important;
    color: var(--color-on-surface) !important;
    transition: border-color .15s, background .15s !important;
}
.shifa-coupon__input:focus {
    border-color: var(--color-primary) !important;
    background: #fff !important;
    outline: 2px solid rgba(10,100,57,.15) !important;
}
.shifa-coupon__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: .625rem 1.125rem !important;
    font-family: var(--font-headline) !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    text-shadow: none !important;
    transition: background .15s, box-shadow .15s !important;
}
.shifa-coupon__btn:hover {
    background: var(--color-primary-container) !important;
    box-shadow: 0 4px 12px rgba(10,100,57,.2) !important;
}

/* ------------------------------------------------------------------ */
/*  Trust strip inside summary                                          */
/* ------------------------------------------------------------------ */
.shifa-order-summary__trust {
    list-style: none;
    padding: 1rem 1.5rem;
    margin: 0;
    border-top: 1px solid rgba(191,201,191,.15);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.shifa-order-summary__trust li {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--color-on-surface-variant);
}
.shifa-order-summary__trust .material-symbols-outlined { font-size: .9375rem; color: var(--color-primary); }

/* ------------------------------------------------------------------ */
/*  Empty cart                                                          */
/* ------------------------------------------------------------------ */
.shifa-cart-empty {
    text-align: center;
    padding: 4rem 1.5rem 6rem;
    max-width: 460px;
    margin: 0 auto;
}
.shifa-cart-empty__blob {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #E8F5EE 0%, #D6F0E3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 16px rgba(10,100,57,.15);
}
.shifa-cart-empty__icon { font-size: 2.5rem; color: var(--color-primary); }

.shifa-cart-empty__heading {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-on-surface);
    margin: 0 0 .625rem;
}
.shifa-cart-empty__body {
    font-size: .9375rem;
    color: var(--color-on-surface-variant);
    line-height: 1.65;
    margin: 0 0 2rem !important;
}
.shifa-cart-empty__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.shifa-cart-empty__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: .9375rem;
    color: #fff;
    background: linear-gradient(135deg, #0A6439 0%, #2E7D50 100%);
    border-radius: var(--radius-full);
    padding: .875rem 1.75rem;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(10,100,57,.25);
    transition: box-shadow .2s, transform .1s;
}
.shifa-cart-empty__btn-primary:hover { box-shadow: 0 12px 32px rgba(10,100,57,.35); color: #fff; }
.shifa-cart-empty__btn-primary:active { transform: scale(.98); }

.shifa-cart-empty__btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-primary);
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    padding: .875rem 1.5rem;
    text-decoration: none !important;
    transition: background .15s;
}
.shifa-cart-empty__btn-outline:hover { background: var(--color-surface-container-low); color: var(--color-primary); }

.shifa-cart-empty__btn-primary .material-symbols-outlined,
.shifa-cart-empty__btn-outline .material-symbols-outlined { font-size: 1.125rem; }

.shifa-cart-empty__login-note {
    font-size: .8125rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}
.shifa-cart-empty__login-note a { color: var(--color-primary); font-weight: 600; }

/* ------------------------------------------------------------------ */
/*  WooCommerce notices inside cart                                     */
/* ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
    border-radius: var(--radius-xl) !important;
    margin-bottom: 1rem !important;
    font-size: .9375rem !important;
    list-style: none !important;
    border-left: 4px solid !important;
}
.woocommerce-cart .woocommerce-message {
    background: #D6F5E3 !important;
    border-color: var(--color-primary) !important;
    color: #0A3D24 !important;
}
.woocommerce-cart .woocommerce-error {
    background: var(--color-error-container) !important;
    border-color: var(--color-error) !important;
    color: var(--color-on-error-container) !important;
}
.woocommerce-cart .woocommerce-info {
    background: #DDEEFF !important;
    border-color: #1E5FAD !important;
    color: #0D3570 !important;
}