.csh-skill-card[data-sample-rotation='ready'] .csh-card-media {
  position: relative;
}

.csh-skill-card[data-sample-rotation='ready'] .csh-card-media > img {
  transition:
    opacity 220ms ease,
    transform 320ms ease;
  will-change: opacity;
}

.csh-skill-card[data-sample-rotation='ready']
  .csh-card-media
  > img.is-sample-swapping {
  opacity: 0.24;
  transform: scale(0.995);
}

.csh-sample-rotate-badge {
  display: none !important;
}

.csh-card-meta span.is-free {
  color: #285d31;
  border-color: rgba(50, 112, 61, 0.32);
  background: rgba(224, 241, 224, 0.82);
}

html[data-theme='dark'] .csh-card-meta span.is-free {
  color: #bce7c2;
  border-color: rgba(126, 195, 136, 0.35);
  background: rgba(37, 74, 43, 0.72);
}

@media (max-width: 620px) {
  .csh-sample-rotate-badge {
    top: 10px;
    right: 10px;
    min-height: 25px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csh-skill-card[data-sample-rotation='ready'] .csh-card-media > img {
    transition: none;
  }
}

/* XPLA 2026-09-11: use a clean card grid; never stack cards on 8px masonry tracks. */
.csh-skill-grid {
  grid-auto-rows: auto !important;
  align-items: stretch !important;
}

.csh-skill-grid > .csh-skill-card {
  grid-row-end: auto !important;
  display: flex !important;
  flex-direction: column;
}

.csh-skill-grid > .csh-skill-card .csh-card-content {
  flex: 1 1 auto;
}

/* XPLA 2026-09-11: align product-image samples to one calm catalog ratio. */
.csh-skill-card[data-product-image-injected] .csh-card-media,
.csh-skill-card[href='/skills/xpla-fashion-street-shoot'] .csh-card-media {
  aspect-ratio: 4 / 5 !important;
  background: #f3f4ef;
}

.csh-skill-card[data-product-image-injected] .csh-card-media img {
  object-fit: contain;
}

.csh-factory-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin: 14px 0 24px;
  padding: 18px 20px;
  border: 1px solid rgba(48, 89, 62, 0.24);
  border-left: 4px solid #2f6b46;
  border-radius: 14px;
  background: #f4f8f1;
  color: #183122;
}

.csh-factory-bar > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.csh-factory-bar-kicker {
  margin: 0;
  color: #477154;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.csh-factory-bar-title {
  font-size: 17px;
  line-height: 1.4;
}

.csh-factory-bar-copy {
  color: #5f7064;
  font-size: 13px;
  line-height: 1.55;
}

.csh-factory-bar-action,
.csh-factory-action {
  appearance: none;
  min-height: 42px;
  border: 1px solid #2f6b46;
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.2;
  cursor: pointer;
}

.csh-factory-bar-action,
.csh-factory-action.is-primary {
  background: #244f36;
  color: #fff;
}

.csh-factory-bar-action:hover,
.csh-factory-action.is-primary:hover {
  background: #183c28;
}

.csh-factory-dialog[hidden] {
  display: none;
}

.csh-factory-dialog {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}

.csh-factory-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 11, 0.62);
  backdrop-filter: blur(5px);
}

.csh-factory-dialog-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(640px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(46, 74, 55, 0.22);
  border-radius: 18px;
  background: #fbfcf9;
  box-shadow: 0 24px 72px rgba(8, 25, 13, 0.26);
  color: #15251a;
}

.csh-factory-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(45, 74, 54, 0.2);
  border-radius: 50%;
  background: #fff;
  color: #37533f;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.csh-factory-eyebrow,
.csh-factory-summary,
.csh-factory-note,
.csh-factory-dialog-panel h2 {
  margin: 0;
}

.csh-factory-eyebrow {
  padding-right: 44px;
  color: #3f7050;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.csh-factory-dialog-panel h2 {
  padding-right: 44px;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.22;
}

.csh-factory-summary,
.csh-factory-note {
  color: #607066;
  font-size: 14px;
  line-height: 1.65;
}

.csh-factory-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: #2d4133;
  font-size: 14px;
  line-height: 1.55;
}

.csh-factory-prompt {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid rgba(45, 74, 54, 0.24);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  color: #243229;
  font:
    13px/1.65 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    monospace;
}

.csh-factory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.csh-factory-action.is-secondary {
  background: transparent;
  color: #244f36;
}

.csh-factory-action.is-secondary:hover {
  background: #edf4eb;
}

body.csh-factory-dialog-open {
  overflow: hidden;
}

html[data-theme='dark'] .csh-factory-bar {
  border-color: rgba(133, 183, 146, 0.28);
  border-left-color: #82bb91;
  background: #17231a;
  color: #eff6ef;
}

html[data-theme='dark'] .csh-factory-bar-kicker,
html[data-theme='dark'] .csh-factory-dialog .csh-factory-eyebrow {
  color: #a9d2b3;
}

html[data-theme='dark'] .csh-factory-bar-copy,
html[data-theme='dark'] .csh-factory-dialog .csh-factory-summary,
html[data-theme='dark'] .csh-factory-dialog .csh-factory-note {
  color: #b2c0b6;
}

html[data-theme='dark'] .csh-factory-dialog-panel {
  border-color: rgba(157, 190, 166, 0.2);
  background: #121914;
  color: #eff6ef;
}

html[data-theme='dark'] .csh-factory-dialog-close,
html[data-theme='dark'] .csh-factory-prompt {
  border-color: rgba(157, 190, 166, 0.24);
  background: #1c261e;
  color: #e7f0e9;
}

html[data-theme='dark'] .csh-factory-steps {
  color: #d1ded4;
}

@media (max-width: 620px) {
  .csh-factory-bar {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .csh-factory-bar-action {
    width: 100%;
  }

  .csh-factory-dialog {
    align-items: end;
    padding: 0;
  }

  .csh-factory-dialog-panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom));
  }

  .csh-factory-actions {
    display: grid;
  }

  .csh-factory-action {
    width: 100%;
  }
}