/* NOTE: all sizes are in px, not rem, on purpose.
   The mockup is authored against a 16px root; this site's theme sets the root
   to 18px, which scaled every rem value up by 12.5% (the seal text overflowed
   its circle, the hook line and H1 ran oversized). Pinning to px makes the
   landing page immune to the theme's root font-size. Keep it that way.
*/
/* ==========================================================================
   Savings for Wealth — single product landing page
   Ported from mockup.html. Every rule is scoped to .sfw-lp so nothing
   leaks into the Writee header, nav, sidebar, or footer.
   ========================================================================== */

.sfw-lp{
  /* Warm paper base */
  --paper:#f7f3ec;
  --paper-2:#efe8db;
  --paper-3:#e7dfce;
  --paper-4:#fbf8f2;
  /* Brand palette from the Savings for Wealth logo */
  --ink:#0e2547;
  --ink-2:#1c4a86;
  --ink-mute:#5a6a86;
  --rule:#d9cdb3;
  --rule-2:#c8bda3;
  --green:#3fa839;
  --green-dk:#2f8a2c;
  --green-ink:#1e5f1c;
  --gold:#f2b31d;
  --gold-dk:#c88a10;
  --sample:#b34a2b;
  --sans:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:'Fraunces', Georgia, "Times New Roman", serif;
  --shadow-soft: 0 1px 0 rgba(14,37,71,.06), 0 20px 40px -28px rgba(14,37,71,.28);
  --shadow-lift: 0 1px 0 rgba(14,37,71,.08), 0 30px 60px -30px rgba(14,37,71,.35);

  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(rgba(14,37,71,.025) 1px, transparent 1px),
    radial-gradient(rgba(14,37,71,.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.sfw-lp *{box-sizing:border-box}
.sfw-lp ::selection{background:var(--gold);color:var(--ink)}
.sfw-lp a{color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(28,74,134,.35)}
.sfw-lp a:hover{color:var(--green-dk);text-decoration-color:var(--green)}
.sfw-lp img{max-width:100%;display:block;height:auto}
.sfw-lp h1,.sfw-lp h2,.sfw-lp h3,.sfw-lp h4{font-family:var(--serif);font-weight:600;letter-spacing:-0.015em;line-height:1.08;margin:0 0 .5em;color:var(--ink);text-transform:none}
.sfw-lp h1{font-size:clamp(36.8px,4.8vw,60.8px);letter-spacing:-0.025em}
.sfw-lp h2{font-size:clamp(28px,3.1vw,40px)}
.sfw-lp h3{font-size:19.2px;font-family:var(--sans);font-weight:600;letter-spacing:-.005em}
.sfw-lp p{margin:0 0 1em}
.sfw-lp ul{list-style:none}

.sfw-lp .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.sfw-lp .wrap-tight{max-width:960px;margin:0 auto;padding:0 24px}
.sfw-lp .eyebrow{
  font-family:var(--sans);
  font-size:12.48px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:600;
  margin-bottom:14.4px;
  display:inline-block;
}
.sfw-lp .eyebrow::before{
  content:"";
  display:inline-block;
  width:18px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:10px;transform:translateY(-2px);
}

/* ------------------------------- HERO ------------------------------- */
.sfw-lp .hero{ padding:64px 0 80px; position:relative; overflow:hidden; }
.sfw-lp .hero::before{
  content:"";position:absolute;pointer-events:none;
  right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(63,168,57,.10), transparent 70%);
}
.sfw-lp .hero::after{
  content:"";position:absolute;pointer-events:none;
  left:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(242,179,29,.14), transparent 70%);
}
.sfw-lp .hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:64px;
  align-items:center;
  position:relative;
}
.sfw-lp .hero-media{ position:relative; }
.sfw-lp .hero-media .frame{
  background:linear-gradient(180deg, #fffdf8, var(--paper-2));
  padding:22px 22px 26px;
  transform:rotate(-.6deg);
  box-shadow: var(--shadow-lift);
  border:1px solid var(--rule);
  position:relative;
}
.sfw-lp .hero-media .frame::after{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:80px;height:20px;background:rgba(242,179,29,.55);
  box-shadow:inset 0 0 0 1px rgba(200,138,16,.35);
}
.sfw-lp .hero-media img{width:100%;height:auto}
.sfw-lp .hero-media .tag{
  position:absolute;
  left:-14px;top:26px;z-index:2;
  background:var(--green);
  color:#fff;
  font-family:var(--sans);
  font-size:11.2px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;
  transform:rotate(-3deg);
  box-shadow:0 6px 14px -6px rgba(63,168,57,.55);
}
.sfw-lp .hero-media .coin{
  position:absolute;right:-18px;bottom:-18px;z-index:3;
  width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe27a, var(--gold) 55%, var(--gold-dk));
  box-shadow:0 10px 24px -8px rgba(200,138,16,.55), inset 0 -6px 12px rgba(0,0,0,.15);
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:32px;color:#5b3a05;
  transform:rotate(-8deg);
}
/* Placeholder shown when the product has no featured image yet. */
.sfw-lp .img-placeholder{
  width:100%;aspect-ratio:7/6;
  background:repeating-linear-gradient(45deg, var(--paper-4), var(--paper-4) 12px, var(--paper-2) 12px, var(--paper-2) 24px);
  border:1px dashed var(--rule-2);
  display:grid;place-items:center;text-align:center;padding:24px;
  font-family:var(--sans);font-size:12.8px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--sample);
}
.sfw-lp .inside-grid .img-placeholder{aspect-ratio:3/4}
.sfw-lp .inside-grid .b .img-placeholder,
.sfw-lp .inside-grid .c .img-placeholder{aspect-ratio:16/10}

.sfw-lp .hero h1{margin-top:.2em}
.sfw-lp .hero h1 em{font-style:italic;color:var(--green-dk);font-weight:600}
.sfw-lp .hook{font-family:var(--serif);font-size:20.48px;color:var(--ink-2);font-style:italic;font-weight:400;line-height:1.35;margin:0 0 1.5em;max-width:34ch}
.sfw-lp .hook p{margin:0}
.sfw-lp .price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.sfw-lp .price{font-family:var(--serif);font-size:41.6px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1}
.sfw-lp .price-was{color:var(--ink-mute);text-decoration:line-through;font-size:17.6px}
.sfw-lp .price-save{background:rgba(63,168,57,.14);color:var(--green-ink);font-size:11.52px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:4px}
.sfw-lp .price-note{color:var(--ink-mute);font-size:14.08px;margin-bottom:22px}

/* The real WooCommerce add-to-cart button, dressed as the mockup's .cta */
.sfw-lp .cta,
.sfw-lp form.cart button.single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg, var(--green) 0%, var(--green-dk) 100%);
  color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:16.8px;letter-spacing:.005em;
  padding:18px 26px;
  border:none;cursor:pointer;
  width:100%;
  border-radius:6px;
  text-transform:none;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 12px 24px -10px rgba(47,138,44,.55);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
  position:relative; overflow:hidden;
}
.sfw-lp .cta::before,
.sfw-lp form.cart button.single_add_to_cart_button::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.sfw-lp .cta:hover,
.sfw-lp form.cart button.single_add_to_cart_button:hover{filter:brightness(1.03);background:linear-gradient(180deg, var(--green) 0%, var(--green-dk) 100%);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 16px 28px -10px rgba(47,138,44,.6)}
.sfw-lp .cta:hover::before,
.sfw-lp form.cart button.single_add_to_cart_button:hover::before{transform:translateX(120%)}
.sfw-lp .cta:active,
.sfw-lp form.cart button.single_add_to_cart_button:active{transform:translateY(1px)}
.sfw-lp .cta .arrow{font-family:var(--serif);font-style:italic;font-weight:400}

/* Digital products: quantity is forced to 1, so never show the picker. */
.sfw-lp form.cart .quantity{display:none !important}
.sfw-lp form.cart{margin:0}
.sfw-lp .sfw-buybox{margin:0 0 4px}

.sfw-lp .trust{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 22px;
  font-size:13.76px;color:var(--ink-mute)
}
.sfw-lp .trust span{display:inline-flex;align-items:center;gap:7px}
.sfw-lp .trust svg{flex:none;color:var(--green-dk)}
.sfw-lp .formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sfw-lp .fmt{
  font-size:11.2px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);
  border:1px solid var(--ink-2);
  padding:6px 11px;border-radius:999px;
  background:var(--paper-4);
}
@media (max-width:900px){
  .sfw-lp .hero-grid{grid-template-columns:1fr;gap:40px}
  .sfw-lp .hero{padding:32px 0 48px}
  .sfw-lp .hero-media{max-width:520px;margin:0 auto}
}

/* ----------------------------- SECTIONS ----------------------------- */
.sfw-lp .sfw-section{padding:80px 0}
.sfw-lp .sfw-section.tinted{background:var(--paper-2)}
.sfw-lp .sfw-section.tinted-2{background:var(--paper-3)}
.sfw-lp .sfw-section.plain{background:transparent;padding:64px 0}

/* ----------------------------- INCLUDED ----------------------------- */
.sfw-lp .incl-head{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:end;margin-bottom:36px}
.sfw-lp .incl-head p{color:var(--ink-mute);font-size:16.32px;max-width:44ch;margin:0}
.sfw-lp .incl-list{columns:2;column-gap:56px;font-size:16.32px}
.sfw-lp .incl-list ul{list-style:none;padding:0;margin:0}
.sfw-lp .incl-list li{
  break-inside:avoid;
  padding:14px 0 14px 30px;
  border-bottom:1px dashed var(--rule);
  position:relative;
  list-style:none;
}
.sfw-lp .incl-list li::before{
  content:"";
  position:absolute;left:0;top:20px;
  width:14px;height:14px;
  background:var(--green);
  border-radius:2px;
  transform:rotate(45deg) scale(.6);
  box-shadow:1px -1px 0 var(--ink);
}
.sfw-lp .incl-list li strong{display:block;font-weight:600;margin-bottom:2px}
.sfw-lp .incl-list li span{color:var(--ink-mute);font-size:14.88px}
@media (max-width:800px){
  .sfw-lp .incl-head{grid-template-columns:1fr;gap:16px}
  .sfw-lp .incl-list{columns:1}
}

/* ------------------------------ PAYOFF ------------------------------ */
.sfw-lp .payoff{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.sfw-lp .payoff h2 em{font-style:italic;color:var(--green-dk)}
.sfw-lp .payoff .before-after{
  margin-top:26px;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--ink);
}
.sfw-lp .before-after > div{padding:20px 22px}
.sfw-lp .before-after .col-b{border-right:1px solid var(--rule);color:var(--ink-mute)}
.sfw-lp .before-after h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:11.52px;font-weight:700;margin:0 0 12px}
.sfw-lp .before-after ul{margin:0;padding-left:18px;list-style:disc}
.sfw-lp .before-after li{padding:4px 0;list-style:disc}
.sfw-lp .pull{
  font-family:var(--serif);
  font-size:24.8px;line-height:1.3;font-weight:500;
  color:var(--ink);
  border-left:3px solid var(--gold);
  padding:6px 0 6px 22px;
}
.sfw-lp .pull-attrib{margin-top:14px;font-size:13.6px;color:var(--ink-mute);font-style:italic;padding-left:25px}
@media (max-width:820px){
  .sfw-lp .payoff{grid-template-columns:1fr;gap:32px}
  .sfw-lp .payoff .before-after{grid-template-columns:1fr}
  .sfw-lp .payoff .before-after .col-b{border-right:none;border-bottom:1px solid var(--rule)}
}

/* ---------------------------- LOOK INSIDE --------------------------- */
.sfw-lp .inside-head{max-width:640px;margin-bottom:36px}
.sfw-lp .inside-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: auto auto;
  gap:28px;
}
.sfw-lp .inside-grid figure{margin:0;position:relative}
.sfw-lp .inside-grid figure img{width:100%;height:100%;object-fit:cover;background:#fff;box-shadow:0 1px 0 rgba(15,35,64,.15), 0 30px 40px -30px rgba(15,35,64,.25)}
.sfw-lp .inside-grid figcaption{margin-top:10px;font-size:13.6px;color:var(--ink-mute)}
.sfw-lp .inside-grid .a{grid-row:span 2}
.sfw-lp .inside-grid .a img{aspect-ratio: 3/4}
.sfw-lp .inside-grid .b img{aspect-ratio: 16/10}
.sfw-lp .inside-grid .c img{aspect-ratio: 16/10}
@media (max-width:820px){
  .sfw-lp .inside-grid{grid-template-columns:1fr}
  .sfw-lp .inside-grid .a{grid-row:auto}
}

/* --------------------------- HOW IT WORKS --------------------------- */
.sfw-lp .how{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.sfw-lp .step{padding:28px 26px 8px;border-right:1px solid var(--rule)}
.sfw-lp .step:last-child{border-right:none}
.sfw-lp .step .num{
  font-family:var(--serif);font-size:38.4px;color:var(--green-dk);
  font-weight:600;font-style:italic;line-height:1;margin-bottom:12px;
}
.sfw-lp .step h3{margin-bottom:8px}
.sfw-lp .step p{color:var(--ink-mute);font-size:15.68px}
@media (max-width:800px){
  .sfw-lp .how{grid-template-columns:1fr}
  .sfw-lp .step{border-right:none;border-bottom:1px solid var(--rule)}
  .sfw-lp .step:last-child{border-bottom:none}
}

/* ---------------------------- GUARANTEE ----------------------------- */
.sfw-lp .guarantee{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  max-width:820px;margin:0 auto;
}
.sfw-lp .seal{
  width:130px;height:130px;border-radius:50%;
  border:2px solid var(--ink);
  display:grid;place-items:center;text-align:center;
  font-family:var(--serif);font-weight:600;line-height:1;
  color:var(--ink);position:relative;
  background:var(--paper);
  flex:none;
}
.sfw-lp .seal::before,.sfw-lp .seal::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dashed var(--gold);
}
.sfw-lp .seal::after{inset:14px;border-style:solid;border-color:transparent}
.sfw-lp .seal span{display:block;font-size:35.2px}
.sfw-lp .seal small{display:block;font-family:var(--sans);font-size:10.4px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px;font-weight:700}
.sfw-lp .guarantee h2{margin-bottom:8px}
.sfw-lp .guarantee p{color:var(--ink-2);font-size:16.8px;margin-bottom:8px}
.sfw-lp .pending{
  display:inline-block;font-size:11.2px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sample);border:1px dashed var(--sample);padding:4px 8px;font-weight:700;
  margin-top:8px;
}
@media (max-width:640px){
  .sfw-lp .guarantee{grid-template-columns:1fr;text-align:left;gap:20px}
}

/* -------------------------------- FAQ ------------------------------- */
.sfw-lp .faq-wrap{display:grid;grid-template-columns:1fr 2fr;gap:56px}
.sfw-lp .faq-wrap h2{position:sticky;top:24px}
.sfw-lp details{
  border-top:1px solid var(--rule);
  padding:18px 0;
}
.sfw-lp details:last-of-type{border-bottom:1px solid var(--rule)}
.sfw-lp summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  font-family:var(--serif);font-size:18.4px;font-weight:500;color:var(--ink);
}
.sfw-lp summary::-webkit-details-marker{display:none}
.sfw-lp summary::marker{content:""}
.sfw-lp summary .plus{
  font-family:var(--sans);font-size:22.4px;font-weight:300;color:var(--green-dk);
  transition:transform .2s ease;flex:none;line-height:1;
}
.sfw-lp details[open] summary .plus{transform:rotate(45deg)}
.sfw-lp details p{margin:14px 0 0;color:var(--ink-mute);font-size:15.68px;max-width:60ch}
@media (max-width:820px){
  .sfw-lp .faq-wrap{grid-template-columns:1fr;gap:24px}
  .sfw-lp .faq-wrap h2{position:static}
}

/* ---------------------------- SOCIAL PROOF -------------------------- */
.sfw-lp .proof-head{max-width:640px;margin-bottom:40px}
.sfw-lp .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.sfw-lp .tcard{
  padding:30px 26px 26px;
  background:var(--paper-4);
  position:relative;
  border:1px solid var(--rule);
  box-shadow: var(--shadow-soft);
  display:flex;flex-direction:column;
  border-radius:2px;
}
.sfw-lp .tcard::before{
  content:"\201C";
  position:absolute;top:-6px;left:18px;
  font-family:var(--serif);font-size:70.4px;line-height:1;color:var(--gold);
  opacity:.55;
}
.sfw-lp .tcard:nth-child(2){
  background:linear-gradient(180deg, #fffdf7, var(--paper-3));
  border-color:var(--rule-2);
  box-shadow: var(--shadow-lift);
}
.sfw-lp .tcard .sample-tag{
  position:absolute;top:-10px;right:14px;
  background:var(--sample);color:#fff;
  font-size:9.92px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:4px 8px;border-radius:2px;
}
.sfw-lp .tcard .stars{color:var(--gold);letter-spacing:3px;font-size:16px;margin:6px 0 12px;position:relative;z-index:1}
.sfw-lp .tcard blockquote{margin:0 0 20px;padding:0;border:none;font-family:var(--serif);font-weight:400;font-style:normal;font-size:16.96px;line-height:1.45;color:var(--ink);flex:1;background:none}
.sfw-lp .tcard cite{font-style:normal;font-size:13.6px;color:var(--ink-mute);display:flex;align-items:center;gap:12px}
.sfw-lp .tcard cite b{color:var(--ink);font-weight:600;display:block;font-style:normal;line-height:1.25}
.sfw-lp .tcard .avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;color:#fff;font-size:15.2px;
  background:linear-gradient(135deg, var(--ink-2), var(--green-dk));
}
.sfw-lp .tcard:nth-child(2) .avatar{background:linear-gradient(135deg, var(--gold-dk), var(--sample))}
.sfw-lp .tcard:nth-child(3) .avatar{background:linear-gradient(135deg, var(--green-dk), var(--gold-dk))}
@media (max-width:820px){
  .sfw-lp .proof{grid-template-columns:1fr}
}

/* ------------------------------ RELATED ----------------------------- */
.sfw-lp .related-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.sfw-lp .related-head a{font-size:14.4px}
.sfw-lp .rel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sfw-lp .rcard{text-decoration:none;color:var(--ink);display:block;transition:transform .2s ease}
.sfw-lp .rcard:hover{transform:translateY(-4px);color:var(--ink)}
.sfw-lp .rcard .thumb{
  aspect-ratio:4/5;background:linear-gradient(180deg, var(--paper-4), var(--paper-2));
  border:1px solid var(--rule);
  box-shadow: var(--shadow-soft);
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding:18px;
}
.sfw-lp .rcard .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;padding:0}
.sfw-lp .rcard .thumb .pill{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:9.6px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  background:var(--ink);color:#fff;padding:4px 8px;border-radius:2px;
}
.sfw-lp .rcard .thumb .thumb-empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;
  font-size:10.88px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sample);
  background:repeating-linear-gradient(45deg, var(--paper-4), var(--paper-4) 10px, var(--paper-2) 10px, var(--paper-2) 20px);
}
.sfw-lp .rcard h4{margin:14px 0 4px;font-family:var(--serif);font-weight:600;font-size:16.8px}
.sfw-lp .rcard .rp{color:var(--ink-mute);font-size:14.4px}
.sfw-lp .rcard .rp b{color:var(--ink);font-weight:600}
.sfw-lp .rcard .rp del{opacity:.7;font-weight:400}
.sfw-lp .rcard .rp ins{text-decoration:none;font-weight:600;color:var(--ink)}
@media (max-width:820px){ .sfw-lp .rel-row{grid-template-columns:repeat(2,1fr)} }

/* -------------------------- MOBILE STICKY BAR ------------------------ */
.sfw-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#f7f3ec;
  border-top:1px solid #d9cdb3;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none;
  align-items:center;gap:12px;
  box-shadow:0 -10px 30px -20px rgba(15,35,64,.35);
  transform:translateY(120%);
  transition:transform .25s ease;
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:#0e2547;
}
.sfw-sticky.show{transform:translateY(0)}
.sfw-sticky .sp{flex:1;min-width:0}
.sfw-sticky .st{font-size:12px;color:#5a6a86;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfw-sticky .sprice{font-family:'Fraunces', Georgia, serif;font-size:18.4px;font-weight:600}
.sfw-sticky .sprice del{font-size:12.8px;color:#5a6a86;font-weight:400;margin-left:6px}
.sfw-sticky .sprice ins{text-decoration:none}
.sfw-sticky form.cart{margin:0}
.sfw-sticky form.cart .quantity{display:none !important}
.sfw-sticky .cta,
.sfw-sticky form.cart button.single_add_to_cart_button{
  width:auto;padding:12px 18px;font-size:15.2px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg, #3fa839 0%, #2f8a2c 100%);
  color:#fff;border:none;border-radius:6px;cursor:pointer;
  font-family:inherit;font-weight:600;text-transform:none;white-space:nowrap;
}
@media (max-width:820px){
  .sfw-sticky{display:flex}
  body.sfw-has-sticky{padding-bottom:80px}
}

/* ---------------------------- small extras --------------------------- */
.sfw-lp .rule-dot{color:var(--gold)}
.sfw-lp .caption{font-size:13.6px;color:var(--ink-mute)}
.sfw-lp .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* WooCommerce notices sit above the hero without breaking the palette. */
.sfw-lp .woocommerce-notices-wrapper:not(:empty){max-width:1160px;margin:0 auto;padding:24px 24px 0}

/* The mockup's italic arrow on the CTA. WooCommerce escapes the button label,
   so the arrow is decorative and comes from CSS rather than the text. */
.sfw-lp form.cart button.single_add_to_cart_button::after{
  content:"\2192";
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  margin-left:2px;
  position:relative;
  z-index:1;
}
.sfw-sticky form.cart button.single_add_to_cart_button::after{content:none}

/* ==========================================================================
   Fidelity corrections
   Three third-party sources fight the mockup's typography inside .sfw-lp:
     - the Customizer's Additional CSS: h1..h6{font-weight:700}, body{line-height:1.7}
     - the Writee parent theme's paragraph leading (1.9)
     - WooCommerce, which wraps every amount in its own <span> the theme bolds
   These rules restore the mockup's values, scoped to .sfw-lp only.
   ========================================================================== */

/* Body copy follows the mockup's 1.6, not the theme's 1.7-1.9. */
.sfw-lp p,
.sfw-lp li{line-height:1.6}

/* The italic hook keeps its tighter leading after wpautop wraps it in <p>. */
.sfw-lp .hook p{font:inherit;line-height:1.35;margin:0}

/* Native WooCommerce price markup, dressed to the mockup's weights. */
.sfw-lp .price .woocommerce-Price-amount,
.sfw-lp .price .woocommerce-Price-currencySymbol{font-weight:600;font-size:inherit;color:inherit}
.sfw-lp .price-was .woocommerce-Price-amount,
.sfw-lp .price-was .woocommerce-Price-currencySymbol{font-weight:400;font-size:inherit}
.sfw-lp .price-save .woocommerce-Price-amount,
.sfw-lp .price-save .woocommerce-Price-currencySymbol{font-weight:700;font-size:inherit}
.sfw-sticky .sprice .woocommerce-Price-amount{font-weight:600;font-size:inherit}
.sfw-sticky .sprice del .woocommerce-Price-amount{font-weight:400}

/* Headings must not pick up the Customizer's 35px/20px heading margins. */
.sfw-lp h1,.sfw-lp h2,.sfw-lp h3,.sfw-lp h4{margin-top:0}
.sfw-lp .hero h1{margin-top:.2em}
/* The parent theme parks its off-canvas mobile nav off to the right and relies
   on an ancestor clipping it. The full-bleed landing sections change which
   ancestor establishes that context, so the nav reintroduced ~36px of sideways
   scroll on narrow screens. `clip` (not `hidden`) kills the scroll WITHOUT
   creating a scroll container, so the sticky FAQ heading keeps working.
   Scoped to the product page body class only. */
.sfw-single-product .site-wrapper{overflow-x:clip}
/* ==========================================================================
   Add-to-cart button states
   The drawer is the confirmation now, so the button only has to show that
   something is happening and then that it worked.
   ========================================================================== */
.sfw-lp form.cart button.single_add_to_cart_button,
.sfw-sticky form.cart button.single_add_to_cart_button{
  transition:background .25s ease, filter .2s ease, transform .08s ease;
}
.sfw-lp form.cart button.is-loading,
.sfw-sticky form.cart button.is-loading{cursor:progress;filter:saturate(.85)}
.sfw-lp form.cart button.is-added,
.sfw-sticky form.cart button.is-added{
  background:linear-gradient(180deg,#2f8a2c 0%,#1e5f1c 100%);
  cursor:default;
}

.btn-spin{
  width:16px;height:16px;flex:none;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  display:inline-block;vertical-align:-3px;margin-right:10px;
  animation:sfwspin .7s linear infinite;
}
@keyframes sfwspin{to{transform:rotate(360deg)}}

.btn-tick{
  width:16px;height:16px;flex:none;display:inline-block;
  vertical-align:-3px;margin-right:10px;position:relative;
}
.btn-tick::after{
  content:"";position:absolute;left:4px;top:0;
  width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

@media (prefers-reduced-motion:reduce){
  .btn-spin{animation-duration:1.6s}
  .sfw-lp form.cart button.single_add_to_cart_button{transition:none}
}