/* /crafoord/ och /samarbeten/. Bygger på tokens.css, buttons.css och (på /crafoord/) offer-request.css. */

.cf-wrap {
  width: min(720px, 100% - (var(--gutter, 16px) * 2));
  margin: 0 auto;
}

.cf-lead {
  font-size: 17px;
  line-height: 1.65;
  color: #52524e;
  margin: 0 0 16px;
}

/* ---------- Hero ---------- */

.cf-hero { padding: 24px 0 32px; text-align: center; }
.cf-hero h1 {
  font-size: clamp(28px, 6.4vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.cf-hero .cf-lead { max-width: 600px; margin-inline: auto; }
.cf-nowrap { white-space: nowrap; }
.cf-hero-plain { text-align: left; }
.cf-hero-plain .cf-lead { margin-inline: 0; }
.cf-trust { justify-content: center; }

.cf-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 28px;
}
.cf-lockup-crafoord { width: 176px; height: auto; }
.cf-lockup-ql { width: 104px; height: auto; }
.cf-lockup-x { font-size: 20px; color: var(--color-muted, #9d9d9c); line-height: 1; }

/* ---------- Två val ---------- */

.cf-choices { padding: 0 0 40px; }
.cf-choice-grid { display: grid; gap: 16px; }

.cf-card {
  display: flex;
  flex-direction: column;
  background: var(--color-soft, #f7f7f7);
  border-radius: var(--radius-md, 14px);
  padding: 24px 20px;
}
.cf-card h2 { font-size: 22px; margin: 0 0 8px; }
.cf-card p { margin: 0 0 12px; color: #52524e; line-height: 1.6; }
.cf-card-note { font-size: 15px; }
.cf-card-btn { margin-top: auto; width: 100%; min-height: 48px; }

.cf-list { margin: 0 0 12px; padding-left: 20px; color: #52524e; line-height: 1.7; }

/* ---------- Besöket ---------- */

.cf-visit { padding: 0 0 40px; }
.cf-visit h2,
.cf-pricelist h2,
.cf-contact h2 { font-size: 22px; margin: 0 0 8px; }
.cf-visit p { margin: 0; color: #52524e; line-height: 1.7; }

/* ---------- Provtvätt (befintliga bokningswidgeten) ---------- */

.cf-trial { scroll-margin-top: 80px; }
.cf-trial .booking-section { padding: 0 0 48px; }
.cf-trial .booking-card { max-width: 720px; }

/* ---------- Prislistan (partner-booking/main.js) ---------- */

.cf-pricelist { padding: 8px 0 0; scroll-margin-top: 80px; }
.cf-pricelist .offer { padding-top: 8px; }

/* På /offert är knappraden fast i nederkant på mobil. Här ligger flödet längre ner på sidan,
   så raden följer bara med medan formuläret syns. */
@media (max-width: 640px) {
  .cf-pricelist .offer-form { padding-bottom: 0; }
  .cf-pricelist .offer-actions { position: sticky; margin-top: 24px; margin-inline: calc(var(--gutter, 16px) * -1); }
}

.pb-loading { color: #52524e; margin: 16px 0; }
.pb-fallback a,
.pb-nodays a { color: inherit; font-weight: 600; }

.pb-item .offer-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pb-price { font-weight: 600; white-space: nowrap; }
.pb-desc { margin: 4px 0 0; font-size: 15px; color: var(--offer-text-2, #52524e); }

.pb-total {
  margin: 24px 0 8px;
  padding: 16px 20px;
  background: var(--offer-surface, #f7f7f7);
  border-radius: var(--radius-md, 14px);
  transition: opacity .15s;
}
.pb-total.is-loading { opacity: .65; }
.pb-total-rows { margin: 0; }
.pb-total-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.pb-total-row dt { min-width: 0; }
.pb-total-row dd { margin: 0; white-space: nowrap; }
.pb-total-detail { color: var(--offer-text-2, #52524e); }
.pb-total-sum {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border, rgba(29, 29, 27, .14));
  font-weight: 700;
  font-size: 18px;
}
.pb-total-note { margin: 0; color: var(--offer-text-2, #52524e); }
.pb-total-note.is-error { color: var(--offer-error, #b3261e); }

.pb-summary { margin: 24px 0 16px; }
.pb-summary-title { font-size: 17px; margin: 0 0 8px; }
.pb-summary .offer-done-list { margin-bottom: 0; }

/* ---------- Kontakt ---------- */

.cf-contact { padding: 8px 0 64px; }
.cf-contact p { margin: 0; color: #52524e; }
.cf-contact a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* ---------- /samarbeten/ ---------- */

.cf-collab { padding: 0 0 40px; }
.cf-collab-card {
  background: var(--color-soft, #f7f7f7);
  border-radius: var(--radius-md, 14px);
  padding: 24px 20px;
}
.cf-collab-logo { width: 200px; height: auto; margin: 0 0 20px; }
.cf-collab-card h2 { font-size: 22px; margin: 0 0 8px; }
.cf-collab-card p { margin: 0 0 12px; color: #52524e; line-height: 1.7; }
.cf-collab-card p:last-child { margin: 20px 0 0; }

@media (min-width: 720px) {
  .cf-hero { padding: 48px 0 40px; }
  .cf-lockup { gap: 20px; margin-bottom: 36px; }
  .cf-lockup-crafoord { width: 240px; }
  .cf-lockup-ql { width: 132px; }
  .cf-choice-grid { grid-template-columns: 1fr 1fr; }
  .cf-card { padding: 28px; }
  .cf-card-btn { width: auto; align-self: flex-start; }
  .cf-collab-card { padding: 32px; }
}