/* Custom Box Builder — storefront styles */

.sf-box-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sf-space-4, 1.5rem);
  margin-top: var(--sf-space-4, 1.5rem);
}

.sf-box-template-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--sf-border, #e5e7eb);
  border-radius: var(--sf-radius, 0.5rem);
  text-decoration: none;
  color: inherit;
  min-height: 180px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sf-box-template-card:hover {
  border-color: rgba(5, 150, 105, 0.45);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.sf-box-template-card:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.25);
  outline-offset: 3px;
}
.sf-box-template-card__name { font-weight: 700; font-size: 1.1rem; }
.sf-box-template-card__desc { font-size: 0.875rem; color: var(--sf-text-muted, #6b7280); }
.sf-box-template-card__meta { font-size: 0.8rem; color: var(--sf-text-muted, #6b7280); }
.sf-box-template-card__cta { margin-top: auto; font-size: 0.875rem; font-weight: 600; color: var(--sf-accent, #059669); }

/* Builder layout */
.sf-box-builder { padding: 1.5rem 0 3rem; }

.sf-box-builder__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sf-box-builder__title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.sf-box-builder__desc { color: var(--sf-text-muted, #6b7280); margin: 0.25rem 0 0; }

.sf-box-builder__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  background: var(--sf-surface-2, #f3f4f6);
  border-radius: var(--sf-radius, 0.5rem);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.sf-box-builder__progress--complete { background: #d1fae5; color: #065f46; }
.sf-box-builder__price { font-size: 1.1rem; }

.sf-box-builder__status {
  display: grid;
  gap: 0.45rem;
  margin: -0.5rem 0 1.5rem;
}
.sf-box-builder__status p {
  margin: 0;
  color: var(--sf-text-muted, #6b7280);
  font-size: 0.875rem;
}
.sf-box-builder__meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sf-surface-2, #f3f4f6);
  border: 1px solid var(--sf-border, #e5e7eb);
}
.sf-box-builder__meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--sf-accent, #059669);
  transition: width 0.2s ease;
}

.sf-box-builder__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .sf-box-builder__body { grid-template-columns: 1fr; }
  .sf-box-builder__tray { order: -1; position: static; }
  .sf-box-builder__progress { width: 100%; }
  .sf-box-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sf-box-builder__tray-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sf-box-builder__tray-remove { grid-column: 3; }
}

@media (max-width: 520px) {
  .sf-box-template-grid { grid-template-columns: 1fr; }
  .sf-box-builder__header { gap: 0.75rem; }
  .sf-box-builder__search .sf-btn { flex: 1; }
  .sf-box-product-grid { grid-template-columns: 1fr; }
  .sf-box-product-card { min-height: 0; }
}

/* Search */
.sf-box-builder__search { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sf-box-builder__search .sf-input { min-width: min(100%, 280px); flex: 1; }

/* Product grid */
.sf-box-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.sf-box-product-card {
  border: 1px solid var(--sf-border, #e5e7eb);
  border-radius: var(--sf-radius, 0.5rem);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 170px;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.sf-box-product-card--selected {
  border-color: var(--sf-accent, #059669);
  background: #f0fdf4;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.18);
}
.sf-box-product-card--unavailable { opacity: 0.5; }
.sf-box-product-card__name { font-weight: 600; font-size: 0.875rem; }
.sf-box-product-card__meta { font-size: 0.75rem; color: var(--sf-text-muted, #6b7280); }
.sf-box-product-card__price { font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.sf-box-product-card__actions { margin-top: auto; }
.sf-box-product-card__sold-out { font-size: 0.8rem; color: var(--sf-error, #dc2626); }

/* Qty controls */
.sf-box-qty { display: flex; align-items: center; gap: 0.35rem; }
.sf-box-qty__btn {
  width: 30px; height: 30px; border: 1px solid var(--sf-border, #e5e7eb);
  border-radius: 4px; background: #fff; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.sf-box-qty__btn:hover:not(:disabled) { border-color: var(--sf-accent, #059669); }
.sf-box-qty__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sf-box-qty__btn:focus-visible,
.sf-box-qty__remove:focus-visible,
.sf-box-builder__tray-remove:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.25);
  outline-offset: 2px;
}
.sf-box-qty__val {
  min-width: 54px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sf-box-qty__remove { background: none; border: none; color: var(--sf-error, #dc2626); cursor: pointer; font-size: 1.1rem; padding: 0 4px; }

/* Tray */
.sf-box-builder__tray {
  position: sticky;
  top: 1rem;
  background: var(--sf-surface, #fff);
  border: 1px solid var(--sf-border, #e5e7eb);
  border-radius: var(--sf-radius, 0.5rem);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sf-box-builder__tray-title { font-weight: 700; margin: 0; font-size: 1rem; }
.sf-box-builder__tray-empty { font-size: 0.875rem; color: var(--sf-text-muted, #6b7280); }
.sf-box-builder__tray-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sf-box-builder__tray-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.sf-box-builder__tray-item-name { flex: 1; font-weight: 500; }
.sf-box-builder__tray-item-qty { color: var(--sf-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.sf-box-builder__tray-item-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-box-builder__tray-remove { background: none; border: none; cursor: pointer; color: var(--sf-error, #dc2626); font-size: 1rem; padding: 0; }
.sf-box-builder__tray-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  border-top: 1px solid var(--sf-border, #e5e7eb);
  padding-top: 0.5rem;
}
.sf-box-builder__tray-total strong { font-variant-numeric: tabular-nums; }

/* Gift note */
.sf-box-builder__gift-note { display: flex; flex-direction: column; gap: 0.25rem; }
.sf-box-builder__char-count { font-size: 0.75rem; color: var(--sf-text-muted, #6b7280); text-align: right; }

/* CTA */
.sf-box-builder__cta-area { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-box-builder__cta-hint { font-size: 0.8rem; color: var(--sf-text-muted, #6b7280); margin: 0; }
.sf-box-builder__error { font-size: 0.875rem; color: var(--sf-error, #dc2626); margin: 0; }
.sf-btn--full { width: 100%; justify-content: center; }

@media (max-width: 768px) {
  .sf-box-builder__tray { order: -1; position: static; }
}