/* ==========================================================================
   index.php のページ固有CSS
   ========================================================================== */

    html {
        scroll-padding-top: 100px;
    }
    #product-list-heading {
        scroll-margin-top: 100px;
    }

    body {
        color: #2B2B2B;
        background-color: #FFFFFF;
        font-family: 'Noto Sans JP', sans-serif;
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Accessibility Focus Ring */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
        outline: 2px solid #3F6654;
        outline-offset: 2px;
    }

    /* Card Hover Transition */
    .product-card {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none;
        color: inherit;
    }
    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px -8px rgba(63, 102, 84, 0.12);
    }
    .product-card img[id^="card-img-"] {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: contain;
        object-position: center;
    }

    /* Fade Animation for Filtered Items */
    .fade-in-item {
        animation: fadeIn 0.35s ease-out forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* SP: 絞り込みドロワー */
    .filter-drawer-backdrop {
        display: none;
    }

    @media (max-width: 1023px) {
        .product-filter-panel {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 60;
            width: min(20rem, 88vw);
            height: 100%;
            max-height: 100dvh;
            overflow-y: auto;
            padding: 1rem;
            background: #F7F8F6;
            transform: translateX(-105%);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 8px 0 24px -8px rgba(0, 0, 0, 0.15);
        }
        .product-filter-panel.is-open {
            transform: translateX(0);
        }
        .filter-drawer-backdrop {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 55;
            background: rgba(43, 43, 43, 0.4);
        }
        .filter-drawer-backdrop[hidden] {
            display: none;
        }
        body.filter-drawer-open {
            overflow: hidden;
        }
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #F7F8F6;
    }
    ::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #3F6654;
    }