/* Independently selectable sticker printing, artwork services and empty jars. */
#order.independent-order {
  --selection-green: #53f477;
  --selection-ink: #d7ffe0;
  --selection-glow: 0 0 0 1px rgba(83, 244, 119, .38), 0 0 17px rgba(54, 227, 102, .24);
}

#order.independent-order .studio-wizard {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px 22px;
}
#order.independent-order .studio-notice {
  grid-column: 1 / -1;
  margin: 0;
}
#order.independent-order .studio-notice:empty { display: none; }
#order.independent-order .order-category-stack {
  grid-column: 1;
  grid-row: auto;
  display: grid;
  gap: 22px;
  min-width: 0;
}
#order.independent-order .studio-page[data-step="3"] {
  grid-column: 2;
  grid-row: auto;
  display: block !important;
  position: sticky;
  top: 82px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
#order.independent-order .studio-page[data-step="3"] > #stage {
  position: static;
  min-width: 0;
  margin: 0;
}
#order.independent-order .order-category {
  padding: 0;
  margin: 0;
  min-width: 0;
  border: 1.5px solid #684680;
  border-radius: 18px;
  background: #191023;
  overflow: visible;
  scroll-margin-top: 100px;
  transition: border-color .18s, box-shadow .18s;
}
#order.independent-order .order-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 20px 18px;
  min-width: 0;
  border-radius: 16px;
  background: #24162f;
}
#order.independent-order .order-category-header > :first-child { min-width: 0; }
#order.independent-order .order-category-header h3 {
  margin: 0 0 5px;
  font-size: 21px;
  line-height: 1.45;
  color: #f8efff;
}
#order.independent-order .order-category-header p {
  margin: 0;
  color: #cbb9d8;
  font-size: 12px;
  line-height: 1.65;
}
#order.independent-order .category-toggle {
  flex-shrink: 0;
  min-width: 98px;
  min-height: 43px;
  padding: 9px 12px;
  border: 1.5px solid #856199;
  border-radius: 10px;
  background: #30203e;
  color: #efe4f8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#order.independent-order .category-toggle:hover { border-color: var(--selection-green); }
#order.independent-order .order-category.category-selected {
  border-color: #42bd64;
  box-shadow: 0 0 16px rgba(54, 227, 102, .09);
}
#order.independent-order .order-category.has-items {
  border-color: var(--selection-green);
  box-shadow: 0 0 0 1px rgba(83, 244, 119, .18), 0 0 18px rgba(54, 227, 102, .12);
}
#order.independent-order .category-selected > .order-category-header {
  border-bottom: 1px solid #3e5e43;
  border-radius: 16px 16px 0 0;
}
#order.independent-order .category-body {
  padding: 16px;
  min-width: 0;
}
#order.independent-order .category-body[hidden] { display: none !important; }
#order.independent-order .print-category .studio-page {
  display: block !important;
  grid-column: auto;
  grid-row: auto;
  position: static;
  min-height: 0;
  margin: 0;
  padding: 0;
}
#order.independent-order .print-category .studio-page[data-step="2"] { margin-top: 18px; }
#order.independent-order .print-category .studio-basket { margin: 18px 0 0; }
#order.independent-order .print-category .studio-page .panel {
  padding: 15px;
  background: #21152d;
  border-color: #543568;
}
#order.independent-order .design-category .artwork-extras,
#order.independent-order .jar-category .quick-jars {
  padding: 0;
  margin: 0;
  min-width: 0;
}
#order.independent-order .design-category .artwork-extras > .flabel,
#order.independent-order .jar-category .quick-jars > h3 { display: none; }
#order.independent-order .jar-category .quick-jars > p { margin: 0 0 16px; line-height: 1.65; }
#order.independent-order .quick-jar { padding: 10px 7px; }
#order.independent-order .quick-jar .jar-pick { gap: 4px; }
#order.independent-order .empty-print-note {
  margin: 0 0 16px;
  padding: 20px;
  border: 1px dashed #796189;
  border-radius: 13px;
  background: #20162c;
  color: #dbcae6;
  font-size: 14px;
  line-height: 1.7;
}
#order.independent-order .empty-print-note[hidden] { display: none !important; }

/* Selection stays visible after pointer and keyboard focus move elsewhere. */
#order.independent-order :is(
  .ps.active, .matopt.active, .dcopt.active, .addbig.active, .seg.active,
  .chip.active, .szpill.active, .tinytog.on, .service-card.selected,
  .quick-jar.selected, .oitem.selected, .oitem.link-selected,
  .coatrow.choice-selected, .multi-design-choice.choice-selected,
  button[aria-pressed="true"], [role="button"][aria-pressed="true"]
) {
  border-color: var(--selection-green) !important;
  box-shadow: var(--selection-glow) !important;
  background-color: #1c3328 !important;
  color: var(--selection-ink) !important;
  opacity: 1;
  filter: none;
}
#order.independent-order :is(.ps.active, .matopt.active, .addbig.active, .seg.active) :is(i, small),
#order.independent-order .service-card.selected small,
#order.independent-order .quick-jar.selected .jar-pick span {
  color: #b9e9c4;
}
#order.independent-order .addbig.active::before {
  background: var(--selection-green);
  color: #092211;
  box-shadow: 0 0 12px rgba(83, 244, 119, .5);
}
#order.independent-order .addbig.active::after { border-top-color: var(--selection-green); }
#order.independent-order .matopt.active .mat {
  border-color: var(--selection-green);
  box-shadow: 0 0 0 2px rgba(83, 244, 119, .35);
}
#order.independent-order .category-toggle[aria-pressed="true"] {
  background: #245f36 !important;
  color: #effff2 !important;
}
#order.independent-order input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--selection-green);
}
#order.independent-order input:is([type="checkbox"], [type="radio"]):checked {
  box-shadow: 0 0 9px rgba(83, 244, 119, .5);
}
#order.independent-order label:has(> input:checked) {
  color: var(--selection-ink);
}
#order.independent-order :is(button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--selection-green);
  outline-offset: 3px;
}
#order.independent-order button:disabled {
  cursor: default;
  opacity: .4;
  box-shadow: none;
}

/* The document viewport remains unchanged, including native pinch zoom. */
@media (max-width: 767px) {
  #order.independent-order .studio-wizard { grid-template-columns: minmax(0, 1fr); }
  #order.independent-order .order-category-stack,
  #order.independent-order .studio-page[data-step="3"] { grid-column: 1; grid-row: auto; }
  #order.independent-order .studio-page[data-step="3"] { position: static; }
  #order.independent-order .order-category-header { padding: 17px 14px; gap: 10px; }
  #order.independent-order .order-category-header h3 { font-size: 18px; }
  #order.independent-order .category-body { padding: 12px; }
  #order.independent-order .category-toggle { min-width: 88px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #order.independent-order .order-category { transition: none; }
}
#order.independent-order #stage.no-print>.ttl,#order.independent-order #stage.no-print>.stats,#order.independent-order #stage.no-print .result>.brow:not(.total),#order.independent-order #stage.no-print .result>.artwork-terms,#order.independent-order #stage.no-print .result>.hint{display:none!important}
#order.independent-order .design-category .artwork-columns{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#order.independent-order .multi-design-choice{margin-top:18px}
#order.independent-order #stage .separate-cost{background:#23172f;border-color:#65457a;box-shadow:none}
#order.independent-order .studio-wizard>.studio-page[data-step="3"]{grid-row:1}
#order.independent-order .order-category-stack{grid-row:1}
#order.independent-order .quick-jar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#order.independent-order .quick-jar .cstep{gap:8px}
#order.independent-order .quick-jar input{width:72px;flex-shrink:0;text-align:center}
#order.independent-order #stage .result{background:#23172f;border:1px solid #65457a;box-shadow:none}
#order.independent-order #stage .has-items{border-color:#53f477;box-shadow:0 0 14px #36e36620}
#order.independent-order .order-customer{display:grid;gap:7px;font-size:13px;margin:20px 0 0;color:#d7c4e5}
#order.independent-order .order-customer input{width:100%;margin:0!important}
@media(max-width:767px){
  #order.independent-order .order-category-stack,
  #order.independent-order .studio-wizard>.studio-page[data-step="3"]{grid-row:auto}
}