/* =========================================================
   Best Ever Medical — Products Catalogue Page
   Ported from the static site's products.html. Only loaded on
   whatever page contains [bem_products_catalogue] (see functions.php).
   Depends on custom.css for :root variables, header, footer, and the
   shared .inner-hero / .cta-section components (loaded as a
   dependency automatically via wp_enqueue_style) — only this page's
   own unique catalog/list/preview styles live here.
   ========================================================= */

/* --- Catalog section --- */
.catalog-section { padding: 80px 5vw 120px 5vw; background-color: var(--bg-cream); position: relative; z-index: 10; }
.catalog-container { max-width: 1400px; margin: 0 auto; }

.catalog-filters { display: flex; gap: 15px; justify-content: center; margin-bottom: 80px; flex-wrap: wrap; }
/* .filter-btn is a real <button> — background/border/color need
   !important to beat the theme's reset.css button defaults (the same
   collision hit repeatedly elsewhere in this build: FAQ toggle,
   submit button). Literal rgba() instead of var(--border-color): this
   codebase has repeatedly hit that custom property failing to resolve
   inside Elementor's shortcode widget DOM specifically. */
.filter-btn {
    background: transparent !important; border: 1px solid rgba(0,0,0,0.08) !important; color: var(--text-dark) !important;
    padding: 10px 24px; border-radius: 40px !important; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease;
}
.filter-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.filter-btn.active { background: var(--primary-dark) !important; color: var(--white) !important; border-color: var(--primary-dark) !important; }

.list-preview-container { display: flex; gap: 6vw; min-height: 80vh; position: relative; align-items: flex-start; }

/* Left: accordion list */
.product-list-col { flex: 1.2; display: flex; flex-direction: column; }

.product-list-item {
    padding: 30px 0; border-bottom: 1px solid rgba(0,0,0,0.08); cursor: pointer;
    opacity: 0.5; transition: opacity 0.5s ease;
    display: flex; flex-direction: column; text-decoration: none; color: var(--text-dark);
}
.product-list-item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }
.product-list-item:hover, .product-list-item.active { opacity: 1 !important; }

.pli-top { display: flex; align-items: baseline; gap: 40px; position: relative; }

.pli-index { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: #94a3b8; transition: color 0.4s; width: 25px; }
.product-list-item.active .pli-index { color: var(--primary); }

.pli-title-wrap { flex: 1; display: flex; justify-content: space-between; align-items: baseline; }

.pli-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3vw, 36px); line-height: 1; font-weight: 400; margin: 0; transition: font-size 0.6s cubic-bezier(0.77, 0, 0.175, 1), color 0.4s; }
.product-list-item.active .pli-title { font-size: clamp(40px, 5vw, 64px); color: var(--primary-dark); font-style: italic; }

.pli-brand { font-size: 12px; font-weight: 700; color: var(--card-gold); text-transform: uppercase; letter-spacing: 2px; opacity: 0.6; transition: opacity 0.4s; }
.product-list-item.active .pli-brand { opacity: 1; }

.pli-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s cubic-bezier(0.77, 0, 0.175, 1); padding-left: 65px; }
.product-list-item.active .pli-body { grid-template-rows: 1fr; margin-top: 20px; }

.pli-body-inner { overflow: hidden; }
.pli-desc { font-size: 16px; line-height: 1.6; color: #475569; margin: 0 0 20px 0; max-width: 90%; opacity: 0; transform: translateY(10px); transition: opacity 0.4s 0.2s, transform 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.1s; }
.product-list-item.active .pli-desc { opacity: 1; transform: translateY(0); }

.pli-explore { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s 0.3s, transform 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.2s; padding-bottom: 10px; }
.product-list-item.active .pli-explore { opacity: 1; transform: translateY(0); }
.pli-explore svg { width: 16px; height: 16px; stroke: currentColor; transition: transform 0.4s; }
.pli-explore:hover svg { transform: translateX(5px); }

.mobile-preview-img { display: none; }

/* Right: sticky preview image */
.product-preview-col { flex: 1; position: sticky; top: 120px; height: calc(100vh - 160px); min-height: 500px; border-radius: 24px; overflow: hidden; background: #e2e8f0; }

.preview-img-wrap {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--white);
    clip-path: inset(100% 0 0 0); transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1; display: flex; align-items: center; justify-content: center;
}
.preview-img-wrap.active { clip-path: inset(0 0 0 0); z-index: 2; }

.preview-img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    transform: scale(1.1); transition: transform 2.5s ease-out; display: block;
}
.preview-img-wrap.active .preview-img { transform: scale(1); }

/* --- Mobile / tablet --- */
@media (max-width: 1024px) {
    .list-preview-container { display: block; }
    .product-preview-col { display: none !important; }
    .product-list-col { width: 100%; display: block; }

    .product-list-item { opacity: 1 !important; padding: 30px 0 !important; }

    .pli-body { grid-template-rows: 1fr !important; padding-left: 0; margin-top: 20px; }
    .pli-desc { opacity: 1 !important; transform: none !important; max-width: 100%; }
    .pli-explore { opacity: 1 !important; transform: none !important; }

    .pli-top { gap: 20px; align-items: flex-start; }
    .pli-title-wrap { flex-direction: column; gap: 10px; }
    .pli-title { font-size: 38px !important; color: var(--text-dark) !important; font-style: normal !important; }

    .mobile-preview-wrap {
        display: flex; width: 100%; height: 350px; align-items: center; justify-content: center;
        border-radius: 20px; margin-bottom: 25px; background: var(--white);
        overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }
    .mobile-preview-img {
        width: 100% !important; height: 100% !important; object-fit: cover !important;
        /* scale(1.1) only buffers 5% on each edge — the parallax
           shift in products.js moves the image up to 30% vertically,
           which mathematically exceeds that buffer almost immediately
           (this was true of the original static site's own numbers
           too, not something introduced here). Paired with the
           reduced yPercent below, 1.45 gives a 22.5% buffer on each
           edge — safely more than the 20% max shift, with margin. */
        transform: scale(1.45);
        display: block;
    }
}

@media (max-width: 768px) {
    .catalog-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
    .catalog-filters::-webkit-scrollbar { display: none; }
    .filter-btn { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }
    .mobile-preview-wrap { height: 280px; }
    .pli-title { font-size: 32px !important; }
}