/* ─── Wine Home states ─────────────────────────────────────────────────────── */

.wh-state { display: block; }
.wh-hidden { display: none !important; }

/* ─── Scan state ───────────────────────────────────────────────────────────── */

.wh-scan-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  text-align: center;
}

.wh-scan-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.25rem;
}

.wh-scan-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.wh-scan-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-light);
  margin-bottom: 2.5rem;
}

.wh-scan-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.wh-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 2rem;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s;
  min-width: 200px;
  justify-content: center;
}

.wh-scan-btn:hover { background: #2a1f1a; }

.wh-scan-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wh-upload-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dark);
  padding: 0.75rem 2rem;
  min-width: 200px;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.wh-upload-btn:hover {
  border-color: var(--dark);
  color: var(--dark);
}

.wh-divider {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  opacity: 0.6;
}

.wh-type-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  max-width: 320px;
}

.wh-type-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--dark);
  background: #fff;
  outline: none;
  transition: border-color 0.18s;
}

.wh-type-input:focus { border-color: var(--amber); }

.wh-type-submit {
  padding: 0.75rem 1rem;
  background: var(--amber);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.wh-type-submit:hover { opacity: 0.85; }

.wh-scanning-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 1.5rem;
  min-height: 1.5em;
}

.wh-scanning-msg--success {
  color: #2c7c2c;
  font-weight: 500;
  animation: wh-success-fade 2.2s ease forwards;
}

@keyframes wh-success-fade {
  0%   { color: #2c7c2c; }
  55%  { color: #2c7c2c; }
  100% { color: var(--text-light); font-weight: 400; }
}

/* ─── Type-a-name toggle ───────────────────────────────────────────────────── */

.wh-type-toggle {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.25rem 0;
  transition: color 0.15s;
}

.wh-type-toggle:hover { color: var(--dark); }

.wh-type-section {
  width: 100%;
  max-width: 320px;
  margin-top: 0.25rem;
}

/* ─── Analysis loading state ───────────────────────────────────────────────── */

.wh-analysis-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem 1rem;
}

.wh-analysis-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: wh-spin 0.9s linear infinite;
}

@keyframes wh-spin {
  to { transform: rotate(360deg); }
}

.wh-analysis-status {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--dark);
  text-align: center;
  min-height: 1.6em;
  transition: opacity 0.3s ease;
}

/* ─── Collection list item meta ────────────────────────────────────────────── */

.wh-collection-list-item-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 300;
  margin-top: 0.1rem;
}

/* ─── Wine Home (confirm + intent router) ──────────────────────────────────── */

.wh-home-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.wh-trust-card {
  background: var(--cream-mid, #f8f5f0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 2.5rem;
}

.wh-trust-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}

.wh-trust-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 0.35rem;
}

.wh-trust-producer {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.wh-trust-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.wh-trust-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
}

.wh-trust-grape {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-light);
  font-style: italic;
}

.wh-rescan-btn {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.wh-rescan-btn:hover { opacity: 1; }

/* ─── Intent Router ────────────────────────────────────────────────────────── */

.wh-intent-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.wh-intent-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wh-intent-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.15s;
  width: 100%;
}

.wh-intent-btn:hover {
  border-color: var(--amber);
  background: #fefcf9;
}

.wh-intent-btn-inner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wh-intent-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dark);
}

.wh-intent-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-light);
}

.wh-intent-arrow {
  color: var(--amber);
  font-size: 1rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* ─── Learn / Pair content views ───────────────────────────────────────────── */

.wh-content-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

.wh-content-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 2rem;
  transition: color 0.15s;
}

.wh-content-back:hover { color: var(--dark); }

.wh-content-wine-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.wh-content-wine-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--text-light);
  margin-bottom: 2rem;
}

.wh-content-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.wh-content-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.wh-content-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.6rem;
}

.wh-content-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dark);
}

.wh-pair-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wh-pair-list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--dark);
  padding-left: 1rem;
  position: relative;
}

.wh-pair-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--amber);
}

.wh-avoid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wh-avoid-list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-light);
  padding-left: 1rem;
  position: relative;
}

.wh-avoid-list li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: #c0a090;
}

.wh-content-loading {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-light);
  padding: 3rem 0;
  text-align: center;
}

.wh-content-error {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: #c0605a;
  padding: 1.5rem 0;
}

.wh-add-to-tasting-btn {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.875rem 2rem;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s;
}

.wh-add-to-tasting-btn:hover { background: #2a1f1a; }

/* ─── Build A Tasting transition ───────────────────────────────────────────── */

.wh-build-header {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}

.wh-build-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1rem;
  transition: color 0.15s;
}

.wh-build-back:hover { color: var(--dark); }

/* ─── Collection bar ───────────────────────────────────────────────────────── */

.wh-collection-bar {
  background: var(--cream-mid, #f8f5f0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  font-family: 'DM Sans', sans-serif;
}

.wh-collection-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wh-collection-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.wh-collection-names {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--text-light);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-collection-view-btn {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color 0.15s;
}

.wh-collection-view-btn:hover { color: var(--dark); }

.wh-collection-progress {
  margin-top: 0.625rem;
}

.wh-collection-progress-msg {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-light);
  margin-bottom: 0.4rem;
}

.wh-collection-progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.wh-collection-progress-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ─── Add To Collection & Scan Another primary CTA ────────────────────────── */

.wh-save-scan-btn {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s;
  margin-bottom: 1.25rem;
}

.wh-save-scan-btn:hover { background: #2a1f1a; }

/* ─── Scan reinforcement (post-add progress card) ──────────────────────────── */

.wh-confirm-reinforcement {
  background: var(--cream-mid, #efe7da);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.wh-reinforce-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.wh-reinforce-progress {
  margin-bottom: 1.25rem;
}

/* ─── 2-wine tasting nudge ─────────────────────────────────────────────────── */

.wh-tasting-nudge {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--amber);
  font-style: italic;
  text-align: center;
  margin-bottom: 1rem;
}

/* ─── Locked intent button state ───────────────────────────────────────────── */

.wh-intent-btn--locked {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.wh-intent-btn--locked:hover {
  border-color: var(--border);
  background: #fff;
}

.wh-intent-btn--locked .wh-intent-arrow {
  color: var(--border);
}

/* ─── Collection expanded list ─────────────────────────────────────────────── */

.wh-collection-list-wrap {
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.wh-collection-list-header {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 0.75rem 1.25rem 0.5rem;
  background: var(--cream-mid, #f8f5f0);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wh-collection-list-close {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
}

.wh-collection-list-close:hover { color: var(--dark); }

.wh-collection-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wh-collection-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--dark);
}

.wh-collection-list-item:last-child { border-bottom: none; }

.wh-collection-list-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.75rem;
}

.wh-collection-remove-btn {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: color 0.15s;
}

.wh-collection-remove-btn:hover { color: #c0605a; }

.wh-coll-analyze-wrap {
  margin-top: 0.75rem;
}

.wh-collection-list-footer {
  padding: 0.75rem 1.25rem;
  background: var(--cream-mid, #f8f5f0);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.wh-collection-clear-btn {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.wh-collection-clear-btn:hover { color: #c0605a; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

/* ─── Analysis refresh button ──────────────────────────────────────────────── */

.wh-refresh-btn {
  display: block;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.wh-refresh-btn:hover { color: var(--dark); }

/* ─── Persistent tab navigation ────────────────────────────────────────────── */

.wh-tab-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 60px; /* below fixed nav (60px height) */
  z-index: 90;
  margin-top: 60px; /* push below the fixed nav on first render */
}

.wh-tab-nav-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 0;
}

.wh-tab-item {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}

.wh-tab-item:hover { color: var(--dark); }

.wh-tab-item.active {
  color: var(--dark);
  border-bottom-color: var(--amber);
  font-weight: 500;
}

.wh-tab-badge {
  background: var(--amber);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: 10px;
  padding: 0.1rem 0.4rem;
  min-width: 18px;
  text-align: center;
  margin-left: 0.2rem;
}

/* ─── Dashboard state ───────────────────────────────────────────────────────── */

.wh-dash-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

/* Active Tasting card */
.wh-active-card {
  background: var(--wine-dark);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.wh-active-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(200,138,62,0.18), transparent);
  pointer-events: none;
}

.wh-active-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.5rem;
}

.wh-active-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--amber-glow, #f5e6c8);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.wh-active-btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: var(--amber);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.15s;
}

.wh-active-btn:hover { opacity: 0.85; }

/* Dashboard header */
.wh-dash-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.wh-dash-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--dark);
}

.wh-dash-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--text-light);
}

/* Primary Scan Wine button */
.wh-dash-primary {
  margin-bottom: 2rem;
}

.wh-dash-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 2rem;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s;
}

.wh-dash-scan-btn:hover { background: #2a1f1a; }

/* Build A Tasting — primary position at 3+ wines */
.wh-dash-build-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background: var(--amber, #c17f3b);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s;
}
.wh-dash-build-primary-btn:hover { background: #a86e2f; }

.wh-dash-scan-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Dashboard mission card (0–2 wines) */
.wh-mission-card {
  background: var(--cream-mid, #efe7da);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.wh-mission-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}

.wh-mission-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-light, #6b5c4e);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.wh-mission-progress {
  margin-bottom: 1.25rem;
}

.wh-mission-progress-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.wh-mission-progress-fill {
  height: 100%;
  background: var(--amber, #c17f3b);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

.wh-mission-progress-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-light, #6b5c4e);
  letter-spacing: 0.04em;
}

.wh-mission-cta {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--dark, #1a1209);
  color: var(--cream, #f9f4ee);
  border: none;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}

.wh-mission-cta:hover { background: #2a1f1a; }

/* Collection Insight card */
.wh-insight-card {
  background: var(--cream-mid, #efe7da);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.wh-insight-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.6rem;
}

.wh-insight-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: var(--dark);
}

.wh-insight-refresh {
  display: inline-block;
  margin-top: 0.875rem;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.wh-insight-refresh:hover { color: var(--dark); }

/* Recently Added */
.wh-recently-section {
  margin-bottom: 2rem;
}

.wh-section-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.75rem;
  display: block;
}

.wh-recently-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wh-recently-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}

.wh-recently-item:last-child { border-bottom: none; }

.wh-recently-item:hover .wh-recently-name { color: var(--amber); }

.wh-recently-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--dark);
  transition: color 0.15s;
}

.wh-recently-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-light);
}

/* Secondary dashboard actions */
.wh-dash-secondary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.wh-dash-coll-btn,
.wh-dash-scan-sec-btn {
  flex: 1;
  min-width: 140px;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--dark);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, color 0.18s;
}

.wh-dash-coll-btn:hover,
.wh-dash-scan-sec-btn:hover {
  border-color: var(--dark);
  color: var(--dark);
}

/* ─── Past Tastings history section ─────────────────────────────────────────── */

.wh-history-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
}

.wh-history-card:last-child { border-bottom: none; }

.wh-history-card-body {
  flex: 1;
  min-width: 0;
  margin-right: 1rem;
}

.wh-history-theme {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wh-history-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-light);
}

.wh-history-view-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

.wh-history-view-btn:hover { color: var(--dark); }

.wh-history-empty {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-light);
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* ─── Collection view ───────────────────────────────────────────────────────── */

.wh-coll-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.wh-coll-empty {
  list-style: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-light);
  padding: 2rem 0;
  text-align: center;
}

.wh-coll-footer {
  padding: 1.25rem 0 0;
  display: flex;
  justify-content: flex-end;
}

/* ─── Collection size warning ───────────────────────────────────────────────── */

.wh-coll-size-warning {
  margin: 0.75rem 0 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(184, 134, 66, 0.08);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}

.wh-coll-size-warning-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.5;
}

/* ─── Collection sync loading skeleton ──────────────────────────────────────── */

.wh-sync-loading {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-light);
  font-style: italic;
  margin: 0.75rem 0;
  text-align: center;
}

/* ─── Intent selection screen ──────────────────────────────────────────────── */

.wh-intent-header {
  padding: 1.5rem 1.5rem 0.75rem;
}

.wh-back-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-mid);
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.75rem;
}

.wh-intent-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}

.wh-intent-subtitle {
  font-size: 0.875rem;
  color: var(--text-light, #8a7a6a);
  margin: 0 0 1.5rem;
}

.wh-intent-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.5rem 2rem;
}

.wh-intent-option-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--cream-mid, #efe7da);
  border: 1px solid transparent;
  border-radius: 0.75rem;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s;
}

.wh-intent-option-btn:hover,
.wh-intent-option-btn:focus {
  border-color: var(--amber, #c88a3e);
  outline: none;
}

.wh-intent-option-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark, #1a1210);
}

.wh-intent-option-desc {
  font-size: 0.8125rem;
  color: var(--text-light, #8a7a6a);
  line-height: 1.4;
}

.wh-intent-option-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wh-intent-recommended-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--amber, #c88a3e);
  background: rgba(200, 138, 62, 0.12);
  border: 1px solid rgba(200, 138, 62, 0.3);
  border-radius: 0.375rem;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.wh-intent-option-btn--recommended {
  border-color: rgba(200, 138, 62, 0.25);
  background: var(--cream-mid, #efe7da);
}

.wh-intent-option-btn--recommended:hover,
.wh-intent-option-btn--recommended:focus {
  border-color: var(--amber, #c88a3e);
}

.wh-intent-option-btn--selected {
  border-color: var(--amber, #c88a3e);
  background: rgba(200, 138, 62, 0.08);
}

.wh-intent-option-btn--selected:hover,
.wh-intent-option-btn--selected:focus {
  border-color: var(--amber, #c88a3e);
}

.wh-intent-generate-wrap {
  padding: 1.25rem 1.5rem 2rem;
}

.wh-intent-generate-btn {
  display: block;
  width: 100%;
  background: var(--dark, #1a1210);
  color: var(--cream, #f5ede3);
  border: none;
  border-radius: 0.75rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.18s;
}

.wh-intent-generate-btn:hover {
  background: #2a1f1a;
}

/* ─── Sequence Options (wh-sequence-options) ───────────────────────────────── */

.wh-seq-opt-header {
  padding: 1.5rem 1.25rem 0.75rem;
}

.wh-seq-opt-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a0a00;
  margin: 0.25rem 0 0.25rem;
}

.wh-seq-opt-subtitle {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}

.wh-seq-opt-body {
  padding: 0.75rem 1.25rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.wh-seq-opt-loading,
.wh-seq-opt-notice,
.wh-seq-opt-error {
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  padding: 2rem 0;
}

.wh-seq-opt-card {
  background: #fff;
  border: 1px solid #e8e0d8;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wh-seq-opt-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wh-seq-opt-card-label {
  font-weight: 600;
  font-size: 1rem;
  color: #1a0a00;
}

.wh-seq-opt-card-rationale {
  font-size: 0.825rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.wh-seq-opt-card-btn {
  align-self: flex-start;
  background: #3d1f0a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.25rem;
}

.wh-seq-opt-card-btn:hover {
  background: #2a1f1a;
}

.wh-seq-opt-back-notice-btn,
.wh-seq-opt-retry-btn {
  align-self: center;
  background: transparent;
  color: #3d1f0a;
  border: 1px solid #3d1f0a;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 0.875rem;
  cursor: pointer;
  margin-top: 0.5rem;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .wh-scan-title { font-size: 1.8rem; }
  .wh-trust-name { font-size: 1.5rem; }
  .wh-intent-btn { padding: 1rem 1.25rem; }
  .wh-dash-title { font-size: 1.6rem; }
  .wh-dash-secondary { flex-direction: column; }
}

/* ─── Guest upgrade banner ─────────────────────────────────────────────────── */

.wh-guest-upgrade-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.wh-guest-upgrade-text {
  flex: 1;
  min-width: 0;
}

.wh-guest-upgrade-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: white;
  margin-bottom: 0.2rem;
}

.wh-guest-upgrade-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.73rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

.wh-guest-upgrade-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: white;
  color: #1a1a2e;
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.wh-guest-upgrade-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wh-guest-upgrade-btn:hover:not(:disabled) {
  opacity: 0.88;
}

.wh-guest-upgrade-error {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  margin-top: 0.35rem;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
}

/* ─── Upgrade success banner ────────────────────────────────────────────────── */

.wh-upgrade-success-card {
  background: #f0faf4;
  border: 1px solid #86d6a0;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.wh-upgrade-success-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: #1a5c34;
  line-height: 1.4;
}

.wh-upgrade-success-dismiss {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: #1a5c34;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

/* ─── Generation loading state (PT-PRODUCT-006) ─── */

@keyframes wh-spin {
  to { transform: rotate(360deg); }
}

.wh-coll-build-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1rem 1.5rem;
  text-align: center;
}

.wh-gen-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(93, 35, 20, 0.15);
  border-top-color: #5d2314;
  border-radius: 50%;
  animation: wh-spin 0.9s linear infinite;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wh-gen-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1210;
  margin: 0 0 0.25rem;
}

.wh-gen-theme {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d2314;
  margin: 0 0 0.6rem;
  min-height: 1em;
}

.wh-gen-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: #6b5b53;
  margin: 0 0 1rem;
}

.wh-gen-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wh-gen-steps li {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: #8a7066;
  position: relative;
  padding-left: 1.1rem;
}

.wh-gen-steps li::before {
  content: '·';
  position: absolute;
  left: 0.3rem;
  color: #5d2314;
}

.wh-gen-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: #a08878;
  margin: 0;
  font-style: italic;
}

/* ─── Full-screen generating state (PT-PRODUCT-017) ─── */

.wh-gen-screen-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
}

.wh-gen-screen-wrap .wh-gen-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.5rem;
}

.wh-gen-screen-wrap .wh-gen-headline {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

/* ─── Wine Selection (wh-select) ─────────────────────────────────────────── */

.wh-select-helper {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--muted, #8a7a72);
  margin: 0 0 0.5rem;
}

.wh-select-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text, #2c1810);
  margin: 0 0 1rem;
  min-height: 1.2em;
}

.wh-select-list {
  list-style: none;
  margin: 0 0 5rem; /* leave room for sticky CTA */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wh-select-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border, #e8ddd8);
  border-radius: 8px;
  cursor: pointer;
  background: var(--surface, #faf7f5);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.wh-select-list-item--selected {
  border-color: var(--accent, #8b1a1a);
  background: #fff8f7;
}

.wh-select-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid var(--border, #e8ddd8);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wh-select-list-item--selected .wh-select-checkbox {
  background: var(--accent, #8b1a1a);
  border-color: var(--accent, #8b1a1a);
}

.wh-select-checkbox-check {
  display: none;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.wh-select-list-item--selected .wh-select-checkbox-check {
  display: block;
}

.wh-select-item-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text, #2c1810);
  flex: 1;
}

.wh-select-item-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--muted, #8a7a72);
}

.wh-select-cta-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: rgba(250, 247, 245, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border, #e8ddd8);
  z-index: 10;
}

.wh-select-generate-btn {
  display: block;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--accent, #8b1a1a);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.wh-select-generate-btn:disabled {
  background: var(--muted, #8a7a72);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ─── Search + Sort filter bar (wh-collection, wh-select) ─── */

.wh-filter-bar {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

.wh-filter-search {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #e8ddd8);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  background: #fff;
  color: var(--text, #2c1810);
}

.wh-filter-search:focus {
  outline: none;
  border-color: var(--accent, #8b1a1a);
}

.wh-filter-sort {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border, #e8ddd8);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  background: #fff;
  color: var(--text, #2c1810);
  cursor: pointer;
  flex-shrink: 0;
}

.wh-filter-count {
  font-size: 0.8125rem;
  color: var(--muted, #8a7a72);
  margin: 0 0 0.5rem;
  min-height: 1.1em;
}

.wh-filter-clear-btn {
  background: none;
  border: none;
  color: var(--accent, #8b1a1a);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
  text-decoration: underline;
}

/* ─── Wine Detail Panel (PT-PRODUCT-026-PHASE2C) ─── */

.wh-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
}

.wh-detail-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  max-height: 85vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wh-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border, #e8ddd8);
  flex-shrink: 0;
}

.wh-detail-header-identity {
  flex: 1;
  min-width: 0;
}

.wh-detail-wine-name {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  color: var(--dark, #2c1810);
  line-height: 1.3;
  word-break: break-word;
}

.wh-detail-wine-sub {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted, #8a7a72);
  line-height: 1.4;
}

.wh-detail-close {
  background: none;
  border: none;
  font-size: 1.125rem;
  color: var(--muted, #8a7a72);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.wh-detail-close:hover {
  color: var(--dark, #2c1810);
}

.wh-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.875rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.wh-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wh-detail-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8a7a72);
  margin: 0;
}

.wh-detail-section-value {
  font-size: 0.875rem;
  color: var(--dark, #2c1810);
  margin: 0;
  line-height: 1.45;
}

.wh-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.wh-detail-pill {
  display: inline-block;
  background: var(--bg-soft, #f9f5f0);
  border: 1px solid var(--border, #e8ddd8);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-size: 0.8125rem;
  color: var(--dark, #2c1810);
  line-height: 1.4;
}

.wh-detail-actions {
  padding: 0.875rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border, #e8ddd8);
  flex-shrink: 0;
}

.wh-detail-actions-default {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wh-detail-action-primary {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--accent, #8b1a1a);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.wh-detail-action-primary:hover {
  background: #721515;
}

.wh-detail-action-secondary {
  width: 100%;
  padding: 0.625rem 1rem;
  background: none;
  color: var(--muted, #8a7a72);
  border: 1px solid var(--border, #e8ddd8);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
}

.wh-detail-action-secondary:hover {
  color: #c0605a;
  border-color: #c0605a;
}

.wh-detail-actions-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wh-detail-confirm-msg {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--dark, #2c1810);
  text-align: center;
}

.wh-detail-confirm-btns {
  display: flex;
  gap: 0.625rem;
}

.wh-detail-confirm-cancel {
  flex: 1;
  padding: 0.625rem 1rem;
  background: none;
  color: var(--muted, #8a7a72);
  border: 1px solid var(--border, #e8ddd8);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
}

.wh-detail-confirm-remove {
  flex: 1;
  padding: 0.625rem 1rem;
  background: #c0605a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.wh-detail-confirm-remove:hover {
  background: #a04848;
}