@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 60px;
  --navy: #0b1b31;
  --navy-2: #132d4a;
  --orange: #ff4f1f;
  --paper: #fbf5ef;
  --canvas: #f4f6f9;
  --white: #fff;
  --text: #182230;
  --muted: #667085;
  --line: #e4e8ee;
  --success: #14804a;
  --warning: #a15c00;
  --danger: #b42318;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(11, 27, 49, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; color: var(--text); font-family: Manrope, "Segoe UI", sans-serif; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
a { color: var(--navy-2); }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  transition: width .25s ease, transform .25s ease;
}
.sidebar-logo { flex: 0 0 auto; padding: 19px 16px 16px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sidebar-logo a { display: inline-flex; align-items: center; justify-content: center; }
.sidebar-logo img { display: block; width: 180px; max-width: 100%; height: auto; filter: brightness(0) invert(1); }
.sidebar-logo strong { display: block; margin-top: 9px; color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 600; }
.sidebar-menu { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 14px 0 24px; }
.sidebar-menu > a,
.menu-group-items a {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}
.sidebar-menu a:hover,
.sidebar-menu a:focus-visible,
.sidebar-menu a.active { color: #fff; background: rgba(255, 255, 255, .11); }
.sidebar-menu a.active::before { position: absolute; inset: 7px auto 7px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); content: ""; }
.sidebar-menu a i { min-width: 22px; font-size: 20px; text-align: center; }
.menu-group { margin-top: 3px; }
.menu-group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  border: 0;
  color: rgba(255, 255, 255, .55);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-group-toggle > span { display: flex; align-items: center; gap: 9px; }
.menu-group-toggle > i:last-child { transition: transform .2s ease; }
.menu-group.collapsed .menu-group-toggle > i:last-child { transform: rotate(-90deg); }
.menu-group-items { max-height: 700px; overflow: hidden; transition: max-height .25s ease; }
.menu-group.collapsed .menu-group-items { max-height: 0; }
.menu-group-items a { min-height: 38px; padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
.menu-group-items a i { font-size: 17px; }

.admin-header {
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  z-index: 999;
  display: flex;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid #eef0f3;
  background: #fff;
  box-shadow: 0 2px 10px rgba(11, 27, 49, .06);
  transition: left .25s ease;
}
.header-start, .header-right, .language, .row-actions, .section-heading, .editor-heading { display: flex; align-items: center; }
.header-start { min-width: 0; gap: 12px; }
.header-page-title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.header-right { gap: 12px; }
.sidebar-toggle, .header-logout, .header-site-link, .browser-notification-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #475467;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
}
.browser-notification-toggle[data-notification-state="on"] { border-color: rgba(255, 79, 31, .45); color: #c83b16; background: #fff6f2; }
.browser-notification-toggle[data-notification-state="denied"] { color: #8a4b42; background: #fff7f5; }
.browser-notification-toggle i { font-size: 19px; }
.sidebar-toggle { border: 0; font-size: 24px; }
.header-user { display: inline-flex; max-width: 240px; align-items: center; gap: 7px; overflow: hidden; color: #475467; font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.header-user:hover { color: var(--navy); }
.header-user i { font-size: 22px; }
.header-right form { margin: 0; }
.language { gap: 3px; }
.language form { margin: 0; }
.language button { display: inline-flex; min-height: 32px; align-items: center; padding: 5px 9px; border: 0; border-radius: 6px; color: #667085; background: transparent; font-size: 12px; cursor: pointer; }
.language button[aria-current="page"] { color: #fff; background: var(--navy); }

.main-content { min-height: calc(100vh - var(--header-height)); margin-top: var(--header-height); margin-left: var(--sidebar-width); padding: 22px; transition: margin-left .25s ease; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.page-head h1 { margin: 0; color: var(--text); font-size: clamp(1.5rem, 3vw, 2rem); }

body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .admin-header { left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .sidebar-logo { padding-inline: 8px; }
body.sidebar-collapsed .sidebar-logo img { width: 54px; }
body.sidebar-collapsed .sidebar-logo strong,
body.sidebar-collapsed .sidebar-menu a span,
body.sidebar-collapsed .menu-group-toggle span,
body.sidebar-collapsed .menu-group-toggle > i:last-child { display: none; }
body.sidebar-collapsed .sidebar-menu a { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .sidebar-menu a i { min-width: 0; }
body.sidebar-collapsed .menu-group-toggle { justify-content: center; }
body.sidebar-collapsed .menu-group.collapsed .menu-group-items { max-height: 700px; }

.card, .content-card, .metric-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.card { margin-bottom: 20px; padding: 20px; }
.card h2, .card h3 { margin-top: 0; }
.content-action-grid, .translation-grid, .media-choice-grid, .media-library-grid, .metric-grid, .product-grid { display: grid; gap: 18px; }
.content-action-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 20px; }
.content-action-grid .card { min-height: 145px; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.content-action-grid .card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11, 27, 49, .1); }
.content-action-grid .card p { margin-bottom: 0; color: var(--muted); }
.translation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric-grid article { padding: 20px; }
.metric-grid strong { display: block; margin-bottom: 3px; color: var(--navy); font-size: 28px; }
.metric-grid span { color: var(--muted); font-size: 13px; }
.plan-current-card { overflow: hidden; margin-bottom: 32px; border: 1px solid rgba(11, 27, 49, .12); border-radius: 18px; color: #fff; background: radial-gradient(circle at 92% 0, rgba(255, 79, 31, .28), transparent 34%), linear-gradient(135deg, var(--navy), #15375f); box-shadow: 0 18px 48px rgba(11, 27, 49, .16); }
.plan-current-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 28px; }
.plan-current-head .eyebrow { margin: 0 0 8px; color: #ffb29d; }
.plan-current-head h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.035em; }
.plan-current-head > div > p:last-child { max-width: 820px; margin: 10px 0 0; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.65; }
.plan-account-summary { display: grid; min-width: 300px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-account-summary article { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .08); }
.plan-account-summary i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 9px; color: #fff; background: rgba(255, 79, 31, .72); font-size: 19px; }
.plan-account-summary span { min-width: 0; color: rgba(255, 255, 255, .67); font-size: 11px; line-height: 1.35; }
.plan-account-summary strong { display: block; margin-bottom: 2px; color: #fff; font-size: 17px; }
.plan-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 28px 28px; }
.plan-usage-card { padding: 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; color: var(--navy); background: rgba(255, 255, 255, .96); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.plan-usage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.plan-usage-heading > span { color: #526174; font-size: 12px; font-weight: 700; }
.plan-usage-heading > strong { color: var(--navy); font-size: 25px; letter-spacing: -.03em; white-space: nowrap; }
.plan-usage-heading small { color: #7b8797; font-size: 13px; font-weight: 650; }
.plan-usage-track { height: 9px; margin: 16px 0 14px; overflow: hidden; border-radius: 999px; background: #e7ebf0; }
.plan-usage-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ff815f); transition: width .35s ease; }
.plan-usage-track.unlimited span { width: 100%; background: repeating-linear-gradient(135deg, rgba(255, 79, 31, .72) 0 9px, rgba(255, 129, 95, .72) 9px 18px); }
.plan-usage-card > p { display: flex; align-items: baseline; gap: 7px; margin: 0; color: #6b7788; font-size: 12px; }
.plan-usage-card > p strong { color: var(--navy); font-size: 16px; }
.plan-selection { margin-top: 34px; }
.plan-selection .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
.plan-selection .section-heading .eyebrow { margin: 0 0 5px; color: var(--orange); }
.plan-selection .section-heading h2 { margin: 0 0 5px; color: var(--navy); font-size: clamp(1.45rem, 3vw, 1.9rem); }
.plan-selection .section-heading p:last-child { margin: 0; color: var(--muted); }
.plan-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan-choice-card { position: relative; display: flex; min-width: 0; min-height: 390px; overflow: hidden; flex-direction: column; padding: 24px; border: 1px solid #dce2e9; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(11, 27, 49, .07); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.plan-choice-card::before { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--navy), #214b7c); content: ""; }
.plan-choice-card:hover { transform: translateY(-3px); border-color: #c7d1dd; box-shadow: 0 18px 38px rgba(11, 27, 49, .12); }
.plan-choice-card.current { border-color: rgba(255, 79, 31, .5); }
.plan-choice-card.current::before { background: linear-gradient(90deg, var(--orange), #ff9b7f); }
.plan-choice-head { padding-bottom: 18px; border-bottom: 1px solid #edf0f3; }
.plan-choice-head .eyebrow { margin: 0 0 7px; color: #657488; }
.plan-choice-head h2 { margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 23px; letter-spacing: -.025em; }
.plan-choice-head > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.plan-feature-list { display: grid; gap: 13px; margin: 20px 0 0; padding: 0; color: #435166; list-style: none; }
.plan-feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; }
.plan-feature-list i { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; color: #0b6b43; background: #e9f8f0; font-size: 16px; }
.pricing-period-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid #d8dfe7; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(11, 27, 49, .07); }
.pricing-period-switch button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.pricing-period-switch button[aria-pressed="true"] { color: #fff; background: var(--navy); }
.pricing-period-switch button:focus-visible { outline: 3px solid rgba(255, 79, 31, .35); outline-offset: 2px; }
.plan-price-actions { display: grid; gap: 10px; padding-top: 16px; }
.plan-price-actions [data-price-period][hidden] { display: none !important; }
.plan-price-unavailable { display: flex; min-height: 66px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 11px; color: var(--muted); background: #f2f5f8; font-size: 12px; line-height: 1.45; }
.plan-price-option { display: grid; min-height: 66px; align-items: center; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; padding: 12px 14px; border: 1px solid #cfd7e1; border-radius: 11px; color: var(--navy); background: #fff; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.plan-price-option > span:first-child { display: flex; min-width: 0; align-items: center; gap: 7px; color: #59677a; font-size: 11px; font-weight: 700; line-height: 1.3; }
.plan-price-option i { color: var(--orange); font-size: 17px; }
.plan-price-option strong { text-align: right; font-size: 15px; white-space: nowrap; }
.plan-price-amount { display: grid; justify-items: end; gap: 2px; }
.plan-price-amount small { color: #758195; font-size: 9px; font-weight: 700; white-space: nowrap; }
.plan-price-per-order { margin-top: 3px; color: #b53b19; font-size: 10px; font-weight: 850; white-space: nowrap; }
.plan-price-option:hover { transform: translateY(-1px); border-color: var(--navy); background: #f7f9fb; }
.plan-price-option.primary { border-color: var(--navy); color: #fff; background: var(--navy); }
.plan-price-option.primary > span:first-child, .plan-price-option.primary i, .plan-price-option.primary .plan-price-amount small { color: rgba(255, 255, 255, .76); }
.plan-price-option.primary .plan-price-per-order { color: #ffd2c6; }
.plan-price-option.primary:hover { border-color: #193e69; background: #193e69; }

@media (max-width: 1400px) {
  .plan-current-head { flex-direction: column; }
  .plan-account-summary { width: 100%; min-width: 0; }
  .plan-choice-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}

@media (max-width: 680px) {
  .plan-current-head { padding: 21px; }
  .plan-account-summary, .plan-usage-grid { grid-template-columns: 1fr; }
  .plan-usage-grid { padding: 0 16px 16px; }
  .plan-choice-grid { grid-template-columns: 1fr; }
  .plan-choice-card { min-height: 0; padding: 20px; }
  .plan-selection .section-heading { align-items: stretch; flex-direction: column; }
  .pricing-period-switch { width: 100%; }
  .plan-price-option { grid-template-columns: 1fr; }
  .plan-price-option strong { text-align: left; }
  .plan-price-amount { justify-items: start; }
}
.billing-checkout-layout { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; }
.billing-checkout-card { overflow: hidden; padding: 0; }
.billing-order-summary { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 28px; padding: 24px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--navy), #15345d); color: #fff; }
.billing-order-heading { display: grid; gap: 5px; }
.billing-order-heading span, .billing-order-heading small { color: rgba(255, 255, 255, .72); font-size: 12px; }
.billing-order-heading strong { font-size: 25px; }
.billing-price-breakdown { display: grid; gap: 8px; margin: 0; }
.billing-price-breakdown > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; color: rgba(255, 255, 255, .76); font-size: 12px; }
.billing-price-breakdown dt, .billing-price-breakdown dd { margin: 0; }
.billing-price-breakdown dd { color: #fff; font-weight: 750; white-space: nowrap; }
.billing-price-breakdown .total { margin-top: 3px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 15px; font-weight: 800; }
.billing-price-breakdown .total dd { font-size: 19px; }
.billing-form { display: grid; gap: 22px; padding: 22px; }
.billing-form fieldset { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.billing-form legend { padding: 0 8px; color: var(--navy); font-weight: 800; }
.billing-consent { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid rgba(255, 79, 31, .35); border-radius: 10px; background: rgba(255, 79, 31, .06); font-weight: 600; }
.billing-consent input { width: auto; min-height: 0; margin-top: 3px; }
.billing-security-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--muted); font-size: 13px; }
.billing-security-note i { color: var(--orange); font-size: 19px; }
.billing-actions { display: flex; justify-content: flex-end; gap: 12px; }

@media (max-width: 680px) {
  .billing-order-summary { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .billing-actions { align-items: stretch; flex-direction: column-reverse; }
  .billing-actions .button, .billing-actions button { width: 100%; }
}

.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 18px; }
.button, button:not(.text-button):not(.menu-group-toggle):not(.sidebar-toggle):not(.header-logout):not(.browser-notification-toggle):not(.profile-tab):not(.dt-paging-button):not(.rich-editor-toolbar button):not(.personalization-field-box):not(.template-fixed-layer-box):not(.editor-layer-select):not(.editor-layer-action):not(.editor-context-menu button):not(.editor-asset-card):not(.editor-tool-option):not([data-close-design-assets]):not([data-delete-selected]) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary { border: 1px solid #cfd6df; color: #344054; background: #fff; }
.button.danger { border: 1px solid #e5484d; color: #b42318; background: #fff; }
button.danger:not(.text-button) { border: 1px solid #b42318; color: #fff; background: #b42318; }
.text-button, .text-link { display: inline; min-height: 0; padding: 0; border: 0; color: #355d87; background: transparent; font-weight: 600; text-decoration: none; cursor: pointer; }
.text-button:hover, .text-link:hover { text-decoration: underline; }

.inline-form, .form-grid, .content-editor { display: grid; gap: 16px; }
.inline-form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.form-row, .taxonomy-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.form-grid fieldset { grid-column: 1 / -1; }
fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 9px; padding: 16px; }
legend { padding: 0 8px; color: var(--navy); font-weight: 800; }
label { display: grid; gap: 7px; color: #344054; font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #c7ced8; border-radius: 7px; color: var(--text); background: #fff; font-weight: 400; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [contenteditable]:focus-visible { outline: 3px solid rgba(255, 79, 31, .34); outline-offset: 2px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check-row input { width: auto; min-height: 0; }
.field-help, .field-counter, .table-subline { display: block; color: var(--muted); font-size: 12px; }
.field-help[hidden] { display: none !important; }
.plan-price-calculator { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; padding: 14px; border: 1px solid rgba(11, 27, 49, .12); border-radius: 10px; background: linear-gradient(135deg, rgba(251, 245, 239, .82), #fff); }
.plan-price-calculator-input { min-width: 0; }
.plan-price-calculator-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.plan-price-calculator-results article { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 11px; border: 1px solid #e1e6ec; border-radius: 9px; background: #fff; }
.plan-price-calculator-results span, .plan-price-calculator-results small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.plan-price-calculator-results output { overflow-wrap: anywhere; color: var(--navy); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.warning-text { color: var(--warning); }
.language-card { display: grid; align-content: start; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.sticky-actions { position: sticky; z-index: 10; bottom: 12px; display: flex; justify-content: flex-end; padding: 11px; border: 1px solid rgba(228, 232, 238, .9); border-radius: 9px; background: rgba(244, 246, 249, .94); backdrop-filter: blur(8px); }

.table-card { overflow-x: auto; padding: 0; }
.table-card > h2 { padding: 18px 20px 0; }
.order-list-preview, .order-list-preview-empty { display: grid; width: 76px; height: 58px; overflow: hidden; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.order-list-preview { transition: border-color .18s ease, box-shadow .18s ease; }
.order-list-preview:hover { border-color: var(--orange); box-shadow: 0 5px 14px rgba(11, 27, 49, .12); }
.order-list-preview:focus-visible { outline: 3px solid rgba(255, 79, 31, .32); outline-offset: 2px; }
.order-list-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.order-list-preview-empty { color: #9aa5b4; background: #f8f9fb; font-size: 22px; }
.order-list-marketplace { display: grid; gap: 2px; }
.order-list-marketplace strong { color: var(--navy); font-size: 12px; }
.order-list-marketplace small { color: var(--muted); font-size: 11px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 13px 15px; border-bottom: 1px solid #edf0f3; text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: #475467; background: #fafbfc; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:hover { background: #fbfcfd; }
td strong { color: var(--text); }
.table-subline { margin-top: 3px; }
.content-thumb, .content-thumb-placeholder { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 6px; object-fit: cover; background: var(--paper); color: var(--navy); font-weight: 800; }
.row-actions { gap: 10px; }
.row-actions form { margin: 0; }
.status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: #344054; background: #eef1f5; font-size: 11px; font-weight: 800; text-transform: none; }
.status-published { color: #05603a; background: #e8f7ef; }
.status-draft { color: #694b00; background: #fff4d6; }
.status-archived { color: #7a271a; background: #fee4e2; }

.alert { margin-bottom: 18px; padding: 13px 15px; border-radius: 8px; }
.alert.success { color: #05603a; background: #e8f7ef; }
.alert.error { color: #8a1f17; background: #fee4e2; }
.alert code, .alert small { display: block; margin-top: 8px; overflow-wrap: anywhere; }

.editor-heading { justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.editor-heading h2 { margin: 2px 0 0; font-size: 20px; }
.editor-heading .panel-actions { margin: 0; }
.eyebrow { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.editor-tabs { display: flex; gap: 2px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid #dfe3e8; }
.editor-tabs a, .editor-tabs span { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 15px; border-bottom: 3px solid transparent; color: #667085; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.editor-tabs i { margin-right: 7px; font-size: 16px; }
.editor-tabs a:hover, .editor-tabs a:focus-visible { color: var(--navy); }
.editor-tabs a[aria-current="page"] { border-bottom-color: var(--orange); color: var(--navy); }
.editor-tabs span[aria-disabled="true"] { opacity: .42; }
.tab-badge { display: inline-grid; min-width: 21px; min-height: 21px; margin-left: 7px; place-items: center; padding: 1px 6px; border-radius: 6px; color: #fff; background: var(--orange); font-size: 11px; }
.blog-editor-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(290px, .95fr); gap: 22px; align-items: start; }
.blog-editor-main { min-width: 0; }
.blog-editor-sidebar { min-width: 0; }
.publish-card { position: sticky; top: calc(var(--header-height) + 20px); display: grid; gap: 16px; margin: 0; }
.publish-card h2 { margin: -20px -20px 6px; padding: 17px 20px; border-bottom: 1px solid var(--line); font-size: 17px; }
.publish-card h3 { margin: 0 0 8px; font-size: 13px; }
.compact-check-list { display: grid; max-height: 210px; gap: 7px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.locale-tabs { display: none; gap: 5px; margin-bottom: 10px; }
.js-locale-ready .locale-tabs { display: flex; }
.locale-tabs button { min-height: 34px !important; padding: 6px 13px !important; border: 1px solid #ccd3dc !important; color: #475467 !important; background: #fff !important; }
.locale-tabs button.is-active { border-color: var(--navy) !important; color: #fff !important; background: var(--navy) !important; }
.js-locale-ready .locale-panel { display: none; }
.js-locale-ready .locale-panel.is-active { display: grid; gap: 15px; }
.section-heading { justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading p { margin-top: 4px; color: var(--muted); font-size: 13px; }

.media-choice-grid, .media-library-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.media-choice, .media-library-item { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.media-choice img, .media-library-item img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; background: #edf1f5; }
.media-choice code { overflow-wrap: anywhere; color: #475467; font-size: 11px; white-space: normal; }
.media-library-item form { margin: 0; }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span { display: flex; align-items: center; padding: 0 10px; border: 1px solid #c7ced8; border-right: 0; border-radius: 7px 0 0 7px; color: #667085; background: #f7f8fa; font-size: 12px; white-space: nowrap; }
.input-prefix input { border-radius: 0 7px 7px 0; }
.search-preview { display: grid; gap: 5px; padding: 15px; border: 1px solid #e2e6eb; border-radius: 8px; background: #f9fafb; }
.search-preview small, .search-preview span { color: #667085; font-size: 11px; }
.search-preview strong { color: #1a0dab; font-size: 17px; font-weight: 500; }
.search-preview p { margin: 0; color: #4d5156; font-size: 12px; line-height: 1.55; }

.rich-editor { display: grid; gap: 0; }
.rich-editor-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 7px; border: 1px solid #c7ced8; border-bottom: 0; border-radius: 7px 7px 0 0; background: #f7f8fa; }
.rich-editor-toolbar button { min-width: 34px; min-height: 32px; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; color: #344054; background: transparent; cursor: pointer; }
.rich-editor-toolbar button:hover { border-color: #d5dae1; background: #fff; }
.rich-editor-surface { display: none; min-height: 340px; max-height: 68vh; overflow: auto; padding: 14px; border: 1px solid #c7ced8; border-radius: 0 0 7px 7px; background: #fff; font-size: 14px; line-height: 1.65; }
.rich-editor.js-editor-ready .rich-editor-surface { display: block; }
.rich-editor.js-editor-ready > textarea { display: none; }
.rich-editor-surface h2 { margin: 1.4em 0 .55em; font-size: 1.45em; }
.rich-editor-surface h3 { margin: 1.2em 0 .5em; font-size: 1.2em; }
.compact-editor { min-height: 190px; max-height: 40vh; }

.faq-manager .section-heading h2 { display: flex; align-items: center; gap: 8px; }
.faq-manager .section-heading h2 i { color: var(--orange); }
.faq-accordion { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.faq-accordion-item { border-bottom: 1px solid var(--line); background: #fff; }
.faq-accordion-item:last-child { border-bottom: 0; }
.faq-accordion-item summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 16px; color: var(--navy); background: #fff; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.faq-accordion-item summary::-webkit-details-marker { display: none; }
.faq-accordion-item summary > span:first-child { min-width: 0; }
.faq-accordion-item[open] summary { color: var(--navy); background: #f6f8fb; box-shadow: inset 4px 0 0 var(--orange); }
.faq-summary-badges { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.faq-accordion-item[open] .faq-summary-badges > i { transform: rotate(180deg); }
.faq-badge { padding: 3px 7px; border-radius: 999px; color: #344054; background: #eef1f5; font-size: 10px; font-weight: 800; }
.faq-badge.featured { color: #694b00; background: #fff0b8; }
.faq-accordion-body { padding: 17px; }
.managed-answer { color: #475467; line-height: 1.7; }
.managed-answer > :first-child { margin-top: 0; }
.managed-answer > :last-child { margin-bottom: 0; }
.faq-item-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); }
.button.compact { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.empty-state { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.empty-state i { font-size: 42px; }
.empty-state p { margin: 0; }
.direct-answer-details { padding: 0; }
.direct-answer-details > summary { display: flex; min-height: 58px; align-items: center; padding: 15px 20px; color: var(--navy); font-weight: 800; cursor: pointer; }
.direct-answer-details > summary span { display: flex; align-items: center; gap: 8px; }
.direct-answer-details .details-body { padding: 0 20px 20px; }
.embedded-answer-form { margin-top: 15px; }

.panel-dialog { width: min(820px, calc(100vw - 30px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 12px; color: var(--text); background: #fff; box-shadow: 0 30px 90px rgba(11, 27, 49, .3); }
.panel-dialog::backdrop { background: rgba(11, 27, 49, .62); }
.panel-dialog.is-fallback-open { position: fixed; z-index: 1001; top: 20px; left: 50%; margin: 0; transform: translateX(-50%); }
body.has-fallback-dialog::before { position: fixed; z-index: 1000; inset: 0; content: ""; background: rgba(11, 27, 49, .62); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-size: 18px; }
.dialog-close { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; color: #667085; font-size: 25px; text-decoration: none; }
.dialog-close:hover { background: #f2f4f7; }
.dialog-form { display: grid; gap: 16px; overflow-y: auto; max-height: calc(100vh - 110px); padding: 20px; }
.dialog-form .locale-panel { gap: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.template-import-dialog { width: min(640px, calc(100vw - 30px)); }
.template-import-dialog .dialog-header { align-items: flex-start; }
.template-import-dialog .dialog-header p { max-width: 500px; margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.template-import-dialog .dialog-form > label { display: grid; gap: 7px; font-weight: 700; }
.template-import-warning { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 79, 31, .28); border-radius: 8px; background: #fbf5ef; color: var(--navy); font-size: 13px; line-height: 1.5; }
.template-import-warning i { flex: 0 0 auto; margin-top: 2px; color: var(--orange); font-size: 18px; }
.customer-preview-dialog { width: min(1180px, calc(100vw - 30px)); height: min(820px, calc(100dvh - 30px)); max-height: calc(100dvh - 30px); overflow: hidden; }
.customer-preview-dialog .dialog-header { align-items: flex-start; }
.customer-preview-dialog .dialog-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.customer-preview-frame { display: block; width: 100%; height: calc(100% - 76px); border: 0; background: #fbf5ef; }

.visual-card { padding: 0; overflow: hidden; }
.visual-card + .visual-card { margin-top: 20px; }
.card-title { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.card-title h2 { margin: 0; font-size: 17px; }
.visual-card-body { padding: 20px; }
.visual-label { margin-bottom: 5px; color: var(--text); font-size: 14px; }
.media-upload-form { display: grid; gap: 12px; margin-top: 12px; }
.upload-area { display: flex; min-height: 250px; align-items: center; justify-content: center; overflow: hidden; border: 2px dashed #d7dce3; border-radius: 9px; background: #f8f9fb; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.upload-area:hover, .upload-area:focus-visible, .upload-area.is-dragover { border-color: var(--navy-2); background: #eef2f7; }
.upload-area.has-image { padding: 10px; background: #fff; }
.upload-placeholder { color: var(--muted); }
.upload-placeholder i { display: block; margin-bottom: 10px; font-size: 48px; }
.upload-placeholder p { margin: 0 0 5px; font-weight: 600; }
.upload-placeholder span { font-size: 12px; }
.upload-preview { position: relative; width: 100%; }
.upload-preview img { display: block; width: 100%; max-height: 360px; border-radius: 7px; object-fit: contain; }
.preview-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 5px; }
.preview-actions button, .gallery-item .item-actions button { display: grid !important; width: 34px; min-width: 34px; height: 34px; min-height: 34px !important; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 6px !important; color: #fff !important; background: rgba(11, 27, 49, .9) !important; }
.preview-actions button.danger, .gallery-item .item-actions button.danger { background: rgba(180, 35, 24, .92) !important; }
.uploader-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.media-language-fields { border: 1px solid var(--line); border-radius: 8px; }
.media-language-fields > summary { padding: 10px 12px; color: #475467; font-size: 12px; font-weight: 700; cursor: pointer; }
.media-language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12px 12px; }
.compact-alert { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 11px 13px; color: #24537c; background: #edf6ff; font-size: 12px; }
.managed-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 13px; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 8px; background: #f3f5f8; cursor: grab; }
.gallery-item:active { cursor: grabbing; }
.gallery-item.is-dragging { opacity: .45; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .item-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .18s ease; }
.gallery-item:hover .item-actions, .gallery-item:focus-within .item-actions { opacity: 1; }
.gallery-item .item-actions form { margin: 0; }
.gallery-add { display: grid; min-height: 130px; place-items: center; align-content: center; margin: 0; border: 2px dashed #d7dce3; border-radius: 8px; color: var(--muted); background: #fafbfc; text-align: center; }
.gallery-add > label { display: grid; width: 100%; height: 100%; min-height: 126px; place-items: center; align-content: center; cursor: pointer; }
.gallery-add i { font-size: 33px; }
.gallery-add .media-language-fields { display: none; }
.inline-media-manager { padding: 0; }
.inline-media-manager > summary { padding: 17px 20px; color: var(--navy); font-weight: 800; cursor: pointer; }
.inline-media-manager .details-body { padding: 0 20px 20px; }
.inline-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.inline-media-item { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.inline-media-item img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; }
.inline-media-item code { overflow-wrap: anywhere; font-size: 10px; }
.media-library-dialog { width: min(980px, calc(100vw - 30px)); }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; max-height: 44vh; overflow: auto; padding: 2px; }
.library-asset { display: grid !important; min-height: 0 !important; gap: 6px !important; padding: 8px !important; border: 2px solid transparent !important; border-radius: 8px !important; color: var(--text) !important; background: #f8f9fb !important; text-align: left; cursor: pointer; }
.library-asset:hover, .library-asset[aria-pressed="true"] { border-color: var(--orange) !important; background: #fff !important; }
.library-asset img { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; }
.library-asset span { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.library-asset small { color: var(--muted); font-size: 10px; }
button.dialog-close { border: 0 !important; color: #667085 !important; background: transparent !important; }
.crop-dialog { width: min(900px, calc(100vw - 30px)); }
.crop-body { display: grid; gap: 16px; padding: 20px; }
.crop-canvas-wrap { overflow: hidden; border-radius: 8px; background: repeating-conic-gradient(#eef1f5 0 25%, #fff 0 50%) 50% / 20px 20px; }
.crop-canvas-wrap canvas { display: block; width: 100%; height: auto; }
.crop-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.crop-controls input { padding: 0; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: linear-gradient(135deg, var(--paper), #fff); }
.login-card { width: min(430px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(11, 27, 49, .14); }
.login-card > img { display: block; width: 190px; height: auto; margin: 0 auto; }
.login-card h1 { margin: 25px 0; text-align: center; }
.login-card form { display: grid; gap: 16px; }
.login-card .language { justify-content: center; margin-top: 20px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12px; }
.login-divider::before, .login-divider::after { flex: 1; height: 1px; background: var(--line); content: ""; }
.identity-provider-list, .registration-provider-actions { display: grid; gap: 10px; }
.identity-button { width: 100%; }
.x-button { border-color: #111; color: #fff; background: #111; }
.x-button:hover { border-color: #2c2c2c; background: #2c2c2c; }
.facebook-button { border-color: #0866ff; color: #fff; background: #0866ff; }
.facebook-button:hover { border-color: #0757d8; background: #0757d8; }
.identity-button span { display: inline-grid; min-width: 20px; place-items: center; font-weight: 900; }
.merchant-registration { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

.integrations-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.integrations-grid .card { display: flex; min-height: 190px; align-items: flex-start; flex-direction: column; }
.integrations-grid .card h2 { margin: 0 0 8px; }
.integrations-grid .card p { flex: 1; color: var(--muted); }
.integration-connection, .integration-connection + .card { margin-bottom: 20px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-head h2 { margin: 0 0 5px; }
.section-head p { margin: 0; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid label:first-child { grid-column: span 1; }
.form-grid > .field-wide { grid-column: 1 / -1; }
.field-help { color: var(--muted); font-size: 12px; }
.integration-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.integration-actions form { margin: 0; }
.mapping-form { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(180px, 1.4fr) auto; gap: 7px; align-items: center; }
.status-badge { display: inline-flex; width: max-content; align-items: center; padding: 5px 9px; border-radius: 999px; color: #344054; background: #eef1f5; font-size: 11px; font-weight: 750; }
.status-badge.success { color: #067647; background: #ecfdf3; }
.status-badge.attention { color: #b42318; background: #fef3f2; }
.status-badge.pending { color: #93370d; background: #fffaeb; }
.status-badge.archived { color: #475467; background: #f2f4f7; }
.integration-page-intro { margin-bottom: 18px; }
.integration-page-intro .section-head { margin: 0; align-items: center; }
.integration-page-intro form { display: grid; justify-items: end; margin: 0; }
.integration-page-intro .publisher-status { margin: 4px 0 0; }
.marketplace-status-tabs-shell { overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8f9fb; box-shadow: var(--shadow); }
.marketplace-status-tabs { padding-inline: 10px; }
.marketplace-status-tab { display: inline-flex; align-items: center; gap: 8px; }
.marketplace-status-tab strong { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; border-radius: 999px; color: #475467; background: #eef1f5; font-size: 11px; }
.marketplace-status-tab.is-active strong { color: #fff; background: var(--navy); }
.marketplace-status-toolbar { display: flex; justify-content: flex-end; padding: 12px 14px 0; }
.marketplace-status-toolbar[hidden] { display: none; }
.marketplace-status-toolbar label { display: grid; min-width: 220px; gap: 5px; color: #475467; font-size: 11px; font-weight: 750; }
.marketplace-products { display: grid; gap: 12px; margin: 0; padding: 14px; }
.marketplace-status-empty { margin: 14px; box-shadow: none; }
.marketplace-product-list-item { display: grid; min-width: 0; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.marketplace-product-list-item[hidden] { display: none; }
.marketplace-product-list-image { display: grid; width: 112px; height: 112px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb; }
.marketplace-product-thumbnail, .marketplace-product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: #f8f9fb; object-fit: contain; }
.marketplace-product-placeholder i { color: #98a2b3; font-size: 30px; }
.marketplace-product-list-content { min-width: 0; }
.marketplace-product-list-content h3 { margin: 7px 0 4px; color: var(--navy); font-size: 16px; line-height: 1.4; }
.marketplace-product-list-content h3 a { color: inherit; text-decoration: none; }
.marketplace-product-list-content h3 a:hover { color: var(--orange); }
.marketplace-product-list-content p, .marketplace-product-list-content small { margin: 0; color: var(--muted); }
.marketplace-product-list-content .marketplace-status-reason { margin: 6px 0; color: #b42318; font-size: 12px; }
.marketplace-product-list-content .marketplace-sync-warning { display: flex; align-items: center; gap: 5px; margin: 6px 0; color: #93370d; font-size: 12px; }
.marketplace-product-list-action { white-space: nowrap; }
.marketplace-product-page { display: grid; gap: 18px; }
.marketplace-product-detail-hero { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 24px; }
.marketplace-product-detail-hero > div { min-width: 0; }
.marketplace-product-detail-hero h2 { margin: 9px 0 6px; color: var(--navy); }
.marketplace-product-detail-hero p, .marketplace-product-detail-hero small { margin: 0; color: var(--muted); }
.marketplace-product-detail-image, .marketplace-product-detail-placeholder { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fb; }
.marketplace-product-detail-image { padding: 0; cursor: zoom-in; }
.marketplace-product-detail-image img { width: 100%; height: 100%; object-fit: contain; }
.marketplace-product-detail-placeholder i { color: #98a2b3; font-size: 42px; }
.marketplace-product-detail-body { display: grid; gap: 22px; }
.marketplace-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.marketplace-facts > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8f9fb; }
.marketplace-facts dt { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.marketplace-facts dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 13px; font-weight: 700; }
.marketplace-facts.compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.trendyol-invoice-dialog { width: min(1040px, calc(100vw - 30px)); }
.trendyol-invoice-dialog .dialog-form, .trendyol-invoice-dialog .marketplace-facts, .trendyol-invoice-dialog .invoice-lines { min-width: 0; max-width: 100%; }
.trendyol-invoice-dialog .dialog-form { overflow-x: hidden; }
.trendyol-invoice-dialog [hidden] { display: none !important; }
.marketplace-order-products-open { display: grid; min-width: 118px; gap: 2px; padding: 5px 7px; border: 0; border-radius: 7px; color: var(--navy); background: transparent; text-align: left; cursor: pointer; }
.marketplace-order-products-open:hover { color: var(--orange); background: rgba(255,79,31,.07); }
.marketplace-order-products-open:focus-visible { outline: 3px solid rgba(255,79,31,.28); outline-offset: 2px; }
.marketplace-order-products-open strong { font-size: 15px; }
.marketplace-order-products-open small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.trendyol-order-products-dialog { width: min(1120px, calc(100vw - 30px)); max-height: min(880px, calc(100vh - 30px)); }
.trendyol-order-products-dialog .dialog-form { overflow-x: hidden; }
.trendyol-order-products-list { display: grid; gap: 16px; }
.trendyol-order-product-card { display: grid; min-width: 0; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.trendyol-order-product-gallery { display: grid; min-width: 0; align-content: start; gap: 9px; }
.trendyol-order-product-gallery-stage { display: grid; height: 270px; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.trendyol-order-product-gallery-stage > img { width: 100%; height: 100%; min-width: 0; object-fit: contain; }
.trendyol-order-product-gallery-arrow { display: grid; width: 34px; height: 56px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--navy); background: rgba(11,27,49,.07); cursor: pointer; }
.trendyol-order-product-gallery-arrow:hover { color: var(--orange); background: rgba(255,79,31,.1); }
.trendyol-order-product-gallery-arrow i { font-size: 27px; }
.trendyol-order-product-gallery output { justify-self: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.trendyol-order-product-gallery-thumbnails { display: flex; max-width: 100%; gap: 7px; overflow-x: auto; padding: 2px; }
.trendyol-order-product-gallery-thumbnails button { flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.trendyol-order-product-gallery-thumbnails button.is-active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,79,31,.17); }
.trendyol-order-product-gallery-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
.trendyol-order-product-image-placeholder { display: grid; min-height: 270px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #98a2b3; background: #fff; }
.trendyol-order-product-image-placeholder i { font-size: 40px; }
.trendyol-order-product-body { display: grid; min-width: 0; align-content: start; gap: 14px; }
.trendyol-order-product-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 14px; }
.trendyol-order-product-head h3 { min-width: 0; margin: 0; color: var(--navy); font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.trendyol-order-product-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .trendyol-order-product-card { grid-template-columns: 1fr; padding: 12px; } .trendyol-order-product-gallery-stage { height: 230px; } .trendyol-order-product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trendyol-order-product-head { align-items: stretch; flex-direction: column; } }
.marketplace-facts > .invoice-total-fact { border-color: rgba(255, 79, 31, .45); background: #fff5f1; }
.marketplace-facts > .invoice-total-fact dd { color: #b92d09; font-size: 17px; }
.invoice-lines { display: grid; gap: 10px; }
.invoice-lines .section-head { margin: 0; }
.invoice-lines .section-head h3 { margin: 0; color: var(--navy); font-size: 16px; }
.invoice-lines .section-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.invoice-lines .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.invoice-lines table { min-width: 0; table-layout: fixed; }
.invoice-lines th, .invoice-lines td { overflow-wrap: anywhere; white-space: normal; }
.invoice-lines th:first-child, .invoice-lines td:first-child { width: 44%; }
.invoice-lines th:nth-child(2), .invoice-lines td:nth-child(2) { width: 9%; }
.invoice-lines td strong, .invoice-lines td small { display: block; }
.invoice-lines td:first-child strong { max-width: 42ch; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.invoice-lines td small { margin-top: 3px; color: var(--muted); }
@media (max-width: 720px) { .invoice-lines table { min-width: 640px; } }
.marketplace-copy h4, .marketplace-attributes h4, .marketplace-gallery h4, .marketplace-variant-section > h4 { margin: 0 0 10px; color: var(--navy); font-size: 14px; }
.marketplace-copy p { margin: 0; color: #475467; line-height: 1.65; }
.marketplace-attributes > div { display: flex; flex-wrap: wrap; gap: 7px; }
.marketplace-attributes span { display: inline-flex; gap: 5px; padding: 6px 9px; border: 1px solid #dbe1e8; border-radius: 999px; color: #475467; background: #fff; font-size: 11px; }
.marketplace-attributes span strong { color: var(--navy); }
.marketplace-gallery > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.marketplace-gallery button { display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #f8f9fb; cursor: zoom-in; }
.marketplace-gallery button:hover { border-color: var(--orange); background: #fff; }
.marketplace-gallery img { width: 100%; height: 100%; object-fit: contain; }
.marketplace-gallery-modal { width: min(1100px, calc(100vw - 32px)); max-width: none; height: min(820px, calc(100vh - 32px)); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #0b1b31; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.marketplace-gallery-modal::backdrop { background: rgba(4,12,24,.82); backdrop-filter: blur(4px); }
.marketplace-gallery-modal-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.marketplace-gallery-modal header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 20px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
.marketplace-gallery-modal header h2 { margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-gallery-modal header > div { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.marketplace-gallery-modal output { color: #d0d5dd; font-size: 13px; font-weight: 700; }
.marketplace-gallery-close, .marketplace-gallery-arrow { display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.08); }
.marketplace-gallery-close { width: 38px; height: 38px; }
.marketplace-gallery-close i { font-size: 25px; }
.marketplace-gallery-stage { position: relative; display: grid; min-height: 0; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 18px; }
.marketplace-gallery-stage > img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.marketplace-gallery-arrow { width: 48px; height: 64px; justify-self: center; }
.marketplace-gallery-arrow i { font-size: 36px; }
.marketplace-gallery-arrow:disabled { visibility: hidden; }
.marketplace-variant-section { padding-top: 4px; }
.marketplace-variant-list { display: grid; gap: 13px; }
.marketplace-variant-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.marketplace-variant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.marketplace-variant-head h5 { margin: 0 0 4px; color: var(--navy); font-size: 14px; }
.marketplace-variant-head small { color: var(--muted); }
.marketplace-variant-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.marketplace-variant-status .marketplace-status-reason { margin: 0; color: #b42318; font-size: 12px; }
.marketplace-external-link { flex: 0 0 auto; font-size: 12px; font-weight: 700; text-decoration: none; }
.marketplace-mapping-form { grid-template-columns: minmax(150px, .65fr) minmax(320px, 1.6fr); align-items: start; padding-top: 14px; border-top: 1px dashed #d7dde5; }
.marketplace-mapping-form label { display: grid; gap: 6px; color: #344054; font-size: 11px; font-weight: 750; }
.marketplace-mapping-target { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.marketplace-mapping-target[hidden] { display: none; }
.marketplace-template-state { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #dfe5ec; border-radius: 8px; background: #fff; }
.mapping-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.mapping-form-actions .publisher-status { min-height: 0; margin: 0 auto 0 0; }
.publisher-status.error, .publisher-status.is-error { color: #b42318; }
.publisher-status.pending, .publisher-status.is-pending { color: #475467; }
.publisher-status.success { color: #067647; }
.integration-publishing { margin-bottom: 20px; }
.integration-publishing > form { display: grid; gap: 16px; }
.publisher-step { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.publisher-step legend { display: flex; align-items: center; gap: 9px; padding: 0 8px; color: var(--navy); font-size: 15px; font-weight: 800; }
.publisher-step legend > span { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); font-size: 12px; }
.publisher-step > .field-help { margin: -2px 0 15px; }
.publisher-grid, .publisher-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.publisher-grid .field-wide { grid-column: 1 / -1; }
.publisher-grid label, .catalog-picker > label, .publisher-attribute { display: grid; gap: 7px; color: var(--text); font-size: 13px; font-weight: 700; }
.publisher-grid label small, .publisher-attribute small { color: var(--muted); font-size: 11px; font-weight: 500; }
.publisher-grid textarea { width: 100%; resize: vertical; }
.publisher-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.publisher-search button { min-width: 82px; }
.catalog-picker { display: grid; align-content: start; gap: 8px; }
.catalog-picker .result-label { margin-top: 5px; }
.publisher-status { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.publisher-status.is-error { color: #b42318; }
.publisher-status.is-pending { color: #475467; }
.publisher-attributes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 13px; }
.publisher-empty { grid-column: 1 / -1; margin: 0; padding: 13px; border: 1px dashed #cfd6df; border-radius: 8px; color: var(--muted); background: #fff; font-size: 12px; }
.publisher-attribute { align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.publisher-attribute > span { display: block; min-height: 20px; }
.required-badge { display: inline-flex; padding: 2px 6px; border-radius: 999px; color: #8a2d0e !important; background: #fff0ea; font-size: 9px !important; font-weight: 800 !important; text-transform: uppercase; }
.publisher-variants { display: grid; gap: 13px; margin-bottom: 13px; }
.publisher-variant { padding: 16px; border: 1px solid #d9dee6; border-radius: 9px; background: #fff; }
.publisher-variant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.publisher-variant-head h3 { margin: 0; font-size: 15px; }
.publisher-variant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.publisher-variant-attributes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 13px; }
.publisher-review { background: #fffaf7; border-color: #ffd6c9; }
.publisher-review .publisher-status { margin-bottom: 8px; }
.checkbox-row { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 14px; font-weight: 500; }
.checkbox-row input { width: 18px; min-height: 18px; margin-top: 2px; flex: 0 0 18px; }
td small { display: block; margin-top: 4px; color: var(--muted); }
.status-badge.print { color: #8a2d0e; background: #fff0ea; }

.revision-workspace { display: grid; grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr); gap: 18px; align-items: start; }
.revision-workspace > .card { margin: 0; }
.revision-controls { grid-row: span 2; }
.revision-fields { display: grid; gap: 12px; margin-bottom: 16px; }
.revision-field { display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.revision-field.is-active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,79,31,.12); }
.revision-field legend { padding: 0 5px; color: var(--navy); font-weight: 800; }
.revision-field label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.revision-field input[type="color"] { min-height: 42px; padding: 4px; }
.revision-field-geometry { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.revision-preview { min-width: 0; }
.revision-canvas-help { margin: -5px 0 12px; }
.revision-stage-viewport { display: flex; width: 100%; height: clamp(280px, 62dvh, 640px); min-height: 0; align-items: center; justify-content: center; padding: 20px; overflow: auto; border: 1px solid #cdd4dd; border-radius: 12px; background-color: #e7ebf0; background-image: linear-gradient(45deg, rgba(11,27,49,.045) 25%, transparent 25%), linear-gradient(-45deg, rgba(11,27,49,.045) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(11,27,49,.045) 75%), linear-gradient(-45deg, transparent 75%, rgba(11,27,49,.045) 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }
.revision-canvas { position: relative; overflow: hidden; width: min(100%, 760px); margin: 0 auto; container-type: inline-size; border: 1px solid var(--line); background: #fff; }
.revision-editor-canvas { width: min(100%, 920px); margin: 0; border-radius: 2px; box-shadow: 0 10px 30px rgba(11,27,49,.15); touch-action: none; }
.revision-finished-artwork { position: absolute; z-index: 1; overflow: visible; container-type: inline-size; background: #fff; }
.revision-canvas-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; }
.revision-layer { position: absolute; box-sizing: border-box; display: flex; overflow: visible; align-items: center; justify-content: center; white-space: pre-wrap; word-break: normal; }
.revision-layer[hidden] { display: none; }
.revision-page-toolbar { display: flex; width: min(100%, 920px); margin: 0 auto 8px; gap: 6px; }
.revision-page-toolbar button { min-height: 34px; padding: 7px 12px; border: 1px solid #d6dce4; border-radius: 7px; color: var(--navy); background: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.revision-page-toolbar button[aria-pressed="true"] { color: #fff; background: var(--navy); }
.revision-layer-text-content { display: flex; width: 100%; height: 100%; align-items: center; overflow: hidden; white-space: pre-wrap; word-break: normal; pointer-events: none; }
.revision-layer img { width: 100%; height: 100%; }
.revision-editor-canvas .revision-canvas-background, .revision-editor-canvas .revision-layer:not(.is-operator-editable) { pointer-events: none; }
.revision-layer.is-operator-editable { outline: 2px dashed #15945d; outline-offset: -2px; cursor: move; touch-action: none; }
.revision-layer.is-operator-editable:hover, .revision-layer.is-operator-editable:focus-visible { outline-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,79,31,.15); }
.revision-layer.is-operator-editable.is-active { outline: 2px solid var(--orange); box-shadow: 0 0 0 4px rgba(255,79,31,.18); }
.revision-resize-handle { position: absolute; z-index: 1002; right: -7px; bottom: -7px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px rgba(11,27,49,.35); cursor: nwse-resize; }
.revision-trim-guide { position: absolute; z-index: 1000; border: 2px dashed var(--orange); border-radius: 3px; pointer-events: none; }
.revision-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.revision-actions > div { display: flex; flex-wrap: wrap; gap: 10px; }
.revision-editable-choice { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.revision-history { grid-column: 1 / -1; }
.revision-history ol { display: grid; gap: 6px; margin: 0; padding-left: 22px; color: var(--muted); }
.order-design-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
.order-design-main-column,
.order-design-side-column { display: grid; min-width: 0; gap: 18px; align-content: start; }
.order-design-main-column > .card,
.order-design-side-column > .card { min-width: 0; margin: 0; }
.order-latest-design { display: grid; gap: 16px; }
.order-latest-design .revision-canvas { flex: 0 0 auto; width: min(100%, 640px); margin: 0; border-radius: 0; box-shadow: 0 12px 28px rgba(11,27,49,.08); }
.order-design-preview-card .order-design-viewport { height: clamp(240px, 34vw, 440px); min-height: 240px; }
.order-design-information-card { display: grid; gap: 12px; padding: 18px; }
.order-product-information-card { display: grid; gap: 12px; padding: 18px; }
.order-product-information-card .section-head h2 { font-size: clamp(18px, 1.6vw, 23px); }
.order-product-information-card .section-head p { font-size: 13px; line-height: 1.45; }
.order-product-information-card .order-product-meta,
.order-product-information-card .order-property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.order-product-information-card .order-product-meta > div,
.order-product-information-card .order-property-grid > div { min-width: 0; padding: 10px 12px; }
.order-product-information-card .order-product-meta span,
.order-product-information-card .order-property-grid span { font-size: 11px; }
.order-product-information-card .order-product-meta strong,
.order-product-information-card .order-property-grid strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.order-design-information-card .section-head h2,
.order-production-files .section-head h2 { font-size: clamp(18px, 1.6vw, 23px); }
.order-design-information-card .section-head p,
.order-production-files .section-head p { font-size: 13px; line-height: 1.45; }
.order-design-information-grid { grid-template-columns: 1fr; gap: 9px; }
.order-design-information-grid > div { padding: 10px 12px; }
.order-property-grid.order-design-information-grid span { font-size: 11px; }
.order-property-grid.order-design-information-grid strong { font-size: 14px; line-height: 1.3; }
.order-production-files { padding: 18px; }
.order-latest-design .personalization-stage { border-radius: 0; }
.order-design-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.order-design-state { margin: 0; padding: 10px 12px; border-left: 4px solid var(--orange); border-radius: 8px; color: var(--navy); background: #fff5ef; font-size: 13px; line-height: 1.4; }
.order-production-preview { margin: 0 0 18px; display: grid; gap: 8px; }
.order-production-preview figcaption { color: var(--muted); font-size: .9rem; font-weight: 700; }
.order-production-preview img { display: block; width: min(100%, 760px); max-height: 520px; object-fit: contain; border: 1px solid var(--border); background: #fff; }
.production-loading-state { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 13px 14px; border: 1px solid rgba(255, 79, 31, .28); border-radius: 9px; color: var(--navy); background: #fff6f2; }
.production-loading-spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 3px solid rgba(255, 79, 31, .2); border-top-color: var(--orange); border-radius: 50%; animation: production-loading-spin .8s linear infinite; }
.production-loading-copy { display: grid; gap: 2px; font-size: 12px; line-height: 1.45; }
.production-loading-copy strong { font-size: 14px; }
.production-loading-copy > span { color: var(--muted); }
.production-credit-warning { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 11px 12px; border-left: 4px solid #d97706; border-radius: 7px; color: #713f12; background: #fff7e8; font-size: 12px; line-height: 1.45; }
.production-credit-warning > i { margin-top: 1px; font-size: 19px; }
.production-credit-warning > span { display: grid; gap: 2px; }
.production-credit-warning strong { font-size: 13px; }
.production-actions { align-items: flex-start; }
.production-restart-locked { display: grid; gap: 4px; max-width: 360px; }
.production-restart-locked .production-restart-disabled[disabled] { border: 1px solid #d9dee6 !important; color: #7b8491 !important; background: #eef1f5 !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1; }
.production-restart-locked .field-help { margin: 0; font-size: 11px; }
@keyframes production-loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 980px) { .revision-workspace { grid-template-columns: 1fr; } .revision-controls { grid-row: auto; } .revision-history { grid-column: auto; } }
@media (max-width: 1050px) { .order-design-overview { grid-template-columns: 1fr; } .order-design-preview-card .order-design-viewport { height: clamp(260px, 56vw, 520px); } }
@media (max-width: 620px) { .revision-field { grid-template-columns: 1fr 1fr; } .revision-field label:first-of-type { grid-column: 1 / -1; } .revision-field-geometry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .revision-stage-viewport, .order-design-preview-card .order-design-viewport { height: min(58dvh, 440px); min-height: 220px; padding: 10px; } .revision-actions { align-items: stretch; flex-direction: column; } .revision-actions > div, .order-design-actions { flex-direction: column; } .order-design-actions .button, .order-design-actions button { width: 100%; } .order-product-information-card .order-product-meta, .order-product-information-card .order-property-grid { grid-template-columns: 1fr; } }

.button.compact { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.merchant-profile-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.merchant-profile-head h2 { margin: 8px 0 4px; font-size: clamp(24px, 3vw, 34px); }
.merchant-profile-head p { margin: 0; color: var(--muted); }
.merchant-profile-head code { max-width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: #475467; background: #fff; font-size: 11px; overflow-wrap: anywhere; }
.back-link { color: #475467; font-size: 13px; font-weight: 700; }
.merchant-profile-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.profile-tabs { display: flex; min-height: 520px; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--line); background: #f8f9fb; }
.profile-tabs button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; border: 0; border-radius: 7px; color: #475467; background: transparent; text-align: left; }
.profile-tabs button:hover { color: var(--navy); background: #eef1f5; }
.profile-tabs button.is-active { color: #fff; background: var(--navy); box-shadow: 0 7px 18px rgba(11, 27, 49, .14); }
.profile-tabs button i { font-size: 19px; }
.profile-panels { min-width: 0; padding: 24px; }
.profile-tab-panel[hidden] { display: none; }
.profile-form { display: grid; gap: 22px; }
.profile-form .field-wide { grid-column: 1 / -1; }
.profile-form textarea { width: 100%; resize: vertical; }
.profile-form-actions { display: flex; min-height: 42px; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-form-status { margin-right: auto; color: var(--muted); font-size: 13px; font-weight: 650; }
.profile-form-status.is-pending { color: #475467; }
.profile-form-status.is-success { color: #067647; }
.profile-form-status.is-error { color: #b42318; }
.profile-form[aria-busy="true"] { opacity: .78; }
.section-note { margin: 0 0 20px; padding: 12px 14px; border-left: 3px solid var(--orange); color: #475467; background: #fff7f3; font-size: 13px; }
.checkbox-field { display: flex; min-height: 44px; align-items: center; flex-direction: row; gap: 10px; }
.checkbox-field input { width: 18px; height: 18px; margin: 0; }
.product-profile-head { align-items: flex-end; }
.product-profile-head h2 { margin: 7px 0 0; font-size: clamp(24px, 3vw, 34px); }
.product-profile-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.product-profile-meta code { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: #475467; background: #fff; font-size: 11px; }
.product-editor-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.product-editor-shell { grid-template-columns: 1fr; }
.product-editor-shell > .profile-tabs { min-height: auto; flex-direction: row; overflow-x: auto; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--line); background: #fff; }
.product-editor-shell > .profile-tabs button { width: auto; min-width: max-content; border-radius: 0; border-bottom: 3px solid transparent; }
.product-editor-shell > .profile-tabs button.is-active { color: var(--navy); background: #fff; box-shadow: none; border-bottom-color: var(--orange); }
.product-profile-form[aria-busy="true"] { opacity: .78; }
.product-profile-form .profile-tab-panel > .form-grid { align-items: start; }
.extension-choice-grid { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.extension-choice-grid .check-row { min-height: 36px; }
.catalog-item-list { display: grid; gap: 12px; }
.catalog-item-row { display: grid; grid-template-columns: minmax(150px, .8fr) repeat(2, minmax(190px, 1fr)) 40px; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb; }
.catalog-item-row .text-button { min-height: 42px; align-self: end; }
.danger-text { color: var(--danger); }
.danger-zone > form { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
[data-product-lifecycle][hidden] { display: none; }
.merchant-product-detail-head { align-items: flex-end; margin: 4px 0 14px; }
.merchant-product-detail-head h2 { margin: 5px 0 0; }
.merchant-product-detail-head code { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: #475467; background: #fff; font-size: 11px; }
.product-detail-tabs-shell { overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.product-detail-tabs { display: flex; overflow-x: auto; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fff; }
.product-detail-tab { width: auto; min-width: max-content; min-height: 50px; padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #667085; background: transparent; box-shadow: none; font-size: 13px; font-weight: 750; }
.product-detail-tab:hover, .product-detail-tab:focus-visible { color: var(--navy); background: #f8f9fb; }
.product-detail-tab.is-active { color: var(--navy); background: #fff; border-bottom-color: var(--orange); }
.product-detail-panels { padding: 20px; background: #f8f9fb; }
.product-detail-panel[hidden] { display: none !important; }
.product-detail-panel > .card:first-child, .product-detail-panel > [data-trendyol-product-tab] > .card:first-child { margin-top: 0; }
.product-detail-panel > .card:last-child, .product-detail-panel > [data-trendyol-product-tab] > .card:last-child { margin-bottom: 0; }
.marketplace-question-tabs .product-detail-tab { gap: 8px; }
.marketplace-question-tabs .product-detail-tab strong { display: inline-grid; min-width: 24px; min-height: 24px; place-items: center; padding: 0 6px; border-radius: 999px; background: #eef1f5; font-size: 12px; }
.marketplace-question-card { display: grid; gap: 14px; }
.marketplace-question-card + .marketplace-question-card { margin-top: 16px; }
.marketplace-question-product { display: flex; align-items: center; gap: 12px; }
.marketplace-question-product div { display: grid; gap: 4px; }
.marketplace-question-thumbnail { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: contain; }
.marketplace-question-text { margin: 0; font-size: 16px; line-height: 1.6; }
.marketplace-question-answer { padding: 14px; border-left: 3px solid #16a34a; border-radius: 6px; background: #f0fdf4; }
.marketplace-question-answer.rejected { border-left-color: #dc2626; background: #fef2f2; }
.marketplace-question-answer.pending { border-left-color: #d97706; background: #fffbeb; }
.marketplace-question-answer p { margin: 6px 0; }
.marketplace-question-reply { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.marketplace-order-summary { display: flex; min-width: 190px; align-items: center; gap: 10px; }
.marketplace-order-summary > div { min-width: 0; }
.marketplace-order-summary small { display: block; margin-top: 3px; color: var(--muted); }
.marketplace-order-thumbnail { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: contain; }
.marketplace-order-thumbnail.placeholder { display: grid; place-items: center; color: #98a2b3; background: #f8f9fb; }
.marketplace-order-thumbnail.placeholder i { font-size: 20px; }
.marketplace-order-page { display: grid; gap: 14px; }
.marketplace-order-panel { display: grid; gap: 16px; }
.marketplace-order-panel > .card, .marketplace-order-address-grid > .card { margin: 0; }
.marketplace-order-panel h3 { margin: 0 0 14px; color: var(--navy); font-size: 16px; }
.marketplace-order-preview-card { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.marketplace-order-preview-stage { position: relative; display: grid; min-height: 260px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fb; cursor: pointer; }
.marketplace-order-preview-stage:focus-visible { outline: 3px solid rgba(255, 79, 31, .32); outline-offset: 3px; border-color: var(--orange); }
.marketplace-order-preview-stage img { display: block; width: 100%; height: 280px; object-fit: contain; background: #fff; }
.marketplace-order-preview-paste-hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 7px 9px; border: 1px solid rgba(11, 27, 49, .12); border-radius: 7px; color: var(--navy); background: rgba(255, 255, 255, .94); box-shadow: 0 3px 10px rgba(11, 27, 49, .08); font-size: 11px; line-height: 1.35; }
.marketplace-order-preview-paste-hint i { flex: 0 0 auto; color: var(--orange); font-size: 16px; }
.marketplace-order-preview-empty { display: grid; max-width: 260px; justify-items: center; gap: 8px; padding: 24px; color: var(--muted); text-align: center; }
.marketplace-order-preview-empty i { color: #98a2b3; font-size: 42px; }
.marketplace-order-preview-empty p { margin: 0; line-height: 1.5; }
.marketplace-order-preview-controls { display: grid; align-content: start; gap: 12px; }
.marketplace-order-preview-controls > p { margin: -4px 0 2px; color: var(--muted); line-height: 1.55; }
.marketplace-order-preview-controls form { display: grid; gap: 14px; }
.marketplace-order-preview-controls input[type="file"] { padding: 10px; background: #fff; }
.marketplace-order-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.marketplace-order-history { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.marketplace-order-history li { padding-left: 4px; color: var(--navy); }
.marketplace-order-history span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.marketplace-order-documents { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.marketplace-order-documents li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8f9fb; }
.marketplace-order-documents small { display: block; margin-top: 4px; color: var(--muted); }
.marketplace-invoice-upload form { display: grid; gap: 14px; }
.marketplace-invoice-upload input[type="file"] { padding: 10px; background: #fff; }
.marketplace-provider-json { max-height: 620px; margin: 14px 0 0; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; color: #dbe7f7; background: var(--navy); font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .marketplace-order-address-grid, .marketplace-order-preview-card { grid-template-columns: 1fr; } .marketplace-order-preview-stage { min-height: 220px; } .marketplace-order-preview-stage img { height: 240px; } .marketplace-order-documents li { align-items: stretch; flex-direction: column; } }
.publisher-bound-product { display: grid; gap: 4px; align-content: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.publisher-bound-product span, .publisher-bound-product small { color: var(--muted); font-size: 11px; }
.publisher-bound-product strong { color: var(--navy); }
.merchant-variants > .section-head { align-items: center; }
.merchant-variant-section-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.merchant-variant-section-head .button, .merchant-variant-savebar button, .merchant-variant-designer { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.merchant-variant-list { display: grid; gap: 18px; margin: 18px 0; }
.merchant-variant-card { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); overflow: hidden; border: 1px solid #d9e0e8; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(11, 27, 49, .06); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.merchant-variant-card:focus-within { border-color: rgba(255, 79, 31, .65); box-shadow: 0 0 0 3px rgba(255, 79, 31, .12), 0 12px 30px rgba(11, 27, 49, .08); }
.merchant-variant-preview { position: relative; display: grid; min-height: 220px; overflow: hidden; place-items: center; padding: 12px; border-right: 1px solid var(--line); background-color: #eef1f4; background-image: linear-gradient(45deg, #e3e7eb 25%, transparent 25%), linear-gradient(-45deg, #e3e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e3e7eb 75%), linear-gradient(-45deg, transparent 75%, #e3e7eb 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }
.merchant-variant-preview[aria-busy="true"]::after { position: absolute; inset: 0; content: ''; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.72) 48%, transparent 66%); animation: variant-preview-loading 1.2s linear infinite; transform: translateX(-100%); }
@keyframes variant-preview-loading { to { transform: translateX(100%); } }
.merchant-variant-preview-canvas { position: relative; flex: none; overflow: hidden; container-type: inline-size; box-shadow: 0 7px 22px rgba(11, 27, 49, .18); }
.merchant-variant-preview-layer { position: absolute; display: block; transform-origin: center; pointer-events: none; }
.merchant-variant-preview-layer img { display: block; width: 100%; height: 100%; }
.merchant-variant-preview-layer.is-tinted-svg { background: var(--variant-svg-color); mask: var(--variant-svg-source) var(--variant-svg-position, center) / contain no-repeat; -webkit-mask: var(--variant-svg-source) var(--variant-svg-position, center) / contain no-repeat; }
.merchant-variant-preview-text { display: block; width: 100%; height: 100%; overflow: hidden; }
.merchant-variant-preview-state { display: grid; max-width: 190px; justify-items: center; gap: 8px; color: #667085; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.35; }
.merchant-variant-preview-state[hidden], .merchant-variant-preview-canvas[hidden] { display: none !important; }
.merchant-variant-preview-state i { color: #98a2b3; font-size: 32px; }
.merchant-variant-content { min-width: 0; padding: 18px; }
.merchant-variant-content .publisher-variant-head { align-items: flex-start; margin-bottom: 16px; }
.merchant-variant-content .publisher-variant-head h3 { margin-bottom: 6px; }
.merchant-variant-template-status { display: inline-flex; align-items: center; gap: 5px; color: #667085; font-size: 11px; font-weight: 750; }
.merchant-variant-template-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ''; }
.merchant-variant-template-status.is-ready { color: #087443; }
.merchant-variant-template-status.is-missing { color: #b54708; }
.merchant-variant-template-status.is-pending { color: #667085; }
.merchant-variant-content .panel-actions { align-items: center; }
.merchant-variant-content .text-button.danger { display: inline-flex; align-items: center; gap: 5px; color: #b42318; }
.merchant-variant-identifiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.merchant-variant-attributes { margin-top: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.merchant-variant-attributes summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--navy); cursor: pointer; font-size: 12px; font-weight: 750; list-style: none; }
.merchant-variant-attributes summary::-webkit-details-marker { display: none; }
.merchant-variant-attributes summary i { font-size: 18px; transition: transform .18s ease; }
.merchant-variant-attributes[open] summary i { transform: rotate(180deg); }
.merchant-variant-attributes-body { padding: 0 13px 13px; border-top: 1px solid var(--line); }
.merchant-variant-attribute-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.merchant-variant-attribute-head strong { font-size: 12px; }
.merchant-variant-attribute { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1.2fr) 36px; align-items: end; gap: 9px; margin-top: 8px; }
.merchant-variant-attribute label { display: grid; gap: 6px; font-size: 12px; font-weight: 650; }
.merchant-variant-attribute > button { min-height: 40px; font-size: 20px; }
.merchant-variant-savebar { position: sticky; z-index: 5; bottom: 0; margin: 0 -20px -20px; padding: 14px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
@media (max-width: 840px) {
  .merchant-variant-card { grid-template-columns: 1fr; }
  .merchant-variant-preview { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .merchant-variant-section-head, .merchant-variant-content .publisher-variant-head { align-items: stretch; flex-direction: column; }
  .merchant-variant-section-head .button { width: 100%; }
  .merchant-variant-content .panel-actions { align-items: stretch; flex-direction: column; }
  .merchant-variant-content .panel-actions > * { width: 100%; }
  .merchant-variant-identifiers, .merchant-variant-attribute { grid-template-columns: 1fr; }
  .merchant-variant-attribute > button { justify-self: end; width: 40px; }
}
.account-section + .account-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.account-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.account-section-head h3, .account-card h3, .account-card h4 { margin: 0; color: var(--navy); }
.account-section-head p, .account-card-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.account-list { display: grid; gap: 16px; }
.account-card { display: grid; gap: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.account-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-card-head h3 { overflow-wrap: anywhere; font-size: 17px; }
.account-password-form { padding-top: 20px; border-top: 1px dashed var(--line); }
.account-password-form h4 { margin-bottom: 5px; font-size: 15px; }
.empty-state { margin: 0; padding: 20px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); text-align: center; }
.lifecycle-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.lifecycle-summary > div { display: grid; gap: 5px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb; }
.lifecycle-summary span { color: var(--muted); font-size: 12px; font-weight: 700; }
.lifecycle-summary strong { color: var(--navy); font-size: 24px; }
.lifecycle-action-form { margin-bottom: 26px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.lifecycle-action-form p { margin: 0; color: #475467; }
.danger-zone { display: grid; gap: 16px; margin-top: 28px; padding: 20px; border: 1px solid #f0a6a6; border-radius: 10px; background: #fff8f7; }
.danger-zone.is-locked { border-color: var(--line); background: #f8f9fb; }
.danger-zone h3, .danger-zone p { margin: 0; }
.danger-zone h3 { color: #8f1d18; }
.danger-zone.is-locked h3 { color: var(--navy); }
.purge-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.purge-counts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid #f1d0cd; border-radius: 7px; background: #fff; }
.account-self-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.account-self-card { display: grid; gap: 22px; }
.account-identity-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 22px 24px; border-radius: var(--radius); color: #fff; background: linear-gradient(125deg, #0b1b31 0%, #173756 100%); box-shadow: var(--shadow); }
.account-identity-hero .eyebrow { margin: 0 0 5px; color: #ffb39e; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.account-identity-hero h2 { margin: 0; overflow-wrap: anywhere; color: inherit; font-size: clamp(20px, 3vw, 28px); }
.account-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border: 1px solid rgba(255, 255, 255, .24); border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .12); font-size: 24px; font-weight: 800; }
.account-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: rgba(255, 255, 255, .76); font-size: 12px; }
.account-meta span { display: inline-flex; align-items: center; gap: 6px; }
.merchant-account-hero { border: 1px solid #efd8ca; color: var(--navy); background: linear-gradient(125deg, #fffaf6 0%, #fbf5ef 100%); }
.merchant-account-hero .account-avatar { border-color: #ffd2c4; color: #fff; background: var(--orange); }
.merchant-account-hero .eyebrow { color: #b93815; }
.merchant-account-hero .account-meta { color: #667085; }
.account-profile-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.account-profile-shell .profile-tabs { min-height: 470px; }
.account-profile-shell .profile-panels { min-height: 470px; }
.account-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.account-panel-heading h3 { margin: 0; color: var(--navy); font-size: 20px; }
.account-panel-heading p { max-width: 720px; margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.account-password-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 46px; }
.password-field button { position: absolute; inset: 50% 7px auto auto; display: grid; width: 34px; height: 34px; padding: 0; transform: translateY(-50%); place-items: center; border: 0; color: #667085; background: transparent; }
.password-field button:hover { color: var(--navy); background: #eef1f5; }
.security-check-list { display: grid; gap: 9px; margin: 20px 0 0; padding: 14px 16px; border: 1px solid #d8e8de; border-radius: 9px; color: #356348; background: #f2faf5; font-size: 12px; list-style: none; }
.security-check-list li { display: flex; align-items: flex-start; gap: 8px; }
.security-check-list i { margin-top: 1px; font-size: 16px; }
form[data-admin-account-form][aria-busy="true"], form[data-merchant-account-form][aria-busy="true"] { opacity: .72; }
.dt-container { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; }
.dt-container .dt-layout-row { width: 100%; min-width: 0; align-items: center; gap: 16px; margin: 0; padding: 14px 16px; }
.dt-container .dt-layout-row.dt-layout-table { display: block; max-width: 100%; overflow-x: auto; padding: 0; }
.dt-container .dt-layout-cell { min-width: 0; }
.dt-container .dt-layout-start, .dt-container .dt-layout-end { flex: 1 1 0; }
.dt-container .dt-layout-end { justify-content: flex-end; }
.dt-container .dt-length label, .dt-container .dt-search label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dt-container .dt-search input, .dt-container .dt-length select { width: auto; min-height: 36px; margin: 0; border-color: #c7ced8; border-radius: 7px; background: #fff; }
.dt-container .dt-search input { width: 220px; max-width: 40vw; }
.dt-container table.dataTable { width: 100% !important; min-width: 720px; margin: 0 !important; }
.dt-container .dt-paging .dt-paging-button { display: inline-flex; min-width: 34px; min-height: 34px; align-items: center; justify-content: center; margin: 0 2px; padding: 6px 10px !important; border: 1px solid var(--line) !important; border-radius: 6px; color: #344054 !important; background: #fff !important; cursor: pointer; }
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) { border-color: #9aa5b4 !important; color: var(--navy) !important; background: #f8f9fb !important; }
.dt-container .dt-paging .dt-paging-button.current { border-color: var(--navy) !important; color: #fff !important; background: var(--navy) !important; }
.dt-container .dt-paging .dt-paging-button.disabled { opacity: .45; cursor: default; }
.dt-container table.dataTable thead > tr > th { color: var(--navy); background: #f8f9fb; }
.order-access-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; margin-bottom: 18px; padding: 16px 20px; border-left: 4px solid var(--orange); }
.order-access-content { display: grid; gap: 5px; }
.order-access-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.order-access-actions { display: flex; align-items: center; justify-content: flex-end; }
.order-access-card span, .order-summary-grid span, .order-product-meta span, .order-property-grid span { color: var(--muted); font-size: 12px; font-weight: 700; }
.order-access-card code { overflow-wrap: anywhere; font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: .08em; }
.order-access-card .field-help, .order-access-copy-status { margin: 0; }
.order-access-copy-status:empty { display: none; }
.production-technical-details { padding: 0; overflow: hidden; }
.production-technical-details summary { padding: 16px 20px; color: var(--navy); font-weight: 800; cursor: pointer; }
.production-technical-details[open] summary { border-bottom: 1px solid var(--line); }
.production-technical-details .order-property-grid { padding: 18px 20px 20px; }
.order-summary-grid, .order-product-meta, .order-property-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.order-summary-grid { margin-bottom: 18px; }
.order-summary-grid > div, .order-product-meta > div, .order-property-grid > div { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb; }
.order-property-grid .mono { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.order-product-meta { margin-bottom: 12px; }
.personalization-editor { margin-block: 18px; }
.visual-editor-workspace { padding: 12px; }
.visual-editor-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 10px; }
.visual-editor-title { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.visual-editor-title > div { display: grid; gap: 1px; }
.visual-editor-title .eyebrow, .visual-editor-title h2 { margin: 0; }
.visual-editor-title .eyebrow { font-size: .68rem; }
.visual-editor-title h2 { font-size: 1.22rem; }
.personalization-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.visual-editor-assets { min-width: 230px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.visual-editor-assets[open] { width: 100%; order: 2; }
.visual-editor-assets > summary { padding: 13px 15px; color: var(--navy); font-weight: 800; cursor: pointer; }
.visual-editor-assets:not([open]) > summary { padding-block: 9px; }
.visual-editor-assets[open] > summary { border-bottom: 1px solid var(--line); }
.visual-editor-assets .personalization-assets { margin: 0; padding: 14px; }
.personalization-asset-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8f9fb; }
.personalization-asset-card h3, .personalization-asset-card p { margin: 0; }
.personalization-asset-card form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.personalization-asset-preview { display: grid; place-items: center; min-height: 150px; border: 1px dashed #aab4c3; border-radius: 10px; overflow: hidden; background: #fff; }
.personalization-asset-preview img { display: block; max-width: 100%; max-height: 240px; object-fit: contain; }
.personalization-empty-image { padding: 24px; color: var(--muted); text-align: center; }
.file-picker { flex: 1 1 220px; }
.file-picker input { width: 100%; }
.personalization-mode-note { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.visual-editor-shell { margin-top: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.visual-editor-addbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #f8f9fb; }
.visual-editor-addbar span { color: var(--muted); font-size: .78rem; }
.visual-editor-primary-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.visual-editor-primary-actions > .profile-form-status:empty { display: none; }
.editor-text-properties { display: flex; min-height: 60px; align-items: center; gap: 10px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 3px 12px rgba(11,27,49,.06); scrollbar-width: thin; }
.editor-floating-text-toolbar[hidden] { display: none; }
.editor-top-text-controls, .editor-top-object-controls, .editor-top-control-group { display: contents; }
.editor-top-text-controls[hidden], .editor-top-object-controls[hidden], .editor-top-control-group[hidden], [data-floating-raster-controls][hidden], [data-floating-svg-controls][hidden], [data-floating-shape-stroke][hidden], [data-floating-rectangle-controls][hidden], [data-floating-customer-max][hidden], [data-floating-customer-transform][hidden], [data-floating-customer-required][hidden] { display: none; }
.editor-multi-selection-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.editor-multi-selection-controls[hidden] { display: none; }
.editor-multi-selection-controls output { min-width: max-content; color: var(--navy); font-size: 12px; font-weight: 800; }
.editor-align-glyph { font-size: 20px; font-weight: 800; line-height: 1; }
.editor-toolbar-divider { width: 1px; height: 24px; flex: 0 0 1px; background: #d0d5dd; }
.editor-object-kind { display: inline-flex; min-width: 36px; min-height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 7px; color: #475467; background: #eef1f5; font-size: 10px; font-weight: 850; line-height: 1; }
.editor-text-properties select[data-floating-object-control="imageFit"] { width: 140px; }
.editor-text-properties .editor-toolbar-range { width: 96px; min-width: 96px; min-height: 20px; padding: 0; accent-color: var(--orange); }
.editor-text-properties input[data-floating-geometry-control] { width: 66px; font-variant-numeric: tabular-nums; }
.editor-text-properties input[data-floating-common-control="rotation"] { width: 64px; font-variant-numeric: tabular-nums; }
.editor-text-properties .editor-toolbar-wide-control input { width: 150px; }
.editor-text-properties .editor-toolbar-check { min-height: 34px; padding: 0 8px; border: 1px solid #d0d5dd; border-radius: 6px; }
.editor-text-properties .editor-toolbar-check input { width: 16px; min-width: 16px; min-height: 16px; padding: 0; }
.editor-text-properties.is-inactive { opacity: .58; }
.editor-text-properties label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; margin: 0; color: #344054; font-size: 12px; font-weight: 650; white-space: nowrap; }
.editor-text-properties input, .editor-text-properties select { width: auto; min-width: 58px; min-height: 34px; padding: 5px 8px; border-color: #d0d5dd; border-radius: 6px; font-size: 12px; }
.editor-text-properties select[data-text-control="font"] { width: 190px; }
.editor-text-properties input[type="color"] { width: 38px; min-width: 38px; padding: 3px; cursor: pointer; }
.editor-text-properties input[data-text-control="letter-spacing"], .editor-text-properties input[data-text-control="line-height"] { width: 60px; }
.editor-text-properties button { display: inline-flex; min-width: 58px; min-height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border: 1px solid #d0d5dd; border-radius: 6px; color: #475467; background: #fff; font-size: 12px; }
.editor-text-properties button[aria-pressed="true"] { border-color: var(--navy); color: #fff; background: var(--navy); }
.editor-unit-control { position: relative; }
.editor-unit-control input { width: 72px; padding-right: 25px; }
.editor-unit-control > span { margin-left: -29px; padding-right: 7px; color: #667085; pointer-events: none; }
.editor-toolbar-label { flex: 0 0 auto; color: #344054; font-size: 12px; font-weight: 650; white-space: nowrap; }
.editor-toolbar-divider { width: 1px; height: 25px; flex: 0 0 1px; background: #d0d5dd; }
.visual-editor-grid { display: grid; height: clamp(360px, calc(100dvh - 360px), 660px); min-height: 0; grid-template-columns: minmax(0, 1fr) 300px; }
.visual-canvas-column { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 16px; background: #eef1f5; }
.editor-floating-text-toolbar { position: absolute; z-index: 20; display: flex; max-width: calc(100% - 16px); align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 7px; border: 1px solid #e4e7ec; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(11,27,49,.2); transform: translateX(-50%); }
.editor-floating-text-controls { display: contents; }
.editor-floating-text-controls[hidden] { display: none; }
.editor-floating-text-toolbar button { display: grid; width: 34px; height: 34px; min-width: 34px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--navy); background: #f8f9fb; font-size: 15px; }
.editor-floating-text-toolbar button[aria-pressed="true"] { color: #fff; background: var(--navy); }
.editor-floating-text-toolbar button.is-danger { color: #b42318; background: #fff2ee; }
.editor-floating-text-toolbar button:disabled { opacity: .42; cursor: not-allowed; }
.editor-floating-text-toolbar button[data-text-command="align-left"] { justify-items: start; padding-left: 8px; }
.editor-floating-text-toolbar button[data-text-command="align-center"] { justify-items: center; }
.editor-floating-text-toolbar button[data-text-command="align-right"] { justify-items: end; padding-right: 8px; }
.editor-floating-text-toolbar button[data-text-command^="align-"] { font-family: ui-monospace, monospace; font-size: 20px; line-height: .55; }
.editor-floating-size { display: inline-flex; height: 34px; align-items: center; overflow: hidden; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; }
.editor-floating-size input { width: 48px; height: 32px; min-height: 0; padding: 4px 2px 4px 7px; border: 0; border-radius: 0; color: var(--navy); background: transparent; font-size: 12px; font-weight: 800; }
.editor-floating-size span { padding-right: 7px; color: #667085; font-size: 10px; font-weight: 700; }
.editor-floating-size:focus-within { outline: 2px solid rgba(255,79,31,.3); outline-offset: 1px; }
.visual-editor-inspector { min-width: 0; min-height: 0; padding: 18px; overflow-y: auto; border-left: 1px solid var(--line); background: #fff; }
.visual-editor-inspector > .eyebrow { margin-top: 0; }
.visual-editor-empty { padding: 28px 12px; border: 1px dashed #c7ced8; border-radius: 10px; color: var(--muted); background: #f8f9fb; text-align: center; }
.visual-inspector-card { display: grid; gap: 16px; }
.visual-inspector-card h3 { margin: 0; color: var(--navy); }
.visual-inspector-controls { display: grid; gap: 11px; }
.visual-inspector-controls label { min-width: 0; }
.visual-required-toggle { padding: 10px 0; }
.visual-delete-item { justify-content: center; margin-top: 4px; }
.visual-mockup-settings { position: relative; flex: 0 0 auto; margin: 0; }
.visual-mockup-settings > summary { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; list-style: none; white-space: nowrap; cursor: pointer; }
.visual-mockup-settings > summary::-webkit-details-marker { display: none; }
.visual-mockup-settings > summary::after { content: '▾'; margin-left: 2px; font-size: 10px; transition: transform .16s ease; }
.visual-mockup-settings[open] > summary { border-color: var(--navy); color: #fff; background: var(--navy); }
.visual-mockup-settings[open] > summary::after { transform: rotate(180deg); }
.visual-mockup-popover { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 340px; max-width: calc(100vw - 36px); max-height: calc(100dvh - 190px); padding: 14px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 42px rgba(11,27,49,.24); }
.visual-mockup-popover > .field-help { margin-top: 0; }
.visual-mockup-settings .mockup-stage { width: 100%; max-height: min(40dvh, 320px); margin-bottom: 12px; }
.visual-mockup-settings .position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 14px; }
.visual-mockup-settings .position-grid label, .visual-mockup-settings .position-grid input { min-width: 0; width: 100%; }
.personalization-toolbar, .personalization-field-actions, .personalization-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.personalization-toolbar h3 { margin: 0; }
.template-layer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.template-layer-actions .button span { color: inherit; font-size: inherit; }
.editor-tool-group { position: relative; min-width: 0; margin: 0; }
.editor-tool-group > summary { list-style: none; cursor: pointer; }
.editor-tool-group > summary::-webkit-details-marker { display: none; }
.editor-tool-main { position: relative; width: 100%; }
.editor-tool-menu-chevron { position: absolute; top: 50%; right: 3px; font-size: 14px !important; transform: translateY(-50%); transition: transform .16s ease; }
.editor-tool-group[open] .editor-tool-menu-chevron { transform: translateY(-50%) rotate(90deg); }
.editor-tool-menu { position: absolute; z-index: 45; top: 0; left: calc(100% + 10px); display: grid; width: 236px; padding: 8px; border: 1px solid #d6dce4; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 12px 14px 34px rgba(11,27,49,.22); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.editor-tool-group:not([open]) > .editor-tool-menu { display: none; }
.editor-tool-menu-text { grid-template-columns: 1fr; }
.editor-tool-option { display: grid; min-width: 0; min-height: 42px; align-items: center; padding: 7px 9px; border: 0; border-radius: 7px; color: #344054; background: transparent; font-size: 12px; text-align: left; cursor: pointer; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; }
.editor-tool-option:hover, .editor-tool-option:focus-visible { color: var(--navy); background: #eef3f8; outline: none; box-shadow: inset 0 0 0 2px rgba(255,79,31,.35); }
.editor-tool-option b, .editor-tool-option i { color: var(--navy); font-size: 18px; text-align: center; }
.editor-tool-option span { min-width: 0; font-size: 11px; font-weight: 750; line-height: 1.2; }
.design-studio-heading, .design-canvas-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 18px; }
.design-studio-heading { margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.design-studio-heading h2, .design-studio-heading p, .design-canvas-heading h3, .design-canvas-heading p { margin-top: 0; }
.design-dimension-summary { display: inline-flex; margin: 0; padding: 6px 9px; border-radius: 999px; color: var(--navy); background: rgba(255, 79, 31, .1); font-size: .76rem; font-weight: 800; }
.design-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.design-toolbar button { min-width: 38px; padding-inline: 9px; }
.design-toolbar output { min-width: 48px; color: var(--muted); text-align: center; font-size: .8rem; font-weight: 800; }
.design-toolbar-divider { width: 1px; height: 28px; margin-inline: 2px; background: #cdd4dd; }
.editor-safe-margin-control { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; padding: 3px 7px; border: 1px solid #d0d5dd; border-radius: 7px; color: #344054; background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.editor-safe-margin-control .editor-unit-control { display: inline-flex; align-items: center; }
.editor-safe-margin-control input { width: 66px; min-height: 30px; }
.format-painter-button[aria-pressed="true"], .format-painter-button.is-active { border-color: #ff4f1f; background: #ff4f1f; color: #fff; }
.personalization-editor.is-format-painting [data-template-stage], .personalization-editor.is-format-painting [data-selection-key] { cursor: copy; }
[data-personalization-fields], [data-fixed-template-layers] { display: grid; gap: 12px; }
.personalization-field-editor { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.personalization-field-editor.is-active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 79, 31, .12); }
.personalization-field-editor legend { padding-inline: 6px; color: var(--navy); font-weight: 800; }
.personalization-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; align-self: end; min-height: 42px; }
.checkbox-label input { width: auto; }
.position-grid { display: grid; grid-template-columns: repeat(5, minmax(70px, 1fr)); gap: 8px; margin-top: 10px; }
.personalization-field-actions { margin-top: 12px; }
.personalization-visuals { display: grid; gap: 20px; }
.personalization-stage { position: relative; display: grid; width: 100%; max-height: 70vh; place-items: center; overflow: visible; border: 1px solid var(--line); border-radius: 12px; background: #eef1f5; container-type: inline-size; touch-action: none; }
.personalization-stage-viewport { display: flex; width: 100%; min-height: 0; flex: 1 1 auto; align-items: center; justify-content: center; padding: 14px; overflow: visible; border: 1px solid #cdd4dd; border-radius: 14px; background-color: #e7ebf0; background-image: linear-gradient(45deg, rgba(11,27,49,.045) 25%, transparent 25%), linear-gradient(-45deg, rgba(11,27,49,.045) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(11,27,49,.045) 75%), linear-gradient(-45deg, transparent 75%, rgba(11,27,49,.045) 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }
.personalization-stage-viewport .personalization-stage { flex: 0 0 auto; max-height: none; background: #fff; transition: width .16s ease, flex-basis .16s ease; }
.personalization-stage-viewport.is-zoomed { align-items: flex-start; justify-content: flex-start; overflow: auto; }
.design-trim-guide { position: absolute; z-index: 2000; border: 2px dashed #ff4f1f; border-radius: 3px; pointer-events: none; }
.design-safe-guide { position: absolute; z-index: 1999; border: 2px dashed #1473e6; border-radius: 3px; pointer-events: none; }
.design-guides-hidden .design-trim-guide, .design-guides-hidden .design-safe-guide { display: none; }
.personalization-field-box, .mockup-placement { position: absolute; z-index: 4; min-width: 0; min-height: 0; overflow: visible; color: var(--navy); box-shadow: none; cursor: move; line-height: 1.05; touch-action: none; transform-origin: center; }
.personalization-field-box { padding: 0; border: 0; border-radius: 0; outline: 2px dashed #15945d; outline-offset: -2px; appearance: none; background: transparent; }
.template-fixed-layer-box { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 0; overflow: visible; border-style: solid; cursor: move; touch-action: none; transform-origin: center; }
.template-fixed-layer-box.is-text { z-index: 3; background: transparent; border: 1px dashed transparent; }
.template-fixed-text-ink { display: flex; width: 100%; height: 100%; align-items: center; justify-content: inherit; overflow: visible; white-space: nowrap; }
.template-fixed-layer-box.is-circle { border-radius: 50%; }
.template-fixed-layer-box.is-image { border: 1px dashed transparent; background: transparent; }
.template-fixed-layer-box.is-image img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.template-fixed-layer-box.is-image.is-tinted-svg img { visibility: hidden; }
.template-fixed-svg-color { position: absolute; z-index: 1; inset: 0; background: var(--svg-color, #000); pointer-events: none; -webkit-mask-image: var(--svg-source); mask-image: var(--svg-source); -webkit-mask-position: var(--svg-position, center); mask-position: var(--svg-position, center); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: var(--svg-fit, contain); mask-size: var(--svg-fit, contain); }
.template-fixed-shape-render { position: absolute; inset: 0; box-sizing: border-box; pointer-events: none; }
.template-fixed-layer-box > .personalization-resize-handle { z-index: 3; }
.template-fixed-layer-box.is-active { outline: 2px solid var(--orange); outline-offset: 2px; }
.template-fixed-layer-box.is-selected:not(.is-active), .personalization-field-box.is-selected:not(.is-active) { outline: 2px dashed #2684ff; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(38,132,255,.13); }
.fixed-layer-editor { border-left-color: var(--orange); }
.personalization-field-text { display: flex; align-items: center; justify-content: inherit; width: 100%; height: 100%; overflow: hidden; white-space: nowrap; }
.personalization-resize-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px rgba(11,27,49,.35); cursor: nwse-resize; }
.personalization-field-box.is-active { outline-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,79,31,.18); }
.personalization-editor.is-canvas-pointer-idle .personalization-field-box, .personalization-editor.is-canvas-pointer-idle .template-fixed-layer-box { outline-color: transparent; box-shadow: none; }
.personalization-editor.is-canvas-pointer-idle .personalization-resize-handle, .personalization-editor.is-canvas-pointer-idle .editor-multi-selection-box, .personalization-editor.is-canvas-pointer-idle .editor-marquee-selection, .personalization-editor.is-canvas-pointer-idle .editor-smart-guide, .personalization-editor.is-canvas-pointer-idle .editor-floating-text-toolbar { visibility: hidden; opacity: 0; pointer-events: none; }
.editor-multi-selection-box { position: absolute; z-index: 1990; border: 2px dashed #2684ff; pointer-events: none; }
.editor-multi-resize-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #2684ff; box-shadow: 0 0 0 1px rgba(11,27,49,.4); cursor: nwse-resize; pointer-events: auto; touch-action: none; }
.editor-marquee-selection { position: absolute; z-index: 1995; border: 1px solid #2684ff; background: rgba(38,132,255,.12); pointer-events: none; }
.editor-smart-guide { position: absolute; z-index: 1992; border-color: #2684ff; pointer-events: none; }
.editor-smart-guide.is-vertical { top: 0; bottom: 0; border-left: 1px dashed #2684ff; }
.editor-smart-guide.is-horizontal { right: 0; left: 0; border-top: 1px dashed #2684ff; }
.mockup-placement { padding: 2px; border: 2px dashed var(--orange); border-radius: 4px; background: rgba(255,79,31,.16); }
.personalization-actions { justify-content: flex-start; margin-top: 20px; }
.personalization-actions .profile-form-status { margin: 0; }

/* Standalone template studio */
.design-studio-mode { overflow: hidden; background: #e9edf2; }
.design-studio-mode .sidebar, .design-studio-mode .admin-header { display: none; }
.design-studio-mode .main-content { display: flex; width: 100%; height: 100dvh; min-height: 0; margin: 0; padding: 0; overflow: hidden; flex-direction: column; }
.design-studio-mode .design-studio-heading { min-height: 58px; margin: 0; padding: 8px 18px; align-items: center; justify-content: flex-start; gap: 12px; border: 0; border-radius: 0; color: #fff; background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.design-studio-back { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 8px; color: #fff; font-size: 25px; }
.design-studio-back:hover, .design-studio-back:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.design-studio-product { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 10px; }
.design-studio-product .eyebrow { margin: 0; color: rgba(255,255,255,.62); }
.design-studio-product h2 { max-width: min(44vw, 600px); margin: 0; overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.design-studio-size { flex: 0 0 auto; margin: 0; padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.12); font-size: 11px; font-weight: 700; }
.design-studio-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.design-studio-heading-actions .button { display: inline-flex; align-items: center; gap: 6px; margin: 0; border-color: rgba(255,255,255,.35); }
.design-studio-heading-actions .button.secondary { color: #fff; background: transparent; }
.design-studio-heading-actions .button.secondary:hover { background: rgba(255,255,255,.1); }
.design-studio-heading-actions .button:not(.secondary) { color: var(--navy); background: #16c4d6; }
.design-studio-mode .design-studio-card { position: relative; display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.design-studio-mode .visual-editor-meta { position: relative; z-index: 25; display: flex; min-height: 50px; flex: 0 0 50px; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; margin: 0; padding: 7px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.design-studio-mode .visual-editor-meta .personalization-mode-note { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; }
.design-studio-mode .visual-editor-meta .personalization-mode-note span { overflow: hidden; text-overflow: ellipsis; }
.visual-editor-meta-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.design-studio-mode .visual-editor-assets { min-width: 0; border: 0; background: transparent; }
.design-studio-mode .visual-editor-assets > summary { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #c7ced8; border-radius: 7px; list-style: none; white-space: nowrap; }
.design-studio-mode .visual-editor-assets > summary::-webkit-details-marker { display: none; }
.design-studio-mode .visual-editor-assets[open] { position: absolute; top: 44px; right: 14px; width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 118px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 18px 48px rgba(11,27,49,.24); }
.design-studio-mode .visual-editor-assets[open] > summary { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.design-studio-mode [data-personalization-form] { display: flex; min-height: 0; flex: 1 1 auto; }
.design-studio-mode .visual-editor-shell { position: relative; display: grid; width: 100%; height: 100%; min-height: 0; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr); margin: 0; overflow: hidden; border: 0; border-radius: 0; }
.design-studio-mode .visual-editor-addbar { display: flex; min-width: 0; min-height: 0; grid-column: 1; grid-row: 1 / -1; align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 12px; padding: 14px 8px; overflow: visible; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 0; color: #fff; background: #15191e; }
.editor-tool-rail-title { margin: 0; color: rgba(255,255,255,.58); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.design-studio-mode .template-layer-actions { position: relative; display: grid; overflow: visible; gap: 7px; }
.design-studio-mode .template-layer-actions .button { display: flex; min-width: 0; min-height: 62px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 7px 4px; border: 0; border-radius: 8px; color: rgba(255,255,255,.82); background: transparent; font-size: 17px; line-height: 1; }
.design-studio-mode .template-layer-actions .button:hover, .design-studio-mode .template-layer-actions .button:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.design-studio-mode .template-layer-actions .button span { color: inherit; font-size: 10px; line-height: 1.15; text-align: center; }
.design-studio-mode .template-layer-actions .button b, .design-studio-mode .template-layer-actions .button i { font-size: 20px; }
.editor-asset-library { position: absolute; z-index: 35; top: 0; bottom: 0; left: 92px; display: flex; width: min(380px, calc(100% - 92px)); min-height: 0; overflow: hidden; flex-direction: column; border-right: 1px solid #d6dce4; color: var(--ink); background: #fff; box-shadow: 14px 0 34px rgba(11,27,49,.18); }
.editor-asset-library[hidden] { display: none; }
.editor-asset-library-head { display: flex; min-height: 54px; flex: 0 0 54px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); }
.editor-asset-library-head h3 { margin: 0; font-size: 16px; }
.editor-asset-library-head button { width: 34px; min-height: 34px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 24px; cursor: pointer; }
.editor-asset-tabs { display: grid; flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f8fafc; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.editor-asset-tab { min-height: 36px; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; color: #4b5b70; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.editor-asset-tab:hover { background: #eef2f7; }
.editor-asset-tab.is-active { border-color: #d6dce4; color: #fff; background: var(--navy); box-shadow: 0 1px 3px rgba(11,27,49,.16); }
.editor-asset-tab:focus-visible { outline: 3px solid rgba(255,79,31,.3); outline-offset: 1px; }
.editor-asset-tab-panel[hidden] { display: none; }
.editor-asset-upload-list { display: grid; align-content: start; gap: 8px; padding: 10px; background: #f8fafc; }
.editor-asset-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; padding: 10px; border: 1px solid #d6dce4; border-radius: 10px; background: #fff; }
.editor-asset-upload > div, .editor-asset-upload .profile-form-status { grid-column: 1 / -1; }
.editor-asset-upload strong { color: var(--ink); font-size: 13px; }
.editor-asset-upload p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.editor-asset-dropzone { display: flex; min-width: 0; min-height: 52px; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1.5px dashed #b8c1ce; border-radius: 8px; color: #4b5b70; background: #f8fafc; font-size: 11px; font-weight: 800; cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.editor-asset-dropzone i { color: var(--navy); font-size: 18px; }
.editor-asset-dropzone:hover, .editor-asset-dropzone:focus-visible, .editor-asset-dropzone.is-dragover { border-color: var(--orange); background: #fff4ef; box-shadow: 0 0 0 3px rgba(255,79,31,.12); outline: 0; }
.editor-asset-dropzone.has-file { border-style: solid; border-color: var(--orange); color: var(--navy); background: #fff; }
.editor-asset-file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.editor-asset-upload > .button { min-width: 112px; min-height: 52px; }
.editor-asset-tab-panel { min-height: 0; }
.editor-asset-tab-panel[hidden] { display: none; }
.editor-asset-upload-list { overflow-y: auto; overscroll-behavior: contain; }
.editor-asset-catalog { display: flex; min-height: 0; flex: 1 1 auto; overflow: hidden; flex-direction: column; }
.editor-asset-catalog h4 { margin: 0; padding: 14px 12px 2px; color: var(--ink); font-size: 13px; }
.editor-asset-library-filters { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.editor-asset-library-filters input, .editor-asset-library-filters select { width: 100%; min-height: 40px; }
.editor-asset-library-filters label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; }
.editor-asset-grid { display: grid; min-height: 0; padding: 12px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; }
.editor-asset-card { display: grid; min-width: 0; align-self: start; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #f8f9fb; cursor: pointer; text-align: left; }
.editor-asset-card:hover, .editor-asset-card:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,79,31,.14); }
.editor-asset-card-preview { display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; background: #fff; }
.editor-asset-card-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.editor-asset-card-title { min-width: 0; padding: 6px 7px; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.editor-asset-status { min-height: 20px; flex: 0 0 auto; margin: 0; padding: 0 12px 8px; color: var(--muted); font-size: 12px; }
.editor-asset-pagination { position: relative; z-index: 1; display: grid; flex: 0 0 auto; align-items: center; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #fff; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.editor-asset-pagination[hidden] { display: none; }
.editor-asset-page-button { min-width: 0; padding-inline: 9px; }
.editor-asset-page-button:last-child { justify-self: end; }
.editor-asset-page-status { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.design-studio-mode .visual-editor-addbar .profile-form-status { margin: auto 0 0; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.25; text-align: center; }
.design-studio-mode .visual-editor-addbar .profile-form-status.is-error { color: #ffb4a1; }
.design-studio-mode .visual-editor-addbar .profile-form-status.is-success { color: #79e0ab; }
.design-studio-mode .editor-text-properties { grid-column: 2; grid-row: 1; min-height: 58px; padding-block: 8px; }
.design-studio-mode .visual-editor-grid { height: auto; min-height: 0; grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr) 278px; }
.design-studio-mode .visual-canvas-column { padding: 0; overflow: hidden; background: #e9edf2; }
.design-studio-mode .design-canvas-heading { position: relative; z-index: 24; min-height: 54px; align-items: center; justify-content: flex-end; padding: 8px 14px; border-bottom: 1px solid #d6dce4; background: #f8f9fb; }
.design-studio-mode .design-canvas-heading .field-help { display: none; }
.editor-page-toolbar { position: relative; z-index: 25; display: flex; min-height: 46px; align-items: center; gap: 8px; padding: 6px 14px; overflow-x: auto; border-bottom: 1px solid #d6dce4; background: #fff; scrollbar-width: thin; }
.editor-page-tabs { display: flex; align-items: center; gap: 5px; }
.editor-page-tab { min-width: 74px; min-height: 32px; padding: 6px 10px; border: 1px solid #d6dce4; border-radius: 7px; color: #344054; background: #f8f9fb; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.editor-page-tab[aria-selected="true"] { border-color: var(--navy); color: #fff; background: var(--navy); }
.editor-page-tab:focus-visible { outline: 3px solid rgba(255,79,31,.3); outline-offset: 1px; }
.editor-page-toolbar > .button { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; font-size: 11px; }
.editor-image-edit-controls { flex: 0 0 auto; }
.editor-image-edit-controls summary { min-height: 34px; padding: 9px 11px; border: 1px solid #d6dce4; border-radius: 7px; color: var(--navy); background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.editor-image-edit-grid { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; display: grid; width: min(620px, calc(100vw - 130px)); padding: 12px; border: 1px solid #d6dce4; border-radius: 10px; background: #fff; box-shadow: 0 14px 32px rgba(11,27,49,.2); grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 9px; }
.editor-image-edit-grid label { display: grid; gap: 4px; color: #475467; font-size: 10px; font-weight: 800; }
.editor-image-edit-grid input, .editor-image-edit-grid select { width: 100%; min-height: 34px; }
.design-studio-mode .design-toolbar { margin-left: auto; flex-wrap: nowrap; }
.design-studio-mode .personalization-stage-viewport { min-height: 0; padding: 22px; border: 0; border-radius: 0; }
.design-studio-mode .personalization-stage-viewport .personalization-stage { border-radius: 2px; box-shadow: 0 10px 30px rgba(11,27,49,.15); transition: none; }
.design-studio-mode .visual-editor-inspector { display: flex; padding: 0; overflow: hidden; flex-direction: column; border-left: 1px solid #d6dce4; }
.visual-editor-inspector-heading { display: flex; min-height: 48px; flex: 0 0 48px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); }
.visual-editor-inspector-heading h3 { margin: 0; font-size: 14px; }
.editor-layer-heading-actions { display: flex; align-items: center; gap: 6px; }
.visual-editor-inspector-heading [data-layer-count] { display: grid; min-width: 24px; min-height: 24px; place-items: center; border-radius: 999px; color: #475467; background: #eef1f5; font-size: 11px; font-weight: 800; }
.visual-editor-inspector-heading [data-delete-selected] { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 6px; color: #667085; background: transparent; cursor: pointer; }
.visual-editor-inspector-heading [data-delete-selected]:hover, .visual-editor-inspector-heading [data-delete-selected]:focus-visible { border-color: #f1b8aa; color: #b42318; background: #fff2ee; }
.editor-layer-list { display: grid; min-height: 0; flex: 1 1 auto; overflow-y: auto; align-content: start; border-bottom: 0; }
.editor-layer-row { display: grid; min-width: 0; min-height: 44px; grid-template-columns: 13px 25px minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 5px 7px; border: 0; border-bottom: 1px solid #eef1f5; color: #344054; background: #fff; text-align: left; }
.editor-layer-row:hover { background: #f8f9fb; }
.editor-layer-row.is-active { color: var(--navy); background: #e6f0ff; box-shadow: inset 3px 0 0 #2684ff; }
.editor-layer-row.is-selected:not(.is-active) { color: var(--navy); background: #f0f6ff; box-shadow: inset 3px 0 0 #8bbcff; }
.editor-layer-row.is-hidden { opacity: .56; }
.editor-layer-row.is-dragging { opacity: .35; }
.editor-layer-handle { color: #98a2b3; font-size: 12px; letter-spacing: -4px; cursor: grab; user-select: none; }
.editor-layer-row.is-locked .editor-layer-handle { cursor: not-allowed; }
.editor-layer-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; color: var(--navy); background: #f2f4f7; font-size: 12px; font-weight: 850; }
.editor-layer-select { display: flex; min-width: 0; min-height: 32px; align-items: center; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.editor-layer-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.editor-layer-group-badge { display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; margin-left: 5px; border-radius: 5px; color: #175cd3; background: #dbeafe; font-size: 12px; }
.editor-layer-actions { display: flex; align-items: center; gap: 1px; }
.editor-layer-action { display: grid; width: 23px; height: 27px; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #667085; background: transparent; font-size: 12px; line-height: 1; cursor: pointer; }
.editor-layer-action[data-layer-action="lock"] i { font-size: 16px; }
.editor-layer-action[data-layer-action="lock"].is-locked { color: #9b5c00; background: #fff6df; }
.editor-layer-action[data-layer-action="lock"].is-unlocked { color: #667085; }
.editor-layer-action:hover, .editor-layer-action:focus-visible { color: var(--navy); background: #e8edf4; }
.editor-layer-action[data-layer-action="delete"]:hover, .editor-layer-action[data-layer-action="delete"]:focus-visible { color: #b42318; background: #fff2ee; }
.personalization-field-box.is-editor-locked, .template-fixed-layer-box.is-editor-locked { cursor: default; }
.personalization-field-box.is-editor-locked .personalization-resize-handle, .template-fixed-layer-box.is-editor-locked .personalization-resize-handle { display: none; }
.editor-context-menu { position: fixed; z-index: 2500; display: grid; width: 224px; padding: 6px; border: 1px solid #dfe3e9; border-radius: 10px; background: #fff; box-shadow: 0 14px 36px rgba(11,27,49,.24); }
.editor-context-menu[hidden] { display: none; }
.editor-context-menu button { display: grid; min-width: 0; min-height: 36px; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 6px; color: #344054; background: transparent; font-size: 12px; text-align: left; cursor: pointer; }
.editor-context-menu button:hover, .editor-context-menu button:focus-visible { color: var(--navy); background: #eef3f8; outline: none; }
.editor-context-menu button:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,79,31,.55); }
.editor-context-menu button:disabled { color: #a4abb6; background: transparent; cursor: not-allowed; }
.editor-context-menu button.is-danger:not(:disabled) { color: #b42318; }
.editor-context-menu i { font-size: 16px; }
.editor-context-menu kbd { color: #98a2b3; background: transparent; font-family: inherit; font-size: 10px; }
.editor-context-divider { display: block; height: 1px; margin: 4px 5px; background: #eaecf0; }
.visual-editor-properties { min-height: 0; flex: 1 1 auto; padding: 14px; overflow-y: auto; }
.visual-editor-properties > .eyebrow { margin-top: 0; }
.visual-inspector-object-actions { display: grid; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.visual-inspector-object-actions .button { min-width: 0; justify-content: center; padding-inline: 8px; font-size: 11px; }
.visual-inspector-object-actions .button.danger { color: #b42318; border-color: #f1b8aa; background: #fff2ee; }
.design-studio-mode .visual-mockup-settings[hidden] { display: none; }

@media (max-width: 1080px) {
  .header-user { display: none; }
  .translation-grid { grid-template-columns: 1fr; }
  .blog-editor-layout { grid-template-columns: 1fr; }
  .publish-card { position: static; }
  .visual-editor-grid { height: auto; grid-template-columns: 1fr; }
  .visual-canvas-column { height: clamp(380px, calc(100dvh - 190px), 680px); }
  .visual-editor-inspector { overflow: visible; border-top: 1px solid var(--line); border-left: 0; }
  .visual-editor-addbar { align-items: flex-start; flex-direction: column; }
  .visual-editor-primary-actions { width: 100%; justify-content: flex-start; }
  .design-studio-heading, .design-canvas-heading { align-items: stretch; flex-direction: column; }
  .design-toolbar { justify-content: flex-start; }
  .editor-text-properties { position: sticky; top: 0; z-index: 8; }
}

@media (max-width: 820px) {
  .sidebar { width: var(--sidebar-width); transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 18px 0 40px rgba(11, 27, 49, .28); }
  .admin-header { left: 0; padding-inline: 12px; }
  .main-content, body.sidebar-collapsed .main-content { margin-left: 0; padding: 18px 14px; }
  body.sidebar-collapsed .admin-header { left: 0; }
  .header-page-title, .header-site-link span, .header-logout span, .browser-notification-toggle span { display: none; }
  .header-right { gap: 6px; }
  .editor-heading { align-items: flex-start; flex-direction: column; }
  .editor-heading .panel-actions { width: 100%; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .plan-price-calculator { grid-template-columns: 1fr; }
  .mapping-form { grid-template-columns: 1fr; }
  .marketplace-mapping-form { grid-template-columns: 1fr; }
  .publisher-grid, .publisher-catalog-grid, .publisher-variant-grid { grid-template-columns: 1fr; }
  .merchant-profile-shell, .product-editor-shell, .account-profile-shell { grid-template-columns: 1fr; }
  .account-self-grid { grid-template-columns: 1fr; }
  .profile-tabs { min-height: 0; flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-tabs button { width: auto; min-width: max-content; }
  .profile-panels { padding: 18px; }
  .account-profile-shell .profile-tabs, .account-profile-shell .profile-panels { min-height: 0; }
  .account-password-grid { grid-template-columns: 1fr; }
  .security-method-head { flex-direction: column; }
}

@media (max-width: 560px) {
  .page-head { margin-bottom: 16px; }
  .card, .language-card { padding: 15px; }
  .plan-price-calculator-results { grid-template-columns: 1fr; }
  .publisher-step { padding: 15px 12px; }
  .publisher-search { grid-template-columns: 1fr; }
  .publisher-search button { width: 100%; }
  .publisher-variant { padding: 13px 11px; }
  .publisher-variant-head { align-items: flex-start; }
  .integration-page-intro .section-head, .marketplace-variant-head { align-items: stretch; flex-direction: column; }
  .integration-page-intro form, .integration-page-intro button { width: 100%; }
  .marketplace-status-toolbar { justify-content: stretch; }
  .marketplace-status-toolbar label { width: 100%; min-width: 0; }
  .marketplace-product-list-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .marketplace-product-list-image { width: 76px; height: 76px; }
  .marketplace-product-list-action { grid-column: 1 / -1; width: 100%; text-align: center; }
  .marketplace-product-detail-hero { grid-template-columns: 1fr; gap: 16px; }
  .marketplace-gallery-modal { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .marketplace-gallery-modal header { padding-left: 14px; }
  .marketplace-gallery-stage { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; padding: 8px; }
  .marketplace-gallery-arrow { width: 40px; height: 56px; }
  .marketplace-mapping-target { grid-template-columns: 1fr; }
  .marketplace-template-state { grid-column: auto; align-items: stretch; flex-direction: column; }
  .content-action-grid, .media-choice-grid, .media-library-grid, .metric-grid { grid-template-columns: 1fr; }
  .billing-order-summary { grid-template-columns: 1fr; }
  .billing-order-summary b { grid-row: auto; grid-column: auto; }
  .billing-actions { align-items: stretch; flex-direction: column-reverse; }
  .billing-actions .button, .billing-actions button { width: 100%; text-align: center; }
  .panel-actions .button { flex: 1 1 auto; }
  .input-prefix { display: grid; }
  .input-prefix > span { min-height: 38px; border-right: 1px solid #c7ced8; border-bottom: 0; border-radius: 7px 7px 0 0; overflow: hidden; }
  .input-prefix input { border-radius: 0 0 7px 7px; }
  th, td { padding: 11px 12px; }
  .media-language-grid { grid-template-columns: 1fr; }
  .managed-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-accordion-item summary { align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 13px 14px; }
  .faq-summary-badges { margin-left: auto; }
  .merchant-profile-head { align-items: flex-start; flex-direction: column; }
  .merchant-profile-head code { width: 100%; }
  .profile-panels { padding: 15px; }
  .profile-form-actions { align-items: stretch; flex-direction: column; }
  .profile-form-actions button { width: 100%; }
  .product-profile-head, .product-profile-meta { align-items: flex-start; flex-direction: column; }
  .merchant-product-detail-head { align-items: flex-start; flex-direction: column; }
  .product-detail-panels { padding: 12px; }
  .product-detail-tab { padding-inline: 12px; }
  .merchant-variant-attribute { grid-template-columns: 1fr; }
  .merchant-variant-attribute > button { width: 100%; }
  .catalog-item-row { grid-template-columns: 1fr; }
  .catalog-item-row .text-button { width: 100%; }
  .lifecycle-summary { grid-template-columns: 1fr; }
  .account-card-head { flex-direction: column; }
  .account-identity-hero { align-items: flex-start; padding: 18px; }
  .account-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; font-size: 20px; }
  .account-meta { align-items: flex-start; flex-direction: column; }
  .dt-container .dt-layout-row:not(.dt-layout-table) { align-items: stretch; flex-direction: column; }
  .dt-container .dt-layout-start, .dt-container .dt-layout-end { width: 100%; justify-content: flex-start; }
  .dt-container .dt-search, .dt-container .dt-length { width: 100%; }
  .dt-container .dt-search label, .dt-container .dt-length label { width: 100%; }
  .dt-container .dt-search input { width: auto; min-width: 0; max-width: none; flex: 1 1 auto; }
  .order-access-card { grid-template-columns: 1fr; }
  .order-access-actions, .order-access-card .button { width: 100%; }
  .personalization-assets, .personalization-field-grid { grid-template-columns: 1fr; }
  .visual-canvas-column { height: clamp(340px, calc(100dvh - 150px), 560px); padding: 10px; }
  .visual-editor-meta, .visual-editor-title { align-items: flex-start; flex-direction: column; }
  .visual-editor-assets { width: 100%; }
  .personalization-mode-note { width: 100%; }
  .visual-editor-addbar, .visual-editor-inspector { padding: 13px; }
  .template-layer-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-layer-actions .button { justify-content: flex-start; }
  .editor-text-properties { padding-inline: 10px; }
  .editor-text-properties select[data-text-control="font"] { width: 150px; }
  .editor-floating-text-toolbar { gap: 2px; padding: 5px; }
  .position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personalization-stage { max-height: 60vh; }
}

@media (max-width: 1080px) {
  .design-studio-mode .design-studio-heading { align-items: center; flex-direction: row; }
  .design-studio-mode .visual-editor-shell { grid-template-columns: 80px minmax(0, 1fr); }
  .design-studio-mode .editor-asset-library { left: 80px; width: min(360px, calc(100% - 80px)); }
  .design-studio-mode .visual-editor-addbar { align-items: stretch; flex-direction: column; padding: 12px 6px; }
  .design-studio-mode .visual-editor-grid { height: auto; grid-template-columns: minmax(0, 1fr) 250px; }
  .design-studio-mode .visual-canvas-column { height: auto; padding: 0; }
  .design-studio-mode .visual-editor-inspector { padding: 0; overflow: hidden; border-top: 0; border-left: 1px solid var(--line); }
  .design-studio-mode .template-layer-actions { width: 100%; }
}

@media (max-width: 700px) {
  .customer-preview-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .customer-preview-dialog .dialog-header { padding: 14px; }
  .customer-preview-dialog .dialog-header p { display: none; }
  .customer-preview-frame { height: calc(100% - 63px); }
  .customer-preview-button span { display: none; }
  .mockup-toolbar-summary span { display: none; }
  .visual-mockup-popover { left: -44px; width: calc(100vw - 24px); max-width: none; max-height: calc(100dvh - 150px); }
  .design-studio-mode { overflow: auto; }
  .design-studio-mode .main-content { height: auto; min-height: 100dvh; overflow: visible; }
  .design-studio-mode .design-studio-heading { position: sticky; top: 0; z-index: 40; min-height: 54px; padding-inline: 8px; }
  .design-studio-product .eyebrow, .design-studio-size, .design-studio-heading-actions .button.secondary { display: none; }
  .design-studio-product h2 { max-width: none; }
  .design-studio-heading-actions .button span { display: none; }
  .design-studio-mode .design-studio-card { min-height: calc(100dvh - 54px); overflow: visible; }
  .design-studio-mode .visual-editor-meta { min-height: 46px; flex-basis: 46px; }
  .design-studio-mode .visual-editor-meta .personalization-mode-note { display: none; }
  .design-studio-mode [data-personalization-form] { min-height: calc(100dvh - 100px); }
  .design-studio-mode .visual-editor-shell { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(560px, auto); overflow: visible; }
  .design-studio-mode .editor-asset-library { position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 92vw); }
  .design-studio-mode .visual-editor-addbar { grid-column: 1; grid-row: 1; overflow: visible; flex-direction: row; padding: 6px; }
  .design-studio-mode .editor-tool-rail-title, .design-studio-mode .visual-editor-addbar .profile-form-status { display: none; }
  .design-studio-mode .template-layer-actions { display: flex; overflow: visible; justify-content: center; flex-wrap: nowrap; }
  .design-studio-mode .template-layer-actions .button { min-width: 70px; min-height: 54px; flex: 0 0 70px; }
  .design-studio-mode .editor-tool-group { position: static; flex: 0 0 70px; }
  .design-studio-mode .editor-tool-menu { top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 24px)); }
  .design-studio-mode .editor-text-properties { grid-column: 1; grid-row: 2; }
  .design-studio-mode .visual-editor-grid { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; grid-template-rows: minmax(500px, 68dvh) auto; }
  .design-studio-mode .visual-editor-inspector { min-height: 260px; border-top: 1px solid var(--line); border-left: 0; }
  .design-studio-mode .editor-layer-list { max-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .production-loading-spinner { animation: none; }
}
.marketplace-buybox-summary{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:center;margin:.45rem 0;color:#0b1b31;font-size:.86rem}.marketplace-buybox-summary strong{color:#c83b16}.marketplace-buybox-summary span{color:#5f6f82}.marketplace-buybox-summary.is-empty{color:#748197;font-style:italic}.integration-page-intro .integration-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55rem}.integration-page-intro .integration-actions form{margin:0}

.browser-notification-toggle { position: relative; text-decoration: none; }
.browser-notification-toggle.has-notifications { border-color: rgba(255,79,31,.42); color: #c83b16; background: #fff6f2; }
.notification-count { position: absolute; top: -7px; right: -7px; display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #ff4f1f; font-size: 10px; line-height: 1; }
.notification-center { display: grid; gap: 20px; }
.notification-center.is-busy { cursor: progress; }
.notification-center.is-busy button { pointer-events: none; opacity: .72; }
.notification-hero { position: relative; display: flex; min-height: 210px; align-items: flex-end; justify-content: space-between; gap: 28px; overflow: hidden; padding: 34px; border-radius: 24px; color: #fff; background: linear-gradient(128deg,#0b1b31 0%,#123456 68%,#1e4e76 100%); box-shadow: 0 20px 50px rgba(11,27,49,.18); }
.notification-hero::before,.notification-hero::after { content: ''; position: absolute; border-radius: 999px; pointer-events: none; }
.notification-hero::before { top: -120px; right: -40px; width: 300px; height: 300px; background: radial-gradient(circle,rgba(255,79,31,.38),rgba(255,79,31,0) 68%); }
.notification-hero::after { right: 190px; bottom: -100px; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.13); }
.notification-hero > * { position: relative; z-index: 1; }
.notification-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #ff9d82; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.notification-kicker i { font-size: 18px; }
.notification-hero h2 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(28px,4vw,46px); line-height: 1.06; }
.notification-hero p { max-width: 680px; margin: 14px 0 0; color: rgba(255,255,255,.73); font-size: 15px; line-height: 1.65; }
.notification-unread-pill { flex: 0 0 auto; padding: 11px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); font-size: 13px; font-weight: 750; }
.notification-status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.notification-status-card { display: grid; min-height: 96px; grid-template-columns: 48px minmax(0,1fr) 10px; align-items: center; gap: 13px; padding: 18px; border: 1px solid #e0e6ec; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(11,27,49,.06); }
.notification-status-card > i { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #24476b; background: #edf4fa; font-size: 23px; }
.notification-status-card div { display: grid; gap: 3px; }
.notification-status-card span { color: #748197; font-size: 12px; }
.notification-status-card strong { color: #0b1b31; font-size: 14px; }
.notification-status-card .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #a8b2bf; box-shadow: 0 0 0 4px rgba(168,178,191,.14); }
.notification-status-card.ready .status-dot { background: #1d9c67; box-shadow: 0 0 0 4px rgba(29,156,103,.14); }
.notification-status-card.warning .status-dot { background: #e98345; box-shadow: 0 0 0 4px rgba(233,131,69,.14); }
.notification-center-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 18px; }
.notification-center .card { margin: 0; border-radius: 20px; box-shadow: 0 10px 30px rgba(11,27,49,.065); }
.notification-center .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.notification-center .card-heading h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: #0b1b31; }
.notification-center .card-heading h3 i { color: #ff4f1f; font-size: 20px; }
.notification-center .card-heading p { margin: 7px 0 0; color: #65758a; font-size: 13px; line-height: 1.55; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.notification-actions .button { display: inline-flex; align-items: center; gap: 7px; }
.notification-actions .button.quiet,.notification-activity-card .button.quiet { color: #42556c; border-color: #dfe5eb; background: #f7f9fb; }
.notification-feedback { min-height: 22px; margin: 16px 0 0; color: #18744f; font-size: 13px; }
.notification-feedback.error { color: #b0362b; }
.notification-device-total { display: grid; min-width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #c83b16; background: #fff0ea; font-weight: 800; }
.notification-device-list { display: grid; gap: 10px; }
.notification-device { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #e6eaef; border-radius: 14px; background: #fbfcfd; }
.notification-device > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #284b70; background: #eaf1f7; font-size: 21px; }
.notification-device > div { display: grid; gap: 3px; min-width: 0; }
.notification-device strong { overflow: hidden; color: #0b1b31; text-overflow: ellipsis; white-space: nowrap; }
.notification-device span,.notification-device small { color: #748197; font-size: 11px; }
.notification-device-state { padding: 6px 9px; border-radius: 999px; font-weight: 750; }
.notification-device-state.active { color: #14734c; background: #e7f7ef; }
.notification-device-state.inactive { color: #6f7885; background: #edf0f3; }
.notification-device .icon-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid #e1e5ea; border-radius: 10px; color: #8a4b42; background: #fff; }
.notification-empty { display: grid; min-height: 130px; place-items: center; align-content: center; gap: 8px; border: 1px dashed #d8dfe6; border-radius: 14px; color: #788699; text-align: center; }
.notification-empty i { color: #a9b4c1; font-size: 28px; }
.notification-empty p { margin: 0; }
.notification-feed { display: grid; gap: 8px; }
.notification-feed-item { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #e5e9ee; border-radius: 15px; color: inherit; background: #fff; text-decoration: none; transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.notification-feed-item:hover { transform: translateY(-1px); border-color: #c9d3de; box-shadow: 0 8px 20px rgba(11,27,49,.07); }
.notification-feed-item.unread { border-color: #ffd0c2; background: linear-gradient(90deg,#fff8f5,#fff); }
.notification-feed-item.unread::before { content: ''; position: absolute; top: 50%; left: -5px; width: 9px; height: 9px; transform: translateY(-50%); border: 2px solid #fff; border-radius: 50%; background: #ff4f1f; }
.notification-feed-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #24527c; background: #eaf2f9; font-size: 21px; }
.notification-feed-icon.question { color: #6b4ab3; background: #f1ecfb; }
.notification-feed-icon.order_cancelled { color: #a63e32; background: #fcedea; }
.notification-feed-item > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.notification-feed-item strong { color: #0b1b31; }
.notification-feed-item small { overflow: hidden; color: #6a798c; text-overflow: ellipsis; white-space: nowrap; }
.notification-feed-item time { color: #8a96a5; font-size: 11px; white-space: nowrap; }
.notification-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; padding: 24px; border: 1px solid #e0e6ec; border-radius: 20px; background: #fbf5ef; }
.notification-flow > div { display: grid; justify-items: center; gap: 7px; text-align: center; }
.notification-flow > div > i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: #0b1b31; font-size: 23px; }
.notification-flow strong { color: #0b1b31; }
.notification-flow span { color: #6d7784; font-size: 12px; line-height: 1.45; }
.notification-flow > i { color: #c2a18d; font-size: 24px; }

@media (max-width: 1050px) { .notification-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .notification-center-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .notification-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 24px 20px; border-radius: 18px; } .notification-status-grid { grid-template-columns: 1fr; } .notification-center .card-heading { align-items: stretch; flex-direction: column; } .notification-actions { display: grid; grid-template-columns: 1fr 1fr; } .notification-actions .button { justify-content: center; } .notification-device { grid-template-columns: 40px minmax(0,1fr) auto; } .notification-device-state { display: none; } .notification-feed-item { grid-template-columns: 42px minmax(0,1fr); } .notification-feed-item time { grid-column: 2; } .notification-flow { grid-template-columns: 1fr; } .notification-flow > i { transform: rotate(90deg); justify-self: center; } }