/* Custom styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Transitions */
.transition { transition: all 0.2s ease; }

/* Product card hover */
.product-card:hover .product-image { transform: scale(1.05); }

/* Rating stars */
.rating-star { cursor: pointer; }
.rating-star:hover, .rating-star.active { color: #f59e0b; }

/* Cart badge */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #007AFD;
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Admin sidebar active link */
.sidebar-link.active { background: #007AFD; color: white; }

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-weight: 500;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Number input with custom stepper arrows */
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
}
.step-input {
    -moz-appearance: textfield;
}

/* Product image zoom */
#main-image {
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
    will-change: transform;
}
#img-container.is-zooming #main-image {
    transform: scale(1.07);
    filter: brightness(1.03) saturate(1.05);
}
#img-container {
    transition: box-shadow .4s ease;
}
#img-container.is-zooming {
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 113, 133, .18);
}

/* Magnifier lens that follows the cursor */
.zoom-lens {
    position: absolute;
    pointer-events: none;
    border-radius: 16px;
    background: radial-gradient(125% 125% at 50% 50%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, 0) 76%);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 0 2.5px rgba(0, 113, 133, .35), inset 0 0 26px rgba(0, 0, 0, .08), 0 20px 44px rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: brightness(1.06) saturate(1.06);
    backdrop-filter: brightness(1.06) saturate(1.06);
    opacity: 0;
    transform: scale(.88);
    transition: opacity .25s ease, transform .34s cubic-bezier(.16, 1, .3, 1), left .07s linear, top .07s linear;
    will-change: left, top, opacity, transform;
    z-index: 4;
}
#img-container.is-zooming .zoom-lens { opacity: 1; transform: scale(1); }

/* Zoom panel entrance */
.zoom-panel {
    opacity: 0;
    transform: translateX(20px) scale(.9);
    transform-origin: left center;
    filter: blur(9px);
    box-shadow: 0 36px 70px -26px rgba(0, 0, 0, .4), 0 14px 28px -16px rgba(0, 0, 0, .28);
    transition: opacity .34s ease, transform .55s cubic-bezier(.34, 1.32, .48, 1), filter .42s ease;
    will-change: opacity, transform, filter;
}
.zoom-panel.is-active { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }

/* Soft light sweep across the panel as it opens */
.zoom-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%);
    transform: translateX(-130%);
    pointer-events: none;
}
.zoom-panel.is-active::after { animation: zoomShine 1.05s cubic-bezier(.2, .6, .2, 1) .1s both; }
@keyframes zoomShine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

#zoom-image {
    background-position: center;
    transition: background-position .07s linear;
}

/* Catalog product cards — premium hover */
.product-card {
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease, border-color .45s ease;
    will-change: transform;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .28), 0 8px 18px -12px rgba(0, 0, 0, .18);
    border-color: rgba(0, 113, 133, .38);
}
.product-card__media {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f5 100%);
}
.product-card__img {
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
    will-change: transform;
}
.product-card:hover .product-card__img {
    transform: scale(1.09);
    filter: brightness(1.03) saturate(1.05);
}

/* Light sweep across the image */
.product-card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-130%);
    opacity: 0;
    pointer-events: none;
}
.product-card:hover .product-card__shine {
    opacity: 1;
    animation: cardShine .9s cubic-bezier(.2, .6, .2, 1) .05s both;
}
@keyframes cardShine {
    from { transform: translateX(-130%); }
    to { transform: translateX(130%); }
}



@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card__img { transition: none; }
    .product-card:hover { transform: none; }
    .product-card:hover .product-card__img { transform: none; }
    .product-card:hover .product-card__shine { animation: none; }
}