/* =====================================================================
   Product grid — Phoenix Bulk
   Used by widget-product.php (หน้าแรก, หน้าสินค้า, OTHER PRODUCTS ในหน้าสินค้า)
   ===================================================================== */

/* design tokens live in css/pages.css */

/* ---------- section shell ---------- */
.pb-products{ background:var(--pb-ground); }

.pb-head{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:14px; margin-bottom:22px;
}
.pb-head__title{
    font-family:'Prompt',sans-serif; font-weight:600; color:var(--pb-ink);
    font-size:26px; line-height:1.25; margin:0;
}
.pb-head__count{
    font-family:'Prompt',sans-serif; font-size:14px; color:var(--pb-body);
    margin:4px 0 0;
}

/* ---------- toolbar (search + sort) ---------- */
.pb-toolbar{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin-bottom:24px;
}
.pb-search{
    position:relative; flex:1 1 260px; min-width:0;
}
.pb-search__icon{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    color:#9aa3b5; font-size:14px; pointer-events:none;
}
.pb-search input{
    width:100%; height:46px; border:1px solid var(--pb-line); border-radius:999px;
    background:#fff; padding:0 18px 0 40px;
    font-family:'Prompt',sans-serif; font-size:15px; color:var(--pb-ink);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.pb-search input::placeholder{ color:#a6aec0; }
.pb-search input:focus{
    outline:none; border-color:var(--pb-accent);
    box-shadow:0 0 0 4px rgba(71,174,241,.16);
}
.pb-sort{
    position:relative; flex:0 0 auto;
}
.pb-sort select{
    height:46px; border:1px solid var(--pb-line); border-radius:999px; background:#fff;
    padding:0 40px 0 18px; font-family:'Prompt',sans-serif; font-size:15px; color:var(--pb-ink);
    appearance:none; -webkit-appearance:none; cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.pb-sort select:focus{
    outline:none; border-color:var(--pb-accent);
    box-shadow:0 0 0 4px rgba(71,174,241,.16);
}
.pb-sort__caret{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    color:#9aa3b5; font-size:13px; pointer-events:none;
}

/* ---------- grid ---------- */
.pb-grid{
    display:grid; gap:16px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    list-style:none; margin:0; padding:0;
}
@media (min-width:576px){
    .pb-grid{ grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:20px; }
}

/* ---------- card ---------- */
.pb-card{
    display:flex; flex-direction:column; height:100%;
    background:#fff; border:1px solid var(--pb-line); border-radius:var(--pb-radius);
    overflow:hidden; text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pb-card:hover,
.pb-card:focus-visible{
    transform:translateY(-4px);
    border-color:#d3dced;
    box-shadow:0 14px 30px -18px rgba(22,34,74,.45);
    text-decoration:none;
}
.pb-card:focus-visible{
    outline:3px solid var(--pb-accent); outline-offset:2px;
}

.pb-card__media{
    position:relative; aspect-ratio:1/1; overflow:hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--pb-panel) 100%);
    border-bottom:1px solid var(--pb-line);
}
.pb-card__media img{
    width:100%; height:100%; object-fit:contain; padding:14px;
    display:block; transition:transform .35s ease;
}
.pb-card:hover .pb-card__media img{ transform:scale(1.06); }

.pb-card__body{
    display:flex; flex-direction:column; gap:8px;
    padding:14px 15px 15px; flex:1 1 auto;
}
.pb-card__title{
    font-family:'Prompt',sans-serif; font-weight:500; font-size:15px; line-height:1.42;
    color:var(--pb-ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.84em;
}
.pb-card:hover .pb-card__title{ color:var(--pb-navy-2); }

.pb-card__price{
    font-family:'Prompt',sans-serif; font-weight:600; font-size:20px; line-height:1.2;
    color:var(--pb-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    margin-top:auto;
}
.pb-card__price .cur{ font-size:14px; font-weight:400; color:var(--pb-body); margin-right:2px; }
.pb-card__price.is-ask{ font-size:16px; font-weight:500; color:var(--pb-navy-2); }

.pb-card__cta{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Prompt',sans-serif; font-size:13px; color:var(--pb-navy-2);
    padding-top:4px; border-top:1px solid var(--pb-line); margin-top:2px;
}
.pb-card__cta i{ font-size:11px; transition:transform .25s ease; }
.pb-card:hover .pb-card__cta i{ transform:translateX(4px); }

/* ---------- empty state ---------- */
.pb-empty{
    grid-column:1/-1; text-align:center; padding:56px 20px;
    border:1px dashed #d8dee9; border-radius:var(--pb-radius); background:#fff;
}
.pb-empty i{ font-size:30px; color:#c3cbdb; display:block; margin-bottom:12px; }
.pb-empty p{
    font-family:'Prompt',sans-serif !important; color:var(--pb-body) !important;
    font-size:16px !important; margin:0 !important;
}

/* ---------- footer link ---------- */
.pb-more{ text-align:center; margin-top:30px; }

/* ---------- admin add button ---------- */
.pb-admin-add{ flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){
    .pb-card, .pb-card__media img, .pb-card__cta i{ transition:none !important; }
    .pb-card:hover{ transform:none; }
    .pb-card:hover .pb-card__media img{ transform:none; }
}

/* visually-hidden label (the theme's .sr-only may not exist in this Bootstrap build) */
.sc{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pb-item[hidden]{ display:none !important; }

@media (max-width:575px){
    .pb-toolbar{ gap:8px; }
    .pb-sort{ flex:1 1 100%; }
    .pb-sort select{ width:100%; }
    .pb-card__body{ padding:12px 13px 13px; }
    .pb-card__title{ font-size:14px; }
    .pb-card__price{ font-size:18px; }
}