/* ============================================================
 * JustOrder Categories v2.0.0
 * Horizontal category bar + fixed full-viewport popup previews.
 * Visual style mirrors the Categories Filter with Popups design.
 * ============================================================ */

/* ── RESET (scoped to plugin) ───────────────── */
.jocw-cats-root,
.jocw-cats-root *,
.jocw-cats-root *::before,
.jocw-cats-root *::after {
    box-sizing: border-box;
}

/* ── THEME TOKENS ──────────────────────────── */
.jocw-cats-root {
    --jocw-bg: #ffffff;
    --jocw-border: #e5e7eb;           /* gray-200 */
    --jocw-text: #374151;             /* gray-700 */
    --jocw-text-strong: #000000;
    --jocw-text-muted: #6b7280;       /* gray-500 */
    --jocw-surface-hover: #f3f4f6;    /* gray-100 */
    --jocw-card-hover: #f9fafb;       /* gray-50 */
    --jocw-icon: #4b5563;             /* gray-600 */
    /* --jocw-accent is set on :root by the plugin (ACF primary_colour, fallback #111).
       This line provides a safety fallback in case that inline style didn't load. */
    --jocw-accent: var(--jocw-accent, #111111);

    position: relative;
    width: 100%;
    background: var(--jocw-bg);
    font-family: inherit;
    color: var(--jocw-text);
}

/* ── CATEGORY BAR ──────────────────────────── */
.jocw-cats-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--jocw-border);
    background: var(--jocw-bg);
}

.jocw-cats-scroll {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: transparent;
    border: none;
    color: var(--jocw-icon);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.jocw-cats-scroll:hover { background: var(--jocw-surface-hover); }
.jocw-cats-scroll:focus-visible { outline: 2px solid var(--jocw-accent); outline-offset: 2px; }
.jocw-cats-scroll[disabled] { opacity: .25; cursor: default; pointer-events: none; }
.jocw-cats-scroll svg { width: 20px; height: 20px; }

.jocw-cats-track {
    flex: 1;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
}
.jocw-cats-track::-webkit-scrollbar { display: none; height: 0; }

.jocw-cat-trigger {
    flex-shrink: 0;
    position: relative;
    padding: 12px 8px;
    border: none;
    background: transparent;
    color: var(--jocw-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color .15s ease;
}
.jocw-cat-trigger:hover { color: var(--jocw-text-strong); }
.jocw-cat-trigger:focus-visible { outline: none; color: var(--jocw-text-strong); }
.jocw-cat-trigger[aria-expanded="true"] { color: var(--jocw-text-strong); }

.jocw-cat-label { white-space: nowrap; display: inline-block; }

.jocw-cat-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--jocw-accent);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.jocw-cat-trigger[aria-expanded="true"] .jocw-cat-underline { opacity: 1; }

/* ── POPUP (fixed to viewport, covers it entirely) ───── */
.jocw-popup[hidden] { display: none !important; }

.jocw-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--jocw-bg);
    z-index: 100000;
    animation: jocw-fade-in .18s ease-out;
}
@keyframes jocw-fade-in { from { opacity: 0; } to { opacity: 1; } }

.jocw-popup-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.jocw-popup-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 32px;
    position: relative;
}

/* Close button (X) — subtle, keeps the minimal feel of the reference */
.jocw-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--jocw-icon);
    cursor: pointer;
    border-radius: 9999px;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}
.jocw-popup-close:hover { background: var(--jocw-surface-hover); color: var(--jocw-text-strong); }
.jocw-popup-close:focus-visible { outline: 2px solid var(--jocw-accent); outline-offset: 2px; }
.jocw-popup-close svg { width: 22px; height: 22px; }

.jocw-popup-title {
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--jocw-text-strong);
    margin: 0 0 32px;
    padding-right: 56px;
    letter-spacing: -0.01em;
}

.jocw-popup-empty {
    color: var(--jocw-text-muted);
    font-size: 1rem;
    margin: 24px 0 32px;
}

.jocw-popup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
@media (min-width: 768px)  { .jocw-popup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jocw-popup-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── PRODUCT CARD ──────────────────────────── */
.jocw-product-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--jocw-border);
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.jocw-product-card:hover {
    background: var(--jocw-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    text-decoration: none;
}
.jocw-product-card:focus-visible {
    outline: 2px solid var(--jocw-accent);
    outline-offset: 2px;
}

.jocw-product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--jocw-surface-hover);
}
.jocw-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jocw-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.jocw-product-name {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--jocw-text-strong);
    margin: 0;
    /* Clamp to 2 lines to keep cards aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jocw-product-desc {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--jocw-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jocw-product-price {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--jocw-text-strong);
    margin: 4px 0 0;
    margin-top: auto;
    line-height: 1.4;
}
.jocw-product-price .woocommerce-Price-amount { font-weight: 600; color: inherit; }
.jocw-product-price del { opacity: .5; margin-right: 8px; font-weight: 400; text-decoration: line-through; }
.jocw-product-price ins { text-decoration: none; background: transparent; color: inherit; }

/* ── FOOTER / SEE ALL BUTTON ───────────────── */
.jocw-popup-footer {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.jocw-see-all {
    display: inline-block;
    padding: 24px 48px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--jocw-text-strong);
    background: transparent;
    border: 1px solid var(--jocw-border);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.jocw-see-all:hover {
    background: var(--jocw-surface-hover);
    border-color: #d1d5db;
    color: var(--jocw-text-strong);
    text-decoration: none;
}
.jocw-see-all:focus-visible {
    outline: 2px solid var(--jocw-accent);
    outline-offset: 2px;
}

/* ── BODY SCROLL LOCK ──────────────────────── */
body.jocw-popup-open {
    overflow: hidden;
}

/* ── MOBILE ────────────────────────────────── */
@media (max-width: 640px) {
    .jocw-popup-container { padding: 32px 20px; }
    .jocw-popup-title     { font-size: 1.75rem; margin-bottom: 24px; padding-right: 52px; }
    .jocw-popup-close     { top: 14px; right: 14px; }
    .jocw-see-all         { padding: 18px 32px; font-size: 1rem; width: 100%; text-align: center; }
    .jocw-cats-bar        { padding: 10px 12px; }
}