/* /css/product-list-ui.css
   [product-list-ui 20260610]
   Purpose:
   - Product list page UI/UX enhancement layer (Kurly-style structure reference)
   - Mobile view mode: 1-column / 2-column grid / list
   - PC hover wish/cart actions, always-accessible on touch devices
   - Quick filter buttons (신상품/특가 상품/베스트) as independent buttons
   - Product info rows (unit price / delivery / rating / review) styling

   Scope strategy:
   - Almost every rule is scoped under `.plv-enhanced` (added by /js/product-list-view.js
     ONLY to list-page grids, never to main-page swiper sliders), or under
     `.plv-view-switcher` / `.plv-quick-filters` components injected by the same JS.
   - If JS does not run, no class is added and this file changes nothing.

   Load order: AFTER all site CSS (and after front-fix.css).
*/

/* ============================================================
   0. Component-local box-sizing safety
   ============================================================ */
.plv-enhanced,
.plv-enhanced *,
.plv-view-switcher,
.plv-view-switcher *,
.plv-quick-filters,
.plv-quick-filters * {
    box-sizing: border-box;
}

/* ============================================================
   1. Card normalization (enhanced list grids only)
   - Product images must show the full package: object-fit contain
   - White background behind transparent/white-bg product shots
   ============================================================ */
.plv-enhanced .shop_list_item01 {
    position: relative;
    min-width: 0;
    display: block;
}

.plv-enhanced .shop_list_item01 .img {
    background: #fff;
}

.plv-enhanced .shop_list_item01 .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Product name: clamp to 2 lines (board.css .text_ov is 1-line nowrap) */
.plv-enhanced .shop_list_item01 .tit {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-all;
}

/* ============================================================
   2. Product meta rows (unit price / delivery / rating / review)
   - Rendered by JS ONLY when real data exists (data-* attrs or
     existing solution elements). Never fabricated.
   ============================================================ */
.plv-enhanced .plv-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    /* basic.css sets a global `* { flex-shrink: 0 }`; inside enhanced cards
       price rows must be allowed to shrink/wrap or unit price overflows
       narrow 2-col mobile cards */
    flex-shrink: 1;
}

.plv-enhanced .shop_list_item01 .price_box01 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
}

.plv-enhanced .shop_list_item01 .price_box01 > * {
    flex-shrink: 1;
    min-width: 0;
}

.plv-enhanced .shop_list_item01 .discount_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.plv-enhanced .shop_list_item01 .price_box01 .percent01,
.plv-enhanced .shop_list_item01 .price_box01 .price01,
.plv-enhanced .shop_list_item01 .price_box01 .discount01 {
    display: block;
    width: 100%;
    min-width: 0;
}

.plv-enhanced .plv-unit-price {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

.plv-enhanced .plv-meta {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.plv-enhanced .plv-delivery,
.plv-enhanced .plv-review {
    font-size: 13px;
    color: #888;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.plv-enhanced .plv-review .plv-star {
    color: #F4791F;
    font-style: normal;
}

.plv-enhanced .plv-review .plv-dot {
    color: #ccc;
}

/* ============================================================
   3. Wish / Cart action buttons
   - Injected inside .img (overlay, bottom-right of the image)
   - PC (hover capable, >=1025px): hidden until card hover/focus
   - Tablet/Mobile (<=1024px): always visible (no hover dependency)
   - Touch target >= 40px
   ============================================================ */
.plv-enhanced .shop_list_item01 .plv-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 8px;
    z-index: 3;
}

.plv-enhanced .shop_list_item01 .plv-act-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, .94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    color: #333;
    transition: border-color .15s ease, color .15s ease;
}

.plv-enhanced .shop_list_item01 .plv-act-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plv-enhanced .shop_list_item01 .plv-act-btn:hover,
.plv-enhanced .shop_list_item01 .plv-act-btn:focus {
    border-color: #F4791F;
    color: #F4791F;
}

.plv-enhanced .shop_list_item01 .plv-act-jjim.is-active {
    border-color: #e8415c;
    color: #e8415c;
}

.plv-enhanced .shop_list_item01 .plv-act-btn:focus-visible {
    outline: 2px solid #F4791F;
    outline-offset: 2px;
}

/* PC: show on hover / keyboard focus only */
@media all and (min-width: 1025px) {
    .plv-enhanced .shop_list_item01 .plv-actions {
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility .18s ease;
    }

    .plv-enhanced .shop_list_item01:hover .plv-actions,
    .plv-enhanced .shop_list_item01:focus-within .plv-actions,
    .plv-enhanced .shop_list_item01 .plv-actions:focus-within {
        opacity: 1;
        visibility: visible;
    }
}

/* ============================================================
   4. Quick filter buttons (신상품 / 특가 상품 / 베스트)
   - Independent buttons, NOT grouped under "제품종류"
   - PC: top of left filter column / Mobile: above product list
   ============================================================ */
.plv-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px 0;
}

.plv-quick-filters .plv-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #ddd;
    border-radius: 70px;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.plv-quick-filters .plv-quick-btn:hover,
.plv-quick-filters .plv-quick-btn:focus {
    border-color: #F4791F;
    color: #F4791F;
}

.plv-quick-filters .plv-quick-btn:focus-visible {
    outline: 2px solid #F4791F;
    outline-offset: 2px;
}

.plv-quick-filters .plv-quick-btn.is-active {
    border-color: #F4791F;
    background: #F4791F;
    color: #fff;
    font-weight: 700;
}

/* Hidden legacy "제품종류" group (replaced by quick buttons; JS-validated) */
.plv-hidden-filter-group {
    display: none !important;
}

.plv-enhanced .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   5. Mobile view switcher (1열 / 2열 / 목록형)
   - Hidden on PC (>=769px)
   ============================================================ */
.plv-view-switcher {
    display: none;
}

@media all and (max-width: 768px) {
    .plv-view-switcher {
        display: flex;
        gap: 6px;
        margin: 12px 0;
        justify-content: flex-end;
    }

    .plv-view-switcher .plv-view-btn {
        min-height: 36px;
        min-width: 52px;
        padding: 0 12px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 6px;
        font-size: 13px;
        color: #555;
        cursor: pointer;
    }

    .plv-view-switcher .plv-view-btn:focus-visible {
        outline: 2px solid #F4791F;
        outline-offset: 2px;
    }

    .plv-view-switcher .plv-view-btn.is-active {
        border-color: #F4791F;
        color: #F4791F;
        font-weight: 700;
    }
}

/* ============================================================
   6. Mobile view modes
   - Applied to .shop_list_con_box01.plv-enhanced via JS class:
     view-one / view-grid (default) / view-list
   - Solution default (board.css) at <=700px is 2-col flex; these
     rules take over below 768px when JS is active.
   ============================================================ */
@media all and (max-width: 768px) {

    /* ---- 6-1. 1열 ---- */
    .shop_list_con_box01.plv-enhanced.view-one {
        display: flex;
        flex-wrap: wrap;
        gap: 32px 0;
    }

    .shop_list_con_box01.plv-enhanced.view-one .shop_list_item01 {
        width: 100% !important;
    }

    /* 1열: bigger image, info reads vertically */
    .shop_list_con_box01.plv-enhanced.view-one .shop_list_item01 .img {
        aspect-ratio: 4/3;
    }

    /* ---- 6-2. 2열 바둑판 ---- */
    .shop_list_con_box01.plv-enhanced.view-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 8px;
        align-items: start;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 {
        width: auto !important;
        min-width: 0;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .img {
        aspect-ratio: 4 / 3;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .tit {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.3;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .alt {
        display: none;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .price_box01.mt20 {
        margin-top: 6px;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .plv-meta {
        margin-top: 4px;
        gap: 1px;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .plv-delivery,
    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .plv-review {
        font-size: 11px;
        line-height: 1.2;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .plv-actions {
        right: 6px;
        bottom: 6px;
        gap: 5px;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .plv-act-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .plv-act-btn svg {
        width: 17px;
        height: 17px;
    }

    /* ---- 6-3. 목록형 ---- */
    .shop_list_con_box01.plv-enhanced.view-list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 {
        width: 100% !important;
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        grid-auto-rows: min-content;
        column-gap: 12px;
        align-items: start;
        align-content: center;
        padding: 12px 56px 12px 0; /* right space for cart button */
        border-bottom: 1px solid #eee;
        min-height: 120px;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .img {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 96px;
        height: 96px;
        aspect-ratio: 1 / 1;
        border-radius: 5px;
        /* position:static so .plv-actions (abs) anchors to the card and
           escapes the image's overflow clipping */
        position: static;
        overflow: visible;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .img img {
        width: 96px;
        height: 96px;
    }

    /* BEST badge must stay pinned to the small thumb */
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .text_label01 {
        top: 0;
        left: 0;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .tit,
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .alt,
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .price_box01,
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .plv-meta {
        grid-column: 2;
        min-width: 0;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .price_box01 {
        margin-top: 6px;
    }

    /* compact rows: neutralize solution's large margins (.tit mt15 / .mt20)
       inside list mode only, so many products fit per screen */
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .tit {
        margin-top: 0;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .price_box01.mt20 {
        margin-top: 6px;
    }

    /* list mode: cart/wish column on the right, vertically centered */
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .plv-actions {
        right: 0;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        gap: 6px;
    }

    /* empty description blocks must not leave gaps in compact modes */
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .alt:empty,
    .shop_list_con_box01.plv-enhanced.view-grid .shop_list_item01 .alt:empty {
        display: none;
    }
}

@media all and (max-width: 480px) {
    .shop_list_con_box01.plv-enhanced.view-grid {
        gap: 12px 8px;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 {
        grid-template-columns: 84px minmax(0, 1fr);
        padding-right: 52px;
    }

    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .img,
    .shop_list_con_box01.plv-enhanced.view-list .shop_list_item01 .img img {
        width: 84px;
        height: 84px;
    }
}