/* Shared storefront surfaces. Editor-specific controls keep their own layout and state. */
html body.cf-shop {
  --surface-page: #f3f4f6;
  --surface-panel: #fff;
  --surface-stage: #eceef2;
  --interface-line: #dfe2e8;
  --interface-ink: #18191d;
  --interface-muted: #565c68;
  --interface-red: #ce0824;
  --interface-radius: 16px;
  margin: 0;
  background: var(--surface-page);
}
html body.cf-shop .header.cf-interface-header.header-owner-v1 #catalogQuery {
  border-color: #d4d8e1;
  background: #f5f6f8;
}
.cf-shop footer:has(.footer-brand) .footer-links a { color: #eee; }

/* Home */
.cf-market-home #marketHome { padding-top: clamp(16px, 3vw, 36px); }
.cf-market-home #marketHome .market-campaigns {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  grid-template-rows: auto;
  gap: 14px;
}
.cf-market-home #marketHome .market-campaign-main {
  min-height: 330px;
  grid-area: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  background: #17191f;
  border-radius: 20px;
  color: #fff;
  isolation: isolate;
}
.cf-market-home .market-campaign-main .market-campaign-copy {
  padding: clamp(24px, 3vw, 44px);
  width: auto;
  max-width: none;
}
.cf-market-home #marketHome .market-campaign-main h1 {
  max-width: none;
  margin: 12px 0;
  font-size: clamp(36px, 3.8vw, 65px);
  letter-spacing: -.065em;
  line-height: 1.02;
  color: #fff;
}
.cf-market-home #marketHome .market-campaign-main .market-eyebrow { color: #e0e3eb; }
.cf-market-home #marketHome .market-campaign-main p { color: #e0e3eb; margin: 0 0 20px; max-width: 37ch; }
.cf-market-home #marketHome .market-campaign-main .market-button { background: var(--interface-red); color: #fff; }
.cf-market-home #marketHome .market-hero-art {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 245px;
}
.cf-market-home .market-task-list { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; }
.cf-market-home .market-task {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface-panel);
  border: 1px solid var(--interface-line);
  border-radius: var(--interface-radius);
  color: var(--interface-ink);
  text-decoration: none;
}
.cf-market-home .market-task svg { width: 42px; height: 42px; padding: 10px; border-radius: 10px; background: var(--surface-stage); }
.cf-market-home .market-task strong, .cf-market-home .market-task small { display: block; }
.cf-market-home .market-task strong { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.25; letter-spacing: -.025em; }
.cf-market-home .market-task small { margin-top: 5px; font-size: 13px; color: var(--interface-muted); }
.cf-market-home .market-task b { font-size: 20px; font-weight: 500; }
.cf-market-home .market-task:hover { border-color: #8d93a2; }
.cf-market-home .market-task-docs { border-color: #dfa4ae; }
.cf-market-home .market-task-docs svg { background: #fce9ed; color: var(--interface-red); }
.cf-market-home .market-popular { margin-top: 30px; }
.cf-market-home #marketHome .market-categories { margin: 12px 0 0; }
.cf-market-home #marketHome .market-category { background: transparent; min-width: 0; }
.cf-market-home #marketHome .market-category .market-category-art { background: #e9ebf0; }
.cf-market-home .market-secondary-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 52px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--interface-line);
  border-radius: var(--interface-radius);
  background: var(--surface-panel);
  text-decoration: none;
}
.cf-market-home .market-secondary-service span { color: var(--interface-muted); font-size: 13px; }
.cf-market-home .market-secondary-service b { margin-left: auto; }
.cf-market-home #marketHome .market-help { background: #e9ebf0; }

/* Catalogue */
.cf-shop .custom-directory { max-width: 1408px; padding-top: clamp(20px, 4vw, 50px); }
.custom-directory-intro {
  display: grid;
  grid-template-columns: 1fr minmax(300px, .8fr);
  column-gap: 30px;
  align-items: center;
  padding: clamp(20px, 4vw, 44px);
  border-radius: 20px;
  background: #17191f;
  color: #fff;
}
.custom-directory-intro > .market-eyebrow { color: #dfe2ea; grid-column: 1/-1; margin: 0; }
.cf-shop .custom-directory .custom-directory-intro h1 { grid-column: 1; margin: 10px 0 0; font-size: clamp(34px, 5vw, 68px); color: #fff; }
.custom-directory .custom-lead { grid-column: 1; margin: 8px 0 0; color: #e0e3eb; }
.custom-directory-search { grid-column: 2; grid-row: 2/4; min-width: 0; }
.custom-directory-search label { display: block; margin-bottom: 8px; font-weight: 750; }
.custom-directory-search > div { display: flex; gap: 8px; }
.custom-directory-search input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--interface-line);
  border-radius: 10px;
}
.custom-directory-search button, .copycenter-auth-link {
  padding: 10px 15px;
  border: 0;
  border-radius: 10px;
  background: var(--interface-red);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.custom-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.custom-categories a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--interface-line);
  border-radius: 10px;
  background: var(--surface-panel);
  color: var(--interface-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.custom-categories a:hover { border-color: #8d93a2; }
.custom-results-heading { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; }
.custom-results-heading span { color: var(--interface-muted); }
.cf-shop .custom-directory .custom-order-card > img {
  display: block;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  mix-blend-mode: normal;
  margin: 0 0 10px;
}
.cf-shop .custom-directory .custom-order-card h3 { margin: 4px 0 10px; }
.cf-shop .custom-directory .custom-order-card > b { color: var(--interface-red); }

/* Production workspaces */
.cf-copycenter > main { margin-top: clamp(16px, 3vw, 36px); }
.cf-copycenter .copycenter-service-tabs { gap: 6px; margin-bottom: 18px; }
.cf-copycenter .copycenter-service-tabs a { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.cf-copycenter .intro { margin: 0 0 20px; }
.cf-copycenter .intro h1 { font-size: clamp(32px, 4vw, 58px); line-height: 1.04; }
.cf-copycenter .intro > p { margin: 8px 0; }
.cf-copycenter .workspace { align-items: start; gap: 16px; }
.cf-copycenter .workspace > :is(.editor, aside), .cf-copycenter .checkout {
  padding: clamp(16px, 2vw, 26px);
  border-color: var(--interface-line);
  border-radius: var(--interface-radius);
}
.cf-copycenter .city-label { max-width: none; }
.cf-copycenter #settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-copycenter #settings > label { min-width: 0; margin: 0; }
.cf-copycenter #settings > :is(p, .check, button) { grid-column: 1/-1; }
.cf-copycenter #settings .hint { margin: 0; }
.cf-copycenter .upload {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 25px 12px;
  border: 1px dashed #a7adba;
  border-radius: 12px;
  background: var(--surface-stage);
  color: var(--interface-ink);
}
.cf-copycenter .upload:hover, .cf-copycenter .upload:focus-within { border-color: var(--interface-red); }
.cf-copycenter .upload input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cf-copycenter .upload small { color: var(--interface-muted); font-size: 13px; font-weight: 500; }
.cf-copycenter .preview { background: var(--surface-stage); }
.cf-copycenter .copycenter-signin { border-radius: 12px; background: var(--surface-stage); padding: 14px; }
.cf-copycenter .copycenter-signin p { margin: 0 0 10px; line-height: 1.45; }
.copycenter-auth-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.cf-copycenter button.primary { background: var(--interface-red); }
.cf-copycenter #priceLabel { font-size: 18px; }
.cf-copycenter :is(#message, #filename, #settingsMessage, #orderMessage):empty { display: none; }
.cf-copycenter #filename { overflow-wrap: anywhere; }
.cf-copycenter :is(#settingsMessage, #orderMessage).error { padding: 12px; background: #fce9ed; border-radius: 8px; }

.cf-shop :is(.pc-canvas-wrap, .dp-photo-stage, .paper-stage) { background: var(--surface-stage); }
.cf-shop .pc-stage-star { display: none; }
.cf-shop .pc-workspace-links { display: none; }
.cf-shop .pc-workspace > div[id] { scroll-margin-top: 16px; }
.cf-shop .pc-workspace :is(.pc-controls, .pc-art-controls, .pc-canvas-wrap, .pc-order-dock) {
  border-color: var(--interface-line);
  border-radius: var(--interface-radius);
}
.cf-shop .cf-detail-page { max-width: 1408px; }
.cf-shop .cf-detail-intro > p:last-child { color: var(--interface-muted); }
.cf-shop[data-commerce-page=product] :is(.compact-product-sidebar, .product-visual-panel) { min-width: 0; }

@media (max-width: 900px) {
  .cf-market-home #marketHome .market-campaigns { grid-template-columns: minmax(0, 1fr); }
  .cf-market-home .market-task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .cf-market-home .market-task { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .cf-market-home .market-task svg { width: 34px; height: 34px; padding: 7px; }
  .cf-market-home .market-task > b { display: none; }
}
@media (max-width: 600px) {
  .cf-market-home #marketHome .market-campaigns { gap: 8px; }
  .cf-market-home #marketHome .market-campaign-main { grid-template-columns: minmax(0, 1fr) minmax(0, .58fr); min-height: 210px; border-radius: 16px; }
  .cf-market-home .market-campaign-main .market-campaign-copy { padding: 16px 0 16px 14px; }
  .cf-market-home #marketHome .market-campaign-main h1 { font-size: clamp(27px, 8vw, 36px); }
  .cf-market-home #marketHome .market-campaign-main .market-eyebrow { font-size: 9px; line-height: 1.3; }
  .cf-market-home #marketHome .market-campaign-main p { font-size: 12px; line-height: 1.35; margin-bottom: 12px; }
  .cf-market-home #marketHome .market-hero-art { min-height: 165px; overflow: hidden; }
  .cf-market-home .market-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cf-market-home .market-task-docs { grid-column: 1/-1; }
  .cf-market-home .market-task { min-height: 62px; }
  .cf-market-home .market-task small { font-size: 11px; line-height: 1.25; }
  .cf-market-home .market-task-docs > b { display: block; }
  .cf-market-home .market-task-docs { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .custom-directory-intro { grid-template-columns: minmax(0, 1fr); }
  .custom-directory-search { grid-column: 1; grid-row: auto; margin-top: 15px; }
  .cf-shop .custom-directory .custom-lead { font-size: 14px; }
  .custom-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
  .custom-categories a { font-size: 11px; line-height: 1.25; padding: 6px 8px; }
  .cf-copycenter .workspace { gap: 10px; }
  .cf-copycenter .step { margin-bottom: 12px; }
  .cf-shop .pc-workspace-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
  .pc-workspace-links a {
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--interface-line);
    border-radius: 10px;
    background: var(--surface-panel);
    color: var(--interface-ink);
    font-weight: 700;
    text-decoration: none;
  }
}

/* Real product photography stays visible even before scripts and prices load. */
.cf-market-home #marketHome .market-hero-art > img {
  position: absolute;
  display: block;
  object-fit: cover;
  aspect-ratio: 1;
  height: auto;
  box-shadow: 0 10px 24px #0003;
}
.market-hero-shirt { width: 67%; top: 9%; right: 9%; border-radius: 15px; transform: rotate(7deg); }
.market-hero-mug { width: 51%; bottom: 5%; left: 0; border-radius: 15px; transform: rotate(-8deg); }
.cf-copycenter .copycenter-panel-link { display: none; }
.cf-copycenter :is(#previewBox, #settingsTitle) { scroll-margin-top: 20px; }

.cf-shop :is(.constructor-workspace, .digital-print-grid, .paper-editor-grid, .mp-layout, .gift-designer-body, .dp-workspace) { gap: clamp(12px, 2vw, 24px); }
.cf-shop :is(.layout-preview, .gift-artboard, .mp-preview, .digital-print-sheet),
.cf-standalone-editor main .preview { border-color: var(--interface-line); border-radius: var(--interface-radius); }
.cf-shop :is(.gift-artboard, .mp-empty-preview), .cf-standalone-editor main .preview { background-color: var(--surface-stage); }
.cf-shop :is(.dp-card, .paper-controls, .mp-form, .gift-fields), .cf-standalone-editor main :is(.controls, .fields) { border-color: var(--interface-line); }
.cf-standalone-editor main > .intro { margin-bottom: clamp(12px, 2vw, 24px); }

@media (max-width: 780px) {
  .cf-copycenter .copycenter-panel-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 700; }
}
@media (max-width: 600px) {
  .market-hero-shirt { width: 85%; top: 15%; right: -5%; border-radius: 10px; }
  .market-hero-mug { width: 67%; bottom: 10%; left: 4%; border-radius: 10px; }
}
@media (max-width: 600px) {
  body.cf-market-home .cf-privacy-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cf-market-home .cf-privacy-actions button { padding: 8px 5px; line-height: 1.2; }
}

/* The complete print catalogue needs denser cards than the homepage selection. */
.cf-shop .custom-directory .custom-order-card {
  padding: 10px;
  min-height: 0;
}
.cf-shop .custom-directory .custom-order-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #f2f2f4;
}
.cf-shop .custom-directory .custom-order-card h3 {
  font-size: clamp(14px,1.35vw,18px);
  line-height: 1.22;
  margin: 9px 0 7px;
  overflow-wrap: anywhere;
}
.cf-shop .custom-directory .custom-order-card > b { font-size: 12px; }
@media(min-width: 1180px) {
  .cf-shop .custom-directory .custom-order-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
}

/* Keep exact previews legible inside the same neutral studio surface. */
.cf-shop :is(.ready-card .ready-mockup,.paper-card-image,.gift-card .gift-card-art) {
  background-color: #f3eee6;
}