/*
 Theme Name:   My Listing Child
 Theme URI:    http://mylisting.27collective.net/my-city/
 Description:  MyListing Child Theme
 Author:       27collective
 Author URI:   https://27collective.net/
 Template:     my-listing
 Version:      1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  my-listing-child
*/

/* =========================================================
   Sanna Styles — Global CSS (v2)
   Built for: Elementor (Containers) + ACF + LPagery
   Goal: Use ONLY CSS classes for consistent width/spacing/components
   ========================================================= */

/* ---------- 1) ROOT VARIABLES ---------- */
:root{
  /* Brand palette */
  --ss-pink: #FF2C56;      /* Passion Pink */
  --ss-carnation: #F49CA3;
  --ss-creamsicle: #F4BEA3;
  --ss-chartreuse: #E2CF5D;
  --ss-sky: #85BFD6;
  --ss-seafoam: #BBEFE0;

  /* Neutrals */
  --ss-white: #FFFFFF;
  --ss-ink: #1A1A1A;
  --ss-ink-soft: #2A2A2A;
  --ss-muted: #5A5A5A;
  --ss-muted-2: #7A7A7A;

  /* Surfaces */
  --ss-bg: var(--ss-white);
  --ss-surface: #FFFFFF;
  --ss-surface-2: #FAFAFB;
  --ss-surface-3: #F5F6F8;

  /* Borders (FIXED: valid alpha values) */
  --ss-border: rgba(26,26,26,.12);
  --ss-border-strong: rgba(26,26,26,.18);

  /* Semantic */
  --ss-success: #18A957;
  --ss-warning: #E2B93B;
  --ss-danger:  #D93C3C;

  /* Typography */
  --ss-font-body: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ss-font-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --ss-font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Type scale (fluid) */
  --ss-fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --ss-fs-sm: clamp(0.92rem, 0.88rem + 0.18vw, 1.00rem);
  --ss-fs-md: clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);
  --ss-fs-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.55rem);
  --ss-fs-xl: clamp(1.55rem, 1.30rem + 1.10vw, 2.15rem);
  --ss-fs-2xl: clamp(2.05rem, 1.65rem + 1.80vw, 3.05rem);

  /* Line-height + tracking */
  --ss-lh-tight: 1.08;
  --ss-lh-snug:  1.20;
  --ss-lh-body:  1.55;
  --ss-ls-tight: -0.02em;
  --ss-ls-wide:   0.06em;

  /* Layout (the only width system you need) */
  --ss-container: 1180px;
  --ss-gutter: clamp(1.0rem, 0.8rem + 1.2vw, 2.0rem);

  /* Section padding presets */
  --ss-section-pad-y: clamp(2.5rem, 2rem + 2.2vw, 5rem);
  --ss-section-pad-y-tight: clamp(1.8rem, 1.4rem + 1.6vw, 3.5rem);
  --ss-section-pad-y-loose: clamp(3.25rem, 2.6rem + 2.8vw, 6.25rem);

  /* Spacing scale */
  --ss-gap-1: .5rem;
  --ss-gap-2: .75rem;
  --ss-gap-3: 1rem;
  --ss-gap-4: 1.5rem;
  --ss-gap-5: 2rem;
  --ss-gap-6: 3rem;

  /* Radii */
  --ss-r-xs: 10px;
  --ss-r-sm: 14px;
  --ss-r-md: 18px;
  --ss-r-lg: 24px;
  --ss-r-xl: 32px;
  --ss-r-pill: 999px;

  /* Shadows (FIXED: valid alpha values) */
  --ss-shadow-sm: 0 8px 22px rgba(26,26,26,.08);
  --ss-shadow-md: 0 14px 40px rgba(26,26,26,.12);
  --ss-shadow-lg: 0 24px 70px rgba(26,26,26,.18);

  /* Focus ring */
  --ss-focus-ring: 0 0 0 3px rgba(255,44,86,.22);
  --ss-focus-ring-strong: 0 0 0 4px rgba(255,44,86,.30);

  /* Motion (FIXED cubic-bezier) */
  --ss-ease: cubic-bezier(.2,.8,.2,1);
  --ss-dur-1: 120ms;
  --ss-dur-2: 180ms;
  --ss-dur-3: 260ms;

  /* Links */
  --ss-link: var(--ss-ink);
  --ss-link-hover: var(--ss-pink);
  --ss-link-underline: rgba(255,44,86,.35);
  --ss-link-underline-hover: rgba(255,44,86,.70);

  /* Buttons */
  --ss-btn-height: 48px;
  --ss-btn-height-sm: 40px;
  --ss-btn-height-lg: 54px;
  --ss-btn-pad-x: 18px;
  --ss-btn-pad-x-sm: 14px;
  --ss-btn-pad-x-lg: 22px;
  --ss-btn-font: var(--ss-font-body);
  --ss-btn-weight: 600;
  --ss-btn-radius: var(--ss-r-pill);
  --ss-btn-shadow: var(--ss-shadow-sm);
  --ss-btn-shadow-hover: var(--ss-shadow-md);
  --ss-btn-border: rgba(26,26,26,.16);

  --ss-btn-primary-bg: var(--ss-pink);
  --ss-btn-primary-fg: #FFFFFF;

  --ss-btn-outline-bg: transparent;
  --ss-btn-outline-fg: var(--ss-ink);
  --ss-btn-outline-border: rgba(26,26,26,.20);

  --ss-btn-soft-bg: rgba(255,44,86,.10);
  --ss-btn-soft-fg: var(--ss-ink);

  /* Cards */
  --ss-card-bg: var(--ss-surface);
  --ss-card-bg-hover: var(--ss-surface-2);
  --ss-card-border: var(--ss-border);
  --ss-card-radius: var(--ss-r-lg);
  --ss-card-shadow: var(--ss-shadow-sm);
  --ss-card-shadow-hover: var(--ss-shadow-md);

  /* Badges */
  --ss-badge-bg: rgba(26,26,26,.06);
  --ss-badge-fg: var(--ss-ink);
  --ss-badge-border: rgba(26,26,26,.12);

  /* Luxe highlight */
  --ss-luxe-grad: linear-gradient(135deg,
    rgba(255,44,86,.14),
    rgba(133,191,214,.16),
    rgba(187,239,224,.16)
  );
  --ss-luxe-border: rgba(255,44,86,.18);
}

/* ---------- 2) BASE (minimal + safe) ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

body{
  margin: 0;
  color: var(--ss-ink);
  font-family: var(--ss-font-body);
  line-height: var(--ss-lh-body);
  background: var(--ss-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video{ max-width: 100%; height: auto; display: block; }

h1,h2,h3,h4{
  margin: 0 0 .45em 0;
  font-family: var(--ss-font-heading);
  letter-spacing: var(--ss-ls-tight);
  color: var(--ss-ink-soft);
  line-height: var(--ss-lh-snug);
}

p{ margin: 0 0 1em 0; }
p:last-child{ margin-bottom: 0; }

.ss-accent{
  font-family: var(--ss-font-accent);
  font-style: italic;
}

.ss-muted{ color: var(--ss-muted); }
.ss-muted-2{ color: var(--ss-muted-2); }
.ss-center{ text-align:center; }
.ss-left{ text-align:left; }
.ss-right{ text-align:right; }

/* ---------- 3) LAYOUT SYSTEM (ONLY CLASSES YOU NEED) ---------- */
/* OUTER wrapper: full width + vertical padding + gutter */
.ss-section{
  width: 100%;
  padding-block: var(--ss-section-pad-y);
  padding-inline: var(--ss-gutter);
}
.ss-section--tight{ padding-block: var(--ss-section-pad-y-tight); }
.ss-section--loose{ padding-block: var(--ss-section-pad-y-loose); }

/* INNER wrapper: max-width + centered */
.ss-container,
.ss-inner{
  width: 100%;
  max-width: var(--ss-container);
  margin-inline: auto;
}

/* Stacks/rows/grids */
.ss-stack{ display: flex; flex-direction: column; gap: var(--ss-gap-4); }
.ss-row{ display: flex; flex-wrap: wrap; gap: var(--ss-gap-4); }

.ss-grid{ display: grid; gap: var(--ss-gap-4); }
.ss-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px){
  .ss-grid-3, .ss-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .ss-grid-2, .ss-grid-3, .ss-grid-4{ grid-template-columns: 1fr; }
}

/* Optional background helpers (apply to OUTER container) */
.ss-bg-white{ background: var(--ss-white); }
.ss-bg-surface{ background: var(--ss-surface); }
.ss-bg-surface-2{ background: var(--ss-surface-2); }
.ss-bg-surface-3{ background: var(--ss-surface-3); }
.ss-bg-luxe{ background: var(--ss-luxe-grad); }

/* ---------- 4) LINKS ---------- */
a{
  color: var(--ss-link);
  text-decoration-color: var(--ss-link-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--ss-dur-2) var(--ss-ease),
              text-decoration-color var(--ss-dur-2) var(--ss-ease);
}
a:hover{
  color: var(--ss-link-hover);
  text-decoration-color: var(--ss-link-underline-hover);
}
a:active{ opacity: .85; }
a:focus-visible{
  outline: none;
  box-shadow: var(--ss-focus-ring);
  border-radius: 6px;
}

/* ---------- 5) BUTTONS (apply classes to Elementor Button widget) ---------- */
.ss-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  height: var(--ss-btn-height);
  padding: 0 var(--ss-btn-pad-x);
  border-radius: var(--ss-btn-radius);
  font-family: var(--ss-btn-font);
  font-weight: var(--ss-btn-weight);
  letter-spacing: .02em;
  border: 1px solid var(--ss-btn-border);
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
  transition: transform var(--ss-dur-2) var(--ss-ease),
              box-shadow var(--ss-dur-2) var(--ss-ease),
              background var(--ss-dur-2) var(--ss-ease),
              border-color var(--ss-dur-2) var(--ss-ease),
              color var(--ss-dur-2) var(--ss-ease);
}
.ss-btn:focus-visible{ outline: none; box-shadow: var(--ss-focus-ring-strong); }
.ss-btn:hover{ transform: translateY(-1px); box-shadow: var(--ss-btn-shadow-hover); }
.ss-btn:active{ transform: translateY(0px); box-shadow: var(--ss-btn-shadow); opacity: .95; }

/* Button sizes */
.ss-btn--sm{ height: var(--ss-btn-height-sm); padding: 0 var(--ss-btn-pad-x-sm); font-size: var(--ss-fs-sm); }
.ss-btn--lg{ height: var(--ss-btn-height-lg); padding: 0 var(--ss-btn-pad-x-lg); font-size: var(--ss-fs-md); }

/* Variants */
.ss-btn--primary{
  background: var(--ss-btn-primary-bg);
  color: var(--ss-btn-primary-fg);
  border-color: rgba(255,44,86,.35);
  box-shadow: var(--ss-btn-shadow);
}
.ss-btn--outline{
  background: var(--ss-btn-outline-bg);
  color: var(--ss-btn-outline-fg);
  border-color: var(--ss-btn-outline-border);
  box-shadow: none;
}
.ss-btn--soft{
  background: var(--ss-btn-soft-bg);
  color: var(--ss-btn-soft-fg);
  border-color: rgba(255,44,86,.16);
  box-shadow: none;
}
.ss-btn--ghost{
  background: transparent;
  color: var(--ss-ink);
  border-color: transparent;
  box-shadow: none;
}

/* ---------- 6) CARDS / PANELS ---------- */
.ss-card{
  background: var(--ss-card-bg);
  border: 1px solid var(--ss-card-border);
  border-radius: var(--ss-card-radius);
  box-shadow: var(--ss-card-shadow);
  padding: clamp(1.1rem, 1rem + .6vw, 1.6rem);
  transition: transform var(--ss-dur-2) var(--ss-ease),
              box-shadow var(--ss-dur-2) var(--ss-ease),
              background var(--ss-dur-2) var(--ss-ease);
}
.ss-card:hover{
  background: var(--ss-card-bg-hover);
  box-shadow: var(--ss-card-shadow-hover);
  transform: translateY(-2px);
}

.ss-panel{
  background: var(--ss-surface-2);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-r-xl);
  padding: clamp(1.25rem, 1.05rem + 1vw, 2rem);
}

.ss-luxe{
  background: var(--ss-luxe-grad);
  border: 1px solid var(--ss-luxe-border);
  border-radius: var(--ss-r-xl);
}

/* ---------- 7) BADGES ---------- */
.ss-badge{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: var(--ss-r-pill);
  background: var(--ss-badge-bg);
  color: var(--ss-badge-fg);
  border: 1px solid var(--ss-badge-border);
  font-size: var(--ss-fs-xs);
  letter-spacing: .03em;
}

/* ---------- 8) FORMS ---------- */
.ss-input{
  width: 100%;
  min-height: 46px;
  padding: .65rem .9rem;
  border-radius: var(--ss-r-md);
  border: 1px solid var(--ss-border-strong);
  background: var(--ss-white);
  color: var(--ss-ink);
  transition: box-shadow var(--ss-dur-2) var(--ss-ease),
              border-color var(--ss-dur-2) var(--ss-ease);
}
.ss-input:focus{
  outline: none;
  border-color: rgba(255,44,86,.35);
  box-shadow: var(--ss-focus-ring);
}

/* ---------- 9) WYSIWYG / RICH TEXT WRAPPER (optional but useful) ---------- */
/* Apply .ss-prose to any container that holds ACF WYSIWYG content */
.ss-prose p{ margin: 0 0 1em 0; }
.ss-prose ul, .ss-prose ol{ margin: 0 0 1em 1.2em; padding: 0; }
.ss-prose li{ margin: .35em 0; }
.ss-prose h2{ margin-top: 1.2em; }
.ss-prose h3{ margin-top: 1.0em; }

/* ---------- 10) ACCESSIBILITY: REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
  .ss-btn:hover, .ss-card:hover{ transform: none !important; }
}

/* =========================================================
   PATCH: Elementor Button Widget — remove gray inner box
   Applies ONLY when you add class "ss-btn" to the Button widget
   ========================================================= */

/* Reset Elementor’s inner spans that are getting the gray box */
.elementor-widget-button .elementor-button.ss-btn .elementor-button-content-wrapper,
.elementor-widget-button .elementor-button.ss-btn .elementor-button-text{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Make sure Elementor doesn’t override your core ss-btn sizing */
.elementor-widget-button .elementor-button.ss-btn{
  min-height: var(--ss-btn-height) !important;
  padding: 0 var(--ss-btn-pad-x) !important;
  border-radius: var(--ss-btn-radius) !important;
  text-decoration: none !important;
}

/* Re-assert variants (in case Elementor has inline/theme styles) */
.elementor-widget-button .elementor-button.ss-btn.ss-btn--primary{
  background: var(--ss-btn-primary-bg) !important;
  color: var(--ss-btn-primary-fg) !important;
  border-color: rgba(255,44,86,.35) !important;
  box-shadow: var(--ss-btn-shadow) !important;
}

.elementor-widget-button .elementor-button.ss-btn.ss-btn--outline{
  background: transparent !important;
  color: var(--ss-btn-outline-fg) !important;
  border-color: var(--ss-btn-outline-border) !important;
  box-shadow: none !important;
}

.elementor-widget-button .elementor-button.ss-btn.ss-btn--soft{
  background: var(--ss-btn-soft-bg) !important;
  color: var(--ss-btn-soft-fg) !important;
  border-color: rgba(255,44,86,.16) !important;
  box-shadow: none !important;
}

/* Hover polish (helps if Elementor overrides hover styles) */
.elementor-widget-button .elementor-button.ss-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--ss-btn-shadow-hover) !important;
}
/* =========================================================
   SS Buttons — Elementor Normalize + Bridge (robust)
   Handles both:
   1) <a class="elementor-button ss-btn ...">
   2) <div class="elementor-widget-button ss-btn ..."> <a class="elementor-button">
   ========================================================= */

/* Apply SS button base to the actual clickable element */
.elementor-widget-button.ss-btn .elementor-button,
.elementor-button.ss-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--ss-btn-height) !important;
  padding: 0 var(--ss-btn-pad-x) !important;
  border-radius: var(--ss-btn-radius) !important;

  border: 1px solid var(--ss-btn-border) !important;
  background: transparent !important;
  color: var(--ss-ink) !important;

  text-decoration: none !important;
  box-shadow: none !important;
}

/* Kill Elementor’s inner gray “text box” */
.elementor-widget-button.ss-btn .elementor-button-content-wrapper,
.elementor-widget-button.ss-btn .elementor-button-text,
.elementor-button.ss-btn .elementor-button-content-wrapper,
.elementor-button.ss-btn .elementor-button-text{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Variants — wrapper OR anchor */
.elementor-widget-button.ss-btn--primary .elementor-button,
.elementor-button.ss-btn--primary{
  background: var(--ss-btn-primary-bg) !important;
  color: var(--ss-btn-primary-fg) !important;
  border-color: rgba(255,44,86,.35) !important;
  box-shadow: var(--ss-btn-shadow) !important;
}

.elementor-widget-button.ss-btn--outline .elementor-button,
.elementor-button.ss-btn--outline{
  background: transparent !important;
  color: var(--ss-btn-outline-fg) !important;
  border-color: var(--ss-btn-outline-border) !important;
  box-shadow: none !important;
}

.elementor-widget-button.ss-btn--soft .elementor-button,
.elementor-button.ss-btn--soft{
  background: var(--ss-btn-soft-bg) !important;
  color: var(--ss-btn-soft-fg) !important;
  border-color: rgba(255,44,86,.16) !important;
  box-shadow: none !important;
}

/* Hover */
.elementor-widget-button.ss-btn .elementor-button:hover,
.elementor-button.ss-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--ss-btn-shadow-hover) !important;
}
/* =========================================================
   FINAL FIX: Elementor Button + SS Buttons (no double-pill, no italics)
   ========================================================= */

/* 1) NEVER allow the Elementor widget wrapper to look like a button */
.elementor-widget-button.ss-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* 2) Force the REAL clickable element to use SS button typography (kills italics/serif) */
.elementor-widget-button.ss-btn .elementor-button{
  font-family: var(--ss-btn-font) !important;
  font-weight: var(--ss-btn-weight) !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  text-transform: none !important;
}

/* Also normalize the inner spans (some themes style these directly) */
.elementor-widget-button.ss-btn .elementor-button-text,
.elementor-widget-button.ss-btn .elementor-button-content-wrapper{
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* 3) Extra-safe: prevent variant classes on the wrapper from ever “painting” behind the anchor */
.elementor-widget-button.ss-btn.ss-btn--primary,
.elementor-widget-button.ss-btn.ss-btn--outline,
.elementor-widget-button.ss-btn.ss-btn--soft{
  background: transparent !important;
}
/* ST01 — align CTAs with the copy */
.ss-st01__ctas{
  justify-content: flex-start !important;
  align-items: center !important;
}
.ss-st01__ctas .elementor-widget-button{
  margin: 0 !important;
}
@media (min-width:1025px){
  .ss-st01__ctas{
    display:flex !important;
    flex-wrap:wrap !important;
    gap: var(--ss-gap-3) !important;
  }
}
@media (max-width:1024px){
  .ss-st01__ctas{
    display:grid !important;
    gap: var(--ss-gap-3) !important;
  }
}
/* ST01 — CTAs: Primary+Secondary row, Tertiary centered below */
.ss-st01 .ss-st01__ctas{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: var(--ss-gap-3) !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

/* Remove random widget spacing Elementor can add */
.ss-st01 .ss-st01__ctas .elementor-widget-button{
  margin: 0 !important;
}

/* Tertiary CTA: full row + centered */
.ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary{
  flex: 0 0 100% !important;
  display:flex !important;
  justify-content:center !important;
}

/* Optional: make the tertiary smaller so it doesn't compete */
.ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary .elementor-button{
  height: var(--ss-btn-height-sm, 40px) !important;
  padding: 0 var(--ss-btn-pad-x-sm, 18px) !important;
  font-size: var(--ss-fs-sm, 0.95rem) !important;
}
/* ST01 — make Primary + Secondary equal width */
@media (min-width:1025px){
  /* Make all CTA widgets equal by default... */
  .ss-st01 .ss-st01__ctas .elementor-widget-button{
    flex: 1 1 0 !important;
  }

  /* ...but keep the tertiary on its own centered row */
  .ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary{
    flex: 0 0 100% !important;
    justify-content: center !important;
  }

  /* Make the clickable button fill its widget width */
  .ss-st01 .ss-st01__ctas .elementor-button{
    width: 100% !important;
  }
}
/* =========================================================
   SS Buttons — Luxe Skin (global)
   Paste AFTER your Elementor bridge button CSS
   ========================================================= */

.elementor-widget-button.ss-btn .elementor-button,
.elementor-button.ss-btn{
  height: 50px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;

  font-family: var(--ss-font-body) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: var(--ss-fs-sm) !important;
  letter-spacing: .04em !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(26,26,26,.14) !important;

  box-shadow: 0 10px 28px rgba(26,26,26,.08) !important;
  transform: translateZ(0) !important; /* crisp edges */
}

/* Primary — richer, more “executive” */
.elementor-widget-button.ss-btn--primary .elementor-button,
.elementor-button.ss-btn--primary{
  background: linear-gradient(180deg, #FF2C56 0%, #F61F4A 100%) !important;
  color: #fff !important;
  border-color: rgba(255,44,86,.25) !important;
  box-shadow: 0 16px 40px rgba(255,44,86,.18), 0 10px 26px rgba(26,26,26,.10) !important;
}

/* Outline — softer, not harsh black */
.elementor-widget-button.ss-btn--outline .elementor-button,
.elementor-button.ss-btn--outline{
  background: rgba(255,255,255,.92) !important;
  color: var(--ss-ink-soft) !important;
  border-color: rgba(26,26,26,.18) !important;
  box-shadow: 0 10px 28px rgba(26,26,26,.06) !important;
}

/* Soft — cleaner, more intentional */
.elementor-widget-button.ss-btn--soft .elementor-button,
.elementor-button.ss-btn--soft{
  background: rgba(255,44,86,.08) !important;
  color: var(--ss-ink-soft) !important;
  border-color: rgba(255,44,86,.14) !important;
  box-shadow: 0 10px 28px rgba(26,26,26,.05) !important;
}

/* Hover / Focus polish */
.elementor-widget-button.ss-btn .elementor-button:hover,
.elementor-button.ss-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 54px rgba(26,26,26,.12) !important;
}

.elementor-widget-button.ss-btn .elementor-button:focus-visible,
.elementor-button.ss-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255,44,86,.22), 0 18px 54px rgba(26,26,26,.12) !important;
}
/* =========================================================
   ST01 — CTAs: equal width, grouped, tertiary centered
   ========================================================= */

.ss-st01 .ss-st01__ctas{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 12px !important;
  justify-content:flex-start !important;
  align-items:center !important;

  max-width: 520px !important; /* keeps the pair from stretching wide */
}

/* Primary + Secondary: same width */
@media (min-width: 768px){
  .ss-st01 .ss-st01__ctas .elementor-widget-button{
    flex: 0 0 calc(50% - 6px) !important;
  }
  .ss-st01 .ss-st01__ctas .elementor-button{
    width: 100% !important;
  }
}

/* Tertiary: full row + centered (add this class to the tertiary widget) */
.ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary{
  flex: 0 0 100% !important;
  display:flex !important;
  justify-content:center !important;
}

/* Mobile: stack full width */
@media (max-width: 767px){
  .ss-st01 .ss-st01__ctas .elementor-widget-button{
    flex: 0 0 100% !important;
  }
}
/* =========================================
   ST01 — Luxe CTA Layout (grouped + balanced)
   ========================================= */

.ss-st01 .ss-st01__ctas{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px 16px !important;
  max-width: 520px !important; /* keeps the pair feeling “designed” */
  align-items: center !important;
}

.ss-st01 .ss-st01__ctas .elementor-widget-button{
  margin: 0 !important;
}

.ss-st01 .ss-st01__ctas .elementor-button{
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Tertiary centered below */
.ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary{
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

.ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary .elementor-button{
  width: auto !important;
  min-width: 160px !important;
}

@media (max-width: 767px){
  .ss-st01 .ss-st01__ctas{
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
  }
  .ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary{
    justify-self: stretch !important;
  }
  .ss-st01 .ss-st01__ctas .elementor-widget-button.ss-st01__cta-tertiary .elementor-button{
    width: 100% !important;
  }
}
/* =========================================
   ST01 — Luxe Button Skin (overrides global)
   ========================================= */

/* Kill any wrapper paint (prevents double-pill artifacts) */
.ss-st01 .elementor-widget-button.ss-btn,
.ss-st01 .elementor-widget-button.ss-btn--primary,
.ss-st01 .elementor-widget-button.ss-btn--outline,
.ss-st01 .elementor-widget-button.ss-btn--soft{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Base button */
.ss-st01 .elementor-widget-button.ss-btn .elementor-button{
  height: 52px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;

  font-family: var(--ss-font-body, inherit) !important;
  font-weight: 650 !important;
  font-style: normal !important;
  letter-spacing: .03em !important;

  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

/* Primary (rich + minimal glow) */
.ss-st01 .elementor-widget-button.ss-btn--primary .elementor-button{
  background: linear-gradient(180deg, #FF2C56 0%, #F61F4A 100%) !important;
  color: #fff !important;
  border-color: rgba(255,44,86,.22) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important; /* no pink glow */
}

/* Outline (soft, premium, not harsh) */
.ss-st01 .elementor-widget-button.ss-btn--outline .elementor-button{
  background: rgba(255,255,255,.88) !important;
  color: rgba(0,0,0,.78) !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
}

/* Soft tertiary (quiet + intentional) */
.ss-st01 .elementor-widget-button.ss-btn--soft .elementor-button{
  height: 44px !important;                /* smaller = clearly tertiary */
  padding: 0 18px !important;
  background: rgba(255,44,86,.08) !important;
  color: rgba(0,0,0,.72) !important;
  border-color: rgba(255,44,86,.16) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05) !important;
}

/* Hover polish */
.ss-st01 .elementor-widget-button.ss-btn .elementor-button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.12) !important;
}
/* =========================================================
   PATCH (Global) — Centered-by-default + Luxe Details
   Applies to Sanna Styles utility classes (.ss-*)
   ========================================================= */

/* ---------- A1) Center EVERYTHING by default (SS system only) ---------- */
.ss-stack,
.ss-row{
  align-items: center;
  justify-content: center; /* harmless for auto-height containers; centers when height exists */
  text-align: center;
}

.ss-grid{
  place-items: center; /* centers items inside grid cells */
  text-align: center;
}

/* Cards should feel intentionally centered */
.ss-card,
.ss-panel,
.ss-luxe{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* WYSIWYG blocks should not shrink and should remain readable */
.ss-prose{
  width: 100%;
}

/* Lists should stay readable (left-aligned) even inside centered sections */
.ss-prose ul,
.ss-prose ol{
  text-align: left;
  margin-inline: auto;
  max-width: 60ch; /* keeps lists from looking awkward when centered */
}

/* Elementor images: center by default */
.ss-section .elementor-widget-image img{
  margin-inline: auto;
}

/* ---------- A2) Global alignment override utilities (use anywhere) ---------- */
/* Use these on specific containers/widgets when you need left/start alignment */
.ss-align-start{ align-items: flex-start !important; }
.ss-align-end{ align-items: flex-end !important; }

.ss-justify-start{ justify-content: flex-start !important; }
.ss-justify-end{ justify-content: flex-end !important; }

/* Grid overrides */
.ss-place-start{ place-items: start !important; text-align: left !important; }
.ss-place-center{ place-items: center !important; text-align: center !important; }
.ss-place-end{ place-items: end !important; text-align: right !important; }

/* Text overrides (you already have ss-left/ss-right; keeping these as explicit helpers) */
.ss-text-left{ text-align: left !important; }
.ss-text-right{ text-align: right !important; }

/* ---------- A3) Luxe <details>/<summary> accordion component ---------- */
/* Targets details inside SS prose blocks (WYSIWYG) */
.ss-prose details{
  width: 100%;
  max-width: 100%;
  display: block;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-r-lg);
  background: var(--ss-white);
  box-shadow: var(--ss-shadow-sm);
  overflow: hidden;
  transition:
    transform var(--ss-dur-2) var(--ss-ease),
    box-shadow var(--ss-dur-2) var(--ss-ease),
    border-color var(--ss-dur-2) var(--ss-ease),
    background var(--ss-dur-2) var(--ss-ease);
}

/* Full-width summary (prevents “shrink to content”) */
.ss-prose summary{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-gap-3);
  padding: 1rem 1.1rem;
  min-height: 56px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ss-ink-soft);
  list-style: none;
  user-select: none;
  background: transparent;
  transition:
    background var(--ss-dur-2) var(--ss-ease),
    color var(--ss-dur-2) var(--ss-ease);
}

/* Remove default marker */
.ss-prose summary::-webkit-details-marker{ display:none; }

/* Chevron */
.ss-prose summary::after{
  content: "›";
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(26,26,26,.55);
  transform: rotate(90deg);
  transition: transform var(--ss-dur-2) var(--ss-ease),
              color var(--ss-dur-2) var(--ss-ease);
}

/* Hover/active/focus */
.ss-prose details:hover{
  border-color: var(--ss-border-strong);
  box-shadow: var(--ss-shadow-md);
  transform: translateY(-1px);
}
.ss-prose summary:hover{
  background: rgba(26,26,26,.03);
}
.ss-prose summary:active{
  background: rgba(26,26,26,.05);
}
.ss-prose summary:focus-visible{
  outline: none;
  box-shadow: var(--ss-focus-ring-strong);
  border-radius: 10px;
}

/* Open state */
.ss-prose details[open]{
  background: var(--ss-surface-2);
  border-color: rgba(255,44,86,.22);
  box-shadow: var(--ss-shadow-md);
}
.ss-prose details[open] summary{
  color: var(--ss-ink);
}
.ss-prose details[open] summary::after{
  transform: rotate(-90deg);
  color: rgba(255,44,86,.70);
}

/* Content area */
.ss-prose details > *:not(summary){
  padding: 0 1.1rem 1.1rem 1.1rem;
  text-align: left; /* readable content */
  max-width: 70ch;
  margin-inline: auto;
}

/* Optional: keep accordion “size” consistent when open (scroll inside) */
.ss-prose details[open] > *:not(summary){
  max-height: 220px;
  overflow: auto;
}
/* =========================================================
   SS ACCORDIONS — FINAL GLOBAL
   Premium + fixed width (no shrink/grow) + states
   Scope: <details> inside .ss-prose
   ========================================================= */

/* HARD WIDTH LOCK (prevents shrink-wrap inside centered flex/grid parents) */
.ss-prose{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  align-self: stretch !important;
}
.ss-prose .elementor-widget-container{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Accordion wrapper */
.ss-prose details{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;

  margin: 0 0 var(--ss-gap-3) 0;
  border: 1px solid rgba(255,44,86,.14);
  border-radius: var(--ss-r-lg);
  background: var(--ss-white);
  box-shadow: var(--ss-shadow-sm);
  overflow: hidden;
  position: relative;

  transition:
    transform var(--ss-dur-2) var(--ss-ease),
    box-shadow var(--ss-dur-2) var(--ss-ease),
    border-color var(--ss-dur-2) var(--ss-ease),
    background var(--ss-dur-2) var(--ss-ease);
}

/* Subtle accent rail (visible even when closed) */
.ss-prose details::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(255,44,86,.28);
  opacity: .35;
  transition: opacity var(--ss-dur-2) var(--ss-ease);
}

/* Summary (full width, slightly colorful even when closed) */
.ss-prose summary{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;

  align-items: center;
  justify-content: space-between;
  gap: var(--ss-gap-3);

  padding: .95rem 1.15rem;
  min-height: 58px;

  cursor: pointer;
  user-select: none;
  list-style: none;

  font-weight: 600;
  color: var(--ss-ink-soft);

  background: linear-gradient(135deg,
    rgba(255,44,86,.05),
    rgba(133,191,214,.04),
    rgba(187,239,224,.04)
  );

  transition:
    background var(--ss-dur-2) var(--ss-ease),
    color var(--ss-dur-2) var(--ss-ease);
}
.ss-prose summary::-webkit-details-marker{ display:none; }

/* Chevron pill = obvious accordion affordance */
.ss-prose summary::after{
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  border-radius: var(--ss-r-pill);
  border: 1px solid rgba(26,26,26,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(26,26,26,.08);

  color: rgba(26,26,26,.58);
  transform: rotate(90deg);

  transition:
    transform var(--ss-dur-2) var(--ss-ease),
    color var(--ss-dur-2) var(--ss-ease),
    background var(--ss-dur-2) var(--ss-ease),
    border-color var(--ss-dur-2) var(--ss-ease),
    box-shadow var(--ss-dur-2) var(--ss-ease);
}

/* HOVER */
.ss-prose details:hover{
  border-color: var(--ss-border-strong);
  box-shadow: var(--ss-shadow-md);
  transform: translateY(-1px);
}
.ss-prose details:hover summary{
  background: linear-gradient(135deg,
    rgba(255,44,86,.08),
    rgba(133,191,214,.06),
    rgba(187,239,224,.06)
  );
}
.ss-prose details:hover summary::after{
  border-color: rgba(255,44,86,.18);
  box-shadow: 0 12px 26px rgba(26,26,26,.10);
}

/* ACTIVE (mouse down) */
.ss-prose summary:active{
  background: rgba(26,26,26,.06);
}

/* FOCUS (keyboard) */
.ss-prose summary:focus-visible{
  outline: none;
  box-shadow: var(--ss-focus-ring-strong);
  border-radius: 12px;
}

/* OPEN (active) */
.ss-prose details[open]{
  border-color: rgba(255,44,86,.22);
  background: linear-gradient(135deg,
    rgba(255,44,86,.06),
    rgba(133,191,214,.06),
    rgba(187,239,224,.06)
  );
  box-shadow: var(--ss-shadow-md);
}
.ss-prose details[open]::before{ opacity: 1; }

.ss-prose details[open] summary{
  color: var(--ss-ink);
  background: rgba(255,255,255,.55);
}
.ss-prose details[open] summary::after{
  transform: rotate(-90deg);
  color: rgba(255,44,86,.80);
  border-color: rgba(255,44,86,.22);
}

/* Body (prevents width shift + stays premium) */
.ss-prose details > *:not(summary){
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  padding: 0 1.15rem 1.15rem 1.15rem;
  text-align: left;
  border-top: 1px solid rgba(26,26,26,.08);

  scrollbar-gutter: stable; /* prevents “width shift” */
}
/* =========================================================
   Accordion — Add inner gutter so summary isn't flush to border
   ========================================================= */

.ss-prose details{
  padding: 10px;                 /* creates the inner breathing room */
}

/* Summary still feels full-width, but now sits with a gutter */
.ss-prose summary{
  margin: -10px;                 /* cancels wrapper padding */
  padding: 1rem 1.15rem;         /* your normal summary padding */
  border-radius: calc(var(--ss-r-lg) - 10px);
}

/* Body content aligns with the new gutter */
.ss-prose details > *:not(summary){
  padding: 0 1.15rem 1.15rem 1.15rem; /* keep consistent */
}
/* GLOBAL PATCH — Accordion body needs breathing room under the summary */
.ss-prose details > summary + *{
  padding-top: .75rem;
}/* GLOBAL PATCH — accordion body text sits too high */
.ss-prose details > *:not(summary){
  padding-top: .85rem !important;
}