/*
 * Soda Palette Composer — UI/UX v0.4.2
 * CSS scoped exclusively to .spc-composer.
 * No WooCommerce/theme styles are modified outside the component.
 */

/* Exception volontaire au scope ci-dessus : le fil d'Ariane est un élément
   de chrome de page, affiché AVANT #spc-composer-root (voir render() dans
   class-spc-composer-shortcode.php), donc en dehors de .spc-composer.
   Mêmes classes/styles que sur la fiche produit (single-product-1.0.20.css)
   et le panier (cart-0.6.65.css), pour un rendu identique partout. */
/* .spc-breadcrumb est un frère de #spc-composer-root, pas un enfant : même
   largeur/centrage que .spc-composer (min(1080px, 100%), centré), mais il
   lui faut EN PLUS le même padding horizontal (28px) que .spc-composer,
   sinon son texte démarre au bord extérieur de la boîte pendant que le
   contenu du composeur démarre 28px plus loin (padding interne) — d'où le
   décalage vers la gauche observé. */
.spc-breadcrumb {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 8px;
  padding: 0 5px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.spc-composer-page__title.spc-composer-page__title {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 auto 8px !important;
  padding: 0 5px !important;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: left !important;
  color: #20242a;
}

@media (max-width: 768px) {
  .spc-composer-page__title.spc-composer-page__title {
    font-size: 24px !important;
  }
}

.spc-breadcrumb a {
  color: #6c727a;
  text-decoration: none;
}

.spc-breadcrumb a:hover {
  color: #c8102e;
}

.spc-breadcrumb__sep {
  margin: 0 4px;
  color: #c7ccd1;
}

.spc-breadcrumb__current {
  color: #20242a;
}

.spc-composer {
  --spc-accent: #bf2638;
  --spc-accent-deep: #971d2d;
  --spc-accent-soft: #fff3f4;
  --spc-text: #17181c;
  --spc-text-dim: #6f727a;
  --spc-surface: #ffffff;
  --spc-surface-alt: #f7f7f8;
  --spc-border: #e5e6e9;
  --spc-success: #168447;
  --spc-success-soft: #edf9f2;
  --spc-shadow: 0 12px 36px rgba(18, 20, 26, .08);
  --spc-radius: 18px;

  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 28px 5px;
  overflow: visible;
  color: var(--spc-text) !important;
  background: var(--spc-surface) !important;
  border: none;
  border-radius: 22px;
  box-shadow: none;
  font-family: "Archivo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.spc-composer *,
.spc-composer *::before,
.spc-composer *::after { box-sizing: border-box; }

.spc-composer button,
.spc-composer select { font: inherit; }

.spc-composer * { color: var(--spc-text); }

/* Section headings */
.spc-section { margin: 0 0 28px; }
.spc-section:last-child { margin-bottom: 0; }

.spc-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--spc-text) !important;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

.spc-product-description {
  margin: -2px 0 12px;
  padding: 0 0 0 35px;
  color: var(--spc-text-dim) !important;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
}

.spc-eyebrow::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 50%;
  background: var(--spc-text);
  color: #fff !important;
  font-size: 10px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
}

.spc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 24px;
  align-items: start;
}

.spc-col { min-width: 0; }

/* Choice cards */
.spc-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.spc-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 76px;
  width: 100%;
  min-width: 0;
  padding: 13px 42px 13px 16px;
  border: 1.5px solid var(--spc-border) !important;
  border-radius: 15px;
  background: var(--spc-surface) !important;
  color: var(--spc-text) !important;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.spc-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 17px;
  height: 17px;
  border: 1.5px solid #c9cbd0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
}

.spc-tab.is-active {
  border-color: var(--spc-accent) !important;
  background: var(--spc-accent-soft) !important;
  box-shadow: 0 5px 18px rgba(191, 38, 56, .08);
}

.spc-tab.is-active::after {
  border: 5px solid var(--spc-accent);
}

.spc-tab:hover:not(.is-active) {
  border-color: #c8cad0 !important;
  transform: translateY(-1px);
}

.spc-tab:focus-visible,
.spc-stepper button:focus-visible,
.spc-btn:focus-visible,
.spc-select:focus-visible {
  outline: 3px solid rgba(191, 38, 56, .2);
  outline-offset: 2px;
}

.spc-tab-title {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.spc-tab-subtitle {
  text-transform: none !important;
}

.spc-tab-subtitle {
  display: block;
  margin-top: 5px;
  color: var(--spc-text-dim) !important;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
}

/* Product panel */
.spc-product-list,
.spc-card {
  border: 1px solid var(--spc-border);
  border-radius: var(--spc-radius);
  background: var(--spc-surface);
}

.spc-product-list {
  max-height: 540px;
  overflow-y: auto;
  padding: 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: #cfd1d6 transparent;
}

.spc-product-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 10px 2px;
  border-bottom: 1px solid #ececef;
}

.spc-product-row:last-child { border-bottom: 0; }

.spc-product-info {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.spc-product-info:hover,
.spc-product-info:focus-visible {
  color: inherit;
  text-decoration: none;
}

.spc-product-info:focus-visible {
  outline: 2px solid var(--spc-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.spc-product-text { min-width: 0; }

.spc-product-thumb {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--spc-border);
  border-radius: 12px;
  background: var(--spc-surface-alt);
}

.spc-product-thumb.is-empty::before {
  content: "";
  width: 22px;
  height: 28px;
  border: 2px solid #cfd1d5;
  border-radius: 5px 5px 8px 8px;
  opacity: .8;
}

.spc-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spc-product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

.spc-product-price {
  margin-top: 4px;
  color: var(--spc-text-dim) !important;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
}

.spc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.spc-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  box-sizing: border-box !important;
  padding: 0;
  border: 1px solid var(--spc-border) !important;
  border-radius: 10px;
  background: #fff !important;
  color: var(--spc-text) !important;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.spc-stepper button.spc-plus {
  border-color: var(--spc-accent) !important;
  background: var(--spc-accent) !important;
  color: #fff !important;
}

.spc-stepper button:not(:disabled):hover { transform: translateY(-1px); }
.spc-stepper button:not(.spc-plus):not(:disabled):hover { background: var(--spc-surface-alt) !important; }
.spc-stepper button.spc-plus:not(:disabled):hover { background: var(--spc-accent-deep) !important; }
.spc-stepper button:disabled { opacity: .35; cursor: default; }

.spc-stepper span {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.spc-qty-input {
  width: 42px;
  height: 38px;
  padding: 0 2px;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--spc-text) !important;
  text-align: center;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.spc-qty-input::-webkit-outer-spin-button,
.spc-qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.spc-qty-input:focus,
.spc-qty-input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Summary */
.spc-sticky {
  position: sticky;
  top: 20px;
}

/* v0.6.18 — affichage des remises façon ligne de facture, sans cadre. */
.spc-discount-v617 {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--spc-text) !important;
}

.spc-discount-v617-line {
  display: grid !important;
  grid-template-columns: max-content minmax(24px, 1fr) max-content !important;
  align-items: center !important;
  width: 100%;
  margin: 0 0 6px !important;
  padding: 0 !important;
  column-gap: 8px !important;
  color: rgba(17, 17, 17, 0.58) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

.spc-discount-v617-line:last-child { margin-bottom: 0 !important; }

.spc-discount-v617-label,
.spc-discount-v617-value {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(17, 17, 17, 0.58) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

.spc-discount-v617-leader {
  display: block !important;
  width: 100%;
  min-width: 24px;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px dotted #9ea1a8 !important;
}

.spc-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.spc-summary-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

.spc-summary-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--spc-surface-alt);
  color: var(--spc-text-dim) !important;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.spc-summary-badge.is-full {
  background: var(--spc-success-soft);
  color: var(--spc-success) !important;
}

.spc-gauge-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 12px;
}

.spc-gauge-count strong {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.spc-gauge-status {
  text-align: right;
  color: var(--spc-text-dim) !important;
  font-size: 11px;
  font-weight: 600;
}

.spc-gauge-status.is-full { color: var(--spc-success) !important; font-weight: 600; }

.spc-progress {
  height: 9px;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: #ececef;
}

.spc-progress > div {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--spc-accent);
  transition: width 180ms ease, background-color 180ms ease;
}

.spc-progress.is-full > div { background: var(--spc-success); }

.spc-total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 17px;
  border-top: 1px solid var(--spc-border);
}

.spc-total-label {
  color: var(--spc-text-dim) !important;
  font-size: 12px;
  font-weight: 600;
}

.spc-total-amount {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.spc-actions {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.spc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid var(--spc-border) !important;
  border-radius: 12px;
  background: var(--spc-surface-alt) !important;
  color: var(--spc-text) !important;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.spc-btn-primary {
  flex: 1 1 auto;
  border-color: var(--spc-accent) !important;
  background: var(--spc-accent) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(191, 38, 56, .18);
}

.spc-btn-primary:not(:disabled):hover { background: var(--spc-accent-deep) !important; border-color: var(--spc-accent-deep) !important; transform: translateY(-1px); }
.spc-btn:disabled { opacity: .42; cursor: default; box-shadow: none; }

.spc-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 40px 10px 13px;
  border: 1px solid var(--spc-border) !important;
  border-radius: 12px;
  background: var(--spc-surface) !important;
  color: var(--spc-text) !important;
  font-size: 13px;
  font-weight: 600;
}

.spc-field-label {
  display: block;
  margin: 0 0 7px;
  color: var(--spc-text-dim) !important;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}

.spc-uniform-card { padding: 20px; }
.spc-uniform-qty { margin-top: 18px; }
.spc-uniform-qty-row { display: flex; align-items: center; gap: 10px; }
.spc-uniform-qty-row .spc-stepper { flex: 0 0 auto; }
.spc-uniform-total-packs { color: var(--spc-text-dim) !important; font-size: 12px; font-weight: 600; }

.spc-card { padding: 20px; }

.spc-empty {
  padding: 30px 16px;
  color: var(--spc-text-dim) !important;
  text-align: center;
  font-size: 13px;
}

.spc-message {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.spc-message.is-success { background: var(--spc-success-soft); color: var(--spc-success) !important; }
.spc-message.is-error { background: #fff0f1; color: var(--spc-accent-deep) !important; }
.spc-message a { color: inherit !important; font-weight: 800; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .spc-composer *, .spc-composer *::before, .spc-composer *::after { transition: none !important; }
}

@media (max-width: 860px) {
  .spc-breadcrumb { padding: 0 24px; }
  .spc-composer { padding: 24px 5px; }
  .spc-row { grid-template-columns: 1fr; }
  .spc-sticky { position: static; }
  .spc-product-list { max-height: 520px; }
}

@media (max-width: 560px) {
  .spc-breadcrumb {
    width: 100%;
    margin: 0 0 20px;
    padding: 0 12px;
  }

  .spc-composer {
    width: 100%;
    margin: 0;
    padding: 12px 12px 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff !important;
  }

  .spc-section { margin-bottom: 20px; }
  .spc-eyebrow {
    gap: 9px;
    margin-bottom: 9px;
    font-size: 16px;
  }
  .spc-eyebrow::before {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 10px;
  }

  .spc-tabs { gap: 7px; margin-bottom: 20px; }
  .spc-tab {
    min-height: 68px;
    padding: 11px 34px 11px 12px;
    border-radius: 11px;
  }
  .spc-tab::after { right: 11px; width: 16px; height: 16px; }
  .spc-tab-title {
    font-size: 12px;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .spc-tab-subtitle { margin-top: 3px; font-size: 10px; }

  .spc-product-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 2px 9px;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
  }
  .spc-product-row {
    min-height: 72px;
    gap: 7px;
    padding: 9px 0;
  }
  .spc-product-info { gap: 8px; }
  .spc-product-thumb {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 9px;
  }
  .spc-product-name { font-size: 12px; line-height: 1.25; }
  .spc-product-price { margin-top: 3px; font-size: 10px; }
  .spc-stepper { gap: 3px; }
  .spc-stepper button { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
  .spc-stepper span { min-width: 18px; font-size: 12px; }
  .spc-stepper .spc-qty-input {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 32px;
    padding: 0;
    font-size: 12px;
  }

  .spc-card { padding: 14px; border-radius: 14px; }
  .spc-discount-v617 {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .spc-discount-v617-line {
    grid-template-columns: max-content minmax(16px, 1fr) max-content !important;
    column-gap: 7px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
  }
  .spc-discount-v617-label,
  .spc-discount-v617-value {
    font-size: 12px !important;
    font-weight: 400 !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }

  /* Mobile: current-palette title only. */
  .spc-summary-title { font-size: 14px !important; line-height: 1.25 !important; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; }

  .spc-total-amount { font-size: 22px; }
  .spc-actions { margin-top: 13px; }
  .spc-actions > .spc-btn { min-height: 45px; padding: 6px 11px; font-size: 15px !important; font-weight: 800 !important; line-height: 1.2; -webkit-text-size-adjust: 100%; }
  .spc-card .spc-actions > button.spc-btn { font-size: 15px !important; font-weight: 800 !important; }

  /* Le résumé reste dans le flux normal. Seule la liste des références défile. */
  .spc-sticky {
    position: static;
    z-index: auto;
    box-shadow: none;
  }
}



/* Composer outer section — no decorative border or shadow.
 * Scoped strictly to the plugin root; inner cards keep their own styling.
 */
.spc-composer {
  border: 0 !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
 * UI/UX v0.4.2 — mobile card geometry
 * The mode cards need their text column to remain independent from the
 * radio indicator. This prevents long French labels from colliding with
 * or being clipped by the indicator on narrow screens.
 * ------------------------------------------------------------------ */

.spc-tab {
  white-space: normal !important;
  overflow: visible !important;
}

.spc-tab-title,
.spc-tab-subtitle {
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.spc-tab-title {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.spc-btn-full { width: 100%; }

@media (max-width: 560px) {
  .spc-composer {
    padding-left: 5px;
    padding-right: 5px;
  }

  .spc-section {
    margin-bottom: 22px;
  }

  .spc-eyebrow {
    margin-bottom: 10px;
    line-height: 1.2;
  }

  /* Keep both choices equal in width while giving the content a predictable
     text column. */
  .spc-tabs {
    width: 100%;
  }

  .spc-mode-tabs .spc-tab {
    min-height: 74px;
    padding: 12px 34px 12px 12px;
    justify-content: center;
  }

  .spc-mode-tabs .spc-tab-title {
    font-size: 12px;
    line-height: 1.22;
    letter-spacing: -.01em;
  }

  .spc-mode-tabs .spc-tab-subtitle {
    margin-top: 4px;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .spc-mode-tabs .spc-tab::after {
    right: 10px;
  }

  /* Capacity labels are short enough to stay compact. */
  .spc-capacity-tabs .spc-tab {
    min-height: 66px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Clear separation between the step heading and its choice cards. */
  .spc-section + .spc-section {
    margin-top: 0;
  }

  .spc-product-list {
    margin-top: 0;
  }
}

/* Very narrow phones: deliberately allow the custom title to wrap instead
   of shrinking it until it becomes difficult to read. */
@media (max-width: 350px) {
  .spc-mode-tabs .spc-tab {
    padding-left: 10px;
    padding-right: 31px;
  }

  .spc-mode-tabs .spc-tab-title {
    font-size: 11px;
  }

  .spc-mode-tabs .spc-tab-subtitle {
    font-size: 9px;
  }
}

/* Cart actions — final specificity lock */
.spc-composer .spc-card .spc-actions .spc-btn,
.spc-composer .spc-card .spc-actions button.spc-btn {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* v0.6.3 — remove the decorative frame from the Elementor Shortcode widget that contains the composer. */
.elementor-widget-shortcode:has(#spc-composer-root),
.elementor-widget-shortcode:has(.spc-composer) {
  border: 0 !important;
  box-shadow: none !important;
}

/* v0.6.4 — remove ONLY the outer Elementor frame around the shortcode.
 * Internal composer cards keep their own borders/shadows.
 */
.elementor-element:has(> .elementor-widget-container > .spc-composer),
.elementor-element:has(.elementor-widget-shortcode .spc-composer),
.e-con:has(.spc-composer) {
  border: 0 !important;
  box-shadow: none !important;
}

/* v0.6.4 — outer wrapper only: no border/shadow on Elementor ancestors
 * that contain the composer. Internal cards remain untouched.
 */
.elementor-element:has(#spc-composer-root),
.elementor-widget:has(#spc-composer-root),
.elementor-widget-container:has(#spc-composer-root),
.e-con:has(#spc-composer-root),
.e-con-inner:has(#spc-composer-root) {
  border: 0 !important;
  box-shadow: none !important;
}




/* v0.6.24 — compact step markers: resist theme/WooCommerce overrides. */
/* v0.6.27 — remove only the three numbered step markers from Composer. */
.spc-composer .spc-eyebrow::before {
  display: none !important;
}

.spc-composer .spc-product-description {
  padding-left: 0 !important;
}

/* v0.6.29 — composer product description/subtitle uses regular 400 weight. */
.spc-composer .spc-product-description { font-weight: 400 !important; }

/* ---------------- Écran de chargement (squelette) ----------------
   Même principe que sur la boutique/fiche produit (voir
   shop-page-1.0.19.css / single-product-1.0.20.css) : masque
   .spc-page-loader-content (posé en style inline dans le gabarit — voir
   class-spc-composer-shortcode.php — pas seulement en CSS, pour ne
   jamais rester bloqué invisible si ce fichier CSS est servi en cache
   périmé) tant que la page n'a pas fini de charger, affiche un squelette
   animé à la place, révélé par assets/page-loader-1.0.2.js. Volontairement
   sans le moindre padding/marge sur .spc-composer-page et
   .spc-page-loader-content : le fil d'Ariane et #spc-composer-root ont
   besoin de rester alignés exactement comme avant (voir plus haut dans ce
   fichier), ces deux div ne doivent rien changer à leur mise en page. */
.spc-page-loader-content {
  opacity: 0;
  transition: opacity .25s ease;
}

.spc-composer-page.spc-page-loaded .spc-page-loader-content {
  opacity: 1 !important;
}

.spc-composer-page.spc-page-loaded .spc-page-loader {
  display: none;
}

.spc-page-loader__line {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: spc-page-loader-shimmer 1.4s ease infinite;
}

.spc-page-loader__line--breadcrumb {
  width: 220px;
  height: 16px;
  margin: 0 auto 20px;
}

.spc-page-loader__composer {
  width: 100%;
  height: 480px;
  margin: 0 auto;
  border-radius: 22px;
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: spc-page-loader-shimmer 1.4s ease infinite;
}

@keyframes spc-page-loader-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}