:root {
  --za-bg: #2e2e2e;
  --za-text: #f7f7f7;
  --za-accent: #ff8400;
  --za-muted: #cfcfcf;
  --za-border: #444;

  /* darker tones for bundles */
  --za-bg-bundle: #252525;
  --za-bg-bundle-card: #1f1f1f;
}

/* Core layout */
.za-pt { background: transparent; color: var(--za-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; }
.za-pt-list { list-style: none; padding: 0; margin: 0 0 1rem 0; }

/* Row (same size for all products, incl. bundles) */
.za-pt-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--za-bg); border: 1px solid var(--za-border); border-radius: 10px;
  padding: .75rem .9rem; margin-bottom: .6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.3) inset;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
}

/* Bundle row (darker + fused to card below; left bottom rounded, right square) */
.za-pt-item.is-bundle {
  background: var(--za-bg-bundle);
  border-color: #3a3a3a;
  margin-bottom: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0;
}

/* Selected outline */
.za-pt-item.is-active {
  border-color: var(--za-accent);
  box-shadow: 0 0 0 2px rgba(255,132,0,.45), 0 1px 0 rgba(0,0,0,.3) inset;
}

.za-pt-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.za-pt-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; border: 1px solid var(--za-border); background: #1f1f1f; }
.za-pt-glyph { width: 38px; height: 38px; display: inline-block; border-radius: 8px; background: linear-gradient(135deg, #1f1f1f, #272727); border: 1px solid var(--za-border); }
.za-pt-title { font-size: 15px; color: var(--za-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.za-pt-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* Buttons */
.za-pt-btn {
  appearance: none; border: 1px solid var(--za-border); background: #1f1f1f;
  color: var(--za-text);
  width: 48px; height: 40px; padding: 0;
  border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .15s ease;
}
.za-pt-btn:hover { border-color: var(--za-accent); }
.za-pt-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.za-pt-btn.is-selected, .za-pt-btn.has-qty { border-color: var(--za-accent); box-shadow: 0 0 0 1px var(--za-accent); }
.za-pt-btn.is-selected { color: var(--za-accent); }

.za-pt-icon.plus,
.za-pt-icon.trashbin { width: 18px; height: 18px; display: inline-block; }

/* CSS-only plus icon */
.za-pt-icon.plus { position: relative; }
.za-pt-icon.plus::before,
.za-pt-icon.plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: var(--za-accent);
}
.za-pt-icon.plus::before { width: 14px; height: 2.6px; }
.za-pt-icon.plus::after  { width: 2.6px; height: 14px; }

/* Toggle plus/trash */
.za-pt-btn .trashbin { display: none; }
.za-pt-btn.is-selected .trashbin { display: inline-block; }
.za-pt-btn.is-selected .plus     { display: none; }

/* Multi-qty text */
.za-pt-qty { font-weight: 800; font-size: 14px; line-height: 1; min-width: 1.6rem; text-align: center; }

/* Footer */
.za-pt-footer { position: sticky; bottom: 0; padding-top: .5rem; }
.za-pt-submit {
  width: 100%; border: none; background: var(--za-accent); color: #111;
  padding: .85rem 1rem; font-weight: 800; border-radius: 12px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 4px 0 rgba(0,0,0,.25);
  transition: transform .05s ease, box-shadow .2s ease, filter .15s ease;
}
.za-pt-submit:hover { filter: brightness(1.04); }
.za-pt-submit:active { transform: translateY(1px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }

/* A11y + attribute pills */
.screen-reader-text { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.za-pt-attr { pointer-events: auto; transition: transform .12s ease, box-shadow .12s ease; }
.za-pt-item.is-oos .za-pt-attr { pointer-events: none; }
.za-pt-attr.za-flash { transform: scale(.97); box-shadow: 0 0 0 2px rgba(255,165,0,.35) inset; }

/* Grey when chosen combo is OOS */
.za-pt-item.is-combo-oos { opacity: .60; }
.za-pt-item.is-combo-oos .za-pt-cycle,
.za-pt-item.is-combo-oos .za-pt-toggle { pointer-events: none; opacity: .5; cursor: not-allowed; }

/* Bundle contents card (extra row under bundle) */
.za-pt-bundle-card {
  background: var(--za-bg-bundle-card);
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: .6rem .9rem;
  margin: 0 0 .6rem 54px; /* indented under thumbnail area */
  box-shadow: 0 1px 0 rgba(0,0,0,.3) inset;
  list-style: none;
}
/* Fuse card to the bundle row above */
.za-pt-item.is-bundle + .za-pt-bundle-card {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.za-pt-bundle { list-style: none; margin: 0; padding: 0; }
.za-pt-bundle li { font-size: 13px; color: var(--za-muted); line-height: 1.35; padding-left: .4rem; }