/* Catalog in the desktop console (desk-catalog.js): plan cards and the package editor, the add-on
   table, and the discount code list beside its editor. Builds on desk.css (d-card, d-glassbox,
   d-field, d-seg, d-money, d-chipbtn). Class names start with d-. */

.d-cat__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.d-cat__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.d-cat__h2 { margin: 0; font: 400 30px/.95 var(--display); text-transform: uppercase; }
.d-cat__h3 { margin: 0; font: 400 24px/.95 var(--display); text-transform: uppercase; }
.d-cat__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.d-cat__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.d-cat__formerr { font-size: 13.5px; }
.d-cat__preview { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sand-300); font: 500 12.5px/1.5 var(--mono); }
.d-cat .d-banner { margin: 0; font-size: 13.5px; }
.d-cat .d-field .d-seg { align-self: flex-start; }
.d-ferr { font-size: 12.5px; font-weight: 600; color: var(--warn-ink); }

/* ---------- plans ---------- */
.d-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: stretch; }
.d-plan { gap: 6px; padding: 18px 18px 14px; transition: opacity .2s; }
.d-plan.is-off { opacity: .55; }
.d-plan__name { margin: 0; font: 400 28px/.95 var(--display); text-transform: uppercase; }
.d-plan__price { margin: 8px 0 0; display: flex; align-items: baseline; gap: 4px; }
.d-plan__price span { font: 400 48px/.9 var(--display); }
.d-plan__price small { font-size: 13px; color: var(--ink-500); }
.d-plan__setup { margin: 0; font-size: 14px; font-weight: 500; }
.d-plan__inc { margin: 4px 0 0; padding: 0; list-style: none; flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-600); }
.d-plan__inc li::before { content: "· "; }
.d-plan__behind { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 12.5px; font-weight: 500; }
.d-plan__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.d-plan.is-star { background: var(--ink-900); color: var(--sand-100); box-shadow: 0 0 0 2px var(--rust-600); }
.d-plan.is-star .d-label, .d-plan.is-star .d-meta, .d-plan.is-star .d-plan__price small { color: var(--ink-300); }
.d-plan.is-star .d-plan__inc { color: var(--ink-200); }
.d-plan.is-star .d-plan__foot { border-top-color: rgba(243, 236, 224, .14); }
.d-plan.is-star .d-plan__behind { background: rgba(224, 131, 95, .18); color: var(--sand-100); }
.d-plan.is-star .d-plan__behind .d-link { color: var(--rust-400); }
.d-plan.is-star .d-btn { background: rgba(243, 236, 224, .14); color: var(--sand-100); }
.d-plan.is-star .d-btn:hover { background: rgba(243, 236, 224, .24); }
.d-plan.is-star .d-switch:not([aria-checked="true"]) { background: rgba(243, 236, 224, .25); }
.d-plan--custom { background: transparent; outline: 1.5px dashed rgba(31, 26, 22, .22); outline-offset: -1.5px; }

/* the package editor */
.d-ped { gap: 14px; padding: 18px 20px; }
.d-ped__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.d-inclist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.d-inclist li { display: flex; align-items: center; gap: 6px; }
.d-inclist .d-input { flex: 1; min-width: 0; height: 34px; }
.d-inclist__x { width: 30px; height: 30px; flex: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: 400 18px/1 var(--d-chrome); color: var(--ink-500); }
.d-inclist__x:hover { background: var(--d-tint); color: var(--rust-600); }
.d-ped .d-row > .d-input { height: 34px; min-width: 0; }

/* ---------- add-ons ---------- */
.d-atbl { display: flex; flex-direction: column; }
.d-atbl__row { display: grid; grid-template-columns: minmax(190px, 2fr) minmax(120px, 1.4fr) 112px 112px 84px 92px; gap: 12px; align-items: center; padding: 10px 16px; font-size: 14px; }
.d-atbl__item { border-top: 1px solid var(--line); }
.d-atbl__head { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.d-atbl__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-atbl__name strong { font-weight: 600; }
.d-atbl__name .d-row { gap: 10px; }
.d-atbl__item.is-unpriced .d-atbl__name strong { color: var(--ink-500); }
.d-atbl__price { width: 100%; }
.d-atbl__price.is-off { opacity: .5; }
.d-atbl__on { display: flex; justify-content: flex-start; }
.d-atbl__set { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.d-atbl__set .d-switch:disabled { opacity: .45; cursor: default; }
.d-atbl__need { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ochre-ink); }
.d-atbl__words { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; padding: 4px 16px 14px; }
.d-atbl__words > .d-row { grid-column: 1 / -1; }
.d-atbl > .d-empty { padding: 20px 16px; }
@media (max-width: 1180px) {
  .d-atbl__row { grid-template-columns: minmax(170px, 2fr) 104px 104px 76px 88px; }
  .d-atbl__row > :nth-child(2) { display: none; }
}

/* ---------- discount codes ---------- */
.d-codes__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
@media (max-width: 1240px) { .d-codes__split { grid-template-columns: minmax(0, 1fr); } }
.d-codes { display: flex; flex-direction: column; }
.d-codes > .d-empty { padding: 24px 16px; text-align: center; }
.d-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px 12px 13px; border: 0; border-top: 1px solid var(--line); border-left: 3px solid transparent; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink-900); width: 100%; }
.d-code:first-child { border-top: 0; }
.d-code:hover { background: rgba(31, 26, 22, .04); }
.d-code.is-on { background: rgba(194, 70, 31, .08); border-left-color: var(--rust-600); }
.d-code__id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.d-code__name { font: 600 15px var(--mono); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.d-code__what { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.d-code__what strong { font-weight: 600; }
.d-code__uses { grid-column: 2; grid-row: 1; align-self: center; text-align: right; white-space: nowrap; }
.d-codeed { gap: 14px; padding: 18px 20px; }