/* POS custom styles */

/* 版面：左側產品區為彈性，右側購物車維持固定寬度以還原比例 */
.pos-container {
    display: grid;
    grid-template-columns: 1fr 380px; /* 左:彈性 / 右:固定寬度 (可視需求調整) */
    gap: 1rem;
}

/* 只放大左側產品區的商品網格及卡片內容，避免影響搜尋/篩選等控制與右側購物車 */
.pos-left .pos-products, .pos-left .pos-products * {
    font-size: 110% !important;
}

/* 右側購物車恢復原本比例大小 */
.pos-right, .pos-right * {
    font-size: 100% !important;
}

/* 保持某些元件的布局節點大小穩定（可視需要微調） */
.pos-container .pos-left, .pos-container .pos-right {
    box-sizing: border-box;
}

/* 商品網格：一行顯示 4 個 */
.pos-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: start;
}

/* 商品卡片基礎樣式（由 pos.js 動態產生的卡片請套用 .product-card） */
.pos-products .product-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 圖片容器：使用 padding-top 保持比例 (4:3)，避免因父容器高度影響圖片變形 */
.pos-products .product-card .product-image {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: #fff;
}

/* 圖片本身使用絕對定位並 object-fit: contain 保持等比例且不被壓扁 */
.pos-products .product-card .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* use 'cover' if you prefer filling and cropping */
    display: block;
}

.pos-products .product-card .product-body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
}

.pos-products .product-card .product-title {
    font-weight: 600;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-products .product-card .product-price {
    color: #0d6efd;
    font-weight: 700;
    font-size: 1.15rem;
}

/* product-card body layout: keep price and action aligned */
.pos-products .product-card .product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* 支援舊版 DOM：當 img 自身使用 .product-image class（無包覆容器）時的樣式覆寫 */
.pos-products .product-card > img.product-image {
    /* 取消容器相關樣式並讓圖片按原始比例顯示 */
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    object-fit: contain !important;
    display: block !important;
}

/* 小螢幕回退：手機或窄寬度顯示 1 或 2 欄 */
@media (max-width: 1200px) {
    /* 若畫面變窄，右側改為 360px */
    .pos-container { grid-template-columns: 1fr 360px; }
}
@media (max-width: 992px) {
    .pos-container { grid-template-columns: 1fr 340px; }
    .pos-products { grid-template-columns: repeat(2, 1fr); }
    .pos-products .product-image { padding-top: 75%; }
}
@media (max-width: 768px) {
    /* 行動裝置時改為單欄，右側購物車移到下方（stack） */
    .pos-container { grid-template-columns: 1fr; }
    .pos-right { order: 2; }
    .pos-left { order: 1; }
    .pos-products { grid-template-columns: 1fr; }
    .pos-products .product-image { padding-top: 75%; }
}