/* Savonia home perks (2026-11-13): 4 benefit cards under the home slider (template savonia/home/perks.phtml).
   Desktop/tablet: illustration on top, title + text centred. Phone: compact rows (illustration left, text right).
   Two-tone Savonia illustrations (inline SVG): light green fill, dark green line, leaf motif; the gift is warm orange.
   Motion: CSS icon loop only with prefers-reduced-motion: no-preference (paused off screen by .is-off from the template JS). */
.sv-perks {
    --pk-green: var(--sv-green, #a9cf45); --pk-ink: #4f6b10; --pk-soft: var(--sv-green-soft, #f3f8e6); --pk-orange-soft: #fdf1e4;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; padding: 0; list-style: none; text-align: center;
}
.sv-perk {
    position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 26px 20px 22px;
    background: #fff linear-gradient(170deg, #fff 40%, #f5faea 100%); border-radius: var(--sv-radius, 10px); box-shadow: var(--sv-shadow, 0 2px 12px rgba(0, 0, 0, .07));
    overflow: hidden; transition: box-shadow .25s ease;
}
.sv-perk::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--pk-green), #c8e286); transform-origin: 0 50%;
}
.sv-perk:hover { box-shadow: 0 6px 22px rgba(79, 107, 16, .14); }
.sv-perk__ico {
    position: relative; display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 84px; height: 84px; margin: 0 0 14px; border-radius: 50%; background: var(--pk-soft);
}
.sv-perk__ico::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
    border: 2px solid var(--pk-green); opacity: 0; pointer-events: none;
}
.sv-perk__ico svg {
    display: block; width: 64px; height: 64px; overflow: visible;
    fill: none; stroke: var(--pk-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sv-perk__ico svg g { transform-box: fill-box; }
.sv-perk .pk-sh { fill: rgba(79, 107, 16, .12); stroke: none; }
.sv-perk .pk-speed, .sv-perk .pk-spark { opacity: 0; }
.sv-perk .pk-speed { stroke: var(--pk-green); stroke-width: 2.4; }
.sv-perk .pk-spark { transform-origin: 50% 50%; }
.sv-perk--gift .sv-perk__ico { background: var(--pk-orange-soft); }
.sv-perk--gift .sv-perk__ico::after { border-color: #f2a65a; }
.sv-perk__txt { display: block; max-width: 270px; }
.sv-perk__t { display: block; margin: 0 0 6px; color: var(--sv-text, #2f2f2f); font-size: 17px; font-weight: 700; line-height: 1.3; }
.sv-perk__d { display: block; margin: 0; color: var(--sv-muted, #6b6b6b); font-size: 13.5px; line-height: 1.55; }

/* tablet: 2 x 2 */
@media (max-width: 991px) {
    .sv-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
    .sv-perk { padding: 22px 16px 18px; }
}
/* phone: one compact card per row, illustration left, the accent bar on the left */
@media (max-width: 599px) {
    .sv-perks { grid-template-columns: 1fr; gap: 10px; text-align: left; }
    .sv-perk { flex-direction: row; gap: 14px; padding: 12px 14px 12px 16px; }
    .sv-perk::before { right: auto; bottom: 0; width: 4px; height: auto; background: linear-gradient(180deg, var(--pk-green), #c8e286); transform-origin: 50% 0; }
    .sv-perk__ico { width: 64px; height: 64px; margin: 0; }
    .sv-perk__ico svg { width: 50px; height: 50px; }
    .sv-perk__txt { flex: 1; min-width: 0; max-width: none; }
    .sv-perk__t { margin: 0 0 3px; font-size: 16px; }
    .sv-perk__d { font-size: 13.5px; line-height: 1.45; }
}

/* ---------- motion (Ship-Info r2 2026-11-13: no scroll reveal, the cards are always visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* icon gestures in a loop: ~1 s move, then ~5.5 s rest (6.5 s cycle); the 4 cards move one after the other (wave) */
    .sv-perk:nth-child(2) { --o: .45s; } .sv-perk:nth-child(3) { --o: .9s; } .sv-perk:nth-child(4) { --o: 1.35s; }
    .sv-perk .pk-truck { animation: svpk-drive 6.5s ease-in-out calc(.55s + var(--o, 0s)) infinite both; }
    .sv-perk .pk-speed { animation: svpk-speed 6.5s ease-in-out calc(.55s + var(--o, 0s)) infinite both; }
    .sv-perk .pk-pin { transform-origin: 50% 100%; animation: svpk-drop 6.5s ease-out calc(.55s + var(--o, 0s)) infinite both; }
    .sv-perk .pk-lid { transform-origin: 50% 100%; animation: svpk-lid 6.5s ease-in-out calc(.55s + var(--o, 0s)) infinite both; }
    .sv-perk .pk-spark { animation: svpk-spark 6.5s ease-out calc(.55s + var(--o, 0s)) infinite both; }
    .sv-perk .pk-check { stroke-dasharray: 1; animation: svpk-check 6.5s ease-out calc(.55s + var(--o, 0s)) infinite both; }
    .sv-perks.is-off .sv-perk__ico svg * { animation-play-state: paused !important; }

    .sv-perk:hover .pk-truck { animation: svpk-drive-h 1.1s ease-in-out both; }
    .sv-perk:hover .pk-speed { animation: svpk-speed-h 1.1s ease-in-out both; }
    .sv-perk:hover .pk-pin { animation: svpk-drop-h .9s ease-out both; }
    .sv-perk:hover .pk-check { animation: svpk-check-h .6s ease-out both; }
    .sv-perk:hover .pk-lid { animation: svpk-lid-h 1.1s ease-in-out both; }
    .sv-perk:hover .pk-spark { animation: svpk-spark-h 1.1s ease-out both; }
}
@keyframes svpk-drive { 0%, 17%, 100% { transform: none; } 3% { transform: translateX(-5px); } 8.5% { transform: translateX(7px); } 12.5% { transform: translateX(-2px); } }
@keyframes svpk-drive-h { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 55% { transform: translateX(7px); } 78% { transform: translateX(-2px); } }
@keyframes svpk-speed { 0%, 2%, 15%, 100% { opacity: 0; } 6%, 10% { opacity: 1; } }
@keyframes svpk-speed-h { 0%, 15%, 85%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }
@keyframes svpk-drop { 0%, 14%, 100% { transform: none; } 4.5% { transform: translateY(-8px); } 8.5% { transform: translateY(0) scale(1.06, .92); } 11% { transform: translateY(-3px); } }
@keyframes svpk-drop-h { 0%, 100% { transform: none; } 30% { transform: translateY(-8px); } 55% { transform: translateY(0) scale(1.06, .92); } 72% { transform: translateY(-3px); } }
@keyframes svpk-check { 0% { stroke-dashoffset: 1; } 10%, 100% { stroke-dashoffset: 0; } }
@keyframes svpk-check-h { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes svpk-lid { 0%, 16%, 100% { transform: none; } 4% { transform: translateY(-7px) rotate(-8deg); } 9% { transform: translateY(0) rotate(3deg); } 12.5% { transform: rotate(-1.5deg); } }
@keyframes svpk-lid-h { 0%, 100% { transform: none; } 25% { transform: translateY(-7px) rotate(-8deg); } 55% { transform: translateY(0) rotate(3deg); } 78% { transform: rotate(-1.5deg); } }
@keyframes svpk-spark { 0%, 2%, 18%, 100% { opacity: 0; transform: scale(.4); } 7% { opacity: 1; transform: scale(1); } }
@keyframes svpk-spark-h { 0%, 100% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1); } }