/* Stylowa Baza: design polish layered over chat.css. Same palette and fonts as the theme (base #f7f5f1, accent gold
   #95815b, bordo #8a2e33, contrast navy #141c25); more air, softer surfaces, one accent, clean hierarchy. */

.sb-app, .sb-gate, .sb-profile, .sb-outfits-page, .sb-report, .sb-demo, .sb-demo-banner, .sb-report-page, .sb-capsule-page {
  --sb-base: #f7f5f1;
  --sb-line: #e5dfdb;
  --sb-user: #f3efe9;
  --sb-gold: #95815b;
  --sb-gold-dark: #7a6947;
  --sb-bordo: #8a2e33;
  --sb-ink: #141c25;
  --sb-accent: var(--sb-gold);
  --sb-shadow: 0 10px 30px rgba(20, 28, 37, 0.06);
  --sb-shadow-hover: 0 14px 34px rgba(20, 28, 37, 0.10);
  --sb-serif: 'Playfair Display SC', Georgia, serif;
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--sb-ink);
}

/* ---------- buttons: one language ---------- */
.sb-btn {
  background: var(--sb-gold); border-color: var(--sb-gold); color: #fff;
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; padding: 11px 22px; border-radius: 999px;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.sb-btn:hover { opacity: 1; background: var(--sb-ink); border-color: var(--sb-ink); }
.sb-btn-secondary { background: transparent; color: var(--sb-ink); border-color: var(--sb-line); }
.sb-btn-secondary:hover { background: #fff; border-color: var(--sb-ink); color: var(--sb-ink); }
.sb-link { color: var(--sb-gold-dark); text-decoration: none; border-bottom: 1px solid transparent; }
.sb-link:hover { border-bottom-color: currentColor; }

/* ---------- chat frame ---------- */
.sb-app {
  border: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--sb-shadow);
  max-width: 100%; box-sizing: border-box;
}
.sb-side { background: var(--sb-base); border-right: 1px solid var(--sb-line); }
.sb-side-head { padding: 18px 16px 12px; border-bottom: 0; }
.sb-tabs { margin-top: 14px; border-bottom: 1px solid var(--sb-line); }
.sb-tab { font-size: 0.72rem; letter-spacing: 0.14em; padding: 8px 6px 10px; }
.sb-tab.is-active { color: var(--sb-ink); border-bottom-color: var(--sb-gold); }
.sb-list { padding: 8px 10px; }
.sb-item { border-radius: 10px; margin-bottom: 2px; }
.sb-item:hover { background: rgba(255, 255, 255, 0.7); }
.sb-item.is-active { background: #fff; box-shadow: 0 2px 10px rgba(20, 28, 37, 0.05); }
.sb-item-title { font-size: 0.88rem; }
.sb-item-date { font-size: 0.7rem; letter-spacing: 0.02em; }
.sb-item-del:hover { color: var(--sb-bordo); }
.sb-side-foot { padding: 12px 16px 14px; border-top: 1px solid var(--sb-line); }
.sb-chat { min-width: 0; background: #fff; }
.sb-topbar { padding: 14px 24px; border-bottom: 1px solid var(--sb-line); min-width: 0; }
.sb-title { font-family: var(--sb-serif); font-size: 0.95rem; color: var(--sb-ink); letter-spacing: 0.02em; }
.sb-messages { padding: 26px 32px 18px; font-size: 1.02rem; line-height: 1.6; background: #fff; }
.sb-msg { max-width: 76%; padding: 16px 20px; border-radius: 16px; box-shadow: none; }
.sb-msg-assistant { border: 1px solid var(--sb-line); border-top-left-radius: 6px; background: #fff; }
.sb-msg-user { background: var(--sb-user); border-top-right-radius: 6px; max-width: 64%; }
.sb-msg-pending { color: var(--sb-muted); }
.sb-msg-tools { margin-top: 10px; }
.sb-fav { font-size: 0.74rem; letter-spacing: 0.04em; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; transition: all .15s; }
.sb-fav:hover { border-color: var(--sb-line); color: var(--sb-ink); background: var(--sb-base); }
.sb-fav.is-on { color: var(--sb-gold-dark); border-color: var(--sb-gold); background: #fff; }
.sb-form { padding: 16px 32px 20px; background: #fff; border-top: 1px solid var(--sb-line); }
.sb-form textarea { border-radius: 14px; padding: 14px 16px; font-size: 0.98rem; background: var(--sb-base); border-color: transparent; transition: background .15s, box-shadow .15s; }
.sb-form textarea:focus { outline: 0; background: #fff; box-shadow: 0 0 0 2px var(--sb-gold); }
.sb-form textarea::placeholder { color: #9a948c; }
.sb-hint { font-size: 0.72rem; letter-spacing: 0.02em; }
.sb-greet-profile { border-top-color: var(--sb-line); }
.sb-greet-profile .sb-btn { padding: 8px 18px; }

/* ---------- product cards ---------- */
.sb-cards { gap: 14px; margin: 16px 0 6px; }
.sb-card { border: 1px solid var(--sb-line); border-radius: 14px; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.sb-card:hover { transform: translateY(-3px); box-shadow: var(--sb-shadow-hover); border-color: transparent; }
.sb-card-img { background: var(--sb-base); }
/* the frame of the photo is 3:4 whatever the photo: the image fills it and never stretches it (a tall photo made its card taller than the others of the row) */
.sb-card-img { width: 100%; height: auto; min-height: 0; overflow: hidden; }
.sb-card-img img { position: absolute; inset: 0; object-position: center top; transition: transform .5s ease; }
.sb-card:hover .sb-card-img img { transform: scale(1.03); }
.sb-card-badge { background: var(--sb-gold); border-radius: 999px; padding: 4px 9px; font-size: 0.64rem; letter-spacing: 0.1em; }

.sb-card-body { padding: 11px 12px 13px; gap: 4px; }
.sb-card-brand { color: var(--sb-gold-dark); letter-spacing: 0.12em; font-size: 0.64rem; }
.sb-card-name { font-weight: 500; color: var(--sb-ink); }
/* the colours of a card: one line of swatches whatever the number of colours (includes/swatch-rules.php, assets/swatches.js) */
.sb-card-colors { display: flex; align-items: center; gap: 5px; height: 18px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.7rem; }
.sb-swatch { flex: 0 0 auto; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(20, 28, 37, 0.22); }
.sb-swatch.is-own { margin: 0 3px; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--sb-gold-dark); }
.sb-swatch.is-unknown { background: linear-gradient(135deg, #efeae0 50%, #c4bcad 50%); }
.sb-swatch.is-off { opacity: 0.35; }
.sb-swatch-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sb-muted); }
.sb-swatch-more { flex: 0 0 auto; padding: 0 6px; border: 1px solid var(--sb-line); border-radius: 999px; background: #fff; font-size: 0.66rem; line-height: 15px; color: var(--sb-muted); cursor: pointer; }
.sb-swatch-more:hover, .sb-swatch-more:focus-visible, .sb-swatch-more[aria-expanded="true"] { border-color: var(--sb-gold); color: var(--sb-gold-dark); outline: none; }
.sb-swatch-pop { position: fixed; z-index: 100000; box-sizing: border-box; max-width: min(320px, calc(100vw - 24px)); padding: 10px 12px; background: #fff; border: 1px solid var(--sb-line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 28, 37, 0.16); font-family: inherit; font-size: 0.8rem; line-height: 1.5; color: #1c2430; }
.sb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a card keeps its height: the brand in one line, the name always two lines high */
.sb-cards .sb-card-brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-cards .sb-card-name { min-height: 2.6em; }
.sb-card-price { font-weight: 600; letter-spacing: 0.01em; margin-top: 4px; }
.sb-card-date { display: block; font-size: 11px; color: var(--sb-muted, #777); margin-top: 1px; }      /* "cena z dnia ...": a product from a link */
.sb-card-price s { color: #a39c93; }
.sb-card-cta { text-decoration: none; color: var(--sb-gold-dark); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
.sb-card-cta::after { content: " →"; }
.sb-card-role { color: var(--sb-gold-dark); }

/* ---------- morning report ---------- */
.sb-report-page { max-width: 920px; }
.sb-report { border: 0; border-radius: 20px; box-shadow: var(--sb-shadow); padding: 28px 34px 26px; }
.sb-report-head { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--sb-gold-dark); gap: 8px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--sb-line); }
.sb-report-date { color: var(--sb-gold-dark); }
.sb-report-weather { text-transform: none; letter-spacing: 0.02em; color: var(--sb-muted); font-size: 0.8rem; }
.sb-report-weather::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-gold); margin-right: 8px; vertical-align: 1px; }
.sb-report-body { margin-top: 20px; }
.sb-report-greeting { font-family: var(--sb-serif); font-size: 1.55rem; line-height: 1.25; margin: 0 0 14px; letter-spacing: 0.01em; }
.sb-report-body > p, .sb-report-section > p { font-size: 1.02rem; line-height: 1.65; margin: 0 0 12px; }
.sb-report-label { margin-top: 30px; margin-bottom: 8px; font-size: 0.68rem; letter-spacing: 0.22em; color: var(--sb-gold-dark); display: flex; align-items: center; gap: 12px; }
.sb-report-label::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }
.sb-report .sb-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 10px 0 8px; }
.sb-report-source { display: block; margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.04em; }
.sb-report-mail { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sb-line); font-size: 0.82rem; }
.sb-report-mail input { accent-color: var(--sb-gold); margin-right: 6px; }
.sb-demo-note { font-size: 0.8rem; }

/* ---------- outfits and weekly picks ---------- */
.sb-outfits-page .sb-section-intro { font-size: 1.02rem; }
.sb-cards-page { gap: 20px; }
.sb-chip { background: #fff; border-color: var(--sb-line); padding: 7px 14px; letter-spacing: 0.04em; font-size: 0.78rem; transition: all .15s; }
.sb-chip.is-on { background: var(--sb-gold); border-color: var(--sb-gold); color: #fff; }
.sb-chip:hover { border-color: var(--sb-gold); color: var(--sb-gold-dark); }
.sb-outfit { padding: 28px 30px 30px; margin: 0 0 22px; background: #fff; border: 0; border-radius: 20px; box-shadow: var(--sb-shadow); }
.sb-outfit-head h3 { font-family: var(--sb-serif); font-size: 1.35rem; }
.sb-outfit-meta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-outfit-desc { font-size: 1.02rem; line-height: 1.6; }
.sb-outfit-total { font-family: var(--sb-serif); font-weight: 400; font-size: 1.05rem; margin-top: 18px; }
.sb-outfit-tips b, .sb-outfit-tips strong { color: var(--sb-ink); font-weight: 500; }
.sb-outfits-foot { margin-top: 28px; }
.sb-empty-block { background: #fff; border-style: solid; }

/* ---------- visitor demo ---------- */
.sb-demo-banner { border: 0; border-left: 0; border-radius: 18px; box-shadow: var(--sb-shadow); padding: 22px 28px 24px; }
.sb-demo-kicker { color: var(--sb-gold-dark); letter-spacing: 0.22em; font-size: 0.68rem; }
.sb-demo-banner p { font-size: 1.02rem; line-height: 1.6; }
.sb-demo-banner .sb-demo-actions .sb-btn + .sb-btn { margin-left: 8px; }
.sb-demo-tag { background: var(--sb-base); color: var(--sb-gold-dark); }
.sb-demo-chip { border-radius: 999px; }
.sb-demo-chip:hover, .sb-demo-chip.is-active { border-color: var(--sb-gold); background: #fff; }
.sb-demo-app .sb-side .sb-btn-block { border-radius: 999px; }
.sb-demo-app .sb-side-hint { font-size: 0.7rem; letter-spacing: 0.02em; }
.sb-gate { padding: 56px 16px; }
.sb-gate p { font-size: 1.05rem; color: var(--sb-muted); }

/* ---------- phone ---------- */
@media (max-width: 800px) {
  .sb-app { border-radius: 0; box-shadow: none; border-top: 1px solid var(--sb-line); border-bottom: 1px solid var(--sb-line); width: 100%; }
  .sb-topbar { padding: 12px 16px; }
  .sb-messages { padding: 18px 14px 12px; max-height: 62vh; }
  .sb-msg { max-width: 92%; padding: 13px 15px; }
  .sb-msg-user { max-width: 85%; }
  .sb-form { padding: 12px 14px 16px; }
  .sb-form textarea { border-radius: 12px; }
  .sb-report { border-radius: 0; box-shadow: none; padding: 22px 16px 22px; border-top: 1px solid var(--sb-line); border-bottom: 1px solid var(--sb-line); }
  .sb-report-greeting { font-size: 1.3rem; }
  .sb-report .sb-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sb-outfit { border-radius: 0; box-shadow: none; padding: 22px 16px; border-top: 1px solid var(--sb-line); }
  .sb-demo-banner { border-radius: 0; box-shadow: none; padding: 18px 16px; }
}

/* ---------- overrides that must beat the theme's button styles ---------- */
.sb-app .sb-btn, .sb-gate .sb-btn, .sb-demo-banner .sb-btn, .sb-outfits-page .sb-btn, .sb-report-page .sb-btn, .sb-profile .sb-btn, button.sb-btn, a.sb-btn {
  background-color: var(--sb-gold, #95815b) !important; border-color: var(--sb-gold, #95815b) !important; color: #fff !important; border-radius: 999px !important;
}
.sb-app .sb-btn:hover, .sb-gate .sb-btn:hover, .sb-demo-banner .sb-btn:hover, .sb-outfits-page .sb-btn:hover, .sb-report-page .sb-btn:hover, button.sb-btn:hover, a.sb-btn:hover {
  background-color: var(--sb-ink, #141c25) !important; border-color: var(--sb-ink, #141c25) !important;
}
.sb-app .sb-btn-secondary, .sb-gate .sb-btn-secondary, .sb-demo-banner .sb-btn-secondary, a.sb-btn-secondary, button.sb-btn-secondary {
  background-color: transparent !important; color: var(--sb-ink, #141c25) !important; border-color: var(--sb-line, #e5dfdb) !important;
}
.sb-app .sb-btn-secondary:hover, .sb-demo-banner .sb-btn-secondary:hover, a.sb-btn-secondary:hover, button.sb-btn-secondary:hover {
  background-color: #fff !important; border-color: var(--sb-ink, #141c25) !important; color: var(--sb-ink, #141c25) !important;
}
.sb-msg-user { background: #efe8dc; border: 1px solid #e6dccb; }
.sb-card-cta { white-space: nowrap; letter-spacing: 0.06em; font-size: 0.7rem; }
.sb-card-name { font-size: 0.84rem; }
.sb-form textarea { border: 1px solid var(--sb-line) !important; box-shadow: none; }
.sb-form textarea:focus { border-color: var(--sb-gold) !important; box-shadow: 0 0 0 3px rgba(149, 129, 91, 0.18) !important; outline: 0 !important; }

/* phone: give cards room inside the answer */
@media (max-width: 800px) {
  .sb-msg-assistant { max-width: 100%; padding: 14px 14px; }
  .sb-msg-user { max-width: 88%; }
  .sb-card-cta { white-space: normal; }
  .sb-cards { gap: 8px; }
  .sb-card-body { padding: 9px 10px 11px; }
  .sb-card-name { font-size: 0.8rem; }
}

/* phone: product cards as a swipeable row instead of a cramped grid */
@media (max-width: 800px) {
  .sb-msg .sb-cards, .sb-report .sb-cards, .sb-favitem-a .sb-cards {
    display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 2px 10px; margin-left: -2px; margin-right: -2px; scrollbar-width: none;
  }
  .sb-msg .sb-cards::-webkit-scrollbar, .sb-report .sb-cards::-webkit-scrollbar { display: none; }
  .sb-msg .sb-cards .sb-card, .sb-report .sb-cards .sb-card, .sb-favitem-a .sb-cards .sb-card { flex: 0 0 66%; max-width: 240px; scroll-snap-align: start; }
  .sb-card-cta { white-space: nowrap; }
  .sb-card-name { font-size: 0.86rem; }
}

/* bigger chat, clearer report sections */
.sb-app { height: calc(100vh - 150px); min-height: 780px; max-height: 1180px; grid-template-columns: 232px minmax(0, 1fr); }
.sb-messages { font-size: 1.04rem; }
.sb-report-label { margin-top: 46px; margin-bottom: 12px; font-size: 0.7rem; }
.sb-report-label-first { margin-top: 26px; }
.sb-report-body > p { margin-bottom: 14px; }
.sb-report .sb-cards { margin: 14px 0 10px; }
@media (max-width: 800px) {
  .sb-app { height: auto; min-height: 80vh; }
  .sb-messages { max-height: 72vh; min-height: 55vh; }
  .sb-report-label { margin-top: 36px; }
}

/* One component for every section of the report (report-sections.php: stylowa_baza_report_section): the label, then
   plain text and/or a row of cards. No section has a box, a border or a type of its own. */
.sb-report-section { margin: 0; padding: 0; background: none; border: 0; }
.sb-report-greeting + .sb-report-section > .sb-report-label { margin-top: 28px; }
.sb-report-section > p:last-child, .sb-report-section > .sb-cards:last-child { margin-bottom: 0; }
.sb-report-section > p b { font-weight: 500; }
/* The badges of a card (stylowa_baza_card_badges_html, chat.js cardBadge): one row at the top of the photo; every badge
   the same height, type and radius, in one line; a long text is cut and stands in full in the tooltip */
.sb-card-badges { position: absolute; left: 8px; top: 8px; right: 8px; z-index: 1; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; }
.sb-card-badges .sb-card-badge, .sb-card-badges .sb-card-badge.sb-card-badge-own { position: static; flex: 0 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box; height: 20px; padding: 0 8px; border: 1px solid transparent;
  border-radius: 999px; font-size: 0.58rem; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-card-badges .sb-card-badge-off { border-color: #ddd4c5; }
.sb-card-badges .sb-card-badge-why { background: #fff; color: var(--sb-gold-dark); border-color: #e3d9c6; }
.sb-card.no-img .sb-card-badges { position: static; margin: 8px 8px 0; }
.sb-card.no-img .sb-card-img .sb-card-badges .sb-card-badge { margin: 0; display: block; }
/* section rhythm in the report (beats .sb-report-body p) */
.sb-report-body .sb-report-label { margin: 48px 0 14px; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--sb-gold-dark); display: flex; align-items: center; gap: 12px; }
.sb-report-body .sb-report-label-first { margin-top: 28px; }
.sb-report-body .sb-report-greeting { margin: 0 0 6px; }
.sb-report-body p { margin: 0 0 14px; }
@media (max-width: 800px) { .sb-report-body .sb-report-label { margin-top: 36px; } }

/* ---------- reply typography ---------- */
.sb-msg-assistant { line-height: 1.66; }
.sb-msg-assistant p { margin: 0 0 12px; }
.sb-msg-assistant p:last-child { margin-bottom: 0; }
.sb-msg-assistant ul, .sb-msg-assistant ol { margin: 4px 0 14px 0; padding-left: 22px; }
.sb-msg-assistant li { margin: 0 0 8px; padding-left: 4px; }
.sb-msg-assistant li::marker { color: var(--sb-gold); font-weight: 600; }
.sb-msg-assistant ol { list-style: decimal; }
.sb-msg-assistant strong { font-weight: 600; color: var(--sb-ink); }
.sb-msg-assistant .sb-product { font-weight: 600; }
.sb-msg-assistant .sb-brand { color: var(--sb-gold-dark); letter-spacing: 0.02em; }
.sb-msg-assistant .sb-price { font-weight: 600; white-space: nowrap; }
.sb-msg-assistant .sb-kicker { font-weight: 600; color: var(--sb-gold-dark); letter-spacing: 0.02em; }
.sb-msg-assistant .sb-question { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sb-line); color: var(--sb-ink); }
.sb-msg-assistant em { font-style: italic; color: var(--sb-muted); }

/* ---------- Moja szafa ---------- */
.sb-cards { align-items: start; }
.sb-msg .sb-cards .sb-card, .sb-report .sb-cards .sb-card { margin-bottom: 0; }
.sb-wardrobe { max-width: 900px; margin: 40px auto 0; }
.sb-wardrobe h2 { display: flex; align-items: baseline; gap: 10px; }
.sb-wardrobe-count { font-family: 'Work Sans', sans-serif; font-size: 0.8rem; color: var(--sb-gold-dark); letter-spacing: 0.1em; }
.sb-wardrobe-add { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1.2fr auto; gap: 8px; margin: 14px 0 22px; }
.sb-wardrobe-add input, .sb-wardrobe-add select { padding: 9px 11px; border: 1px solid var(--sb-line); border-radius: 10px; font: inherit; font-size: 0.92rem; background: #fff; }
.sb-wardrobe-group { margin: 0 0 18px; }
.sb-wardrobe-group h3 { font-family: 'Work Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sb-gold-dark); margin: 0 0 8px; }
.sb-wardrobe-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.sb-wardrobe-group li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--sb-line); border-radius: 12px; }
.sb-wardrobe-group li img { width: 34px; height: 44px; object-fit: cover; border-radius: 6px; }
.sb-wardrobe-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sb-gold); flex: none; margin: 0 12px; }
.sb-wardrobe-name { flex: 1; font-size: 0.92rem; }
.sb-wardrobe-meta { color: var(--sb-muted); font-size: 0.8rem; }
@media (max-width: 800px) { .sb-wardrobe-add { grid-template-columns: 1fr 1fr; } .sb-wardrobe-add button { grid-column: 1 / -1; } }
.sb-wardrobe-add { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-wardrobe-add select { flex: 0 1 150px; }
.sb-wardrobe-add input { flex: 1 1 140px; min-width: 120px; }
.sb-wardrobe-add .sb-btn { flex: none; white-space: nowrap; }
.sb-wardrobe-group li img { flex: none; }

/* "Obserwuj": buttons under a card, the list in the sidebar, the alerts in the report */
.sb-card-wrap { display: flex; flex-direction: column; min-width: 0; }
.sb-card-wrap > .sb-card { flex: 1 1 auto; }
.sb-watch-row { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sb-watch { display: block; width: 100%; padding: 6px 8px; border: 1px solid var(--sb-line); border-radius: 999px; background: #fff; font: inherit; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-muted); cursor: pointer; transition: all .15s; }
.sb-watch:hover { border-color: var(--sb-gold); color: var(--sb-gold-dark); }
.sb-watch.is-on { border-color: var(--sb-gold); background: var(--sb-gold); color: #fff; }
.sb-watch:disabled { opacity: .6; cursor: default; }
.sb-watch-note { font-size: 0.72rem; line-height: 1.35; color: var(--sb-muted); }
.sb-watch-note:empty { display: none; }
.sb-watch-count { margin: 4px 2px 10px; font-size: 0.75rem; color: var(--sb-muted); }
.sb-watchitem { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--sb-line); }
.sb-watchitem.is-ended { opacity: .65; }
.sb-watchitem-img { width: 46px; height: 60px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.sb-watchitem-body { min-width: 0; }
.sb-watchitem-name { margin: 0 0 2px; font-size: 0.84rem; line-height: 1.3; }
.sb-watchitem-name a { color: inherit; text-decoration: none; }
.sb-watchitem-line { margin: 0 0 4px; font-size: 0.76rem; color: var(--sb-muted); }
.sb-report-alerts { margin: 6px 0 10px; padding: 12px 14px 12px 30px; background: #fff; border-left: 3px solid var(--sb-gold); border-radius: 0 10px 10px 0; }
.sb-report-alerts li { margin: 0 0 4px; }
.sb-report-alerts li:last-child { margin-bottom: 0; }
.sb-alert-ended { color: var(--sb-muted); }
@media (max-width: 800px) {
  .sb-msg .sb-cards .sb-card-wrap, .sb-report .sb-cards .sb-card-wrap, .sb-favitem-a .sb-cards .sb-card-wrap { flex: 0 0 66%; max-width: 240px; scroll-snap-align: start; }
  .sb-msg .sb-cards .sb-card-wrap > .sb-card, .sb-report .sb-cards .sb-card-wrap > .sb-card, .sb-favitem-a .sb-cards .sb-card-wrap > .sb-card { flex: 1 1 auto; max-width: none; }
}

/* three tabs in the sidebar ("Rozmowy", "Ulubione", "Obserwowane") have to fit its width */
.sb-app .sb-tabs { gap: 0; justify-content: space-between; }
.sb-app .sb-tab { flex: 0 1 auto; min-width: 0; font-size: 0.62rem; letter-spacing: 0.03em; padding: 8px 2px 10px; white-space: nowrap; text-align: center; }
/* links inside an answer may break anywhere (long addresses), product cards must not: names broke in the middle of a word */
.sb-msg a.sb-card, .sb-favitem-a a.sb-card { word-break: normal; overflow-wrap: break-word; }

/* capsule page */
/* ---------- capsule page: an editorial layout (calm, small elements, a lot of air) ---------- */
.sb-capsule-page { max-width: 1040px; margin: 0 auto; background: transparent; }
.sb-cap-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.sb-capsule-kicker { margin: 0 0 10px; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-capsule-title { margin: 0 0 14px; font-family: var(--sb-serif); font-weight: 400; font-size: 2rem; line-height: 1.2; letter-spacing: 0.02em; color: var(--sb-ink); }
.sb-capsule-lead { margin: 0 auto 20px; max-width: 600px; font-size: 1.02rem; line-height: 1.7; color: #3b434d; }
.sb-capsule-lead p { margin: 0 0 8px; }
.sb-cap-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 0 0 24px; }
.sb-cap-palette { display: inline-flex; gap: 6px; }
.sb-cap-palette i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(20, 28, 37, 0.14); }
.sb-cap-summary { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-muted, #6b6b6b); }
.sb-capsule-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.sb-capsule-hint { font-size: 0.8rem; color: var(--sb-muted, #6b6b6b); }
.sb-cap-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--sb-line);
  font-family: var(--sb-serif); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--sb-ink); }
.sb-cap-n { font-family: 'Work Sans', system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--sb-gold-dark); }
.sb-cap-sets { margin: 0 0 52px; }
.sb-cap-sets-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sb-cap-sets .sb-set { margin: 0; padding: 16px 16px 14px; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; }
.sb-cap-sets .sb-set-title { margin: 0 0 12px; font-family: 'Work Sans', system-ui, sans-serif; font-size: 0.9rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.sb-cap-sets .sb-set .sb-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.sb-cap-sets .sb-set .sb-card { border: 0; border-radius: 8px; box-shadow: none; background: transparent; }
.sb-cap-sets .sb-set .sb-card:hover { transform: none; box-shadow: none; }
.sb-cap-sets .sb-set .sb-card-img { border-radius: 8px; overflow: hidden; }
.sb-cap-sets .sb-set .sb-card-body { display: none; }
.sb-cap-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 44px 16px; align-items: start; }
.sb-cap-group { grid-column: span var(--span, 5); min-width: 0; }
.sb-cap-grid { display: grid; grid-template-columns: repeat(var(--span, 5), minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.sb-cap-card { position: relative; display: flex; min-width: 0; }
.sb-cap-card > .sb-card { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; border-radius: 12px; }
/* one frame for every photo: the box keeps 3:4 whatever the picture is, the picture fills it */
.sb-capsule-page .sb-card-img { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; min-height: 0; overflow: hidden; background: #f1ede6; }
.sb-capsule-page .sb-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.sb-capsule-page .sb-card-img.sb-cap-fit img { object-fit: contain; object-position: center; padding: 8%; box-sizing: border-box; }
.sb-cap-card .sb-card-body { flex: 1 1 auto; gap: 3px; padding: 10px 11px 12px; }
.sb-cap-card .sb-card-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cap-card .sb-card-name { font-size: 0.82rem; line-height: 1.35; height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-cap-card .sb-card-price { margin-top: 4px; font-size: 0.84rem; white-space: nowrap; }
.sb-cap-size-slot { display: block; height: 1.25em; font-size: 0.7rem; line-height: 1.25; color: var(--sb-muted, #6b6b6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cap-size.is-in { color: #3f6b4f; }
.sb-cap-card .sb-card-cta { margin-top: auto; padding-top: 6px; font-size: 0.66rem; }
.sb-cap-card > .sb-card-badge { position: absolute; left: 8px; top: 8px; z-index: 1; }
/* "obserwuj": one quiet control on the photo, a small choice behind it */
.sb-watch-pop { position: absolute; right: 8px; top: 8px; z-index: 2; }
.sb-watch-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(20, 28, 37, 0.12); border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--sb-ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sb-watch-toggle:hover, .sb-watch-toggle[aria-expanded="true"] { border-color: var(--sb-gold); color: var(--sb-gold-dark); }
.sb-watch-toggle:focus-visible, .sb-watch-menu .sb-watch:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
.sb-watch-toggle.is-on { background: var(--sb-gold); border-color: var(--sb-gold); color: #fff; }
.sb-watch-toggle.is-on svg path { fill: currentColor; }
.sb-watch-menu { position: absolute; right: 0; top: 36px; width: 190px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--sb-line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 28, 37, 0.14); }
.sb-watch-menu[hidden] { display: none; }
.sb-watch-menu .sb-watch { font-size: 0.72rem; padding: 7px 8px; }
.sb-cap-more { margin: 28px 0 0; text-align: center; }
.sb-cap-more-strip { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; max-width: 760px; margin: 0 auto 12px; filter: blur(5px) saturate(0.8); opacity: 0.6; pointer-events: none; }
.sb-cap-more-strip .sb-card-img { border-radius: 8px; overflow: hidden; }
.sb-cap-more p { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-paid-gate .sb-demo-banner { margin: 8px auto 0; max-width: 760px; }
.sb-capsule-page > .sb-demo-note { margin-top: 28px; text-align: center; }
/* the overview: one tile per capsule; the opened capsule has the way back above its header and under its last section */
.sb-capsule-overview .sb-cap-head { margin-bottom: 32px; }
.sb-capsule-overview .sb-capsule-lead { margin-bottom: 0; }
.sb-cap-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sb-cap-tiles.is-pair { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.sb-cap-tiles.is-single { grid-template-columns: minmax(0, 720px); justify-content: center; }
.sb-cap-tile { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.sb-cap-tile:hover, .sb-cap-tile:focus-visible { border-color: var(--sb-gold); box-shadow: 0 10px 30px rgba(20, 28, 37, 0.10); transform: translateY(-2px); text-decoration: none; outline: none; }
.sb-cap-tile-cover { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #fff; }
.sb-cap-tile-cover .sb-card-img { border-radius: 0; }
/* a collage of fewer than four photos (a short outfit) fills the cover instead of leaving a gap */
.sb-cap-tile-cover[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-cap-tiles .sb-cap-tile-cover[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-cap-tiles .sb-cap-tile-cover[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
/* the outfits page: the filter by occasion above the tiles, Klaudia's notes under the things of an opened outfit */
.sb-capsule-overview .sb-chips { justify-content: center; margin: -8px 0 28px; }
.sb-outfit-notes { max-width: 760px; margin: 28px auto 0; }
.sb-outfit-notes p { margin: 0 0 8px; color: #3b434d; line-height: 1.65; }
.sb-cap-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.sb-cap-tile-body .sb-capsule-kicker { margin: 0; }
.sb-cap-tile-title { font-family: var(--sb-serif); font-size: 1.3rem; line-height: 1.25; letter-spacing: 0.02em; color: var(--sb-ink); }
.sb-cap-tile-text { font-size: 0.9rem; line-height: 1.6; color: #3b434d; }
.sb-cap-tile-cta { margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-cap-tile:hover .sb-cap-tile-cta { text-decoration: underline; }
/* one capsule: a wide tile, the collage beside the text */
.sb-cap-tiles.is-single .sb-cap-tile { flex-direction: row; align-items: stretch; }
.sb-cap-tiles.is-single .sb-cap-tile-cover { flex: 0 0 46%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-cap-tiles.is-single .sb-cap-tile-body { flex: 1 1 auto; justify-content: center; padding: 24px 28px; }
.sb-cap-tiles.is-single .sb-cap-tile-title { font-size: 1.6rem; }
/* The generated cover of a capsule or an outfit (includes/covers.php): one 3:2 picture in the place of the mosaic on
   the tile and at the top of the single page. It is shown whole on every screen: nothing of the set may be cut off. */
.sb-cap-tile-cover.is-cover { display: block; aspect-ratio: 3 / 2; background: #f6f2eb; overflow: hidden; }
.sb-cap-tile-cover.is-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sb-cap-tiles.is-single .sb-cap-tile-cover.is-cover { flex: 0 0 56%; align-self: center; }
.sb-cap-hero { margin: 0 auto 32px; max-width: 900px; border: 1px solid var(--sb-line); border-radius: 16px; overflow: hidden; background: #f6f2eb; }
.sb-cap-hero img { display: block; width: 100%; height: auto; }
/* the colour of the chosen version on a card of a capsule or an outfit, and "also in N colours" under it */
.sb-card-colour { display: block; font-size: 0.74rem; color: var(--sb-muted, #6b6b6b); letter-spacing: 0.02em; }
.sb-card-colour:empty::before { content: "\00a0"; }
/* the row of swatches of the model's versions under the card: the chat's swatches, a little larger because they are buttons */
/* the card is a flex row (the link fills it): the row of swatches takes a line of its own under the link, not a column beside it */
.sb-cap-card:has(> .sb-card-versions) { flex-wrap: wrap; align-content: flex-start; }
.sb-card-versions { flex: 0 0 100%; box-sizing: border-box; justify-content: center; flex-wrap: wrap; gap: 7px; height: auto; min-height: 26px; margin-top: 8px; padding: 2px 4px; overflow: visible; white-space: normal; }
.sb-card-versions .sb-version { width: 16px; height: 16px; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.sb-card-versions .sb-version.is-own { margin: 0 2px; }
.sb-card-versions .sb-version[hidden] { display: none; }
/* The heart of a card: top right of the photo; the badges (top left) end before it, "Mój rozmiar" is bottom left */
.sb-card-img .sb-heart { position: absolute; right: 8px; top: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(20, 28, 37, 0.16); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sb-card-img .sb-heart svg { fill: none; stroke: #1c1c1c; stroke-width: 1.6; stroke-linejoin: round; transition: fill 0.15s, stroke 0.15s; }
.sb-card-img .sb-heart.is-on svg { fill: #b3312f; stroke: #b3312f; }
.sb-card-img .sb-heart:hover svg { stroke: #b3312f; }
.sb-card-img .sb-heart:focus-visible { outline: 2px solid var(--sb-gold-dark, #8a7340); outline-offset: 2px; }
.sb-card-img:has(.sb-heart) .sb-card-badges { right: 46px; }
.sb-cap-sets .sb-heart, .sb-set .sb-heart { display: none; }
.sb-heart-toast { position: fixed; left: 50%; bottom: 24px; z-index: 9999; transform: translate(-50%, 20px); max-width: min(92vw, 420px); padding: 12px 16px; border-radius: 12px; background: #141c25; color: #fff; font-size: 0.86rem; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.sb-heart-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.sb-fav-note { font-weight: 600; color: #3f6b4f; }
/* "Mój rozmiar": the badge of Klasyk and Perełka, at the bottom of the photo */
.sb-card-img { position: relative; }
.sb-card-img .sb-card-badge.sb-card-mine { position: absolute; left: 8px; top: auto; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; box-sizing: border-box; line-height: 1; white-space: nowrap; text-transform: uppercase; color: #fff; }
.sb-card-img .sb-card-badge.sb-card-mine[hidden] { display: none; }
/* A card without a photo (0.95: the shop does not show it on other pages, or it did not come): the badges in one line
   with the heart on its right, then the name, the price and the link; no empty frame, nothing on the card's edge */
.sb-card.no-img .sb-card-img { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 8px 48px 0 8px; box-sizing: border-box; }
.sb-card.no-img .sb-card-img:empty { display: none; }
.sb-card.no-img .sb-card-img .sb-card-badge, .sb-card.no-img .sb-card-img .sb-card-badge.sb-card-mine, .sb-card.no-img .sb-card-badges { position: static; margin: 0; }
.sb-card.no-img .sb-card-img .sb-card-badge.sb-card-mine { display: inline-flex; }
.sb-version-more { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0 2px; font: inherit; font-size: 0.74rem; line-height: 16px; color: var(--sb-muted, #6b6b6b); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.sb-version-more:hover, .sb-version-more:focus-visible { color: var(--sb-ink, #1c1c1c); }
.sb-card-versions .sb-version:focus-visible { outline: 2px solid var(--sb-gold-dark); outline-offset: 3px; }
.sb-cap-card.is-switched .sb-watch-pop { visibility: hidden; }
.sb-cap-back { margin: 0 0 22px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sb-cap-back a { color: var(--sb-gold-dark); text-decoration: none; }
.sb-cap-back a::before { content: "\2190\00a0"; }
.sb-cap-back a:hover { text-decoration: underline; }
.sb-capsule-page > .sb-demo-note + .sb-cap-back { margin: 24px 0 0; text-align: center; }
@media (max-width: 1000px) {
  .sb-cap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-cap-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sb-cap-group { grid-column: span var(--span4, 4); }
  .sb-cap-grid { grid-template-columns: repeat(var(--span4, 4), minmax(0, 1fr)); }
  .sb-cap-sets-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sb-cap-tiles, .sb-cap-tiles.is-pair, .sb-cap-tiles.is-single { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sb-cap-tiles.is-single .sb-cap-tile { flex-direction: column; }
  .sb-cap-tiles.is-single .sb-cap-tile-cover { flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sb-cap-tiles.is-single .sb-cap-tile-cover.is-cover { flex: none; align-self: stretch; }
  .sb-cap-hero { margin: 0 0 22px; border-radius: 12px; }
  .sb-cap-tiles.is-single .sb-cap-tile-body, .sb-cap-tile-body { padding: 16px 16px 18px; }
  .sb-cap-tiles.is-single .sb-cap-tile-title, .sb-cap-tile-title { font-size: 1.2rem; }
  .sb-cap-head { margin-bottom: 32px; }
  .sb-capsule-title { font-size: 1.55rem; }
  .sb-capsule-lead { font-size: 0.95rem; }
  .sb-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sb-cap-items { display: flex; flex-direction: column; gap: 34px; }
  /* outfits: a row that scrolls sideways inside itself, the page never does */
  .sb-cap-sets-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
  .sb-cap-sets-row::-webkit-scrollbar { display: none; }
  .sb-cap-sets .sb-set { flex: 0 0 84%; scroll-snap-align: start; }
  .sb-watch-toggle { width: 34px; height: 34px; }
  .sb-watch-menu { width: min(190px, 44vw); }
  .sb-cap-card:nth-child(odd) .sb-watch-menu { right: auto; left: calc(-1 * (100% - 42px)); }
  .sb-cap-more-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sb-cap-more-strip .sb-card-img:nth-child(n+6) { display: none; }
}

/* start quiz: one question per screen in a white card (Kacper 01.11.2026: readable for guests and members): the step
   and a thick bar on top, the question in Playfair, the answers as large tiles with a mark (circle: one answer, square:
   several), the selected one gold with a tick; the result as a card, then the next step */
.sb-quiz { --sb-gold: #95815b; --sb-gold-dark: #7a6947; --sb-ink: #141c25; --sb-line: #e5dfdb; --sb-muted: #5f5953;
  box-sizing: border-box; max-width: 780px !important; margin: 0 auto 24px !important; padding: 34px 44px 30px;
  background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(20, 28, 37, .06); color: var(--sb-ink); }
.sb-quiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.sb-quiz .sb-quiz-head .sb-quiz-step { margin: 0; }
.sb-quiz-step { margin: 0 0 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-quiz-pct { font-size: 0.8rem; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-quiz-progress { height: 8px; background: #efe9e1; border-radius: 999px; overflow: hidden; margin: 0 0 26px; }
.sb-quiz-progress span { display: block; height: 100%; background: var(--sb-gold); border-radius: 999px; transition: width .25s ease; }
.sb-quiz .sb-quiz-title { margin: 0 0 10px; outline: none; font-family: 'Playfair Display SC', Georgia, serif; font-weight: 400; font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; letter-spacing: 0.01em; color: var(--sb-ink); }
.sb-quiz-hint { margin: 0 0 18px; font-size: 1rem; line-height: 1.55; color: var(--sb-muted); }
.sb-quiz-label { margin: 18px 0 8px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.sb-quiz .sb-quiz-option { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 18px; border: 1.5px solid #ddd5c8; border-radius: 14px;
  background: #fff !important; font: inherit; font-size: 1.02rem; line-height: 1.35; text-align: left; text-transform: none; letter-spacing: normal; color: var(--sb-ink) !important;
  cursor: pointer; box-shadow: none; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.sb-quiz .sb-quiz-option:hover { border-color: var(--sb-gold); background: #fdfbf7 !important; }
.sb-quiz-mark { flex: 0 0 auto; position: relative; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #c9bfae; border-radius: 50%; background: #fff; transition: background-color .15s, border-color .15s; }
.sb-quiz-option[role="checkbox"] .sb-quiz-mark { border-radius: 6px; }
.sb-quiz .sb-quiz-option.is-on { border-color: var(--sb-gold); background: #f8f3ea !important; box-shadow: inset 0 0 0 1px var(--sb-gold); }
.sb-quiz-option.is-on .sb-quiz-mark { background: var(--sb-gold); border-color: var(--sb-gold); }
.sb-quiz-option.is-on .sb-quiz-mark::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sb-quiz-option:focus-visible, .sb-quiz-select select:focus-visible, .sb-quiz-other input:focus-visible { outline: 2px solid var(--sb-gold-dark); outline-offset: 2px; }
.sb-quiz-select { display: block; margin: 16px 0; }
.sb-quiz-select span { display: block; margin-bottom: 8px; font-size: 1rem; font-weight: 500; }
.sb-quiz-select select { width: 100%; min-height: 54px; padding: 12px 14px; border: 1.5px solid #ddd5c8; border-radius: 14px; background-color: #fff; font: inherit; font-size: 1rem; color: var(--sb-ink); }
.sb-quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sb-line); }
.sb-quiz-nav .sb-btn { min-width: 140px; min-height: 48px; padding: 12px 28px; font-size: 0.92rem; }
.sb-quiz-nav .sb-btn:disabled { opacity: .4; cursor: default; }
.sb-quiz-nav .sb-btn:disabled:hover { background-color: var(--sb-gold) !important; border-color: var(--sb-gold) !important; }
.sb-quiz-loading { margin: 24px 0; font-size: 1rem; color: var(--sb-muted); }
/* the result: a beige card with the description, then the next step */
.sb-quiz-result { margin: 0 0 20px; padding: 28px 30px 24px; background: #f8f4ec; border: 1px solid #ebe2d2; border-radius: 16px; }
.sb-quiz-result .sb-quiz-step { margin-bottom: 8px; }
.sb-quiz-text { margin: 6px 0 0; font-size: 1rem; line-height: 1.65; }
.sb-quiz-text p { margin: 0 0 10px; }
.sb-quiz-text p:last-child { margin-bottom: 0; }
.sb-quiz .sb-quiz-next { margin: 0 0 22px; padding: 22px 24px; background: #fff; border: 1.5px solid var(--sb-gold); border-radius: 16px; box-shadow: none; }
.sb-quiz .sb-quiz-next .sb-quiz-next-h { margin: 0 0 8px; font-family: 'Playfair Display SC', Georgia, serif; font-size: 1.4rem; line-height: 1.25; color: var(--sb-ink); }
.sb-quiz .sb-quiz-next p { font-size: 1rem; line-height: 1.6; margin: 0 0 14px; }
.sb-quiz .sb-quiz-next .sb-demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.sb-quiz .sb-quiz-next .sb-demo-actions .sb-btn + .sb-btn { margin-left: 0; }
.sb-quiz .sb-quiz-next .sb-btn, .sb-quiz-nav .sb-btn { box-sizing: border-box; }
.sb-quiz .sb-quiz-next .sb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 24px; line-height: 1.2; }
.sb-quiz-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sb-line); font-size: 0.82rem; color: var(--sb-muted); }
.sb-quiz-error { color: #8a2e33; }
.sb-quiz-transfer { max-width: 1080px; margin: 0 auto 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--sb-line, #d9d3c7); border-left: 3px solid var(--sb-gold, #95815b); border-radius: 0 12px 12px 0; }
.sb-quiz-transfer p { margin: 0 0 8px; }
.sb-quiz-transfer-note:empty { display: none; }
@media (max-width: 640px) {
  .sb-quiz { padding: 22px 16px 20px; border-radius: 16px; margin: 0 -4px 20px !important; }
  .sb-quiz-options { grid-template-columns: 1fr; gap: 10px; }
  .sb-quiz .sb-quiz-option { min-height: 58px; padding: 14px 16px; }
  .sb-quiz-progress { margin-bottom: 20px; }
  .sb-quiz-nav .sb-btn { flex: 1 1 0; min-width: 0; text-align: center; }
  .sb-quiz-result { padding: 20px 18px 18px; }
  .sb-quiz .sb-quiz-next { padding: 18px 16px; border-radius: 14px; }
  .sb-quiz .sb-quiz-next .sb-btn { flex: 1 1 100%; text-align: center; justify-content: center; }
}

/* a favourite's card for a product that is no longer offered: kept, greyed, not a link */
.sb-card.is-gone { cursor: default; opacity: .78; }
.sb-card.is-gone:hover { transform: none; box-shadow: none; }
.sb-card.is-gone .sb-card-img img { filter: grayscale(1); }
.sb-card-cta-off { color: var(--sb-muted); text-decoration: none; }
/* the state of an unavailable product, the same quiet badge as in the panel: words, not a colour alone */
.sb-watchitem-off, .sb-avail-badge { display: inline-block; padding: 1px 8px; border: 1px solid #ddd4c5; border-radius: 999px; background: #efeae1; color: #5a5245; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; }
.sb-avail-badge { align-self: flex-start; margin: 2px 0; }
.sb-card.is-gone .sb-card-img img { filter: grayscale(.65); opacity: .62; }
.sb-card-badge-off { background: #efeae1; color: #5a5245; border: 1px solid #ddd4c5; }

/* profile: the four preference sliders (includes/profile-page.php, assets/profile.js) */
.sb-scales { border: 1px solid var(--sb-line); border-radius: 14px; padding: 6px 20px 14px; margin: 18px 0 22px; background: #fff; min-width: 0; }
.sb-scales legend { padding: 0 8px; font-family: inherit; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-gold-dark); }
.sb-scales-hint { margin: 2px 0 6px; font-size: 0.82rem; color: var(--sb-muted); }
.sb-scale { padding: 12px 0 4px; border-top: 1px solid var(--sb-line); display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.sb-scale:first-of-type { border-top: 0; }
.sb-scale-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; align-items: baseline; }
.sb-scale-title { font-size: 0.95rem; }
.sb-scale-value { font-size: 0.82rem; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-scale.is-set .sb-scale-value { color: var(--sb-gold-dark); font-weight: 600; }
.sb-scale-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-muted); }
.sb-scale-ends span:last-child { text-align: right; }
.sb-profile-form .sb-scale-input, .sb-quiz .sb-scale-input { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.sb-scale-input:focus { outline: none; }
.sb-scale-input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--sb-gold) 0, var(--sb-gold) var(--sb-scale-fill, 0%), var(--sb-line) var(--sb-scale-fill, 0%), var(--sb-line) 100%); }
.sb-scale-input::-moz-range-track { height: 3px; border-radius: 2px; background: var(--sb-line); }
.sb-scale-input::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--sb-gold); }
.sb-scale:not(.is-set) .sb-scale-input::-moz-range-progress { background: var(--sb-line); }
.sb-scale-input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border-radius: 50%; background: #fff; border: 2px solid #c9c2b6; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sb-scale-input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #c9c2b6; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sb-scale.is-set .sb-scale-input::-webkit-slider-thumb { background: var(--sb-gold); border-color: var(--sb-gold); }
.sb-scale.is-set .sb-scale-input::-moz-range-thumb { background: var(--sb-gold); border-color: var(--sb-gold); }
.sb-scale-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(149, 129, 91, .28); }
.sb-scale-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(149, 129, 91, .28); }
.sb-scale-clear { grid-column: 2; justify-self: end; background: none; border: 0; padding: 6px 0 6px 12px; min-height: 32px; font: inherit; font-size: 0.78rem; color: var(--sb-muted); text-decoration: underline; cursor: pointer; }
.sb-scale-clear:hover { color: var(--sb-gold-dark); }
.sb-scale-clear[hidden] { display: none; }
.sb-scales .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .sb-scales { padding: 4px 14px 10px; } .sb-scale-title { font-size: 0.92rem; } }

/* quiz, part 2: the profile's sliders inside the quiz, the skip link, the richer result */
.sb-quiz-scales { margin: 14px 0 6px; }
.sb-quiz-scales .sb-scale:first-of-type { border-top: 0; }
.sb-quiz .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-quiz-skip { background: none; border: 0; padding: 12px 8px; min-height: 44px; font: inherit; color: var(--sb-muted, #6b6b6b); text-decoration: underline; cursor: pointer; }
.sb-quiz-skip:hover { color: var(--sb-gold-dark, #7a6947); }
.sb-quiz-other input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1px solid var(--sb-line, #d9d3c7); border-radius: 12px; background: #fff; font: inherit; }
.sb-quiz-more { margin: 22px 0 0; padding: 18px 20px; border: 1px solid var(--sb-line); border-radius: 14px; background: #fbf8f1; font-size: 0.98rem; line-height: 1.6; }
.sb-quiz-more p { margin: 0 0 10px; }
.sb-quiz-more p:last-child { margin-bottom: 0; }
.sb-quiz-section { margin: 0 0 16px; }
.sb-quiz-section:last-child { margin-bottom: 0; }
.sb-quiz-section p { margin: 0 0 6px; }
@media (max-width: 640px) { .sb-quiz-nav { flex-wrap: wrap; } .sb-quiz-skip { order: 3; flex: 1 1 100%; text-align: center; } }

/* an outfit of an answer: a board of its products' photos under one heading */
.sb-sets { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 6px; }
.sb-set { border: 1px solid var(--sb-line); border-radius: 16px; background: #fbf9f6; padding: 14px 14px 12px; }
.sb-set-title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }
.sb-set-no { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--sb-gold); }
.sb-msg .sb-set .sb-cards, .sb-favitem-a .sb-set .sb-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sb-set .sb-card-body { font-size: 0.8rem; padding: 8px 9px 10px; }
.sb-set .sb-watch-row, .sb-set .sb-card-colors { display: none; }      /* a board stays compact: photo, name, price, link */
.sb-set-rest { margin: 14px 0 0; font-size: 0.8rem; color: var(--sb-muted, #7a736b); }
@media (max-width: 900px) { .sb-msg .sb-set .sb-cards, .sb-favitem-a .sb-set .sb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .sb-set { padding: 10px 8px 6px; border-radius: 14px; }
  .sb-set .sb-card-brand { letter-spacing: 0.04em; }
  .sb-set .sb-card-price s { display: none; }
  /* direct children only: inside a .sb-card-wrap (a column) the card must keep its own height */
  .sb-msg .sb-set .sb-cards > .sb-card, .sb-msg .sb-set .sb-cards > .sb-card-wrap, .sb-favitem-a .sb-set .sb-cards > .sb-card, .sb-favitem-a .sb-set .sb-cards > .sb-card-wrap { flex: 0 0 132px; max-width: 132px; }
}

/* profile: the owner's gender, a small choice above the sliders */
.sb-profile-gender { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; max-width: 320px; }
.sb-profile-gender span { font-size: 0.86rem; color: var(--sb-muted, #6b6b6b); }
.sb-profile-gender select { flex: 1 1 auto; padding: 9px 12px; border: 1px solid var(--sb-line); border-radius: 10px; background: #fff; font: inherit; }

/* a card of the client's own thing (Moja szafa) among product cards: her photo fitted whole on a light ground, a dark mark, no price */
.sb-card-own { border-style: dashed; background: #fbfaf7; }
/* the same 3:4 frame as a product photo, whatever the shape of her picture, so a board of mixed cards stays level */
.sb-card-own .sb-card-img { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; min-height: 0; overflow: hidden; background: #f1ede6; }
.sb-card-own .sb-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; }
/* the mark of a thing of her own wardrobe: the size and the place of every badge (.sb-card-badges), its own colours */
.sb-card-badge.sb-card-badge-own { 
  background: var(--sb-ink, #141c25); color: #fff; }
.sb-card-own-meta { font-size: 0.74rem; color: var(--sb-muted, #6b6b6b); }
.sb-card-own:hover { text-decoration: none; }

/* the link to the wardrobe in the foot of the conversation list: a line of its own (it used to end with a hanging dot) */
.sb-side-foot .sb-side-closet { display: block; margin: 0 0 8px; }
/* an outfit board: one grid, every card as tall as the tallest, the same 3:4 photo frame for shop photos and the client's
   own (a card from the shop carries a price and a link, a card from her wardrobe does not: the text block takes the difference) */
.sb-set .sb-cards { align-items: stretch; }
.sb-set .sb-cards > .sb-card, .sb-set .sb-cards > .sb-card-wrap { align-self: stretch; height: auto; }
.sb-set .sb-card { display: flex; flex-direction: column; }
.sb-set .sb-card-wrap > .sb-card { flex: 1 1 auto; }
.sb-set .sb-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.sb-set .sb-card-cta { margin-top: auto; }
.sb-set .sb-card-img { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; min-height: 0; overflow: hidden; }
.sb-set .sb-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sb-set .sb-card-own .sb-card-img img { object-fit: contain; }
/* phone: the chat takes the whole width. The rule "bigger chat" above set two columns for every width, which left the
   chat 232 px wide with an empty strip beside it on a phone (since 0.18.5). */
@media (max-width: 800px) { .sb-app { grid-template-columns: minmax(0, 1fr); } }

/* morning report: merged sections, the reason above every card and before a text (report-sections.php) */


/* the morning report on a phone: how its product cards are laid out is a setting (report_cards_phone).
   row (default): one row per section, swiped sideways; two cards and a part of the third are visible (a card used to take
   two thirds of the width, which made every row about 520 px tall), the row snaps to cards and the page never scrolls sideways.
   grid: two columns, every card visible without swiping (taller). The computer layout is the same for both. */
@media (max-width: 800px) {
  .sb-report.sb-report-cards-row .sb-cards { gap: 8px; scroll-padding-left: 2px; }
  .sb-report.sb-report-cards-row .sb-cards > .sb-card, .sb-report.sb-report-cards-row .sb-cards > .sb-card-wrap { flex: 0 0 43%; max-width: 190px; min-width: 0; scroll-snap-align: start; }
  .sb-report.sb-report-cards-row .sb-card-body { padding: 8px 9px 10px; }
  .sb-report.sb-report-cards-row .sb-card-name { font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sb-report.sb-report-cards-row .sb-card-colors { display: none; }
  .sb-report.sb-report-cards-row .sb-card-cta { font-size: 0.62rem; }
  .sb-report.sb-report-cards-row .sb-watch-row { gap: 4px; margin-top: 6px; }
  .sb-report.sb-report-cards-row .sb-watch { font-size: 0.6rem; line-height: 1.25; padding: 6px 6px; letter-spacing: 0.02em; }
  .sb-report.sb-report-cards-grid .sb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-x: visible; scroll-snap-type: none; padding: 4px 0 10px; margin-left: 0; margin-right: 0; }
  .sb-report.sb-report-cards-grid .sb-cards > .sb-card, .sb-report.sb-report-cards-grid .sb-cards > .sb-card-wrap { flex: none; max-width: none; min-width: 0; }
  .sb-report.sb-report-cards-grid .sb-watch { font-size: 0.62rem; padding: 6px 6px; }
}

/* account page: "Twoje dane" (privacy.php) */
.sb-privacy { margin-top: 32px; }
.sb-privacy-note { padding: 10px 14px; border: 1px solid #b3261e; border-radius: 8px; color: #8c1d18; background: #fff; }
.sb-privacy-delete { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sb-line); }
.sb-privacy-delete > summary { cursor: pointer; color: #8c1d18; font-weight: 600; }
.sb-privacy-delete-form { display: grid; gap: 12px; max-width: 420px; margin-top: 12px; }
.sb-privacy-check { display: flex; gap: 8px; align-items: flex-start; }
.sb-privacy-pass { display: grid; gap: 4px; }
.sb-privacy-pass input { padding: 10px 12px; border: 1px solid var(--sb-line); border-radius: 8px; font: inherit; }
button.sb-btn-danger, .sb-btn-danger { background: #8c1d18; border-color: #8c1d18; color: #fff; justify-self: start; }
button.sb-btn-danger:hover, .sb-btn-danger:hover { background: #6e1612; border-color: #6e1612; color: #fff; }

/* "Moje konto": sizes as chips, up to three of each kind (profile-page.php, 20.10.2026); five budgets. The label is the
   plugin's own .sb-chip pill; a ticked one looks like .sb-chip.is-on */
.sb-profile-grid .sb-size-chips { grid-column: 1 / -1; border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.sb-size-chips legend { font-size: 0.72rem; color: var(--sb-muted); margin-bottom: 4px; padding: 0; }
.sb-size-chips .sb-chips { gap: 6px; margin: 0; }
.sb-profile-form .sb-size-chips .sb-chip { display: inline-flex; margin: 0; position: relative; cursor: pointer; min-width: 44px; justify-content: center; }
.sb-size-chips .sb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sb-profile-form .sb-size-chips .sb-chip span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.sb-size-chips .sb-chip:has(input:checked) { background: var(--sb-gold); border-color: var(--sb-gold); color: #fff; }
.sb-size-chips .sb-chip:has(input:focus-visible) { outline: 2px solid var(--sb-gold-dark); outline-offset: 2px; }
.sb-size-chips .sb-chip:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.sb-profile-grid .sb-profile-group { grid-column: 1 / -1; margin: 6px 0 2px; font-size: 0.8rem; color: var(--sb-muted); }


/* ---------- profile page in sections (Kacper 01.11.2026): cards with a heading, 2 columns, a visible progress bar ---------- */
.sb-profile h2 { font-family: var(--sb-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: 0.02em; }
.sb-profile-intro { font-size: 0.95rem; line-height: 1.6; }
.sb-profile-progress { background: #fff; border-radius: 16px; box-shadow: var(--sb-shadow); padding: 16px 22px 18px; margin: 18px 0 22px; }
.sb-profile-progress .sb-profile-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; align-items: baseline; margin: 0 0 10px; color: var(--sb-ink); font-size: 1rem; }
.sb-profile-progress .sb-profile-meta strong { font-weight: 600; }
.sb-profile-progress .sb-profile-meta span { font-size: 0.82rem; color: var(--sb-muted, #6b6560); }
.sb-profile-bar { height: 10px; background: var(--sb-line); border-radius: 999px; overflow: hidden; }
.sb-profile-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sb-gold-dark), var(--sb-gold)); border-radius: 999px; min-width: 6px; }
.sb-profile-card { background: #fff; border-radius: 18px; box-shadow: var(--sb-shadow); padding: 24px 28px 22px; margin: 0 0 18px; }
.sb-profile-card h3 { font-family: var(--sb-serif); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.02em; margin: 0 0 4px; color: var(--sb-ink); }
.sb-profile-card-desc { font-size: 0.86rem; line-height: 1.5; color: var(--sb-muted, #6b6560); margin: 0 0 18px; max-width: 640px; }
.sb-profile-card .sb-profile-grid { grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.sb-profile-card .sb-profile-grid label { margin: 0; }
.sb-profile-form-page .sb-profile-card label > span:first-child { font-size: 0.8rem; color: var(--sb-ink); letter-spacing: 0.01em; margin-bottom: 6px; }
.sb-profile-form-page .sb-profile-card input, .sb-profile-form-page .sb-profile-card textarea, .sb-profile-form-page .sb-profile-card select {
  border: 1px solid var(--sb-line); border-radius: 10px; background: #fff; padding: 11px 13px; font-size: 0.95rem; color: var(--sb-ink); }
.sb-profile-form-page .sb-profile-card input:focus, .sb-profile-form-page .sb-profile-card textarea:focus, .sb-profile-form-page .sb-profile-card select:focus {
  outline: none; border-color: var(--sb-gold); box-shadow: 0 0 0 3px rgba(149, 129, 91, 0.18); }
.sb-profile-form-page .sb-profile-card ::placeholder { color: #a39b93; opacity: 1; }
.sb-input-unit { position: relative; display: block; }
.sb-input-unit input { padding-right: 44px !important; }
.sb-input-unit i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.82rem; color: var(--sb-muted, #6b6560); pointer-events: none; }
.sb-profile-card .sb-size-chips { margin: 0 0 6px; }
.sb-profile-card .sb-size-chips legend { font-size: 0.8rem; color: var(--sb-ink); margin-bottom: 8px; }
.sb-profile-card.is-basics .sb-profile-gender { margin: 0; max-width: 360px; }
.sb-profile-card.is-basics .sb-profile-gender span { color: var(--sb-ink); font-size: 0.86rem; }
.sb-profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.sb-profile-card.is-scales .sb-scales { border: 0; padding: 0; margin: 0; }
.sb-profile-card.is-scales .sb-scales legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-profile-card.is-scales .sb-scales-hint { margin: -10px 0 8px; }
.sb-profile-saved { background: #f2f8f4; border: 1px solid #9bbfa8; border-radius: 10px; padding: 10px 14px; }
.sb-profile-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
@media (max-width: 640px) {
  .sb-profile-card { padding: 20px 18px 18px; border-radius: 16px; }
  .sb-profile-card .sb-profile-grid { grid-template-columns: 1fr; }
  .sb-profile-actions .sb-btn { flex: 1 1 0; justify-content: center; text-align: center; }
}
/* phone: a copy of the buttons stays at the bottom of the screen while the form is in view (assets/profile.js) */
.sb-profile-float { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 245, 241, 0.97); box-shadow: 0 -8px 20px rgba(20, 28, 37, 0.10); transform: translateY(110%); transition: transform .2s ease;
  font-family: 'Work Sans', system-ui, sans-serif; --sb-gold: #95815b; --sb-ink: #141c25; --sb-line: #e5dfdb; }
.sb-profile-float.is-on { transform: none; }
.sb-profile-float .sb-btn { flex: 1 1 0; display: inline-flex; justify-content: center; align-items: center; text-align: center; text-decoration: none;
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--sb-gold); background: var(--sb-gold); color: #fff; cursor: pointer; }
.sb-profile-float .sb-btn-secondary { background: #fff; color: var(--sb-ink); border-color: var(--sb-line); }
@media (min-width: 641px) { .sb-profile-float { display: none; } }

/* Paid content for a visitor (/stylizacje/, /kapsula/): one card in the theme's style, like the theme's offer cards
   (square frame, white surface, the theme's buttons), 08.11.2026 */
.sb-paid-gate .sb-gate-card { max-width: 44rem; margin: 8px auto 0; padding: 2.5rem 2rem 2rem; background: #fff; border: 1px solid var(--wp--preset--color--line, #e4ddd2); text-align: center; }
.sb-paid-gate .sb-gate-eyebrow { margin: 0 0 0.6rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent, #95815b); }
.sb-paid-gate .sb-gate-title { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.25; }
.sb-paid-gate .sb-gate-text { margin: 0 auto 0.8rem; max-width: 34rem; font-size: 1.02rem; line-height: 1.65; }
.sb-paid-gate .sb-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.6rem 0 0; }
.sb-paid-gate .sb-gate-actions .wp-block-button { margin: 0; }
/* the core buttons CSS is not loaded on these pages: the theme's look of a filled and an outlined button, written out */
.sb-paid-gate .sb-gate-actions .wp-block-button__link { display: inline-block; line-height: 1.7; text-decoration: none; }
.sb-paid-gate .sb-gate-actions .is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast, #141c25); border: 1px solid currentColor; padding: calc(0.85em - 1px) calc(2em - 1px); }
.sb-paid-gate .sb-gate-actions .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--contrast, #141c25); color: #fff; }
.sb-paid-gate .sb-gate-quiz { margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--wp--preset--color--line, #e4ddd2); font-size: 0.92rem; color: var(--sb-muted, #6b6b6b); }
@media (max-width: 600px) {
  .sb-paid-gate .sb-gate-card { padding: 2rem 1.25rem 1.5rem; }
  .sb-paid-gate .sb-gate-actions .wp-block-button { width: 100%; }
  .sb-paid-gate .sb-gate-actions .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; }
}