/* ===== Multi-page: page sections ===== */
.page[hidden] { display: none !important; }

/* Topbar nav */
.page-nav { display: flex; gap: 4px; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 500;
  text-decoration: none; transition: all 0.15s;
}
.nav-link:hover { background: var(--panel-2); color: var(--text); }
.nav-link.active {
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);
  border-color: #2b5fd9; color: #fff;
}
.nav-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: rgba(255,255,255,0.15);
  font-size: 10px; font-weight: 700;
}
.nav-link.active .nav-badge { background: rgba(255,255,255,0.25); }
.nav-badge:empty { display: none; }

/* Upload page */
.upload-container {
  min-height: calc(100vh - 57px);
  display: grid; place-items: center;
  padding: 40px 20px;
  background: radial-gradient(circle at 30% 20%, rgba(74, 123, 255, 0.06), transparent 60%);
}
.drop-card {
  width: 100%; max-width: 600px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 40px 36px;
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
.drop-logo { display: flex; justify-content: center; margin-bottom: 8px; }
.drop-logo .logo {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  background: linear-gradient(135deg, #4a7bff, #8e4bff);
  border-radius: 16px; font-size: 28px; font-weight: 700; color: #fff;
}
.drop-card h1 { font-size: 24px; font-weight: 700; margin: 8px 0 6px 0; letter-spacing: 0.2px; }
.drop-sub { color: #8a93a6; margin: 0 0 28px 0; font-size: 14px; }
.drop-zone {
  display: block;
  border: 2px dashed rgba(110, 168, 255, 0.4);
  border-radius: 16px;
  padding: 36px 24px;
  background: rgba(110, 168, 255, 0.04);
  transition: all 0.18s;
  cursor: pointer;
  position: relative;
}
.drop-zone:hover, .drop-zone.over {
  border-color: #6ea8ff; background: rgba(110, 168, 255, 0.12);
  transform: scale(1.01);
}
.drop-icon { font-size: 38px; opacity: 0.6; margin-bottom: 12px; }
.drop-zone.over .drop-icon { opacity: 1; transform: translateY(-4px); }
.drop-text { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.drop-text strong { font-size: 16px; }
.drop-text span { color: #8a93a6; font-size: 12px; }
.drop-mobile-hint { display: none; }
@media (max-width: 768px) { .drop-mobile-hint { display: block !important; color: #6ea8ff !important; font-size: 13px !important; margin-top: 6px; } }
/* File input must be present in DOM and tappable but visually hidden.
   Hiding via display:none breaks <label for> on iOS Safari. */
#fileInput {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  pointer-events: none; overflow: hidden; clip: rect(0 0 0 0);
}
.btn-browse {
  padding: 10px 22px; border-radius: 10px;
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);
  color: #fff; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
}
.btn-browse:hover { filter: brightness(1.1); }
.drop-progress {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 20px; color: #8a93a6;
}
.drop-progress[hidden], .drop-error[hidden] { display: none !important; }

/* ===== Cart page ===== */
.cart-container { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px 24px; }
.cart-head h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px 0; }
.cart-list { display: flex; flex-direction: column; gap: 10px; }
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px; align-items: start;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.cart-item .ci-thumb {
  width: 64px; height: 64px; border-radius: 8px;
  background: #0a0c10; overflow: hidden;
}
.cart-item .ci-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item .ci-info { min-width: 0; }
.cart-item .ci-brand {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.cart-item .ci-name {
  font-size: 14px; font-weight: 500; line-height: 1.3;
  /* Allow up to 2 lines on phone for long product names instead of
     truncating mid-name with ellipsis (was: nowrap+ellipsis = users
     couldn't see what they had in cart) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item .ci-meta {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  overflow-wrap: break-word;
}
.cart-item .ci-qty { display: flex; align-items: center; gap: 4px; }
.cart-item .ci-qty button {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 16px; line-height: 1;
}
.cart-item .ci-qty button:hover { background: var(--panel); }
.cart-item .ci-qty input {
  width: 56px; padding: 5px 6px; text-align: center;
  border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13px;
  -moz-appearance: textfield;
}
.cart-item .ci-qty input::-webkit-outer-spin-button,
.cart-item .ci-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cart-item .ci-line { font-weight: 600; font-size: 14px; min-width: 90px; text-align: right; }
.cart-item .ci-line-tl { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.cart-item .ci-remove {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 18px;
}
.cart-item .ci-remove:hover { color: var(--danger); background: rgba(226,106,106,0.1); }
.cart-item.out-of-stock { opacity: 0.55; }
.cart-item.out-of-stock .ci-line::after {
  content: ' ⚠️ stok yetersiz'; font-size: 10px; color: var(--danger);
}

.cart-summary {
  margin-top: 20px; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(76,175,122,0.08), var(--panel) 60%);
  border: 1px solid rgba(76,175,122,0.4); border-radius: 12px;
}
.cart-summary .cs-row { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0; }
.cart-summary .cs-label { color: var(--muted); font-size: 13px; }
.cart-summary .cs-value { font-weight: 600; }
.cart-summary .cs-total { font-size: 22px; font-weight: 700; color: var(--success); }
.cart-summary .cs-total-tl { font-size: 14px; color: var(--muted); font-weight: 500; }

.cart-share { margin-top: 18px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.cart-share h3 { margin: 0 0 12px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.share-btn:hover { background: var(--panel); color: var(--text); }
.share-wa { background: #25d366; border-color: #25d366; color: #fff; }
.share-wa:hover { background: #20b554; color: #fff; }
.share-mail { background: #4a7bff; border-color: #4a7bff; color: #fff; }
.share-mail:hover { background: #3a6bef; color: #fff; }
.share-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }
.share-danger:hover { background: rgba(226,106,106,0.12); border-color: var(--danger); color: var(--danger); }
.share-link { background: linear-gradient(135deg, #4a7bff, #2b5fd9); border-color: #2b5fd9; color: #fff; font-weight: 600; }
.share-link:hover:not(:disabled) { filter: brightness(1.1); color: #fff; }
.share-link:disabled { opacity: 0.7; cursor: wait; }

/* Status banner above the share buttons (shown when viewing a shared cart) */
.cart-share-status {
  margin-bottom: 12px; padding: 10px 14px;
  background: rgba(74,123,255,0.1); border: 1px solid rgba(74,123,255,0.4);
  border-radius: 8px; font-size: 13px; color: #c8d3e8;
}
.cart-share-status.status-shared { background: rgba(46,163,93,0.1); border-color: rgba(46,163,93,0.4); color: #d4f0d4; }
.cart-share-status.status-saved { background: rgba(46,163,93,0.15); border-color: rgba(46,163,93,0.5); color: #d4f0d4; }
.cart-share-status .status-link { color: inherit; text-decoration: underline; margin-left: 6px; }

/* Shared carts list */
.shared-cart-items { display: flex; flex-direction: column; gap: 8px; }
.shared-cart-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px;
}
.shared-cart-item.is-current { border-color: rgba(46,163,93,0.55); background: rgba(46,163,93,0.06); }
.shared-cart-item .sci-info { min-width: 0; flex: 1; }
.shared-cart-item .sci-name { font-size: 14px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shared-cart-item .sci-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.shared-cart-item .sci-badge { display: inline-block; font-size: 10px; padding: 2px 6px;
  background: rgba(46,163,93,0.4); color: #fff; border-radius: 4px; margin-left: 6px;
  font-weight: 700; vertical-align: middle; }
.shared-cart-item .sci-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.shared-cart-item .sci-actions button {
  padding: 6px 11px; border-radius: 6px; font-size: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
}
.shared-cart-item .sci-actions button:hover:not(:disabled) { background: var(--panel-2); }
.shared-cart-item .sci-actions button:disabled { opacity: 0.5; cursor: default; }
.shared-cart-item .sci-delete:hover { background: rgba(226,106,106,0.15); border-color: var(--danger); color: var(--danger); }

/* ===== AI Report page ===== */
.ai-container { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px 24px; }
.ai-head h2 { font-size: 24px; font-weight: 700; margin: 0 0 4px 0; }
.ai-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 30px 0; }
.ai-error { background: rgba(226,106,106,0.1); border: 1px solid rgba(226,106,106,0.4);
  color: var(--danger); padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: 13px; }

/* Disclaimer panel — first thing shown on the report */
.ai-disclaimer {
  background: linear-gradient(135deg, rgba(74,123,255,0.08), rgba(46,163,93,0.04));
  border: 1px solid rgba(74,123,255,0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0 20px;
}
.ai-disclaimer .disclaimer-head { font-size: 13px; font-weight: 700; margin-bottom: 8px;
  color: var(--text); }
.ai-disclaimer ul { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.6;
  color: var(--text); }
.ai-disclaimer li { margin: 4px 0; }

.ai-hero {
  margin: 24px 0;
  padding: 24px;
  background: linear-gradient(135deg, rgba(74,123,255,0.08), rgba(46,163,93,0.06) 60%, var(--panel));
  border: 1px solid rgba(74,123,255,0.4);
  border-radius: 14px;
}
.ai-hero .hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
.ai-hero .hero-stat { display: flex; flex-direction: column; gap: 4px; }
.ai-hero .hero-stat .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ai-hero .hero-stat .value { font-size: 22px; font-weight: 700; color: var(--text); }
.ai-hero .hero-stat .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ai-hero .hero-stat.big .value { font-size: 28px; color: var(--success); }
.ai-hero .hero-meta { margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11px; color: var(--muted); }
.ai-hero .meta-sep { opacity: 0.5; }
.ai-hero .meta-sub { flex: 1; min-width: 200px; }

/* Budget utilization note — coverage explainer */
.budget-note {
  margin: 14px 0 0; padding: 12px 18px;
  background: rgba(245,180,0,0.08); border: 1px solid rgba(245,180,0,0.4);
  border-radius: 10px; font-size: 13px; color: var(--text);
}
.budget-note summary { cursor: pointer; }
.budget-note summary:hover { color: #f5b400; }
.budget-note .cov-body { margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(245,180,0,0.3); }
.budget-note p { margin: 8px 0; }
.budget-note .cov-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  margin: 10px 0;
}
.budget-note .cov-stats > div {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.budget-note .cov-num { font-size: 18px; font-weight: 700; color: var(--text); }
.budget-note .cov-lbl { font-size: 10px; color: var(--muted); }
.budget-note .cov-brands {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0;
}
.budget-note .cov-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 500;
}
.budget-note .cov-bad .cov-chip {
  background: rgba(226,106,106,0.12); color: #ff8585;
  border: 1px solid rgba(226,106,106,0.4);
}
.budget-note .cov-good .cov-chip {
  background: rgba(46,163,93,0.15); color: #4caf7a;
  border: 1px solid rgba(46,163,93,0.4);
}
.budget-note .cov-hint { font-size: 11px; color: var(--muted); font-style: italic; }

/* Budget selector — 3 tiers */
.ai-budget-selector {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px;
}
.ai-budget-selector .budget-label { font-size: 13px; font-weight: 600; }
.ai-budget-selector .budget-btn {
  padding: 8px 18px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600;
  transition: all 0.15s;
  position: relative;
}
.ai-budget-selector .budget-btn:hover { background: var(--panel); border-color: #6ea8ff; }
.ai-budget-selector .budget-btn.active {
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);
  border-color: #2b5fd9; color: #fff;
}
.ai-budget-selector .budget-btn:not(.ready):not(.active)::after {
  content: '⊕';
  margin-left: 6px; opacity: 0.5;
}
.ai-budget-selector .budget-btn.ready:not(.active)::after {
  content: '✓';
  margin-left: 6px; color: var(--success);
}
.ai-budget-selector .budget-hint { color: var(--muted); font-size: 12px; margin-left: auto; }
.ai-budget-selector .budget-hint b { color: var(--text); }

/* Sales scenarios — 4-card grid */
.ai-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.ai-scenario {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s;
}
.ai-scenario.sc-flat-fast { border-left: 3px solid #f5b400; }
.ai-scenario.sc-wholesale-mid { border-left: 3px solid #4a7bff; }
.ai-scenario.sc-direct-retail { border-left: 3px solid #8e4bff; }
.ai-scenario.sc-nl-retail { border-left: 3px solid #2ea35d; }

.ai-scenario .scen-head { display: flex; align-items: center; gap: 8px; }
.ai-scenario .scen-icon { font-size: 22px; }
.ai-scenario h4 { margin: 0; font-size: 15px; font-weight: 700; }
.ai-scenario .scen-desc { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ai-scenario .scen-formula {
  font-size: 11px; color: #8a93a6;
  background: var(--panel-2);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 3-outcome grid: Bad / Realistic / Good */
.ai-scenario .scen-outcomes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.ai-scenario .oc-col {
  text-align: center; padding: 10px 6px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2);
  display: flex; flex-direction: column; gap: 3px;
}
.ai-scenario .oc-col.oc-bad { border-color: rgba(226,106,106,0.35);
  background: linear-gradient(180deg, rgba(226,106,106,0.05), var(--panel-2)); }
.ai-scenario .oc-col.oc-mid { border-color: rgba(245,180,0,0.5);
  background: linear-gradient(180deg, rgba(245,180,0,0.08), var(--panel-2));
  box-shadow: 0 0 0 1px rgba(245,180,0,0.2); }
.ai-scenario .oc-col.oc-good { border-color: rgba(46,163,93,0.4);
  background: linear-gradient(180deg, rgba(46,163,93,0.06), var(--panel-2)); }
.ai-scenario .oc-head { font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--text); text-transform: uppercase; }
.ai-scenario .oc-st { font-size: 10px; color: var(--muted); }
.ai-scenario .oc-net { font-size: 14px; font-weight: 700; color: var(--text);
  margin-top: 4px; }
.ai-scenario .oc-bad .oc-net { color: #ff8585; }
.ai-scenario .oc-mid .oc-net { color: #f5b400; }
.ai-scenario .oc-good .oc-net { color: var(--success); }
.ai-scenario .oc-margin { font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 3px; align-self: center;
  background: rgba(255,255,255,0.05); }
.ai-scenario .oc-bad .oc-margin { color: #ff8585; background: rgba(226,106,106,0.12); }
.ai-scenario .oc-mid .oc-margin { color: #f5b400; background: rgba(245,180,0,0.15); }
.ai-scenario .oc-good .oc-margin { color: var(--success); background: rgba(46,163,93,0.18); }
.ai-scenario .oc-units { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ai-scenario .oc-risk { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.2; }

.ai-scenario .scen-meta {
  font-size: 11px; color: var(--muted);
  padding: 4px 0; border-top: 1px dashed var(--border);
}
.ai-scenario .scen-list {
  margin: 0; padding: 0; list-style: none;
  font-size: 11px; line-height: 1.6;
}
.ai-scenario .scen-list li { color: var(--muted); }
.ai-scenario .scen-pros li { color: #4caf7a; }
.ai-scenario .scen-cons li { color: #c19999; }

/* AboutYou anchor pill (small badge next to "NL satış tahmini" label) */
.ay-pill { display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 3px;
  font-weight: 700; letter-spacing: 0.4px; vertical-align: middle; margin-left: 4px;
  cursor: help; }
.ay-pill.ay-anchor { background: rgba(255,107,0,0.18); color: #ff9f4a;
  border: 1px solid rgba(255,107,0,0.45); }
.ay-pill.ay-blend { background: rgba(180,140,60,0.18); color: #d4a657;
  border: 1px solid rgba(180,140,60,0.4); }

/* Confidence pills */
.conf-pill { display: inline-block; font-size: 10px; padding: 3px 8px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.3px; }
.conf-pill.conf-high { background: rgba(46,163,93,0.2); color: #4caf7a;
  border: 1px solid rgba(46,163,93,0.5); }
.conf-pill.conf-medium, .conf-pill.conf-med { background: rgba(74,123,255,0.18); color: #6ea8ff;
  border: 1px solid rgba(74,123,255,0.5); }
.conf-pill.conf-low { background: rgba(180,180,180,0.15); color: #999;
  border: 1px solid rgba(180,180,180,0.4); }

/* NL fit badge */
.fit-badge { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px;
  font-weight: 600; }
.fit-badge.fit-good { background: rgba(46,163,93,0.18); color: #4caf7a;
  border: 1px solid rgba(46,163,93,0.4); }
.fit-badge.fit-niche { background: rgba(226,106,106,0.15); color: #ff8585;
  border: 1px solid rgba(226,106,106,0.4); }
.fit-badge.fit-maybe { background: rgba(180,180,180,0.15); color: #aaa;
  border: 1px solid rgba(180,180,180,0.3); }

/* Package economics row */
.ai-package .pkg-economics {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 12px;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.ai-package .pkg-economics span { color: var(--muted); }
.ai-package .pkg-economics b { color: var(--text); font-weight: 600; }
.ai-package .pkg-profit { color: var(--success); font-size: 13px; }

/* Pick card refinements */
.ai-pick { transition: border-color 0.15s; }
.ai-pick.conf-high { border-color: rgba(46,163,93,0.5); }
.ai-pick.conf-medium { border-color: rgba(74,123,255,0.4); }
.ai-pick .pick-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 8px;
}
.ai-pick .pick-badges {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.ai-pick .pick-rating { color: #f5b400; font-weight: 600; font-size: 12px; }
.ai-pick .pick-rating-none { color: var(--muted); font-weight: 400; }
.ai-pick .pick-rcount { color: var(--muted); font-weight: 400; font-size: 11px; }

/* Pick economics — 4-column EUR-first table */
.ai-pick .pick-economics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.ai-pick .econ-section { display: flex; flex-direction: column; gap: 2px; }
.ai-pick .econ-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.ai-pick .econ-value { font-size: 15px; font-weight: 700; color: var(--text); }
.ai-pick .econ-value.econ-nl { color: #6ea8ff; }
.ai-pick .econ-value.econ-profit { color: var(--success); }
.ai-pick .econ-sub { font-size: 10px; color: var(--muted); }

.ai-pick .pick-line-totals {
  font-size: 12px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 8px;
}
.ai-pick .pick-line-totals b { color: var(--text); }
.ai-pick .pick-line-totals .text-profit { color: var(--success); font-weight: 700; }
.ai-pick .pick-line-totals .sep { opacity: 0.4; }

.ai-pick .pick-footer {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ai-pick .verified-tick { color: var(--success); font-weight: 700; }
.ai-pick .unverified { color: var(--danger); }

@media (max-width: 600px) {
  .ai-pick .pick-economics { grid-template-columns: repeat(2, 1fr); }
  .ai-pick .pick-header { flex-direction: column; }
  .ai-pick .pick-badges { flex-direction: row; }
}

.ai-section-head { margin: 32px 0 12px 0; }
.ai-section-head h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; }
.ai-section-sub { font-size: 13px; color: var(--muted); margin: 0; }
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.ai-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ai-package {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.ai-package .pkg-images {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  height: 120px;
}
.ai-package .pkg-images img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
  background: #0a0c10;
}
.ai-package h4 { font-size: 16px; font-weight: 700; margin: 0; }
.ai-package .pkg-stats { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.ai-package .pkg-stat-bold { color: var(--text); font-weight: 600; }
.ai-package .pkg-margin { display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700;
  background: rgba(46,163,93,0.18); color: #4caf7a; border: 1px solid rgba(46,163,93,0.4); }
.ai-package .pkg-brands { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; }
.ai-package .pkg-brands span { background: var(--panel-2); padding: 2px 7px; border-radius: 4px; }
.ai-package .pkg-actions { display: flex; gap: 6px; margin-top: auto; }
.ai-package .pkg-actions button {
  flex: 1; padding: 8px; border-radius: 6px; font-size: 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.ai-package .pkg-actions .pkg-add-cart { background: linear-gradient(135deg, #4a7bff, #2b5fd9); border-color: #2b5fd9; color: #fff; font-weight: 600; }
.ai-package .pkg-actions button:hover { filter: brightness(1.1); }

.ai-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ai-pick {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; display: grid; grid-template-columns: 80px 1fr; gap: 12px;
}
.ai-pick .pick-thumb {
  width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: #0a0c10;
}
.ai-pick .pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-pick .pick-info { min-width: 0; }
.ai-pick .pick-brand { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ai-pick .pick-name { font-size: 14px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ai-pick .pick-economics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
  margin-top: 8px; font-size: 12px;
}
.ai-pick .pick-economics .e-label { color: var(--muted); }
.ai-pick .pick-economics .e-value { font-weight: 600; }
.ai-pick .pick-economics .e-margin { color: var(--success); font-weight: 700; }
.ai-pick .pick-reasons {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px;
}
.ai-pick .pick-reasons .reason {
  background: var(--panel-2); padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border);
}
.ai-pick .pick-source-link {
  display: inline-block; margin-top: 6px; font-size: 11px; color: #6ea8ff;
  text-decoration: underline;
}
.ai-pick .pick-source-link:hover { color: #fff; }
.ai-pick .pick-variants {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px;
  align-items: center;
}
.ai-pick .pv-label { font-weight: 600; }
.ai-pick .pv-chip {
  background: rgba(43,95,217,0.15); border: 1px solid rgba(43,95,217,0.4);
  color: #c8d3e8; padding: 2px 7px; border-radius: 4px; font-weight: 600;
}

.ai-methodology {
  margin-top: 32px; padding: 18px 22px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px;
}
.ai-methodology h4 { font-size: 14px; font-weight: 700; margin: 0 0 10px 0; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted); }
.ai-methodology ul { margin: 0; padding-left: 20px; color: var(--text); }
.ai-methodology li { margin: 4px 0; }
.methodology-footer { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted); line-height: 1.6; }

@media (max-width: 600px) {
  .ai-pick { grid-template-columns: 60px 1fr; }
  .ai-pick .pick-thumb { width: 60px; height: 60px; }
}

@media (max-width: 600px) {
  .cart-item { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .cart-item .ci-qty { grid-column: 1 / -1; justify-content: space-between; }
  .cart-item .ci-line { grid-column: 1 / -1; text-align: right; }
  .cart-item .ci-remove { grid-column: 3; grid-row: 1; }
}

/* Add-to-cart button on cards */
.add-cart-btn {
  position: absolute; bottom: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: #fff;
  border: none; cursor: pointer; font-size: 16px; font-weight: 600;
  display: grid; place-items: center;
  transition: opacity 0.15s, transform 0.12s;
  z-index: 2;
  /* Always visible on touch devices, fade-in on hover for desktop */
  opacity: 1;
}
.card:hover .add-cart-btn { opacity: 1; }
.card .add-cart-btn.in-cart { background: var(--success); opacity: 1; }
.add-cart-btn:hover { transform: scale(1.08); }
.add-cart-btn:active { transform: scale(0.95); }
/* On hoverable (desktop) devices only, hide unless hovered */
@media (hover: hover) and (pointer: fine) {
  .add-cart-btn { opacity: 0; }
  .card:hover .add-cart-btn, .card .add-cart-btn.in-cart { opacity: 1; }
}
.share-xlsx { background: #1f7a1f; border-color: #1f7a1f; color: #fff; }
.share-xlsx:hover { background: #2a8c2a; color: #fff; }
.share-fsl { background: linear-gradient(135deg, #b08a4a, #8b6a30); border-color: #6e5320; color: #fff; }
.share-fsl:hover { background: linear-gradient(135deg, #c69b58, #9d783a); color: #fff; filter: none; }

/* Mobile sticky cart bottom bar */
.cart-sticky-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  background: rgba(15,17,21,0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  align-items: center; gap: 12px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
}
.cart-sticky-bar[hidden] { display: none !important; }
.csb-totals { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.csb-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.csb-qty { font-size: 13px; color: var(--text); font-weight: 500; }
.csb-price { font-size: 18px; font-weight: 700; color: var(--success); margin-top: 2px; }
.csb-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
.csb-share-link, .csb-share {
  padding: 12px 14px; border-radius: 10px;
  color: #fff; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  min-height: 44px;
}
.csb-share-link {
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);   /* primary blue */
  flex: 1;
}
.csb-share {
  background: var(--panel-2, #181818);
  border: 1px solid var(--border, #2a2a2a);
  color: var(--text);
  padding: 12px 14px;        /* icon-only on mobile */
  font-size: 16px;
}
.csb-share-link:active, .csb-share:active { transform: scale(0.95); opacity: 0.9; }
@media (max-width: 760px) {
  .cart-sticky-bar { display: flex; }
}

/* FSL package modal */
.fsl-body { padding: 28px 30px; max-height: 90vh; overflow-y: auto; }
.fsl-header h2 { margin: 0 0 6px 0; font-size: 20px; }
.fsl-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px 0; line-height: 1.5; }
.fsl-sub code { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); }
.fsl-grid { display: grid; grid-template-columns: 1fr 280px; gap: 20px; margin-bottom: 22px; }
.fsl-edit { display: flex; flex-direction: column; gap: 12px; }
.fsl-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.fsl-edit input, .fsl-edit textarea {
  padding: 8px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px;
  font-family: inherit;
}
.fsl-edit input:focus, .fsl-edit textarea:focus { outline: none; border-color: var(--accent); }
.fsl-edit textarea { resize: vertical; }
.fsl-preview-card {
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fsl-prev-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fsl-prev-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border: 1px solid var(--border);
  border-radius: 2px; color: var(--muted);
}
.fsl-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.fsl-section h3 { margin: 0 0 12px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.fsl-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.fsl-size {
  padding: 5px 11px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12px; font-weight: 500;
}
.fsl-size-n { color: var(--muted); font-weight: 400; margin-left: 2px; }
.fsl-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.fsl-kv dt { color: var(--muted); }
.fsl-kv dd { margin: 0; word-break: break-word; }
.fsl-json {
  max-height: 280px; overflow: auto;
  padding: 14px;
  background: #0a0c10; border: 1px solid var(--border); border-radius: 8px;
  font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 11px;
  color: #c4d0e8; white-space: pre;
}
.fsl-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .fsl-grid { grid-template-columns: 1fr; }
  .fsl-body { padding: 20px 18px; }
  .fsl-kv { grid-template-columns: 110px 1fr; }
}

/* Modal v2: interactive size matrix */
.modal-cart-v2 {
  margin: 16px 0;
  padding: 14px;
  background: linear-gradient(135deg, rgba(74,123,255,0.06), var(--panel-2) 50%);
  border: 1px solid rgba(74,123,255,0.3);
  border-radius: 12px;
}
.mc-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mc-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.mc-incart-link { color: var(--success); font-size: 12px; text-decoration: none; }
.mc-incart-link:hover { text-decoration: underline; color: var(--success); }
.mc-size-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mc-size-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color 0.15s;
}
.mc-size-row.exhausted { opacity: 0.45; }
.mc-size-row:hover:not(.exhausted) { border-color: var(--accent); }
.mc-sz-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-sz-name { font-weight: 600; font-size: 14px; color: var(--text); }
.mc-sz-stock { font-size: 11px; color: var(--muted); }
.mc-sz-controls { display: flex; align-items: center; gap: 4px; }
.mc-sz-btn {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.mc-sz-btn:hover { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.mc-sz-btn.mc-sz-max { font-size: 12px; opacity: 0.7; }
.mc-sz-input {
  width: 56px; padding: 6px; text-align: center;
  border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600;
  -moz-appearance: textfield;
}
.mc-sz-input::-webkit-outer-spin-button, .mc-sz-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap;
}
.mc-sum-text { color: var(--muted); font-size: 13px; }
.mc-sum-text b { color: var(--text); font-size: 14px; }
.mc-actions { display: flex; gap: 8px; align-items: center; }
.mc-actions .add-btn {
  padding: 10px 18px; border-radius: 8px; min-height: 40px;
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);
  color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 600;
}
.mc-actions .add-btn:hover:not(:disabled) { filter: brightness(1.1); }
.mc-actions .add-btn:disabled, .mc-actions .add-btn.disabled {
  background: var(--panel-2); color: var(--muted); cursor: not-allowed; background-image: none;
}
.mc-actions .add-btn.added { background: var(--success); background-image: none; }
.mc-actions .mc-cart-link { font-size: 13px; color: var(--accent); text-decoration: none; padding: 8px; }
.mc-actions .mc-cart-link:hover { text-decoration: underline; }

/* Toast stack — multiple notifications stack vertically instead of
   replacing each other. Each toast animates in with translate, sits
   for ~2.4s, then fades out. */
.toast-stack {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0));
  left: 50%; transform: translateX(-50%);
  z-index: 9999;
  display: flex; flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 92vw;
  align-items: center;
}
.toast {
  padding: 11px 18px; border-radius: 10px;
  background: rgba(15,17,21,0.95); color: #e7e9ef;
  border: 1px solid rgba(74,123,255,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-size: 14px; font-weight: 500;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(24px) scale(0.95);
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%; text-align: center;
  line-height: 1.35;
}
.toast.visible { opacity: 1; transform: translateY(0) scale(1); }
/* Lift the whole stack above the sticky cart bar on /cart */
body.on-cart .toast-stack { bottom: calc(82px + env(safe-area-inset-bottom, 0)); }
.toast.toast-success { border-color: var(--success); background: linear-gradient(135deg, rgba(76,175,122,0.95), rgba(15,17,21,0.95)); }

/* Cart item v2 — wider main area for sizes */
.cart-item .ci-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cart-item .ci-sizes {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cart-item .ci-no-sizes { font-size: 12px; color: var(--muted); font-style: italic; }
.cart-item .ci-size {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
}
.ci-sz-label { font-weight: 600; font-size: 12px; min-width: 24px; text-align: center; padding: 0 4px; }
.ci-sz-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 13px; line-height: 1;
  display: grid; place-items: center;
}
.ci-sz-btn:hover { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.ci-sz-input {
  width: 42px; padding: 3px 4px; text-align: center;
  border-radius: 4px; background: var(--panel);
  border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 600;
  -moz-appearance: textfield;
}
.ci-sz-input::-webkit-outer-spin-button, .ci-sz-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ci-sz-stock { font-size: 9px; color: var(--muted); padding: 0 4px; }
.cart-item .ci-totals {
  display: flex; gap: 12px; align-items: baseline;
  padding-top: 6px; border-top: 1px dashed var(--border); font-size: 13px;
}
.ci-tot-qty b { color: var(--text); font-weight: 600; font-size: 16px; }
.ci-tot-price { font-weight: 600; color: var(--success); margin-left: auto; }
.ci-tot-price .ci-line-tl { font-size: 11px; color: var(--muted); font-weight: 400; }

/* Card cart button — new pill style */
.add-cart-btn .ac-icon { font-size: 16px; line-height: 1; }
.add-cart-btn .ac-num { font-size: 12px; font-weight: 700; margin-left: 2px; }
.add-cart-btn.in-cart { width: auto; min-width: 36px; padding: 0 8px; border-radius: 18px; }
.add-cart-btn.flash { animation: flash-pop 0.6s ease-out; }
@keyframes flash-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(76,175,122,0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,175,122,0); }
}

.nav-cart .nav-badge:not(:empty) { background: var(--success); color: #fff; }

/* ===== Archive page ===== */
.archive-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px 24px;
}
.archive-head h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px 0; }
.archive-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.archive-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.15s, transform 0.12s;
  display: flex; flex-direction: column; gap: 10px;
}
.archive-card:hover { border-color: #3a4459; transform: translateY(-2px); }
.archive-card.active {
  border-color: rgba(76, 175, 122, 0.55);
  background: linear-gradient(135deg, rgba(76,175,122,0.06), var(--panel) 50%);
}
.ac-head { display: flex; align-items: center; gap: 8px; }
.ac-name {
  font-weight: 600; font-size: 15px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-active-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--success); color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ac-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  color: var(--muted); font-size: 12px;
}
.ac-source {
  background: var(--panel-2); padding: 1px 6px;
  border-radius: 999px; border: 1px solid var(--border);
}
.ac-source-shared {
  background: rgba(74, 123, 255, 0.12); border-color: rgba(74, 123, 255, 0.4);
  color: var(--accent);
}
.ac-source-local {
  background: rgba(245, 180, 0, 0.1); border-color: rgba(245, 180, 0, 0.4);
  color: #f5b400;
}

/* Bookmarklet box */
.bookmarklet-box {
  margin-top: 36px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(242,122,26,0.08), var(--panel) 60%);
  border: 1px solid rgba(242,122,26,0.4);
  border-radius: 14px;
}
.bookmarklet-box h3 { margin: 0 0 12px 0; font-size: 16px; color: #ff9f5e; }
.bookmarklet-box p { margin: 8px 0; line-height: 1.5; color: var(--text); font-size: 13px; }
.bookmarklet-box ol { padding-left: 24px; margin: 12px 0; }
.bookmarklet-box ol li { margin: 6px 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.bookmarklet-drag {
  display: inline-block; margin-top: 10px;
  padding: 12px 22px; border-radius: 10px;
  background: linear-gradient(135deg, #f27a1a, #e5521a);
  color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: grab;
  border: 2px solid #c4511f;
  user-select: none;
}
.bookmarklet-drag:active { cursor: grabbing; }
.bookmarklet-drag:hover { color: #fff; filter: brightness(1.1); }

.ac-tyqueue { background: rgba(242,122,26,0.12); border-color: rgba(242,122,26,0.4); color: #ff9f5e; }
.ac-tyqueue:hover { background: rgba(242,122,26,0.22); }

/* Admin gate — frontend-only kid-brother lock.
   .admin-only elements hidden by default; visible when body.is-admin. */
.admin-only { display: none !important; }
body.is-admin .admin-only { display: revert !important; }
/* When admin IS logged in, hide the lock trigger (replaced by user menu) */
body.is-admin .admin-gate-trigger { display: none; }
/* Discreet lock button — placed below the bookmarklet area */
.admin-gate-trigger {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.admin-gate-trigger:hover { opacity: 1; }
.admin-lock-btn {
  background: transparent;
  border: 1px solid var(--border, #2a2a2a);
  color: var(--muted, #888);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.admin-lock-btn:hover {
  background: rgba(242,122,26,0.08);
  border-color: rgba(242,122,26,0.4);
  color: #ff9f5e;
}
/* Admin login modal */
.admin-login-panel {
  max-width: 360px;
  padding: 24px 28px;
}
.admin-login-panel h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  color: #ff9f5e;
}
.admin-field {
  margin: 14px 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.admin-field label {
  font-size: 12px;
  color: var(--muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.admin-field input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--panel, #181818);
  color: var(--text, #eee);
  font-size: 14px;
}
.admin-field input:focus {
  outline: none;
  border-color: rgba(242,122,26,0.6);
}
.admin-error {
  background: rgba(226,106,106,0.12);
  border: 1px solid rgba(226,106,106,0.4);
  color: #ff8585;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 4px;
}
.admin-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.admin-actions .btn-secondary {
  background: transparent;
  border: 1px solid var(--border, #2a2a2a);
  color: var(--muted, #888);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.admin-actions .btn-primary {
  background: linear-gradient(135deg, #f27a1a, #e5521a);
  border: 1px solid #c4511f;
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.admin-actions .btn-primary:hover { filter: brightness(1.1); }

/* Scrape progress bar */
.scrape-progress { margin-top: 10px; }
.sp-bar {
  height: 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  overflow: hidden;
}
.sp-fill {
  height: 100%; transition: width 0.3s;
  background: linear-gradient(90deg, #f27a1a, #e5521a);
}
.sp-text { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.sp-text b { color: var(--text); }
.ac-actions { display: flex; gap: 8px; margin-top: 4px; }
.ac-actions button {
  flex: 1; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); cursor: pointer; font-size: 12px; font-weight: 500;
}
.ac-actions button:hover:not(:disabled) { background: var(--panel); }
.ac-actions .ac-open {
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);
  border-color: #2b5fd9; color: #fff;
}
.ac-actions .ac-open:disabled {
  background: var(--panel-2); border-color: var(--border);
  color: var(--muted); cursor: not-allowed; opacity: 0.6;
  background-image: none;
}
.ac-actions .ac-delete:hover { background: rgba(226, 106, 106, 0.12); border-color: var(--danger); color: var(--danger); }

/* Active archive banner in sidebar */
.archive-banner {
  position: relative;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(74, 123, 255, 0.1), rgba(74, 123, 255, 0.02));
  border: 1px solid rgba(74, 123, 255, 0.25);
}
.archive-banner .aba-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--accent); font-weight: 700; margin-bottom: 4px;
}
.archive-banner .aba-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archive-banner .aba-meta {
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.archive-banner .aba-link {
  display: block; margin-top: 8px; font-size: 11px;
  color: var(--accent); text-decoration: none;
}
.archive-banner .aba-link:hover { text-decoration: underline; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15); border-top-color: #6ea8ff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.drop-error {
  margin-top: 18px; padding: 12px 16px;
  background: rgba(226, 106, 106, 0.12);
  border: 1px solid rgba(226, 106, 106, 0.4);
  border-radius: 10px; color: #ffb0b0;
  font-size: 13px; text-align: left;
  white-space: pre-wrap;
}
.drop-help { margin-top: 24px; text-align: left; color: #8a93a6; font-size: 13px; }
.drop-help summary { cursor: pointer; padding: 8px 0; }
.drop-help summary:hover { color: #e7e9ef; }
.help-grid { display: grid; gap: 8px; margin-top: 10px; padding: 14px;
  background: rgba(255,255,255,0.03); border-radius: 10px; font-size: 12px; line-height: 1.5; }
.help-grid b { color: #e7e9ef; }

.new-excel-btn { font-size: 16px; }

:root {
  --bg: #0f1115;
  --panel: #161a22;
  --panel-2: #1c2230;
  --border: #262c3a;
  --text: #e7e9ef;
  --muted: #8a93a6;
  --accent: #6ea8ff;
  --accent-2: #2b5fd9;
  --success: #4caf7a;
  --danger: #e26a6a;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px; line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(15,17,21,0.98), rgba(15,17,21,0.9));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }
.logo { display: inline-grid; place-items: center; width: 28px; height: 28px;
  background: linear-gradient(135deg, #4a7bff, #8e4bff); border-radius: 8px; font-weight: 700; }
.count-badge { font-size: 12px; color: var(--muted); background: var(--panel);
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); }

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); cursor: pointer; font-size: 18px;
}
.icon-btn:hover { background: var(--panel-2); }
.sidebar-toggle { display: none; }
/* Drawer-only close button — hidden on desktop, only shown inside the
   mobile filter drawer (see @media block below). */
.sidebar-close { display: none; }

.searchWrap { flex: 1; max-width: 680px; margin-left: auto; position: relative; }
.search-clear {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--panel-2, #1a1d24);
  border: 1px solid var(--border, #2a2a2a);
  color: var(--muted, #888);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.search-clear:hover {
  color: var(--text);
  background: var(--panel);
  border-color: var(--accent, #4a7bff);
}
#search {
  width: 100%; padding: 10px 14px; padding-right: 42px; border-radius: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  outline: none; font-size: 14px;
}
#search:focus { border-color: var(--accent); }

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: calc(100vh - 57px);
}
.sidebar {
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  background: var(--panel);
  position: sticky; top: 57px;
  height: calc(100vh - 57px);
  overflow-y: auto;
}
.filter-group { margin-bottom: 18px; }
.filter-group h3 { margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted); font-weight: 600; }
.mini-search {
  width: 100%; padding: 6px 10px; margin-bottom: 8px;
  border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13px;
}
.mini-search:focus { outline: none; border-color: var(--accent); }
.scroll-list { max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: var(--panel-2); }
.check-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; font-size: 13px; }
.check-row:hover { background: rgba(255,255,255,0.04); }
.check-row input { accent-color: var(--accent); }
.check-row .count { margin-left: auto; color: var(--muted); font-size: 11px;
  background: var(--panel); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); }
.check-row .text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); font-size: 12px; cursor: pointer; user-select: none;
}
.pill.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
/* Size pills are short (S/M/L/36/38) — keep them compact + uniform width */
.pill.pill-size {
  min-width: 38px;
  text-align: center;
  padding: 5px 8px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Expand/collapse toggle styled differently from size pills so it's
   clearly an action, not a filter value */
.pill.pill-size.pill-toggle {
  font-family: inherit;
  font-weight: 500;
  font-size: 11px;
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  min-width: auto;
  padding: 5px 12px;
}
.pill.pill-size.pill-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(74,123,255,0.08);
}

.price-range { display: flex; align-items: center; gap: 6px; }
.price-range input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.price-range input:focus { outline: none; border-color: var(--accent); }
.price-range span { color: var(--muted); }

#sortBy { width: 100%; padding: 8px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13px; }

.btn-reset { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px; }
.btn-reset:hover { background: var(--panel); }

.content { padding: 16px 20px 80px 20px; min-width: 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 10px; }
.result-stats { color: var(--muted); font-size: 13px; }
.view-controls { display: flex; gap: 4px; }
.view-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 16px; }
.view-btn.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }

.active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text);
}
.active-chip b { color: var(--muted); font-weight: 500; }
.active-chip button {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: var(--text);
  border: none; cursor: pointer; font-size: 13px; line-height: 1;
}
.active-chip button:hover { background: var(--danger); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.grid.list { grid-template-columns: 1fr; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform 0.12s, border-color 0.12s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-2px); border-color: #3a4459; }
.card .thumb { position: relative; aspect-ratio: 3/4; background: #0a0c10; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s; }
.card:hover .thumb img { transform: scale(1.04); }
.card .thumb .badge { position: absolute; top: 8px; left: 8px; font-size: 10px;
  background: rgba(0,0,0,0.55); padding: 3px 6px; border-radius: 6px; letter-spacing: 0.3px; }
.card .thumb .stock-badge { position: absolute; top: 8px; right: 8px; font-size: 10px;
  background: var(--success); padding: 3px 6px; border-radius: 6px; color: #fff; }
.card .thumb .stock-badge.out { background: var(--danger); }
.card .thumb.placeholder { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
/* Subtle camera icon as image placeholder — replaces "görsel yok" text
   for a cleaner, more universal visual cue */
.thumb-placeholder {
  font-size: 28px;
  opacity: 0.35;
  filter: grayscale(0.5);
}
.hero-placeholder {
  display: grid; place-items: center;
  height: 100%;
  background: var(--panel-2, #181818);
}
.hero-placeholder .thumb-placeholder { font-size: 64px; }

/* Shared cart syncing indicator — animated dot in the status banner
   while a sync POST is in flight, so user knows their edit is being
   saved (not silently lost). */
body.cart-syncing .cart-share-status.status-shared::after {
  content: '';
  position: absolute;
  top: 12px; right: 56px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4a7bff;
  animation: cart-sync-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(74,123,255,0.6);
}
@keyframes cart-sync-pulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(74,123,255,0); }
  50% { opacity: 1; box-shadow: 0 0 0 6px rgba(74,123,255,0); }
}

.card .info { padding: 10px 12px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.card .brand-name { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .title { font-size: 13px; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 6px; }
.card .price { font-weight: 600; font-size: 14px; }
.card .chip { font-size: 10px; color: var(--muted); padding: 2px 6px;
  background: var(--panel-2); border-radius: 999px; border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

.ty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 6px;
  padding-top: 6px; border-top: 1px dashed var(--border); }
.ty-price { font-size: 12px; color: #ff9f5e; font-weight: 600; }

.rating-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; }
.rating-stars { color: #f5b400; font-weight: 600; }
.rating-meta { color: var(--muted); }
.margin-chip { font-size: 10px; padding: 2px 6px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel-2); }
.margin-chip.pos { color: var(--success); border-color: rgba(76,175,122,0.5); }
.margin-chip.hot { color: #fff; background: #c4511f; border-color: #c4511f; }
.margin-chip.neg { color: var(--danger); border-color: rgba(226,106,106,0.5); }
.margin-chip.neutral { color: var(--muted); }

/* Source badge — shown on every priced card. Color-coded by origin:
   - .src-ty: Trendyol TR (orange — matches Trendyol brand)
   - .src-ty-locale: international Trendyol (PL/RO/AE/...) (blue)
   - .src-brand: brand-direct site (green)
   - .src-other: any other source (gray) */
.src-badge { font-size: 9px; padding: 2px 5px; border-radius: 4px; font-weight: 700;
  letter-spacing: 0.3px; white-space: nowrap; border: 1px solid; cursor: pointer; }
.src-badge.src-ty { color: #fff; background: rgba(242,122,26,0.85);
  border-color: #c4511f; }
.src-badge.src-ty:hover { background: #f27a1a; }
.src-badge.src-ty-locale { color: #c8d3e8; background: rgba(43,95,217,0.18);
  border-color: rgba(43,95,217,0.45); }
.src-badge.src-ty-locale:hover { background: rgba(43,95,217,0.32); color: #fff; }
.src-badge.src-brand { color: #d4f0d4; background: rgba(46,163,93,0.18);
  border-color: rgba(46,163,93,0.55); }
.src-badge.src-brand:hover { background: rgba(46,163,93,0.32); color: #fff; }
.src-badge.src-other { color: #c8d3e8; background: rgba(120,120,120,0.2);
  border-color: rgba(180,180,180,0.4); }

.ty-badge { background: linear-gradient(90deg, #f27a1a, #e5521a); color: #fff;
  border-color: #c4511f; }
.value-badge { background: linear-gradient(90deg, #1e7d45, #2ea35d); color: #fff;
  border-color: #1e7d45; font-weight: 600; }

.ty-panel { border: 1px solid #c4511f; border-radius: 10px; padding: 12px 14px; margin: 8px 0 14px 0;
  background: linear-gradient(135deg, rgba(242,122,26,0.08), rgba(194,81,31,0.03)); }
.ty-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: #ff9f5e; font-weight: 700; margin-bottom: 8px; }
.ty-grid { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 4px 12px; font-size: 13px; }
.ty-grid span { color: var(--muted); }
.ty-grid b { color: var(--text); font-weight: 600; }
.ty-grid b.pos { color: var(--success); }
.ty-grid b.hot { color: #ff9f5e; }
.ty-grid b.neg { color: var(--danger); }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ty-link { display: inline-block; padding: 6px 12px;
  background: #c4511f; color: #fff; border-radius: 8px; font-size: 12px; font-weight: 600; }
.ty-link:hover { background: #e5521a; color: #fff; }
.nl-link { display: inline-block; padding: 6px 12px;
  background: linear-gradient(135deg, #ae1c28 50%, #fff 50%, #21468b 50%);
  color: #fff; border-radius: 8px; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); }
.nl-link:hover { filter: brightness(1.15); color: #fff; }
.nl-link.nl-web { padding: 6px 8px; background: var(--panel-2); border-color: var(--border); text-shadow: none; color: var(--text); }
.nl-link.nl-web:hover { background: var(--panel); color: var(--text); filter: none; }

/* Multi-source search dropdown */
.multi-src {
  display: inline-block;
  margin: 0;
}
.multi-src-trigger {
  display: inline-block; padding: 7px 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 12px; font-weight: 600;
  list-style: none; user-select: none;
}
.multi-src-trigger::-webkit-details-marker { display: none; }
.multi-src-trigger:hover { background: var(--panel); border-color: var(--accent); }
.multi-src[open] .multi-src-trigger {
  background: var(--panel); border-color: var(--accent);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.multi-src-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 8px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.src-btn {
  padding: 7px 10px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 500;
  text-align: center; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.src-btn:hover { color: var(--text); }
.src-gshop:hover { background: rgba(74,123,255,0.15); border-color: var(--accent); }
.src-bol:hover { background: rgba(0,80,168,0.2); border-color: #0050a8; }
.src-wehkamp:hover { background: rgba(199,32,40,0.18); border-color: #c72028; }
.src-zalando:hover { background: rgba(255,103,0,0.2); border-color: #ff6700; }
.src-otrium:hover { background: rgba(58,11,232,0.18); border-color: #3a0be8; }
.src-amazon:hover { background: rgba(255,153,0,0.2); border-color: #ff9900; }
.src-pazarama:hover { background: rgba(255,107,0,0.18); border-color: #ff6b00; }
.src-modanisa:hover { background: rgba(176,138,74,0.2); border-color: #b08a4a; }
.src-hepsiburada:hover { background: rgba(255,96,0,0.18); border-color: #ff6000; }
.src-n11:hover { background: rgba(225,32,78,0.18); border-color: #e1204e; }
.src-ali:hover { background: rgba(255,76,0,0.2); border-color: #ff4c00; }

#fxRate { width: 100%; padding: 8px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13px; }
#fxRate:focus { outline: none; border-color: var(--accent); }
#marginFilter { width: 100%; padding: 8px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13px; }

/* List view overrides */
.grid.list .card { flex-direction: row; align-items: stretch; }
.grid.list .card .thumb { width: 140px; flex-shrink: 0; aspect-ratio: 1; }
.grid.list .card .info { flex: 1; justify-content: center; }

.sentinel { height: 40px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state-filter {
  padding: 64px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty-state-filter .empty-icon { font-size: 48px; opacity: 0.6; margin-bottom: 8px; }
.empty-state-filter h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text, #eee);
  font-weight: 600;
}
.empty-state-filter p {
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}
.empty-state-filter .btn-primary-action {
  margin-top: 16px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #4a7bff, #2b5fd9);
  color: #fff;
  border: 1px solid #2b5fd9;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
.empty-state-filter .btn-primary-action:hover { filter: brightness(1.1); }

/* Catalog skeleton card — animated placeholder while data loads */
.card.card-skeleton {
  pointer-events: none;
  user-select: none;
}
.card-skeleton .thumb.sk {
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--panel) 50%, var(--panel-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: 8px 8px 0 0;
}
.card-skeleton .info {
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.card-skeleton .sk-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--panel) 50%, var(--panel-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.card-skeleton .sk-line.sk-line-sm { width: 50%; height: 10px; }

.fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-2); color: #fff;
  border: none; cursor: pointer; font-size: 20px;
  box-shadow: var(--shadow);
  transition: opacity 0.2s;
}
.fab:hover { background: var(--accent); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.modal-panel {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; max-width: 1180px; width: 100%; max-height: 92vh; overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff; border: none; cursor: pointer; font-size: 22px; line-height: 1;
}
.modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; cursor: pointer; font-size: 26px; line-height: 1;
}
.modal-nav:hover { background: rgba(0,0,0,0.8); }
.modal-nav.prev { left: 12px; }
.modal-nav.next { right: 12px; }
.modal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.modal-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; overflow: auto; }
.modal-body .hero { background: #0a0c10; position: relative; min-height: 300px; }
.modal-body .hero img { width: 100%; height: 100%; max-height: 92vh; object-fit: cover; cursor: zoom-in; }
.modal-body .hero.zoom img { object-fit: contain; cursor: zoom-out; background: #000; }
.modal-body .details { padding: 24px 28px; overflow-y: auto; max-height: 92vh; }
.modal-body h2 { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; }
.modal-body .brand-label { color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.8px; margin-bottom: 10px; }
.modal-body .action-row { display: flex; gap: 8px; margin: 12px 0 6px 0; }
.modal-body .action-row button {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 12px;
}
.modal-body .action-row button:hover { background: var(--panel); }
.modal-body .action-row button.copied { background: var(--success); border-color: var(--success); color: #fff; }
.kv { display: grid; grid-template-columns: minmax(100px, 130px) 1fr; gap: 6px 14px; font-size: 13px; margin: 14px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.price-tag { font-size: 22px; font-weight: 700; margin: 6px 0 16px 0; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; }
.size-box { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); text-align: center; font-size: 12px; }
.size-box.out { opacity: 0.45; }
.size-box .size { font-weight: 600; font-size: 13px; }
.size-box .stock { font-size: 11px; color: var(--muted); margin-top: 2px; }
.size-box.in { border-color: rgba(76,175,122,0.4); }
.size-box.in .stock { color: var(--success); }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar-toggle { display: inline-grid; place-items: center; }
  .sidebar {
    /* Full-height overlay drawer; uses --topbar-h set by JS to start below
       the sticky topbar, regardless of how it wraps on small screens */
    position: fixed; top: var(--topbar-h, 57px); left: 0;
    height: calc(100vh - var(--topbar-h, 57px));
    height: calc(100dvh - var(--topbar-h, 57px));
    z-index: 15;
    width: 320px; max-width: 90vw;
    border-right: 1px solid var(--border);
    transform: translateX(-105%); transition: transform 0.22s;
    box-shadow: var(--shadow);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sidebar.open { transform: translateX(0); }
  /* Filter drawer close button — sticky inside the drawer at the top so
     users always have a visible "X" to dismiss. Backdrop click works too
     but discoverable affordance matters on mobile. */
  .sidebar-close {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0;
    margin: -16px -14px 14px -14px;
    padding: 12px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    z-index: 2;
    font-size: 13px; font-weight: 600; color: var(--text);
  }
  .sidebar-close button {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sidebar-close button:hover { color: var(--text); border-color: var(--accent); }
  .sidebar-backdrop {
    position: fixed;
    top: var(--topbar-h, 57px); left: 0; right: 0; bottom: 0;
    z-index: 14;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  }
  /* Search clear button bigger on mobile (touch target) */
  .search-clear { width: 36px; height: 36px; font-size: 22px; right: 4px; }
  #search { padding-right: 48px; }
  /* Active filter chips: horizontal scroll on mobile so 5+ chips don't
     wrap into ugly uneven rows. Hidden scrollbar, swipe to see all. */
  .active-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .active-chips::-webkit-scrollbar { display: none; }
  .active-chips .chip { flex-shrink: 0; }
  /* Result stats text shouldn't overflow on small screens */
  .result-stats {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; min-width: 0;
  }
  /* Card tap feedback — subtle scale on press, replacing the noisy
     hover transform (hover doesn't apply on touch anyway) */
  .card { transition: transform 0.15s, box-shadow 0.15s; }
  .card:active { transform: scale(0.97); }
  /* Sidebar pill-row tighter padding on phone */
  .sidebar .pill-row { gap: 5px; }
  .sidebar .pill { padding: 6px 11px; font-size: 12px; min-height: 32px; }
  /* Sidebar scroll-list height capped tighter so multiple groups fit */
  .sidebar .scroll-list { max-height: 200px; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-body .hero {
    aspect-ratio: auto;
    max-height: 45vh;        /* leave room for details + size matrix below */
    min-height: 240px;
  }
  .modal-body .hero img { object-fit: contain; max-height: 100%; }
  .modal-nav { width: 36px; height: 36px; font-size: 22px; }
}
@media (max-width: 760px) {
  /* Topbar: brand + nav on row 1, search full-width row 2 */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .brand { gap: 8px; min-width: 0; flex: 1; }
  .brand h1 { font-size: 14px; }
  .brand .count-badge { display: none; } /* hide secondary badges */
  .brand #countBadge { display: inline-block; font-size: 11px; padding: 2px 7px; }
  /* Mobile nav: vertical stack (icon top, label bottom) so 5+ buttons
     fit on a single row without text wrapping ("Paylaşılan Sepetler" etc.) */
  .page-nav {
    width: 100%;
    flex-basis: 100%;
    order: 50;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .page-nav::-webkit-scrollbar { display: none; }
  .nav-link {
    flex-direction: column;
    flex: 1 1 0;
    min-width: 64px;
    padding: 6px 4px;
    gap: 2px;
    min-height: 48px;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    justify-content: center;
  }
  .nav-link .ni {
    font-size: 18px;
    line-height: 1;
  }
  .nav-link .nl {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Long labels get a shorter alternative via data-short on the label.
     CSS replaces the rendered text on phones to fit the cell. */
  .nav-link .nl[data-short]::before {
    content: attr(data-short);
  }
  .nav-link .nl[data-short] {
    font-size: 0;        /* hide original text */
  }
  .nav-link .nl[data-short]::before {
    font-size: 10px;     /* render the short version at normal size */
  }
  .nav-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    font-size: 9px;
    padding: 0 4px;
    border-radius: 8px;
  }
  .nav-link { position: relative; }
  .searchWrap { flex-basis: 100%; order: 99; max-width: none; }
  #search { padding: 10px 12px; font-size: 16px; /* prevent iOS zoom on focus */ }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .kv { grid-template-columns: 100px 1fr; }
  .modal-body .details { padding: 20px; }
  /* Larger tap targets */
  .add-cart-btn { width: 40px; height: 40px; font-size: 18px; }
  .ac-actions button { padding: 10px 12px; font-size: 13px; min-height: 40px; }
  .share-btn { padding: 11px 14px; min-height: 44px; font-size: 13px; }
  .modal-cart input { width: 80px; padding: 10px; font-size: 16px; }
  .modal-cart .add-btn { padding: 12px 14px; font-size: 14px; min-height: 44px; }
  .modal-close { width: 42px; height: 42px; }
  .modal-nav { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  /* Cart items: tighter padding, full-width sizes for tap-friendly rows */
  .cart-item { grid-template-columns: 64px 1fr 36px; gap: 10px; padding: 10px; }
  .cart-item .ci-thumb { width: 64px; height: 64px; }
  .ci-name { font-size: 14px; line-height: 1.3; }

  /* Each size on its own row, larger tap targets */
  .cart-item .ci-sizes { flex-direction: column; gap: 6px; }
  .ci-size {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--panel-2);
    justify-content: space-between;
  }
  .ci-sz-label { min-width: 36px; font-size: 14px; }
  .ci-sz-btn { width: 36px; height: 36px; font-size: 18px; }
  .ci-sz-input { width: 60px; padding: 7px 4px; font-size: 16px; height: 36px; }
  .ci-sz-stock { display: inline; font-size: 10px; }

  /* Modal size matrix: bigger tap targets */
  .mc-size-row { padding: 10px 8px; }
  .mc-sz-btn { width: 38px; height: 38px; font-size: 20px; }
  .mc-sz-input { width: 64px; padding: 8px 4px; font-size: 16px; }

  /* Cart-page padding leaves room for sticky bar */
  .cart-container { padding-bottom: 100px; }

  /* Cart share buttons stack better */
  .share-row { flex-direction: column; }
  .share-btn { width: 100%; justify-content: center; }

  /* Tighter card layout */
  .card .info { padding: 8px 10px 10px 10px; }
  .card .title { font-size: 12px; }
  .card .price { font-size: 13px; }
  .card .chip { font-size: 9px; }

  /* Cart page padding */
  .cart-container, .archive-container { padding: 20px 14px 60px 14px; }
  .cart-head h2, .archive-head h2 { font-size: 18px; }
  .cart-summary { padding: 14px 16px; }
  .cs-total { font-size: 18px; }
}

/* GLOBAL: HTML `hidden` attribute must always hide. Without !important,
   any later rule like `.foo { display: flex }` on the same element wins
   over the UA stylesheet's [hidden] { display: none } and the element
   stays visible even when JS sets el.hidden = true. */
[hidden] { display: none !important; }

/* Cart size row: highlight when qty exceeds available stock — happens
   when stock dropped after item was added to cart (esp. shared carts
   loaded from server with stale snapshots). */
.ci-size.over-stock {
  background: rgba(245, 180, 0, 0.08);
  border: 1px solid rgba(245, 180, 0, 0.4);
  border-radius: 6px;
  padding: 4px 6px;
}
.ci-sz-stock.over { color: #f5b400; font-weight: 600; }
/* Sold-out size in modal — visually disabled */
.mc-sz-btn:disabled,
.mc-sz-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Cart shared-status banner — compact one-line + ⋮ menu (less clutter) */
.cart-share-status.status-shared {
  position: relative;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(74,123,255,0.12), var(--panel-2, #181818));
  border: 1px solid rgba(74,123,255,0.4);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}
.cart-share-status .csh-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
}
.cart-share-status .csh-icon { flex-shrink: 0; }
.cart-share-status .csh-name {
  font-weight: 600;
  color: var(--text, #eee);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-share-status .csh-hint {
  color: var(--muted, #888); font-size: 11px; flex-shrink: 0;
}
.cart-share-status .csh-menu-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(74,123,255,0.3);
  border-radius: 6px;
  color: var(--accent, #4a7bff);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-share-status .csh-menu-btn:hover { background: rgba(74,123,255,0.1); }
.cart-share-status .csh-menu {
  position: absolute;
  top: calc(100% + 4px); right: 12px;
  z-index: 10;
  min-width: 240px;
  background: var(--panel, #0f1115);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
/* CRITICAL: explicit display:flex above wins specificity over the UA
   stylesheet's [hidden] {display:none}. Without this rule the menu
   stays visible even when JS sets menu.hidden = true. */
.cart-share-status .csh-menu[hidden] { display: none !important; }
.cart-share-status .csh-menu-item {
  display: block; padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--text, #eee);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  min-height: 44px;
}
.cart-share-status .csh-menu-item:hover {
  background: rgba(74,123,255,0.1);
  color: var(--accent, #4a7bff);
}
.cart-share-status .csh-menu-item.csh-menu-danger { color: #ff8585; }
.cart-share-status .csh-menu-item.csh-menu-danger:hover { background: rgba(226,106,106,0.1); color: #ff8585; }
@media (max-width: 480px) {
  .cart-share-status .csh-hint { display: none; }
  .cart-share-status .csh-menu { left: 12px; right: 12px; min-width: 0; }
}

/* Share row — primary actions get 1 prominent button + 2 supporting */
.share-row-primary { display: flex; gap: 8px; flex-wrap: wrap; }
.share-row-primary .share-btn { flex: 1; min-width: 110px; min-height: 44px; }
.share-row-primary .share-primary {
  flex: 2;        /* Paylaş button takes 2x width — clearly the primary action */
  background: linear-gradient(135deg, #4a7bff, #6e9aff);
  color: #fff;
  border-color: #3a6bee;
  font-weight: 700;
}
.share-row-primary .share-primary:hover { filter: brightness(1.08); }
.share-row-primary .share-more {
  flex: 0 0 auto;
  background: var(--panel-2, #181818);
  border: 1px dashed var(--border, #2a2a2a);
  color: var(--muted, #888);
  font-size: 12px;
}
.share-row-primary .share-more:hover { color: var(--text, #eee); border-color: var(--accent, #4a7bff); }
.share-row-secondary {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #2a2a2a);
}
.share-row-secondary .share-btn { flex: 1; min-width: 110px; min-height: 40px; }
@media (max-width: 480px) {
  .share-row-primary .share-btn,
  .share-row-secondary .share-btn { flex-basis: 100%; }
}

/* Cart collapse/expand toggle bar — at the top of cart-list when cart has
   more items than the preview cap. Sticky so it's always reachable. */
.cart-collapse-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(74,123,255,0.08), var(--panel-2, #181818));
  border: 1px solid rgba(74,123,255,0.3);
  border-radius: 10px;
  position: sticky;
  top: calc(var(--topbar-h, 57px) + 8px);
  z-index: 5;
}
.cart-collapse-bar .collapse-btn {
  background: var(--panel, #0f1115);
  border: 1px solid var(--accent, #4a7bff);
  color: var(--accent, #4a7bff);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 44px;
}
.cart-collapse-bar .collapse-btn:hover { background: rgba(74,123,255,0.1); }
.cart-collapse-bar .collapse-btn:active { transform: scale(0.98); }
.cart-collapse-bar .collapse-hint {
  font-size: 12px;
  color: var(--muted, #888);
}

/* AI report — diversity / concentration insight panel */
.hero-diversity {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--panel-2, #181818);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 10px;
  font-size: 13px;
  display: flex; flex-direction: column; gap: 8px;
}
.hero-diversity .div-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.hero-diversity .div-label { color: var(--muted, #888); font-size: 12px; min-width: 180px; }
.hero-diversity .div-vals { color: var(--text); flex: 1; }
.hero-diversity .div-vals b { color: #ff9f5e; font-weight: 600; }
.hero-diversity .div-warn {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(245,180,0,0.1);
  border: 1px solid rgba(245,180,0,0.3);
  border-radius: 6px;
  color: #f5b400;
  font-size: 12px;
}
.hero-diversity .div-ok {
  margin-top: 4px;
  font-size: 12px;
  color: #4caf7a;
}

/* ========== Mobile UX hardening (round 7) ==========
   Targeted fixes for touch targets, AI scenario layout on phone,
   iOS keyboard / safe-area, search input zoom, tap delay. */

/* Eliminate 300ms tap delay on legacy iOS Safari */
button, a, input[type=button], input[type=submit], .pill, .nav-link, .ci-sz-btn, .mc-sz-btn, .add-cart-btn, .ac-actions button, .share-btn {
  touch-action: manipulation;
}

@media (max-width: 600px) {
  /* AI report scenarios: 3-column grid is too narrow on phone — stack vertically.
     Highlight the realistic outcome since users won't see all three at once. */
  .ai-scenario .scen-outcomes {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ai-scenario .oc-col {
    padding: 12px 10px;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
  }
  .ai-scenario .oc-col .oc-head {
    flex-basis: 100%;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
  }
  .ai-scenario .oc-col .oc-net { font-size: 16px; }

  /* Cart sticky bar: keyboard-safe positioning */
  .cart-sticky-bar {
    z-index: 60;
    /* env(keyboard-inset-height) on iOS 16.4+ pushes bar above keyboard */
    bottom: env(safe-area-inset-bottom, 0);
  }

  /* Hide back-to-top FAB while sticky cart bar is visible (cart page) */
  body.on-cart .fab { display: none; }
}

@media (max-width: 480px) {
  /* Bigger touch targets — Apple HIG min 44×44, Material 48×48 */
  .ci-sz-btn { width: 44px; height: 44px; }
  .mc-sz-btn { width: 44px; height: 44px; }
  .modal-close { width: 48px; height: 48px; font-size: 22px; }
  .add-cart-btn { width: 44px; height: 44px; }

  /* Modal layout: stack hero + details vertically on phone */
  .modal-body { grid-template-columns: 1fr; }
  .modal-body .hero { max-height: 50vh; }

  /* Search input: 16px font prevents iOS auto-zoom on focus */
  #search, input[type=text], input[type=search], input[type=number] {
    font-size: 16px;
  }

  /* Long button labels wrap instead of overflowing */
  .share-btn { word-break: break-word; }
}

/* Active-state visual feedback (compensate for hover-only patterns on touch) */
@media (hover: none) {
  .pill:active, .nav-link:active, .add-cart-btn:active,
  .share-btn:active, .ci-sz-btn:active, .mc-sz-btn:active {
    opacity: 0.7;
    transform: scale(0.96);
  }
}

/* ========== Mobile UX hardening (round 8) ==========
   Pull-to-refresh prevention, swipeable modal hint, image quality,
   safe-area for all sticky elements. */

/* Prevent accidental browser pull-to-refresh on cart sync — when user
   swipes down on the cart page, browser shouldn't reload the page mid-edit.
   `overscroll-behavior-y: contain` keeps scroll within the element. */
html, body { overscroll-behavior-y: contain; }

/* Sticky topbar respects iOS notch */
.topbar { padding-top: calc(10px + env(safe-area-inset-top, 0)); }

/* Better tap feedback on Android — remove default highlight color
   (we provide our own active states above) */
* { -webkit-tap-highlight-color: transparent; }

/* Long press on images shouldn't show "Save Image" / "Copy Image"
   prompt by default — users on phones often hit this trying to scroll
   the catalog. Set to default if user really needs to download. */
.card img, .ai-pick img, .pkg-images img, .modal-body .hero img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Modal swipe-down hint on mobile — visual affordance that the modal
   can be dragged down to close. The actual swipe handler is in app.js. */
@media (max-width: 600px) {
  .modal-panel {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  .modal-panel::before {
    content: '';
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
  }
  /* Modal occupies more vertical space on phone */
  .modal-panel {
    max-height: calc(100dvh - 20px);
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal-backdrop { background: rgba(0, 0, 0, 0.6); }
  /* Modal-close pulled away from drag handle */
  .modal-close { top: 14px; right: 12px; }
}

/* Larger image rendering on retina screens to use available pixels */
.card img, .ai-pick img { image-rendering: -webkit-optimize-contrast; }

/* Skeleton placeholder while image loads — soft pulse */
.card .ci-thumb:empty,
.card img:not([src]) {
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--panel) 50%, var(--panel-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Product modal "Sepete Ekle" success ripple — gives tactile feedback
   on tap which is more visible than just a text change on mobile */
@keyframes cart-add-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 122, 0.5); }
  60% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(76, 175, 122, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 122, 0); }
}
.add-btn.added, .modal-cart .add-btn.added {
  animation: cart-add-pulse 0.5s ease-out;
  background: var(--success, #4caf7a) !important;
}

/* Cart sticky-bar tap feedback */
.cart-sticky-bar button:active { transform: scale(0.96); opacity: 0.8; }

/* Body locked while modal is open — prevent iOS bounce-scroll behind modal */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* Mobile-optimized AI report budget selector — wrap to one row each on phone */
@media (max-width: 480px) {
  .ai-budget-selector {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ai-budget-selector .budget-btn {
    flex: 1;
    min-height: 44px;
    font-size: 13px;
    padding: 8px 10px;
  }
  /* Hero stats: 2 columns on phone instead of 4 (cramped) */
  .ai-hero .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ai-hero .hero-stat {
    padding: 10px 12px;
  }
  .ai-hero .hero-stat .value { font-size: 18px; }
  .ai-hero .hero-stat .label { font-size: 11px; }
  .ai-hero .hero-stat .sub { font-size: 10px; }
  /* Diversity panel — stack labels and values vertically */
  .hero-diversity .div-row { flex-direction: column; gap: 4px; }
  .hero-diversity .div-label { min-width: auto; }
}

/* ========== Vinted listings page ========== */
.vinted-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 18px 80px;
}
.vinted-head h2 { margin: 0 0 4px 0; }
.vinted-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vinted-status {
  font-size: 12px;
  color: var(--muted);
}
.vinted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
  margin-top: 20px;
}
.vinted-card {
  background: #fff;
  color: #111;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vinted-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
}
.vinted-card-empty {
  background: #fff;
  color: #555;
  padding: 30px 20px;
  text-align: center;
  border-radius: 14px;
  border: 2px dashed #ddd;
}
.vinted-photos {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: #f3f3f3;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.vp-thumb {
  overflow: hidden;
  background: #f3f3f3;
  cursor: zoom-in;
  position: relative;
}
.vp-thumb.vp-hero {
  grid-row: 1 / span 2;
}
.vp-thumb.vp-fallback {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.vp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.vp-thumb:hover img {
  transform: scale(1.04);
}
.vinted-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  color: #333;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s;
}
.vinted-favorite:hover {
  color: #d4145a;
  transform: scale(1.1);
}
.vinted-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vinted-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vinted-price {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}
.vinted-price-incl {
  font-size: 12px;
  color: #777;
}
.vinted-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  line-height: 1.35;
  color: #222;
}
.vinted-meta {
  background: #fafafa;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.vm-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vm-key {
  color: #888;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.vm-val {
  color: #222;
  font-weight: 500;
  font-size: 13px;
}
.vinted-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vinted-tag {
  background: #f0f0f0;
  color: #555;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
}
.vinted-desc {
  font-size: 13px;
  color: #444;
  line-height: 1.55;
  white-space: pre-wrap;
}
.vinted-seller {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  border-top: 1px solid #eee;
  margin-top: 4px;
}
.vs-avatar {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #ffd1dc, #ffe7c2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.vs-info { display: flex; flex-direction: column; gap: 2px; }
.vs-name { font-weight: 600; font-size: 13px; color: #222; }
.vs-stars { font-size: 11px; color: #f5a623; }
.vs-count { color: #777; }
.vinted-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.vinted-buy {
  flex: 1;
  background: #09b1ba;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.1s;
}
.vinted-buy:hover { filter: brightness(1.08); }
.vinted-msg {
  flex: 1;
  background: #fff;
  color: #09b1ba;
  border: 1.5px solid #09b1ba;
  border-radius: 999px;
  padding: 11px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.vinted-msg:hover { background: #f0fafa; }
.vinted-catalog-link {
  margin-top: 4px;
}
.vinted-show-in-catalog {
  width: 100%;
  background: #f5f5f7;
  color: #1d4ed8;
  border: 1.5px solid #d6e0f5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.vinted-show-in-catalog:hover {
  background: #e9efff;
  border-color: #aac0ee;
}
.vinted-show-in-catalog:active { transform: scale(0.98); }
.vinted-show-in-catalog .vsc-id {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: #777;
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.vinted-source {
  font-size: 11px;
  color: #999;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  margin-top: 4px;
}
.vinted-methodology {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}
.vinted-methodology summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.vinted-methodology ul { margin: 10px 0 0 20px; padding: 0; }
.vinted-methodology li { margin-bottom: 6px; }
.vinted-methodology code {
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* Vinted photo lightbox */
.vinted-photo-panel {
  background: #000 !important;
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.vinted-photo-panel img {
  max-width: 100%;
  max-height: 90vh;
  display: block;
  object-fit: contain;
}
.vinted-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
  padding: 30px 20px 16px;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 600px) {
  .vinted-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vinted-photos {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr 1fr;
    aspect-ratio: 3 / 4;
  }
  .vp-thumb.vp-hero {
    grid-row: 1;
    grid-column: 1;
  }
  .vp-thumb:not(.vp-hero):nth-of-type(2) { grid-row: 2; }
  .vp-thumb:not(.vp-hero):nth-of-type(3) { grid-row: 3; }
  .vinted-meta { grid-template-columns: 1fr; }
}