/* ===========================
   SamCart Branding — J's Palette + S3 Fonts
   Host this file on S3 and link it in SamCart's Header
   =========================== */

:root{
  --brand-bg:#ffecb4;          /* page background */
  --brand-text:#2a2a2a;        /* primary body text */
  --brand-muted:#5f5f5f;       /* secondary text */
  --brand-border:#eadb9f;      /* subtle border on cards/fields */
  --brand-cta:#b8b820;         /* button base */
  --brand-cta-hover:#9c9c1b;   /* button hover */
  --brand-accent:#e7c1cc;      /* pink accent/focus */
  --brand-heading:#4a4813;     /* headings */
  --brand-success:#198754;
  --brand-error:#D11A2A;
  --radius:16px;
  --gap:20px;
  --font-sans:"Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:"CardinalPhoto", var(--font-sans); /* switch to "CardinalClassicShort" if you prefer */
}

/* ===== Fonts (OTF on S3) ===== */
@font-face{
  font-family:"Stratos";
  src:url("https://embodiedmovement.s3.amazonaws.com/StratosRegular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Stratos";
  src:url("https://embodiedmovement.s3.amazonaws.com/StratosMedium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"CardinalPhoto";
  src:url("https://embodiedmovement.s3.amazonaws.com/cardinalphoto-bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"CardinalClassicShort";
  src:url("https://embodiedmovement.s3.amazonaws.com/cardinalclassicshort-medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}

/* Force stacks so they beat template styles */
html, body, *:not(i):not(svg):not([class*="icon"]) {
  font-family: "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
h1, h2, h3, .page-title, .product-title, .section-title {
  font-family: "CardinalPhoto", "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


/* Force global font */
html, body, *:not(i):not(svg):not([class*="icon"]) {
  font-family: var(--font-sans) !important;
}

/* Force headings to your display font */
h1, h2, h3, .page-title, .product-title, .section-title {
  font-family: var(--font-head) !important;
}

/* Remove uppercase from all headings */
h1, h2, h3, .page-title, .section-title {
  text-transform: none !important;
}

/* kill uppercase on those section headings */
html body h3.mb-24.text-uppercase.text-uppercase {
  text-transform: none !important;
}

/* global override for any .text-uppercase inside checkout */
html body .text-uppercase.text-uppercase {
  text-transform: none !important;
}



/* ===== Base ===== */
html,body{
  background:var(--brand-bg) !important;
  color:var(--brand-text) !important;
  font-family:var(--font-sans) !important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container,.sc-page,.checkout-container,main{
  max-width:980px !important; margin:0 auto !important; padding:24px 20px !important;
}

/* ===== Typography ===== */
h1,.page-title,.product-title{
  color:var(--brand-heading) !important;
  font-family:var(--font-head) !important;
  letter-spacing:-0.01em; line-height:1.15; margin-bottom:12px !important;
}
h2,h3,.section-title{
  color:var(--brand-heading) !important;
  font-family:var(--font-head) !important; line-height:1.2;
}
p,li,small,label,.help-text{ color:var(--brand-text) !important; }
.muted,.subtle,.hint{ color:var(--brand-muted) !important; }

/* ===== Cards / Sections ===== */
.section,.card,.order-summary,.sidebar,.guarantee,.testimonials{
  background:#fff !important; border:1px solid var(--brand-border) !important;
  border-radius:var(--radius) !important; box-shadow:0 8px 24px rgba(0,0,0,.04) !important;
  padding:20px !important; margin-bottom:var(--gap) !important;
}

/* ===== Inputs ===== */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],select,textarea{
  background:#fff !important; border:1px solid var(--brand-border) !important; border-radius:12px !important;
  padding:12px 14px !important; font-size:16px !important; line-height:1.3 !important; outline:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand-accent) !important;
  box-shadow:0 0 0 3px rgba(231,193,204,.35) !important;
}
label{ font-weight:500 !important; margin-bottom:6px !important; display:inline-block !important; }
input::placeholder{ color:#8a8a8a !important; }

/* ===== Buttons ===== */
button,.btn,input[type="submit"],.submit,.checkout-button{
  background:var(--brand-cta) !important; border:1px solid var(--brand-cta) !important;
  color:#1b1b1b !important; /* better contrast than white on #b8b820 */
  border-radius:999px !important; padding:14px 22px !important;
  font-weight:700 !important; font-family:var(--font-head) !important;
  transition:transform .04s ease, background-color .15s ease, border-color .15s ease;
}
button:hover,.btn:hover,input[type="submit"]:hover,.submit:hover,.checkout-button:hover{
  background:var(--brand-cta-hover) !important; border-color:var(--brand-cta-hover) !important; transform:translateY(-1px);
}
button:active,.btn:active,input[type="submit"]:active,.submit:active,.checkout-button:active{ transform:translateY(0); }
a,.link{ color:var(--brand-heading) !important; text-decoration:none !important; }
a:hover{ color:var(--brand-cta-hover) !important; text-decoration:underline !important; }

/* ===== Order Summary ===== */
.order-summary .line-item,.order-summary .total{
  border-bottom:1px solid var(--brand-border) !important; padding:10px 0 !important;
}
.order-summary .total{ font-weight:700 !important; color:var(--brand-heading) !important; }

/* ===== Notices ===== */
.alert-success,.notice-success{ background:#F1FCF6 !important; border:1px solid #C7F0DE !important; color:var(--brand-success) !important; }
.alert-error,.notice-error,.error{ background:#FFF5F5 !important; border:1px solid #F9C7CC !important; color:var(--brand-error) !important; }
.field-error input,.field-error select{ border-color:var(--brand-error) !important; }

/* ===== Testimonial micro-block ===== */
.testimonials .testimonial,.testimonial,.quote{
  border-left:4px solid var(--brand-accent) !important; padding-left:14px !important; color:var(--brand-text) !important;
}
.testimonial cite,.quote .author{ display:block; margin-top:8px; color:var(--brand-muted) !important; }

/* ===== Hide noisy badges/logos (optional) ===== */
.samcart-badges,.powered-by,.template-credit,.security-logos,.sc-security-logos,.payment-logos,.sc-logos,.footer-logos{
  display:none !important; height:0 !important; overflow:hidden !important;
}

/* ===== Rhythm + polish ===== */
.section + .section{ margin-top:var(--gap) !important; }
.form-row{ margin-bottom:14px !important; }
hr{ border:none !important; border-top:1px solid var(--brand-border) !important; margin:16px 0 !important; }

/* ===== Mobile ===== */
@media (max-width:768px){
  .container,.sc-page,.checkout-container,main{ padding:16px 14px !important; }
  h1,.page-title{ font-size:28px !important; }
  button,.btn,input[type="submit"],.checkout-button{ width:100% !important; }
  .sidebar{ order:2; }
}

/* ===== Keep header blocks consistent ===== */
.header,.hero{ background:var(--brand-bg) !important; color:var(--brand-heading) !important; }

/* Force buttons to Stratos Regular (no faux-bold) */
html body button,
html body .btn,
html body input[type="submit"],
html body .submit,
html body .checkout-button {
  font-family: "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;      /* Regular */
  font-style: normal !important;
  font-synthesis: none !important;  /* prevent browser from faking bold */
}


/* Custom heading in your checkout HTML block */
html body h1.em {
  text-transform: none !important;
  font-family: "CardinalPhoto", "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;   /* 24px ≈ 18pt; web uses px */
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--brand-heading, #4a4813) !important;
  font-synthesis: none !important; /* don’t fake bold */
  margin: 0 0 8px !important;
}

/* Optional: tweak size on small screens */
@media (max-width: 480px) {
  html body h1.em { font-size: 22px !important; }
}

/* Price total → Stratos Regular in brand color */
html body #total,
html body span.invoice-item-amount#total {
  font-family: "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variant-numeric: tabular-nums !important;
  color: #4a4813 !important; /* brand heading color */
}

/* "Total:" label → Stratos Regular, brand color, not bold */
html body .order-summary .total .invoice-item-label,
html body span.invoice-item-label.invoice-item-label {
  font-family: "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;   /* remove bold */
  font-style: normal !important;
  color: #4a4813 !important;     /* brand heading color */
  letter-spacing: 0 !important;
  font-synthesis: none !important;
}

/* Just in case SamCart wraps with <strong>/<b> somewhere */
html body .invoice-item-label strong,
html body .invoice-item-label b {
  font-weight: 400 !important;
}

/* Support email → Stratos Regular */
html body p.support-contact,
html body p.support-contact a {
  font-family: "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important; /* no faux-bold/italic */
  letter-spacing: 0 !important;
}

/* Inline brand header with icon */
html body .brand-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important; /* space between icon and text */
}

html body .brand-inline .brand-icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

html body .brand-inline h1.em {
  margin: 0 !important;
  text-transform: none !important;
  font-family: "CardinalPhoto", "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;  /* you asked for 24px */
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #4a4813 !important;
  font-synthesis: none !important;
}

/* Inline icon + text fine-tune */
html body h1.em {
  display: inline-flex !important;
  align-items: center !important;     /* vertically center */
  gap: 14px !important;               /* tiny bit more space than before */
  line-height: 1.1 !important;        /* keeps the row compact */
}

/* Nudge the icon up 1px so the text sits a smidge lower relative to it */
html body h1.em .brand-icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  transform: translateY(-2px) !important;  /* tweak to -2px if you want even lower text */
}

/* Product block: tighten left indent + tidy spacing */
html body ul.product-desc {
  margin-left: 0 !important;
  padding-left: 16px !important;   /* try 14–18px to taste */
  margin-top: 6px !important;
}

html body ul.product-desc li {
  margin: 4px 0 !important;
}

/* Optional: make bullets on-brand */
html body ul.product-desc li::marker {
  color: #4a4813 !important;       /* brand heading color */
}

/* Optional: match the subhead style */
html body h4.product-head {
  margin: 0 0 10px !important;
  font-family: "CardinalPhoto","Stratos",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;      /* bump to 22px if you want more presence */
  color: #4a4813 !important;
  text-transform: none !important;
}

/* Order Summary: remove gray background entirely */
html body #order-summary-widget,
html body #order-summary-widget .box,
html body #order-summary-widget .invoice-item {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Global: make ALL form labels bigger & clearer */
html body label,
html body .control-label,
html body .checkbox label,
html body .radio label {
  font-family: "Stratos", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;      /* good accessibility target */
  line-height: 1.3 !important;
  font-weight: 500 !important;      /* readable without shouting */
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 6px !important;
  /* Optional: use brand heading color instead of body color */
  /* color: #4a4813 !important; */
}

/* Slight tuck on very small screens */
@media (max-width: 420px) {
  html body label,
  html body .control-label,
  html body .checkbox label,
  html body .radio label {
    font-size: 15px !important;
  }
}

/* Secure checkout note right under the CTA */
html body #placeOrder {
  position: relative !important;
  margin-bottom: 28px !important; /* room for the note */
}

html body #placeOrder::after {
  content: "🔒 Secure checkout via Stripe • 256-bit SSL";
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  font-size: 13px;
  color: #4a4813;          /* brand color */
  opacity: .8;
  text-align: center;
  pointer-events: none;
  margin: 5px 0;
}

@media (max-width: 400px) {
  html body #placeOrder::after { font-size: 12px; }
}

@media (max-width: 768px){
  .hb-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:12px;background:#ffecb4;border-top:1px solid #eadb9f}
  .hb-sticky-cta .btn{width:100%;background:#b8b820;color:#1b1b1b;border-radius:999px;padding:14px 18px;font-weight:700}
  .hb-sticky-cta .plan{display:block;margin-top:6px;text-align:center;font-size:13px}
}

/* Testimonial + attribution tweaks */
html body p.testimonial {
  font-style: italic !important;
  color: #a66f0a !important;
}

html body p.logo {
  font-size: 11pt !important;
  color: #4a4813 !important;
}