/* XShop Components — buttons, cards, breadcrumbs, pagination, notices, etc. */

/* Buttons */
.xshop-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--xshop-space-2); padding: var(--xshop-space-2) var(--xshop-space-4); border-radius: var(--xshop-radius-sm); border: 1px solid transparent; font-weight: var(--xshop-weight-medium); font-size: var(--xshop-text-sm); cursor: pointer; transition: background var(--xshop-transition), border-color var(--xshop-transition), color var(--xshop-transition); text-decoration: none; line-height: 1.4; }
.xshop-btn--primary { background: var(--xshop-primary); color: #fff; border-color: var(--xshop-primary); }
.xshop-btn--primary:hover { background: var(--xshop-primary-600); border-color: var(--xshop-primary-600); color: #fff; }
.xshop-btn--secondary { background: var(--xshop-card); color: var(--xshop-text); border-color: var(--xshop-border); }
.xshop-btn--secondary:hover { background: var(--xshop-surface); }
.xshop-btn--ghost { background: transparent; color: var(--xshop-text); border-color: transparent; }
.xshop-btn--ghost:hover { background: var(--xshop-surface); }
.xshop-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Card — post-card, product placeholder, generic */
.xshop-card { background: var(--xshop-card); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--xshop-transition); }
.xshop-card:hover { box-shadow: var(--xshop-shadow-md); }
.xshop-card__media { aspect-ratio: 16/10; background: var(--xshop-surface); overflow: hidden; }
.xshop-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.xshop-card__media--placeholder { display: flex; align-items: center; justify-content: center; color: var(--xshop-muted); font-size: var(--xshop-text-sm); }
.xshop-card__body { padding: var(--xshop-space-4); display: flex; flex-direction: column; gap: var(--xshop-space-2); flex: 1; }
.xshop-card__title { font-size: var(--xshop-text-base); margin: 0; line-height: var(--xshop-leading-tight); }
.xshop-card__title a { color: var(--xshop-text); }
.xshop-card__title a:hover { color: var(--xshop-link); }
.xshop-card__meta { font-size: var(--xshop-text-sm); color: var(--xshop-muted); display: flex; gap: var(--xshop-space-2); flex-wrap: wrap; }
.xshop-card__excerpt { font-size: var(--xshop-text-sm); color: var(--xshop-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Breadcrumbs */
.xshop-breadcrumbs { font-size: var(--xshop-text-sm); color: var(--xshop-muted); }
.xshop-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--xshop-space-2); list-style: none; margin: 0; padding: 0; align-items: center; }
.xshop-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--xshop-space-2); }
.xshop-breadcrumbs li + li::before { content: "/"; opacity: .5; }
[dir="rtl"] .xshop-breadcrumbs li + li::before { content: "/"; }
.xshop-breadcrumbs a { color: var(--xshop-muted); }
.xshop-breadcrumbs a:hover { color: var(--xshop-text); }
.xshop-breadcrumbs [aria-current="page"] { color: var(--xshop-text); font-weight: var(--xshop-weight-medium); }

/* Pagination */
.xshop-pagination { display: flex; justify-content: center; margin-block-start: var(--xshop-space-8); }
.xshop-pagination .nav-links { display: flex; gap: var(--xshop-space-1); flex-wrap: wrap; align-items: center; }
.xshop-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 40px; block-size: 40px; padding-inline: var(--xshop-space-2); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-sm); background: var(--xshop-card); color: var(--xshop-text); font-size: var(--xshop-text-sm); text-decoration: none; }
.xshop-pagination .page-numbers:hover { background: var(--xshop-surface); }
.xshop-pagination .page-numbers.current { background: var(--xshop-primary); border-color: var(--xshop-primary); color: #fff; font-weight: var(--xshop-weight-bold); }
.xshop-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Search form */
.xshop-search-form { display: flex; gap: var(--xshop-space-2); max-inline-size: 520px; }
.xshop-search-form input[type="search"] { flex: 1; }

/* Empty state */
.xshop-empty { text-align: center; padding: var(--xshop-space-12) var(--xshop-space-6); background: var(--xshop-surface); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); }
.xshop-empty__title { font-size: var(--xshop-text-xl); margin: 0 0 var(--xshop-space-2); }
.xshop-empty__text { color: var(--xshop-muted); margin: 0 0 var(--xshop-space-4); }

/* Loading */
.xshop-loading { display: inline-flex; align-items: center; gap: var(--xshop-space-2); color: var(--xshop-muted); font-size: var(--xshop-text-sm); }
.xshop-loading__spinner { inline-size: 16px; block-size: 16px; border: 2px solid var(--xshop-border); border-block-start-color: var(--xshop-primary); border-radius: 50%; animation: xshop-spin 600ms linear infinite; }
@keyframes xshop-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xshop-loading__spinner { animation: none; } }

/* Notices */
.xshop-notice { padding: var(--xshop-space-3) var(--xshop-space-4); border-radius: var(--xshop-radius-sm); border: 1px solid var(--xshop-border); background: var(--xshop-surface); font-size: var(--xshop-text-sm); }
.xshop-notice--success { background: var(--xshop-success-bg); border-color: #86efac; color: #14532d; }
[data-theme="dark"] .xshop-notice--success { color: #bbf7d0; }
.xshop-notice--warning { background: var(--xshop-warning-bg); border-color: #fcd34d; }
.xshop-notice--error { background: var(--xshop-danger-bg); border-color: #fca5a5; }

/* Comments */
.xshop-comments { margin-block-start: var(--xshop-space-8); border-block-start: 1px solid var(--xshop-border); padding-block-start: var(--xshop-space-8); }
.xshop-comments__title { font-size: var(--xshop-text-xl); }
.xshop-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--xshop-space-4); }
.xshop-comment { background: var(--xshop-card); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); padding: var(--xshop-space-4); }
.xshop-comment__meta { font-size: var(--xshop-text-sm); color: var(--xshop-muted); margin-block-end: var(--xshop-space-2); }
.xshop-comment__body { font-size: var(--xshop-text-base); }
.xshop-comment .children { list-style: none; margin-block-start: var(--xshop-space-4); padding-inline-start: var(--xshop-space-6); display: flex; flex-direction: column; gap: var(--xshop-space-4); border-inline-start: 2px solid var(--xshop-border); }
@media (max-width: 640px) { .xshop-comment .children { padding-inline-start: var(--xshop-space-3); } }

/* Page header */
.xshop-page-header { margin-block-end: var(--xshop-space-6); }
.xshop-page-header__title { font-size: var(--xshop-text-3xl); margin: 0; }
.xshop-page-header__desc { color: var(--xshop-muted); margin-block-start: var(--xshop-space-2); }

/* 404 */
.xshop-404 { text-align: center; padding: var(--xshop-space-16) var(--xshop-space-4); }
.xshop-404__code { font-size: 5rem; font-weight: var(--xshop-weight-bold); line-height: 1; color: var(--xshop-border); margin: 0; }
.xshop-404__title { font-size: var(--xshop-text-3xl); margin: var(--xshop-space-4) 0 var(--xshop-space-2); }

/* Promo banner foundation */
.xshop-promo { background: var(--xshop-surface); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); padding: var(--xshop-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--xshop-space-4); flex-wrap: wrap; }

/* Woo notice compat */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--xshop-radius-sm); }