/* หน้าสินค้า (frontend): /Products และ /Products/detail */
.pf-card { position:relative; margin-bottom:30px; background:var(--insur-white); border:1px solid var(--insur-bdr-color); border-radius:var(--insur-bdr-radius); overflow:hidden; transition:box-shadow .2s, transform .2s; }
.pf-card:hover { box-shadow:0 10px 28px rgba(15,23,42,.1); transform:translateY(-2px); }
.pf-card .product__all-img { position:relative; overflow:hidden; }
.pf-card .product__all-content { padding:16px 18px 18px; text-align:left; }
.pf-category { font-size:12px; color:var(--insur-gray); margin:0 0 4px; }
.pf-card .product__all-title { font-size:17px; line-height:1.4; margin:0 0 8px; min-height:48px; letter-spacing:var(--insur-letter-spacing); }
.pf-card .product__all-title a { color:var(--insur-black); }
.pf-card .product__all-title a:hover { color:var(--insur-base); }
.pf-badges { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.pf-badge { display:inline-block; font-size:11.5px; font-weight:700; color:#fff; padding:3px 9px; border-radius:4px; line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.pf-badge-new { background:#10b981; }
.pf-badge-sale { background:#ef4444; }
.pf-badge-used { background:#f59e0b; }
.pf-badge-first { background:#3b82f6; }
.pf-sold-cover { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; background:rgba(var(--insur-black-rgb),.55); }
.pf-sold-cover span { color:var(--insur-white); font-size:22px; font-weight:800; letter-spacing:1px; border:3px solid var(--insur-white); padding:4px 18px; border-radius:var(--insur-bdr-radius); transform:rotate(-8deg); }
.pf-card.is-sold .pf-prices, .pf-card.is-sold .product__all-title { opacity:.6; }
.pf-price-line { margin:0 0 4px; font-size:15px; color:var(--insur-gray); }
.pf-price-line strong { font-size:19px; color:var(--insur-black); }
.pf-price-line .pf-now { color:var(--insur-base); }
.pf-price-line .pf-old { color:var(--insur-gray); opacity:.6; font-size:14px; margin-right:4px; }
.pf-price-tag { display:inline-block; min-width:34px; text-align:center; font-size:11.5px; font-weight:700; color:var(--insur-white); background:var(--insur-base); border-radius:4px; padding:1px 7px; margin-right:6px; }
.pf-price-tag-rent { background:var(--insur-black); }
.pf-actions { display:flex; gap:8px; margin-top:14px; }
.pf-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border-radius:var(--insur-bdr-radius); font-size:14px; font-weight:600; letter-spacing:var(--insur-letter-spacing); text-align:center; text-decoration:none; transition:filter .15s, background .15s, color .15s; }
.pf-btn-line { background:#06c755; color:var(--insur-white); }
.pf-btn-line:hover { filter:brightness(.93); color:var(--insur-white); }
.pf-btn-detail { background:var(--insur-white); color:var(--insur-black); border:1px solid var(--insur-bdr-color); }
.pf-btn-detail:hover { background:var(--insur-extra); color:var(--insur-black); }
.pf-filter input[type=text],
.pf-filter input[type=search],
.pf-filter select { width:100%; height:60px; border:none; outline:none; background-color:var(--insur-extra); color:var(--insur-gray); border-radius:var(--insur-bdr-radius); padding:0 24px; margin-bottom:12px; font-size:14px; font-weight:500; letter-spacing:var(--insur-letter-spacing); font-family:var(--insur-font); -webkit-appearance:none; appearance:none; }
.pf-filter select { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23696e77' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 24px center; padding-right:48px; }
.pf-filter input[type=text]::placeholder, .pf-filter input[type=search]::placeholder { color:var(--insur-gray); opacity:1; }
.pf-filter .pf-submit { width:100%; border:0; border-radius:var(--insur-bdr-radius); padding:17px 40px; font-size:16px; font-weight:700; letter-spacing:var(--insur-letter-spacing); color:var(--insur-white); background-color:var(--insur-base); cursor:pointer; transition:all .4s linear; }
.pf-filter .pf-submit:hover { background-color:var(--insur-black); }
.pf-sort { width:100%; height:60px; border:none; outline:none; background-color:var(--insur-extra); color:var(--insur-gray); border-radius:var(--insur-bdr-radius); padding:0 48px 0 24px; font-size:14px; font-weight:500; letter-spacing:var(--insur-letter-spacing); font-family:var(--insur-font); -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23696e77' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 24px center; }
.pf-empty { text-align:center; padding:60px 20px; color:var(--insur-gray); }
.pf-pagination { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0 30px; padding:0; list-style:none; }
.pf-pagination a, .pf-pagination span { display:inline-block; min-width:40px; padding:8px 12px; text-align:center; border:1px solid var(--insur-bdr-color); border-radius:var(--insur-bdr-radius); color:var(--insur-black); text-decoration:none; }
.pf-pagination a:hover { background:var(--insur-extra); }
.pf-pagination .active span { background:var(--insur-base); border-color:var(--insur-base); color:var(--insur-white); }
.pf-pagination .disabled span { opacity:.4; }

/* detail */
.pd-gallery-main { position:relative; border-radius:var(--insur-bdr-radius); overflow:hidden; border:1px solid var(--insur-bdr-color); background:var(--insur-extra); }
.pd-gallery-main img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.pd-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pd-thumbs button { padding:0; border:2px solid transparent; border-radius:var(--insur-bdr-radius); overflow:hidden; background:none; cursor:pointer; width:72px; height:72px; }
.pd-thumbs button.is-active { border-color:var(--insur-base); }
.pd-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-title { font-size:30px; line-height:1.35; margin:0 0 10px; color:var(--insur-black); letter-spacing:var(--insur-letter-spacing); }
.pd-price-box { background:var(--insur-extra); border:1px solid var(--insur-bdr-color); border-radius:var(--insur-bdr-radius); padding:16px 18px; margin:16px 0; }
.pd-price-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.pd-price-row:last-child { margin-bottom:0; }
.pd-price-row .pd-now { font-size:30px; font-weight:800; color:var(--insur-black); }
.pd-price-row .pd-now.is-discount { color:var(--insur-base); }
.pd-price-row .pd-old { color:var(--insur-gray); text-decoration:line-through; font-size:17px; }
.pd-promo-end { font-size:13px; color:var(--insur-base); margin:4px 0 0; }
.pd-answer { border-left:4px solid var(--insur-base); background:var(--insur-extra); padding:12px 16px; margin:16px 0; border-radius:0 var(--insur-bdr-radius) var(--insur-bdr-radius) 0; color:var(--insur-black); }
.pd-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.pd-buttons .pf-btn { flex:0 1 auto; padding:13px 26px; font-size:16px; }
.pd-sold-note { background:var(--insur-extra); color:var(--insur-black); border:1px solid var(--insur-bdr-color); border-left:4px solid var(--insur-base); border-radius:0 var(--insur-bdr-radius) var(--insur-bdr-radius) 0; padding:10px 14px; margin-bottom:12px; font-weight:600; }
.pd-spec { width:100%; border-collapse:collapse; margin:14px 0; font-size:15px; }
.pd-spec th { width:38%; text-align:left; color:var(--insur-gray); font-weight:600; padding:8px 0; border-bottom:1px solid var(--insur-bdr-color); }
.pd-spec td { padding:8px 0; border-bottom:1px solid var(--insur-bdr-color); color:var(--insur-black); }
.pd-faq details { border:1px solid var(--insur-bdr-color); border-radius:var(--insur-bdr-radius); margin-bottom:10px; background:var(--insur-white); }
.pd-faq summary { cursor:pointer; padding:14px 18px; font-weight:700; color:var(--insur-black); }
.pd-faq details p { margin:0; padding:0 18px 16px; color:var(--insur-gray); }
.pd-detail-html h1, .pd-detail-html h2, .pd-detail-html h3, .pd-detail-html h4, .pd-detail-html h5, .pd-detail-html h6 { line-height:1.9; }
.pd-detail-html img { max-width:100%; height:auto; }
@media (max-width:767px) { .pd-buttons { flex-direction:column; } .pd-buttons .pf-btn { width:100%; } .pf-sort { height:54px; } }
@media (max-width:575px) { .pd-title { font-size:24px; } .pf-actions { flex-direction:column; } }