.shop-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.link-muted { color: var(--color-muted); }

.link-muted:hover { color: var(--color-primary); }

.form-label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: var(--spacing-xs); }

.form-help { color: var(--color-muted); font-size: 0.8125rem; margin: var(--spacing-xs) 0 0; }

.form-error { color: var(--color-danger); font-size: 0.8125rem; margin: var(--spacing-xs) 0 0; }

.form-error ul { margin: 0; padding-left: var(--spacing-md); }

.form-group { margin-bottom: var(--spacing-md); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }

.config-options { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.config-option {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  cursor: pointer;
  min-width: 0;
}

.config-option span { overflow-wrap: break-word; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

.shop-heading {
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.shop-heading__title { margin: 0 0 var(--spacing-xs); }

.shop-heading__subtitle { margin: 0; color: var(--color-muted); }

.shop-toolbar {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.shop-toolbar .form-control { min-width: 220px; flex: 1; }

.category-chips {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.chip:hover { text-decoration: none; border-color: var(--color-primary); color: var(--color-primary); }

.chip--active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-lg);
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-text);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.product-card:hover { text-decoration: none; border-color: var(--color-primary); transform: translateY(-2px); }

.product-card__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--color-surface-alt);
}

.product-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}

.product-card__body { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); flex: 1; min-width: 0; }

.product-card__category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin: 0;
  overflow-wrap: break-word;
}

.product-card__name { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: break-word; }

.product-card__foot { margin-top: auto; padding-top: var(--spacing-sm); }

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-lg);
}

.style-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-text);
}

.style-card:hover { text-decoration: none; border-color: var(--color-primary); }

.style-card__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: var(--color-surface-alt);
}

.style-card__body { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); flex: 1; min-width: 0; }

.style-card__name { margin: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: break-word; }

.style-card__text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  overflow-wrap: break-word;
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.detail-layout > * { min-width: 0; }

.detail-gallery__main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.detail-gallery__thumbs {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  flex-wrap: wrap;
}

.detail-gallery__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  cursor: pointer;
  background: var(--color-surface-alt);
}

.detail-name { margin: 0 0 var(--spacing-xs); overflow-wrap: break-word; }

.detail-category { color: var(--color-muted); margin: 0 0 var(--spacing-md); overflow-wrap: break-word; }

.detail-description { white-space: pre-line; overflow-wrap: break-word; }

.detail-meta { border-top: 1px solid var(--color-border); margin-top: var(--spacing-md); padding-top: var(--spacing-md); }

.cart-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }

.cart-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.cart-item__image {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  flex-shrink: 0;
}

.cart-item__main { flex: 1; min-width: 0; }

.cart-item__name { margin: 0 0 var(--spacing-xs); font-size: 1rem; overflow-wrap: break-word; }

.cart-item__meta { color: var(--color-muted); font-size: 0.8125rem; margin: 0 0 var(--spacing-sm); overflow-wrap: break-word; }

.cart-item__config { margin: 0 0 var(--spacing-sm); font-size: 0.8125rem; overflow-wrap: break-word; }

.cart-item__config dt { display: inline; font-weight: 600; }

.cart-item__config dd { display: inline; margin: 0 var(--spacing-sm) 0 var(--spacing-xs); }

.cart-item__tools { display: flex; gap: var(--spacing-sm); align-items: center; flex-wrap: wrap; }

.qty-form { display: flex; gap: var(--spacing-xs); align-items: center; }

.qty-form input { width: 70px; }

.uploader { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center; background: var(--color-surface); }

.uploader__drop { color: var(--color-muted); }

.uploader--dragover { border-color: var(--color-primary); background: var(--color-primary-soft); }

.file-list { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }

.file-list__item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
}

.file-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-list__size { color: var(--color-muted); font-size: 0.8125rem; }

.file-list__remove {
  border: none;
  background: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: var(--spacing-xs);
  line-height: 1;
}

.uploader__error { color: var(--color-danger); font-size: 0.875rem; margin-top: var(--spacing-sm); }

.confirmation-panel {
  max-width: 560px;
  margin: var(--spacing-2xl) auto;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
}

.confirmation-panel__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.case-id-pill {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.config-grid { display: flex; flex-direction: column; gap: var(--spacing-md); }

.config-field--error input,
.config-field--error select,
.config-field--error textarea { border-color: var(--color-danger); }

.required-mark { color: var(--color-danger); }

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-sm);
}

.room-option {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  min-width: 0;
}

.room-option span { overflow-wrap: break-word; }

.section-title { margin: var(--spacing-xl) 0 var(--spacing-md); }

.section-title:first-child { margin-top: 0; }

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-sm);
}

.attachment-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--spacing-sm);
  min-width: 0;
}

.attachment-card__body {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  min-width: 0;
}

.attachment-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .detail-layout { grid-template-columns: 1fr; }
  .cart-item { flex-direction: column; }
  .cart-item__image { width: 100%; height: 160px; }
}

@media (max-width: 640px) {
  .product-grid,
  .style-grid {
    grid-template-columns: 1fr;
  }
}