/* ============================================================
   Product List  –  Compact/List View  (responsive)
   Designed for easy scanning: larger text, high-contrast rows,
   big tap targets. No fixed-width columns anywhere, so nothing
   ever needs to scroll horizontally.
   ============================================================ */

.compact_list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  overflow: hidden;
  background: var(--pl-surface);
  margin-bottom: 16px;
}

.compact_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pl-border);
}
.compact_list .compact_row:last-child { border-bottom: none; }
.compact_row:nth-child(even) { background: var(--c-bg-subtle); }

.compact_row_oos { opacity: .72; }
.compact_row_oos .compact_thumb { filter: grayscale(.4); }

/* --- Main: thumbnail + name/codes/badges/stock --- */
.compact_main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 240px;
  min-width: 0;
}

.compact_thumb_link { flex-shrink: 0; display: block; }
.compact_thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--pl-border);
  background: var(--c-bg-subtle);
}

.compact_info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.compact_name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pl-text);
  line-height: 1.35;
  text-decoration: none;
}
.compact_name:hover { text-decoration: underline; color: var(--pl-text); }
.compact_name:visited { color: var(--pl-text); }

.compact_codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--pl-text-muted);
}
.compact_nappi { font-weight: 600; color: var(--c-primary-dark); }
.compact_nappi_label { font-weight: 400; opacity: .7; margin-right: 2px; }

.compact_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.compact_badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: .03em;
  cursor: default;
}
a.compact_badge { cursor: pointer; }
a.compact_badge:hover { opacity: .8; }

.compact_badge_exp { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.compact_badge_web { background: #cfe2ff; color: #084298; border: 1px solid #9ec5fe; }
.compact_badge_pro { color: var(--c-bg-light); background: var(--c-red); border: 1px solid var(--c-bg-light); }
.compact_badge_alt { background: #e2d9f3; color: #432874; border: 1px solid #c5b3e6; }
.compact_badge_ows { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.compact_badge_ovr { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; }
.compact_badge_flag { background: #fde8d8; color: #7d3c0a; border: 1px solid #f4a261; }

.compact_badges_col {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Dedicated stock column – fixed width so it lines up like a table
   column down the list, instead of drifting with the product name. */
.compact_stock_col {
  display: flex;
  align-items: center;
  flex: 0 0 130px;
}
.compact_stock { font-size: 13px; font-weight: 600; }
.compact_instock { color: var(--pl-green); }
.compact_oos_label { color: var(--pl-red); }
.compact_onhand_num { color: var(--pl-text-muted); font-weight: 400; }

/* --- Side: price (+ promo deal / public "View Product") --- */
.compact_side {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.compact_price_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 84px;
  gap: 2px;
}
.compact_price { font-size: 18px; font-weight: 700; color: var(--pl-text); white-space: nowrap; }
.compact_price_special { color: var(--pl-green); }
.compact_price_old { font-size: 12px; text-decoration: line-through; color: var(--pl-text-muted); }
.compact_price_label { font-size: 10px; color: var(--pl-text-muted); }

.compact_promo_deal {
  font-size: 11px;
  color: var(--c-bg-light);
  font-weight: 600;
  background: var(--c-red);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* Fav heart + qty + add-to-cart. On desktop it's just the right-most
   cluster on the same row (pushed flush right via margin-left: auto).
   On mobile it becomes its own full-width footer strip, see RESPONSIVE. */
.compact_actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}

/* Large, clear favourite tap target */
.compact_fav_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--pl-border);
  border-radius: 50%;
  color: var(--c-danger);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none !important;
  transition: color .15s, border-color .15s, background .15s;
}
.compact_fav_btn:hover,
.compact_fav_btn.pl-fav-active { color: #fff; border-color: var(--c-danger); background-color: var(--c-danger); }

.compact_qty_group {
  display: flex;
  align-items: stretch;
  gap: 4px;
  --compact-ctrl-h: 44px; /* shared by qty input, arrows and add-to-cart so they always line up */
}

.compact_qty_input {
  width: 56px;
  height: var(--compact-ctrl-h);
  padding: 0 4px;
  border: 1px solid var(--pl-border);
  border-right: none;
  border-radius: var(--pl-radius) 0 0 var(--pl-radius);
  font-size: 15px;
  text-align: center;
  color: var(--pl-text);
  background: var(--pl-surface);
  -moz-appearance: textfield;
}
.compact_qty_input::-webkit-outer-spin-button,
.compact_qty_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compact_qty_input:focus {
  outline: none;
  border-color: var(--pl-accent);
  box-shadow: 0 0 0 2px rgba(92,106,196,.2);
}

.compact_qty_arrows {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 26px;
  height: var(--compact-ctrl-h);
  border: 1px solid var(--pl-border);
  border-left: none;
  border-radius: 0 var(--pl-radius) var(--pl-radius) 0;
  overflow: hidden;
  background: var(--pl-bg);
  margin-right: -4px;
}
.compact_qty_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: var(--pl-bg);
  cursor: pointer;
  font-size: 9px;
  color: var(--pl-text-muted);
  user-select: none;
}
.compact_qty_arrow + .compact_qty_arrow { border-top: 1px solid var(--pl-border); }
.compact_qty_arrow:hover { background: var(--c-border); color: var(--pl-text); }

.compact_add_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--compact-ctrl-h);
  padding: 0 18px;
  background: #ddd;
  color: #888;
  border: none;
  border-radius: var(--pl-radius);
  font-size: 14px;
  font-weight: 700;
  cursor: not-allowed;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, color .15s;
  padding-left: 14px;
}
.compact_add_btn[style*="green"] {
  background: var(--pl-green) !important;
  color: #fff !important;
  cursor: pointer;
}
.compact_add_btn[style*="green"]:hover { background: var(--c-green-dark) !important; }

.compact_view_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--pl-primary-dark);
  color: #fff !important;
  border-radius: var(--pl-radius);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
.compact_view_btn:hover { opacity: .9; }

/* ============================================================
   Toggle control (shared toolbar, both view modes)
   A real on/off switch: static label + sliding track/thumb.
   ============================================================ */
.pl-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  border-radius: 999px;
  text-decoration: none !important;
  cursor: pointer;
}
.pl-view-toggle-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--pl-text);
  white-space: nowrap;
}

/* Track */
.pl-view-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 32px;
  border-radius: 16px;
  background: #b9bec7;
  border: 1px solid var(--pl-border);
  transition: background .2s ease, border-color .2s ease;
}

/* Thumb */
.pl-view-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s ease;
}

/* ON state */
.pl-view-toggle-on .pl-view-toggle-switch {
  background: var(--pl-green);
  border-color: var(--pl-green);
}
.pl-view-toggle-on .pl-view-toggle-thumb { transform: translateX(24px); }

.pl-view-toggle:hover .pl-view-toggle-switch { border-color: var(--pl-accent); }
.pl-view-toggle:focus-visible .pl-view-toggle-switch,
.pl-view-toggle:focus .pl-view-toggle-switch {
  outline: 2px solid var(--pl-accent);
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Stack price/actions onto their own full-width line under the
   thumbnail+name once the row can no longer fit both groups side
   by side — this is what keeps mobile scroll-free. */
@media (max-width: 640px) {
  /* Each listing becomes its own card with breathing room between them,
     instead of packed rows sharing one bordered list. */
  .compact_list { border: none; background: transparent; gap: 10px; }
  .compact_row {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 12px;
    gap: 6px 10px;
  }
  .compact_list .compact_row:last-child { border-bottom: 1px solid var(--pl-border); }
  .compact_row:nth-child(even) { background: var(--pl-surface); }

  .compact_main { flex: 1 1 100%; }

  /* Badges + stock share one line, indented under the product name. */
  .compact_badges_col { flex: 0 1 auto; padding-left: 78px; }
  .compact_stock_col { flex: 0 1 auto; padding-left: 0; }

  /* Price + promo status all on one line, indented to match. */
  .compact_side { flex: 1 1 100%; padding-left: 78px; justify-content: flex-start; }
  .compact_price_wrap { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; }

  .compact_thumb { width: 48px; height: 48px; }
  .compact_name { font-size: 15px; }
  .compact_codes { font-size: 11px; }

  .compact_badge { font-size: 10px; padding: 1px 6px; }
  .compact_stock { font-size: 12px; }

  .compact_price { font-size: 15px; }
  .compact_price_old { font-size: 11px; }
  .compact_price_label { font-size: 9px; }
  .compact_promo_deal { font-size: 10px; padding: 3px 7px; }

  /* Fav/qty/add-to-cart drop to their own full-width strip below
     everything else (stock, badges, price) — a card-footer look. */
  .compact_actions {
    flex: 1 1 100%;
    justify-content: center;
    margin: 8px -12px -12px;
    padding: 12px;
    border-top: 1px solid var(--pl-border);
    background: var(--c-bg-light);
  }

  .compact_fav_btn { width: 36px; height: 36px; font-size: 13px; }
  .compact_qty_group { --compact-ctrl-h: 38px; }
  .compact_qty_input { width: 48px; font-size: 14px; }
  .compact_qty_arrows { width: 22px; }
  .compact_add_btn { padding: 0 14px; font-size: 13px; margin-left:10px;}
  .compact_view_btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
}

@media (max-width: 420px) {
  .compact_side { padding-left: 0; }
  .compact_badges_col { padding-left: 0; }
}