/* SWAM Extensions — Account / Tiles Appearance runtime layer.
   This module owns the appearance CSS moved out of SWAM Premium. */

/* =========================================================
   SWAM Appearance Module — Account
   ========================================================= */
.syn-account-panel,
.syn-dashboard,
.syn-dash,
.syn-account-box,
.syn-business-tile,
.syn-account-help,
.syn-space {
  --swam-account-accent: #4b3153;
  --swam-account-accent-hover: #37223e;
  --swam-account-text: #1f1b24;
  --swam-account-muted: #6f6775;
  --swam-account-surface: #f8f4fa;
  --swam-account-card-bg: #ffffff;
  --swam-account-border: rgba(75, 49, 83, 0.08);
  --swam-account-cta-bg: #1f2430;
  --swam-account-cta-hover: #111827;
  --swam-account-cta-text: #ffffff;
  --swam-account-badge-active-bg: rgba(49, 168, 97, 0.12);
  --swam-account-badge-active-text: #1e8d53;
  --swam-account-badge-locked-bg: rgba(99, 111, 132, 0.12);
  --swam-account-badge-locked-text: #5a6578;
  --swam-account-radius: 24px;
  --swam-account-shadow: 0 10px 28px rgba(20, 14, 24, 0.04);
  --swam-account-gap: 24px;
  --swam-account-panel-padding: 24px;
  --swam-account-card-padding: 24px;
  --swam-account-nav-padding: 14px;
  --swam-account-media-height: 168px;
  --swam-account-dashboard-viewport-gutter: 24px;
  --swam-account-nav-hover-bg: rgba(75, 49, 83, 0.10);
  --swam-account-nav-hover-text: var(--swam-account-accent-hover);
  --swam-account-nav-active-bg: var(--swam-account-accent, #4b3153);
  --swam-account-nav-active-text: #ffffff;
}


.syn-account-panel,
.syn-dashboard,
.syn-dash,
.syn-account-box,
.syn-business-tile,
.syn-account-help,
.syn-space,
.syn-section-panel {
  color: var(--swam-account-text);
}

.syn-account-panel--full,
.syn-account-shell,
.syn-account-content,
.syn-account-view,
.syn-account-grid--business,
.syn-account-stats-grid,
.syn-account-grid--forms,
.syn-business-tiles {
  gap: var(--swam-account-gap);
}

.syn-account-panel__hero:not(.syn-account-panel__hero--dashv2),
.syn-account-box,
.syn-account-help,
.syn-account-notice,
.syn-business-tile:not(.syn-business-tile--dashv2),
.syn-dash,
.syn-tile.syn-space,
.syn-mini-stat,
.syn-account-nav__list,
.syn-dash-addon-links {
  border-color: var(--swam-account-border);
  box-shadow: var(--swam-account-shadow);
}

.syn-account-panel__hero:not(.syn-account-panel__hero--dashv2),
.syn-account-box,
.syn-account-help,
.syn-business-tile:not(.syn-business-tile--dashv2),
.syn-dash,
.syn-tile.syn-space,
.syn-account-nav__list,
.syn-mini-stat,
.syn-dash-addon-links,
.syn-account-notice {
  border-radius: var(--swam-account-radius);
}

.syn-account-panel__hero:not(.syn-account-panel__hero--dashv2),
.syn-dash,
.syn-tile.syn-space {
  background: var(--swam-account-surface);
  padding: var(--swam-account-panel-padding);
}

.syn-account-box,
.syn-account-help,
.syn-account-notice,
.syn-business-tile:not(.syn-business-tile--dashv2),
.syn-account-nav__list,
.syn-mini-stat,
.syn-dash-addon-links {
  background: var(--swam-account-card-bg);
}

/*
 * Dashboard V2 "Pokaż / Ukryj szczegóły" expander.
 *
 * `.syn-business-tile__details` is NOT an account card — in the V2 tile
 * layout it is an inline expander strip inside the tile. It must not
 * inherit the card treatment (card background, card border, card
 * shadow), otherwise the details toggle renders on a tinted plum/lilac
 * bar whenever the Appearance builder sets a non-white --swam-account-
 * card-bg. The toggle and the strip stay transparent; only the expanded
 * content box gets a light surface.
 *
 * This keeps the builder in control of real cards while leaving the V2
 * details expander visually neutral. No !important — these are simply
 * dedicated rules for the details elements, separate from the card group.
 */
.syn-business-tile__details,
.syn-business-tile__detailbar,
.syn-business-tile__details > summary,
.syn-business-tile__details-toggle {
  background: transparent;
  box-shadow: none;
  border: 0;
}

.syn-business-tile__details-box {
  background: #ffffff;
  border: 1px solid rgba(75, 49, 83, 0.12);
  border-radius: 12px;
  box-shadow: none;
  padding: 16px 18px;
  line-height: 1.5;
  font-size: 14px;
  color: var(--swam-account-text, #24152a);
}

.syn-business-tile__details-box p,
.syn-business-tile__details-box strong {
  line-height: 1.5;
  font-size: 14px;
  color: var(--swam-account-text, #24152a);
}

.syn-account-box,
.syn-account-help,
.syn-business-tile:not(.syn-business-tile--dashv2) {
  padding: var(--swam-account-card-padding);
}

.syn-account-nav__list {
  padding: var(--swam-account-nav-padding);
}

.syn-account-panel__eyebrow,
.syn-account-nav__list a,
.syn-business-tile__eyebrow,
.syn-business-tile__details-toggle,
.syn-account-nav__logout a {
  color: var(--swam-account-accent);
}

.syn-account-nav__list a,
.syn-account-nav__logout a {
  border-color: var(--swam-account-border);
  background: var(--swam-account-card-bg);
}

.syn-account-nav__list a:hover,
.syn-account-nav__list a:focus {
  background: var(--swam-account-nav-hover-bg, rgba(75, 49, 83, .10));
  border-color: color-mix(in srgb, var(--swam-account-accent, #4b3153) 34%, var(--swam-account-border, rgba(75, 49, 83, .14)));
  color: var(--swam-account-nav-hover-text, var(--swam-account-accent-hover, #37223e));
}

.syn-account-nav__list li.is-current a,
.syn-account-nav__list li.is-current a:hover,
.syn-account-nav__list li.is-current a:focus {
  background: var(--swam-account-nav-active-bg, var(--swam-account-accent, #4b3153));
  border-color: color-mix(in srgb, var(--swam-account-accent, #4b3153) 88%, #17111f);
  color: var(--swam-account-nav-active-text, #ffffff);
}

.syn-account-nav__logout a:hover,
.syn-account-nav__logout a:focus {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--swam-account-border);
  color: var(--swam-account-accent-hover);
}

.syn-account-panel__subtitle,
.syn-mini-stat span,
.syn-account-panel__header p,
.syn-account-panel__header p:last-child,
.syn-business-tile__description,
.syn-business-tile__body p,
.syn-business-tile__meta-item span,
.syn-business-tile__status-label,
.syn-business-tile__hint,
.syn-business-tile__details-box p,
.syn-account-help p,
.syn-account-help__text,
.syn-premium-courses__intro,
.syn-account-notice,
.syn-account-nav__badge,
.syn-dash-addon-links,
.syn-dash-addon-links__label,
.syn-dashboard__lead {
  color: var(--swam-account-muted);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual {
  margin: calc(var(--swam-account-card-padding) * -1) calc(var(--swam-account-card-padding) * -1) 0;
  min-height: var(--swam-account-media-height);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual img {
  height: var(--swam-account-media-height);
  object-fit: var(--swam-account-image-fit, cover);
  object-position: var(--swam-account-image-position, center center);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual img.swam-account-appearance-image--wide,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual img.swam-account-appearance-image--banner {
  object-fit: var(--swam-account-image-smart-fit, var(--swam-account-image-fit, cover));
}

.syn-business-tile__body,
.syn-business-tile__summary,
.syn-business-tile__details-box,
.syn-account-form,
.syn-account-notices {
  gap: calc(var(--swam-account-gap) * 0.5);
}

.syn-account-panel:not(.syn-account-panel--dashv2) .syn-btn,
.syn-dashboard .syn-btn,
.syn-dash-cta,
.syn-space .syn-btn,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-btn,
.syn-account-content:not(.syn-account-content--dashv2) .syn-btn {
  background: var(--swam-account-cta-bg);
  border-color: var(--swam-account-cta-bg);
  color: var(--swam-account-cta-text);
}

.syn-account-panel:not(.syn-account-panel--dashv2) .syn-btn:hover,
.syn-account-panel:not(.syn-account-panel--dashv2) .syn-btn:focus,
.syn-dashboard .syn-btn:hover,
.syn-dashboard .syn-btn:focus,
.syn-dash-cta:hover,
.syn-dash-cta:focus,
.syn-space .syn-btn:hover,
.syn-space .syn-btn:focus,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-btn:hover,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-btn:focus,
.syn-account-content:not(.syn-account-content--dashv2) .syn-btn:hover,
.syn-account-content:not(.syn-account-content--dashv2) .syn-btn:focus {
  background: var(--swam-account-cta-hover);
  border-color: var(--swam-account-cta-hover);
  color: var(--swam-account-cta-text);
}

.syn-account-panel .syn-badge.is-on,
.syn-account-panel .syn-badge.is-active,
.syn-dashboard .syn-badge.is-on,
.syn-dashboard .syn-badge.is-active,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-badge.is-on,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-badge.is-active,
.syn-space .syn-badge.is-on {
  background: var(--swam-account-badge-active-bg);
  color: var(--swam-account-badge-active-text);
  border-color: transparent;
}

.syn-account-panel .syn-badge.is-off,
.syn-account-panel .syn-badge.is-locked,
.syn-account-panel .syn-badge.is-revoked,
.syn-dashboard .syn-badge.is-off,
.syn-dashboard .syn-badge.is-locked,
.syn-dashboard .syn-badge.is-revoked,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-badge.is-off,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-badge.is-locked,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-badge.is-revoked,
.syn-space .syn-badge.is-off,
.syn-space .syn-badge.is-revoked {
  background: var(--swam-account-badge-locked-bg);
  color: var(--swam-account-badge-locked-text);
  border-color: transparent;
}

/* =========================================================
   SWAM Appearance Module — Tiles
   ========================================================= */
.syn-studio-catalog,
.syn-card,
.syn-studio-course,
.syn-section-panel {
  --swam-tile-accent: #6d457e;
  --swam-tile-accent-hover: #59366a;
  --swam-tile-text: #1f1b24;
  --swam-tile-muted: #6f6775;
  --swam-tile-surface: #f7f4fb;
  --swam-tile-card-bg: #ffffff;
  --swam-tile-border: rgba(21, 31, 51, 0.09);
  --swam-tile-cta-bg: #6d457e;
  --swam-tile-cta-hover: #59366a;
  --swam-tile-cta-text: #ffffff;
  --swam-tile-badge-active-bg: rgba(30, 141, 83, 0.12);
  --swam-tile-badge-active-text: #1e8d53;
  --swam-tile-badge-locked-bg: rgba(99, 111, 132, 0.12);
  --swam-tile-badge-locked-text: #5a6578;
  --swam-tile-radius: 22px;
  --swam-tile-shadow: 0 18px 36px rgba(17, 24, 39, 0.06);
  --swam-tile-gap: 20px;
  --swam-tile-card-padding: 20px;
  --swam-tile-media-height: 188px;
}

.syn-card-grid,
.syn-studio-catalog__grid {
  gap: var(--swam-tile-gap);
}

.syn-card,
.syn-studio-course,
.syn-studio-catalog__empty-state,
.syn-studio-course__config-note,
.syn-card__media,
.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  border-color: var(--swam-tile-border);
  border-radius: var(--swam-tile-radius);
  box-shadow: var(--swam-tile-shadow);
}

.syn-card,
.syn-studio-course,
.syn-studio-catalog__empty-state {
  background: var(--swam-tile-card-bg);
  color: var(--swam-tile-text);
}

.syn-studio-catalog,
.syn-section-panel {
  color: var(--swam-tile-text);
}

.syn-card__body,
.syn-studio-course__body {
  padding: var(--swam-tile-card-padding);
}

.syn-card__media img,
.syn-studio-course__media img,
.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  height: var(--swam-tile-media-height);
  min-height: var(--swam-tile-media-height);
}

.syn-card__media img,
.syn-studio-course__media img {
  object-fit: var(--swam-tile-image-fit, cover);
  object-position: var(--swam-tile-image-position, center center);
}

.syn-card__media img.swam-account-appearance-image--wide,
.syn-card__media img.swam-account-appearance-image--banner,
.syn-studio-course__media img.swam-account-appearance-image--wide,
.syn-studio-course__media img.swam-account-appearance-image--banner {
  object-fit: var(--swam-tile-image-smart-fit, var(--swam-tile-image-fit, cover));
}

.syn-card__topline h3,
.syn-card__topline h4,
.syn-card__price,
.syn-studio-catalog__title,
.syn-studio-course__title,
.syn-studio-course__price,
.syn-studio-catalog__empty-title {
  color: var(--swam-tile-text);
}

.syn-card__excerpt,
.syn-card__meta,
.syn-studio-catalog__intro,
.syn-studio-catalog__summary-item,
.syn-studio-course__excerpt,
.syn-studio-course__meta-item,
.syn-studio-course__price-label,
.syn-studio-catalog__empty-text,
.syn-studio-course__config-note {
  color: var(--swam-tile-muted);
}

.syn-studio-catalog__summary-item,
.syn-studio-catalog__empty-state,
.syn-studio-course__config-note {
  background: var(--swam-tile-surface);
}

.syn-card .syn-btn,
.syn-section-panel .syn-btn,
.syn-studio-course__cta,
.syn-studio-course__cta--primary,
.syn-studio-course__cta--accent,
.syn-studio-course__cta--warning,
.syn-studio-course__cta--muted,
.syn-studio-course__cta--action-open,
.syn-studio-course__cta--action-buy,
.syn-studio-course__cta--action-continue,
.syn-studio-course__cta--action-renew,
.syn-studio-course__cta--action-none {
  background: var(--swam-tile-cta-bg);
  border-color: var(--swam-tile-cta-bg);
  color: var(--swam-tile-cta-text);
}

.syn-card .syn-btn:hover,
.syn-card .syn-btn:focus,
.syn-section-panel .syn-btn:hover,
.syn-section-panel .syn-btn:focus,
.syn-studio-course__cta:hover,
.syn-studio-course__cta:focus,
.syn-studio-course__cta--primary:hover,
.syn-studio-course__cta--primary:focus,
.syn-studio-course__cta--accent:hover,
.syn-studio-course__cta--accent:focus,
.syn-studio-course__cta--warning:hover,
.syn-studio-course__cta--warning:focus,
.syn-studio-course__cta--muted:hover,
.syn-studio-course__cta--muted:focus,
.syn-studio-course__cta--action-open:hover,
.syn-studio-course__cta--action-open:focus,
.syn-studio-course__cta--action-buy:hover,
.syn-studio-course__cta--action-buy:focus,
.syn-studio-course__cta--action-continue:hover,
.syn-studio-course__cta--action-continue:focus,
.syn-studio-course__cta--action-renew:hover,
.syn-studio-course__cta--action-renew:focus,
.syn-studio-course__cta--action-none:hover,
.syn-studio-course__cta--action-none:focus {
  background: var(--swam-tile-cta-hover);
  border-color: var(--swam-tile-cta-hover);
  color: var(--swam-tile-cta-text);
}

.syn-card .syn-badge.is-active,
.syn-studio-course__badge.is-active,
.syn-studio-catalog__summary-item--owned {
  background: var(--swam-tile-badge-active-bg);
  color: var(--swam-tile-badge-active-text);
  border-color: transparent;
}

.syn-card .syn-badge.is-locked,
.syn-studio-course__badge.is-locked {
  background: var(--swam-tile-badge-locked-bg);
  color: var(--swam-tile-badge-locked-text);
  border-color: transparent;
}

.syn-studio-catalog__summary-item--buy {
  background: var(--swam-tile-surface);
  color: var(--swam-tile-accent);
  border-color: var(--swam-tile-border);
}

/* =========================================================
   SWAM Extensions — Builder-owned runtime controls
   ========================================================= */
.syn-business-tiles:not(.syn-business-tiles--dashv2),
.syn-account-grid--business:not(.syn-account-grid--dashv2) {
  gap: var(--swam-account-gap, 18px);
}

.syn-business-tile:not(.syn-business-tile--dashv2) {
  gap: var(--swam-account-gap, 18px);
  padding: var(--swam-account-card-padding, 24px);
  max-width: var(--swam-account-card-max-width, none);
  justify-self: var(--swam-account-card-alignment, stretch);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual {
  position: relative;
  margin: calc(var(--swam-account-card-padding, 24px) * -1) calc(var(--swam-account-card-padding, 24px) * -1) 0;
  min-height: var(--swam-account-media-height, 168px);
  aspect-ratio: var(--swam-account-image-ratio, auto);
  background: color-mix(in srgb, var(--swam-account-card-bg, #ffffff) 92%, #ffffff);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual img {
  width: 100%;
  height: var(--swam-account-media-height, 168px);
  object-fit: var(--swam-account-image-fit, cover);
  object-position: var(--swam-account-image-position, center center);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--swam-tile-overlay-color, transparent);
  opacity: var(--swam-tile-overlay-opacity, 0);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__head h3 {
  font-size: var(--swam-account-title-font-size, clamp(24px, 3vw, 34px));
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__description,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__body p {
  font-size: var(--swam-account-description-font-size, inherit);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-btn {
  border-radius: var(--swam-account-button-radius, 999px);
}

.syn-business-tile__custom-meta {
  padding: 10px 12px;
  border: 1px solid var(--swam-account-border, rgba(75, 49, 83, 0.08));
  border-radius: calc(var(--swam-account-radius, 24px) * .58);
  background: rgba(75, 49, 83, .045);
  color: var(--swam-account-muted, #5b5560);
  font-size: 13px;
  line-height: 1.45;
}

.syn-studio-catalog__grid {
  gap: var(--swam-tile-gap, var(--syn-studio-gap, 20px));
}

.syn-studio-course {
  max-width: var(--swam-tile-card-max-width, none);
  justify-self: var(--swam-tile-card-alignment, stretch);
}

.syn-studio-course__body {
  gap: var(--swam-tile-gap, 14px);
  padding: var(--swam-tile-card-padding, 20px);
}

.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  min-height: var(--swam-tile-media-height, 188px);
  aspect-ratio: var(--swam-tile-image-ratio, auto);
  background: color-mix(in srgb, var(--swam-tile-card-bg, #ffffff) 92%, #ffffff);
}

.syn-studio-course__media img {
  width: 100%;
  height: var(--swam-tile-media-height, 188px);
  object-fit: var(--swam-tile-image-fit, cover);
  object-position: var(--swam-tile-image-position, center center);
}

.syn-studio-course__media img.swam-account-appearance-image--wide,
.syn-studio-course__media img.swam-account-appearance-image--banner {
  object-fit: var(--swam-tile-image-smart-fit, var(--swam-tile-image-fit, cover));
}

.syn-studio-course__overlay {
  background: var(--swam-tile-overlay-color, linear-gradient(180deg, rgba(18, 21, 29, 0.04) 0%, rgba(18, 21, 29, 0.58) 100%));
  opacity: var(--swam-tile-overlay-opacity, 1);
}

.syn-studio-course__title {
  font-size: var(--swam-tile-title-font-size, 22px);
}

.syn-studio-course__excerpt {
  font-size: var(--swam-tile-description-font-size, inherit);
}

.syn-studio-course__cta,
.syn-studio-course__cta--primary,
.syn-studio-course__cta--accent,
.syn-studio-course__cta--warning,
.syn-studio-course__cta--muted,
.syn-studio-course__cta--action-open,
.syn-studio-course__cta--action-buy,
.syn-studio-course__cta--action-continue,
.syn-studio-course__cta--action-renew,
.syn-studio-course__cta--action-none {
  border-radius: var(--swam-tile-button-radius, 999px);
}

.syn-studio-course__badge {
  background: var(--swam-tile-badge-bg, var(--syn-studio-success-soft, rgba(49, 168, 97, .12)));
  color: var(--swam-tile-badge-text, var(--syn-studio-success, #1e8d53));
}

/* =========================================================
   SWAM Extensions — Dashboard layout templates and sizing
   ========================================================= */
.syn-account-panel,
.syn-dashboard,
.syn-dash,
.syn-account-box,
.syn-business-tile,
.syn-account-help,
.syn-space {
  --swam-account-dashboard-max-width: 1440px;
  --swam-account-shell-columns: 272px minmax(0, 1fr);
  --swam-account-sidebar-width: 272px;
  --swam-account-grid-min-width: 300px;
  --swam-account-section-gap: var(--swam-account-gap, 24px);
  --swam-account-tile-min-height: 0;
}

body.woocommerce-account .entry-content,
body.woocommerce-account .wp-block-post-content,
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-MyAccount-content,
.syn-account-panel,
.syn-dashboard {
  overflow: visible;
}

.syn-account-panel,
.syn-dashboard {
  width: min(100%, var(--swam-account-dashboard-max-width, 1440px));
  max-width: var(--swam-account-dashboard-max-width, 1440px);
  margin-left: auto;
  margin-right: auto;
}

.syn-account-panel:not(.syn-account-panel--dashv2) {
  max-width: none;
}

.syn-account-panel > .syn-dashboard,
.syn-account-content > .syn-dashboard,
.syn-account-view > .syn-dashboard,
.syn-account-panel__main > .syn-dashboard {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Account panels stay in normal document flow. Viewport-width recentering
   is intentionally avoided here because it can shift Elementor/WooCommerce
   containers outside their layout bounds. */

.syn-account-shell {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: var(--swam-account-shell-columns, 272px minmax(0, 1fr));
  gap: var(--swam-account-section-gap, var(--swam-account-gap, 24px));
  align-items: start;
}

.syn-account-nav,
.syn-account-panel__nav,
.syn-account-sidebar {
  width: min(100%, var(--swam-account-sidebar-width, 272px));
  min-width: 0;
}

@media (min-width: 992px) {
  .syn-account-nav,
  .syn-account-panel__nav,
  .syn-account-sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

.syn-account-nav__list {
  display: grid;
  gap: 8px;
}

.syn-account-nav__list a,
.syn-account-nav__logout a,
.syn-account-nav__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--swam-account-border, rgba(75, 49, 83, .10));
  border-radius: calc(var(--swam-account-radius, 24px) * .58);
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.syn-account-nav__list a:hover,
.syn-account-nav__list a:focus,
.syn-account-nav__link:hover,
.syn-account-nav__link:focus {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--swam-account-accent, #4b3153) 10%, transparent);
}

.syn-account-nav__list li.is-current a,
.syn-account-nav__list .is-current .syn-account-nav__link {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--swam-account-accent, #4b3153) 18%, transparent);
}

.syn-account-content,
.syn-account-view,
.syn-account-panel__main,
.syn-dashboard-widgets,
.syn-account-grid--business:not(.syn-account-grid--dashv2),
.syn-business-tiles:not(.syn-business-tiles--dashv2) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.syn-business-tiles:not(.syn-business-tiles--dashv2),
.syn-account-grid--business:not(.syn-account-grid--dashv2),
.syn-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--swam-account-grid-min-width, 300px)), 1fr));
  align-items: stretch;
}

.syn-business-tile:not(.syn-business-tile--dashv2),
.syn-studio-course,
.syn-card,
.syn-section-panel {
  min-height: var(--swam-account-tile-min-height, var(--swam-tile-min-height, 0));
}

.syn-business-tiles:not(.syn-business-tiles--dashv2) > .syn-business-tile,
.syn-account-grid--business:not(.syn-account-grid--dashv2) > .syn-business-tile,
.syn-section-grid > .syn-section-panel,
.syn-studio-catalog__grid > .syn-studio-course,
.syn-card-grid > .syn-card {
  height: 100%;
}

.syn-business-tile:not(.syn-business-tile--dashv2),
.syn-section-panel,
.syn-card,
.syn-studio-course {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.syn-business-tile__body,
.syn-section-panel__body,
.syn-card__body,
.syn-studio-course__body,
.syn-studio-course__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.syn-business-tile__head,
.syn-business-tile__head-main,
.syn-section-panel__header,
.syn-card__header,
.syn-studio-course__header {
  flex: 0 0 auto;
}

.syn-business-tile__description,
.syn-business-tile__body p,
.syn-card__excerpt,
.syn-studio-course__excerpt {
  max-width: 68ch;
}

.syn-business-tile__summary,
.syn-business-tile__custom-meta,
.syn-card__meta,
.syn-studio-course__meta-list {
  flex: 0 0 auto;
}

/*
 * Dashboard V2 details expander — layout + neutral surface.
 *
 * r-fix: previously this rule set `background: color-mix(... --swam-
 * account-surface ...)`, which tinted the "Pokaż / Ukryj szczegóły"
 * strip plum/lilac whenever the Appearance builder surface colour was
 * non-white. The details expander is an inline strip inside the V2
 * tile, not an account card — it stays transparent. Only the expanded
 * content box gets a white surface (see `.syn-business-tile__details-box`
 * below).
 */
.syn-business-tile__details,
details.syn-business-tile__details {
  flex: 0 0 auto;
  margin-top: clamp(10px, 1vw, 14px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.syn-business-tile__details > summary,
.syn-business-tile__details-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 6px;
  min-height: 36px;
  padding: 8px 4px;
  background: transparent;
  cursor: pointer;
  color: var(--swam-account-accent, #4b3153);
  font-size: 13px;
  font-weight: 740;
  list-style: none;
}

.syn-business-tile__details > summary::-webkit-details-marker {
  display: none;
}

.syn-business-tile__details > summary::after,
.syn-business-tile__details-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}

.syn-business-tile__details[open] > summary::after,
.syn-business-tile__details.is-open .syn-business-tile__details-toggle::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.syn-business-tile__details:not([open]):not(.is-open) .syn-business-tile__details-box,
.syn-business-tile__details:not([open]):not(.is-open) [data-swam-details-body] {
  display: none !important;
}

/* Expanded content box — white surface, light border, comfortable
 * padding (16–18px) so text is not cramped against the edge. */
.syn-business-tile__details-box,
.syn-business-tile__details [data-swam-details-body] {
  margin-top: 8px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid rgba(75, 49, 83, 0.12);
  border-radius: 12px;
  box-shadow: none;
  line-height: 1.5;
  font-size: 14px;
  color: var(--swam-account-text, #24152a);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__cta,
.syn-card__actions,
.syn-studio-course__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: clamp(14px, 1.4vw, 18px);
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__cta .syn-btn,
.syn-card__actions .syn-btn,
.syn-studio-course__actions .syn-btn,
.syn-studio-course__cta {
  justify-content: center;
  min-width: min(100%, 220px);
  min-height: 44px;
  text-align: center;
}

.syn-studio-catalog__grid,
.syn-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--swam-tile-card-max-width, var(--swam-account-grid-min-width, 300px))), 1fr));
  align-items: stretch;
}

@media (min-width: 1200px) {
  .syn-business-tiles:not(.syn-business-tiles--dashv2),
  .syn-account-grid--business:not(.syn-account-grid--dashv2),
  .syn-section-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, var(--swam-account-grid-min-width, 300px))), 1fr));
  }
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .syn-account-shell {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  }

  .syn-account-nav,
  .syn-account-panel__nav,
  .syn-account-sidebar {
    width: 100%;
  }
}

@media (max-width: 1024px) and (min-width: 992px) {
  .syn-account-shell {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 24px);
  }

  .syn-business-tiles:not(.syn-business-tiles--dashv2),
  .syn-account-grid--business:not(.syn-account-grid--dashv2),
  .syn-section-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
}

@media (max-width: 991px) {
  .syn-account-panel,
  .syn-dashboard {
    width: 100%;
    max-width: none;
  }

  .syn-account-panel--full,
  .entry-content > .syn-account-panel,
  .entry-content > .syn-dashboard,
  .entry-content .syn-account-panel,
  .entry-content .syn-dashboard,
  .wp-site-blocks .entry-content > .syn-account-panel,
  .wp-site-blocks .entry-content > .syn-dashboard,
  .wp-site-blocks .entry-content .syn-account-panel,
  .wp-site-blocks .entry-content .syn-dashboard,
  .wp-block-post-content > .syn-account-panel,
  .wp-block-post-content > .syn-dashboard,
  .wp-block-post-content .syn-account-panel,
  .wp-block-post-content .syn-dashboard,
  .woocommerce-MyAccount-content > .syn-account-panel,
  .woocommerce-MyAccount-content > .syn-dashboard,
  .woocommerce-MyAccount-content .syn-account-panel,
  .woocommerce-MyAccount-content .syn-dashboard {
    left: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  .syn-account-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .syn-account-nav,
  .syn-account-panel__nav,
  .syn-account-sidebar {
    position: static;
    top: auto;
    width: 100%;
  }

  .syn-account-nav__list {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

@media (max-width: 767px) {
  .syn-account-panel,
  .syn-dashboard {
    --swam-account-dashboard-viewport-gutter: 14px;
    --swam-account-section-gap: min(var(--swam-account-gap, 20px), 18px);
  }

  .syn-account-shell,
  .syn-account-grid--business:not(.syn-account-grid--dashv2),
  .syn-business-tiles:not(.syn-business-tiles--dashv2),
  .syn-section-grid,
  .syn-studio-catalog__grid,
  .syn-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .syn-account-nav__list {
    grid-template-columns: minmax(0, 1fr);
    padding: min(var(--swam-account-nav-padding, 14px), 12px);
  }

  .syn-account-box,
  .syn-account-help,
  .syn-account-notice,
  .syn-business-tile:not(.syn-business-tile--dashv2),
  .syn-section-panel,
  .syn-card,
  .syn-studio-course {
    padding: min(var(--swam-account-card-padding, 22px), 18px);
  }

  .syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__cta .syn-btn,
  .syn-card__actions .syn-btn,
  .syn-studio-course__actions .syn-btn,
  .syn-studio-course__cta {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   SWAM Extensions — media slot hardening
   Keeps the real <img> synchronized with the visual slot used by
   dashboard/course/card templates so banners do not appear clipped at
   thumbnail height with unused blank space below.
   ========================================================= */
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual,
.syn-card__media,
.syn-card__media-wrap,
.syn-studio-course__media-wrap,
.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual > img,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual picture,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual picture > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--swam-account-media-height, 168px) !important;
  max-height: none !important;
  object-fit: var(--swam-account-image-fit, cover) !important;
  object-position: var(--swam-account-image-position, center center) !important;
}

.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual > img.swam-account-appearance-image--wide,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual > img.swam-account-appearance-image--banner,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual picture > img.swam-account-appearance-image--wide,
.syn-business-tile:not(.syn-business-tile--dashv2) .syn-business-tile__visual picture > img.swam-account-appearance-image--banner {
  object-fit: var(--swam-account-image-smart-fit, var(--swam-account-image-fit, cover)) !important;
}

.syn-card__media > img,
.syn-card__media picture,
.syn-card__media picture > img,
.syn-card__media-wrap img,
.syn-studio-course__media > img,
.syn-studio-course__media picture,
.syn-studio-course__media picture > img,
.syn-studio-course__media-wrap img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--swam-tile-media-height, 188px) !important;
  max-height: none !important;
  object-fit: var(--swam-tile-image-fit, cover) !important;
  object-position: var(--swam-tile-image-position, center center) !important;
}

.syn-card__media > img.swam-account-appearance-image--wide,
.syn-card__media > img.swam-account-appearance-image--banner,
.syn-card__media picture > img.swam-account-appearance-image--wide,
.syn-card__media picture > img.swam-account-appearance-image--banner,
.syn-card__media-wrap img.swam-account-appearance-image--wide,
.syn-card__media-wrap img.swam-account-appearance-image--banner,
.syn-studio-course__media > img.swam-account-appearance-image--wide,
.syn-studio-course__media > img.swam-account-appearance-image--banner,
.syn-studio-course__media picture > img.swam-account-appearance-image--wide,
.syn-studio-course__media picture > img.swam-account-appearance-image--banner,
.syn-studio-course__media-wrap img.swam-account-appearance-image--wide,
.syn-studio-course__media-wrap img.swam-account-appearance-image--banner {
  object-fit: var(--swam-tile-image-smart-fit, var(--swam-tile-image-fit, cover)) !important;
}

/* =========================================================
   1.9.9 — Dashboard V2 details expander guardrail.

   Hard guardrail ensuring the "Pokaż / Ukryj szczegóły" toggle is
   never rendered as a plum/lilac bar, regardless of the appearance
   builder layout template or preset. The expander strip and its
   toggle are a lightweight text affordance — never a card or button.

   The matching dynamic rule in class-swam-account-appearance-css-
   resolver.php was also corrected (details removed from the card-
   background selector group); this static guardrail is the
   defence-in-depth layer so the fix holds even if a future preset
   or layout re-introduces a tinted background.
   ========================================================= */
.syn-account-panel--dashv2 .syn-business-tile__detailbar,
.syn-account-panel--dashv2 .syn-business-tile__details,
.syn-account-panel--dashv2 .syn-business-tile__details > summary,
.syn-account-panel--dashv2 .syn-business-tile__details-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Toggle = lightweight plum text link, right-aligned, stable height. */
.syn-account-panel--dashv2 .syn-business-tile__details > summary,
.syn-account-panel--dashv2 .syn-business-tile__details-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 34px;
  padding: 6px 16px 6px 4px;
  color: #4B3153;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* Expanded details box — white surface, light border, never part of
   the toggle strip; sits below the toggle with an 8px gap. */
.syn-account-panel--dashv2 .syn-business-tile__details-box {
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid rgba(75, 49, 83, 0.12);
  border-radius: 12px;
  box-shadow: none;
  padding: 16px 18px;
  line-height: 1.55;
  font-size: 14px;
  color: var(--swam-account-text, #24152a);
}

/* =========================================================
   1.9.11 — multiline tile description (paragraph-aware).

   The builder "Description" field is a textarea saved with
   sanitize_textarea_field(), so newlines are kept in storage.

   1.9.10 used bare `white-space: pre-line`, which kept EVERY newline
   as a hard break — a single Enter inside a paragraph broke the line
   early even with plenty of tile width free.

   1.9.11: the description is now paragraph-normalized in PHP before
   it reaches the tile (SWAM_Account_Appearance::normalize_description_text):
   single newlines are collapsed to spaces, and only blank lines (2+
   newlines) survive as a "\n\n" paragraph separator. So `pre-line`
   here only ever renders a deliberate paragraph gap, never an early
   single-Enter wrap. The description also uses the full tile width
   (no inherited max-width), so paragraphs wrap naturally on width.
   ========================================================= */
.syn-account-panel--dashv2 .syn-business-tile__description,
.swam-ab-preview .syn-business-tile__description {
  white-space: pre-line;
  max-width: none;
  width: 100%;
}