/* Scoped administration layout: storefront typography and layout remain independent. */
.commerce-message { margin: 24px auto; padding: 24px; max-width: 850px; background: white; color: #111; overflow-wrap: anywhere; }
.commerce-message h2 { font-size: 28px; }
.commerce-message form, .commerce-message label { display: grid; gap: 12px; }
.commerce-message input, .commerce-message textarea, .commerce-message button { width: 100%; min-height: 44px; padding: 12px; border: 1px solid #888; background: white; color: #111; font: inherit; }
.commerce-message [role=status] { white-space: pre-wrap; }
#atelier.atelier-workspace { background: #fff; padding: 36px clamp(16px, 4vw, 64px) 72px; color: #171717; }
#atelier.atelier-workspace *, #atelier.atelier-workspace *::before, #atelier.atelier-workspace *::after { box-sizing: border-box; min-width: 0; }
#atelier .atelier-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; }
#atelier .atelier-navigation { display: grid; gap: 8px; padding: 12px; border: 1px solid #ddd; border-radius: 12px; }
#atelier .atelier-navigation button { text-align: left; padding: 14px 12px; min-height: 46px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #333; font: 600 14px/1.4 Arial, sans-serif; cursor: pointer; white-space: normal; }
#atelier .atelier-navigation button[aria-current] { background: #eef0ff; color: #2010bc; border-color: #c6c5fb; }
#atelier .atelier-panel[hidden], #atelier .atelier-control-panel[hidden] { display: none !important; }
#atelier .atelier-panel > header { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #ddd; }
#atelier .atelier-panel > header h3 { margin: 0 0 10px; font: 700 clamp(24px, 3vw, 34px)/1.2 Arial, sans-serif; text-transform: none; letter-spacing: -.03em; }
#atelier .atelier-panel p, #atelier .atelier-panel small { font: 400 13px/1.6 Arial, sans-serif; color: #555; overflow-wrap: anywhere; }
#atelier .atelier-panel h4, #atelier .atelier-panel h5 { font: 700 16px/1.4 Arial, sans-serif; margin: 20px 0 12px; }
#atelier .atelier-panel > div > h4 { display: none; }
#atelier .unified-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(16px, 2vw, 28px); margin: 18px 0; border: 1px solid #ddd; border-radius: 10px; background: #fff; cursor: auto; }
#atelier .unified-card > strong { font: 700 18px/1.5 Arial, sans-serif; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
#atelier .unified-card > * { grid-column: 1 / -1; }
#atelier .unified-card.is-hidden { opacity: 1; border-style: dashed; background: #f7f7f7; }
#atelier .unified-card[data-sort-kind=product] { border-left: 5px solid #21804b; }
#atelier .unified-card[data-sort-kind=product].is-hidden { border: 1px dashed #b18532; border-left: 5px solid #b18532; background: #fffaf0; }
#atelier .product-visibility-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#atelier .product-visibility-status strong { padding: 7px 10px; border-radius: 5px; background: #e5f4ea; color: #155d34; font: 700 12px/1.5 Arial, sans-serif; }
#atelier .product-visibility-status.is-offline strong { background: #f9e9bf; color: #73500d; }
#atelier .product-visibility-status span { color: #555; font: 400 13px/1.5 Arial, sans-serif; }
#atelier .drag-handle { font: 600 11px/1.4 Arial, sans-serif; color: #666; cursor: grab; }
#atelier .manager-media-preview { display: flex; gap: 12px; justify-content: flex-start; max-width: 100%; }
#atelier .manager-media-preview img { width: min(180px, 45%); height: 160px; object-fit: contain; background: #fafafa; border-radius: 6px; }
#atelier .atelier-actions, #atelier .manager-form-actions { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
#atelier.atelier-workspace button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#atelier .atelier-panel button { min-height: 42px; padding: 11px 15px; font: 600 12px/1.4 Arial, sans-serif; cursor: pointer; border-radius: 5px; }
#atelier .atelier-panel .atelier-actions button { background: #fff; color: #171717; border: 1px solid #bbb; }
#atelier .atelier-panel button[data-delete-product], #atelier .atelier-panel button[data-delete-design] { background: #fff; color: #a52323; border-color: #e6baba; }
#atelier .manager-add-button, #atelier .atelier-panel button[type=submit] { background: #2110dc; color: #fff; border: 1px solid #2110dc; }
#atelier .atelier-panel label { display: grid; gap: 8px; font: 600 13px/1.5 Arial, sans-serif; }
#atelier .atelier-panel input, #atelier .atelier-panel select, #atelier .atelier-panel textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #bbb; border-radius: 5px; background: #fff; color: #111; font: 400 14px/1.5 Arial, sans-serif; }
#atelier .atelier-panel input[type=file] { padding: 8px; font-size: 12px; }
#atelier .atelier-panel textarea { min-height: 130px; resize: vertical; }
#atelier .atelier-panel .central-editor, #atelier .atelier-panel .new-product-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; padding: 24px 0; margin: 8px 0 0; border: 0; border-top: 1px solid #ddd; background: #fff; }
#atelier .atelier-panel .manager-create-form:not(.is-open) { display: none; }
#atelier .central-editor > h4, #atelier .new-product-form > h3, #atelier .new-product-form > p, #atelier .new-product-form > button, #atelier .product-photo-manager, #atelier .stock-editor, #atelier .atelier-panel label:has(textarea), #atelier .atelier-panel label:has([data-stripe-price-select]) { grid-column: 1 / -1; }
#atelier .atelier-panel .legal-editor { grid-template-columns: minmax(0, 1fr); }
#atelier .legal-editor textarea { min-height: 280px; }
#atelier .contact-inbox-message { display: grid; gap: 8px; padding: 22px 0; border-bottom: 1px solid #ccc; }
#atelier .contact-inbox-message p { white-space: pre-wrap; }
#atelier .contact-inbox-message a { overflow-wrap: anywhere; color: #2110dc; text-decoration: underline; }
#atelier .atelier-panel .manager-toggle, #atelier .site-lock-toggle { display: flex; align-items: center; gap: 12px; }
#atelier .atelier-panel input[type=checkbox] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; padding: 0; }
#atelier .stock-editor > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px; }
#atelier .stock-editor legend { font: 700 14px/1.4 Arial, sans-serif; }
#atelier .product-photo-list { display: flex; flex-wrap: wrap; gap: 14px; }
#atelier .product-photo-list figure { display: grid; width: 180px; gap: 9px; margin: 0; padding: 10px; border: 1px solid #ddd; border-radius: 7px; background: #fafafa; }
#atelier .product-photo-list img { width: 100%; height: 140px; object-fit: contain; }
#atelier .product-photo-list figcaption { font: 700 11px/1.4 Arial, sans-serif; color: #444; text-align: center; }
#atelier .product-photo-list figure:first-child { border-color: #21804b; background: #f3fbf6; }
#atelier .product-photo-list figure:first-child figcaption { color: #155d34; }
#atelier .product-photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#atelier .product-photo-actions button { min-height: 34px; padding: 7px 5px; font-size: 10px; background: #fff; color: #171717; border: 1px solid #bbb; }
#atelier .product-photo-actions button[data-remove-product-photo] { grid-column: 1 / -1; color: #a52323; border-color: #e6baba; }
#atelier .product-photo-actions button:disabled { cursor: not-allowed; opacity: .35; }
#atelier .atelier-grid { gap: 22px; }
#atelier .appearance-editor .appearance-save-button,
#atelier .appearance-editor .appearance-editor-status { grid-column: 1 / -1; }
#atelier .appearance-editor .appearance-save-button { justify-self: start; min-width: min(100%, 260px); background: #111; color: #fff; border: 1px solid #111; }
#atelier .appearance-editor .appearance-save-button:disabled { cursor: wait; opacity: .6; }
#atelier .appearance-editor .appearance-editor-status { min-height: 1.5em; margin: 0; color: #155d34; font: 700 14px/1.5 Arial, sans-serif; }
#atelier .outfit-editor { grid-template-columns: minmax(0, 1fr); }
#atelier .outfit-editor-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid #b9d8c5; border-left: 5px solid #21804b; border-radius: 7px; background: #f3fbf6; }
#atelier .outfit-editor-toggle.is-disabled { border-color: #e2c98e; border-left-color: #b18532; background: #fffaf0; }
#atelier .outfit-editor-toggle > div { display: grid; gap: 4px; }
#atelier .outfit-editor-toggle strong { font: 700 13px/1.4 Arial, sans-serif; }
#atelier .outfit-editor-toggle small { color: #555; }
#atelier .outfit-editor-toggle button { flex: 0 0 auto; color: #171717; border: 1px solid #999; background: #fff; }
#atelier .outfit-editor-part { min-width: 0; margin: 0; padding: 18px; border: 1px solid #d7d7d7; border-radius: 8px; }
#atelier .outfit-editor-part legend { padding: 0 8px; font: 700 16px/1.4 Arial, sans-serif; }
#atelier .outfit-photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-top: 16px; }
#atelier .outfit-photo-list figure { display: grid; gap: 8px; margin: 0; padding: 8px; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; }
#atelier .outfit-photo-list img { display: block; width: 100%; height: 120px; object-fit: contain; background: #fff; }
#atelier .outfit-photo-list button { min-height: 36px; padding: 8px; color: #a52323; border: 1px solid #e6baba; background: #fff; }
#atelier .outfit-editor > button[type=submit] { justify-self: start; min-width: min(100%, 260px); }
#atelier .outfit-editor > button[type=submit]:disabled { cursor: wait; opacity: .6; }
#atelier .outfit-editor-status { min-height: 1.5em; margin: 0; color: #155d34; font: 700 14px/1.5 Arial, sans-serif; }
#atelier button:focus-visible, #atelier input:focus-visible, #atelier select:focus-visible, #atelier textarea:focus-visible { outline: 3px solid #6a60f3; outline-offset: 3px; }
@media (max-width: 900px) {
  #atelier .atelier-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #atelier .atelier-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #atelier .atelier-panel .central-editor, #atelier .atelier-panel .new-product-form, #atelier .atelier-grid { grid-template-columns: minmax(0, 1fr); }
  #atelier .atelier-navigation { gap: 4px; padding: 6px; }
  #atelier .atelier-navigation button { padding: 10px 8px; font-size: 12px; }
  #atelier .atelier-actions > button { flex: 1 1 120px; }
  #atelier .section-heading { flex-wrap: wrap; gap: 16px; }
  #atelier .outfit-editor-toggle { align-items: stretch; flex-direction: column; }
  #atelier .outfit-editor-toggle button { width: 100%; }
}