<?php
$currentUrl = $_SERVER['REQUEST_URI'] ?? '';

$header_title = !empty($category_data['name'])
    ? $category_data['name']
    : (!empty($therapy) ? $therapy : 'Our Product Range');

$header_desc = !empty($category_data['hero_desc_2'])
    ? $category_data['hero_desc_2']
    : 'High-quality sterile formulations manufactured under stringent international quality standards to ensure safety, stability, and patient well-being.';

$header_img = !empty($category_data['image'])
    ? $base_url . $category_data['image']
    : $base_url . '/assets/images/main/vials-hero.png';

$whatsapp_msg = urlencode('Hello, I am interested in exploring your product range.');

function product_icon($type) {
    $icons = [
        'arrow' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.2 5.3 20 12l-6.8 6.7-1.4-1.4 4.4-4.3H4v-2h12.2l-4.4-4.3 1.4-1.4Z"/></svg>',
        'grid' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"/></svg>',
        'vial' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2h6v2h-1v5.2l4.4 7.6A3.5 3.5 0 0 1 15.4 22H8.6a3.5 3.5 0 0 1-3-5.2L10 9.2V4H9V2Zm3 8.1-4.7 8.1A1.5 1.5 0 0 0 8.6 20h6.8a1.5 1.5 0 0 0 1.3-1.8L12 10.1Z"/></svg>',
        'shield' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 5.4v5.8c0 5 3.4 9.7 8 10.8 4.6-1.1 8-5.8 8-10.8V5.4L12 2Zm-1 13.4-3.4-3.4L9 10.6l2 2 4.4-4.4 1.4 1.4-5.8 5.8Z"/></svg>',
        'search' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.8 4a6.8 6.8 0 1 0 0 13.6 6.8 6.8 0 0 0 0-13.6Zm0 2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Zm5.6 10 4.1 4.1-1.4 1.4-4.1-4.1 1.4-1.4Z"/></svg>',
        'filter' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18v2H3V5Zm4 6h10v2H7v-2Zm3 6h4v2h-4v-2Z"/></svg>',
        'pdf' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 14h2a2 2 0 0 0 0-4H8v4Zm1-3h1a1 1 0 0 1 0 2H9v-2Zm4 3h1.5a2.5 2.5 0 0 0 0-5H13v5Zm1-4h.5a1.5 1.5 0 0 1 0 3H14v-3Z"/></svg>',
        'whatsapp' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.1 2a9.8 9.8 0 0 0-8.5 14.7L2.3 22l5.4-1.4A9.8 9.8 0 1 0 12.1 2Zm0 2a7.8 7.8 0 0 1 0 15.6 7.7 7.7 0 0 1-3.9-1l-.4-.2-2.7.7.7-2.6-.3-.4A7.8 7.8 0 0 1 12.1 4Zm-3 4.2c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3 1 2.5c.1.2 1.7 2.7 4.2 3.6 2 .8 2.4.5 2.8.5.4-.1 1.3-.6 1.5-1.1.2-.5.2-1 .1-1.1l-.5-.3-1.5-.7c-.2-.1-.4-.1-.6.2l-.7.9c-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2-1.2-.8-.7-1.3-1.6-1.5-1.9-.2-.3 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.7-1.6c-.2-.4-.4-.4-.6-.4h-.2Z"/></svg>',
        'box' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.2L6.2 7 12 9.8 17.8 7 12 4.2ZM5 8.6v7.6l6 3v-7.6l-6-3Zm14 0-6 3v7.6l6-3V8.6Z"/></svg>'
    ];

    return $icons[$type] ?? $icons['arrow'];
}
?>

<section class="product-header-section section-sm" aria-labelledby="productArchiveTitle">
    <div class="site-container product-header-grid">
        <div class="product-header-copy">
            <nav class="breadcrumbs" aria-label="Breadcrumb">
                <a href="<?= $base_url ?>/">Home</a>
                <span class="separator">/</span>
                <a href="<?= $base_url ?>/products">Products</a>
                <span class="separator">/</span>
                <span><?= htmlspecialchars($header_title, ENT_QUOTES, 'UTF-8') ?></span>
            </nav>

            <h1 id="productArchiveTitle"><?= htmlspecialchars($header_title, ENT_QUOTES, 'UTF-8') ?></h1>
            <p><?= htmlspecialchars($header_desc, ENT_QUOTES, 'UTF-8') ?></p>
        </div>

        <div class="product-header-graphic" aria-hidden="true">
            <img
                src="<?= htmlspecialchars($header_img, ENT_QUOTES, 'UTF-8') ?>"
                width="420"
                height="260"
                alt=""
                loading="eager"
                decoding="async"
                fetchpriority="high"
            >
        </div>
    </div>
</section>

<section class="product-listing-section section section-surface">
    <div class="site-container product-layout">
        <aside class="product-sidebar" aria-label="Product filters">
            <div class="sidebar-inner">
                <nav class="sidebar-card card card-pad" aria-label="Product categories">
                    <h2>Product Category</h2>

                    <div class="sidebar-menu-list">
                        <a href="<?= $base_url ?>/products" class="<?= (!isset($_GET['cat']) || empty($_GET['cat'])) && (!isset($_GET['therapy']) || empty($_GET['therapy'])) ? 'active-link' : '' ?>">
                            <span><?= product_icon('grid') ?> All Products</span>
                            <?= product_icon('arrow') ?>
                        </a>

                        <?php if (!empty($categories)): ?>
                            <?php foreach ($categories as $slug => $cat): ?>
                                <?php $is_active_cat = isset($_GET['cat']) && $_GET['cat'] === $slug; ?>
                                <a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="<?= $is_active_cat ? 'active-link' : '' ?>">
                                    <span><?= product_icon('vial') ?> <?= htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8') ?></span>
                                    <?= product_icon('arrow') ?>
                                </a>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </nav>

                <nav class="sidebar-card card card-pad" aria-label="Therapeutic categories">
                    <h2>Therapeutic Category</h2>

                    <div class="sidebar-menu-list sidebar-scroll-list">
                        <?php if (!empty($therapeutics)): ?>
                            <?php foreach ($therapeutics as $t_item): ?>
                                <?php
                                $t_name = is_array($t_item) ? ($t_item['name'] ?? '') : $t_item;
                                if (empty($t_name)) continue;

                                $t_slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $t_name), '-'));
                                $target_link = isset($_GET['cat']) && !empty($_GET['cat'])
                                    ? $base_url . '/product-category/' . htmlspecialchars($_GET['cat'], ENT_QUOTES, 'UTF-8') . '/' . $t_slug
                                    : $base_url . '/therapeutic/' . $t_slug;

                                $is_active_therapy = isset($therapy) && strtolower($therapy) === strtolower($t_name);
                                ?>

                                <a href="<?= $target_link ?>" class="<?= $is_active_therapy ? 'active-link' : '' ?>">
                                    <span><?= product_icon('shield') ?> <?= htmlspecialchars($t_name, ENT_QUOTES, 'UTF-8') ?></span>
                                    <?= product_icon('arrow') ?>
                                </a>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </nav>
            </div>
        </aside>

        <div class="product-content">
            <div class="product-toolbar">
                <p>
                    Showing <strong><?= isset($display_products) ? count($display_products) : 0 ?></strong> products
                </p>

                <div class="product-search">
                    <label class="sr-only" for="innerProductSearch">Search in this category</label>
                    <input type="search" id="innerProductSearch" placeholder="Search in this category...">
                    <?= product_icon('search') ?>
                </div>
            </div>

            <div class="product-grid" id="productsGridContainer">
                <?php if (!empty($display_products)): ?>
                    <?php foreach ($display_products as $prod): ?>
                        <article class="product-card product-card-item" data-product-card>
                            <a href="<?= $base_url ?>/product/<?= htmlspecialchars($prod['slug'], ENT_QUOTES, 'UTF-8') ?>">
                                <div class="product-media">
                                    <img
                                        src="<?= $base_url . (!empty($prod['image']) ? $prod['image'] : '/assets/images/products/no-product.webp') ?>"
                                        width="360"
                                        height="270"
                                        alt="<?= htmlspecialchars($prod['title'], ENT_QUOTES, 'UTF-8') ?>"
                                        loading="lazy"
                                        decoding="async"
                                    >
                                </div>

                                <div class="product-body">
                                    <h2 class="product-title product-title-target">
                                        <?= htmlspecialchars($prod['title'], ENT_QUOTES, 'UTF-8') ?>
                                    </h2>

                                    <p class="product-desc">
                                        <?= !empty($prod['seo_desc'])
                                            ? htmlspecialchars($prod['seo_desc'], ENT_QUOTES, 'UTF-8')
                                            : 'High-potency sterile formulation for critical patient therapeutic management systems.' ?>
                                    </p>

                                    <span class="product-link">
                                        View <span>Details</span>
                                        <?= product_icon('arrow') ?>
                                    </span>
                                </div>
                            </a>
                        </article>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-products card card-pad">
                        <?= product_icon('box') ?>
                        <p>No specific items match the filtered criteria.</p>
                    </div>
                <?php endif; ?>
            </div>

            <?php if (isset($total_pages) && $total_pages > 1): ?>
                <nav class="pagination" aria-label="Product pagination">
                    <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                        <?php
                        if (isset($_GET['cat']) && !empty($_GET['cat'])) {
                            $url_slug = htmlspecialchars(strip_tags($_GET['cat']), ENT_QUOTES, 'UTF-8');
                            $page_link = ($i === 1)
                                ? $base_url . '/product-category/' . $url_slug
                                : $base_url . '/product-category/' . $url_slug . '/page/' . $i . '/';
                        } elseif (isset($_GET['therapy']) && !empty($_GET['therapy'])) {
                            $therapy_slug = htmlspecialchars(strip_tags($_GET['therapy']), ENT_QUOTES, 'UTF-8');
                            $page_link = ($i === 1)
                                ? $base_url . '/therapeutic/' . $therapy_slug
                                : $base_url . '/therapeutic/' . $therapy_slug . '/page/' . $i . '/';
                        } else {
                            $page_link = ($i === 1)
                                ? $base_url . '/products'
                                : $base_url . '/products/page/' . $i . '/';
                        }
                        ?>

                        <a
                            href="<?= htmlspecialchars($page_link, ENT_QUOTES, 'UTF-8') ?>"
                            class="<?= $p === $i ? 'active' : '' ?>"
                            <?= $p === $i ? 'aria-current="page"' : '' ?>
                        >
                            <?= $i ?>
                        </a>
                    <?php endfor; ?>
                </nav>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php if (!empty($seo_data)): ?>
<section class="seo-content-block section section-surface" aria-labelledby="seoContentTitle">
    <div class="site-container-sm">
        <?php if (isset($seo_data['heading']) || isset($seo_data['intro_p1']) || isset($seo_data['intro'])): ?>
            <article class="seo-intro-card card card-pad">
                <?php if (isset($seo_data['heading'])): ?>
                    <div class="content-title-row">
                        <span class="form-accent-dash" aria-hidden="true"></span>
                        <h2 id="seoContentTitle"><?= htmlspecialchars($seo_data['heading'], ENT_QUOTES, 'UTF-8') ?></h2>
                    </div>
                <?php endif; ?>

                <?php if (isset($seo_data['intro_p1'])): ?>
                    <p><?= htmlspecialchars($seo_data['intro_p1'], ENT_QUOTES, 'UTF-8') ?></p>

                    <div class="seo-intro-grid">
                        <?php if (isset($seo_data['intro_p2'])): ?>
                            <p><?= htmlspecialchars($seo_data['intro_p2'], ENT_QUOTES, 'UTF-8') ?></p>
                        <?php endif; ?>
                        <?php if (isset($seo_data['intro_p3'])): ?>
                            <p><?= htmlspecialchars($seo_data['intro_p3'], ENT_QUOTES, 'UTF-8') ?></p>
                        <?php endif; ?>
                    </div>
                <?php elseif (isset($seo_data['intro']) && is_array($seo_data['intro'])): ?>
                    <?php foreach ($seo_data['intro'] as $paragraph): ?>
                        <p><?= htmlspecialchars($paragraph, ENT_QUOTES, 'UTF-8') ?></p>
                    <?php endforeach; ?>
                <?php endif; ?>
            </article>
        <?php endif; ?>

        <div class="tabs seo-tabs" role="tablist" aria-label="Product information tabs">
            <?php if (!empty($seo_data['capabilities'])): ?>
                <button class="tab-button is-active" type="button" data-tab-target="panel-capabilities" aria-selected="true">
                    Capabilities
                </button>
            <?php endif; ?>

            <?php if (!empty($seo_data['therapeutics_blocks'])): ?>
                <button class="tab-button <?= empty($seo_data['capabilities']) ? 'is-active' : '' ?>" type="button" data-tab-target="panel-therapeutic" aria-selected="<?= empty($seo_data['capabilities']) ? 'true' : 'false' ?>">
                    Therapeutic Spectrum
                </button>
            <?php endif; ?>

            <?php if (!empty($seo_data['reasons']) || !empty($seo_data['contract_manufacturing'])): ?>
                <button class="tab-button <?= (empty($seo_data['capabilities']) && empty($seo_data['therapeutics_blocks'])) ? 'is-active' : '' ?>" type="button" data-tab-target="panel-trust" aria-selected="<?= (empty($seo_data['capabilities']) && empty($seo_data['therapeutics_blocks'])) ? 'true' : 'false' ?>">
                    Why Choose Us
                </button>
            <?php endif; ?>
        </div>

        <?php if (!empty($seo_data['capabilities'])): ?>
            <div class="tab-panel is-active" id="panel-capabilities">
                <div class="seo-panel card card-pad">
                    <h2>Technical Specification Summary</h2>

                    <div class="capability-grid">
                        <?php foreach ($seo_data['capabilities'] as $key => $val): ?>
                            <article class="capability-item">
                                <small><?= htmlspecialchars($key, ENT_QUOTES, 'UTF-8') ?></small>
                                <strong><?= htmlspecialchars($val, ENT_QUOTES, 'UTF-8') ?></strong>
                            </article>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        <?php if (!empty($seo_data['therapeutics_blocks'])): ?>
            <div class="tab-panel <?= empty($seo_data['capabilities']) ? 'is-active' : '' ?>" id="panel-therapeutic">
                <div class="seo-panel card card-pad">
                    <?php if (isset($seo_data['therapeutics_heading'])): ?>
                        <h2><?= htmlspecialchars($seo_data['therapeutics_heading'], ENT_QUOTES, 'UTF-8') ?></h2>
                    <?php endif; ?>

                    <?php if (isset($seo_data['therapeutics_desc'])): ?>
                        <p><?= htmlspecialchars($seo_data['therapeutics_desc'], ENT_QUOTES, 'UTF-8') ?></p>
                    <?php endif; ?>

                    <div class="therapeutic-block-grid">
                        <?php foreach ($seo_data['therapeutics_blocks'] as $block): ?>
                            <article class="therapeutic-block-card card card-pad">
                                <h3><?= htmlspecialchars($block['title'], ENT_QUOTES, 'UTF-8') ?></h3>

                                <div class="category-chips">
                                    <?php foreach ($block['molecules'] as $molecule): ?>
                                        <span class="badge"><?= htmlspecialchars($molecule, ENT_QUOTES, 'UTF-8') ?></span>
                                    <?php endforeach; ?>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        <?php if (!empty($seo_data['reasons']) || !empty($seo_data['contract_manufacturing'])): ?>
            <div class="tab-panel <?= (empty($seo_data['capabilities']) && empty($seo_data['therapeutics_blocks'])) ? 'is-active' : '' ?>" id="panel-trust">
                <div class="seo-panel card card-pad">
                    <?php if (!empty($seo_data['reasons'])): ?>
                        <h2><?= isset($seo_data['reasons_heading']) ? htmlspecialchars($seo_data['reasons_heading'], ENT_QUOTES, 'UTF-8') : 'Why Buyers Choose Sanjar Pharma' ?></h2>

                        <div class="reason-grid">
                            <?php foreach ($seo_data['reasons'] as $reason): ?>
                                <article class="reason-item">
                                    <?= product_icon('shield') ?>
                                    <span><?= htmlspecialchars($reason, ENT_QUOTES, 'UTF-8') ?></span>
                                </article>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>

                    <?php if (!empty($seo_data['contract_manufacturing'])): ?>
                        <h2>Contract Manufacturing Services</h2>

                        <div class="contract-list">
                            <?php foreach ($seo_data['contract_manufacturing'] as $contract_p): ?>
                                <p><?= product_icon('arrow') ?> <?= htmlspecialchars($contract_p, ENT_QUOTES, 'UTF-8') ?></p>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        <?php endif; ?>

        <?php if (!empty($seo_data['Quality_blocks'])): ?>
            <div class="quality-panel card card-pad">
                <h2>Quality & Process Monitoring</h2>

                <div class="quality-grid">
                    <?php foreach ($seo_data['Quality_blocks'] as $q_block): ?>
                        <article class="quality-card card card-pad">
                            <h3><?= htmlspecialchars($q_block['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                            <p><?= htmlspecialchars($q_block['desc'], ENT_QUOTES, 'UTF-8') ?></p>
                        </article>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>

        <?php if (!empty($seo_data['faqs'])): ?>
            <div class="faq-panel card card-pad">
                <h2>Frequently Asked Questions</h2>

                <div class="accordion">
                    <?php foreach ($seo_data['faqs'] as $index => $faq): ?>
                        <article class="accordion-item">
                            <button class="accordion-button" type="button" data-accordion-toggle aria-expanded="false">
                                <span><?= htmlspecialchars($faq['q'], ENT_QUOTES, 'UTF-8') ?></span>
                                <span aria-hidden="true">+</span>
                            </button>
                            <div class="accordion-panel">
                                <?= htmlspecialchars($faq['a'], ENT_QUOTES, 'UTF-8') ?>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<div class="mobile-sticky-btn-bar">
    <button class="mobile-action-btn" type="button" id="openMobileFilters">
        <?= product_icon('filter') ?> Filters
    </button>

    <a href="<?= $base_url ?>/assets/docs/portfolio.pdf" download class="mobile-action-btn">
        <?= product_icon('pdf') ?> PDF
    </a>

    <a href="https://wa.me/916352986603?text=<?= $whatsapp_msg ?>" target="_blank" rel="noopener noreferrer" class="mobile-action-btn mobile-whatsapp-btn">
        <?= product_icon('whatsapp') ?> Chat
    </a>
</div>

<div class="filter-panel" id="mobileFilterPanel" hidden>
    <div class="filter-panel-backdrop" data-close-filter></div>

    <aside class="filter-drawer" aria-label="Mobile product filters">
        <div class="filter-drawer-head">
            <h2><?= product_icon('filter') ?> Filter Products</h2>
            <button type="button" data-close-filter aria-label="Close filters">×</button>
        </div>

        <div class="filter-drawer-body">
            <nav class="sidebar-card card card-pad" aria-label="Mobile product categories">
                <h2>Product Category</h2>

                <div class="sidebar-menu-list">
                    <a href="<?= $base_url ?>/products" class="<?= (!isset($_GET['cat']) || empty($_GET['cat'])) && (!isset($_GET['therapy']) || empty($_GET['therapy'])) ? 'active-link' : '' ?>">
                        <span><?= product_icon('grid') ?> All Products</span>
                        <?= product_icon('arrow') ?>
                    </a>

                    <?php if (!empty($categories)): ?>
                        <?php foreach ($categories as $slug => $cat): ?>
                            <?php $is_active_cat = isset($_GET['cat']) && $_GET['cat'] === $slug; ?>
                            <a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="<?= $is_active_cat ? 'active-link' : '' ?>">
                                <span><?= product_icon('vial') ?> <?= htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8') ?></span>
                                <?= product_icon('arrow') ?>
                            </a>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </nav>

            <nav class="sidebar-card card card-pad" aria-label="Mobile therapeutic categories">
                <h2>Therapeutic Category</h2>

                <div class="sidebar-menu-list">
                    <?php if (!empty($therapeutics)): ?>
                        <?php foreach ($therapeutics as $t_item): ?>
                            <?php
                            $t_name = is_array($t_item) ? ($t_item['name'] ?? '') : $t_item;
                            if (empty($t_name)) continue;

                            $t_slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $t_name), '-'));
                            $target_link = isset($_GET['cat']) && !empty($_GET['cat'])
                                ? $base_url . '/product-category/' . htmlspecialchars($_GET['cat'], ENT_QUOTES, 'UTF-8') . '/' . $t_slug
                                : $base_url . '/therapeutic/' . $t_slug;

                            $is_active_therapy = isset($therapy) && strtolower($therapy) === strtolower($t_name);
                            ?>

                            <a href="<?= $target_link ?>" class="<?= $is_active_therapy ? 'active-link' : '' ?>">
                                <span><?= product_icon('shield') ?> <?= htmlspecialchars($t_name, ENT_QUOTES, 'UTF-8') ?></span>
                                <?= product_icon('arrow') ?>
                            </a>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </nav>
        </div>
    </aside>
</div>

<style>
.product-header-section {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.product-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.product-header-copy {
  max-width: 840px;
}

.product-header-copy p {
  max-width: 72ch;
}

.product-header-graphic {
  justify-self: end;
}

.product-header-graphic img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.08));
}

.product-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.product-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-inner {
  display: grid;
  gap: 1rem;
}

.sidebar-card h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-menu-list {
  display: grid;
}

.sidebar-menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-menu-list a:last-child {
  border-bottom: 0;
}

.sidebar-menu-list a span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sidebar-menu-list svg,
.product-search svg,
.product-link svg,
.empty-products svg,
.reason-item svg,
.contract-list svg,
.mobile-action-btn svg,
.filter-drawer-head svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.sidebar-menu-list a:hover,
.sidebar-menu-list a.active-link {
  color: var(--primary);
}

.sidebar-menu-list a.active-link {
  padding-left: 0.75rem;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.sidebar-scroll-list {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.product-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.product-toolbar strong {
  color: var(--heading);
}

.product-search {
  position: relative;
  width: min(100%, 340px);
}

.product-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 2.6rem 0 0.9rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--heading);
  background: var(--input-bg);
}

.product-search svg {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.product-card {
  min-width: 0;
}

.product-card[hidden] {
  display: none;
}

.product-card a {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.product-card:hover .product-media img {
  transform: scale(1.04);
}

.product-media img {
  transition: transform var(--transition-normal);
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.empty-products {
  grid-column: 1 / -1;
  text-align: center;
}

.empty-products svg {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  color: var(--muted);
}

.content-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.content-title-row h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.8rem);
}

.form-accent-dash {
  width: 4px;
  height: 25px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary);
}

.seo-intro-card,
.quality-panel,
.faq-panel {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.seo-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 1rem;
}

.seo-tabs {
  margin-bottom: 1rem;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.seo-panel {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.seo-panel h2,
.quality-panel h2,
.faq-panel h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.8rem);
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.capability-item,
.reason-item,
.quality-card,
.therapeutic-block-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.capability-item {
  padding: 0.85rem 1rem;
}

.capability-item small {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.capability-item strong {
  color: var(--heading);
  font-size: 0.9rem;
}

.therapeutic-block-grid,
.reason-grid,
.quality-grid {
  display: grid;
  gap: var(--gap);
}

.therapeutic-block-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reason-grid,
.quality-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.category-chips .badge {
  white-space: normal;
  line-height: 1.4;
  text-align: left;
}

.reason-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.reason-item svg {
  flex: 0 0 auto;
  color: var(--primary);
}

.contract-list {
  display: grid;
  gap: 0.7rem;
}

.contract-list p {
  display: flex;
  gap: 0.55rem;
}

.mobile-sticky-btn-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  display: none;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
}

.mobile-action-btn {
  flex: 1;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--heading);
  background: var(--surface-2);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.mobile-whatsapp-btn {
  color: #fff;
  background: #25d366;
  border-color: #25d366;
}

.filter-panel[hidden] {
  display: none;
}

.filter-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.filter-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.filter-drawer {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(88vw, 380px);
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform var(--transition-fast);
}

.filter-panel.is-open .filter-drawer {
  transform: translateX(0);
}

.filter-drawer-head {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.filter-drawer-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
}

.filter-drawer-head button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--heading);
  background: var(--surface-2);
  font-size: 1.5rem;
}

.filter-drawer-body {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@media (max-width: 1180px) {
  .product-grid,
  .capability-grid,
  .therapeutic-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .product-header-grid,
  .product-layout {
    grid-template-columns: 1fr;
  }

  .product-header-graphic,
  .product-sidebar {
    display: none;
  }

  .mobile-sticky-btn-bar {
    display: flex;
  }

  .product-listing-section {
    padding-bottom: 5rem;
  }
}

@media (max-width: 575px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .product-toolbar {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .product-search {
    width: 100%;
  }

  .product-title {
    min-height: 42px;
    font-size: 0.82rem;
  }

  .product-desc {
    min-height: 40px;
    font-size: 0.78rem;
  }

  .product-media {
    padding: 0.5rem;
  }

  .product-media img {
    aspect-ratio: 1 / 0.85;
  }

  .product-link span {
    display: none;
  }

  .seo-intro-grid,
  .capability-grid,
  .therapeutic-block-grid,
  .reason-grid,
  .quality-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const searchBar = document.getElementById("innerProductSearch");
    const productCards = document.querySelectorAll("[data-product-card]");
    const filterPanel = document.getElementById("mobileFilterPanel");
    const openFilter = document.getElementById("openMobileFilters");

    if (searchBar && productCards.length) {
        searchBar.addEventListener("input", event => {
            const query = event.target.value.toLowerCase().trim();

            productCards.forEach(card => {
                const title = card.querySelector(".product-title-target");
                const text = title ? title.textContent.toLowerCase() : "";
                card.hidden = query !== "" && !text.includes(query);
            });
        });
    }

    document.querySelectorAll("[data-tab-target]").forEach(button => {
        button.addEventListener("click", () => {
            const targetId = button.dataset.tabTarget;

            document.querySelectorAll("[data-tab-target]").forEach(tab => {
                tab.classList.remove("is-active");
                tab.setAttribute("aria-selected", "false");
            });

            document.querySelectorAll(".tab-panel").forEach(panel => {
                panel.classList.remove("is-active");
            });

            button.classList.add("is-active");
            button.setAttribute("aria-selected", "true");

            const targetPanel = document.getElementById(targetId);
            if (targetPanel) {
                targetPanel.classList.add("is-active");
            }
        });
    });

    document.querySelectorAll("[data-accordion-toggle]").forEach(button => {
        button.addEventListener("click", () => {
            const item = button.closest(".accordion-item");
            const isOpen = item.classList.toggle("is-open");

            button.setAttribute("aria-expanded", isOpen ? "true" : "false");

            const icon = button.querySelector("span[aria-hidden='true']");
            if (icon) icon.textContent = isOpen ? "−" : "+";
        });
    });

    const closeFilterPanel = () => {
        if (!filterPanel) return;

        filterPanel.classList.remove("is-open");
        document.body.classList.remove("menu-open");

        window.setTimeout(() => {
            filterPanel.hidden = true;
        }, 220);
    };

    if (openFilter && filterPanel) {
        openFilter.addEventListener("click", () => {
            filterPanel.hidden = false;

            requestAnimationFrame(() => {
                filterPanel.classList.add("is-open");
                document.body.classList.add("menu-open");
            });
        });

        filterPanel.querySelectorAll("[data-close-filter]").forEach(button => {
            button.addEventListener("click", closeFilterPanel);
        });

        document.addEventListener("keydown", event => {
            if (event.key === "Escape" && !filterPanel.hidden) {
                closeFilterPanel();
            }
        });
    }
});
</script>