/* ============================================================================
 * common/widget/12-product-a.css — 商品 widget A
 * ============================================================================
 *   載入序：12 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L2069~2182 切出；phase 2 已完成本模組整理
 *
 *   [跨模組依賴已解除] 原位於 19-layout-hooks.css 的 .productA-grid 商品格線（#706 取代
 *   blade 移除的 .row + 動態 col-lg-2／col-lg-3 + col-6）已併入本檔；13~18 各檔皆無
 *   productA 選擇器，提前載入不改變生效值（已實測）。
 *
 *   [容器寬度] 版面容器為 blade 的 .container.container-{1600|800}.shop-content，寬度已於
 *   phase 2 第一組統一為 03-container.css 的 --cms-container-* 階梯，本檔不另行限制寬度。
 *
 *   [斷點] 本檔僅一處 @media（.productA-grid 的 --productA-col 於 min-width: 992px 切換為
 *   桌機欄寬），992 已是標準刻度，無須調整。
 *
 *   [好覆蓋] issue #694：.productA-info .productA-size（0,2,0）降為 .productA-size（0,1,0）。
 *   .productA-size 為 productA 專有 class，全 common 僅此一條規則，祖先純屬特異性灌水。
 * ==========================================================================*/

/* ------------------------------------------------------------------------------------------------ */
.productA {
    margin: 0px auto;
    padding-top: 30px;
    padding-bottom: 18px;
    position: relative;
}

.productA .shop-content {
    position: relative;
    z-index: 1;
    border-radius: 0;
    background: transparent;
    /* issue #726:左右補 gutter/2(=0.75rem)吸收 .productA-grid 的 BS row 式
       負 margin(-0.5*--bs-gutter-x);#706 扁平化時漏補此吸收層,負 margin 使
       6 欄格柵右緣溢出容器 0.75rem(root 10px 下約 8px),造成全站水平溢出。
       補 padding 後負 margin 被抵消、商品位置不變(零視覺變化),溢出根除。
       上下維持 0(格柵無縱向 gutter)。 */
    padding: 0 calc(0.5 * var(--bs-gutter-x, 1.5rem));
}

/* 商品格線：取代 blade 移除的 .row + 動態 col-lg-2／col-lg-3 + col-6
   （issue #706；phase 2 自 19-layout-hooks.css 收攏）
   --6 = 寬版 1600 六欄、--4 = 800 四欄；手機一律兩欄。
   --bs-gutter-x 沿用 BS 的 1.5rem 寫法。原因是當時需與 Volvo legacy markup 的 .row／col-*
   utility 同值才等價，該分支已於 issue #962 移除，此處僅保留現值不動（改寫為 px 屬獨立的
   數值調整，需另行驗證各主題）。專案 root 為 62.5%（1rem = 10px）故實際
   為 15px；≥992 另由 common/base.css 的 .container .productA-grid 覆寫為 30px。 */
.productA-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    /* 欄寬以自訂屬性承載（issue #874）：手機一律兩欄，≥992 依修飾類切換。
       主題只要覆寫這兩個變數（或直接覆寫 .productA-cell）即可改欄數，
       毋須複製 common 的長選擇器，見下方 [好覆蓋] 說明。 */
    --productA-col: 50%;
    --productA-col-lg: 16.666667%;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

/* 寬版 1600 六欄為預設值（--productA-col-lg 已是 1/6）；800 版改四欄 */
.productA-grid--4 {
    --productA-col-lg: 25%;
}

@media (min-width: 992px) {
    .productA-grid {
        --productA-col: var(--productA-col-lg);
    }
}

/* [好覆蓋，issue #874] 本規則刻意維持單一 class（0,1,0）：原寫法為
   .productA-grid > .productA-cell（0,2,0）＋ .productA-grid--6|--4 > .productA-cell（0,2,0），
   主題層即使寫 .productA-cell 也蓋不掉（zengarden 想做的單欄雜誌式在 ≥992 就是這樣失效的）。
   改成單一 class 後，主題以同名選擇器即可靠載入序勝出。
   註：原基礎規則寫的是 flex-shrink: 0（flex-grow 預設 0、flex-basis 預設 auto），
   與 ≥992 區塊的 flex: 0 0 auto 計算結果相同，故此處統一寫 flex 簡寫。 */
.productA-cell {
    flex: 0 0 auto;
    width: var(--productA-col);
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.productA-Bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    object-fit: cover;
}

.productA-item {
    width: 100%;
    height: fit-content;
    background: #fff;
    padding: 5px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.productA-item:hover {
    background: #f8f8f8;
}

.productA-item:hover .productA-img img {
    filter: brightness(1.08);
}


.productA-imgBox {
    width: 100%;
    height: fit-content;
    background: #ffffff;
    margin-bottom: 20px;
}

.productA-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.productA-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

.productA-size {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.size-item {
    flex-grow: 1;
    width: fit-content;
    height: fit-content;
    border: 1px solid #303030;
    color: #5a5a5a;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
}

.productA-title {
    text-align: center;
    color: #333333;
    margin-bottom: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.productA-price {
    text-align: center;
    font-size: 16px;
    color: #353535;
    font-weight: 300;
}