/* ──────────────────────────────────────────
   Spice & Maple — Custom Styles
   (Tailwind covers most; this handles extras)
────────────────────────────────────────── */

/* Line-clamp utility (for browsers without native support) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth transitions for all images */
img { transition: transform 0.3s ease; }

/* Remove number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

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

/* Scrollbar style (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f3f0; }
::-webkit-scrollbar-thumb { background: #d4d0cc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c8622a; }

/* Focus ring */
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid #c8622a;
    outline-offset: 2px;
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #ede9e4 25%, #f5f3f0 50%, #ede9e4 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 6px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}