/* Beadguy 6-box hover modernization
   Builds on parent .custom_products .bg-cat-cell — keeps colors, adds tilt + glow. */

.custom_products .bg-cat-cell {
    transform: translateZ(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease,
                filter 0.35s ease;
    will-change: transform;
}

.custom_products .bg-cat-cell::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        var(--beadguy-purple, #6A0DAD),
        var(--beadguy-green, #00A651),
        var(--beadguy-gold, #FFD700));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.35s ease;
    filter: blur(10px);
}
.custom_products .bg-cat-cell {
    position: relative;
}

.custom_products .bg-cat-cell:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
}
.custom_products .bg-cat-cell:hover::before {
    opacity: 0.55;
}

.custom_products .bg-cat-img {
    overflow: hidden;
}
.custom_products .bg-cat-img img {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.custom_products .bg-cat-cell:hover .bg-cat-img img {
    transform: scale(1.06);
}

.custom_products .bg-cat-title {
    transition: color 0.25s ease;
}
.custom_products .bg-cat-cell:hover .bg-cat-title {
    color: var(--beadguy-purple, #6A0DAD);
}

/* Per-box accent — rotate purple/green/gold so the row has rhythm without chaos */
.custom_products .bg-cat-cell:nth-child(6n+1):hover { box-shadow: 0 22px 50px rgba(106, 13, 173, 0.32); }
.custom_products .bg-cat-cell:nth-child(6n+2):hover { box-shadow: 0 22px 50px rgba(0, 166, 81, 0.30); }
.custom_products .bg-cat-cell:nth-child(6n+3):hover { box-shadow: 0 22px 50px rgba(255, 215, 0, 0.42); }
.custom_products .bg-cat-cell:nth-child(6n+4):hover { box-shadow: 0 22px 50px rgba(255, 215, 0, 0.42); }
.custom_products .bg-cat-cell:nth-child(6n+5):hover { box-shadow: 0 22px 50px rgba(0, 166, 81, 0.30); }
.custom_products .bg-cat-cell:nth-child(6n+6):hover { box-shadow: 0 22px 50px rgba(106, 13, 173, 0.32); }

/* Brand-colored top stripe that grows on hover */
.custom_products .bg-cat-cell::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg,
        var(--beadguy-purple, #6A0DAD) 0%,
        var(--beadguy-green, #00A651) 50%,
        var(--beadguy-gold, #FFD700) 100%);
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.custom_products .bg-cat-cell:hover::after { width: 100%; }

/* Scroll-reveal entry animation (added by beadguy-front.js) */
.custom_products .bg-cat-cell.bg-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.custom_products .bg-cat-cell.bg-reveal--in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Trust strip reveal */
.bg-trust { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.bg-trust.bg-trust--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .custom_products .bg-cat-cell,
    .custom_products .bg-cat-cell::before,
    .custom_products .bg-cat-cell::after,
    .custom_products .bg-cat-img img,
    .custom_products .bg-cat-title { transition: none; }
    .custom_products .bg-cat-cell:hover {
        transform: none;
    }
    .custom_products .bg-cat-cell:hover .bg-cat-img img {
        transform: none;
    }
}

/* Brian 2026-08-04: "make picture larger if possible" on the home category cards.
   Parent theme padded the square image box 16px with object-fit:contain, which
   letterboxed the portrait product shots. Trim the padding so each product fills
   more of the card. Applies uniformly so the grid stays even. */
.custom_products .bg-cat-img {
    padding: 4px !important;
}
.custom_products .bg-cat-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}