/* Office monitor: a fixed 960 × 540 product composition, projected by Blender tracking.
   Keep its proportions at every viewport: the parent supplies the physical transform. */
#officeScreen {
  color: #17171a;
  font-family: 'Onest', sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
#officeScreen *, #officeScreen *::before, #officeScreen *::after { box-sizing: border-box; }
#officeScreen .editor-head {
  height: 62px;
  padding: 0 36px;
  background: #17171a;
  border: 0;
}
#officeScreen .editor-head strong { font-size: 29px; letter-spacing: -.075em; }
#officeScreen .editor-head small { font-size: 12px; font-weight: 600; letter-spacing: .045em; color: #d6d6d8; }
#officeScreen .editor-templates, #officeScreen .editor-brand { background: #f6f5f2; }
#officeScreen .editor-inner { padding: 34px 38px 30px; }
#officeScreen .editor-kicker { margin: 0 0 12px; font-size: 12px; line-height: 1.3; letter-spacing: .055em; color: #616169; font-weight: 600; }
#officeScreen .editor-inner h2 {
  max-width: none;
  margin: 0 0 31px;
  font-size: 42px;
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -.045em;
}
#officeScreen .template-covers { gap: 20px; grid-template-columns: repeat(3, 1fr); }
#officeScreen .template-covers > div {
  --preview-paper: #fff8fa;
  --preview-ink: #3b1735;
  --preview-accent: #e84488;
  height: 240px;
  padding: 19px 17px;
  background: #fff;
  color: #29282c;
  border: 1px solid #d8d7d3;
  outline: none;
  box-shadow: none;
  overflow: visible;
  align-items: end;
}
#officeScreen .template-covers > div:nth-child(2) { --preview-paper: #eff4f6; --preview-ink: #173248; --preview-accent: #7da8bb; }
#officeScreen .template-covers > div:nth-child(3) { --preview-paper: #f2f5ed; --preview-ink: #213b25; --preview-accent: #98b34b; }
#officeScreen .template-covers > div::before {
  content: '';
  position: absolute;
  top: 12px; right: 12px; left: 12px; height: 172px;
  border: 1px solid #0000000d;
  background:
    linear-gradient(var(--preview-ink), var(--preview-ink)) 12px 11px / 41px 5px no-repeat,
    linear-gradient(#aaa3, #aaa3) right 12px top 11px / 52px 4px no-repeat,
    linear-gradient(var(--preview-ink), var(--preview-ink)) 12px 39px / 57% 15px no-repeat,
    linear-gradient(var(--preview-ink), var(--preview-ink)) 12px 60px / 39% 15px no-repeat,
    linear-gradient(var(--preview-accent), var(--preview-accent)) 12px 86px / 54px 14px no-repeat,
    linear-gradient(var(--preview-ink), var(--preview-ink)) 12px 122px / 30% 4px no-repeat,
    linear-gradient(#aaa3, #aaa3) 12px 134px / 72% 3px no-repeat,
    linear-gradient(var(--preview-accent), var(--preview-accent)) right 12px bottom 12px / 38px 12px no-repeat,
    linear-gradient(#fff, #fff) 6px 111px / calc(100% - 12px) 54px no-repeat,
    var(--preview-paper);
}
#officeScreen .template-covers > div::after { content: none; }
#officeScreen .template-covers .selected { border: 2px solid #242427; padding: 18px 16px; }
#officeScreen .template-covers .selected::after {
  content: '✓';
  display: grid; place-items: center;
  position: absolute; top: auto; bottom: 16px; right: 15px;
  width: 24px; height: 24px;
  background: #d7ff3a; color: #161616;
  border: none; transform: none; font-size: 15px; font-weight: 700;
}
#officeScreen .template-covers b { font-size: 15px; font-weight: 600; letter-spacing: .015em; line-height: 1.4; }

/* Brand controls stay recognizably separate from the customer's storefront. */
#officeScreen .brand-inner { padding: 30px 36px; height: 478px; grid-template-columns: 310px 1fr; gap: 38px; }
#officeScreen .brand-inner > div:first-child { padding-top: 9px; }
#officeScreen .brand-inner h2 {
  padding: 16px 18px; margin: 19px 0 19px;
  background: #fff; border: 1px solid #cfcecb;
  font-size: 30px; line-height: 1.2; letter-spacing: -.04em; font-weight: 600;
}
#officeScreen .brand-inner h2 br { display: none; }
#officeScreen .brand-inner > div > span { max-width: 285px; font-size: 15px; font-weight: 400; line-height: 1.5; color: #65656b; }
#officeScreen .brand-swatches { gap: 16px; margin-top: 26px; }
#officeScreen .brand-swatches i { width: 30px; height: 30px; border: 1px solid #0002; }
#officeScreen .brand-swatches i:first-child { outline: 1px solid #242427; outline-offset: 4px; }
#officeScreen .brand-preview {
  position: relative; padding: 24px 26px;
  background: #f6e7ee; color: #35152f;
  border: 1px solid #d5bccb;
  display: flex; justify-content: flex-start; overflow: hidden;
}
#officeScreen .brand-preview > span {
  max-width: none; font-size: 16px; color: #35152f; font-weight: 700;
  padding-bottom: 18px; border-bottom: 1px solid #35152f29;
}
#officeScreen .brand-preview b {
  position: relative; z-index: 1; white-space: pre-line;
  margin-top: 32px; max-width: 330px;
  font-size: 45px; line-height: .98; letter-spacing: -.05em; font-weight: 700;
}
#officeScreen .brand-preview::before {
  content: ''; position: absolute; left: 26px; right: 26px; bottom: 63px; height: 95px;
  background:
    linear-gradient(#35152f, #35152f) 15px 17px / 39% 6px no-repeat,
    linear-gradient(#35152f4d, #35152f4d) 15px 33px / 55% 4px no-repeat,
    linear-gradient(#e84488, #e84488) right 15px bottom 15px / 87px 24px no-repeat,
    linear-gradient(#35152f26, #35152f26) 15px bottom 24px / 22% 5px no-repeat,
    #fff;
}
#officeScreen .brand-preview small { position: absolute; left: 26px; bottom: 23px; font-size: 10px; letter-spacing: .07em; font-weight: 500; color: #684d60; }

/* The live shop is an actual offer layout, not a festival title poster. */
#officeScreen .editor-sale { background: #f6e7ee; color: #35152f; }
#officeScreen .sale-screen-head {
  height: 62px; padding: 0 36px; background: #35152f; color: #fff;
  border: 0; font-size: 17px;
}
#officeScreen .sale-screen-head > span { padding: 0; background: none; color: #f6d7e5; font-size: 11px; letter-spacing: .06em; font-weight: 500; }
#officeScreen .sale-screen-head > span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: #d7ff3a; vertical-align: 1px; }
#officeScreen .sale-screen-main { position: relative; height: 478px; padding: 35px 38px; }
#officeScreen .sale-screen-main > p { margin: 0 0 15px; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: #765468; }
#officeScreen .sale-screen-main h2 { margin: 0; max-width: 310px; font-size: 62px; line-height: .98; letter-spacing: -.055em; font-weight: 700; }
#officeScreen .screen-offer {
  position: absolute; top: 63px; right: 38px; width: 420px; max-width: none; min-height: 124px;
  padding: 24px; background: #fff; color: #35152f;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid #dfc6d5; font-size: 15px;
}
#officeScreen .screen-offer span { max-width: 165px; font-size: 15px; font-weight: 600; line-height: 1.3; }
#officeScreen .screen-offer b { padding: 14px 17px; background: #35152f; color: #fff; font-size: 13px; white-space: nowrap; font-weight: 600; }
#officeScreen .sale-capabilities {
  position: absolute; left: 38px; right: 38px; bottom: 44px; width: auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 30px;
  padding-top: 24px; border-top: 1px solid #35152f29;
  font-size: 13px; letter-spacing: .015em;
}
#officeScreen .sale-capabilities span, #officeScreen .sale-capabilities span:last-child { padding: 0; background: none; color: #68475d; font-size: 13px; font-weight: 500; }
#officeScreen .store-extras {
  position: absolute; left: 38px; right: 38px; bottom: 35px;
  padding-top: 21px; border-top: 1px solid #35152f29;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  color: #68475d; font-size: 13px; line-height: 1.3;
}
#officeScreen .store-extras > strong,
#officeScreen .store-extras > p,
#officeScreen .store-extras > h3 { flex: 0 0 100%; margin: 0 0 1px; color: #35152f; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
#officeScreen .store-extras > span { font-size: 13px; font-weight: 500; }
#officeScreen .store-extras > span::after { content: '↗'; margin-left: 10px; color: #a13569; }
#officeScreen .store-extras > div { display: flex; align-items: center; gap: 24px; }
#officeScreen .screen-sale {
  right: 38px; bottom: 140px; width: 420px; min-height: 50px; padding: 15px 18px;
  background: #35152f; color: #fff; gap: 12px;
  font-size: 14px; font-weight: 500; box-shadow: none;
}
#officeScreen .screen-sale b { font-size: 18px; font-weight: 500; color: #d7ff3a; }