@charset "UTF-8";

/*

Theme Name: Klaudia

Template: twentytwentyfive

Description: Minimalistyczny motyw blokowy dla klaudiastylistka.pl (child Twenty Twenty-Five).

Version: 0.5.22

Author: Kacper Jedrczak

Text Domain: klaudia

*/



/* ---------- typography helpers ---------- */

.kl-eyebrow {

  font-family: var(--wp--preset--font-family--work-sans);

  font-size: 0.72rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--wp--preset--color--accent);

}



h1, h2, h3, h4, .wp-block-post-title, .wp-block-site-title {

  letter-spacing: 0.01em;

  font-weight: 400;

}



/* ---------- header ---------- */

.kl-header .wp-block-navigation-item__content {

  font-family: var(--wp--preset--font-family--playfair-display-sc);

  font-size: 0.95rem;

  letter-spacing: 0.04em;

}



.kl-header .wp-block-navigation-item__content:hover,

.kl-header .current-menu-item > .wp-block-navigation-item__content {

  color: var(--wp--preset--color--accent);

  text-decoration: none;

}



.kl-logo img { height: 56px; width: auto; }



/* ---------- buttons ---------- */

.wp-block-button__link,

.sb-btn,

.wpcf7-submit {

  border-radius: 2px;

  font-family: var(--wp--preset--font-family--work-sans);

  font-size: 0.85rem;

  letter-spacing: 0.06em;

  padding: 0.85em 2em;

}



.wp-block-button.is-style-outline .wp-block-button__link {

  border-width: 1px;

}



/* ---------- services list (cards) ---------- */

.kl-services {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: var(--wp--preset--spacing--40);

}



.kl-service {

  display: flex;

  flex-direction: column;

  background: var(--wp--preset--color--white);

  color: var(--wp--preset--color--contrast);

  text-decoration: none;

  border: 1px solid var(--wp--preset--color--line);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.kl-service:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 28, 37, 0.08); color: var(--wp--preset--color--contrast); }



.kl-service-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--line); }

.kl-service-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }

.kl-service:hover .kl-service-media img { transform: scale(1.04); }



.kl-service-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.5rem 1.6rem; }



.kl-service-index {

  font-family: var(--wp--preset--font-family--work-sans);

  font-size: 0.72rem;

  letter-spacing: 0.22em;

  color: var(--wp--preset--color--accent);

}



.kl-service-title {

  font-family: var(--wp--preset--font-family--playfair-display-sc);

  font-size: 1.2rem;

  line-height: 1.3;

}



.kl-service-price { font-size: 0.9rem; color: var(--wp--preset--color--muted); }



.kl-service-more {

  margin-top: 0.6rem;

  font-size: 0.8rem;

  letter-spacing: 0.06em;

  color: var(--wp--preset--color--accent);

}



.kl-service-more::after { content: " →"; }






/* ---------- blog ---------- */

.kl-post-card .wp-block-post-title { font-size: 1.25rem; }

.kl-post-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; }

.wp-block-post-excerpt__more-link { color: var(--wp--preset--color--accent); }



/* ---------- forms (CF7) ---------- */

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],

.wpcf7 input[type="date"], .wpcf7 textarea, .wpcf7 select {

  width: 100%;

  border: 0;

  border-bottom: 1px solid var(--wp--preset--color--line);

  background: transparent;

  padding: 0.7em 0;

  font: inherit;

  color: inherit;

}



.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-bottom-color: var(--wp--preset--color--accent); }

.wpcf7 .wpcf7-list-item { margin-left: 0; font-size: 0.8rem; color: var(--wp--preset--color--muted); }

.wpcf7-submit { background: var(--wp--preset--color--accent); color: #fff; border: 0; cursor: pointer; }



/* ---------- chat colors follow the theme ---------- */

/* The plugin's own gold (#95815b) is too light for white text on buttons and for small text (contrast 3.5-3.8:1);
   its pages take the theme accent, which reaches 4.5:1 on white and on the cream background. */
body .sb-app, body .sb-gate, body .sb-profile, body .sb-outfits-page, body .sb-report, body .sb-demo, body .sb-demo-banner,
body .sb-report-page, body .sb-capsule-page, body .sb-quiz {
  --sb-gold: var(--wp--preset--color--accent);
  --sb-gold-dark: #66583e;
  --sb-accent: var(--wp--preset--color--accent);
}

.sb-app, .sb-gate, .sb-profile {

  --sb-fg: var(--wp--preset--color--contrast);

  --sb-line: var(--wp--preset--color--line);

  --sb-user: var(--wp--preset--color--white);

  --sb-accent: var(--wp--preset--color--accent);

  --sb-bg: var(--wp--preset--color--base);

}



/* ---------- footer ---------- */

.kl-footer .wp-block-navigation-item__content {

  font-family: var(--wp--preset--font-family--playfair-display-sc);

  font-size: 0.85rem;

  letter-spacing: 0.06em;

}



.kl-footer a:hover { color: #e8c9a0; }



/* ---------- CF7 legacy layout classes from the old theme ---------- */

.wpcf7 .columns_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

.wpcf7 .columns_wrap .column-1_1 { grid-column: 1 / -1; }

.wpcf7 .style-line { display: block; margin-bottom: 0.5rem; }

.wpcf7 .margin-bottom { margin-bottom: 1rem; }

.wpcf7 .wpcf7-acceptance { display: block; margin: 1rem 0; }

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label { line-height: 1.5; }

.wpcf7 .wpcf7-response-output { border: 1px solid var(--wp--preset--color--line); padding: 0.75rem 1rem; margin: 1rem 0 0; font-size: 0.9rem; }

@media (max-width: 600px) { .wpcf7 .columns_wrap { grid-template-columns: 1fr; } }



/* ---------- post featured image fallback (first content image) ---------- */

.kl-post-card .wp-block-post-featured-image { aspect-ratio: 4 / 3; overflow: hidden; }

.kl-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }



@media (max-width: 900px) { .kl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 560px) { .kl-services { grid-template-columns: 1fr; } }

.wpcf7 textarea { min-height: 6rem; height: 6rem; }




/* ---------- full-width sections: keep side gutters on phones, no horizontal scroll ---------- */

html, body { overflow-x: hidden; }

.wp-block-group.alignfull.has-global-padding > * { max-width: min(1200px, 100% - 2 * var(--wp--preset--spacing--40)); }

@media (max-width: 782px) {

  .wp-block-columns { gap: var(--wp--preset--spacing--40) !important; }

  .kl-header .wp-block-navigation__responsive-container-open { margin-inline: auto; }

}



/* ---------- forms must never widen the layout on phones ---------- */

.wpcf7 input, .wpcf7 textarea, .wpcf7 select, .sb-form textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }

.wpcf7 .columns_wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 600px) { .wpcf7 .columns_wrap { grid-template-columns: minmax(0, 1fr); } }

.wp-block-columns, .wp-block-column { min-width: 0; }



/* ---------- Instagram Feed (Smash Balloon) in theme colors ---------- */

#sb_instagram .sbi_header_text h3 { font-family: var(--wp--preset--font-family--playfair-display-sc); font-size: 1rem; font-weight: 400; }

#sb_instagram .sbi_header_text p { font-size: 0.85rem; color: var(--wp--preset--color--muted); }

#sb_instagram #sbi_load .sbi_load_btn,

#sb_instagram #sbi_load .sbi_follow_btn a {

  background: transparent !important;

  color: var(--wp--preset--color--accent) !important;

  border: 1px solid var(--wp--preset--color--accent);

  border-radius: 2px;

  font-family: var(--wp--preset--font-family--work-sans);

  font-size: 0.85rem;

  letter-spacing: 0.06em;

  padding: 0.7em 1.6em;

}

#sb_instagram #sbi_load .sbi_load_btn:hover,

#sb_instagram #sbi_load .sbi_follow_btn a:hover { background: var(--wp--preset--color--accent) !important; color: #fff !important; }

#sb_instagram .sbi_photo_wrap .sbi_photo { border-radius: 2px; }





/* ---------- login/logout link inside navigation ---------- */

.kl-header .wp-block-loginout, .kl-footer .wp-block-loginout { list-style: none; }

.kl-header .wp-block-loginout a, .kl-footer .wp-block-loginout a { font-family: var(--wp--preset--font-family--playfair-display-sc); font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; }

.kl-header .wp-block-loginout a:hover { color: var(--wp--preset--color--accent); }



/* ---------- Paid Memberships Pro pages in theme style ---------- */

.pmpro { font-size: 0.95rem; }

.pmpro .pmpro_card, .pmpro_card { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); box-shadow: none; border-radius: 2px; }

.pmpro .pmpro_btn, .pmpro_btn, .pmpro .pmpro_btn-submit { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; border-radius: 2px; }

.pmpro .pmpro_btn:hover, .pmpro_btn:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }

.pmpro h2, .pmpro h3, .pmpro_card_title { font-family: var(--wp--preset--font-family--playfair-display-sc); font-weight: 400; }

.pmpro a { color: var(--wp--preset--color--accent); }

/* checkout consents (klaudia-core/checkout-consents.php) */
.kl-consents { margin: 1.2rem 0 1rem; }
.kl-consents-info { font-size: 0.85rem; line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0 0 0.9rem; }
.kl-consent { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.55; }
.kl-consent label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.kl-consent input[type=checkbox] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; }
.kl-consent-req { color: var(--wp--preset--color--muted); font-size: 0.82rem; }
/* working drafts of legal pages */
.kl-draft-note { border: 2px solid #a33; background: #fff6f4; padding: 0.9rem 1.1rem; font-size: 0.92rem; }
.kl-legal table { font-size: 0.88rem; }



/* ---------- utility bar (account links, top right) ---------- */

.kl-header { position: relative; }

.kl-utility { position: absolute; top: 14px; right: var(--wp--style--root--padding-right, 24px); margin: 0; }

.kl-header .kl-utility .wp-block-navigation-item__content, .kl-header .kl-utility .wp-block-loginout a {

  font-family: var(--wp--preset--font-family--work-sans);

  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;

  color: var(--wp--preset--color--muted);

}

.kl-header .kl-utility .wp-block-navigation-item__content:hover, .kl-header .kl-utility .wp-block-loginout a:hover { color: var(--wp--preset--color--accent); }


@media (max-width: 781px) {

  .kl-utility { position: static; justify-content: center; margin-bottom: 4px; }
  .kl-utility .wp-block-navigation__container { flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
  .kl-header .kl-utility .wp-block-navigation-item__content, .kl-header .kl-utility .wp-block-loginout a { white-space: nowrap; font-size: 0.72rem; }

}

/* ---------- offer blocks: subscription page and the home banner ---------- */
.kl-price-big {
  font-family: var(--wp--preset--font-family--playfair-display-sc);
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.1;
  margin-block: 0.5em 0.3em;
}
.kl-note { font-size: 0.88rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
.kl-more a { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--wp--preset--color--accent); }
.kl-more a::after { content: " →"; }
.wp-block-columns.kl-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50) !important;
  margin-top: var(--wp--preset--spacing--50);
}
.kl-features h3 { font-size: 1.15rem; line-height: 1.3; }
.kl-features p, .kl-rules p { font-size: var(--wp--preset--font-size--medium); }
.kl-rules { margin-top: var(--wp--preset--spacing--50); }
@media (max-width: 1000px) { .wp-block-columns.kl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wp-block-columns.kl-features { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40) !important; } }
.kl-faq details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 1rem 0; }
.kl-faq summary { cursor: pointer; font-family: var(--wp--preset--font-family--playfair-display-sc); font-size: 1.1rem; }
.kl-faq details p { margin: 0.8rem 0 0; font-size: var(--wp--preset--font-size--medium); }
.wp-block-group.alignfull.kl-faq > * { max-width: min(760px, 100% - 2 * var(--wp--preset--spacing--40)); }
.kl-sb-banner .kl-note { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 480px) {
  .kl-utility .wp-block-navigation__container { flex-wrap: nowrap; gap: 0 10px; }
  .kl-utility .wp-block-navigation { gap: 10px; flex-wrap: nowrap; }
  .kl-header .kl-utility .wp-block-navigation-item__content, .kl-header .kl-utility .wp-block-loginout a { font-size: 0.64rem; letter-spacing: 0.02em; }
}

/* ---------- spacing scale: one rhythm for sections, cards and heading-to-content gaps ----------
   Values live in theme.json (settings.custom.space) and shrink on phones through clamp(). */
body .kl-section { padding-top: var(--wp--custom--space--section); padding-bottom: var(--wp--custom--space--section); }
body .kl-card { padding: var(--wp--custom--space--card); }
body .kl-lead { margin-bottom: var(--wp--custom--space--head); }
body .kl-gap-top { margin-top: var(--wp--custom--space--head); }

/* ---------- header sizes (Klaudia's remark 1): logo +25%, main menu one step larger ---------- */
.kl-logo img { height: 70px; width: auto; max-width: none; }
.kl-header .wp-block-navigation:not(.kl-utility-nav) .wp-block-navigation-item__content { font-size: 1.06rem; }
.kl-header .wp-block-navigation:not(.kl-utility-nav) .wp-block-navigation__container { gap: 0.3rem clamp(0.9rem, 2.1vw, 1.7rem); }
@media (max-width: 600px) { .kl-logo img { height: 64px; } }

/* ---------- navy Stylowa Baza tile on the home page (same colour as the footer) ---------- */
.kl-sb-banner .kl-price-big { margin-block: 0.2em 0.6em; }
.kl-sb-banner .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--contrast); }
.kl-sb-banner .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--contrast) !important; }


/* ---------- compact forms (CF7): smaller gaps between fields, lower fields ---------- */
.wpcf7 form p { margin: 0; }
.wpcf7 form br { display: none; }
.wpcf7 form .columns_wrap { margin: 0 0 0.6rem; }
.wpcf7 form .style-line { margin: 0; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="date"], .wpcf7 textarea, .wpcf7 select { padding: 0.5em 0; font-size: 0.95rem; line-height: 1.5; }
.wpcf7 textarea { height: 4.4rem; min-height: 4.4rem; }
.wpcf7 .wpcf7-acceptance { margin: 0.5rem 0 0.9rem; }
.wpcf7 .wpcf7-list-item { font-size: 0.75rem; line-height: 1.5; }
/* error tips sit inside the field (right side) so showing or hiding them never moves the submit button */
.wpcf7 .wpcf7-form-control-wrap { position: relative; display: block; }
.wpcf7 .wpcf7-not-valid-tip { position: absolute; right: 0; top: 0.55em; margin: 0; font-size: 0.72rem; line-height: 1.5; pointer-events: none; background: var(--wp--preset--color--white); padding-left: 0.5em; }
.wpcf7 select + .wpcf7-not-valid-tip { right: 1.6em; }
.wpcf7 form .wpcf7-spinner { margin: 0 0 0 0.6rem; }

/* ---------- first section right under the header: the small step of the scale (the header already gives air) ---------- */
body main > .wp-block-post-content > .kl-section:first-child,
body main.kl-section { padding-top: var(--wp--custom--space--head); }

/* ---------- two plain sections in a row (same background): one gap between them, not two ---------- */
body .kl-section:not(.has-background) + .kl-section:not(.has-background) { padding-top: 0; }

/* ---------- full-width sections touch each other: no block-gap margin between them (it showed as a beige strip
   of the page background between the white section and the navy tile on the home page) ---------- */
body main > .wp-block-post-content > .kl-section { margin-block-start: 0; }

/* ---------- narrower section for a pair of photos (about page: interviews and events) ---------- */
body .wp-block-group.alignfull.kl-media > * { max-width: min(900px, 100% - 2 * var(--wp--preset--spacing--40)); }
/* photos in these sections sit in a narrower, centred box; both sections share the same total width */
body .wp-block-group.alignfull.kl-media > .wp-block-image,
body .wp-block-group.alignfull.kl-media > .wp-block-columns { max-width: min(700px, 100% - 2 * var(--wp--preset--spacing--40)); margin-left: auto; margin-right: auto; }
/* on phones the two interview photos stay side by side instead of stacking into two tall screens */
@media (max-width: 781px) {
  .kl-media > .wp-block-columns { flex-wrap: nowrap !important; gap: var(--wp--preset--spacing--30) !important; }
  .kl-media > .wp-block-columns > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; }
}

/* ---------- service price block: big serif values with small labels under them, items in a row with thin dividers,
   a thin gold rule above and below; width follows the content. Items that do not fit wrap and get a horizontal divider. ---------- */
.kl-price { display: inline-block; max-width: 100%; margin-top: var(--wp--custom--space--head); padding: 1rem 0;
  border-top: 1px solid var(--wp--preset--color--accent); border-bottom: 1px solid var(--wp--preset--color--accent); }
.kl-price-items { display: flex; flex-wrap: wrap; overflow: hidden; }
.kl-price-item { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.47rem 1.9rem;
  margin: -1px 0 0 -1px; border-left: 1px solid var(--wp--preset--color--line); border-top: 1px solid var(--wp--preset--color--line); }
/* values: the regular cut of the heading typeface (real lowercase "zł", "do 5 h") with lining, equal-height digits */
.kl-price-value { font-family: "Playfair Display", var(--wp--preset--font-family--playfair-display-sc), serif; font-size: clamp(1.36rem, 2.9vw, 1.8rem); line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-variant-caps: normal; text-transform: none;
  letter-spacing: 0.01em; color: var(--wp--preset--color--contrast); white-space: nowrap; }
.kl-price-value .kl-unit { font-size: 0.68em; }
/* the asterisk: a small superscript in the body font and label colour, the same mark in the note under the block */
.kl-star { font-family: var(--wp--preset--font-family--work-sans); font-weight: 400; font-style: normal; color: var(--wp--preset--color--accent);
  font-size: 0.48em; line-height: 0; vertical-align: baseline; position: relative; top: -0.95em; margin-left: 0.2em; }
.kl-service-price, .kl-price-inline { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.kl-price-note .kl-star { font-size: 1.15em; top: 0.12em; margin: 0 0.1em 0 0; }
.kl-price-label { font-family: var(--wp--preset--font-family--work-sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); white-space: nowrap; }
.kl-price-note { margin: 0.7rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
@media (max-width: 600px) { .kl-price-item { padding: 0.43rem 0.85rem; } .kl-price-label { letter-spacing: 0.16em; font-size: 0.66rem; } }

/* ---------- prices on the services list and the vouchers page in the style of the service price block
   (price typeface with lining digits, smaller lower-case "zł", small gold superscript asterisk) ---------- */
.kl-service-price { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.15rem; font-size: 1rem; color: var(--wp--preset--color--contrast); }
.kl-service-price-line { display: block; line-height: 1.35; }
.kl-amount, .kl-voucher-price { font-family: "Playfair Display", var(--wp--preset--font-family--playfair-display-sc), serif;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-weight: 400; letter-spacing: 0.01em; }
.kl-amount { font-size: 1.06rem; white-space: nowrap; }
.kl-amount .kl-unit { font-size: 0.8em; }
.kl-amount .kl-star { font-size: 0.6em; top: -0.6em; }
.kl-desc { font-family: var(--wp--preset--font-family--work-sans); font-size: 0.78rem; color: var(--wp--preset--color--muted); margin-left: 0.2em; }
.kl-voucher-price { font-size: clamp(1.36rem, 2.9vw, 1.8rem); line-height: 1.2; color: var(--wp--preset--color--contrast); }
.kl-voucher-price .kl-price-inline { white-space: nowrap; }
.kl-voucher-price .kl-unit { font-size: 0.68em; }

/* ---------- services list: an incomplete last row is centred under the full rows (desktop grid of three) ---------- */
@media (min-width: 901px) {
  .kl-services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kl-services > .kl-service { grid-column: span 2; }
  .kl-services > .kl-service:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
  .kl-services > .kl-service:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
}
/* voucher cards in one row keep the same height even when a price wraps (tablet widths) */
.wp-block-column > .kl-card:has(.kl-voucher-price) { height: 100%; box-sizing: border-box; }


/* ---------- footer: second, smaller row of links (Stylowa Baza, account) and the seller + legal lines ----------
   Regulamin, Polityka prywatnosci and Polityka cookies are linked in .kl-footer-links (parts/footer.html); the pages
   are working drafts on staging until the legal review (docs/PRAWNE_2026-10-12.md). */
.kl-footer .kl-footer-secondary { margin-top: 0.55rem; }
.kl-footer .kl-footer-secondary .wp-block-navigation__container { gap: 0.25rem 1.5rem; justify-content: center; }
.kl-footer .kl-footer-secondary { gap: 0.25rem 1.5rem; justify-content: center; }
.kl-footer .kl-footer-secondary .wp-block-navigation-item__content,
.kl-footer .kl-footer-secondary .wp-block-loginout a { font-family: var(--wp--preset--font-family--work-sans); font-size: 0.76rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: #c9ced4; }
.kl-footer .kl-footer-secondary .wp-block-navigation-item__content:hover,
.kl-footer .kl-footer-secondary .wp-block-loginout a:hover { color: var(--wp--preset--color--white); }
.kl-footer .kl-footer-legal { margin-top: 1.1rem; }
.kl-footer .kl-footer-legal p { margin: 0; font-size: 0.8rem; line-height: 1.75; color: #a9b1ba; }
.kl-footer .kl-footer-legal p + p { margin-top: 0.15rem; }
.kl-footer .kl-footer-legal a { color: #d5d9de; text-decoration: none; }
.kl-footer .kl-footer-legal .kl-footer-links a { text-decoration: underline; text-underline-offset: 0.2em; }
.kl-footer .kl-footer-legal a:hover { color: var(--wp--preset--color--white); }
.kl-footer .wp-block-social-links { margin-top: 1.1rem; }
.kl-footer .kl-footer-secondary, .kl-footer .kl-footer-secondary .wp-block-navigation__container { align-items: center; }
.kl-footer .kl-footer-secondary .wp-block-loginout { display: flex; align-items: center; margin: 0; padding: 0; }
.kl-footer .kl-footer-secondary .wp-block-navigation-item__content,
.kl-footer .kl-footer-secondary .wp-block-loginout a { line-height: 1.6; padding: 0; color: #c9ced4 !important; }
.kl-footer .kl-footer-secondary .wp-block-navigation-item__content:hover,
.kl-footer .kl-footer-secondary .wp-block-loginout a:hover { color: var(--wp--preset--color--white) !important; }
@media (max-width: 600px) { .kl-footer-sep { display: none; } .kl-footer-contact { display: block; } }
/* WordPress repeats the navigation class on the inner list: the offset belongs to the nav element only */
.kl-footer ul.kl-footer-secondary { margin-top: 0; }


/* ---------- main menu after login: the subscription items (class kl-sub in "Menu glowne") as a second row ----------
   Same character as the second row of the footer: small spaced capitals, centred, clearly secondary. The six site
   items keep the full size. On phones (overlay menu) the kl-sub items form a separate group under a thin line. */
.kl-header .wp-block-navigation:not(.kl-utility-nav) li.kl-sub > .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--work-sans); font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; color: var(--wp--preset--color--muted); white-space: nowrap; }
.kl-header .wp-block-navigation:not(.kl-utility-nav) li.kl-sub > .wp-block-navigation-item__content:hover,
.kl-header .wp-block-navigation:not(.kl-utility-nav) li.kl-sub.current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); }
.kl-header .wp-block-navigation:not(.kl-utility-nav) li.kl-sub.current-menu-item > .wp-block-navigation-item__content { box-shadow: 0 1px 0 currentColor; }
.kl-footer li.kl-sub { display: none; }
@media (min-width: 600px) {
  .kl-header .wp-block-navigation:not(.kl-utility-nav) .wp-block-navigation__container > li { order: 1; }
  .kl-header .wp-block-navigation:not(.kl-utility-nav) .wp-block-navigation__container > li.kl-sub { order: 3; }
  body.logged-in .kl-header .wp-block-navigation:not(.kl-utility-nav) .wp-block-navigation__container::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  body.logged-in .kl-header .wp-block-navigation:not(.kl-utility-nav) .wp-block-navigation__container { row-gap: 0.25rem; }
}
@media (max-width: 599px) {
  .kl-header .wp-block-navigation:not(.kl-utility-nav) .is-menu-open li:not(.kl-sub) + li.kl-sub { margin-top: 0.7rem; padding-top: 1.1rem; border-top: 1px solid var(--wp--preset--color--line); padding-inline: 2.2rem; }
}


/* ---------- menus: focus ring only for keyboard navigation, gold only for the current page on touch screens ----------
   The phone overlay moves focus to its first link when it opens: without :focus-visible that link got a thick
   black frame. On touch screens :hover sticks to the last tapped link, so hover colours apply to real pointers only. */
.kl-header .wp-block-navigation a:focus, .kl-footer .wp-block-navigation a:focus,
.kl-header .wp-block-navigation button:focus { outline: none; }
.kl-header .wp-block-navigation a:focus-visible, .kl-footer .wp-block-navigation a:focus-visible,
.kl-header .wp-block-navigation button:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 4px; }
@media (hover: none) {
  .kl-header li:not(.current-menu-item) > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); }
  .kl-header .wp-block-navigation:not(.kl-utility-nav) li.kl-sub:not(.current-menu-item) > .wp-block-navigation-item__content:hover,
  .kl-header .kl-utility li:not(.current-menu-item) > .wp-block-navigation-item__content:hover,
  .kl-header .kl-utility .wp-block-loginout a:hover { color: var(--wp--preset--color--muted); }
}
/* the phone overlay: every link at least 40 px high (touch), rows evenly spaced */
@media (max-width: 599px) {
  .kl-header .wp-block-navigation:not(.kl-utility-nav) .is-menu-open .wp-block-navigation__container { row-gap: 0; }
  .kl-header .wp-block-navigation:not(.kl-utility-nav) .is-menu-open .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 40px; }
  .kl-header .wp-block-navigation:not(.kl-utility-nav) .is-menu-open li:not(.kl-sub) + li.kl-sub { margin-top: 0.5rem; padding-top: 0.5rem; }
}

/* ---------- top bar on phones and tablets: one line, links with a 40 px touch area (no change to the layout) ---------- */
@media (max-width: 781px) {
  .kl-utility .wp-block-navigation, .kl-utility .wp-block-navigation__container { align-items: center; flex-wrap: nowrap; }
  .kl-header .kl-utility .wp-block-navigation-item__content, .kl-header .kl-utility .wp-block-loginout a { display: inline-flex; align-items: center; min-height: 40px; line-height: 1.2; }
  .kl-header .kl-utility .wp-block-loginout { display: flex; align-items: center; margin: 0; padding: 0; }
  .kl-utility { position: relative; top: -6px; right: auto; margin-bottom: -16px; }
}

/* ---------- footer menus on touch widths ----------
   Links 40 px high. Up to 600 px both rows are even grids of two columns: the site items (3 rows) and, under a
   thin line, the second row; an odd last item ("Zaloguj sie" for visitors) is centred across both columns.
   WordPress splits the second row into several lists, hence display: contents. */
@media (max-width: 1024px) {
  .kl-footer .wp-block-navigation .wp-block-navigation-item__content,
  .kl-footer .kl-footer-secondary .wp-block-loginout a { display: inline-flex; align-items: center; min-height: 40px; line-height: 1.2; }
  .kl-footer > nav.wp-block-navigation, .kl-footer > nav.wp-block-navigation .wp-block-navigation__container { row-gap: 0 !important; }
  .kl-footer > nav.wp-block-navigation:not(.kl-footer-secondary) { margin-top: 0.3rem; }
  .kl-footer > nav.kl-footer-secondary { margin-top: 0; }
  .kl-footer .wp-block-social-links { margin-top: 0.5rem; }
}
@media (max-width: 600px) {
  footer.kl-footer { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
  .kl-footer > nav.wp-block-navigation { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.5rem !important;
    width: 100%; max-width: 21rem; margin-left: auto; margin-right: auto; justify-items: center; align-items: center; }
  .kl-footer > nav.wp-block-navigation > ul.wp-block-navigation__container { display: contents; }
  .kl-footer > nav.wp-block-navigation:not(.kl-footer-secondary) { margin-top: 0.5rem; }
  .kl-footer > nav.kl-footer-secondary { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .kl-footer > nav.kl-footer-secondary > .wp-block-loginout { grid-column: 1 / -1; }
  .kl-footer .wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; }
  .kl-footer .wp-block-social-links { margin-top: 0.35rem; }
  .kl-footer .kl-footer-legal { margin-top: 0.75rem; }
}


/* ---------- page name as a small label above the content's own heading (Kapsula: the capsule's name from the plugin is the visual title) ---------- */
h1.kl-page-label { font-family: var(--wp--preset--font-family--work-sans); font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.22em; font-weight: 400; margin: 0 0 0.9rem; }
.kl-section > h1.kl-page-label + * { margin-top: 0.6rem; }

/* ---------- Moja szafa: teaser on /moja-szafa/ and the offer section on the subscription page ---------- */
.kl-plan-prices-wrap { text-align: center; }
.kl-plan-prices-wrap .kl-price { margin-top: 0.4rem; }
.kl-plan-prices-wrap .kl-price-item { align-items: center; }
ul.kl-points { list-style: none; padding: 0; margin: var(--wp--preset--spacing--40) auto; max-width: 34rem; display: grid; gap: 0.85rem; text-align: left; }
ul.kl-points li { margin: 0; padding-left: 1.3rem; position: relative; font-size: 0.95rem; line-height: 1.55; }
ul.kl-points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 1px; background: var(--wp--preset--color--accent); }
ul.kl-points strong { font-family: var(--wp--preset--font-family--playfair-display-sc); font-weight: 400; font-size: 1.08rem; letter-spacing: 0.02em; }
.kl-wardrobe-teaser > .wp-block-buttons, .kl-wardrobe-offer > .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

@media (max-width: 600px) { .kl-footer > nav.kl-footer-secondary > ul:last-child > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
body .wp-block-group.alignfull.kl-wardrobe-offer > ul.kl-points { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ---------- subscription: the "miesięcznie / rocznie" switch ([kl_plan_switch]) and the link on the checkout ---------- */
.kl-plan-switch { text-align: center; margin-block: var(--wp--preset--spacing--40); }
.kl-plan-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kl-plan-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 3px; gap: 3px; background: var(--wp--preset--color--white); }
.kl-plan-tab { cursor: pointer; padding: 0.55rem 1.2rem; border-radius: 999px; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
.kl-plan-save { display: inline-block; margin-left: 0.35rem; font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; opacity: 0.85; }
.kl-plan-radio-month:checked ~ .kl-plan-tabs .kl-plan-tab-month,
.kl-plan-radio-year:checked ~ .kl-plan-tabs .kl-plan-tab-year { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--white); }
.kl-plan-radio-month:focus-visible ~ .kl-plan-tabs .kl-plan-tab-month,
.kl-plan-radio-year:focus-visible ~ .kl-plan-tabs .kl-plan-tab-year { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.kl-plan-radio-month:checked ~ .kl-plan-cards .kl-plan-panel-year,
.kl-plan-radio-year:checked ~ .kl-plan-cards .kl-plan-panel-month { display: none; }
.kl-plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); max-width: 52rem; margin: var(--wp--preset--spacing--40) auto 0; }
.kl-plan-cards-1 { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.kl-plan-card { display: flex; flex-direction: column; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); padding: 1.6rem 1.4rem 1.8rem; }
.kl-plan-card .kl-plan-title { margin: 0 0 0.5rem; font-size: 1.4rem; }
.kl-plan-card .kl-plan-about, .kl-plan-card .kl-plan-limit { margin: 0 0 0.4rem; font-size: 0.95rem; line-height: 1.5; }
.kl-plan-card .kl-plan-panel { margin-top: auto; }
@media (max-width: 700px) { .kl-plan-cards { grid-template-columns: minmax(0, 1fr); } }
.kl-plan-panel .kl-price-big { margin-block: 0.7em 0.2em; }
.kl-plan-panel .kl-note { margin-block: 0 1.2em; }
.kl-plan-panel .wp-block-button, .kl-plan-switch-member .wp-block-button { display: inline-block; }
.kl-plan-other { font-size: 0.9rem; }
@media (max-width: 480px) {
  .kl-plan-tabs { flex-wrap: nowrap; border-radius: 1.6rem; }
  .kl-plan-tab { padding: 0.5rem 0.9rem; border-radius: 1.4rem; display: flex; flex-direction: column; justify-content: center; }
  .kl-plan-save { display: block; margin-left: 0; }
}

/* visitor top bar below 390 px: five links do not fit one line; the three services stay in the first row,
   "Zaloguj sie" and "Zaloz konto" (outside the first list, see parts/header.html) go to the second, centred;
   rows of 30 px, so the header grows by only 2 px */
@media (max-width: 389px) {
  body:not(.logged-in) .kl-utility .wp-block-navigation { flex-wrap: wrap; justify-content: center; row-gap: 0; }
  body:not(.logged-in) .kl-utility .wp-block-navigation > .wp-block-navigation__container:first-child { flex-basis: 100%; justify-content: center; }
  body:not(.logged-in) .kl-header .kl-utility .wp-block-navigation-item__content, body:not(.logged-in) .kl-header .kl-utility .wp-block-loginout a { min-height: 30px; }
  body:not(.logged-in) .kl-utility { margin-bottom: -26px; }
}

/* ---------- Stylowa Baza for visitors (/stylowa-baza/, klaudia-core guest-offer.php, Kacper 01.11.2026) ---------- */
.wp-block-columns.kl-services { gap: var(--wp--preset--spacing--40); align-items: stretch; }
.kl-service { border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 2rem 2rem 1.6rem; background: var(--wp--preset--color--white); }
.kl-service-wardrobe { background: #fbf8f2; border-color: #e6dccb; }
.kl-service h2 { margin: 0.3rem 0 0.8rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.kl-service > p:not(.kl-eyebrow):not(.kl-note) { font-size: 1rem; line-height: 1.6; }
.kl-service ul.kl-points { margin: 1.2rem 0 0.8rem; max-width: none; }
.kl-service ul.kl-points a { color: var(--wp--preset--color--accent); white-space: nowrap; }
.kl-plan-choice .kl-plan-cards { max-width: 56rem; }
.kl-plan-choice .kl-plan-card { border-radius: 18px; padding: 1.8rem 1.8rem 2rem; text-align: left; }
.kl-plan-choice .kl-plan-card-wardrobe { border: 1.5px solid var(--wp--preset--color--accent); }
.kl-plan-choice .kl-eyebrow { margin: 0 0 0.4rem; text-align: left; }
.kl-plan-choice .kl-plan-title { font-size: 1.4rem; }
.kl-plan-choice .kl-plan-choice-price { margin: 0 0 0.3rem; text-align: left; }
.kl-plan-choice .kl-plan-panel .kl-note { text-align: left; margin: 0 0 1.1rem; }
.kl-plan-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.55rem; }
.kl-plan-list li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; line-height: 1.45; }
.kl-plan-list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.25em; width: 0.4rem; height: 0.75rem; border: solid var(--wp--preset--color--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kl-plan-choice .kl-plan-panel .wp-block-button { display: block; }
.kl-plan-choice .kl-plan-card .wp-block-button__link { display: block; text-align: center; }
@media (max-width: 781px) { .kl-service { padding: 1.5rem 1.25rem 1.2rem; } .kl-plan-choice .kl-plan-card { padding: 1.5rem 1.25rem 1.6rem; } }

/* ---------- /stylowa-baza/ for visitors (Kacper 01-02.11.2026), one layout for every section:
   container 1200 px, the site's spacing scale (theme.json custom.space), each section opens with eyebrow + Playfair h2
   (centred), content rows always text left / picture or card right, backgrounds light / white / light / white / light and the
   navy tile of the home page at the end. One card style for the chat, the report, the plans and the closet list.
   Mockups are HTML (sharp at any DPR) with small product thumbnails from assets/img/stylowa-baza/produkty/. ---------- */
.kl-ofr-card, .kl-ofr-mock, .kl-plan-choice .kl-plan-card, .kl-plan-choice .kl-plan-card-wardrobe {
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20, 28, 37, 0.06); }
.kl-ofr-card { padding: var(--wp--custom--space--card); }

/* section heads */
.kl-ofr-features .kl-eyebrow, .kl-ofr-wardrobe-sec .kl-eyebrow, .kl-ofr-plans .kl-eyebrow, .kl-ofr-faq .kl-eyebrow, .kl-ofr-cta .kl-eyebrow { margin: 0 0 0.4rem; }
h2.kl-ofr-head { margin-top: 0; margin-bottom: var(--wp--custom--space--head); }
.kl-ofr-plans h2.kl-ofr-head { margin-bottom: 0.6rem; }

/* hero */
.kl-ofr-hero h1 { margin: 0.2rem 0 1rem; }
.kl-ofr-hero .kl-eyebrow { margin: 0; }
.kl-ofr-lead { font-size: var(--wp--preset--font-size--medium); line-height: 1.6; margin: 0 0 1.2rem; max-width: 36em; }
.kl-ofr-small { font-size: 0.88rem; color: var(--wp--preset--color--muted); margin-top: 1rem; }
.kl-ofr-small a { color: var(--wp--preset--color--accent); }
ul.kl-ofr-ticks { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.5rem; }
ul.kl-ofr-ticks li { position: relative; padding-left: 1.7rem; line-height: 1.5; }
ul.kl-ofr-ticks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.22em; width: 0.42rem; height: 0.8rem; border: solid var(--wp--preset--color--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Kacper's list of what the subscription gives (02.11): the name stands out, then the description */
.kl-ofr-offer strong { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.92em; }

/* content rows: text left, picture or card right (a third of the width at most) */
.wp-block-columns.kl-ofr-row { gap: clamp(1.5rem, 5vw, 4.5rem) !important; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.wp-block-columns.kl-ofr-row:last-child { margin-bottom: 0; }
.kl-ofr-row > .kl-ofr-row-text { flex: 1 1 0 !important; }
.kl-ofr-row > .kl-ofr-row-media { flex: 0 0 min(36%, 400px) !important; }
.kl-ofr-row-text h3 { margin: 0 0 0.8rem; }
.kl-ofr-row-text p { font-size: var(--wp--preset--font-size--medium); line-height: 1.65; max-width: 36em; }
.kl-ofr-row-text ul.kl-ofr-ticks { margin-top: 1.2rem; margin-bottom: 0; }
.kl-ofr-row-text .kl-more { text-align: left; }
.kl-ofr-card ul.kl-ofr-ticks { margin: 0; gap: 0.8rem; }

/* pictures */
.kl-ofr-shot { margin: 0; }
.kl-ofr-shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--wp--preset--color--line); box-shadow: 0 10px 30px rgba(20, 28, 37, 0.06); }
.kl-ofr-row-media .kl-ofr-mock, .kl-ofr-row-media .kl-ofr-shot, .kl-ofr-row-media .kl-ofr-card { max-width: 400px; margin: 0 auto; }

/* HTML mockups of the product: the same inner spacing in the chat and the report */
.kl-ofr-mock { margin: 0; padding: 0 0 1.4rem; font-size: 1rem; line-height: 1.6; color: var(--wp--preset--color--contrast); overflow: hidden; }
.kl-ofr-mock p { margin: 0; font-size: inherit; line-height: inherit; }
.kl-mock-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.5rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--wp--preset--color--line); background: #fbf8f2; font-size: 0.85rem; font-weight: 600; }
.kl-mock-tag { padding: 0.1rem 0.55rem; border-radius: 1rem; background: #f3eee5; color: var(--wp--preset--color--accent); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.kl-ofr-mock figcaption { margin: 1.1rem 1.5rem 0; font-size: 0.78rem; color: var(--wp--preset--color--muted); }
.kl-mock-items img, .kl-mock-thumbs img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #fff; }
.kl-mock-items b, .kl-mock-thumbs b { font-weight: 600; }
/* chat: bubbles as in the real chat (client beige, assistant light with a border) */
.kl-ofr-hero-media .kl-ofr-mock-chat { max-width: 560px; margin: 0 0 0 auto; }
.kl-mock-user { margin: 0 1.5rem 1.1rem 18% !important; padding: 0.85rem 1.15rem; border-radius: 16px 16px 4px 16px; background: #f3eee5; }
.kl-mock-bot { display: grid; gap: 0.9rem; margin: 0 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--wp--preset--color--line); border-radius: 16px 16px 16px 4px; background: #fdfbf8; }
ul.kl-mock-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.kl-mock-items li { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: center; padding: 0.6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--white); }
.kl-mock-items img.kl-mock-tall { height: 96px; }
.kl-mock-items span { display: grid; gap: 0.15rem; min-width: 0; font-size: 0.95rem; line-height: 1.4; }
.kl-mock-items small { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.kl-mock-items s { margin-left: 0.3rem; font-weight: 400; color: var(--wp--preset--color--muted); }
.kl-mock-shop { justify-self: start; margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
/* report */
.kl-ofr-mock-report { font-size: 0.95rem; }
.kl-ofr-mock-report > p { margin: 0 1.5rem !important; }
.kl-ofr-mock-report .kl-mock-label { margin-top: 0.8rem !important; margin-bottom: 0.3rem !important; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
ul.kl-mock-thumbs { list-style: none; margin: 1rem 1.5rem 0; padding: 0; display: flex; gap: 0.7rem; }
.kl-mock-thumbs li { display: grid; gap: 0.3rem; justify-items: center; font-size: 0.78rem; }
.kl-mock-thumbs img { border: 1px solid var(--wp--preset--color--line); }

/* plans */
.kl-ofr-sub { color: var(--wp--preset--color--muted); margin: 0 auto var(--wp--custom--space--head); }
.kl-ofr-plans .kl-plan-choice .kl-plan-cards { max-width: 52rem; gap: clamp(1rem, 3vw, 2rem); }
.kl-plan-choice .kl-plan-lead { margin: 0 0 1.2rem; font-size: 0.95rem; color: var(--wp--preset--color--muted); }
.kl-plan-choice .kl-plan-choice-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3rem; margin: 0 0 0.3rem; }
.kl-plan-choice .kl-plan-amount { font-size: clamp(2.3rem, 2rem + 1vw, 2.8rem); line-height: 1.1; }
.kl-plan-choice .kl-plan-per { font-family: var(--wp--preset--font-family--work-sans); font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--muted); }
.kl-plan-choice .kl-plan-panel { margin-top: 0; }
.kl-plan-choice .kl-plan-panel .kl-note { min-height: 2.9em; }
.kl-plan-choice .kl-plan-card .kl-plan-list { margin: 1.5rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--wp--preset--color--line); }

/* FAQ: the 1200 container like every section, the questions in a readable column */
.kl-ofr-faq > .wp-block-details, .kl-ofr-faq > .kl-more { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.kl-ofr-faq .kl-more { margin-top: 1.6rem; }

/* closing navy tile (kl-sb-banner colours of the home page) */
.kl-ofr-cta > p:not(.kl-eyebrow) { max-width: 36em; margin-left: auto !important; margin-right: auto !important; color: #d9d4cc; }

@media (max-width: 781px) {
  .kl-ofr-row { flex-direction: column; }
  .kl-ofr-row > .kl-ofr-row-text, .kl-ofr-row > .kl-ofr-row-media { flex: none !important; width: 100%; }
  /* cards take the width of the text on a phone; the photo stays smaller than the screen */
  .kl-ofr-hero-media .kl-ofr-mock-chat { max-width: none; margin: 0.5rem 0 0; }
  .kl-ofr-row-media .kl-ofr-mock, .kl-ofr-row-media .kl-ofr-card { max-width: none; }
  .kl-ofr-row-media .kl-ofr-shot { max-width: 240px; }
  .kl-ofr-mock { font-size: 0.95rem; }
  .kl-mock-bar { padding: 0.75rem 1.1rem; margin-bottom: 1.1rem; }
  .kl-mock-user { margin: 0 1rem 0.9rem 12% !important; }
  .kl-mock-bot { margin: 0 1rem; padding: 0.95rem 1rem; }
  .kl-mock-items li { grid-template-columns: 64px 1fr; gap: 0.8rem; }
  .kl-mock-items img, .kl-mock-thumbs img { width: 64px; height: 64px; }
  .kl-mock-items img.kl-mock-tall { height: 85px; }
  .kl-mock-items span { font-size: 0.9rem; }
  .kl-ofr-mock figcaption { margin: 1rem 1rem 0; }
  .kl-ofr-mock-report > p { margin: 0 1rem !important; }
  ul.kl-mock-thumbs { margin: 1rem 1rem 0; }
}

/* a page that ends with a navy section touches the navy footer: no light strip of the block gap between them */
.wp-site-blocks > main:has(.wp-block-post-content > .has-contrast-background-color:last-child) + .wp-block-template-part { margin-block-start: 0; }
/* chat card title with the note under it (Kacper 02.11) */
.kl-mock-title { display: grid; gap: 0.1rem; }
.kl-mock-title small { font-size: 0.74rem; font-weight: 400; color: var(--wp--preset--color--muted); }

/* ---------- [kl_sb_intro] (klaudia-core sb-intro.php): the Stylowa Baza opening of the navy tile on the home page
   (Kacper 03.11.2026). Text left, chat card right (about half); on a phone the card under the text. */
.kl-sbi { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.kl-sbi .kl-eyebrow { margin: 0; }
.kl-sbi .kl-sbi-title { margin: 0.2rem 0 1rem; }
.kl-sbi .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* dark tone: readable on navy, the chat card stays light */
.kl-sbi-dark .kl-eyebrow { color: #e8c9a0; }
.kl-sbi-dark .kl-sbi-title { color: var(--wp--preset--color--white); }
.kl-sbi-dark .kl-ofr-lead { color: #f1ede6; }
.kl-sbi-dark .kl-ofr-offer li { color: #d9d4cc; }
.kl-sbi-dark .kl-ofr-offer strong { color: var(--wp--preset--color--white); }
.kl-sbi-dark ul.kl-ofr-ticks li::before { border-color: #e8c9a0; }
.kl-sbi-dark .kl-ofr-small { color: #b9b3aa; }
.kl-sbi-dark .kl-ofr-small a { color: #e8c9a0; }
.kl-sbi-dark .kl-ofr-mock-chat { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); }
.kl-sbi-dark .kl-ofr-mock-chat a.kl-mock-shop { color: var(--wp--preset--color--accent); }
@media (max-width: 781px) {
  .kl-sbi { grid-template-columns: minmax(0, 1fr); }
  /* the home tile centres its text on phones elsewhere; this block stays left-aligned like /stylowa-baza/ */
  .kl-sb-banner .kl-sbi-text { text-align: left; }
}
/* the shortcode prints button markup without the button block, so WordPress does not add its outline style here */
.kl-sbi .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid currentColor; color: var(--wp--preset--color--contrast); }
.kl-sbi-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white); }
.kl-sbi .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--white); }
.kl-sbi-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--contrast) !important; }
/* the five points in two groups with small titles (Kacper 03.11): Klaudia's first, then the AI; a thin rule, no boxes */
.kl-sbi-groups { display: grid; gap: 1.1rem; margin: 0 0 1.6rem; }
.kl-sbi-group + .kl-sbi-group { padding-top: 1.1rem; border-top: 1px solid var(--wp--preset--color--line); }
.kl-sbi-group-title { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.kl-sbi-groups ul.kl-ofr-ticks { margin: 0; }
.kl-sbi-dark .kl-sbi-group-title { color: #e8c9a0; }
.kl-sbi-dark .kl-sbi-group + .kl-sbi-group { border-top-color: rgba(255, 255, 255, 0.16); }
/* the closing sentence under both groups, before the buttons (Kacper 03.11) */
.kl-sbi-groups { margin-bottom: 1.1rem; }
.kl-sbi-summary { margin: 0 0 1.6rem; font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: 1.6; color: var(--wp--preset--color--accent); }
.kl-sbi-dark .kl-sbi-summary { color: #e8c9a0; }

/* /stylowa-baza/ "Co jeszcze dostajesz" in the two groups of the hero list (Kacper 03.11): a small group title with a
   thin rule, rows text left / card or picture right; rows without a picture keep the text column width */
.kl-ofr-features > .kl-ofr-group-title { margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); padding-bottom: 0.7rem; border-bottom: 1px solid var(--wp--preset--color--line); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.kl-ofr-features > .kl-ofr-group-title:not(:first-of-type) { margin-top: clamp(1rem, 2vw, 1.5rem); }
.kl-ofr-features > .wp-block-columns.kl-ofr-row:last-child, .kl-ofr-features > .kl-ofr-row-solo:last-child { margin-bottom: 0; }
.wp-block-group.kl-ofr-row-solo { margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kl-ofr-row-solo h3 { margin: 0 0 0.8rem; }
.kl-ofr-row-solo p { font-size: var(--wp--preset--font-size--medium); line-height: 1.65; }
/* rows without a picture: the same text column as the other rows, on the left (the constrained layout centres children) */
.kl-ofr-row-solo > h3, .kl-ofr-row-solo > p { max-width: 40em; }

/* /stylowa-baza/ page head [kl_sb_page_head] (Kacper 03.11): the full opening with the five points is only on the home
   page; here a plain centred head, then the details in the sections */
.kl-sb-head { max-width: 40rem; margin: 0 auto; text-align: center; }
.kl-sb-head .kl-eyebrow { margin: 0; }
.kl-sb-head .kl-sbi-title { margin: 0.2rem 0 1rem; }
.kl-sb-head .kl-ofr-lead { margin: 0 auto 1.6rem; }
.kl-sb-head .wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.kl-sb-head .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid currentColor; color: var(--wp--preset--color--contrast); }
.kl-sb-head .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--white); }

/* /stylowa-baza/ one grid for every row (Kacper 03.11): the illustration column has the same width everywhere
   (capsule picture, product strip, Moja szafa card), sits on the right and starts level with the h3; rows
   without a picture keep the text column width; on a phone the illustration goes under the text at full width */
.kl-ofr-features, .kl-ofr-wardrobe-sec { --kl-media-col: 40%; --kl-row-gap: clamp(1.5rem, 5vw, 4.5rem); }
.wp-block-columns.kl-ofr-row { align-items: flex-start !important; gap: var(--kl-row-gap) !important; }
.kl-ofr-row > .kl-ofr-row-text, .kl-ofr-row > .kl-ofr-row-media { align-self: flex-start !important; }
.kl-ofr-row > .kl-ofr-row-media { flex: 0 0 var(--kl-media-col) !important; }
.kl-ofr-row-media .kl-ofr-mock, .kl-ofr-row-media .kl-ofr-shot, .kl-ofr-row-media .kl-ofr-card { width: 100%; max-width: none; margin: 0; }
.kl-ofr-row-solo > h3, .kl-ofr-row-solo > p { max-width: calc(100% - var(--kl-media-col) - var(--kl-row-gap)); }
@media (max-width: 781px) {
  .kl-ofr-row > .kl-ofr-row-media { flex: none !important; width: 100%; }
  .kl-ofr-row-solo > h3, .kl-ofr-row-solo > p { max-width: none; }
  .kl-ofr-row-media .kl-ofr-shot { max-width: none; }
  .kl-ofr-row-media { margin-top: 0.5rem; }
}
/* the tag never breaks next to the two-line chat title */
.kl-mock-tag { flex-shrink: 0; white-space: nowrap; margin-left: 0.75rem; }

/* /stylowa-baza/ cards (Kacper 03.11, second pass): every card has the radius, border, shadow and padding of .kl-ofr-card */
.kl-sb-strip, .kl-sb-convo, .kl-ofr-pair-card { box-sizing: border-box; padding: var(--wp--custom--space--card) !important; }
/* products: three thumbnails with brand and price */
.kl-sb-strip { margin: 0; box-sizing: border-box; }
.kl-sb-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kl-sb-strip li { display: grid; gap: 0.15rem; font-size: 0.88rem; line-height: 1.35; }
.kl-sb-strip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 25%; border-radius: 10px; border: 1px solid var(--wp--preset--color--line); margin-bottom: 0.45rem; }
.kl-sb-strip small { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.kl-sb-strip b { font-weight: 600; }
/* chat: three cards of one width and height in a row, the bubbles of the home chat card */
.kl-sb-convos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.kl-sb-convo { display: flex; flex-direction: column; margin: 0; }
.kl-sb-convo .kl-mock-user { margin: 0 0 1rem 14% !important; }
.kl-sb-convo .kl-mock-bot { flex: 1; align-content: start; margin: 0; }
.kl-ofr-row-solo > p.kl-sb-convos-note { max-width: none; margin-top: 1rem; font-size: 0.88rem; color: var(--wp--preset--color--muted); }
/* report and alerts: two cards of one height side by side, short text and a small illustration at the bottom */
.wp-block-columns.kl-ofr-pair { gap: clamp(1rem, 2vw, 1.5rem) !important; margin: 0; align-items: stretch !important; }
.kl-ofr-pair > .kl-ofr-pair-col { display: flex; }
.kl-ofr-pair-card { display: flex; flex-direction: column; flex: 1; margin: 0; }
.kl-ofr-pair-card h3 { margin: 0 0 0.8rem; }
.kl-ofr-pair-card > p { font-size: var(--wp--preset--font-size--medium); line-height: 1.65; margin: 0 0 0.8rem; }
.kl-ofr-pair-card > .kl-more { text-align: left; }
.kl-ofr-pair-card > figure.kl-ofr-mock { margin-top: auto; box-shadow: none; border-radius: 14px; font-size: 0.9rem; }
.kl-ofr-pair-card .kl-mock-bar { margin-bottom: 1rem; }
.kl-ofr-pair-card .kl-ofr-mock-report > p, .kl-ofr-pair-card ul.kl-mock-thumbs { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.kl-ofr-pair-card .kl-mock-thumbs img { width: 60px; height: 60px; }
.kl-sb-alert { padding-bottom: 1.25rem; }
.kl-sb-alert ul.kl-mock-items { margin: 0 1.25rem; }
.kl-sb-alert .kl-mock-items img { width: 60px; height: 80px; }
.kl-sb-alert .kl-mock-items li { grid-template-columns: 60px 1fr; }
.kl-sb-alert-msg { font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.kl-sb-alert s { margin-right: 0.35rem; font-weight: 400; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
  .kl-sb-convos { grid-template-columns: minmax(0, 1fr); }
  .kl-ofr-pair > .kl-ofr-pair-col + .kl-ofr-pair-col { margin-top: 0; }
  .kl-ofr-pair-card .kl-mock-thumbs img { width: 56px; height: 56px; }
  /* a phone has no room for the card padding plus the bubble padding: one smaller step for both */
  .kl-sb-strip, .kl-sb-convo, .kl-ofr-pair-card { padding: 1.1rem !important; }
  .kl-sb-convo .kl-mock-user { margin-left: 10% !important; }
  .kl-sb-convo .kl-mock-bot { padding: 0.9rem; }
  .kl-sb-convo .kl-mock-items li, .kl-sb-alert .kl-mock-items li { gap: 0.7rem; padding: 0.5rem; }
  .kl-ofr-pair-card .kl-ofr-mock-report > p, .kl-ofr-pair-card ul.kl-mock-thumbs, .kl-sb-alert ul.kl-mock-items { margin-left: 0.9rem !important; margin-right: 0.9rem !important; }
  .kl-ofr-pair-card .kl-mock-bar { padding: 0.7rem 0.9rem; }
  .kl-sb-strip ul { gap: 0.7rem; }
}

/* home tile: "Zobacz więcej" to /stylowa-baza/ under the price line */
.kl-sbi .kl-sbi-more { margin: 0.9rem 0 0; text-align: left; }
.kl-sbi-dark .kl-sbi-more a { color: #e8c9a0; }

/* Kontakt (Kacper 04.11): smaller type so "Masz pytania? Napisz do mnie!" stays on one line on desktop and the form
   column ends no lower than the photo */
.kl-contact h1 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.35rem); margin-block: 0.75rem 1rem; }
.kl-contact > p:not(.kl-eyebrow) { margin-block: 0 0.75rem; }
.kl-contact .kl-card { margin-top: 1rem; padding: 1.5rem; }
.kl-contact .wpcf7 .wpcf7-acceptance { margin: 0.75rem 0; }
.kl-nowrap { white-space: nowrap; }
/* Kontakt on tablets in landscape (Kacper 04.11): the heading on one line and the photo as tall as the form column, so
   the form never ends below it; from 1280 px the photo is already taller, under 782 px the columns stack */
@media (min-width: 782px) and (max-width: 1279px) {
  .kl-contact h1 { font-size: 1.85rem; }
  .wp-block-columns:has(> .kl-contact) > .wp-block-column:first-child { display: flex; flex-direction: column; }
  .wp-block-columns:has(> .kl-contact) > .wp-block-column:first-child > .wp-block-image { flex: 1; margin: 0; position: relative; }
  .wp-block-columns:has(> .kl-contact) > .wp-block-column:first-child img { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: 50% 20%; }
}

/* Blog posts: images in the post content centred (Klaudia 07.11.2026). Classic markup is <p><a><img class="alignnone|aligncenter
   wp-image-N">, a block image is <figure class="wp-block-image">; floated alignleft/alignright stay as they are. The text is untouched. */
body.single-post .wp-block-post-content img[class*="wp-image-"]:not(.alignleft):not(.alignright),
body.single-post .wp-block-post-content figure:not(.alignleft):not(.alignright) > img,
body.single-post .wp-block-post-content figure:not(.alignleft):not(.alignright) > a > img { display: block; margin-inline: auto; }
body.single-post .wp-block-post-content figure.wp-block-image:not(.alignleft):not(.alignright),
body.single-post .wp-block-post-content .wp-caption:not(.alignleft):not(.alignright) { margin-inline: auto; max-width: 100%; }

/* "Zapisy ruszają wkrótce" instead of the plan cards while signups are closed (klaudia-core signups-soon.php, 07.11.2026) */
div.kl-signups-soon, .wp-block-group.alignfull.has-global-padding > div.kl-signups-soon { max-width: 40rem; margin: var(--wp--preset--spacing--40) auto 0; padding: 2rem 1.5rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); text-align: center; }
.kl-signups-soon .kl-signups-soon-title { margin: 0 0 0.6rem; font-size: 1.6rem; }
.kl-signups-soon .kl-signups-soon-text { margin: 0 auto 1.2rem; max-width: 32rem; line-height: 1.6; }
.kl-signups-soon .wp-block-buttons { justify-content: center; }
div.kl-signups-soon-inline { max-width: none; margin: 1.2rem 0 0.8rem; padding: 0; border: 0; background: none; text-align: inherit; }
.kl-signups-soon-inline .kl-signups-soon-title { font-size: 1.25rem; color: inherit; }
.kl-signups-soon-inline .kl-signups-soon-text { margin-left: 0; }
.kl-signups-soon-inline .wp-block-buttons { justify-content: flex-start; }