/* =========================================================
   Shop by Category — clean 3D coverflow
   Markup: index.php (.c3d)   Behaviour: assets/js/wc-category-3d.js
   ========================================================= */

.c3d-section {
    padding-bottom: 10px !important;
    /* The side cards of the coverflow reach past the screen edge; clip them so phones get no sideways scroll. */
    overflow-x: hidden;
    overflow-x: clip;
}

.c3d {
    --c3d-card-w: 250px;
    --c3d-media-h: 250px;
    --c3d-card-h: calc(var(--c3d-media-h) + 84px);
    --c3d-gold: #b88a3b;
    --c3d-line: #ece4d6;
    --c3d-ink: #1f1b16;
    --c3d-muted: #8a8174;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Stage ---------- */
.c3d__stage {
    position: relative;
    height: calc(var(--c3d-card-h) + 36px);
    perspective: 1600px;
    touch-action: pan-y;
    outline: none;
}

.c3d__stage.is-dragging {
    cursor: grabbing;
}

.c3d__stage:focus-visible {
    box-shadow: 0 0 0 2px rgba(184, 138, 59, 0.4);
    border-radius: 18px;
}

.c3d__track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* ---------- Card ---------- */
.c3d__item {
    position: absolute;
    left: 50%;
    top: 12px;
    width: var(--c3d-card-w);
    height: var(--c3d-card-h);
    margin-left: calc(var(--c3d-card-w) / -2);
    transition:
        transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.5s ease;
    will-change: transform, opacity;
}

.c3d__stage.is-dragging .c3d__item {
    transition: none;
}

.c3d__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--c3d-line);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(31, 27, 22, 0.06);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.c3d__item.is-active .c3d__card {
    border-color: rgba(184, 138, 59, 0.55);
    box-shadow: 0 18px 40px rgba(31, 27, 22, 0.14);
}

.c3d__card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.c3d__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--c3d-media-h);
    padding: 18px;
    background: #faf7f2;
}

.c3d__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    -webkit-user-drag: none;
    pointer-events: none;
    transition: transform 0.5s ease;
}

.c3d__item.is-active .c3d__card:hover .c3d__media img {
    transform: scale(1.04);
}

.c3d__media .wc-no-image-placeholder {
    position: absolute;
    inset: 0;
}

.c3d__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--c3d-line);
}

.c3d__title {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--c3d-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c3d__count {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--c3d-muted);
}

.c3d__count i {
    display: none;
}

.c3d__cta,
.c3d__shine {
    display: none;
}

.c3d__item.is-active .c3d__title {
    color: var(--c3d-gold);
}

/* ---------- Controls ---------- */
.c3d__nav {
    position: absolute;
    top: calc(12px + var(--c3d-media-h) / 2);
    z-index: 300;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 1px solid var(--c3d-line);
    border-radius: 50%;
    color: var(--c3d-ink);
    font-size: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31, 27, 22, 0.08);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c3d__nav:hover,
.c3d__nav:focus-visible {
    color: #fff;
    background: var(--c3d-gold);
    border-color: var(--c3d-gold);
    outline: none;
}

.c3d__nav--prev { left: 0; }
.c3d__nav--next { right: 0; }

.c3d__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.c3d__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #ddd5c7;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.c3d__dot.is-active {
    width: 22px;
    background: var(--c3d-gold);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .c3d {
        --c3d-card-w: 220px;
        --c3d-media-h: 210px;
    }
}

@media (max-width: 575px) {
    .c3d {
        --c3d-card-w: 190px;
        --c3d-media-h: 180px;
    }

    .c3d__nav {
        width: 36px;
        height: 36px;
        margin-top: -18px;
        font-size: 12px;
    }

    .c3d__title {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c3d__item,
    .c3d__media img {
        transition-duration: 0.01ms !important;
    }
}