﻿.pd-actions-main {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .pd-actions-main .js-add-to-cart {
        flex: 1 1 auto;
        width: auto; 
    }

@media (max-width: 640px) {
    .pd-actions-main {
        flex-direction: column;
        align-items: stretch;
    }

        .pd-actions-main .js-add-to-cart {
            width: 100%;
        }
}

.pd-qty {
    display: flex;
    align-items: center;
}

.pd-qty-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.pd-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    min-width: 110px;
    box-shadow: 0 6px 14px rgba(2,6,23,.06);
}

.pd-qty-btn {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .08s ease;
}

    .pd-qty-btn:focus,
    .pd-qty-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .pd-qty-btn:hover {
        background: #f3f4f6;
        color: #111827;
    }

    .pd-qty-btn:active {
        transform: scale(.96);
    }

.pd-qty-input {
    width: 55px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
    outline: none;
    line-height: 1.2;
    -moz-appearance: textfield;
    appearance: textfield;
}

    .pd-qty-input:focus,
    .pd-qty-input:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .pd-qty-input::-webkit-inner-spin-button,
    .pd-qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

@supports (-moz-appearance: textfield) {
    input[type="number"].pd-qty-input {
        -moz-appearance: textfield;
    }
}

.pd-actions-sub {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
    flex-wrap: wrap;
}

    .pd-actions-sub .btn {
        width: auto !important;
        flex: 0 0 auto;
    }

        .pd-actions-sub .btn.btn-ghost::after {
            content: none !important;
        }

        .pd-actions-sub .btn.btn-ghost::before {
            content: "";
            position: static !important;
            inset: auto !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: currentColor !important;
            width: 18px;
            height: 18px;
            display: inline-block;
            opacity: .92;
            -webkit-mask: var(--pd-ic) no-repeat center / contain;
            mask: var(--pd-ic) no-repeat center / contain;
            -webkit-mask-composite: initial !important;
            mask-composite: initial !important;
            pointer-events: none;
        }

        .pd-actions-sub .btn.btn-ghost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            border: 1px solid rgba(15,23,42,.14) !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
            color: #0f172a !important;
            border-radius: 12px !important;
            min-height: 40px;
            padding: .56rem .92rem;
            font-weight: 700;
            font-size: .92rem;
            letter-spacing: .01em;
            box-shadow: 0 10px 22px rgba(2,6,23,.08);
            transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
        }

            .pd-actions-sub .btn.btn-ghost:hover {
                border-color: rgba(15,23,42,.20) !important;
                background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%) !important;
                transform: translateY(-1px);
                box-shadow: 0 14px 28px rgba(2,6,23,.12);
            }

            .pd-actions-sub .btn.btn-ghost:active {
                transform: translateY(0);
                box-shadow: 0 8px 18px rgba(2,6,23,.10);
            }

            .pd-actions-sub .btn.btn-ghost:focus-visible {
                outline: 3px solid rgba(99,102,241,.28);
                outline-offset: 2px;
            }

    .pd-actions-sub .pd-share {
        min-height: 42px;
        padding: .62rem 1.05rem;
        font-size: .95rem;
    }

    .pd-actions-sub .pd-compare {
        opacity: .96;
    }

    .pd-actions-sub .pd-share {
        --pd-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h5V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2v5H5V5Z'/></svg>");
    }

    .pd-actions-sub .pd-compare {
        --pd-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 3a1 1 0 0 1 1 1v16a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1Zm10 4a1 1 0 0 1 1 1v12a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm-5 3a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1Z'/></svg>");
    }

@media (max-width: 640px) {
    .pd-actions-sub {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
        justify-content: stretch;
        margin-top: .6rem;
    }

        .pd-actions-sub .btn {
            width: 100% !important;
        }

            .pd-actions-sub .btn.btn-ghost {
                justify-content: center;
                min-height: 42px;
                padding: .64rem .9rem;
            }
}

@media (max-width: 420px) {
    .pd-actions-sub {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-actions-sub .btn.btn-ghost,
    .pd-qty-btn {
        transition: none !important;
    }
}
