/* TheCozyTalk · compat
   New pages made in the block editor and markup that third-party plugins print (forms, shops, notices, cookie
   bars, plain shortcode output) in the site's look. Loaded after cozytalk-blocks.css and before cozytalk-evening.css.

   Rules of the house for this file:
   - Low specificity: almost everything sits inside :where(), so a plugin's own stylesheet, any colour or spacing set
     per block in the editor, and our own components (.ct-*, .ctc-*, .ctr-*, …) still win.
   - Our own components are never targeted: anything carrying a class that starts with "ct" is skipped, and the
     containers already styled in cozytalk-blocks.css are left out the same way that file leaves them out.
   - Colours only through the theme variables (--ct-*), so the evening palette (html.ct-night) and the style
     variations follow on their own; the few places that need more have an html.ct-night rule at the end. */

/* ── Reading rhythm on plain pages (page.html) ───────────────────────────────── */
/* Headings written straight into a page (page.html or page-landing.html) get room above them, and stay close to the text they introduce.
   Only direct children of the page content: the site's own patterns wrap everything in sections. */
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h2, h3, h4, h5, h6):not(:first-child) { margin-block-start: clamp(40px, 5vw, 64px); }
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h3, h4, h5, h6):not(:first-child) { margin-block-start: clamp(32px, 4vw, 44px); }
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h2, h3, h4, h5, h6) + * { margin-block-start: 14px; }
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h1):not(:first-child) { margin-block-start: clamp(48px, 6vw, 80px); }
/* Lists written straight into the content (not the ones inside the site's own sections): nested ones breathe a little; long words and links never push the page sideways */
:where(.wp-block-post-content) > :where(ul, ol) :where(li > ul, li > ol) { margin-block: 6px; }
:where(.wp-block-post-content) > :where(ul, ol) :where(li + li) { margin-top: 4px; }
:where(.wp-block-post-content) :where(h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, cite) { overflow-wrap: break-word; }

/* ── Wide and full alignment on pages ─────────────────────────────────────── */
/* In page.html the post content is a child of the constrained <main>, so WordPress caps the whole content at 760px
   and "wide" and "full" blocks look exactly like normal ones. The content itself spans <main> again (its children are
   still held at 760px by its own constrained layout), "wide" reaches the wide size and "full" the screen edges.
   Only pages (page.html and page-landing.html): articles and talks keep their own reading layout. */
:root .ct-page > .wp-block-post-content { max-width: none; }
:root .ct-main:not(.ct-article):not(.ct-talk):not(.ct-archive):not(.ct-404) > .wp-block-post-content > .alignfull {
  max-width: none; width: auto; margin-left: calc(var(--wp--style--root--padding-left, var(--ct-gutter)) * -1); margin-right: calc(var(--wp--style--root--padding-right, var(--ct-gutter)) * -1); }
/* page-landing.html lets its own sections run 1248px wide; plain text written straight into such a page keeps the
   reading width instead of 1150px long lines (the site's patterns wrap everything in sections, so they are unaffected) */
:root .ct-main:not(.ct-page):not(.ct-article):not(.ct-talk):not(.ct-archive):not(.ct-404) > .wp-block-post-content > :where(p, ul, ol, dl, h1, h2, h3, h4, h5, h6, pre, form, .wp-block-quote, .wp-block-table, .wp-block-details, .wp-block-file, .wp-block-audio, .wp-block-video, .wp-block-embed, .wp-block-search, .wp-block-buttons, .wp-block-footnotes, .wp-block-latest-posts, .wp-block-categories-list, .wp-block-archives-list, .wp-block-pullquote, .wp-block-image, .wp-block-gallery, .wp-block-media-text, .wp-block-query, .wp-block-calendar, .wp-block-tag-cloud, .wp-block-social-links):not(.alignwide):not(.alignfull) {
  max-width: var(--wp--style--global--content-size, 760px); }
:root .ct-main:not(.ct-page):not(.ct-article):not(.ct-talk):not(.ct-archive):not(.ct-404) > .wp-block-post-content { --wp--style--global--content-size: 760px; }

/* ── Media that brings a fixed width (iframes, video, tables) never overflows ── */
/* WordPress caps every child of a constrained layout at the content width only, so an <iframe width="800"> is
   800px wide on a phone; cap it at the column as well. */
:root :where(.is-layout-constrained) > :is(iframe, video, embed, object, img, table) { max-width: min(100%, var(--wp--style--global--content-size, 760px)); }
:where(.wp-block-post-content, .entry-content, .ct-prose) :where(iframe, embed, object, video, audio) { max-width: 100%; }
/* Classic-editor content (old posts, imported sites): captions carry an inline width ([caption width="1200"]), full-size
   images their own width, and plain tables no wrapper. None of them may push the page sideways on a phone. */
:where(.wp-block-post-content, .entry-content, .ct-prose) img { max-width: 100%; height: auto; }
:where(.wp-block-post-content, .entry-content, .ct-prose) :is(.wp-caption, .wp-caption-dt, .wp-caption-text, .gallery-item) { max-width: 100%; box-sizing: border-box; }
:where(.wp-block-post-content, .entry-content, .ct-prose) :where(.wp-caption) img { display: block; }
:where(.wp-block-post-content, .entry-content, .ct-prose) :where(table):not(.wp-block-table table) { display: block; max-width: 100%; overflow-x: auto; }
/* an <audio> keeps the browser's own ~300px minimum on narrow phones unless it is told it may be narrower */
:where(.wp-block-post-content, .entry-content, .ct-prose, .wp-block-audio) audio { min-width: 0; max-width: 100%; }
.wp-block-audio audio { width: 100%; min-width: 0; }   /* WordPress gives it min-width: 300px, wider than a 320px phone's column */
:where(.wp-block-post-content) :where(iframe:not([class]), embed, object) { border: 0; border-radius: 22px; }

/* Embeds: responsive wrappers keep their ratio; a link WordPress could not turn into an embed shows as a small card
   instead of an empty 16:9 box with the address at the bottom */
:where(.wp-block-embed) iframe { display: block; max-width: 100%; }
:where(.wp-block-embed__wrapper):not(:has(iframe, video, object, embed, blockquote, img, div, a)) {
  padding: 18px 22px; border-radius: 22px; background: var(--ct-cream); border: 1px dashed color-mix(in srgb, var(--ct-line) 55%, var(--ct-muted));
  color: var(--ct-muted); font-size: 15px; overflow-wrap: anywhere; box-shadow: none !important; }
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:not(:has(iframe, video, object, embed, blockquote, img, div, a))::before { display: none; }
/* Classic oEmbeds (a <blockquote> that a script turns into a card) and Instagram/Twitter fallbacks */
:where(.wp-block-embed) blockquote:where(.twitter-tweet, .instagram-media, .tiktok-embed, .wp-embedded-content) { max-width: 100% !important; margin-inline: auto; }

/* ── Tables everywhere: never wider than a phone ──────────────────────────── */
/* Table blocks already scroll sideways (cozytalk-blocks.css); their headings stay on one line there.
   Other tables (shortcodes, plugins) keep their table layout and let long words break instead. */
@media (max-width: 600px) {
  :where(.wp-block-table) th { white-space: nowrap; }
  :where(.wp-block-post-content, .entry-content) table:where(:not(.wp-block-table table):not([class^="ct"]):not([class*=" ct"])) :where(td, th) { overflow-wrap: anywhere; }
  :where(.wp-block-post-content, .entry-content) table :where(input, select, textarea) { max-width: 100%; }
}
:where(.wp-block-post-content, .entry-content) :where(table caption) { caption-side: top; padding: 0 12px 10px; font-size: 14px; color: var(--ct-muted); text-align: center; }

/* ── Core blocks the theme leaves at WordPress defaults ─────────────────────── */
/* A group or column with a background colour gets inner room, as a card (unless padding was set in the editor) */
:where(.wp-block-post-content) .wp-block-group.has-background:where(:not([style*="padding"]):not([class^="ct"]):not([class*=" ct"]):not([class*="is-style-"])),
:where(.wp-block-post-content) .wp-block-column.has-background:where(:not([style*="padding"]):not([class^="ct"]):not([class*=" ct"])) { padding: clamp(22px, 3.4vw, 40px); }
:where(.wp-block-post-content) p.has-background:where(:not([style*="padding"])) { padding: 18px 24px; border-radius: 18px; }
/* Links on a cover (colour or photo) follow the cover's own text colour, never the ember on an ember cover */
.wp-block-cover__inner-container a:where(:not(.wp-element-button):not(.wp-block-button__link)) { color: inherit; }
/* Media & text: the picture fills its half and keeps the card's corners on phones */
:where(.wp-block-media-text) .wp-block-media-text__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.wp-block-media-text.alignfull) { border-inline: 0; }
/* Audio with a caption: a soft card instead of a stretched pill */
:where(.wp-block-audio):has(figcaption) { border-radius: 26px; padding: 14px 14px 4px; }
:where(.wp-block-audio) figcaption { margin-bottom: 8px; }
/* Buttons block: on phones a long label wraps inside the pill instead of overflowing */
:where(.wp-block-button__link) { overflow-wrap: break-word; }
/* Separators: the "wide" style keeps the warm line colour; dots get their size back in narrow columns */
:where(.wp-block-separator.is-style-wide) { width: 100%; max-width: none; }
/* Wide and full images and galleries: full ones lose the card corners at the screen edge */
.wp-block-image.alignfull img, .wp-block-gallery.alignfull .wp-block-image img, .wp-block-cover.alignfull, .wp-block-media-text.alignfull { border-radius: 0; }
:where(.wp-block-image) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.wp-block-image.aligncenter, .wp-block-image .aligncenter) { text-align: center; }
/* Latest posts as a grid: a real grid with even cards, and the columns the editor asked for on wide screens */
:where(.wp-block-latest-posts).is-grid.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 20px; padding: 0; }
:where(.wp-block-latest-posts).is-grid.is-grid > li { width: auto; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 782px) {
  :where(.wp-block-latest-posts).is-grid.is-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.wp-block-latest-posts).is-grid.is-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(.wp-block-latest-posts).is-grid.is-grid.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(.wp-block-latest-posts).is-grid.is-grid:is(.columns-5, .columns-6) { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
}
:where(.wp-block-latest-posts__featured-image) { margin: 0 0 6px; }
:where(.wp-block-latest-posts__featured-image) img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
:where(.wp-block-latest-posts__post-excerpt) { margin: 6px 0 0; font-size: 15px; color: color-mix(in srgb, var(--ct-ink) 72%, var(--ct-muted)); }
/* A query loop added to a page by hand (the site's own grids carry a ct- class and are left alone):
   titles at card size, in ink, one soft line between posts */
:where(.wp-block-post-content) .wp-block-query:where(:not([class^="ct"]):not([class*=" ct"])) .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 6px; }
:where(.wp-block-post-content) .wp-block-query:where(:not([class^="ct"]):not([class*=" ct"])) .wp-block-post-title a { color: var(--ct-ink); text-decoration: none; background-image: none; }
:where(.wp-block-post-content) .wp-block-query:where(:not([class^="ct"]):not([class*=" ct"])) .wp-block-post-title a:hover { color: var(--ct-ember-text); }
:where(.wp-block-post-content .wp-block-query) .wp-block-post-template:where(:not(.is-layout-grid)) > li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ct-line); }
/* (the theme's own talk and article grids draw their own cards: no second card around them) */
:where(.wp-block-post-content .wp-block-query:not(.ct-talk-grid):not(.ct-post-grid)) .wp-block-post-template.is-layout-grid > li { padding: 22px; border-radius: 24px; background: var(--ct-paper, #fff); border: 1px solid var(--ct-line); }
:where(.wp-block-post-content .wp-block-query) :where(.wp-block-post-excerpt__excerpt) { margin: 6px 0 0; }
/* Archives and categories as dropdowns, the calendar on phones */
:where(.wp-block-archives-dropdown, .wp-block-categories-dropdown) label { display: block; margin-bottom: 8px; font-weight: 600; }
:where(.wp-block-calendar) { overflow-x: auto; }
:where(.wp-block-calendar) caption { padding-bottom: 8px; font-weight: 600; color: var(--ct-ink); }
:where(.wp-block-calendar) .wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 10px; font-size: 15px; }
:where(.wp-block-calendar) #today, :where(.wp-block-calendar) td.is-today { background: color-mix(in srgb, var(--ct-amber) 30%, transparent); border-radius: 10px; font-weight: 600; }
/* Navigation block inside a page: pills like the site menu */
:where(.wp-block-post-content) :where(.wp-block-navigation) .wp-block-navigation-item__content { color: var(--ct-ink); }
:where(.wp-block-post-content) :where(.wp-block-navigation__container) { gap: 6px 22px; }
/* Footnotes: the numbers in the text are a little easier to hit */
:where(sup.fn) a { padding: 0 2px; font-weight: 600; }
:where(.wp-block-footnotes) li { margin-bottom: 6px; }
/* Classic galleries and captions from older content */
:where(.wp-caption) .wp-caption-text { margin-top: 8px; }
:where(.gallery-caption) { font-size: 13.5px; color: var(--ct-muted); }

/* ── Forms from plugins (Contact Form 7, WPForms, Gravity Forms, Formidable, Ninja Forms, Mailchimp, shops…) ── */
/* Fields fill the form column, labels sit above them, choices line up, focus glows amber like the site's focus ring */
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form, .woocommerce form)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]):not(.qty), select, textarea) {
  width: 100%; max-width: 100%; min-height: 48px; box-sizing: border-box; }
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form, .woocommerce form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: color-mix(in srgb, var(--ct-amber) 70%, var(--ct-ember)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-amber) 40%, transparent); outline: none; }
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form) :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid var(--ct-amber); outline-offset: 2px; }
:where(.wpcf7-form) > p, :where(.wpcf7-form) > div:not(.wpcf7-response-output):not([hidden]) { margin: 0 0 20px; }
:where(.wpcf7-form) > p > label, :where(.wpforms-field-label, .gfield_label, .frm_primary_label, .nf-field-label label, .forminator-label) {
  display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ct-ink); }
:where(.wpcf7-form) > p > label > .wpcf7-form-control-wrap { display: block; margin-top: 8px; font-weight: 400; }
:where(.wpforms-field-label-inline, .gchoice label, .wpcf7-list-item-label) { font-weight: 400; font-size: 16px; }
:where(.wpforms-field, .gfield, .frm_form_field, .nf-field-container) { margin: 0 0 22px; padding: 0; list-style: none; border: 0; }
:where(.gform_fields) { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
:where(.gfield) > legend { padding: 0; }
:where(.wpforms-required-label, .gfield_required, .frm_required) { color: var(--ct-ember-text); font-weight: 600; }
:where(.wpforms-field-description, .gfield_description:not(.validation_message), .frm_description, .nf-field-description) { margin-top: 6px; font-size: 14px; color: var(--ct-muted); }
/* Checkbox and radio lists */
:where(.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance) { display: flex; flex-wrap: wrap; gap: 8px 22px; }
:where(.wpcf7-list-item) { margin: 0; }
:where(.wpcf7-list-item, .gchoice, .frm_checkbox, .frm_radio, .wpforms-field li) > label,
:where(.wpforms-field ul, .gfield_checkbox, .gfield_radio) > :where(li, .gchoice),
:where(.wp-block-post-content, .entry-content) label:where(:has(> input[type="checkbox"], > input[type="radio"])) {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
:where(.wpforms-field ul, .gfield_checkbox, .gfield_radio, .frm_opt_container) { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
:where(.wpforms-field ul) > li { margin: 0; }
:where(.wpforms-field ul) > li::marker { content: none; }
/* File fields */
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .wp-block-post-content) input[type="file"] { max-width: 100%; font-size: 15px; color: var(--ct-muted); }

/* Validation: the message under the field, the field itself, all in the site's warm red */
:is(.wpcf7-not-valid-tip, em.wpforms-error, label.wpforms-error, .gfield_validation_message, .gfield_description.validation_message, .frm_error, .nf-error-msg, .forminator-error-message, .woocommerce-invalid .description) {
  display: block; margin-top: 6px; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.45; color: var(--ct-ember-text); }
:is(input, select, textarea):is(.wpcf7-not-valid, .wpforms-error, .frm_invalid, [aria-invalid="true"]),
:where(.gfield_error, .frm_blank_field, .nf-error, .woocommerce-invalid) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--ct-ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-ember) 14%, transparent); }

/* Submit and plugin buttons: the site's sage pill. Plain <button>s with their own class (icons, carousels, close
   buttons) are left as they are; only submits and the classes plugins use for real buttons are styled. */
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form)
  :is(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], form button:not([type]), .button, .wpforms-submit, .gform_button, .frm_button_submit, .nf-element[type="button"], .add_to_cart_button, .checkout-button):where(:not([class^="ct"]):not([class*=" ct"]):not(.wp-block-search__button):not(.wp-element-button):not(.wp-block-button__link):not(.ff-btn):not(:is(.ct-sub, .ct-search, .ct-letter, .ct-news, .ctc, .fluentform, .wp-block-search, .ct-filters, .ctr-bar, .ctr-full, .ct-comments) *)) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 48px; width: auto; max-width: 100%; padding: 0 26px;
  border: 0; border-radius: 999px; background: var(--ct-sage); color: #fff; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center;
  text-decoration: none; background-image: none; text-shadow: none; box-shadow: none; cursor: pointer; transition: background-color .2s, box-shadow .25s, transform .15s; }
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form)
  :is(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], form button:not([type]), .button, .wpforms-submit, .gform_button, .frm_button_submit, .add_to_cart_button, .checkout-button):where(:not([class^="ct"]):not([class*=" ct"]):not(.wp-block-search__button):not(.wp-element-button):not(.wp-block-button__link):not(.ff-btn):not(:is(.ct-sub, .ct-search, .ct-letter, .ct-news, .ctc, .fluentform, .wp-block-search, .ct-filters, .ctr-bar, .ctr-full, .ct-comments) *)):is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--ct-sage) 84%, #000); color: #fff; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ct-sage) 80%, transparent); }
/* Secondary actions (reset, "update cart") as a soft outline next to the main one */
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms) :is(input[type="reset"], button[name="update_cart"], .button.wc-backward):where(:not([class^="ct"]):not([class*=" ct"])) {
  background: transparent; color: var(--ct-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-line) 60%, var(--ct-muted)); }
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms) :is(input[type="reset"], button[name="update_cart"], .button.wc-backward):where(:not([class^="ct"]):not([class*=" ct"])):hover {
  background: var(--ct-cream); color: var(--ct-ink); }
:is(input[type="submit"], button, .button):is(:disabled, .disabled, [aria-disabled="true"]):where(:not([class^="ct"]):not([class*=" ct"])) { opacity: .55; cursor: not-allowed; transform: none; }
:where(.wpcf7-spinner) { vertical-align: middle; margin-left: 12px; }
:where(.wpforms-submit-container, .gform_footer, .gform_page_footer, .frm_submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; padding: 0; }

/* Messages after sending: soft notes with a coloured edge, like the theme's note style */
:where(.wpcf7-response-output, .wpforms-confirmation-container-full, .wpforms-confirmation-container, .gform_confirmation_message, .gform_validation_errors,
  .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice, .frm_message, .frm_error_style, .nf-response-msg, .mc4wp-alert, .forminator-response-message,
  .notice:is(.notice-success, .notice-error, .notice-warning, .notice-info), .alert:is(.alert-success, .alert-danger, .alert-warning, .alert-info)) {
  --ct-note: var(--ct-sage);
  display: block; box-sizing: border-box; margin: 20px 0; padding: 16px 22px; border: 1px solid var(--ct-line); border-left: 4px solid var(--ct-note);
  border-radius: 6px 20px 20px 6px; background: color-mix(in srgb, var(--ct-note) 9%, var(--ct-cream)); color: var(--ct-ink); font-size: 16px; line-height: 1.55; list-style: none; }
:where(.wpcf7-response-output):empty, :where(.wpcf7 form.init) .wpcf7-response-output { display: none; }
/* Errors and warnings in ember, information in amber */
:where(.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output, .gform_validation_errors, .woocommerce-error, .frm_error_style,
  .notice-error, .alert-danger, .mc4wp-error, .forminator-error) { --ct-note: var(--ct-ember); }
:where(.woocommerce-info, .notice-info, .notice-warning, .alert-warning, .alert-info, .mc4wp-notice) { --ct-note: var(--ct-amber); }
:where(.gform_validation_errors) :is(h2, h3, .gform_submission_error) { margin: 0; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; color: inherit; }
:where(.woocommerce-error, .woocommerce-message, .woocommerce-info) { padding-left: 22px; }
:where(ul.woocommerce-error) > li { margin: 0; padding: 0; }
:where(ul.woocommerce-error) > li::marker { content: none; }
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { float: right; min-height: 38px; margin: -6px 0 -6px 16px; padding: 0 18px; font-size: 14px; }
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wpcf7-response-output, .gform_confirmation_message, .wpforms-confirmation-container-full, .frm_message) a:where(:not(.button)) {
  color: var(--ct-ember-text); font-weight: 500; }
:where(.wpforms-confirmation-container-full, .gform_confirmation_message, .frm_message) p { margin: 0; }

/* ── Shops (WooCommerce and look-alikes) without their own stylesheet ──────── */
:where(ul.products) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(150px, 30vw, 220px), 100%), 1fr)); gap: clamp(12px, 2vw, 20px); margin: 24px 0; padding: 0; list-style: none; }
:where(ul.products) > li { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 14px 18px; box-sizing: border-box;
  border-radius: 26px; background: var(--ct-paper, #fff); border: 1px solid var(--ct-line); }
:where(ul.products) > li::marker { content: none; }
:where(ul.products) > li > a:first-child { display: flex; flex-direction: column; gap: 8px; color: var(--ct-ink); text-decoration: none; background-image: none; }
:where(ul.products) img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
:where(ul.products) :is(.woocommerce-loop-product__title, h2, h3) { margin: 6px 4px 0; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ct-ink); }
:where(ul.products, .product, .summary) :where(.price) { display: block; margin: 0 4px; color: var(--ct-ember-text); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
:where(.price) del { color: var(--ct-muted); font-weight: 400; opacity: 1; margin-right: 6px; }
:where(.price) ins { background: none; padding: 0; text-decoration: none; }
:where(ul.products) > li > .button { margin: auto 4px 0; align-self: flex-start; }
@media (max-width: 480px) { :where(ul.products) > li { padding: 10px 10px 14px; border-radius: 22px; } :where(ul.products) > li > .button { min-height: 42px; padding: 0 16px; font-size: 14px; } :where(ul.products) :is(.woocommerce-loop-product__title, h2, h3) { font-size: 16px; } }
:where(.onsale) { position: absolute; top: 24px; left: 24px; z-index: 1; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--ct-amber); color: #241C17; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
:where(.quantity) .qty { width: 84px; min-height: 44px; text-align: center; }
:where(.woocommerce) :where(table.shop_table) { width: 100%; }
:where(.woocommerce-cart-form, .woocommerce form) > :is(.button, button) { margin: 14px 10px 0 0; }
:where(.star-rating) { color: var(--ct-amber); }
:where(.woocommerce-breadcrumb) { font-size: 14px; color: var(--ct-muted); }

/* ── Plain shortcode output: forms laid out in a row wrap nicely, lists of terms read like the site ── */
:where(.wp-block-post-content, .entry-content) form:where(:not([class^="ct"]):not([class*=" ct"]):not(.wp-block-search):not(.wpcf7-form):not(.wpforms-form):not(.frm-fluent-form)):where(:not(:has(p, div, fieldset, li, br))) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
:where(.wp-block-post-content, .entry-content) dl:where(:not([class^="ct"]):not([class*=" ct"])) { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); padding: 18px 22px; border-radius: 20px; background: var(--ct-cream); border: 1px solid var(--ct-line); }
:where(.wp-block-post-content, .entry-content) dl:where(:not([class^="ct"]):not([class*=" ct"])) > dd { margin: 0; }
@media (max-width: 520px) { :where(.wp-block-post-content, .entry-content) dl:where(:not([class^="ct"]):not([class*=" ct"])) { grid-template-columns: 1fr; } :where(.wp-block-post-content, .entry-content) dl > dd { margin-bottom: 10px; } }

/* ── Cookie and consent bars ────────────────────────────────────────────── */
/* The plugin keeps its own position; the bar takes the site's dark strip look, the buttons its pills */
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, #catapult-cookie-bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) {
  box-sizing: border-box; padding: 14px var(--ct-gutter, 20px); background: #241C17; color: #F4EBDF; font-family: inherit; font-size: 15px; line-height: 1.5;
  box-shadow: 0 -18px 40px -26px rgba(36, 28, 23, .5); }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, #catapult-cookie-bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) :where(.cookie-notice-container, .cc-window) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; padding: 0; background: none; box-shadow: none; }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) a:where(:not([class*="button"]):not([class*="btn"])) {
  color: #F0B27A; background-image: none; text-decoration: underline; text-underline-offset: 3px; }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) :is(.cn-button, .cli-plugin-button, .cky-btn, .cmplz-btn, .cc-btn, button, a[class*="button"]):where(:not([class^="ct"])) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0 4px; padding: 0 20px; border: 0; border-radius: 999px;
  background: #F0B27A; color: #241C17; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; background-image: none; cursor: pointer; }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) :is(.cn-button, .cli-plugin-button, .cky-btn, .cmplz-btn, .cc-btn, button, a[class*="button"]):where([data-cookie-set="refuse"], .cky-btn-reject, .cmplz-deny, .cc-deny, .cli_settings_button, [class*="reject"], [class*="settings"]) {
  background: transparent; color: #F4EBDF; box-shadow: inset 0 0 0 1px rgba(244, 235, 223, .45); }

/* ── The evening ──────────────────────────────────────────────────────── */
/* A block given a light custom colour in the editor (an inline #d…, #e… or #f… background) stays a light island in the
   evening, with the day palette inside, like the theme's own light islands; its text would vanish otherwise */
html.ct-night .has-background:is([style*="background-color:#d" i], [style*="background-color:#e" i], [style*="background-color:#f" i], [style*="background-color: #d" i], [style*="background-color: #e" i], [style*="background-color: #f" i], [style*="background-color:white" i]):where(:not(.has-text-color)) {
  color-scheme: light;
  --ct-sand: #F4EBDF; --ct-cream: #FFF8EF; --ct-ink: #241C17; --ct-ink-2: #33271F; --ct-muted: #6B5B4F; --ct-line: #E6D8C6;
  --ct-peach: #F3D9C6; --ct-clay: #E9C9B4; --ct-sage: #3F5E4F; --ct-sage-soft: #DCE5DC; --ct-paper: #fff; --ct-paper-warm: #FFFDF8;
  --ct-ember-text: color-mix(in srgb, #B4532F 78%, #241C17);
  --wp--preset--color--sand: #F4EBDF; --wp--preset--color--cream: #FFF8EF; --wp--preset--color--ink: #241C17; --wp--preset--color--ink-2: #33271F;
  --wp--preset--color--muted: #6B5B4F; --wp--preset--color--line: #E6D8C6;
  color: #241C17; }
html.ct-night .has-background:is([style*="background-color:#d" i], [style*="background-color:#e" i], [style*="background-color:#f" i], [style*="background-color: #d" i], [style*="background-color: #e" i], [style*="background-color: #f" i], [style*="background-color:white" i]) a:where(:not(.wp-element-button)) { color: var(--ct-ember-text); }
/* Unresolved embeds, plugin notes and cards sit on the evening surfaces through the variables; a few fixed colours need a hand */
html.ct-night :where(.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output, .gform_validation_errors, .woocommerce-error, .frm_error_style, .notice-error, .alert-danger) {
  background: #3A231C; }
html.ct-night :is(.wpcf7-not-valid-tip, em.wpforms-error, label.wpforms-error, .gfield_validation_message, .gfield_description.validation_message, .frm_error, .nf-error-msg, .forminator-error-message) { color: #F4A896; }
html.ct-night :where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, #catapult-cookie-bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) {
  background: #120E0B; color: #F2E7DA; box-shadow: 0 -1px 0 #2E241D, 0 -18px 40px -20px rgba(0, 0, 0, .6); }
html.ct-night :where(.onsale) { background: #F0B27A; color: #241C17; }
html.ct-night :where(ul.products) img { filter: brightness(.9) saturate(.95); }
/* Plain white plugin boxes (iframes of maps or forms with a white page) get a soft frame so they do not glare */
html.ct-night :where(.wp-block-post-content) iframe:where(:not([class^="ct"]):not([class*=" ct"])) { box-shadow: 0 0 0 1px #3B2F27; }

/* ── Long words in headings (Greek has many: «αντισυνταγματικότατος») ──
   On a phone or tablet a big heading cannot hold such a word on one line. Browsers that know Greek hyphenation
   (Safari, Firefox, Chrome on Android and macOS) break it at a syllable with a hyphen; only words of 10+ letters
   are touched, and nowhere else. Where a browser cannot hyphenate, overflow-wrap still keeps the word inside. */
:where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-heading) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; overflow-wrap: break-word; }
/* A heading the author made h1 inside the text is a section title, not the page title: one step smaller on phones */
@media (max-width: 782px) {
  :where(.wp-block-post-content) :where(h1) { font-size: clamp(30px, 7.4vw, 46px); }
}