/* EPBD Services — scoped frontend styles. All rules under .epbd-services-wrap. */
:root { --epbd-services-primary: #f97316; }

.epbd-services-wrap { --p: var(--epbd-services-primary); font-family: inherit; color:#111; box-sizing:border-box; }
.epbd-services-wrap *, .epbd-services-wrap *::before, .epbd-services-wrap *::after { box-sizing:border-box; }
.epbd-services-wrap a { color:inherit; text-decoration:none; }
.epbd-services-wrap img { max-width:100%; height:auto; display:block; }

/* Hero */
.epbd-hero {
    position:relative; padding: 90px 24px; margin: 24px 0 40px;
    background: linear-gradient(135deg,#111 0%,#1f2937 55%,#0f172a 100%);
    background-size: cover; background-position: center;
    border-radius: 16px; overflow:hidden;
}
.epbd-hero::before {
    content:""; position:absolute; inset:0; background:rgba(0,0,0,.55);
}
.epbd-hero__inner { position:relative; max-width: 1200px; margin: 0 auto; padding: 0 12px; color:#fff; }
.epbd-hero__title { margin:0 0 12px; font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing:-0.02em; color:#fff; text-transform:capitalize; line-height:1.1; }
.epbd-hero__crumb { margin:0; font-size:15px; opacity:.85; letter-spacing:.02em; }

/* Container grid */
.epbd-services-container {
    display: grid; grid-template-columns: 280px 1fr; gap: 28px;
    max-width: 1200px; margin: 0 auto 40px; padding: 0 12px;
}
@media (max-width: 900px) { .epbd-services-container { grid-template-columns: 1fr; } }

/* Sidebar */
.epbd-sidebar { display:flex; flex-direction:column; gap:20px; }
.epbd-search { position:relative; display:flex; align-items:center; }
.epbd-search input {
    width:100%; padding: 14px 48px 14px 16px; border:1px solid #e5e7eb;
    border-radius: 10px; font-size:14px; background:#fff; color:#111;
    outline:none; transition: border-color .15s, box-shadow .15s;
}
.epbd-search input:focus { border-color: var(--p); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p) 20%, transparent); }
.epbd-search button {
    position:absolute; right:6px; top:50%; transform: translateY(-50%);
    width:36px; height:36px; border:none; background: transparent; color:#6b7280;
    cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.epbd-search button:hover { color: var(--p); background:#f9fafb; }

.epbd-panel { background:#fff; border:1px solid #f1f5f9; border-radius:14px; padding: 20px 18px; }
.epbd-panel__title { margin:0 0 16px; font-size:18px; font-weight:800; letter-spacing:-0.01em; position:relative; padding-bottom: 10px; }
.epbd-panel__title .epbd-panel__accent { display:block; position:absolute; left:0; bottom:0; width:36px; height:3px; background: var(--p); border-radius:3px; }

.epbd-cats { list-style:none; padding:0; margin:0; }
.epbd-cats li { border-bottom: 1px dashed #eef2f7; }
.epbd-cats li:last-child { border-bottom:0; }
.epbd-cats a {
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 4px; font-size:14px; color:#374151;
    transition: color .15s, padding .15s;
}
.epbd-cats a:hover { color: var(--p); padding-left: 6px; }
.epbd-cats li.is-active a { color: var(--p); font-weight: 700; padding-left: 6px; }
.epbd-cats__count { font-size:12px; color:#9ca3af; background:#f3f4f6; padding: 2px 8px; border-radius:20px; }
.epbd-cats li.is-active .epbd-cats__count { background: color-mix(in oklab, var(--p) 15%, #fff); color: var(--p); }

/* Grid */
.epbd-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1024px) { .epbd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .epbd-grid { grid-template-columns: 1fr; } }

/* Card */
.epbd-card {
    position:relative; background:#fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform .2s, box-shadow .2s;
    display:flex; flex-direction:column;
}
.epbd-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.epbd-card__cover { display:block; aspect-ratio: 3 / 2; background:#f1f5f9; overflow:hidden; }
.epbd-card__cover img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.epbd-card:hover .epbd-card__cover img { transform: scale(1.05); }

.epbd-wl-btn {
    position:absolute; top:12px; right:12px; width:36px; height:36px;
    border-radius: 50%; border:none; background: rgba(255,255,255,.92);
    color:#94a3b8; display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:2; transition: color .15s, background .15s, transform .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.epbd-wl-btn:hover { color: var(--p); transform: scale(1.08); }
.epbd-wl-btn.is-active { color: var(--p); background: #fff; }
.epbd-wl-btn.is-active svg { animation: epbd-pop .3s ease; }
@keyframes epbd-pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }

.epbd-card__body { padding: 16px 18px 8px; }
.epbd-seller { display:flex; align-items:center; gap:10px; margin-bottom: 12px; }
.epbd-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.epbd-avatar--fallback { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; }
.epbd-seller__meta { line-height: 1.3; min-width:0; }
.epbd-seller__name { font-weight: 700; font-size: 14px; color:#111; }
.epbd-seller__level { font-size: 12px; color:#94a3b8; }

.epbd-card__title { margin: 0 0 10px; font-size: 15px; line-height: 1.4; font-weight: 600; min-height: 2.8em; }
.epbd-card__title a { color:#111; }
.epbd-card__title a:hover { color: var(--p); }

.epbd-card__rate { display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.epbd-stars { display:inline-flex; gap:1px; }
.epbd-star--full  { fill: var(--p); }
.epbd-star--half  { fill: url(#epbd-half); fill: var(--p); opacity:.5; }
.epbd-star--empty { fill: #e5e7eb; }
.epbd-card__ratenum { font-size: 12px; color:#6b7280; font-weight:600; }

.epbd-card__foot {
    padding: 14px 18px; border-top: 1px solid #f1f5f9; margin-top:auto;
    display:flex; align-items:center; justify-content:space-between;
    background:#fafbfc;
}
.epbd-card__pricelabel { font-size:12px; color:#6b7280; }
.epbd-card__price { font-size: 18px; font-weight: 800; color:#111; }
.epbd-card__old { font-size:12px; color:#9ca3af; font-weight:500; margin-right:4px; }

/* Pagination */
.epbd-pagination { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:36px; }
.epbd-pg-btn {
    min-width: 40px; height: 40px; padding: 0 14px; border-radius: 10px;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:600; font-size:14px; color:#374151; background:#fff;
    border: 1px solid #e5e7eb; transition: all .15s;
}
.epbd-pg-btn:hover { border-color: var(--p); color: var(--p); }
.epbd-pg-btn.is-active { background: var(--p); border-color: var(--p); color:#fff; }

/* Empty */
.epbd-empty { padding: 60px 20px; text-align:center; background:#fff; border-radius: 16px; border: 1px dashed #e5e7eb; }
.epbd-empty h3 { margin:0 0 8px; font-size:20px; }
.epbd-empty p { margin: 0 0 20px; color:#6b7280; }
.epbd-empty__icon{display:flex;justify-content:center;margin:0 auto 16px;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#fef3c7);color:#2563eb;align-items:center}
.epbd-empty--price .epbd-empty__icon{background:linear-gradient(135deg,#fef3c7,#fee2e2);color:#dc2626}
.epbd-empty__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:4px}
.epbd-empty--price strong{color:#dc2626;font-weight:700}
.epbd-btn-outline {
    display:inline-block; padding: 10px 20px; border-radius:10px;
    border: 1px solid var(--p); color: var(--p); font-weight:600; font-size:14px;
    transition: all .15s;
}
.epbd-btn-outline:hover { background: var(--p); color:#fff; }

/* Single */
.epbd-single-container { display:grid; grid-template-columns: 1fr 340px; gap:28px; max-width:1200px; margin:0 auto 60px; padding: 0 12px; }
@media (max-width: 900px) { .epbd-single-container { grid-template-columns: 1fr; } }
.epbd-single-cover { border-radius: 16px; overflow:hidden; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.epbd-single-body { background:#fff; padding: 24px; border-radius: 16px; line-height:1.7; color:#374151; font-size: 15px; }
.epbd-buybox { background:#fff; border:1px solid #f1f5f9; border-radius: 16px; padding: 22px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.04); }
.epbd-buybox__price { font-size: 32px; font-weight: 800; color:#111; line-height:1; }
.epbd-buybox__price s { font-size:16px; color:#9ca3af; font-weight:500; margin-right:8px; }
.epbd-buybox__label { color:#6b7280; font-size:13px; margin-top: 4px; margin-bottom: 14px; }
.epbd-buybox__rate { display:flex; align-items:center; gap:8px; margin-bottom: 18px; font-size:13px; color:#6b7280; }
.epbd-btn {
    display:block; text-align:center; padding: 14px 20px; border-radius:12px;
    background: var(--p); color:#fff; font-weight:700; font-size:15px;
    transition: opacity .15s, transform .15s;
}
.epbd-btn:hover { opacity:.92; transform: translateY(-1px); color:#fff; }
.epbd-wl-btn--inline {
    position:static; width:100%; height:auto; padding:12px; border-radius:10px;
    background:#fff; border:1px solid #e5e7eb; margin-top:10px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-weight:600; font-size:14px; color:#374151; box-shadow:none;
}
.epbd-wl-btn--inline:hover { border-color: var(--p); color: var(--p); transform:none; }
.epbd-wl-btn--inline.is-active { color: var(--p); border-color: var(--p); }

/* Toolbar (result count + sort) */
.epbd-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px; padding:14px 18px; background:#fff; border:1px solid #eef0f3; border-radius:12px; }
.epbd-toolbar__count { font-size:14px; color:#4b5563; }
.epbd-toolbar__count strong { color:#111827; }
.epbd-sort { display:flex; align-items:center; gap:8px; }
.epbd-sort label { font-size:14px; color:#4b5563; }
.epbd-sort select { padding:8px 30px 8px 12px; font-size:14px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; min-width:180px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 8px center; background-size:16px; }
.epbd-sort select:focus { outline:none; border-color:var(--epbd-services-primary,#f97316); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
@media (max-width:600px){ .epbd-toolbar{flex-direction:column;align-items:stretch} .epbd-sort{justify-content:space-between} .epbd-sort select{flex:1} }

/* Price filter (toolbar) */
.epbd-toolbar__controls { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.epbd-price { display:flex; align-items:center; gap:6px; padding:6px 10px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; }
.epbd-price__label { font-size:14px; color:#4b5563; margin-right:2px; }
.epbd-price__cur { font-size:13px; color:#6b7280; }
.epbd-price input[type=number] { width:70px; padding:6px 8px; font-size:14px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; -moz-appearance:textfield; }
.epbd-price input[type=number]::-webkit-outer-spin-button,
.epbd-price input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.epbd-price__sep { color:#9ca3af; }
.epbd-price__btn { padding:6px 12px; font-size:13px; font-weight:600; border:0; border-radius:6px; background:var(--epbd-services-primary,#f97316); color:#fff; cursor:pointer; }
.epbd-price__btn:hover { filter:brightness(1.08); }
.epbd-price__clear { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#e5e7eb; color:#374151; text-decoration:none; font-size:16px; line-height:1; }
.epbd-price__clear:hover { background:#fecaca; color:#991b1b; }
@media (max-width:600px){
  .epbd-toolbar__controls { flex-direction:column; align-items:stretch; width:100%; }
  .epbd-price { justify-content:space-between; }
  .epbd-price input[type=number] { flex:1; min-width:0; }
}

/* Seller name link + profile page */
.epbd-seller__link{color:inherit;text-decoration:none}
.epbd-seller__link:hover{color:#2563eb;text-decoration:underline}
.epbd-seller-profile{display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:#fff}
.epbd-seller-profile__avatar .epbd-avatar{width:88px;height:88px;font-size:32px;border:3px solid rgba(255,255,255,.6);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.epbd-seller-profile__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.92)}
.epbd-seller-profile__level{background:rgba(255,255,255,.18);padding:4px 10px;border-radius:999px;font-weight:600}
.epbd-seller-profile__rating{display:flex;align-items:center;gap:6px}
.epbd-seller-profile__rating .epbd-star{color:#fbbf24}
.epbd-seller-profile__count{opacity:.9}
@media (max-width:600px){.epbd-seller-profile{gap:14px}.epbd-seller-profile__avatar .epbd-avatar{width:64px;height:64px;font-size:24px}}

/* AJAX loading state for grid area */
.epbd-grid-area.is-loading{position:relative;min-height:280px}
.epbd-grid-area.is-loading>*{opacity:.45;transition:opacity .15s;pointer-events:none}
.epbd-grid-area.is-loading::after{
    content:"";position:absolute;top:40px;left:50%;width:44px;height:44px;margin-left:-22px;
    border:3px solid rgba(0,0,0,.12);border-top-color:#2563eb;border-radius:50%;
    animation:epbd-spin .8s linear infinite;z-index:5;
}
@keyframes epbd-spin{to{transform:rotate(360deg)}}

/* Active filters summary chips */
.epbd-active-filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;margin:0 0 14px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px}
.epbd-active-filters__label{font-size:13px;font-weight:600;color:#475569;letter-spacing:.02em;text-transform:uppercase}
.epbd-active-filters__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.epbd-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #cbd5e1;border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;color:#0f172a;line-height:1.2}
.epbd-chip__text{white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.epbd-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e2e8f0;color:#334155;text-decoration:none;font-size:14px;line-height:1;transition:background .15s}
.epbd-chip__remove:hover{background:#ef4444;color:#fff}
.epbd-active-filters__clear{margin-left:auto;font-size:13px;font-weight:600;color:#dc2626;text-decoration:none;padding:6px 12px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;transition:all .15s}
.epbd-active-filters__clear:hover{background:#dc2626;color:#fff;border-color:#dc2626}
@media (max-width:640px){.epbd-active-filters__clear{margin-left:0;width:100%;text-align:center}}
.epbd-toolbar__reset{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #fecaca;background:#fef2f2;color:#dc2626;font-size:13px;font-weight:600;border-radius:8px;text-decoration:none;transition:all .15s;cursor:pointer;line-height:1}
.epbd-toolbar__reset:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.epbd-toolbar__reset:focus-visible{outline:2px solid #dc2626;outline-offset:2px}
.epbd-price-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.epbd-price-preset{padding:6px 12px;font-size:12px;font-weight:600;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;cursor:pointer;transition:all .15s;line-height:1;white-space:nowrap}
.epbd-price-preset:hover{background:#e0e7ff;border-color:#c7d2fe;color:var(--p,#2563eb)}
.epbd-price-preset.is-active{background:var(--p,#2563eb);border-color:var(--p,#2563eb);color:#fff}
.epbd-price-preset:focus-visible{outline:2px solid var(--p,#2563eb);outline-offset:2px}
.epbd-price{position:relative;flex-wrap:wrap}
.epbd-price__hint{flex-basis:100%;margin-top:6px;padding:6px 10px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;border-radius:6px;font-size:12px;font-weight:600;animation:epbdFadeIn .2s ease}
@keyframes epbdFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}