/* =========================================================
   COLOR + SHAPES — print (shop) page
   Layout follows Larry's store mockup: the print on the left with its paper
   border and shadow, title and details on the right in Abel, orange accents,
   and the inquiry form below. Everything is scoped to .cs-page.
   ========================================================= */
body.cf-splash-page { margin: 0; padding: 0; background: #fff; overflow-x: hidden; }
body.cf-splash-page .sqs-row { margin-left: 0 !important; margin-right: 0 !important; }
body.cf-splash-page .sqs-block { padding-left: 0 !important; padding-right: 0 !important; }

.cs-page {
  --orange: #f9a727;
  --ink: #2b2a28;
  --red: #e84125;
  color: var(--ink); background: #fff; box-sizing: border-box;
  font-family: "Abel", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  padding-inline: clamp(16px, 4vw, 64px);
  padding-block: clamp(18px, 2.4vw, 36px) clamp(48px, 7vw, 110px);
}
.cs-page *, .cs-page *::before, .cs-page *::after { box-sizing: border-box; }
.cs-page p, .cs-page h1, .cs-page h2 { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.cs-page [hidden] { display: none !important; }

/* Top line: same lockup as the wall, plus the way back */
.cs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px;
  font-family: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .01em;
  text-transform: uppercase; max-width: 1600px; margin: 0 auto clamp(28px, 5vw, 72px); }
.cs-head p { text-transform: uppercase; font-weight: 700; font-size: 13px; line-height: 1.3; }
.cs-sq { display: inline-block; width: .68em; height: .68em; background: var(--red); margin: 0 .5em; }
.cs-page a.cs-back, .cs-page a.cs-back:link, .cs-page a.cs-back:visited { color: var(--ink) !important; text-decoration: none; border: 0; }
.cs-page a.cs-back:hover, .cs-page a.cs-back:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Print + details */
.cs-view { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px);
  align-items: start; max-width: 1080px; margin: 0 auto; }
.cs-art { min-width: 0; }
.cs-sheet { background: #fff; box-shadow: 6px 6px 10px rgba(0,0,0,.34); max-width: 100%; }
.cs-sheet img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; }
.cs-info { min-width: 0; padding-top: clamp(0px, .6vw, 8px); }
.cs-page .cs-title { font-size: clamp(28px, 3vw, 36px); line-height: 1.12; color: var(--orange); text-wrap: balance; }
.cs-lines { margin-top: clamp(20px, 2.6vw, 34px); display: grid; gap: .85em; }
.cs-page .cs-price { margin-top: clamp(20px, 2.4vw, 30px); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; color: var(--orange); }
.cs-page .cs-sold { margin-top: clamp(20px, 2.4vw, 30px); font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; display: flex; align-items: center; gap: .5em; }
.cs-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--red); flex: none; }
.cs-page .cs-note { margin-top: .8em; font-size: 15px; line-height: 1.45; color: #5d5a55; max-width: 44ch; }
.cs-page .cs-note a { color: inherit; }

.cs-actions { margin-top: clamp(20px, 2.4vw, 30px); display: grid; gap: 14px; max-width: 260px; }
.cs-page .cs-btn { display: block; width: 100%; min-height: 48px; padding: 12px 18px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.2; text-align: center; letter-spacing: 0; text-transform: none;
  border: 2px solid var(--orange); border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color .15s ease, color .15s ease; }
.cs-page .cs-btn-fill { background: var(--orange); color: #fff; }
.cs-page .cs-btn-line { background: #fff; color: var(--ink); }
.cs-page .cs-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .cs-page .cs-btn-fill:hover { background: #e8930d; border-color: #e8930d; }
  .cs-page .cs-btn-line:hover { background: #fff6e6; }
}

/* Inquiry section */
.cs-inquiry { max-width: 1080px; margin: clamp(48px, 8vw, 120px) auto 0; scroll-margin-top: 24px; }
.cs-inquiry-inner { max-width: 560px; }
.cs-page .cs-inquiry-title { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; color: var(--orange); }
.cs-page .cs-inquiry-text { margin-top: 14px; max-width: 52ch; }
.cs-form-slot { margin-top: 24px; }

/* Stand-in form (design preview only) and the Squarespace Form block share one look */
.cs-demo-form { display: grid; gap: 6px; }
.cs-demo-form label, .cs-form-slot .title, .cs-form-slot label.title { display: block; margin: 10px 0 0; font-size: 15px; color: var(--ink); }
.cs-demo-form input, .cs-demo-form textarea,
.cs-form-slot.has-sqs-form input[type="text"], .cs-form-slot.has-sqs-form input[type="email"], .cs-form-slot.has-sqs-form textarea {
  width: 100%; margin: 0; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--orange); border-radius: 0; -webkit-appearance: none; appearance: none; }
.cs-demo-form textarea, .cs-form-slot.has-sqs-form textarea { min-height: 170px; resize: vertical; }
.cs-demo-form input:focus-visible, .cs-demo-form textarea:focus-visible,
.cs-form-slot.has-sqs-form input:focus-visible, .cs-form-slot.has-sqs-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cs-demo-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 14px; }
.cs-demo-foot .cs-btn { width: auto; min-width: 190px; }
.cs-demo-note { font-size: 14px; color: #5d5a55; }
.cs-form-slot.has-sqs-form .form-button-wrapper { text-align: right; margin-top: 14px; }
.cs-form-slot.has-sqs-form input[type="submit"], .cs-form-slot.has-sqs-form .button {
  min-width: 190px; min-height: 48px; padding: 12px 18px; font: inherit; font-size: 16px; text-transform: none; letter-spacing: 0;
  color: #fff; background: var(--orange); border: 2px solid var(--orange); border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* Phones and narrow tablets: print first, then details */
@media (max-width: 759px) {
  .cs-view { grid-template-columns: 1fr; gap: 28px; max-width: 520px; }
  .cs-actions { max-width: none; }
  .cs-demo-foot .cs-btn { width: 100%; }
}

/* The Squarespace Form block sits below the Code block; it is shown only once it has been moved into the page */
body.cf-splash-page .sqs-block-form { display: none; }
body.cf-splash-page .cs-form-slot .sqs-block-form { display: block; }