/* „Kaip veikia dovanų kuponas“ – 4 line-drawn isometric steps (template-parts/anim-voucher-steps.php, js/anim-voucher.js).
   Loaded only on voucher products 1504 / 8290 and the Christmas landing (inc/anims.php). Fonts = the theme's Barlow / Playfair. */
.sm-vs{--page:#FBF6F3;--panel:#F5EBE7;--line:#C48A7E;--rose:#9C6158;--deep:#5E2F37;--ink:#2B1A17;--muted:#6E5651;--rule:#DDB9AE;--thin:#D2A196;--shade:#E9D7D0;
 max-width:1240px;margin:0 auto;padding:72px 28px 88px;color:var(--ink);font:400 17px/1.55 Barlow,"Barlow Fallback",system-ui,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;clear:both}
.sm-vs *,.sm-vs *::before,.sm-vs *::after{box-sizing:border-box}
.sm-vs .sm-vs__eye{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font:600 13px/1 Barlow,"Barlow Fallback",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.sm-vs .sm-vs__eye::before,.sm-vs .sm-vs__eye::after{content:"";width:28px;height:1px;background:var(--line)}
.sm-vs .sm-vs__h{font:400 clamp(30px,4vw,44px)/1.15 "Playfair Display",Georgia,serif;text-align:center;margin:14px 0 10px;color:var(--ink);letter-spacing:0;text-transform:none}
.sm-vs .sm-vs__h em{font-style:italic;color:var(--rose)}
.sm-vs .sm-vs__lead{text-align:center;color:var(--muted);max-width:520px;margin:0 auto 52px;font-size:17px}
.sm-vs .sm-vs__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.sm-vs .sm-vs__step{display:flex;flex-direction:column;margin:0;padding:0;background:none}
.sm-vs .sm-vs__art{background:var(--panel);border-radius:22px;aspect-ratio:6/5;display:grid;place-items:center;position:relative;overflow:hidden}
.sm-vs .sm-vs__art svg{width:100%;height:100%;display:block}
.sm-vs .sm-vs__num{display:flex;align-items:center;gap:10px;margin:22px 0 8px;font:600 13px/1 Barlow,"Barlow Fallback",sans-serif;letter-spacing:.16em;color:var(--rose)}
.sm-vs .sm-vs__num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}
.sm-vs .sm-vs__t{font:400 23px/1.25 "Playfair Display",Georgia,serif;margin:0 0 6px;color:var(--ink);letter-spacing:0;text-transform:none}
.sm-vs .sm-vs__p{color:var(--muted);font-size:16px;margin:0}
.sm-vs .sm-vs__cta{display:flex;justify-content:center;margin-top:52px}
.sm-vs .sm-vs__btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:15px 30px;border-radius:999px;background:linear-gradient(135deg,#DDB1A3,#C48A7E 55%,#B07769);color:#fff;font:600 16px/1 Barlow,"Barlow Fallback",sans-serif;letter-spacing:.02em;text-decoration:none;box-shadow:0 6px 18px rgba(156,97,88,.22)}
.sm-vs .sm-vs__btn:hover,.sm-vs .sm-vs__btn:focus{color:#fff;text-decoration:none}
.sm-vs .sm-vs__btn:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
/* line art (paths are built by js/anim-voucher.js) */
.sm-vs .ln{fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1);transition-delay:calc(var(--i)*45ms)}
.sm-vs .ln.f{fill:var(--panel)}
.sm-vs .ln.thin{stroke-width:1.1;stroke:var(--thin)}
.sm-vs .ln.ink{stroke:var(--deep);stroke-width:1.5;transition:none}
.sm-vs .acc{fill:var(--line);opacity:0;transition:opacity .6s ease .9s}
.sm-vs .acc.deep{fill:var(--deep)}
.sm-vs .is-on .ln{stroke-dashoffset:0}
.sm-vs .is-on .acc.show{opacity:1}
.sm-vs .shadow{fill:var(--shade);opacity:0;transition:opacity 1s ease .6s}
.sm-vs .is-on .shadow{opacity:1}
/* on the Christmas landing it sits inside .v3-wrap below the grid */
.v3-shop .sm-vs{padding-left:0;padding-right:0;padding-bottom:24px}
@media (max-width:860px){
 .sm-vs{padding:44px 16px 64px}
 .sm-vs .sm-vs__lead{margin-bottom:34px}
 .sm-vs .sm-vs__list{grid-template-columns:1fr;gap:40px}
}
@media (min-width:861px) and (max-width:1100px){.sm-vs .sm-vs__list{grid-template-columns:repeat(2,1fr);gap:34px 26px}}
@media (prefers-reduced-motion:reduce){.sm-vs .ln,.sm-vs .acc,.sm-vs .shadow{transition:none!important}}
/* dark mode (css/dark.css does not know this file): same drawing, dark panels */
html[data-theme="dark"] .sm-vs{--panel:#2E1D19;--ink:#F5E9E4;--muted:#E3CFC8;--rose:#EBCBBE;--deep:#EBCBBE;--rule:#6B4A42;--thin:#9C6B60;--shade:#3A2622}