:root {
  --shopier-primary: #14d9ad;
  --shopier-primary-dark: #51cbb0;
  --shopier-mint: #d9f2ec;
  --shopier-text: #435062;
  --shopier-title: #2f3352;
  --shopier-muted: #868e96;
  --shopier-bg: #fcfcfc;
  --shopier-border: #e8ebf0;
  --shopier-danger: #ee5637;
  --font-sans: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--shopier-text);
  background: var(--shopier-bg);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--shopier-muted); }

.logo {
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--shopier-primary);
  letter-spacing: -0.5px;
}

/* 404 */
.not-found-nav { background: #fff; border-bottom: 1px solid #eef0f3; }
.not-found-nav__inner { max-width: 1140px; margin: 0 auto; padding: 14px 16px; }
.products-empty { display: flex; justify-content: center; padding: 80px 16px 120px; text-align: center; }
.products-empty__inner { max-width: 520px; }
.products-empty__title { margin: 24px 0 12px; font-size: 1.5rem; font-weight: 600; color: var(--shopier-title); }
.products-empty__text { margin: 0; line-height: 1.6; color: var(--shopier-text); }
.products-empty__text small { display: inline-block; margin-top: 8px; color: var(--shopier-muted); }

/* Store */
.store-page { min-height: 100vh; background: #fff; padding-bottom: 64px; }
.store-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--shopier-border); }
.store-header__inner { max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.store-search { flex: 1; max-width: 420px; margin-left: auto; position: relative; }
.store-search input {
  width: 100%; border: 1px solid var(--shopier-border); border-radius: 8px;
  padding: 10px 40px 10px 14px; background: #f7f8fa; outline: none;
}
.store-search input:focus { border-color: var(--shopier-primary); background: #fff; }
.store-search button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; padding: 4px; display: grid; place-items: center;
}

.store-pause { background: #fff7e8; border-bottom: 1px solid #f0e0c0; }
.store-pause__inner { max-width: 1120px; margin: 0 auto; padding: 12px 16px; }
.store-pause p { margin: 0; color: #8a6d3b; font-weight: 500; }

.store-hero { position: relative; }
.store-banner {
  height: 160px; background: linear-gradient(120deg, #e8f8f4, #d9f2ec 45%, #c8ebe3); overflow: hidden;
}
.store-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-hero__content {
  max-width: 1120px; margin: -58px auto 0; padding: 0 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; position: relative; z-index: 2;
}
.store-logo {
  width: 116px; height: 116px; border-radius: 16px; object-fit: cover; background: #fff;
  border: 4px solid #fff; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.store-logo--placeholder {
  display: grid; place-items: center; font-size: 2.5rem; font-weight: 700;
  color: var(--shopier-primary-dark); background: var(--shopier-mint);
}
.btn-follow {
  border: 1px solid var(--shopier-primary); background: #fff; color: var(--shopier-primary-dark);
  border-radius: 999px; padding: 8px 18px; font-weight: 600; cursor: pointer; margin-bottom: 12px;
}
.btn-follow:hover { background: var(--shopier-mint); }

.store-info { max-width: 1120px; margin: 16px auto 0; padding: 0 16px; }
.store-info__title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--shopier-title); }
.store-info__about { margin: 6px 0 0; color: var(--shopier-muted); }
.store-menu { margin-top: 14px; display: flex; gap: 8px; }
.store-menu__link {
  border: none; background: transparent; color: var(--shopier-title); font-weight: 600; cursor: pointer; padding: 6px 0;
}

.store-toolbar {
  max-width: 1120px; margin: 24px auto 0; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.store-toolbar__count { font-weight: 600; color: var(--shopier-title); }
.store-toolbar__actions { display: flex; gap: 8px; }
.store-toolbar__actions button {
  border: 1px solid var(--shopier-border); background: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 500;
}

.store-cats {
  max-width: 1120px; margin: 14px auto 0; padding: 0 16px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.store-cats a {
  flex: 0 0 auto; border: 1px solid var(--shopier-border); background: #fff; border-radius: 999px;
  padding: 7px 12px; color: var(--shopier-text); white-space: nowrap;
}
.store-cats a.active {
  background: var(--shopier-mint); border-color: var(--shopier-primary-dark); color: #0f766e; font-weight: 600;
}

.store-products { max-width: 1120px; margin: 20px auto 0; padding: 0 16px; }
.store-empty-products {
  padding: 64px 16px; text-align: center; color: var(--shopier-muted);
  border: 1px dashed var(--shopier-border); border-radius: 12px;
}
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) {
  .store-banner { height: 200px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.product-card {
  border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--shopier-border);
  transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.product-card__media { aspect-ratio: 1; background: #f3f5f8; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #eef2f6, #e4e9ef); }
.product-card__body { padding: 10px 12px 14px; }
.product-card__body h3 {
  margin: 0; font-size: .9rem; font-weight: 500; color: var(--shopier-title); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
}
.product-card__price { margin: 8px 0 0; font-weight: 700; color: var(--shopier-title); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: grid; place-items: end center; z-index: 100;
}
@media (min-width: 768px) { .modal-backdrop { place-items: center; padding: 24px; } }
.modal-panel {
  width: min(480px, 100%); background: #fff; border-radius: 16px 16px 0 0; max-height: 85vh; overflow: auto;
}
@media (min-width: 768px) { .modal-panel { border-radius: 16px; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--shopier-border);
}
.modal-header h3 { margin: 0; font-size: 1.05rem; color: var(--shopier-title); }
.modal-close { border: none; background: transparent; color: var(--shopier-muted); cursor: pointer; font-weight: 600; }
.modal-body { padding: 16px 18px 20px; }
.contact-list { display: flex; flex-direction: column; gap: 12px; }
.contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border: 1px solid var(--shopier-border); border-radius: 10px;
}
.copy-btn, .contact-row button {
  border: none; background: var(--shopier-mint); color: #0f766e; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-weight: 600;
}
.radio-list, .filter-block { display: flex; flex-direction: column; gap: 10px; }
.radio-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.filter-block h4 { margin: 0 0 4px; color: var(--shopier-title); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--shopier-border); background: #fff; border-radius: 999px; padding: 6px 10px; cursor: pointer;
}
.chip.active { background: var(--shopier-mint); border-color: var(--shopier-primary-dark); }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-row label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; }
.price-row input { border: 1px solid var(--shopier-border); border-radius: 8px; padding: 8px 10px; }
.modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }

.btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  padding: 10px 16px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--shopier-primary); color: #053b32; }
.btn-primary:hover { filter: brightness(.97); }
.btn-ghost { background: #fff; border-color: var(--shopier-border); color: var(--shopier-title); }
.btn-danger { background: #fff; border-color: #f5c2b8; color: var(--shopier-danger); }

/* Admin */
.admin-shell { min-height: 100vh; background: #f4f6f8; }
.admin-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at top right, rgba(20, 217, 173, .18), transparent 40%), #f4f6f8;
}
.admin-login__card {
  width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 28px;
  border: 1px solid var(--shopier-border); box-shadow: 0 12px 40px rgba(15, 23, 42, .06);
}
.admin-login__card h1 { margin: 0 0 6px; color: var(--shopier-title); }
.admin-login__card > p { margin: 0 0 20px; color: var(--shopier-muted); }
.admin-page { max-width: 1080px; margin: 0 auto; padding: 28px 16px 64px; }
.admin-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px;
}
.admin-header h1 { margin: 4px 0 6px; color: var(--shopier-title); font-size: 1.6rem; }
.admin-header p { margin: 0; color: var(--shopier-muted); }
.admin-header__actions { display: flex; gap: 8px; align-items: center; }
.back-link { color: var(--shopier-muted); font-weight: 500; }
.admin-section {
  background: #fff; border: 1px solid var(--shopier-border); border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.admin-section h2, .product-manager h2 { margin: 0 0 16px; color: var(--shopier-title); font-size: 1.1rem; }
.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--shopier-title); }
.admin-form input, .admin-form textarea {
  border: 1px solid var(--shopier-border); border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--shopier-text);
}
.admin-form input:focus, .admin-form textarea:focus {
  outline: 2px solid rgba(20, 217, 173, .35); border-color: var(--shopier-primary);
}
.admin-form small { font-weight: 400; color: var(--shopier-muted); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-error { margin: 0; color: var(--shopier-danger); font-weight: 600; }
.form-hint { margin: 0; color: var(--shopier-muted); font-size: .8rem; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 10px !important; }
.media-fields { display: grid; gap: 16px; }
@media (min-width: 720px) { .media-fields { grid-template-columns: 1fr 1fr; } }
.media-field {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px dashed var(--shopier-border); border-radius: 12px;
}
.media-field h4 { margin: 0; color: var(--shopier-title); }
.media-preview { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--shopier-border); }
.media-preview.banner { width: 100%; height: 96px; }
.admin-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--shopier-border); border-radius: 14px; }
.admin-section .admin-table-wrap { border: none; border-radius: 0; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--shopier-border); vertical-align: middle;
}
.admin-table th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--shopier-muted); background: #fafbfc;
}
.admin-table tr:last-child td { border-bottom: none; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions a, .row-actions button {
  border: none; background: transparent; color: #0f766e; cursor: pointer; font-weight: 600; padding: 0;
}
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge--ok { background: var(--shopier-mint); color: #0f766e; }
.badge--warn { background: #fff3cd; color: #856404; }
.admin-empty {
  background: #fff; border: 1px dashed var(--shopier-border); border-radius: 14px; padding: 48px 20px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.product-manager { display: flex; flex-direction: column; gap: 8px; }
.delete-form { margin-top: 16px; }
.flash {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; font-weight: 500;
}
.flash--ok { background: var(--shopier-mint); color: #0f766e; }
.flash--error { background: #fde8e4; color: var(--shopier-danger); }