/* ============================================================
   Storefront UX polish — look & feel refinements applied across
   product, product list, cart, checkout and profile pages.
   Loaded after site.css + per-page shop CSS, so it only refines
   (never restructures) the existing design.
   ============================================================ */

/* ---- 1. Modern keyboard focus (focus-visible) -------------------------------
   Show a crisp brand-colored ring for keyboard users, but suppress the ring on
   plain mouse clicks (the old `:focus` rings fired on every click, which reads
   as "stuck"). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.product-card:focus-visible,
.summary-link:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary, #0891b2);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Don't paint a focus ring when the element was reached by mouse/touch. */
.btn:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.product-card:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ---- 2. Premium product-image zoom on card hover ---------------------------
   The card already lifts on hover; let the photo gently scale inside its
   clipped frame for a more tactile, store-like feel. */
.product-card .product-image img {
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: transform;
}
.product-card:hover .product-image img,
.product-card:focus-visible .product-image img {
    transform: scale(1.06);
}

/* ---- 3. Button press feedback + smoother transitions ----------------------- */
.btn {
    transition: transform 0.12s ease, box-shadow var(--transition-fast, 150ms), background var(--transition-fast, 150ms), filter var(--transition-fast, 150ms);
}
.btn:not(:disabled):active {
    transform: translateY(1px) scale(0.99);
}

/* ---- 4. Brand-colored form focus (replaces Bootstrap's default blue ring) -- */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary, #0891b2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0891b2) 18%, transparent);
}

/* ---- 5. Snappier surface transitions on summary/cards ---------------------- */
.cart-summary,
.order-summary {
    transition: box-shadow var(--transition-base, 200ms);
}

/* ---- 6. Respect reduced-motion preferences --------------------------------
   Users who ask for less motion get instant transitions and no hover zoom. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .product-card:hover .product-image img {
        transform: none;
    }
}