/* StorePlug Design Studio Polish V1B
   Mobile compression / metadata / live-status refinement. */

.store-design-studio[data-sp-design-polish="v1b"] {
  --spb-blue: #3b63e6;
  --spb-blue-strong: #2952da;
  --spb-ink: #0f172a;
  --spb-muted: #66748d;
  --spb-border: #d9e1ec;
  --spb-surface: #ffffff;
  --spb-subtle: #f6f8fc;
  --spb-subtle-2: #f2f5fb;
  --spb-radius: 16px;
  color: var(--spb-ink);
}

.store-design-studio[data-sp-design-polish="v1b"],
.store-design-studio[data-sp-design-polish="v1b"] * {
  box-sizing: border-box;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-intro {
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-eyebrow {
  color: var(--spb-blue) !important;
  letter-spacing: .08em !important;
  font-size: .72rem !important;
}

.store-design-studio[data-sp-design-polish="v1b"] #store-design-title {
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 8px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-intro > div:first-child > p:last-child {
  color: var(--spb-muted) !important;
  line-height: 1.45 !important;
  max-width: 620px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-current {
  padding: 11px 14px !important;
  border: 1px solid var(--spb-border) !important;
  border-radius: 13px !important;
  background: var(--spb-surface) !important;
  box-shadow: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-current > span {
  display: block !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--spb-muted) !important;
  margin-bottom: 4px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-current > strong {
  display: block !important;
  font-size: 1.02rem !important;
  color: var(--spb-ink) !important;
  margin-bottom: 2px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-current > small {
  display: block !important;
  font-size: .82rem !important;
  color: var(--spb-muted) !important;
  line-height: 1.35 !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-library,
.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-panel {
  border: 1px solid var(--spb-border) !important;
  border-radius: var(--spb-radius) !important;
  background: var(--spb-surface) !important;
  box-shadow: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-library {
  padding: 15px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-library-heading {
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-library-heading span {
  color: var(--spb-muted) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-library-heading strong {
  color: var(--spb-ink) !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-library-heading > small {
  color: var(--spb-muted) !important;
  white-space: nowrap !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .sp-design-library-hint {
  margin: 2px 0 0 !important;
  color: var(--spb-muted) !important;
  font-size: .8rem !important;
  line-height: 1.35 !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card {
  position: relative !important;
  border: 1px solid var(--spb-border) !important;
  border-radius: 14px !important;
  background: var(--spb-surface) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card.selected {
  background: #f4f7ff !important;
  border-color: var(--spb-blue) !important;
  box-shadow: 0 0 0 2px rgba(59, 99, 230, .08) !important;
}


.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card.selected[data-sp-design-state="idle"] {
  border-color: var(--spb-border) !important;
  background: var(--spb-surface) !important;
  box-shadow: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card[data-sp-design-state="idle"] .store-design-template-check {
  display: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-check {
  background: var(--spb-blue) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-copy > strong {
  color: var(--spb-ink) !important;
  font-size: .96rem !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-template-copy > small {
  color: var(--spb-muted) !important;
  line-height: 1.36 !important;
  font-size: .81rem !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-panel {
  padding: 15px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-toolbar {
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-toolbar > div:first-child > span {
  color: var(--spb-muted) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-toolbar > div:first-child > strong {
  color: var(--spb-ink) !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-device-toggle {
  padding: 3px !important;
  border: 1px solid var(--spb-border) !important;
  border-radius: 12px !important;
  background: var(--spb-subtle) !important;
  gap: 3px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-device-toggle button {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--spb-muted) !important;
  box-shadow: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-device-toggle button.active {
  background: var(--spb-blue) !important;
  color: #fff !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .design-preview-frame {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #eef2f7 !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .design-preview-frame.mobile {
  width: min(100%, 360px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: 980px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .design-preview-frame.mobile::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 88px !important;
  background: linear-gradient(to bottom, rgba(246,248,252,0), rgba(246,248,252,.94) 72%, rgba(246,248,252,1)) !important;
  pointer-events: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details > div {
  min-width: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--spb-border) !important;
  border-radius: 999px !important;
  background: var(--spb-subtle) !important;
  box-shadow: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details span,
.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details strong {
  display: inline !important;
  line-height: 1.2 !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details span {
  color: var(--spb-muted) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin-right: 6px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details strong {
  color: var(--spb-ink) !important;
  font-size: .82rem !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-actions {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--spb-border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: none !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-actions strong {
  color: var(--spb-ink) !important;
  font-size: .93rem !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-actions small {
  color: var(--spb-muted) !important;
  font-size: .79rem !important;
  line-height: 1.35 !important;
  display: block !important;
  margin-top: 3px !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-apply {
  min-height: 42px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--spb-blue) !important;
  border-radius: 11px !important;
  background: var(--spb-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.store-design-studio[data-sp-design-polish="v1b"] .store-design-apply:disabled {
  background: var(--spb-subtle-2) !important;
  border-color: var(--spb-border) !important;
  color: var(--spb-muted) !important;
  opacity: 1 !important;
}

.sp-design-context-bar {
  min-height: 0 !important;
  margin-bottom: 12px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--spb-border) !important;
  border-radius: 14px !important;
  background: var(--spb-surface) !important;
}

.sp-design-context-bar button {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
}

@media (max-width: 720px) {
  .store-design-studio[data-sp-design-polish="v1b"] .store-design-intro {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-current {
    padding: 10px 12px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-library,
  .store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-panel {
    padding: 14px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-template-list {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-template-list::-webkit-scrollbar {
    display: none !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card {
    flex: 0 0 min(84vw, 330px) !important;
    width: min(84vw, 330px) !important;
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: 82px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    scroll-snap-align: start !important;
    padding: 12px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .storefront-template-mini {
    width: 82px !important;
    min-width: 82px !important;
    height: 82px !important;
    margin: 0 !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-template-copy > small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .design-preview-frame.mobile {
    max-height: 900px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details {
    grid-template-columns: 1fr !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-preview-details > div {
    padding: 9px 12px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-actions {
    position: sticky !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
    backdrop-filter: blur(10px) !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-actions > div {
    min-width: 0 !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-actions small {
    margin-top: 2px !important;
  }

  .sp-design-context-bar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  .store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card {
    flex-basis: 86vw !important;
    width: 86vw !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .design-preview-frame.mobile {
    max-height: 860px !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-actions {
    grid-template-columns: 1fr !important;
  }

  .store-design-studio[data-sp-design-polish="v1b"] .store-design-apply {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-design-studio[data-sp-design-polish="v1b"] .store-design-template-card,
  .store-design-studio[data-sp-design-polish="v1b"] .store-design-apply {
    transition: none !important;
  }
}