@media (max-width: 64rem) {
    .product-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-5);
    }

    .product-gallery {
        position: relative;
        top: 0;
    }

    .document-container {
        gap: var(--spacing-4);
    }

    .screenshot-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-container {
        grid-template-columns: 1fr;
    }

    .tag-cloud {
        position: relative;
        top: 0;
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-3);
    }
}

@media (max-width: 48rem) {
    :root {
        --header-height: 3rem;
    }

    .main-content {
        padding: var(--spacing-5) var(--spacing-3);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(247, 247, 246, 0.98);
        backdrop-filter: blur(0.75rem);
        -webkit-backdrop-filter: blur(0.75rem);
        padding: var(--spacing-3);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
        z-index: var(--z-overlay);
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .main-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .menu-item > a {
        padding: var(--spacing-2-5) var(--spacing-3);
        font-size: var(--text-base);
        border-radius: var(--radius-md);
        width: 100%;
        justify-content: space-between;
    }

    .sub-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        background: var(--color-accent-subtle);
        margin: 0 var(--spacing-3);
        border-radius: var(--radius-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base), padding var(--transition-base);
    }

    .menu-item:hover > .sub-menu {
        transform: none;
    }

    .sub-menu.displayBlock {
        max-height: 31.25rem;
        padding: var(--spacing-1-5);
    }

    .sub-menu li a {
        padding: var(--spacing-1-5) var(--spacing-3);
        font-size: var(--text-sm);
    }

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

    .product-title {
        font-size: var(--text-sm);
    }

    .product-summary {
        font-size: var(--text-2xs);
    }

    .product-meta {
        font-size: var(--text-2xs);
    }

    .article-card {
        grid-template-columns: 1fr;
    }

    .article-image {
        aspect-ratio: 16 / 9;
    }

    .article-content {
        padding: var(--spacing-3);
    }

    .screenshot-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-info .product-title {
        font-size: var(--text-2xl);
    }

    .product-container {
        gap: var(--spacing-5);
    }

    .product-description {
        padding: var(--spacing-4);
    }

    .product-gallery {
        order: -1;
    }

    .attribute {
        font-size: var(--text-xs);
        padding: var(--spacing-1) var(--spacing-2);
    }

    .attribute .label {
        min-width: 3.75rem;
    }

    .document-info {
        padding: var(--spacing-4);
    }

    .article-detail {
        padding: var(--spacing-4);
    }

    .article-detail .article-title {
        font-size: var(--text-2xl);
    }

    .float-buttons {
        right: var(--spacing-2);
        bottom: var(--spacing-4);
        gap: var(--spacing-1-5);
    }

    .float-button {
        width: 2rem;
        height: 2rem;
    }

    .float-button img {
        width: 1rem;
        height: 1rem;
    }

    .float-button .qrcode-container {
        right: calc(100% + var(--spacing-1-5));
        width: 7.5rem;
        height: 7.5rem;
    }

    .search-box {
        max-width: 100%;
    }
}

@media (max-width: 30rem) {
    .main-content {
        padding: var(--spacing-3) var(--spacing-2);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .product-image {
        aspect-ratio: 16 / 9;
    }

    .product-title {
        font-size: var(--text-xs);
        padding: var(--spacing-2) var(--spacing-2) var(--spacing-0-5);
    }

    .product-summary {
        font-size: var(--text-2xs);
        padding: 0 var(--spacing-2);
        -webkit-line-clamp: 1;
    }

    .product-meta {
        padding: var(--spacing-1) var(--spacing-2) var(--spacing-2);
        gap: var(--spacing-0-5);
    }

    .product-meta span {
        font-size: 0.625rem;
        padding: var(--spacing-0-5) var(--spacing-1);
    }

    .gallery-thumbs .thumb {
        width: 3rem;
        height: 2.25rem;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons button {
        width: 100%;
        text-align: center;
    }

    .article-meta {
        flex-direction: column;
        gap: var(--spacing-0-5);
    }

    .document-title {
        font-size: var(--text-xl);
    }

    .document-info {
        padding: var(--spacing-3);
    }

    .screenshot-list {
        grid-template-columns: 1fr;
    }

    .product-info .product-title {
        font-size: var(--text-xl);
    }

    .product-container {
        gap: var(--spacing-4);
    }

    .product-description {
        padding: var(--spacing-3);
    }

    .product-info {
        font-size: var(--text-sm);
    }

    .footer-content {
        padding: var(--spacing-3);
    }

    .tag-cloud {
        padding: var(--spacing-3);
    }

    .tag-cloud h2 {
        font-size: var(--text-xs);
    }
}