/*!
 * Schematic Parts – sp-overrides.css
 * Path: assets/css/sp-overrides.css
 *
 * UNLAYERED – the rules in this file are intentionally outside @layer,
 * so they always win over theme/Woo CSS (layered CSS < unlayered CSS).
 */

/* ═══════════════════════════════════════════════════════════════
 * ASTRA CONTAINER-RESET (only on SP views: body.sp-view)
 *
 * Astra creates via get_header():
 *   #page > .site-content > .ast-container > #primary
 * These containers add max-width, padding, sidebar space, etc.
 * We reset them so SP can control its own layout.
 * ═══════════════════════════════════════════════════════════════ */

/* 1) .ast-container: remove max-width and centering
 *    NB: ONLY inside .site-content – header/footer stays untouched! */
body.sp-view .site-content > .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 2) .site-content: remove flex-sidebar layout */
body.sp-view .site-content {
  display: block;
}

/* 3) #primary / .content-area: remove width constraints */
body.sp-view #primary,
body.sp-view .content-area {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
}

/* 4) Hide sidebar on SP views */
body.sp-view #secondary,
body.sp-view .widget-area,
body.sp-view .sidebar-main {
  display: none;
}

/* 5) Astra separate-container: remove article padding */
body.sp-view.ast-separate-container #primary,
body.sp-view.ast-separate-container .ast-article-single,
body.sp-view.ast-separate-container .ast-article-post,
body.sp-view .ast-article-single,
body.sp-view .ast-article-post {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* 6) Astra page-header (Title bar) – hidden on SP views,
   because SP generates its own H1 heading */
body.sp-view .ast-page-header-section,
body.sp-view .entry-header {
  display: none;
}

/* 7) SP wrapper: free width, no theme constraints */
body.sp-view .sp-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * SP COMPONENT OVERRIDES (Woo / YITH conflicts)
 * ═══════════════════════════════════════════════════════════════ */

/* Last line of defence for genuine theme/Woo conflicts */
.sp-parts-table .sp-col-actions .button.sp-atc--icon,
.sp-parts-table .sp-col-actions .button.add_to_cart_button.sp-atc--icon {
  background: var(--tm-red) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * SP TOAST – UNLAYERED overrides
 * sp-base.css toast is inside @layer sp → Astra unlayered reset
 * kills the button styles. These rules restore the correct appearance.
 * ═══════════════════════════════════════════════════════════════ */

.sp-page #sp-toast-wrap .sp-toast {
  padding: 28px 34px 24px;
  min-width: 360px;
  text-align: left;
}

.sp-page #sp-toast-wrap .sp-toast .sp-title {
  font-weight: 700;
  font-size: 14px;
  padding-right: 56px;
}

.sp-page #sp-toast-wrap .sp-toast .sp-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--sp-border-color, #d1d1d1);
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  transition: border-color .15s, background .15s;
}

.sp-page #sp-toast-wrap .sp-toast .sp-x:hover {
  border-color: #aaa;
  background: var(--sp-muted-bg, #f5f5f5);
  filter: none;
}

.sp-page #sp-toast-wrap .sp-toast .sp-actions {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef0f3;
}

.sp-page #sp-toast-wrap .sp-toast .sp-link {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--tm-red, #e10600);
  background: transparent;
  border: none;
  padding: 0;
}

.sp-page #sp-toast-wrap .sp-toast .sp-link:hover {
  text-decoration: underline;
}