/* ==========================================================================
   Savings for Wealth - shared shop design system
   Ported from the approved base.css. Loaded on WooCommerce pages only.

   NOTE: sizes are converted from rem to px on purpose. The source design is
   authored against a 16px root; this site's theme sets the root to 18px,
   which inflates every rem by 12.5%. Keep px.
   ========================================================================== */

  :root{
    --paper:#f7f3ec;
    --paper-2:#efe8db;
    --paper-3:#e7dfce;
    --paper-4:#fbf8f2;
    --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);
  }
  .sfw-shop *{box-sizing:border-box}
  body.sfw-shop{
    margin:0;padding:0;
    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-shop ::selection{background:var(--gold);color:var(--ink)}
  .sfw-shop 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-shop a:hover{color:var(--green-dk);text-decoration-color:var(--green)}
  .sfw-shop img{max-width:100%;display:block}
  .sfw-shop h1,.sfw-shop h2,.sfw-shop h3,.sfw-shop 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-shop h1{font-size:clamp(33.6px,4.2vw,51.2px);letter-spacing:-0.025em}
  .sfw-shop h2{font-size:clamp(25.6px,2.8vw,35.2px)}
  .sfw-shop h3{font-size:19.2px;font-family:var(--sans);font-weight:600;letter-spacing:-.005em}
  .sfw-shop p{margin:0 0 1em}
  .sfw-shop .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  .sfw-shop .wrap-tight{max-width:960px;margin:0 auto;padding:0 24px}
  .sfw-shop .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-shop .eyebrow::before{
    content:"";display:inline-block;width:18px;height:1px;background:var(--gold);
    vertical-align:middle;margin-right:10px;transform:translateY(-2px);
  }
  .sfw-shop .rule-dot{color:var(--gold)}
  .sfw-shop .caption{font-size:13.6px;color:var(--ink-mute)}
  .sfw-shop .muted{color:var(--ink-mute)}
  .sfw-shop .sfw-section{padding:64px 0}
  .sfw-shop .sfw-section.tinted{background:var(--paper-2)}
  .sfw-shop .sfw-section.tinted-2{background:var(--paper-3)}

  /* ---------- BUTTONS ---------- */
  .sfw-shop .cta{
    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.32px;
    padding:16px 24px;border:none;cursor:pointer;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;line-height:1.2;
  }
  .sfw-shop .cta::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-shop .cta:hover{filter:brightness(1.03);color:#fff;background:linear-gradient(180deg, var(--green) 0%, var(--green-dk) 100%)}
  .sfw-shop .cta:hover::before{transform:translateX(120%)}
  .sfw-shop .cta:active{transform:translateY(1px)}
  .sfw-shop .cta.block{width:100%}
  .sfw-shop .cta.small{padding:11px 16px;font-size:14.4px}
  .sfw-shop .cta[disabled],.sfw-shop .cta.is-loading{filter:saturate(.7) brightness(.98);cursor:progress}
  .sfw-shop .cta .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sfwsp .7s linear infinite}
  @keyframes sfwsp{to{transform:rotate(360deg)}}
  .sfw-shop .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    background:var(--paper-4);color:var(--ink);text-decoration:none;
    font-weight:600;font-size:15.2px;padding:13px 20px;text-transform:none;
    border:1px solid var(--rule-2);border-radius:6px;cursor:pointer;font-family:var(--sans);
    transition:border-color .2s ease,color .2s ease,background .2s ease;line-height:1.2;
  }
  .sfw-shop .btn-ghost:hover{border-color:var(--ink-2);color:var(--ink-2);background:#fff}
  .sfw-shop .btn-ghost.block{width:100%}
  .sfw-shop .link-quiet{color:var(--ink-mute);font-size:14.4px}

  /* ---------- FORMAT PILLS ---------- */
  .sfw-shop .formats{display:flex;flex-wrap:wrap;gap:6px}
  .sfw-shop .fmt{
    font-size:10.08px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    color:var(--ink-2);border:1px solid var(--ink-2);padding:4px 8px;border-radius:999px;background:var(--paper-4);
  }
  .sfw-shop .fmt.green{color:var(--green-ink);border-color:var(--green)}
  .sfw-shop .fmt.gold{color:#7a5405;border-color:var(--gold-dk)}

  /* ---------- HEADER ---------- */
  .sfw-shop .nav{
    padding:14px 0;border-bottom:1px solid var(--rule);
    background:rgba(247,243,236,.88);-webkit-backdrop-filter:saturate(1.1) blur(6px);backdrop-filter:saturate(1.1) blur(6px);
    position:sticky;top:0;z-index:60;
  }
  body.admin-bar.sfw-shop .nav{top:32px}
  @media screen and (max-width:782px){ body.admin-bar.sfw-shop .nav{top:46px} }
  @media screen and (max-width:600px){ body.admin-bar.sfw-shop .nav{top:0} }
  .sfw-shop .nav-in{display:flex;align-items:center;gap:20px}
  .sfw-shop .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-width:0}
  .sfw-shop .brand img{height:40px;width:auto;display:block;max-width:none}
  .sfw-shop .brand small{font-family:var(--sans);font-weight:600;font-size:10.08px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);border-left:1px solid var(--rule-2);padding-left:10px}
  .sfw-shop .nav-links{display:flex;gap:26px;font-size:15.04px;margin-left:14px;list-style:none;padding:0}
  .sfw-shop .nav-links li{margin:0;list-style:none}
  .sfw-shop .nav-links a{text-decoration:none;color:var(--ink);position:relative;padding:6px 0;font-weight:500;white-space:nowrap;display:inline-block}
  .sfw-shop .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--green);transition:right .25s ease}
  .sfw-shop .nav-links a:hover::after,.sfw-shop .nav-links .current-menu-item>a::after{right:0}
  .sfw-shop .nav-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
  .sfw-shop .icon-btn{
    position:relative;display:inline-grid;place-items:center;
    width:42px;height:42px;border-radius:999px;
    border:1px solid transparent;background:transparent;color:var(--ink);
    cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease;
  }
  .sfw-shop .icon-btn:hover{background:var(--paper-4);border-color:var(--rule-2);color:var(--ink-2)}
  .sfw-shop .icon-btn .badge{
    position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;
    background:var(--green);color:#fff;border-radius:999px;
    font-size:10.56px;font-weight:700;line-height:18px;text-align:center;
    box-shadow:0 0 0 2px var(--paper);
  }
  .sfw-shop .acct-chip{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
    border:1px solid var(--rule-2);background:var(--paper-4);border-radius:999px;
    padding:5px 14px 5px 5px;font-size:14.08px;font-weight:600;
  }
  .sfw-shop .acct-chip:hover{border-color:var(--ink-2);color:var(--ink-2)}
  .sfw-shop .acct-chip .av{
    width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
    background:linear-gradient(150deg,var(--ink-2),var(--green));color:#fff;
    font-family:var(--serif);font-weight:600;font-size:13.6px;
  }
  .sfw-shop .nav-search{border-top:1px solid var(--rule);background:var(--paper-4);display:none}
  .sfw-shop .nav-search.open{display:block}
  .sfw-shop .nav-search form{display:flex;align-items:center;gap:12px;padding:14px 0}
  .sfw-shop .nav-search input{
    flex:1;border:none;background:transparent;font-family:var(--serif);font-size:20px;color:var(--ink);
    padding:6px 0;border-bottom:1px solid var(--rule-2);outline:none;
  }
  .sfw-shop .nav-search input:focus{border-bottom-color:var(--green)}
  @media (max-width:900px){
    .sfw-shop .nav-links{display:none}
    .sfw-shop .brand small{display:none}
    .sfw-shop .brand img{height:34px}
    .sfw-shop .acct-chip span.nm{display:none}
    .sfw-shop .acct-chip{padding:5px;border-radius:999px}
    .sfw-shop .nav-tools{gap:2px}
    .sfw-shop .icon-btn{width:44px;height:44px}
  }

  /* ---------- PANELS / CARDS ---------- */
  .sfw-shop .panel{background:var(--paper-4);border:1px solid var(--rule);box-shadow:var(--shadow-soft);border-radius:8px}
  .sfw-shop .panel-pad{padding:24px}
  .sfw-shop .hr{height:1px;background:var(--rule);border:0;margin:18px 0}
  .sfw-shop .hr.dash{background:none;border-top:1px dashed var(--rule)}

  /* ---------- FORMS ---------- */
  .sfw-shop label.lbl{display:block;font-size:12.48px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);margin-bottom:7px}
  .sfw-shop .field{margin-bottom:18px}
  .sfw-shop .inp{
    width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
    background:#fff;border:1px solid var(--rule-2);border-radius:6px;padding:13px 14px;outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .sfw-shop .inp:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(28,74,134,.12)}
  .sfw-shop .inp::placeholder{color:#9aa6b8}
  .sfw-shop .help{font-size:13.28px;color:var(--ink-mute);margin-top:7px}
  .sfw-shop .field.err .inp{border-color:#b3402b;box-shadow:0 0 0 3px rgba(179,64,43,.12)}
  .sfw-shop .err-msg{display:flex;gap:7px;align-items:flex-start;font-size:13.44px;color:#a83a25;margin-top:7px;font-weight:500}
  .sfw-shop .ok-msg{display:flex;gap:7px;align-items:center;font-size:13.44px;color:var(--green-ink);margin-top:7px;font-weight:600}
  .sfw-shop .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:560px){.sfw-shop .row2{grid-template-columns:1fr}}
  .sfw-shop .check{display:flex;gap:12px;align-items:flex-start;font-size:14.88px;line-height:1.45}
  .sfw-shop .check input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--green);flex:none}
  .sfw-shop .check.boxed{border:1px solid var(--rule);background:var(--paper-2);border-radius:6px;padding:14px 16px}
  .sfw-shop .check.marketing{border:1px dashed var(--rule-2);background:transparent;border-radius:6px;padding:14px 16px}

  /* ---------- FOOTER ---------- */
  .sfw-shop footer.shop-foot{border-top:1px solid var(--rule);background:var(--paper-2);padding:56px 0 28px;font-size:14.72px}
  .sfw-shop .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.6fr;gap:40px}
  .sfw-shop .foot-grid h5{font-family:var(--sans);font-size:11.52px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px;font-weight:700}
  .sfw-shop .foot-grid ul{list-style:none;margin:0;padding:0}
  .sfw-shop .foot-grid li{margin-bottom:9px;list-style:none}
  .sfw-shop .foot-grid a{color:var(--ink);text-decoration:none;font-size:14.88px}
  .sfw-shop .foot-grid a:hover{color:var(--green-dk)}
  .sfw-shop .foot-brand img{height:38px;margin-bottom:14px}
  .sfw-shop .foot-brand p{color:var(--ink-mute);font-size:14.4px;max-width:32ch}
  .sfw-shop .news form{display:flex;gap:0;margin-top:6px;border:1px solid var(--rule-2);border-radius:6px;overflow:hidden;background:#fff}
  .sfw-shop .news input{flex:1;border:none;outline:none;padding:12px 13px;font-family:var(--sans);font-size:14.72px;min-width:0}
  .sfw-shop .news button{border:none;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:600;font-size:13.76px;padding:0 18px;cursor:pointer}
  .sfw-shop .news button:hover{background:var(--ink-2)}
  .sfw-shop .pays{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
  .sfw-shop .pays span{border:1px solid var(--rule-2);background:var(--paper-4);border-radius:5px;padding:5px 8px;display:grid;place-items:center}
  .sfw-shop .foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);color:var(--ink-mute);font-size:13.6px}
  @media (max-width:1000px){.sfw-shop .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}.sfw-shop .foot-brand{grid-column:1/-1}.sfw-shop .news{grid-column:1/-1}}
  @media (max-width:620px){.sfw-shop .foot-grid{grid-template-columns:1fr 1fr}}

  /* ---------- MISC ---------- */
  .sfw-shop .state-tag{
    display:inline-block;font-size:10.56px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
    color:var(--sample);border:1px dashed var(--sample);border-radius:4px;padding:4px 9px;background:rgba(179,74,43,.06);
  }
  .sfw-shop .trustrow{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.76px;color:var(--ink-mute)}
  .sfw-shop .trustrow span{display:inline-flex;align-items:center;gap:7px}
  .sfw-shop .trustrow svg{flex:none;color:var(--green-dk)}
  .sfw-shop .sfw-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-size:14px;font-weight:600;text-decoration:none}
  .sfw-shop .sfw-skip:focus{left:0}

/* ==========================================================================
   Enforcement layer
   Two things on this site override inherited styling and must be stated
   explicitly rather than relied upon:
     1. The Customizer's Additional CSS sets h1..h6{font-weight:700} and
        body{font-size:18px;line-height:1.7}. Every rule above is scoped to
        .sfw-shop, which outranks those bare element selectors - keep it that way.
     2. The Fonts Plugin (olympus-google-fonts) pushes Open Sans onto elements
        site-wide and beats inheritance, so declare the family outright.
   ========================================================================== */
.sfw-shop,
.sfw-shop p,.sfw-shop a,.sfw-shop span,.sfw-shop li,.sfw-shop div,
.sfw-shop label,.sfw-shop small,.sfw-shop button,.sfw-shop input,
.sfw-shop select,.sfw-shop textarea,.sfw-shop td,.sfw-shop th,
.sfw-shop cite,.sfw-shop figcaption,.sfw-shop dt,.sfw-shop dd,.sfw-shop h5{
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sfw-shop h1,.sfw-shop h2,.sfw-shop h4,
.sfw-shop .price,.sfw-shop blockquote,.sfw-shop .pull{
  font-family:'Fraunces', Georgia, "Times New Roman", serif;
}
.sfw-shop p,.sfw-shop li{line-height:1.6}

/* Native WooCommerce price markup, dressed to the design's weights. */
.sfw-shop .woocommerce-Price-amount{font-weight:inherit;font-size:inherit;color:inherit}
.sfw-shop del{opacity:.75;font-weight:400}
.sfw-shop ins{text-decoration:none;font-weight:inherit}

/* The parent theme's back-to-top button, brought into the palette. */
body.sfw-shop #scrollUp{
  width:44px;height:44px;right:24px;bottom:24px;
  background:var(--ink);border-radius:50%;text-align:center;line-height:44px;
  color:#fff;text-decoration:none;opacity:.9;font-size:0;
  box-shadow:0 10px 24px -10px rgba(14,37,71,.55);
}
body.sfw-shop #scrollUp:hover{opacity:1;background:var(--ink-2)}
body.sfw-shop #scrollUp::before{content:"\2191";font-family:'Inter',system-ui,sans-serif;font-size:18px;font-weight:600;color:#fff}
/* ==========================================================================
   Mobile navigation (the source design simply hides the links below 900px,
   which would leave phones with no navigation at all)
   ========================================================================== */
.sfw-shop .sfw-nav-toggle{display:none}
@media (max-width:900px){
  .sfw-shop .nav-in{position:relative;flex-wrap:wrap}
  .sfw-shop .sfw-nav-toggle{display:inline-grid}
  .sfw-shop .nav-menu-wrap{
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 30px -24px rgba(14,37,71,.45);
    display:none;z-index:5;
  }
  .sfw-shop .nav-menu-wrap.is-open{display:block}
  .sfw-shop .nav-menu-wrap.is-open .nav-links{
    display:flex;flex-direction:column;gap:0;
    max-width:1160px;margin:0 auto;padding:8px 24px 16px;
  }
  .sfw-shop .nav-menu-wrap .nav-links li{border-bottom:1px dashed var(--rule)}
  .sfw-shop .nav-menu-wrap .nav-links li:last-child{border-bottom:none}
  .sfw-shop .nav-menu-wrap .nav-links a{display:block;padding:14px 0;width:100%}
  .sfw-shop .nav-menu-wrap .nav-links a::after{display:none}
}

/* ==========================================================================
   Slide-out cart drawer
   ========================================================================== */
.sfw-overlay{
  position:fixed;inset:0;background:rgba(14,37,71,.42);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:80;
}
.sfw-overlay.show{opacity:1;visibility:visible}

.sfw-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;
  background:var(--paper);border-left:1px solid var(--rule);
  box-shadow:-30px 0 60px -40px rgba(14,37,71,.5);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);font-size:17px;line-height:1.6;
}
.sfw-drawer.show{transform:none}
.sfw-drawer .sfw-drawer-frag{display:flex;flex-direction:column;height:100%;min-height:0}
.sfw-drawer *{box-sizing:border-box}
.sfw-drawer a{color:var(--ink-2);text-decoration:none}
.sfw-drawer a:hover{color:var(--green-dk)}

.sfw-drawer .dr-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--rule);background:var(--paper-4);flex:none}
.sfw-drawer .dr-head .tick{width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.sfw-drawer .dr-head h3{font-family:'Fraunces',Georgia,serif;font-size:18.24px;margin:0;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sfw-drawer .dr-head .x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-mute);padding:6px;line-height:0}
.sfw-drawer .dr-head .x:hover{color:var(--ink)}

.sfw-drawer .dr-body{overflow:auto;padding:6px 22px 20px;flex:1;min-height:0}
.sfw-drawer .dr-item{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px dashed var(--rule);align-items:start}
.sfw-drawer .dr-item h4{font-family:'Fraunces',Georgia,serif;font-size:16px;margin:0 0 4px;font-weight:600;line-height:1.2}
.sfw-drawer .dr-item h4 a{color:var(--ink)}
.sfw-drawer .dr-item .thumb{border:1px solid var(--rule);background:linear-gradient(180deg,#fffdf8,var(--paper-2));padding:5px;border-radius:3px;overflow:hidden}
.sfw-drawer .dr-item .thumb img{width:100%;height:auto;display:block}
.sfw-drawer .dr-item .thumb-empty{display:block;aspect-ratio:4/5;background:repeating-linear-gradient(45deg,var(--paper-4),var(--paper-4) 6px,var(--paper-2) 6px,var(--paper-2) 12px)}
.sfw-drawer .dr-item .p{font-family:'Fraunces',Georgia,serif;font-weight:600;white-space:nowrap}
.sfw-drawer .dr-item .rm{background:none;border:0;padding:0;margin-top:7px;font-size:12.8px;color:var(--ink-mute);cursor:pointer;text-decoration:underline;font-family:inherit}
.sfw-drawer .dr-item .rm:hover{color:#a83a25}
.sfw-drawer .dr-item .rm.is-busy{opacity:.5;cursor:progress}
.sfw-drawer .formats{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sfw-drawer .fmt{font-size:10.08px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2);border:1px solid var(--ink-2);padding:4px 8px;border-radius:999px;background:var(--paper-4)}
.sfw-drawer .fmt.gold{color:#7a5405;border-color:var(--gold-dk)}

.sfw-drawer .xsell{margin-top:22px;border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;padding:16px}
.sfw-drawer .xsell h5{font-size:11.2px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 12px;font-weight:700}
.sfw-drawer .xs-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px dashed var(--rule)}
.sfw-drawer .xs-row:first-of-type{border-top:0}
.sfw-drawer .xs-row .thumb{border:1px solid var(--rule);border-radius:3px;overflow:hidden;padding:3px;background:var(--paper-2)}
.sfw-drawer .xs-row .nm{flex:1;min-width:0;font-size:14.4px;font-weight:600}
.sfw-drawer .xs-row .nm a{color:var(--ink)}
.sfw-drawer .xs-row .nm small{display:block;font-weight:400;color:var(--ink-mute);font-size:12.8px}
.sfw-drawer .xs-add{
  border:1px solid var(--rule-2);background:var(--paper);border-radius:999px;
  font-size:12.48px;font-weight:700;padding:7px 13px;cursor:pointer;
  font-family:inherit;color:var(--ink);flex:none;text-decoration:none;
}
.sfw-drawer .xs-add:hover{border-color:var(--green);color:var(--green-ink)}
.sfw-drawer .xs-add.loading{opacity:.6;cursor:progress}
.sfw-drawer .xs-add.added{display:none}

.sfw-drawer .dr-foot{border-top:1px solid var(--rule);background:var(--paper-4);padding:18px 22px calc(18px + env(safe-area-inset-bottom));flex:none}
.sfw-drawer .dr-foot .sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sfw-drawer .dr-foot .sub b{font-family:'Fraunces',Georgia,serif;font-size:23.2px;font-weight:600}
.sfw-drawer .dr-foot .cta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
  background:linear-gradient(180deg,var(--green) 0%,var(--green-dk) 100%);
  color:#fff;font-weight:600;font-size:16.32px;padding:16px 24px;
  border:none;border-radius:6px;cursor:pointer;text-decoration:none;font-family:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.12) inset;
}
.sfw-drawer .dr-foot .cta:hover{filter:brightness(1.03);color:#fff}
.sfw-drawer .dr-foot .vc{display:block;text-align:center;margin-top:12px;font-size:14.4px}
.sfw-drawer .caption{font-size:13.6px;color:var(--ink-mute)}

.sfw-drawer .dr-empty{text-align:center;padding:56px 20px}
.sfw-drawer .dr-empty h4{font-family:'Fraunces',Georgia,serif;font-size:20.8px;margin:18px 0 8px;font-weight:600}
.sfw-drawer .dr-empty p{color:var(--ink-mute);font-size:14.72px;margin-bottom:22px}
.sfw-drawer .dr-empty .cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--green) 0%,var(--green-dk) 100%);
  color:#fff;font-weight:600;font-size:14.4px;padding:11px 16px;
  border:none;border-radius:6px;text-decoration:none;font-family:inherit;
}
.sfw-drawer .dr-empty .cta:hover{color:#fff;filter:brightness(1.03)}

@media (prefers-reduced-motion:reduce){
  .sfw-drawer,.sfw-overlay{transition:none}
}

/* ==========================================================================
   SHOP ARCHIVE - ported from shop.html (rem values converted to px)
   ========================================================================== */
.sfw-shop .shop-head{padding:52px 0 30px}
.sfw-shop .shop-head h1{max-width:16ch;margin-bottom:.25em}
.sfw-shop .shop-head p{color:var(--ink-mute);max-width:52ch;font-size:16.32px;margin:0}

.sfw-shop .shop-layout{display:grid;grid-template-columns:232px 1fr;gap:52px;align-items:start;padding-bottom:24px}
.sfw-shop .shop-main{min-width:0}

.sfw-shop .side{position:sticky;top:88px}
body.admin-bar.sfw-shop .side{top:120px}
.sfw-shop .side fieldset{border:0;padding:0;margin:0 0 28px}
.sfw-shop .side legend{font-size:11.52px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);padding:0 0 12px;border-bottom:1px solid var(--rule);width:100%;margin-bottom:12px}
.sfw-shop .side label{display:flex;align-items:center;gap:10px;font-size:15.04px;padding:5px 0;cursor:pointer}
.sfw-shop .side label input{width:16px;height:16px;accent-color:var(--green);flex:none;margin:0}
.sfw-shop .side label .n{margin-left:auto;color:var(--ink-mute);font-size:12.8px}
.sfw-shop .side .clear{font-size:13.6px;display:inline-block}

.sfw-shop .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:26px}
.sfw-shop .toolbar .showing{font-size:14.08px;color:var(--ink-mute);margin:0 auto 0 0}
.sfw-shop .toolbar .showing strong{color:var(--ink)}
.sfw-shop .filter-btn{display:none}
.sfw-shop .sel{position:relative}
.sfw-shop .sel select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--sans);font-size:14.4px;font-weight:600;color:var(--ink);
  background:var(--paper-4);border:1px solid var(--rule-2);border-radius:6px;
  padding:10px 38px 10px 14px;cursor:pointer;outline:none;
}
.sfw-shop .sel select:focus{border-color:var(--ink-2)}
.sfw-shop .sel svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-mute)}

.sfw-shop .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.sfw-shop .chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper-3);border:1px solid var(--rule-2);border-radius:999px;padding:6px 12px;font-size:13.12px;font-weight:600}
.sfw-shop .chip a{border:0;background:none;cursor:pointer;color:var(--ink-mute);font-size:16px;line-height:1;padding:0;text-decoration:none}
.sfw-shop .chip a:hover{color:#a83a25}

.sfw-shop .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.sfw-shop .pcard{position:relative;display:flex;flex-direction:column;margin:0}
.sfw-shop .pcard-link{text-decoration:none;color:inherit;display:block}
.sfw-shop .pcard .cover{
  position:relative;border:1px solid var(--rule);background:linear-gradient(180deg,#fffdf8,var(--paper-2));
  padding:20px;box-shadow:var(--shadow-soft);border-radius:4px;
  transition:transform .22s ease, box-shadow .22s ease;
  aspect-ratio:13/10;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sfw-shop .pcard:hover .cover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.sfw-shop .pcard .cover img{width:100%;height:100%;object-fit:contain;display:block}
.sfw-shop .pcard .cover-empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;
  font-size:10.56px;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-shop .ribbon{
  position:absolute;left:-9px;top:16px;z-index:2;color:#fff;background:var(--green);
  font-size:10.24px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;
  transform:rotate(-3deg);box-shadow:0 6px 14px -6px rgba(63,168,57,.55);
}
.sfw-shop .ribbon.gold{background:var(--gold);color:#4a3405;box-shadow:0 6px 14px -6px rgba(200,138,16,.6)}
.sfw-shop .ribbon.blue{background:var(--ink-2);box-shadow:0 6px 14px -6px rgba(28,74,134,.5)}
.sfw-shop .pcard h3{font-family:var(--serif);font-size:18.88px;font-weight:600;margin:16px 0 3px;letter-spacing:-.01em}
.sfw-shop .pcard .desc{color:var(--ink-mute);font-size:14.4px;margin:0 0 10px;line-height:1.45}
.sfw-shop .pcard .price-line{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.sfw-shop .pcard .pnow{font-family:var(--serif);font-size:21.12px;font-weight:600}
.sfw-shop .pcard .pwas{color:var(--ink-mute);text-decoration:line-through;font-size:14.08px}
.sfw-shop .save{background:rgba(63,168,57,.14);color:var(--green-ink);font-size:10.56px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:4px}
.sfw-shop .pcard .add{
  margin-top:12px;
  transition:opacity .2s ease, transform .2s ease;
}
.sfw-shop .pcard .add.loading{opacity:1;transform:none;cursor:progress}
.sfw-shop .pcard .add.added{opacity:1;transform:none}
.sfw-shop .pcard .added_to_cart{display:none}

.sfw-shop .pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:56px 0 8px;flex-wrap:wrap}
.sfw-shop .pager a,.sfw-shop .pager span{
  min-width:42px;height:42px;display:grid;place-items:center;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule-2);border-radius:6px;background:var(--paper-4);font-size:14.72px;font-weight:600;padding:0 12px;
}
.sfw-shop .pager a:hover{border-color:var(--ink-2);color:var(--ink-2)}
.sfw-shop .pager .cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.sfw-shop .pager .gap{border:0;background:none;min-width:20px;color:var(--ink-mute)}

.sfw-shop .empty{
  text-align:center;border:1px dashed var(--rule-2);border-radius:10px;background:var(--paper-4);
  padding:56px 28px;max-width:620px;margin:0 auto;
}
.sfw-shop .empty h3{font-family:var(--serif);font-size:24px;margin:18px 0 8px}
.sfw-shop .empty p{color:var(--ink-mute);max-width:40ch;margin:0 auto 22px}
.sfw-shop .empty .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:1000px){
  .sfw-shop .shop-layout{grid-template-columns:1fr;gap:0}
  .sfw-shop .side{position:static;display:none;border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;padding:20px;margin-bottom:24px}
  .sfw-shop .side.open{display:block}
  .sfw-shop .filter-btn{display:inline-flex}
  .sfw-shop .grid{grid-template-columns:repeat(2,1fr);gap:30px 22px}
}
@media (max-width:600px){
  .sfw-shop .grid{grid-template-columns:1fr;gap:34px}
  .sfw-shop .toolbar .showing{width:100%;order:3;margin:0}
}

/* ==========================================================================
   CART PAGE - ported from cart.html
   ========================================================================== */
.sfw-shop .page-head{padding:48px 0 8px}
.sfw-shop .cart-layout{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;padding-bottom:70px}
.sfw-shop .cart-col{min-width:0}
.sfw-shop .summary{position:sticky;top:96px}
body.admin-bar.sfw-shop .summary{top:128px}

.sfw-shop .items{border-top:1px solid var(--ink)}
.sfw-shop .item{display:grid;grid-template-columns:84px 1fr auto;gap:20px;padding:22px 0;border-bottom:1px dashed var(--rule);align-items:start}
.sfw-shop .item .thumb{border:1px solid var(--rule);background:linear-gradient(180deg,#fffdf8,var(--paper-2));padding:7px;border-radius:3px;overflow:hidden}
.sfw-shop .item .thumb img{width:100%;height:auto;display:block}
.sfw-shop .item .thumb-empty{display:block;aspect-ratio:4/5;background:repeating-linear-gradient(45deg,var(--paper-4),var(--paper-4) 8px,var(--paper-2) 8px,var(--paper-2) 16px)}
.sfw-shop .item h3{font-family:var(--serif);font-size:17.92px;font-weight:600;margin:0 0 4px;line-height:1.2}
.sfw-shop .item h3 a{color:var(--ink);text-decoration:none}
.sfw-shop .item h3 a:hover{color:var(--green-dk)}
.sfw-shop .item .meta{font-size:13.76px;color:var(--ink-mute);margin:0 0 9px}
.sfw-shop .item .meta p{margin:0}
.sfw-shop .item .price{font-family:var(--serif);font-size:19.2px;font-weight:600;text-align:right;white-space:nowrap}
.sfw-shop .item .rm{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin-top:10px;
  color:var(--ink-mute);font-size:13.44px;font-family:var(--sans);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.sfw-shop .item .rm:hover{color:#a83a25}
.sfw-shop .item .formats{margin-bottom:2px}

.sfw-shop .digital-note{display:flex;gap:10px;align-items:flex-start;font-size:14.08px;color:var(--ink-mute);margin-top:22px;border-left:2px solid var(--gold);padding-left:14px}

.sfw-shop .sum-row{display:flex;justify-content:space-between;gap:16px;font-size:15.2px;padding:7px 0}
.sfw-shop .sum-row.disc{color:var(--green-ink);font-weight:600}
.sfw-shop .sum-row.total{font-family:var(--serif);font-size:24px;font-weight:600;padding-top:14px;border-top:1px solid var(--rule);margin-top:8px}
.sfw-shop .coupon-box{display:flex;gap:8px;margin-top:6px}
.sfw-shop .coupon-box .inp{padding:11px 12px;font-size:14.72px}
.sfw-shop .coupon-box .btn-ghost{padding:11px 16px;flex:none}

.sfw-shop .cart-empty{text-align:center;padding:64px 24px;margin-bottom:24px}
.sfw-shop .cart-empty h3{font-family:var(--serif);font-size:25.6px;margin:12px 0 6px;font-weight:600}
.sfw-shop .cart-empty p{max-width:42ch;margin:0 auto 22px}
.sfw-shop .cart-empty .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* WooCommerce's own notices, brought into the palette. */
.sfw-shop .woocommerce-message,
.sfw-shop .woocommerce-info,
.sfw-shop .woocommerce-error{
  list-style:none;margin:0 0 22px;padding:14px 18px;border-radius:6px;
  border:1px solid var(--rule);background:var(--paper-4);font-size:15.2px;
}
.sfw-shop .woocommerce-message{border-color:var(--green);background:rgba(63,168,57,.09);color:var(--green-ink)}
.sfw-shop .woocommerce-error{border-color:#d38b7a;background:rgba(179,74,43,.07);color:#a83a25}
.sfw-shop .woocommerce-message .button,
.sfw-shop .woocommerce-info .button{float:right;margin-left:14px;font-weight:600;text-decoration:underline}

@media (max-width:900px){
  .sfw-shop .cart-layout{grid-template-columns:1fr;gap:32px}
  .sfw-shop .summary{position:static}
}
@media (max-width:520px){
  .sfw-shop .item{grid-template-columns:64px 1fr;gap:14px}
  .sfw-shop .item .price{grid-column:2;text-align:left;margin-top:4px}
}

/* ==========================================================================
   CHECKOUT - ported from checkout.html
   WooCommerce emits its own field markup (p.form-row > label + input), so the
   design's .field/.lbl/.inp treatment is mapped onto it rather than fought.
   ========================================================================== */
.sfw-shop .co-head{padding:40px 0 6px}
.sfw-shop .co{display:grid;grid-template-columns:1fr 384px;gap:56px;align-items:start;padding-bottom:80px}
.sfw-shop .co-form{grid-column:1;grid-row:1;min-width:0}
.sfw-shop .sumcol{grid-column:2;grid-row:1;position:sticky;top:96px}
body.admin-bar.sfw-shop .sumcol{top:128px}

.sfw-shop .co h2.sec{font-family:var(--serif);font-size:21.6px;margin:0 0 4px;font-weight:600}
.sfw-shop .co .sec-note{color:var(--ink-mute);font-size:14.08px;margin:0 0 18px}
.sfw-shop .co .block{padding:28px 0;border-top:1px solid var(--rule)}
.sfw-shop .co .block:first-of-type{border-top:0;padding-top:6px}

/* --- WooCommerce form fields, dressed as the design's inputs --- */
.sfw-shop .co .form-row{margin:0 0 18px;padding:0;display:block}
.sfw-shop .co .form-row label{display:block;font-size:12.48px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);margin-bottom:7px}
.sfw-shop .co .form-row label .required{color:var(--gold-dk);border:0;text-decoration:none}
.sfw-shop .co .form-row .input-text,
.sfw-shop .co .form-row select,
.sfw-shop .co .form-row .select2-selection{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--rule-2);border-radius:6px;padding:13px 14px;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;height:auto;
}
.sfw-shop .co .form-row .input-text:focus,
.sfw-shop .co .form-row select:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(28,74,134,.12)}
.sfw-shop .co .form-row .input-text::placeholder{color:#9aa6b8}
.sfw-shop .co .form-row .description{font-size:13.28px;color:var(--ink-mute);margin-top:7px}
.sfw-shop .co .form-row.woocommerce-invalid .input-text,
.sfw-shop .co .form-row.woocommerce-invalid select{border-color:#b3402b;box-shadow:0 0 0 3px rgba(179,64,43,.12)}
.sfw-shop .co .form-row.woocommerce-validated .input-text{border-color:var(--green)}

/* First / last name sit side by side */
.sfw-shop .co .woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.sfw-shop .co .form-row.sfw-email,
.sfw-shop .co .form-row.sfw-full,
.sfw-shop .co .woocommerce-billing-fields__field-wrapper > p:not(.sfw-half){grid-column:1/-1}
@media (max-width:560px){
  .sfw-shop .co .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
}

/* The email field is the delivery mechanism, so it gets its own card. */
.sfw-shop .co .form-row.sfw-email{
  border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;
  padding:20px;box-shadow:var(--shadow-soft);margin-bottom:22px;
}
.sfw-shop .co .form-row.sfw-email label{font-size:12.8px}
.sfw-shop .co .form-row.sfw-email .input-text{font-size:16.96px;padding:15px 14px}
.sfw-shop .co .form-row.sfw-email::after{
  content:"Your download link is sent here - please check it's correct.";
  display:block;font-size:13.28px;color:var(--ink-mute);margin-top:9px;
  text-transform:none;letter-spacing:0;font-weight:400;
}

/* --- Coupon --- */
.sfw-shop .coupon-wrap{padding-top:20px}
.sfw-shop .coupon-toggle{
  font-size:14.72px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2);
  font-family:var(--sans);text-decoration:underline;text-underline-offset:3px;
}
.sfw-shop .coupon-toggle:hover{color:var(--green-dk)}
.sfw-shop .coupon-open{display:none;margin-top:12px;gap:8px}
.sfw-shop .coupon-open.show{display:flex}
.sfw-shop .coupon-open .inp{padding:11px 12px}
.sfw-shop .coupon-open .btn-ghost{padding:12px 18px;flex:none}

/* --- Order summary --- */
.sfw-shop .sumbox .sum-title{margin:0 0 6px;font-family:var(--serif);font-size:19.2px;font-weight:600}
.sfw-shop .sumbox .li{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px dashed var(--rule)}
.sfw-shop .sumbox .li .thumb{border:1px solid var(--rule);background:var(--paper-2);border-radius:3px;padding:3px;overflow:hidden}
.sfw-shop .sumbox .li .thumb img{width:100%;height:auto;display:block}
.sfw-shop .sumbox .li .thumb-empty{display:block;aspect-ratio:4/5;background:repeating-linear-gradient(45deg,var(--paper-4),var(--paper-4) 6px,var(--paper-2) 6px,var(--paper-2) 12px)}
.sfw-shop .sumbox .li .li-name{font-family:var(--serif);font-size:15.68px;font-weight:600;display:block;margin-bottom:4px;line-height:1.2}
.sfw-shop .sumbox .li .p{font-weight:600;white-space:nowrap}
.sfw-shop .sumbox .li .formats{margin-top:2px}
.sfw-shop .sumbox .line{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:15.2px}
.sfw-shop .sumbox .line.disc{color:var(--green-ink);font-weight:600}
.sfw-shop .sumbox .line.total{font-family:var(--serif);font-size:24px;font-weight:600;border-top:1px solid var(--rule);margin-top:10px;padding-top:14px}
.sfw-shop .delivery{display:flex;gap:10px;font-size:13.92px;color:var(--ink-mute);border-left:2px solid var(--gold);padding-left:13px;margin-top:18px}

/* Summary is a disclosure on mobile, always open on desktop. */
.sfw-shop .sumwrap > summary{display:none}
.sfw-shop .sumwrap > summary::-webkit-details-marker{display:none}
@media (max-width:940px){
  .sfw-shop .co{grid-template-columns:1fr;gap:28px}
  .sfw-shop .co-form{grid-column:1;grid-row:2}
  .sfw-shop .sumcol{grid-column:1;grid-row:1;position:static}
  .sfw-shop .sumwrap > summary{
    display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
    padding:14px 18px;font-weight:600;font-size:15.2px;
    border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;
  }
  .sfw-shop .sumwrap[open] > summary{border-radius:8px 8px 0 0;border-bottom:0}
  .sfw-shop .sumwrap > summary .amt{margin-left:auto;font-family:var(--serif);font-size:19.2px}
  .sfw-shop .sumwrap > summary .chev{transition:transform .2s ease}
  .sfw-shop .sumwrap[open] > summary .chev{transform:rotate(180deg)}
  .sfw-shop .sumwrap[open] .panel{border-radius:0 0 8px 8px;border-top:0}
}

/* --- Payment box --- */
.sfw-shop #payment{background:none;border-radius:0}
.sfw-shop #payment ul.wc_payment_methods{list-style:none;margin:0 0 20px;padding:0;border:0}
.sfw-shop #payment ul.wc_payment_methods li{list-style:none;margin:0 0 10px;padding:0}
.sfw-shop #payment ul.wc_payment_methods li label{font-weight:600;font-size:15.2px;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.sfw-shop #payment ul.wc_payment_methods li input[type=radio]{width:18px;height:18px;accent-color:var(--green)}
.sfw-shop #payment .payment_box{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;
  padding:14px 16px;margin:10px 0 0;font-size:14.4px;color:var(--ink-mute);
}
.sfw-shop #payment .payment_box::before{display:none}
.sfw-shop #payment .woocommerce-privacy-policy-text{font-size:13.92px;color:var(--ink-mute)}
.sfw-shop #payment .place-order{padding:0;margin:0}
.sfw-shop #payment .validate-required.terms,
.sfw-shop #payment .woocommerce-terms-and-conditions-wrapper .form-row{
  border:1px solid var(--rule);background:var(--paper-2);border-radius:6px;padding:14px 16px;margin-bottom:14px;
}
.sfw-shop #payment .form-row.check.marketing,
.sfw-shop #payment .form-row#sfw_marketing_optin_field{
  border:1px dashed var(--rule-2);background:transparent;border-radius:6px;padding:14px 16px;margin-bottom:16px;
}
.sfw-shop #payment .checkbox,
.sfw-shop #payment .woocommerce-form__label-for-checkbox{
  display:flex;gap:12px;align-items:flex-start;font-size:14.88px;line-height:1.45;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);margin:0;
}
.sfw-shop #payment .checkbox input,
.sfw-shop #payment .woocommerce-form__label-for-checkbox input{width:18px;height:18px;accent-color:var(--green);flex:none;margin:2px 0 0}
.sfw-shop #payment #place_order{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
  background:linear-gradient(180deg,var(--green) 0%,var(--green-dk) 100%);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:17.6px;
  padding:20px 24px;border:none;border-radius:6px;cursor:pointer;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:filter .2s ease;float:none;
}
.sfw-shop #payment #place_order:hover{filter:brightness(1.03)}
.sfw-shop .co-trust{margin-top:18px;justify-content:space-between}

/* Login prompt / coupon notice WooCommerce puts above the form */
.sfw-shop .woocommerce-form-login,
.sfw-shop .checkout_coupon{
  border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;padding:20px;margin-bottom:22px;
}

/* ==========================================================================
   ORDER RECEIVED - ported from order-received.html
   ========================================================================== */
.sfw-shop .arrive{padding:56px 0 20px;position:relative;overflow:hidden}
.sfw-shop .arrive::before{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(63,168,57,.12),transparent 70%);pointer-events:none}
.sfw-shop .mark{width:64px;height:64px;border-radius:50%;background:linear-gradient(160deg,var(--green),var(--green-dk));display:grid;place-items:center;box-shadow:0 14px 28px -14px rgba(47,138,44,.7);margin-bottom:20px}
.sfw-shop .arrive h1{max-width:18ch;margin-bottom:.2em}
.sfw-shop .arrive p.lead{font-family:var(--serif);font-style:italic;font-size:19.2px;color:var(--ink-2);max-width:44ch}

.sfw-shop .files{border:1px solid var(--ink);border-radius:10px;background:var(--paper-4);box-shadow:var(--shadow-lift);overflow:hidden}
.sfw-shop .files header{background:var(--ink);color:#fff;padding:16px 24px;display:flex;align-items:center;gap:11px}
.sfw-shop .files header h2{color:#fff;font-size:19.2px;margin:0;font-family:var(--serif);font-weight:600}
.sfw-shop .file{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 24px;border-bottom:1px dashed var(--rule)}
.sfw-shop .file:last-child{border-bottom:0}
.sfw-shop .file .ic{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--rule)}
.sfw-shop .file h3{font-family:var(--serif);font-size:16.96px;margin:0 0 2px;font-weight:600}
.sfw-shop .file p{margin:0;font-size:13.76px;color:var(--ink-mute)}
.sfw-shop .emailed{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:14.72px;color:var(--ink-mute);border-left:2px solid var(--gold);padding-left:14px}
.sfw-shop .emailed b{color:var(--ink)}

.sfw-shop .steps{counter-reset:sfwstep;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sfw-shop .steps .step{border-top:2px solid var(--ink);padding-top:16px}
.sfw-shop .steps .step::before{counter-increment:sfwstep;content:counter(sfwstep);font-family:var(--serif);font-size:25.6px;font-weight:600;color:var(--gold-dk);display:block;line-height:1;margin-bottom:8px}
.sfw-shop .steps .step h3{font-family:var(--serif);font-size:17.6px;margin:0 0 5px;font-weight:600}
.sfw-shop .steps .step p{margin:0;font-size:14.88px;color:var(--ink-mute)}

.sfw-shop .odetails{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--paper-4);margin:0}
.sfw-shop .odetails > div{padding:18px 20px;border-right:1px solid var(--rule)}
.sfw-shop .odetails > div:last-child{border-right:0}
.sfw-shop .odetails dt{font-size:11.2px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;margin-bottom:5px}
.sfw-shop .odetails dd{margin:0;font-family:var(--serif);font-size:16.96px;font-weight:600}
@media (max-width:760px){ .sfw-shop .steps{grid-template-columns:1fr;gap:22px} }
@media (max-width:700px){
  .sfw-shop .odetails{grid-template-columns:1fr 1fr}
  .sfw-shop .odetails > div{border-bottom:1px solid var(--rule)}
  .sfw-shop .odetails > div:nth-child(even){border-right:0}
}
@media (max-width:620px){ .sfw-shop .file{grid-template-columns:auto 1fr} .sfw-shop .file .cta,.sfw-shop .file .btn-ghost{grid-column:1/-1;width:100%} }

/* ==========================================================================
   MY ACCOUNT - ported from account.html / account-login.html
   ========================================================================== */
.sfw-shop .acct-head{padding:44px 0 6px}
.sfw-shop .acct{display:grid;grid-template-columns:236px 1fr;gap:48px;align-items:start;padding-bottom:70px}
.sfw-shop .woocommerce-MyAccount-content{min-width:0}

.sfw-shop .anav{position:sticky;top:96px;border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft)}
body.admin-bar.sfw-shop .anav{top:128px}
.sfw-shop .anav a{display:flex;align-items:center;gap:11px;padding:14px 18px;text-decoration:none;color:var(--ink);font-size:15.2px;font-weight:500;border-bottom:1px solid var(--rule)}
.sfw-shop .anav a:last-child{border-bottom:0;color:var(--ink-mute)}
.sfw-shop .anav a:hover{background:var(--paper-2)}
.sfw-shop .anav a[aria-current]{background:var(--ink);color:#fff;font-weight:600}
.sfw-shop .anav svg{flex:none;opacity:.85}

.sfw-shop .card{border:1px solid var(--rule);background:var(--paper-4);border-radius:8px;box-shadow:var(--shadow-soft);padding:26px;margin-bottom:34px}
.sfw-shop .card h2{font-family:var(--serif);font-size:20.8px;margin:0 0 4px;font-weight:600}
.sfw-shop .card .sub{color:var(--ink-mute);font-size:14.4px;margin:0 0 20px}

.sfw-shop .quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.sfw-shop .quick a{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:8px;padding:16px;background:var(--paper)}
.sfw-shop .quick a:hover{border-color:var(--ink-2)}
.sfw-shop .quick b{display:block;font-family:var(--serif);font-size:16.8px;margin-bottom:2px}
.sfw-shop .quick span{font-size:13.44px;color:var(--ink-mute)}

.sfw-shop .dl{display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px dashed var(--rule)}
.sfw-shop .dl:last-of-type{border-bottom:0}
.sfw-shop .dl .ic{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--rule)}
.sfw-shop .dl h3{font-family:var(--serif);font-size:16.64px;margin:0 0 2px;font-weight:600}
.sfw-shop .dl p{margin:0;font-size:13.44px;color:var(--ink-mute)}
.sfw-shop .dl .left{font-size:12.8px;color:var(--ink-mute);white-space:nowrap}
.sfw-shop .dl .left b{color:var(--ink)}
@media (max-width:680px){ .sfw-shop .dl{grid-template-columns:44px 1fr} .sfw-shop .dl .left,.sfw-shop .dl .cta,.sfw-shop .dl .btn-ghost{grid-column:2} }

.sfw-shop .woocommerce-MyAccount-content table,
.sfw-shop .woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:15.04px}
.sfw-shop .woocommerce-MyAccount-content th{text-align:left;font-size:11.2px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);padding:0 12px 10px 0;border-bottom:1px solid var(--ink);font-weight:700}
.sfw-shop .woocommerce-MyAccount-content td{padding:15px 12px 15px 0;border-bottom:1px dashed var(--rule);vertical-align:middle}
.sfw-shop .woocommerce-orders-table__cell-order-status{display:inline-block;font-size:11.2px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:rgba(63,168,57,.14);color:var(--green-ink)}

.sfw-shop .woocommerce-MyAccount-content .empty{text-align:center;padding:48px 20px;border:1px dashed var(--rule-2);border-radius:8px;background:var(--paper)}
.sfw-shop .woocommerce-MyAccount-content .empty h3{font-family:var(--serif);font-size:21.6px;margin:16px 0 6px;font-weight:600}
.sfw-shop .woocommerce-MyAccount-content .empty p{color:var(--ink-mute);max-width:38ch;margin:0 auto 20px;font-size:15.04px}

@media (max-width:1000px){
  .sfw-shop .acct{grid-template-columns:1fr;gap:26px}
  .sfw-shop .anav{position:static;display:grid;grid-template-columns:repeat(3,1fr)}
  .sfw-shop .anav a{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);justify-content:center;padding:13px 8px;font-size:13.76px}
}
@media (max-width:620px){ .sfw-shop .anav{grid-template-columns:repeat(2,1fr)} .sfw-shop .quick{grid-template-columns:1fr} }

/* --- Sign in / register --- */
.sfw-shop .auth-head{padding:52px 0 4px}
.sfw-shop .auth{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding-bottom:80px;align-items:start}
.sfw-shop .auth.auth-single{grid-template-columns:minmax(0,520px)}
.sfw-shop .auth .panel-pad{padding:32px}
.sfw-shop .auth h2{font-family:var(--serif);font-size:24px;margin:0 0 6px;font-weight:600}
.sfw-shop .auth .sub{color:var(--ink-mute);font-size:14.88px;margin:0 0 24px}
.sfw-shop .auth .forgot{display:block;text-align:right;font-size:13.76px;margin:-8px 0 18px}
.sfw-shop .perks{list-style:none;padding:0;margin:22px 0 0;font-size:14.72px}
.sfw-shop .perks li{display:flex;gap:10px;padding:7px 0;color:var(--ink-mute);list-style:none}
.sfw-shop .perks svg{flex:none;color:var(--green-dk);margin-top:4px}
@media (max-width:820px){ .sfw-shop .auth{grid-template-columns:1fr;gap:24px} }

/* ==========================================================================
   Account layout corrections
   WooCommerce's woocommerce-layout.css floats the account columns and sizes
   them in percentages:
     .woocommerce-MyAccount-navigation{float:left;width:30%}
     .woocommerce-MyAccount-content{float:right;width:68%}
   Inside our CSS grid the float is ignored but the percentage width is not,
   so the 236px nav column rendered at 71px and clipped every label. Reset
   both to fill their grid tracks.
   ========================================================================== */
.sfw-shop .acct > .anav,
.sfw-shop .acct > .woocommerce-MyAccount-navigation,
.sfw-shop .woocommerce-MyAccount-navigation{
  float:none;width:100%;margin:0;
}
.sfw-shop .acct > .woocommerce-MyAccount-content,
.sfw-shop .woocommerce-MyAccount-content{
  float:none;width:100%;margin:0;
}
.sfw-shop .acct::after{content:"";display:table;clear:both}

/* The account shortcode is wrapped in .woocommerce by WooCommerce, and our
   page wrapper already applies .wrap - so the inner .wrap must not add a
   second layer of max-width and padding. */
.sfw-shop .sfw-page > .woocommerce > .wrap,
.sfw-shop .sfw-page .woocommerce .wrap{max-width:none;padding-left:0;padding-right:0}

/* Nav labels must never wrap or clip. */
.sfw-shop .anav a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sfw-shop .anav svg{flex:0 0 16px}

/* Account tables (Orders) - WooCommerce ships its own table styling. */
.sfw-shop .woocommerce-MyAccount-content .woocommerce-orders-table{border:0}
.sfw-shop .woocommerce-MyAccount-content table.shop_table{border:0;border-radius:0;margin:0}
.sfw-shop .woocommerce-MyAccount-content table.shop_table td,
.sfw-shop .woocommerce-MyAccount-content table.shop_table th{border-left:0;border-right:0}

/* ==========================================================================
   Footer newsletter - the design's single email field, not a contact form
   ========================================================================== */
.sfw-shop .news .sfw-news-form{
  display:flex;gap:0;margin-top:6px;border:1px solid var(--rule-2);
  border-radius:6px;overflow:hidden;background:#fff;
}
.sfw-shop .news .sfw-news-form input[type=email]{
  flex:1;border:none;outline:none;padding:12px 13px;
  font-family:var(--sans);font-size:14.72px;min-width:0;background:#fff;color:var(--ink);
}
.sfw-shop .news .sfw-news-form button{
  border:none;background:var(--ink);color:#fff;font-family:var(--sans);
  font-weight:600;font-size:13.76px;padding:0 18px;cursor:pointer;flex:none;
}
.sfw-shop .news .sfw-news-form button:hover{background:var(--ink-2)}
.sfw-shop .news .sfw-news-form button[disabled]{opacity:.6;cursor:progress}
.sfw-shop .news .sfw-news-msg{margin-top:9px;font-size:13.6px;display:none}
.sfw-shop .news .sfw-news-msg.show{display:block}
.sfw-shop .news .sfw-news-msg.ok{color:var(--green-ink);font-weight:600}
.sfw-shop .news .sfw-news-msg.err{color:#a83a25}

/* Addresses card */
.sfw-shop .addr-box{border:1px solid var(--rule);border-radius:8px;padding:20px;background:var(--paper)}
.sfw-shop .addr-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sfw-shop .addr-head h3{font-family:var(--sans);font-size:11.52px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 10px;font-weight:700}
.sfw-shop .addr-head address{font-style:normal;margin:0;line-height:1.7;font-size:15.2px}
.sfw-shop .addr-head .btn-ghost{align-self:flex-start;text-decoration:none}

/* Refunded / failed / cancelled orders read differently from completed ones. */
.sfw-shop .woocommerce-orders-table__cell-order-status.refund{background:rgba(179,74,43,.12);color:#a83a25}

/* Account details form: the shared .field/.inp treatment already applies, but
   WooCommerce may still wrap rows in its own .form-row markup. */
.sfw-shop .woocommerce-EditAccountForm .form-row{margin:0 0 18px;padding:0;display:block}
.sfw-shop .woocommerce-EditAccountForm fieldset{border:0;padding:0;margin:0}
.sfw-shop .woocommerce-EditAccountForm legend{font-size:11.52px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;padding:0;margin-bottom:12px}
.sfw-shop .woocommerce-EditAccountForm .cta{margin-top:6px}

/* Wide tables scroll inside their own container instead of pushing the page.
   The Orders table's five columns overflowed the viewport by 2px at 375. */
.sfw-shop .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sfw-shop .table-scroll table{min-width:420px}
@media (max-width:600px){
  .sfw-shop .woocommerce-MyAccount-content td,
  .sfw-shop .woocommerce-MyAccount-content th{padding-right:10px;font-size:14.4px}
}

/* ==========================================================================
   CHECKOUT - corrections to match checkout.html
   ========================================================================== */

/* WooCommerce pads every .form-row inside #payment by 1em, which inset the
   pay button 34px inside its column. The design's button is full width. */
.sfw-shop #payment .form-row,
.sfw-shop #payment div.form-row{padding:0;margin:0}
.sfw-shop #payment .form-row.place-order{padding:0;margin:0}
.sfw-shop #payment{padding:0;background:none;border-radius:0}
.sfw-shop #payment .place-order .cta,
.sfw-shop #payment #place_order{width:100%;display:flex;float:none;margin:0}

/* Terms + marketing sit above the button, boxed as in the design. */
.sfw-shop #payment .woocommerce-terms-and-conditions-wrapper{margin-bottom:14px}
.sfw-shop #payment .validate-required[class*=terms],
.sfw-shop #payment .woocommerce-terms-and-conditions-wrapper .form-row{
  border:1px solid var(--rule);background:var(--paper-2);border-radius:6px;
  padding:14px 16px;margin-bottom:14px;
}
.sfw-shop #payment .form-row.check.marketing,
.sfw-shop #payment #sfw_marketing_optin_field{
  border:1px dashed var(--rule-2);background:transparent;border-radius:6px;
  padding:14px 16px;margin-bottom:18px;
}
.sfw-shop .check.boxed.create-account{
  border:1px solid var(--rule);background:var(--paper-2);border-radius:6px;
  padding:14px 16px;margin:4px 0 0;
}
.sfw-shop .woocommerce-account-fields{margin-top:4px}

/* Pay button: label swaps to a spinner while the order is submitting. */
.sfw-shop #place_order .spin{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:sfwsp .7s linear infinite;display:none;
}
.sfw-shop #place_order.is-loading{filter:saturate(.75) brightness(.98);cursor:progress}
.sfw-shop #place_order.is-loading .spin{display:block}

/* Trust row: the design's space-between spread the three items ~100px apart
   across the 672px column. Grouped left with a fixed rhythm instead. */
.sfw-shop .co-trust{justify-content:flex-start;gap:10px 28px;margin-top:20px}

/* Express wallet row + "or pay by card" divider */
.sfw-shop .express{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sfw-shop .express:empty{display:none}
.sfw-shop .express > *{min-height:52px}
.sfw-shop .divider{
  display:flex;align-items:center;gap:16px;margin:24px 0 4px;
  color:var(--ink-mute);font-size:12.8px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
}
.sfw-shop .divider::before,.sfw-shop .divider::after{content:"";flex:1;height:1px;background:var(--rule)}
@media (max-width:520px){ .sfw-shop .express{grid-template-columns:1fr} }

/* Email card: helper line plus live valid / invalid feedback. */
.sfw-shop .block-email{padding-top:6px;border-top:0}
.sfw-shop .co .form-row.sfw-email{margin-bottom:0}
.sfw-shop .co .form-row.sfw-email::after{content:none}
.sfw-shop .sfw-email-help{font-size:13.28px;color:var(--ink-mute);margin:9px 0 0}
.sfw-shop .sfw-email-state{margin-top:9px;display:none}
.sfw-shop .sfw-email-state.show{display:flex}
.sfw-shop .sfw-email-state.ok{color:var(--green-ink);font-weight:600;gap:7px;align-items:center;font-size:13.44px}
.sfw-shop .sfw-email-state.err{color:#a83a25;font-weight:500;gap:7px;align-items:flex-start;font-size:13.44px}
.sfw-shop .co .form-row.sfw-email.is-valid .input-text{border-color:var(--green)}
.sfw-shop .co .form-row.sfw-email.is-invalid .input-text{border-color:#b3402b;box-shadow:0 0 0 3px rgba(179,64,43,.12)}

/* Product cards are not blog entries. The parent theme's inline
   .archive .entry rule applies a white card - 34px padding, 42px bottom
   margin, 1px border, 26px radius and a drop shadow. In this design the card
   itself is bare and only the cover carries a border and shadow, so all of it
   is reset here. */
.sfw-shop .grid .pcard{
  padding:0;margin:0;border:0;background:none;text-align:left;
  box-shadow:none;border-radius:0;transition:none;
}
.sfw-shop .grid .pcard-link{display:block;width:100%}

/* Cards stretch to the tallest in their row; keep the buy button on the
   baseline rather than floating mid-card when copy lengths differ. */
.sfw-shop .grid .pcard{height:100%}
.sfw-shop .grid .pcard .add{margin-top:auto}
.sfw-shop .grid .pcard .formats{margin-bottom:2px}

/* The add-to-cart button reveals on hover on desktop. Below the breakpoint
   where the filter rail collapses there is no hover to give, and relying on
   @media (hover:none) alone leaves it hidden on any touch device that still
   reports hover support - so pin it visible by width as well. */

/* Hover-reveal for the add-to-cart button, expressed the safe way round.
   Hiding by default and un-hiding for (hover:none) means any environment that
   misreports hover capability leaves the button invisible and the card
   unbuyable. So: visible by default, and hidden-until-hover only where there
   is genuinely a fine pointer to hover with. */
.sfw-shop .grid .pcard .add{opacity:1;transform:none}
/* Hide-until-hover only where there is both a pointer to hover with AND a
   desktop-width layout. Below that the rail has collapsed and the card is
   being tapped, so the button stays visible - as it does in the design's
   mobile view. */

/* ==========================================================================
   FIXES
   ========================================================================== */

/* 1. Page heads were wiping their own side padding.
   Every page head sits on an element that also carries .wrap, and each used
   the shorthand `padding: Xpx 0 Ypx`. Same specificity, declared later, so
   the `0` overrode .wrap's `0 24px` and the copy ran flush to the viewport
   edge on anything narrower than 1160px. Vertical-only padding from here so
   the wrap's gutters survive. */
.sfw-shop .shop-head{padding:52px 0 30px;padding-left:24px;padding-right:24px}
.sfw-shop .page-head{padding:48px 0 8px;padding-left:24px;padding-right:24px}
.sfw-shop .co-head{padding:40px 0 6px;padding-left:24px;padding-right:24px}
.sfw-shop .acct-head{padding:44px 0 6px;padding-left:24px;padding-right:24px}
.sfw-shop .auth-head{padding:52px 0 4px;padding-left:24px;padding-right:24px}
.sfw-shop .arrive{padding:56px 0 20px;padding-left:24px;padding-right:24px}

/* 2. Add to cart spans the full card, as in the design. */
.sfw-shop .grid .pcard .add{
  align-self:stretch;
  width:100%;
  justify-content:center;
}

/* 3. The price turns green on hover, alongside the button reveal. */
.sfw-shop .grid .pcard:hover .pnow,
.sfw-shop .grid .pcard:focus-within .pnow{color:var(--green-dk)}
.sfw-shop .grid .pcard .pnow{transition:color .2s ease}

/* 4. Sort control: the wrapper was resolving 22px taller than the <select>
   inside it, so the absolutely-centred chevron sat below the select's middle.
   Making the wrapper an inline-flex box ties its height to the control. */
.sfw-shop .sel{display:inline-flex;align-items:center;position:relative}
.sfw-shop .sel select{display:block;margin:0}

/* ==========================================================================
   Card footer spacing + price colour
   ========================================================================== */

/* margin-top:auto on the button was bottom-aligning it across a row, but it
   also replaced the design's 12px gap - and in a single-column layout `auto`
   resolves to 0, jamming the button against the format pills. Move the
   auto-margin up to the price line so the whole footer is pushed down
   instead, and give the button back a real gap at every width. */
.sfw-shop .grid .pcard .price-line{margin-top:auto}
.sfw-shop .grid .pcard .formats{margin-bottom:0}
.sfw-shop .grid .pcard .add{margin-top:14px}

/* Price sits green, as in the shop design. */
.sfw-shop .grid .pcard .pnow,
.sfw-shop .grid .pcard .pnow .woocommerce-Price-amount,
.sfw-shop .grid .pcard .pnow .woocommerce-Price-currencySymbol{color:var(--green-dk)}

/* Room under each card so the button never crowds the next one. */
@media (max-width:600px){
  .sfw-shop .grid{gap:38px}
}

/* ==========================================================================
   BACK TO shop.html EXACTLY
   ========================================================================== */

/* The parent theme's inline archive CSS decorates cards on hover:
     .archive .entry:hover     { box-shadow:0 22px 55px rgba(15,23,42,.1);
                                 border-color:#dcfce7 }
     .archive .entry:hover img { transform:scale(1.02) }
   None of that exists in shop.html - the only hover effect there is the cover
   lifting 4px. The `entry` classes are now stripped in PHP; these rules stay
   as a guard in case anything re-adds them. */
.sfw-shop .grid .pcard:hover,
.sfw-shop .grid .pcard:focus-within{
  box-shadow:none;
  border-color:transparent;
  background:none;
}
.sfw-shop .grid .pcard:hover img,
.sfw-shop .grid .pcard:focus-within img{transform:none}
.sfw-shop .grid .pcard .cover img{border-radius:0}

/* shop.html: .pcard .pnow has NO colour of its own. The card is an <a>, so it
   inherits --ink at rest and picks up a:hover's --green-dk on hover. Making it
   permanently green was my error - restore the resting colour and keep green
   for hover only. */
.sfw-shop .grid .pcard .pnow,
.sfw-shop .grid .pcard .pnow .woocommerce-Price-amount,
.sfw-shop .grid .pcard .pnow .woocommerce-Price-currencySymbol{color:var(--ink)}
.sfw-shop .grid .pcard:hover .pnow,
.sfw-shop .grid .pcard:hover .pnow .woocommerce-Price-amount,
.sfw-shop .grid .pcard:hover .pnow .woocommerce-Price-currencySymbol,
.sfw-shop .grid .pcard:focus-within .pnow,
.sfw-shop .grid .pcard:focus-within .pnow .woocommerce-Price-amount,
.sfw-shop .grid .pcard:focus-within .pnow .woocommerce-Price-currencySymbol{color:var(--green-dk)}

/* shop.html spacing, verbatim: .pcard .add{margin-top:12px} and no auto
   margins or forced card heights. */
.sfw-shop .grid .pcard{height:auto}
.sfw-shop .grid .pcard .price-line{margin-top:0;margin-bottom:10px}
.sfw-shop .grid .pcard .formats{margin-bottom:0}
.sfw-shop .grid .pcard .add{margin-top:12px}

/* shop.html grid gaps, verbatim. */
@media (max-width:1000px){ .sfw-shop .grid{gap:30px 22px} }
@media (max-width:600px){ .sfw-shop .grid{gap:34px} }

/* ==========================================================================
   Add-to-cart reveal, driven by a class rather than a media query.

   shop.html hides the button and reveals it on :hover, with
   @media (hover:none) as the touch fallback. Media-feature evaluation proved
   unreliable across browsers here - CSS applied a (hover:hover) block that
   matchMedia reported as false, leaving the button invisible and the card
   unbuyable on mobile. So the decision is made once in JS (matchMedia is
   reliable there) and expressed as a body class. Default is visible, which is
   the safe direction to fail.
   ========================================================================== */
.sfw-shop .grid .pcard .add{opacity:1;transform:none}

body.sfw-shop.sfw-card-hover .grid .pcard .add{
  opacity:0;
  transform:translateY(4px);
}
body.sfw-shop.sfw-card-hover .grid .pcard:hover .add,
body.sfw-shop.sfw-card-hover .grid .pcard:focus-within .add{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   Header icon buttons, coupon row, drawer offset
   ========================================================================== */

/* The parent theme pads every <button> with 12px 24px. The account and cart
   icons are <a> elements so they stayed 42x42 circles, but the search and
   hamburger are <button> and came out 49.6x42 pills. Pin the box on both
   element types with enough specificity to beat the theme's button rule. */
.sfw-shop .nav-tools a.icon-btn,
.sfw-shop .nav-tools button.icon-btn,
.sfw-shop .nav-search button.icon-btn{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  flex:0 0 42px;
  border-radius:999px;
  line-height:0;
  box-sizing:border-box;
}
@media (max-width:900px){
  .sfw-shop .nav-tools a.icon-btn,
  .sfw-shop .nav-tools button.icon-btn{
    width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;
  }
}
/* Open search keeps the same circle rather than growing. */
.sfw-shop .nav-tools button.icon-btn[aria-expanded="true"]{
  background:var(--paper-4);
  border-color:var(--rule-2);
  color:var(--ink-2);
}

/* Coupon row: the ghost button resolved 12px taller than the input. Stretch
   both to a common height instead of relying on matching paddings. */
.sfw-shop .coupon-open{display:none;align-items:stretch;gap:8px;margin-top:12px}
.sfw-shop .coupon-open.show{display:flex}
.sfw-shop .coupon-open .inp{flex:1;min-width:0;padding:11px 12px}
.sfw-shop .coupon-open .btn-ghost{
  flex:0 0 auto;
  padding:0 18px;
  height:auto;
  line-height:1;
  white-space:nowrap;
}

/* Cart drawer must sit below the WordPress admin bar, otherwise its header
   and close button are hidden underneath it for logged-in users. */
body.admin-bar .sfw-drawer{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .sfw-drawer{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar .sfw-drawer{top:0}
}

/* Coupon row: the flex container was resolving 12px taller than the input, so
   a stretched button came out 55px against a 43px field. Both controls get an
   explicit matching height instead of depending on intrinsic sizing. */
.sfw-shop .coupon-open{align-items:center;gap:8px}
.sfw-shop .coupon-open .inp{
  flex:1;min-width:0;
  height:44px;
  padding:0 12px;
  line-height:normal;
}
.sfw-shop .coupon-open .btn-ghost{
  flex:0 0 auto;
  height:44px;
  padding:0 18px;
  line-height:1;
  white-space:nowrap;
}

/* The coupon field inherits a 12px bottom margin from the form styles, so its
   margin box centred 6px above the button and stretched the row to 56px. */
.sfw-shop .coupon-open .inp,
.sfw-shop .coupon-open .btn-ghost{margin:0}

/* ==========================================================================
   FOOTER corrections
   ========================================================================== */

/* The logo carries width/height attributes from WordPress (1085x323). With
   only `height:38px` set, the browser kept the 1085 width attribute, capped it
   at the column via max-width:100%, and rendered 234x38 - a 6.16 ratio against
   a natural 3.36. Letting the width follow the height restores the shape. */
.sfw-shop .foot-brand img{
  height:38px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  margin-bottom:14px;
}

/* Newsletter field: the input inherits an 11px bottom margin from the form
   styles, so it sat 2px short inside a 55px pill while the button stretched to
   53px. The design is one flush bordered pill with the field and a dark button
   joined edge to edge. */
.sfw-shop .news .sfw-news-form{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:6px;
  border:1px solid var(--rule-2);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.sfw-shop .news .sfw-news-form input[type=email]{
  flex:1;
  min-width:0;
  margin:0;
  border:none;
  outline:none;
  padding:12px 13px;
  font-family:var(--sans);
  font-size:14.72px;
  line-height:normal;
  background:#fff;
  color:var(--ink);
  border-radius:0;
}
.sfw-shop .news .sfw-news-form button{
  flex:0 0 auto;
  margin:0;
  border:none;
  border-radius:0;
  background:var(--ink);
  color:#fff;
  font-family:var(--sans);
  font-weight:600;
  font-size:13.76px;
  padding:0 18px;
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
}
.sfw-shop .news .sfw-news-form button:hover{background:var(--ink-2)}

/* Payment badges, per the design. */
.sfw-shop .pays{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.sfw-shop .pays span{
  border:1px solid var(--rule-2);
  background:var(--paper-4);
  border-radius:5px;
  padding:5px 8px;
  display:grid;
  place-items:center;
}
.sfw-shop .pays svg{display:block}

/* ==========================================================================
   Payment method list
   Two live gateways now, so the list needs to read like a normal store's:
   each method a distinct selectable row, the chosen one clearly marked, and
   the provider's own logos left alone.
   ========================================================================== */
.sfw-shop #payment ul.wc_payment_methods{
  list-style:none;margin:0 0 20px;padding:0;border:0;
  display:flex;flex-direction:column;gap:10px;
}
.sfw-shop #payment ul.wc_payment_methods li{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--rule-2);
  border-radius:8px;
  background:var(--paper-4);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.sfw-shop #payment ul.wc_payment_methods li:hover{border-color:var(--ink-2)}
.sfw-shop #payment ul.wc_payment_methods li.wc_payment_method label{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;margin:0;cursor:pointer;
  font-weight:600;font-size:15.2px;color:var(--ink);width:100%;
}
.sfw-shop #payment ul.wc_payment_methods li input[type=radio]{
  width:20px;height:20px;accent-color:var(--green);flex:none;margin:0;
}
/* Provider logos sit at the end of the row, not crowding the label. */
.sfw-shop #payment ul.wc_payment_methods li label img{
  margin:0 0 0 auto;max-height:26px;width:auto;display:inline-block;
}
/* Selected method gets a clear, calm highlight. */
.sfw-shop #payment ul.wc_payment_methods li:has(input:checked){
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(63,168,57,.12);
  background:#fff;
}
/* The expanded panel under the chosen method. */
.sfw-shop #payment .payment_box{
  background:var(--paper-2);
  border:0;border-top:1px solid var(--rule);
  border-radius:0;
  margin:0;padding:16px 18px;
  font-size:14.4px;color:var(--ink-mute);
}
.sfw-shop #payment .payment_box::before{display:none}
.sfw-shop #payment .payment_box p:last-child{margin-bottom:0}

/* PayPal renders its own branded button in place of the standard one - keep
   it the same width and rhythm as ours so the layout does not jump. */
.sfw-shop #payment .paypal-button-container,
.sfw-shop #payment .ppcp-button-container{width:100%!important;margin-top:4px}

/* Pay Later messaging sits above the list; give it room to breathe. */
.sfw-shop #payment .ppcp-messages,
.sfw-shop #payment .ppcp-paylater-message{margin:0 0 14px;font-size:14.08px}

/* Card brand badges beside the card method. */
.sfw-shop .sfw-gw-brands{
  margin-left:auto;display:inline-flex;gap:6px;align-items:center;flex:none;
}
.sfw-shop .sfw-gw-brands span{
  border:1px solid var(--rule-2);background:#fff;border-radius:4px;
  padding:4px 6px;display:grid;place-items:center;
}
.sfw-shop .sfw-gw-brands svg{display:block}
@media (max-width:480px){
  .sfw-shop .sfw-gw-brands{display:none}
}

/* ==========================================================================
   Payment presentation refinements
   ========================================================================== */

/* The radio is a sibling of the label, not inside it, so padding the label
   alone pinned the radio to the row's corner and pushed the title onto its
   own line. Lay the row out as a grid: radio, label, panel spanning both. */
.sfw-shop #payment ul.wc_payment_methods li.wc_payment_method{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:12px;
  padding:0;
}
.sfw-shop #payment ul.wc_payment_methods li input[type=radio]{
  grid-column:1;
  margin:0 0 0 18px;
}
.sfw-shop #payment ul.wc_payment_methods li.wc_payment_method label{
  grid-column:2;
  padding:17px 18px 17px 0;
  gap:12px;
}
.sfw-shop #payment ul.wc_payment_methods li .payment_box{
  grid-column:1 / -1;
}

/* WooCommerce's speech-bubble arrow is declared at
   .woocommerce-checkout #payment div.payment_box::before - one element
   selector more specific than the rule that was meant to hide it. */
.sfw-shop #payment div.payment_box::before{display:none!important}

/* Gateways that render their button further down the form leave an empty
   panel behind; collapse it rather than showing a blank grey slab. */
.sfw-shop #payment .payment_box:empty{display:none}

/* Stripe prints its own "- OR -" beneath the wallets. The block already has
   a labelled divider, and two separators in a row is just noise. */
.sfw-shop #wc-stripe-express-checkout-button-separator{display:none!important}

/* Wallet buttons sit flush in the express block, above the divider. */
.sfw-shop .express #wc-stripe-express-checkout-element{margin:0!important}
.sfw-shop .express:empty{display:none}

/* The express block carries a heading and a divider around the wallet
   buttons. If no wallet is available in this browser Stripe renders nothing,
   and a heading introducing an empty space plus a divider dividing nothing is
   worse than no section at all. JS adds .is-ready once buttons really paint.
   (:empty cannot do this - the container holds template whitespace.) */
.sfw-shop .sfw-express-block{display:none}
.sfw-shop .sfw-express-block.is-ready{display:block}

/* Brand marks carry their own colour and rounding, so the neutral chip that
   wraps the footer badges would only box them in twice. */
.sfw-shop #payment .sfw-gw-brands span{border:0;background:none;padding:0}
.sfw-shop #payment .sfw-gw-brands svg{display:block;border-radius:3px}
.sfw-shop #payment .sfw-gw-name{margin-right:auto}

/* Stripe's saved-card checkbox is the only field in the card panel; without
   this it sits flush against the panel edge. */
.sfw-shop #payment .payment_box .form-row{margin:0}
.sfw-shop #payment .payment_box .woocommerce-SavedPaymentMethods{margin:0}

/* PayPal Pay Later promotional banner.
   US "Pay in 4" covers $30-$1500; everything here is $9-$29, so the banner
   advertises instalment terms no shopper on this checkout can actually use.
   Also switched off in PayPal's own settings - this is the belt and braces. */
.ppcp-messages,
[data-pp-message]{display:none!important}

/* Selected row. The :has(input:checked) rule above is the progressive
   version; this class is set from the live checked property, which stays
   correct when WooCommerce re-renders the container with a stale checked
   attribute on the previously chosen row. */
.sfw-shop #payment ul.wc_payment_methods li.wc_payment_method.is-selected{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(63,168,57,.12);
  background:#fff;
}
.sfw-shop #payment ul.wc_payment_methods li.wc_payment_method:not(.is-selected){
  border-color:var(--rule-2);
  box-shadow:none;
  background:var(--paper-4);
}
.sfw-shop #payment ul.wc_payment_methods li.wc_payment_method:not(.is-selected):hover{border-color:var(--ink-2)}

/* ==========================================================================
   View order (My account -> Orders -> View)
   Core WooCommerce renders this as bare tables. It now reuses the thank-you
   page's "Your files" panel, so a customer returning to an old order sees the
   same design they saw at checkout.
   ========================================================================== */

/* The files panel is built for the full-width thank-you page; inside the
   narrower account column it needs to sit flush with the card. */
.sfw-shop .acct .files{margin-left:0;margin-right:0;max-width:100%}
.sfw-shop .acct .files .file{padding:16px 18px;gap:14px}
.sfw-shop .acct .files .file h3{font-size:15.2px}
.sfw-shop .acct .files .file p{font-size:13.6px}

/* Long download names must not shove the button off the row. */
.sfw-shop .acct .files .file > div:nth-child(2){min-width:0}
.sfw-shop .acct .files .file h3,
.sfw-shop .acct .files .file p{overflow-wrap:anywhere}
.sfw-shop .acct .files .file .cta.small,
.sfw-shop .acct .files .file .btn-ghost{flex:none;white-space:nowrap}

.sfw-shop .acct .sfw-sub{
  font-family:var(--serif);font-size:19.2px;font-weight:600;
  margin:26px 0 12px;color:var(--ink);
}

/* Totals row in the order table reads as a summary, not another line item. */
.sfw-shop .sfw-order-table tfoot th{
  text-align:left;font-weight:600;color:var(--ink-mute);
  font-size:14.4px;text-transform:none;letter-spacing:0;
}
.sfw-shop .sfw-order-table tfoot tr.is-total th,
.sfw-shop .sfw-order-table tfoot tr.is-total td{
  font-family:var(--serif);font-size:19.2px;font-weight:600;color:var(--ink);
  border-top:1px solid var(--rule);padding-top:14px;
}
.sfw-shop .sfw-order-table .qty{color:var(--ink-mute);font-size:13.6px}

.sfw-shop .sfw-address{
  font-style:normal;line-height:1.7;color:var(--ink-mute);font-size:15.2px;margin:0;
}

/* The status pill is defined for the orders list; reuse it in the header. */
.sfw-shop .acct .card > .sub .woocommerce-orders-table__cell-order-status{
  display:inline-block;vertical-align:baseline;
}

/* WooCommerce prints "Order again" into the after-order-table hook, where the
   parent theme's flat black button styling catches it. */
.sfw-shop .acct .order-again{margin:22px 0 0}
.sfw-shop .acct .order-again .button{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);
  border:1px solid var(--rule-2);border-radius:6px;
  padding:12px 22px;
  font-family:var(--sans);font-weight:600;font-size:15.2px;
  text-decoration:none;text-transform:none;letter-spacing:0;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.sfw-shop .acct .order-again .button:hover{
  border-color:var(--green);color:var(--green-dk);background:#fff;
}

/* The parent theme underlines every <th> in dark navy, which in the totals
   block drew a heavy rule under the label column only. */
.sfw-shop .sfw-order-table tfoot th,
.sfw-shop .sfw-order-table tfoot td{
  border-bottom:1px solid var(--rule);
}
.sfw-shop .sfw-order-table tfoot tr:last-child th,
.sfw-shop .sfw-order-table tfoot tr:last-child td{border-bottom:0}