/*
AiST TECH Product Design Consistency
Applies identically to Korean / English / Japanese / Simplified Chinese.

Purpose
1) Product overview: 4 cards in one row on desktop
2) Product detail top visuals: FLIES C / MiUS D / DANO T share the same card style
3) Preserve the existing responsive site structure; no separate mobile page is introduced
*/

/* ==========================================================
   Product overview: FLIES C / MiUS D / DANO T / Software·SDK
   ========================================================== */
.product-card {
    width: calc(25% - 18px) !important;
    min-width: 0 !important;
}

.product-card-body {
    padding: 22px 20px 26px 20px !important;
}

/* Keep the existing card character while aligning all languages. */
.product-card {
    border-radius: 0;
}

/* Tablet / narrower desktop: 2 columns */
@media screen and (max-width: 1180px) {
    .product-card {
        width: calc(50% - 12px) !important;
    }

    .product-card-body {
        padding: 22px 22px 26px 22px !important;
    }
}

/* Existing responsive site: one column on narrow screens */
@media screen and (max-width: 640px) {
    .product-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================
   Product detail top image / drawing cards
   FLIES C / MiUS D / DANO T — same visual language
   ========================================================== */
.product-detail-visual-box {
    border: 1px solid #d7e2eb !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(31, 78, 121, 0.08) !important;
    overflow: hidden !important;
}

/* The title strip remains the same on every product page. */
.product-detail-visual-title {
    background: #f7f8fa !important;
    border-bottom: 1px solid #e2e5e9 !important;
}

/* Click-to-enlarge badge */
.product-detail-click-badge {
    border-radius: 14px !important;
}

/* Enlarged-image modal */
.product-detail-modal-content {
    border-radius: 14px !important;
}

/* Maintain the current responsive behavior; only visual consistency changes. */
@media screen and (max-width: 900px) {
    .product-detail-visual-box {
        box-shadow: 0 6px 16px rgba(31, 78, 121, 0.07) !important;
    }
}