/* =========================================================
   WooCommerce Sidebar Cart — woo-sidebar-cart.css
   Clean, neutral design that blends into any theme.
   Uses CSS custom properties for easy theming.
   ========================================================= */

/* ── Custom Properties ─────────────────────────────── */
.wsc-cart-wrap {
    --wsc-bg:           #ffffff;
    --wsc-border:       #e8e8e8;
    --wsc-text:         #1a1a1a;
    --wsc-muted:        #777777;
    --wsc-accent:       #687B54;
    --wsc-accent-text:  #ffffff;
    --wsc-btn-bg:       #f4f4f4;
    --wsc-btn-text:     #111111;
    --wsc-danger:       #d0454c;
    --wsc-radius:       10px;
    --wsc-font:         inherit;
    --wsc-transition:   0.22s ease;
}

/* ── Wrapper ───────────────────────────────────────── */
.wsc-cart-wrap {
    font-family:   var(--wsc-font);
    font-size:     0.9rem;
    color:         var(--wsc-text);
    background:    var(--wsc-bg);
    border:        1px solid var(--wsc-border);
    border-radius: var(--wsc-radius);
    overflow:      hidden;
    position:      relative;
    transition:    opacity var(--wsc-transition);
}

.wsc-cart-wrap.wsc-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* Flash on update */
@keyframes wsc-flash {
    0%   { box-shadow: 0 0 0 2px transparent; }
    40%  { box-shadow: 0 0 0 2px var(--wsc-accent); }
    100% { box-shadow: 0 0 0 2px transparent; }
}
.wsc-cart-wrap.wsc-updated {
    animation: wsc-flash 0.55s ease;
}

/* ── Header ─────────────────────────────────────────── */
.wsc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px;
    border-bottom:   1px solid var(--wsc-border);
}

.wsc-title {
    font-weight:    600;
    font-size:      0.95rem;
    letter-spacing: 0.01em;
}

.wsc-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       22px;
    height:          22px;
    padding:         0 6px;
    background:      var(--wsc-accent);
    color:           var(--wsc-accent-text);
    border-radius:   50px;
    font-size:       0.75rem;
    font-weight:     700;
    line-height:     1;
}

/* ── Empty state ────────────────────────────────────── */
.wsc-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        36px 16px;
    color:          var(--wsc-muted);
    gap:            10px;
}

.wsc-empty svg {
    width:   40px;
    height:  40px;
    opacity: 0.35;
}

.wsc-empty p {
    margin:    0;
    font-size: 0.88rem;
}

/* ── Items list ─────────────────────────────────────── */
.wsc-items {
    list-style: none;
    margin:     0;
    padding:    0;
}

.wsc-item {
    display:       grid;
    grid-template-columns: 64px 1fr 28px;
    gap:           10px;
    align-items:   start;
    padding:       12px 14px;
    border-bottom: 1px solid var(--wsc-border);
    transition:    opacity 0.28s ease, transform 0.28s ease;
}

.wsc-item:last-child {
    border-bottom: none;
}

.wsc-item.wsc-removing {
    opacity:   0;
    transform: translateX(12px);
}

/* Thumbnail */
.wsc-item-thumb {
    display: block;
}

.wsc-item-thumb img {
    display:       block;
    width:         64px;
    height:        64px;
    object-fit:    cover;
    border-radius: 6px;
    border:        1px solid var(--wsc-border);
}

/* Info column */
.wsc-item-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0; /* prevent overflow */
}

.wsc-item-name {
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--wsc-text);
    text-decoration: none;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
    line-height:     1.35;
}

.wsc-item-name:hover {
    text-decoration: underline;
}

.wsc-item-meta {
    font-size:  0.78rem;
    color:      var(--wsc-muted);
    line-height: 1.4;
}

.wsc-item-meta dl,
.wsc-item-meta dt,
.wsc-item-meta dd {
    display: inline;
    margin:  0;
}

.wsc-item-meta dt::after { content: ': '; }
.wsc-item-meta dd + dt::before { content: ' · '; }

/* Qty + subtotal row */
.wsc-item-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  4px;
    flex-wrap:   wrap;
}

/* Qty controls */
.wsc-qty-wrap {
    display:       flex;
    align-items:   center;
    border:        1px solid var(--wsc-border);
    border-radius: 6px;
    overflow:      hidden;
    height:        30px;
}

.wsc-qty-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          30px;
    background:      var(--wsc-btn-bg);
    border:          none;
    cursor:          pointer;
    font-size:       1.1rem;
    line-height:     1;
    color:           var(--wsc-text);
    transition:      background var(--wsc-transition), color var(--wsc-transition);
    padding:         0;
    flex-shrink:     0;
    user-select:     none;
}

.wsc-qty-btn:hover {
    background: var(--wsc-accent);
    color:      var(--wsc-accent-text);
}

.wsc-qty-input {
    width:      36px;
    height:     30px;
    border:     none;
    border-left:  1px solid var(--wsc-border);
    border-right: 1px solid var(--wsc-border);
    text-align:   center;
    font-size:    0.83rem;
    font-family:  var(--wsc-font);
    color:        var(--wsc-text);
    background:   var(--wsc-bg);
    -moz-appearance: textfield;
    padding:      0;
}

.wsc-qty-input::-webkit-inner-spin-button,
.wsc-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.wsc-qty-input:focus {
    outline: none;
    background: #f9f9f9;
}

/* Subtotal */
.wsc-item-subtotal {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--wsc-text);
    white-space: nowrap;
    margin-left: auto;
}

/* Remove button */
.wsc-remove {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    border-radius:   50%;
    color:           var(--wsc-muted);
    transition:      background var(--wsc-transition), color var(--wsc-transition);
    flex-shrink:     0;
    padding:         0;
    align-self:      start;
    margin-top:      2px;
}

.wsc-remove svg {
    width:  14px;
    height: 14px;
}

.wsc-remove:hover {
    background: #fdecea;
    color:      var(--wsc-danger);
}

/* ── Footer ─────────────────────────────────────────── */
.wsc-footer {
    padding:     14px 16px;
    border-top:  1px solid var(--wsc-border);
    display:     flex;
    flex-direction: column;
    gap:         10px;
}

/* Totals */
.wsc-totals {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  2px;
}

.wsc-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    font-size:       0.875rem;
    color:           var(--wsc-muted);
}

.wsc-total-row span:last-child {
    font-weight: 500;
    color:       var(--wsc-text);
}

.wsc-discount span:last-child {
    color: #2a8a4d;
}

.wsc-grand-total {
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--wsc-text) !important;
    padding-top:   6px;
    border-top:    1px solid var(--wsc-border);
    margin-top:    2px;
}

.wsc-grand-total span {
    color:       var(--wsc-text) !important;
    font-weight: 700;
}

/* Buttons */
.wsc-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         11px 16px;
    border-radius:   7px;
    font-size:       0.875rem;
    font-weight:     600;
    text-decoration: none;
    text-align:      center;
    cursor:          pointer;
    transition:      background var(--wsc-transition),
                     color var(--wsc-transition),
                     transform var(--wsc-transition);
    border:          1px solid transparent;
    line-height:     1;
    letter-spacing:  0.01em;
}

.wsc-btn svg {
    width:      14px;
    height:     14px;
    flex-shrink: 0;
}

.wsc-checkout-btn {
    background: var(--wsc-accent);
    color:      var(--wsc-accent-text);
    border-color: var(--wsc-accent);
}

.wsc-checkout-btn:hover {
    background: #912F24;
	color: #fff;
    transform:  translateY(-1px);
}

.wsc-cart-btn {
    background:   transparent;
    color:        var(--wsc-text);
    border-color: var(--wsc-border);
}

.wsc-cart-btn:hover {
    background: var(--wsc-btn-bg);
    border-color: #ccc;
}

/* ── Responsive tweaks ──────────────────────────────── */
@media (max-width: 480px) {
    .wsc-item {
        grid-template-columns: 52px 1fr 28px;
        gap: 8px;
    }

    .wsc-item-thumb img {
        width:  52px;
        height: 52px;
    }
}