/* Root block spacing */
.block.jscriptz-subcats {
    margin-bottom: 2.5rem;
}

/* Generic / Luma (and default) layout */
.jscriptz-subcats__list {
    display: flex;
    flex-wrap: wrap;

    /* This is the spacing between cards – controlled by admin setting */
    gap: var(--js-subcats-card-spacing, 20px);

    /* No negative margins needed when using gap */
    margin: 0;
}

.jscriptz-subcats__item {
    box-sizing: border-box;

    padding: var(--js-subcats-card-padding, 10px);

    flex: 0 0 var(--js-subcats-col-width-phone, 100%);
    max-width: var(--js-subcats-col-width-phone, 100%);

    border-radius: var(--js-subcats-card-radius, 0);
    border: var(--js-subcats-card-border, none);
    background: var(--js-subcats-card-background, transparent);

    /* Base shadow from config */
    box-shadow: var(--js-subcats-card-shadow, none);

    /* Smooth hover animation; uses configurable duration */
    /* Respect Transitions settings (always wins over preset/theme rules) */
    transition: var(
            --js-subcats-transition-card,
            transform var(--js-subcats-transition-duration, 200ms) ease-in-out,
            box-shadow var(--js-subcats-transition-duration, 200ms) ease-in-out,
            background-color var(--js-subcats-transition-duration, 200ms) ease-in-out
    ) !important;
}

/* Hover behavior controlled entirely by config dropdowns */
.jscriptz-subcats__item:hover {
    transform: scale(var(--js-subcats-hover-scale, 1));
    box-shadow: var(
            --js-subcats-hover-shadow,
            var(--js-subcats-card-shadow, none)
    );
    background-color: var(
            --js-subcats-card-hover-background,
            var(--js-subcats-card-background, transparent)
    );
}


@media (min-width: 640px) {
    .jscriptz-subcats__item {
        flex-basis: var(--js-subcats-col-width-tablet, 50%);
        max-width: var(--js-subcats-col-width-tablet, 50%);
    }
}

@media (min-width: 1024px) {
    .jscriptz-subcats__item {
        flex-basis: var(--js-subcats-col-width-desktop, 25%);
        max-width: var(--js-subcats-col-width-desktop, 25%);
    }
}

/* Card look */
.jscriptz-subcats__image-link {
    display: block;
    text-decoration: none;
}

.jscriptz-subcats__image-wrapper {
    display: block;
    overflow: hidden;
    border-radius: var(--js-subcats-image-radius, inherit);
    background: #f5f5f5;
    border: var(--js-subcats-image-border, none);
    /* Respect Transitions settings (always wins over preset/theme rules) */
    transition: var(
            --js-subcats-transition-image,
            transform var(--js-subcats-transition-duration, 200ms) ease-in-out,
            box-shadow var(--js-subcats-transition-duration, 200ms) ease-in-out
    ) !important;

    /*
     * Force-disable any theme-provided image shadows by default.
     *
     * We intentionally set a hard "none" first, then a CSS-variable override.
     * This makes the rule resilient even if someone mistakenly puts "!important"
     * inside the CSS variable value (which would otherwise invalidate the
     * substituted declaration).
     */
    box-shadow: none !important;
    box-shadow: var(--js-subcats-image-shadow, none) !important;

    /* Configurable aspect ratio for consistent image sizing */
    aspect-ratio: var(--js-subcats-image-aspect-ratio, auto);
}

.jscriptz-subcats__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jscriptz-subcats__image {
    display: block;
    width: 100%;
    height: auto;
}

.jscriptz-subcats__content {
    margin-top: 10px;
    padding: var(--js-subcats-content-padding, 0);
    text-align: var(--js-subcats-card-title-alignment, center);
}

.jscriptz-subcats__name {
    font-size: var(--js-subcats-name-font-size, 1.4rem);
    font-weight: var(--js-subcats-name-font-weight, 400);
    -webkit-text-stroke: var(--js-subcats-name-font-stroke, unset);
    text-stroke: var(--js-subcats-name-font-stroke, unset);
    margin: 0 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: var(--js-subcats-card-title-alignment, center);
    gap: 0.5em;
    flex-wrap: wrap;
}

.jscriptz-subcats__link {
    color: var(--js-subcats-link-color, inherit);
    text-decoration: none;
    /* Respect Transitions settings (always wins over preset/theme rules) */
    transition: var(
            --js-subcats-transition-text,
            color var(--js-subcats-transition-duration, 200ms) ease-in-out
    ) !important;
}

.jscriptz-subcats__link:hover {
    color: var(--js-subcats-link-hover-color, inherit);
    text-decoration: none;
}

/* Product count badge next to category name */
.jscriptz-subcats__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: 0.15em 0.5em;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1;
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
    border-radius: 9999px;
    vertical-align: middle;
}

.jscriptz-subcats__description {
    margin: 0;
    font-size: var(--js-subcats-description-font-size, 0.9rem);
    color: var(--js-subcats-description-color, #666666);
    /* Respect Transitions settings (always wins over preset/theme rules) */
    transition: var(
            --js-subcats-transition-text,
            color var(--js-subcats-transition-duration, 200ms) ease-in-out
    ) !important;
}

/* Description line clamping when max lines is set */
.jscriptz-subcats__description[style*="--js-subcats-description-max-lines"],
.jscriptz-subcats .jscriptz-subcats__description {
    display: -webkit-box;
    -webkit-line-clamp: var(--js-subcats-description-max-lines, unset);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Optional "grow" hover effect controlled by config */
.jscriptz-subcats__item--grow .jscriptz-subcats__image-wrapper {
    /* transition already controlled via CSS variable; just reuse */
}

.jscriptz-subcats__item--grow:hover .jscriptz-subcats__image-wrapper {
    transform: scale(var(--js-subcats-image-hover-scale, 1));
    /* Optional image shadow on hover (disabled by default via CSS variable) */
    box-shadow: none !important;
    box-shadow: var(--js-subcats-image-hover-shadow, none) !important;
}


/* Preset-based overrides for per-block design */

/* Default: inherit global design variables configured in Stores > Configuration. */
.jscriptz-subcats--preset-default .jscriptz-subcats__item {
    /* No additional overrides; uses CSS variables from Design block */
}

/* Soft cards: rounded, light border, soft background and subtle shadow */
.jscriptz-subcats--preset-soft .jscriptz-subcats__item {
    border-radius: 0.75rem;
    border: 1px solid #e5e5e5;
    background: #f9fafb;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

/* Borderless grid: very clean, no border or background, tight padding */
.jscriptz-subcats--preset-borderless .jscriptz-subcats__item {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px;
}

.jscriptz-subcats--preset-borderless .jscriptz-subcats__image-wrapper {
    border-radius: 0;
}

/* Light cards: white cards with soft gray text */
.jscriptz-subcats--preset-light .jscriptz-subcats__item {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.jscriptz-subcats--preset-light .jscriptz-subcats__link {
    color: #111827;
}

.jscriptz-subcats--preset-light .jscriptz-subcats__description {
    color: #4b5563;
}

/* Dark cards: dark background and light text */
.jscriptz-subcats--preset-dark .jscriptz-subcats__item {
    border-radius: 0.5rem;
    border: 1px solid #374151;
    background: #111827;
}

.jscriptz-subcats--preset-dark .jscriptz-subcats__link {
    color: #f9fafb;
}

.jscriptz-subcats--preset-dark .jscriptz-subcats__description {
    color: #d1d5db;
}

/* Custom: rely on Store > Configuration > Jscriptz > Subcats > Design for fine-tuning */
.jscriptz-subcats--preset-custom .jscriptz-subcats__item {
    /* No hard-coded overrides; use CSS variables from Design block */
}

/* Modern: clean, contemporary design with subtle shadows and rounded corners */
.jscriptz-subcats--preset-modern .jscriptz-subcats__item {
    border-radius: 1rem;
    border: none;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.jscriptz-subcats--preset-modern .jscriptz-subcats__item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.jscriptz-subcats--preset-modern .jscriptz-subcats__link {
    color: #1f2937;
}

/* Classic: traditional e-commerce styling with defined borders */
.jscriptz-subcats--preset-classic .jscriptz-subcats__item {
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.2s ease-in-out;
}

.jscriptz-subcats--preset-classic .jscriptz-subcats__item:hover {
    border-color: #9ca3af;
}

.jscriptz-subcats--preset-classic .jscriptz-subcats__link {
    color: #374151;
}

/* Bold: high-contrast design with prominent shadows and hover effects */
.jscriptz-subcats--preset-bold .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-card-hover-background: #f8fafc;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 0.75rem;
    border: none;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.jscriptz-subcats--preset-bold .jscriptz-subcats__item:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.jscriptz-subcats--preset-bold .jscriptz-subcats__name {
    font-size: 1.6rem;
    font-weight: 700;
}

.jscriptz-subcats--preset-bold .jscriptz-subcats__link {
    color: #111827;
    transition: color 0.2s ease-in-out;
}

.jscriptz-subcats--preset-bold .jscriptz-subcats__link:hover {
    color: #2563eb;
}

/* Liquid Glass: Apple iOS-style glassmorphism */
.jscriptz-subcats--preset-liquid-glass .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.jscriptz-subcats--preset-liquid-glass .jscriptz-subcats__item:hover {
    transform: scale(1.02) translateY(-4px);
    background: rgba(255, 255, 255, 0.35);
    box-shadow:
        0 12px 40px rgba(31, 38, 135, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.jscriptz-subcats--preset-liquid-glass .jscriptz-subcats__link {
    color: #1e293b;
    font-weight: 500;
}

.jscriptz-subcats--preset-liquid-glass .jscriptz-subcats__link:hover {
    color: #0ea5e9;
}

/* Gradient: grey to white with accented border */
.jscriptz-subcats--preset-gradient .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    background:
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) padding-box,
        linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) border-box;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jscriptz-subcats--preset-gradient .jscriptz-subcats__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.jscriptz-subcats--preset-gradient .jscriptz-subcats__link {
    color: #4f46e5;
}

.jscriptz-subcats--preset-gradient .jscriptz-subcats__link:hover {
    color: #7c3aed;
}

/* Electric: blue tones with accentuated border and bright hover */
.jscriptz-subcats--preset-electric .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 0.5rem;
    border: 2px solid #3b82f6;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.1),
        0 4px 12px rgba(59, 130, 246, 0.15);
    transition: all 0.2s ease;
}

.jscriptz-subcats--preset-electric .jscriptz-subcats__item:hover {
    border-color: #2563eb;
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.4),
        0 0 40px rgba(59, 130, 246, 0.2),
        0 8px 24px rgba(59, 130, 246, 0.3);
    transform: scale(1.02);
}

.jscriptz-subcats--preset-electric .jscriptz-subcats__link {
    color: #1e40af;
    font-weight: 600;
}

.jscriptz-subcats--preset-electric .jscriptz-subcats__link:hover {
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

/* Marble: elegant black to white gradient with shine effect */
@keyframes marble-shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.jscriptz-subcats--preset-marble .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #d4af37;
    background:
        linear-gradient(
            135deg,
            #1a1a1a 0%,
            #3d3d3d 10%,
            #ffffff 20%,
            #2d2d2d 30%,
            #4a4a4a 40%,
            #f5f5f5 50%,
            #3d3d3d 60%,
            #ffffff 70%,
            #2d2d2d 80%,
            #4a4a4a 90%,
            #1a1a1a 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.jscriptz-subcats--preset-marble .jscriptz-subcats__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.jscriptz-subcats--preset-marble .jscriptz-subcats__item:hover::after {
    opacity: 1;
    animation: marble-shine 0.8s ease-out;
}

.jscriptz-subcats--preset-marble .jscriptz-subcats__item:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.jscriptz-subcats--preset-marble .jscriptz-subcats__link {
    color: #ffffff;
    font-weight: 600;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 255, 255, 0.3);
    letter-spacing: 0.025em;
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
    text-stroke: 0.5px rgba(0, 0, 0, 0.3);
}

.jscriptz-subcats--preset-marble .jscriptz-subcats__link:hover {
    color: #d4af37;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(212, 175, 55, 0.5);
}

/* Industrial: metal themed with grippy diamond plate texture */
.jscriptz-subcats--preset-industrial .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 4px;
    border: 2px solid #52525b;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(161, 161, 170, 0.1) 2px,
            rgba(161, 161, 170, 0.1) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 2px,
            rgba(161, 161, 170, 0.1) 2px,
            rgba(161, 161, 170, 0.1) 4px
        ),
        linear-gradient(
            180deg,
            #71717a 0%,
            #a1a1aa 15%,
            #d4d4d8 50%,
            #a1a1aa 85%,
            #71717a 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jscriptz-subcats--preset-industrial .jscriptz-subcats__item:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.35);
}

.jscriptz-subcats--preset-industrial .jscriptz-subcats__link {
    color: #27272a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.jscriptz-subcats--preset-industrial .jscriptz-subcats__link:hover {
    color: #fbbf24;
}

/* Rainbow: animated rainbow gradient border */
@keyframes rainbow-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.jscriptz-subcats--preset-rainbow .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 1rem;
    border: 3px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            90deg,
            #ff0000, #ff8000, #ffff00, #80ff00,
            #00ff00, #00ff80, #00ffff, #0080ff,
            #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000
        ) border-box;
    background-size: 100% 100%, 400% 100%;
    animation: rainbow-border 8s linear infinite;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jscriptz-subcats--preset-rainbow .jscriptz-subcats__item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.jscriptz-subcats--preset-rainbow .jscriptz-subcats__link {
    color: #374151;
    font-weight: 600;
    background: linear-gradient(
        90deg,
        #ff0000, #ff8000, #ffff00, #00ff00,
        #00ffff, #0000ff, #8000ff, #ff00ff
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-border 4s linear infinite;
}

.jscriptz-subcats--preset-rainbow .jscriptz-subcats__link:hover {
    animation-duration: 1s;
}

/* Psychedelic: trippy animated gradients */
@keyframes psychedelic-bg {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes psychedelic-hue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.jscriptz-subcats--preset-psychedelic .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 1.5rem;
    border: none;
    background:
        linear-gradient(
            45deg,
            #ff00ff 0%,
            #00ffff 25%,
            #ffff00 50%,
            #ff00ff 75%,
            #00ffff 100%
        );
    background-size: 400% 400%;
    animation: psychedelic-bg 6s ease infinite;
    box-shadow:
        0 0 20px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 0 60px rgba(255, 255, 0, 0.2);
    transition: transform 0.3s ease, border-radius 0.3s ease;
    padding: 4px;
}

.jscriptz-subcats--preset-psychedelic .jscriptz-subcats__item:hover {
    transform: scale(1.05) rotate(1deg);
    border-radius: 2rem;
    animation-duration: 2s;
}

.jscriptz-subcats--preset-psychedelic .jscriptz-subcats__image-wrapper {
    border-radius: calc(1.5rem - 8px);
    animation: psychedelic-hue 10s linear infinite;
}

.jscriptz-subcats--preset-psychedelic .jscriptz-subcats__item:hover .jscriptz-subcats__image-wrapper {
    animation-duration: 2s;
}

.jscriptz-subcats--preset-psychedelic .jscriptz-subcats__link {
    color: #f0abfc;
    font-weight: 700;
    text-shadow:
        0 0 10px rgba(240, 171, 252, 0.8),
        0 0 20px rgba(34, 211, 238, 0.6);
    letter-spacing: 0.05em;
}

.jscriptz-subcats--preset-psychedelic .jscriptz-subcats__link:hover {
    color: #22d3ee;
    text-shadow:
        0 0 10px rgba(34, 211, 238, 0.8),
        0 0 20px rgba(250, 204, 21, 0.6),
        0 0 30px rgba(255, 0, 255, 0.4);
}

/* Wood Grain: natural wood texture pattern */
.jscriptz-subcats--preset-wood-grain .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    --js-subcats-card-hover-background: rgba(222, 184, 135, 0.15);
    border-radius: 4px;
    border: 2px solid #5d4037;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(139, 90, 43, 0.1) 2px,
            rgba(139, 90, 43, 0.1) 4px
        ),
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 20px,
            rgba(101, 67, 33, 0.08) 20px,
            rgba(101, 67, 33, 0.08) 22px
        ),
        linear-gradient(
            90deg,
            #d7a86e 0%,
            #c9956c 10%,
            #deb887 20%,
            #c9956c 30%,
            #d7a86e 40%,
            #c4a574 50%,
            #deb887 60%,
            #c9956c 70%,
            #d7a86e 80%,
            #c4a574 90%,
            #deb887 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(93, 64, 55, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jscriptz-subcats--preset-wood-grain .jscriptz-subcats__item:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 20px rgba(93, 64, 55, 0.35);
}

.jscriptz-subcats--preset-wood-grain .jscriptz-subcats__link {
    color: #3e2723;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.jscriptz-subcats--preset-wood-grain .jscriptz-subcats__link:hover {
    color: #5d4037;
}

/* Polaroid: instant photo style with thick white border */
.jscriptz-subcats--preset-polaroid .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    border-radius: 2px;
    border: none;
    background: #ffffff;
    padding: 12px 12px 40px 12px;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: rotate(-1deg);
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__item:nth-child(even) {
    transform: rotate(1deg);
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__item:nth-child(3n) {
    transform: rotate(-2deg);
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__item:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.02);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.1);
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__image-wrapper {
    border-radius: 0;
    border: 1px solid #e5e5e5;
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__content {
    margin-top: 16px;
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__link {
    color: #1f2937;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 400;
    font-size: 0.9em;
}

.jscriptz-subcats--preset-polaroid .jscriptz-subcats__link:hover {
    color: #4b5563;
}

/* Chrome: shiny metallic reflective surface */
@keyframes chrome-shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.jscriptz-subcats--preset-chrome .jscriptz-subcats__item {
    --js-subcats-description-max-lines: 3;
    --js-subcats-content-padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #a1a1aa;
    background:
        linear-gradient(
            135deg,
            #e4e4e7 0%,
            #fafafa 10%,
            #a1a1aa 20%,
            #fafafa 30%,
            #d4d4d8 40%,
            #e4e4e7 50%,
            #fafafa 60%,
            #a1a1aa 70%,
            #d4d4d8 80%,
            #fafafa 90%,
            #e4e4e7 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.jscriptz-subcats--preset-chrome .jscriptz-subcats__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.jscriptz-subcats--preset-chrome .jscriptz-subcats__item:hover::after {
    opacity: 1;
    animation: chrome-shine 0.8s ease-out;
}

.jscriptz-subcats--preset-chrome .jscriptz-subcats__item:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

.jscriptz-subcats--preset-chrome .jscriptz-subcats__link {
    color: #27272a;
    font-weight: 700;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8),
        0 -1px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.15);
    text-stroke: 0.3px rgba(0, 0, 0, 0.15);
}

.jscriptz-subcats--preset-chrome .jscriptz-subcats__link:hover {
    color: #3f3f46;
}


.jscriptz-subcats__media-wrapper {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: #000;
    border: var(--js-subcats-image-border, none);
    transition: var(--js-subcats-transition-image, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out);
}


.jscriptz-subcats__item {
    margin: 0 !important;
}
/* === Jscriptz Subcats – Hyvä slider variant ============================= */

.jscriptz-subcats--slider .jscriptz-subcats__list--slider {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.jscriptz-subcats--slider .jscriptz-subcats__item {
    scroll-snap-align: start;
}

/* Optional: hide scrollbars for a cleaner look */
.jscriptz-subcats--slider .jscriptz-subcats__list--slider::-webkit-scrollbar {
    display: none;
}
.jscriptz-subcats--slider .jscriptz-subcats__list--slider {
    scrollbar-width: none; /* Firefox */
}

/* Slider controls under the track */
.jscriptz-subcats__slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.jscriptz-subcats__slider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db; /* light grey stroke */
    background: #ffffff;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.jscriptz-subcats__slider-button:hover {
    background-color: #f3f4f6;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

/* Pager dots created by x-snap-slider.auto-pager.
   Hyvä uses .marker for each dot. */
.jscriptz-subcats__slider-pager {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
}

.jscriptz-subcats__slider-pager .marker {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background-color: #e5e7eb;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.jscriptz-subcats__slider-pager .marker[aria-current="true"] {
    background-color: #2563eb; /* your logo blue */
    border-color: #2563eb;
    transform: scale(1.1);
}

/* Hyvä slider track: single row, scroll horizontally */
.jscriptz-subcats--slider .jscriptz-subcats__list--slider {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* inner padding so hover shadows don’t clip */
    padding: 12px 7px 18px 16px;
    margin: 0 0 0 8px;
}

/* Slides snap to start */
.jscriptz-subcats--slider .jscriptz-subcats__item {
    scroll-snap-align: start;
}

/* Optional: hide scrollbars */
.jscriptz-subcats--slider .jscriptz-subcats__list--slider::-webkit-scrollbar {
    display: none;
}
.jscriptz-subcats--slider .jscriptz-subcats__list--slider {
    scrollbar-width: none;
}

/* === Jscriptz Subcats Slider - Full Implementation ====================== */

/* Slider wrapper - contains arrows, track, and dots */
.jscriptz-subcats__slider-wrapper {
    position: relative;
    width: 100%;
}

/* Slider track - scrollable container for Alpine.js slider (Hyva) */
.jscriptz-subcats__slider-track {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.jscriptz-subcats__slider-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Vanilla.js slider (Luma) uses transform - needs overflow hidden */
.jscriptz-subcats__slider-track[data-slider-track] {
    overflow: hidden;
    scroll-snap-type: none;
}

/* Slider list - the moving container */
.jscriptz-subcats--slider .jscriptz-subcats__list--slider {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--js-subcats-slider-gap, var(--js-subcats-card-spacing, 20px));
    transition: transform 0.3s ease-out;
    padding: 12px 4px;
    margin: 0;
}

/* Individual slide sizing - responsive based on CSS variables */
.jscriptz-subcats--slider .jscriptz-subcats__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* Desktop: use the slides-per-view variable */
    width: calc((100% - (var(--js-subcats-slider-gap, 20px) * (var(--js-subcats-slides-desktop, 4) - 1))) / var(--js-subcats-slides-desktop, 4));
    min-width: 200px;
}

/* Tablet breakpoint */
@media (max-width: 1023px) {
    .jscriptz-subcats--slider .jscriptz-subcats__item {
        width: calc((100% - (var(--js-subcats-slider-gap, 20px) * (var(--js-subcats-slides-tablet, 2) - 1))) / var(--js-subcats-slides-tablet, 2));
    }
}

/* Mobile breakpoint */
@media (max-width: 639px) {
    .jscriptz-subcats--slider .jscriptz-subcats__item {
        width: calc((100% - (var(--js-subcats-slider-gap, 20px) * (var(--js-subcats-slides-mobile, 1) - 1))) / var(--js-subcats-slides-mobile, 1));
        min-width: 0;
    }
}

/* Navigation arrows */
.jscriptz-subcats__slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #374151;
}

.jscriptz-subcats__slider-arrow:hover:not(:disabled) {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.05);
    color: #111827;
}

.jscriptz-subcats__slider-arrow:focus {
    outline: none;
}

.jscriptz-subcats__slider-arrow:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.jscriptz-subcats__slider-arrow:disabled,
.jscriptz-subcats__slider-arrow.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.jscriptz-subcats__slider-arrow--prev {
    left: -22px;
}

.jscriptz-subcats__slider-arrow--next {
    right: -22px;
}

/* Arrow icons */
.jscriptz-subcats__slider-arrow svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* Mobile arrow positioning */
@media (max-width: 768px) {
    .jscriptz-subcats__slider-arrow {
        width: 36px;
        height: 36px;
    }

    .jscriptz-subcats__slider-arrow svg {
        width: 16px;
        height: 16px;
    }

    .jscriptz-subcats__slider-arrow--prev {
        left: 8px;
    }

    .jscriptz-subcats__slider-arrow--next {
        right: 8px;
    }
}

/* Hyva slider nav container - position arrows on sides */
.jscriptz-subcats__slider-nav {
    position: absolute;
    top: 42%;
    left: -20px;
    right: -20px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.jscriptz-subcats__slider-nav .jscriptz-subcats__slider-arrow {
    position: static;
    transform: none;
    pointer-events: auto;
}

.jscriptz-subcats__slider-nav .jscriptz-subcats__slider-arrow:hover:not(:disabled) {
    transform: scale(1.05);
}

/* Pagination dots */
.jscriptz-subcats__slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 8px 0;
}

.jscriptz-subcats__slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jscriptz-subcats__slider-dot:hover {
    background: #9ca3af;
    transform: scale(1.15);
}

.jscriptz-subcats__slider-dot:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.jscriptz-subcats__slider-dot.is-active,
.jscriptz-subcats__slider-dot[aria-current="true"] {
    background: var(--js-subcats-link-color, #2563eb);
    transform: scale(1.2);
}

/* Fade transition variant */
.jscriptz-subcats--slider.jscriptz-subcats--transition-fade .jscriptz-subcats__list--slider {
    position: relative;
}

.jscriptz-subcats--slider.jscriptz-subcats--transition-fade .jscriptz-subcats__item {
    transition: opacity 0.3s ease;
}

/* Ensure slider doesn't interfere with hover effects */
.jscriptz-subcats--slider .jscriptz-subcats__item:hover {
    z-index: 5;
}

/* Touch-friendly: larger tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .jscriptz-subcats__slider-arrow {
        width: 48px;
        height: 48px;
    }

    .jscriptz-subcats__slider-dot {
        width: 14px;
        height: 14px;
    }
}