:root{ --gap:12px; --radius:14px; --fg:#111; --muted:#666; --line:#eee; --chip:#fafafa; }

.wccp-wrap{max-width:100%;margin:10px auto;padding:0 12px;color:var(--fg)}
.wccp-wrap *{box-sizing:border-box}

/* Head & actions */
.wccp-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.wccp-head h1{font-size:26px;margin:0;line-height:1.2}
.wccp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wccp-switch{display:flex;align-items:center;gap:6px;font-size:14px}
.wccp-btn-ghost{padding:8px 12px;border:1px solid #e3e3e3;background:#fff;border-radius:10px;cursor:pointer}
.wccp-btn-ghost:hover{background:#f7f7f7}

/* Hint */
.wccp-hint{display:none;font-size:12px;color:var(--muted);align-items:center;gap:6px;margin-bottom:6px}
.wccp-hint svg{width:14px;height:14px}

/* Grid (two slots) */
.wccp-grid.wccp-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start;margin-bottom:10px}
.wccp-slot{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-width:0;display:flex;flex-direction:column;gap:10px}
.wccp-slot-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.wccp-clear{border:none;background:transparent;color:#888;cursor:pointer;font-size:13px}
.wccp-clear:hover{color:#111}

/* Cards */
.wccp-card{text-align:center}
.wccp-card img{max-width:160px;max-height:160px;object-fit:contain;width:100%;height:auto}
.wccp-name{font-weight:600;margin:6px 0 2px;font-size:16px;line-height:1.25}
.wccp-price{font-weight:700}
.wccp-cart{display:inline-block;margin-top:6px;padding:6px 10px;border:1px solid #ddd;border-radius:10px}
.wccp-empty{color:#888;padding:12px 0}

/* Search */
.wccp-search{position:relative}
.wccp-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:10px;font-size:14px}
.wccp-results{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #ddd;border-radius:10px;margin-top:6px;max-height:260px;overflow:auto;z-index:99999;display:none}
.wccp-result{display:flex;gap:8px;align-items:center;padding:6px 8px;cursor:pointer}
.wccp-result:hover{background:#f7f7f7}
.wccp-result img{width:40px;height:40px;object-fit:contain;flex:0 0 40px}
.wccp-result .wccp-name{margin:0;font-size:14px}
.wccp-result .wccp-price{font-size:13px;color:var(--muted);font-weight:500}

/* Loading skeleton */
.wccp-loading .wccp-card{position:relative}
.wccp-loading .wccp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f5f5f5 0,#eee 50%,#f5f5f5 100%);background-size:200% 100%;animation:wccp-shine 1.2s linear infinite;border-radius:12px}
@keyframes wccp-shine{to{background-position:200% 0}}

/* Single table (desktop defaults) */
.wccp-table-wrap{margin-top:8px;overflow-x:auto}
.wccp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  min-width:640px;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}
.wccp-table caption{text-align:left;margin:8px 0;color:var(--muted)}
.wccp-table th,.wccp-table td{
  border:1px solid var(--line);
  padding:8px 10px;
  vertical-align:top;
  font-size:14px;
  line-height:1.25;
  word-break:break-word;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.wccp-table thead th{background:var(--chip);font-weight:700}
.wccp-table tbody tr:nth-child(even){background:#fcfcfc}
.wccp-table-single .wccp-spec-col{width:28%}
.wccp-table-single .wccp-col-1,.wccp-table-single .wccp-col-2{width:36%}

/* Sticky spec col on desktop */
@media (min-width:769px){
  .wccp-table th:first-child,.wccp-table td:first-child{position:sticky;left:0;background:#fff;z-index:1}
}

/* Tablet tweaks */
@media (max-width:1024px){
  .wccp-head h1{font-size:22px}
  .wccp-btn-ghost{padding:6px 10px;font-size:13px}
  .wccp-input{font-size:13px;padding:8px 10px}
}

/* ===== MOBILE: ZERO HORIZONTAL SCROLL ===== */
@media (max-width:768px){
  .wccp-hint{display:flex}

  /* tighter cards */
  .wccp-grid.wccp-grid-2{display:flex;gap:10px;padding:0 8px;overflow:visible}
  .wccp-slot{flex:0 0 calc((100% - 10px) / 2);padding:8px;border:none!important;box-shadow:none!important}
  .wccp-card img{max-width:90px;max-height:90px}
  .wccp-name,.wccp-price{font-size:12px}
  .wccp-cart{font-size:12px;padding:4px 8px}

  /* TABLE: ultra-compact + no min-width + collapse borders to save pixels */
  .wccp-table-wrap{overflow-x:visible}
  .wccp-table{
    min-width:0;            /* ← allow shrink to viewport */
    width:100%;
    border-collapse:collapse;/* ← tighter than separate */
    table-layout:fixed;      /* ← equal, predictable cells */
  }
  .wccp-table th,.wccp-table td{
    padding:4px 5px;         /* ← compact cells */
    font-size:11px;          /* ← smaller text */
    line-height:1.15;
    word-break:break-word;
    overflow-wrap:anywhere;
    hyphens:auto;
  }

  /* exact widths sum ≈100% to avoid overflow */
  .wccp-table-single .wccp-spec-col{width:30%}
  .wccp-table-single .wccp-col-1,
  .wccp-table-single .wccp-col-2{width:35%}

  /* also compress header */
  .wccp-table thead th{padding:5px 6px;font-size:11px}
}

/* Ultra-narrow phones: even tighter (e.g., 320-360px wide) */
@media (max-width:360px){
  .wccp-wrap{padding:0 8px}
  .wccp-grid.wccp-grid-2{gap:8px}
  .wccp-slot{flex:0 0 calc((100% - 8px) / 2);padding:6px}
  .wccp-card img{max-width:80px;max-height:80px}
  .wccp-name,.wccp-price{font-size:11px}

  .wccp-table th,.wccp-table td{padding:3px 4px;font-size:10px;line-height:1.12}
  .wccp-table thead th{padding:4px 5px;font-size:10px}
  .wccp-table-single .wccp-spec-col{width:30%}
  .wccp-table-single .wccp-col-1,
  .wccp-table-single .wccp-col-2{width:35%}
}