/* Font Awesome Pro 7 Icons for Svenska Flytblock
   Uses CSS mask-image for easy color control
---------------------------------------- */

.sf-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #0d9488; /* teal default */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
}

.sf-icon-sm {
    width: 24px;
    height: 24px;
}

.sf-icon-lg {
    width: 64px;
    height: 64px;
}

/* Dock/Swimming - Flytbryggor */
.sf-icon-dock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 40c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0'/%3E%3Cpath d='M8 48c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0'/%3E%3Crect x='20' y='16' width='24' height='20' rx='2'/%3E%3Cpath d='M20 24h24M32 16v20'/%3E%3C/svg%3E");
}

/* Anchor - Båtbommar */
.sf-icon-anchor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='13' r='5'/%3E%3Cpath d='M16 22h32'/%3E%3Cpath d='M32 18v30'/%3E%3Cpath d='M32 48 Q20 56 12 44'/%3E%3Cpath d='M32 48 Q44 56 52 44'/%3E%3C/svg%3E");
}

/* Waves - Badflottar */
.sf-icon-float {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='20' width='32' height='16' rx='2'/%3E%3Cpath d='M24 20v-6M40 20v-6M24 14h16'/%3E%3Cpath d='M8 44c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0'/%3E%3Cpath d='M8 52c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0'/%3E%3C/svg%3E");
}

/* Bridge - Landgångar */
.sf-icon-bridge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 44h48'/%3E%3Cpath d='M12 44V28M52 44V28'/%3E%3Cpath d='M12 28c0-8 8-12 20-12s20 4 20 12'/%3E%3Cpath d='M20 44V34M32 44V32M44 44V34'/%3E%3C/svg%3E");
}

/* Chain - Förankring */
.sf-icon-chain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='24' cy='24' rx='10' ry='6' transform='rotate(-45 24 24)'/%3E%3Cellipse cx='40' cy='40' rx='10' ry='6' transform='rotate(-45 40 40)'/%3E%3Cpath d='M28 28l8 8'/%3E%3Ccircle cx='48' cy='52' r='4'/%3E%3Cpath d='M44 48l-2-2'/%3E%3C/svg%3E");
}

/* Ladder - Tillbehör */
.sf-icon-ladder {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8v48M44 8v48'/%3E%3Cpath d='M20 16h24M20 28h24M20 40h24M20 52h24'/%3E%3C/svg%3E");
}

/* Package - Paket */
.sf-icon-package {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20l24-10 24 10v28l-24 10-24-10z'/%3E%3Cpath d='M8 20l24 10 24-10'/%3E%3Cpath d='M32 30v28'/%3E%3Cpath d='M20 15l24 10'/%3E%3C/svg%3E");
}

/* Factory - Tillverkning */
.sf-icon-factory {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 52V32l12-8v8l12-8v8l12-8v28H8z'/%3E%3Crect x='44' y='20' width='12' height='32'/%3E%3Cpath d='M48 20V12h4v8'/%3E%3Crect x='14' y='40' width='6' height='8'/%3E%3Crect x='26' y='40' width='6' height='8'/%3E%3C/svg%3E");
}

/* Document - Prislista */
.sf-icon-pricelist {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8h24l12 12v36a2 2 0 01-2 2H18a2 2 0 01-2-2V10a2 2 0 012-2z'/%3E%3Cpath d='M40 8v12h12'/%3E%3Cpath d='M24 28h16M24 36h16M24 44h10'/%3E%3C/svg%3E");
}

/* Book - Katalog */
.sf-icon-catalog {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8h36a4 4 0 014 4v40a4 4 0 01-4 4H16a4 4 0 01-4-4V8z'/%3E%3Cpath d='M12 8a4 4 0 014-4h28v52H16a4 4 0 01-4-4'/%3E%3Cpath d='M20 20h16M20 28h16M20 36h8'/%3E%3C/svg%3E");
}

/* Camera - Instagram */
.sf-icon-camera {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='16' width='48' height='36' rx='4'/%3E%3Ccircle cx='32' cy='34' r='10'/%3E%3Ccircle cx='48' cy='24' r='3'/%3E%3C/svg%3E");
}

/* Phone */
.sf-icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 10c0-2 2-4 4-4h6l4 12-6 4c4 10 10 16 20 20l4-6 12 4v6c0 2-2 4-4 4C26 50 14 38 14 10z'/%3E%3C/svg%3E");
}

/* Email */
.sf-icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='14' width='48' height='36' rx='2'/%3E%3Cpath d='M8 18l24 16 24-16'/%3E%3C/svg%3E");
}

/* Location */
.sf-icon-location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 56S12 36 12 24a20 20 0 1140 0c0 12-20 32-20 32z'/%3E%3Ccircle cx='32' cy='24' r='8'/%3E%3C/svg%3E");
}

/* Star/Trophy - Badge */
.sf-icon-badge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23FFD700' stroke='%23DAA520' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8l6 12 14 2-10 10 2 14-12-6-12 6 2-14-10-10 14-2z'/%3E%3C/svg%3E");
}

/* Rocket - Grundandet/Start */
.sf-icon-rocket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8c-8 8-12 20-12 28h24c0-8-4-20-12-28z'/%3E%3Cpath d='M20 36l-6 12h8M44 36l6 12h-8'/%3E%3Ccircle cx='32' cy='28' r='4'/%3E%3Cpath d='M28 48h8v8h-8z'/%3E%3C/svg%3E");
}

/* Building - Företag */
.sf-icon-building {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='16' width='40' height='40'/%3E%3Cpath d='M12 28h40M12 40h40'/%3E%3Cpath d='M24 16v40M40 16v40'/%3E%3Cpath d='M28 52h8v4h-8z'/%3E%3C/svg%3E");
}

/* Tools/Wrench - Ingenjör */
.sf-icon-tools {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 44L8 56M44 20l12-12'/%3E%3Cpath d='M52 20a12 12 0 00-17-11l11 11-4 4-11-11a12 12 0 0011 17'/%3E%3Cpath d='M12 44a12 12 0 0017 11l-11-11 4-4 11 11a12 12 0 00-11-17'/%3E%3C/svg%3E");
}

/* Chart - Tillväxt */
.sf-icon-chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 52h48'/%3E%3Cpath d='M8 52V12'/%3E%3Cpath d='M16 40l12-16 12 8 16-20'/%3E%3Ccircle cx='16' cy='40' r='3'/%3E%3Ccircle cx='28' cy='24' r='3'/%3E%3Ccircle cx='40' cy='32' r='3'/%3E%3Ccircle cx='56' cy='12' r='3'/%3E%3C/svg%3E");
}

/* People/Team - Familj */
.sf-icon-people {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='16' r='8'/%3E%3Cpath d='M18 52v-8a14 14 0 0128 0v8'/%3E%3Ccircle cx='12' cy='28' r='6'/%3E%3Cpath d='M4 52v-6a8 8 0 0112-7'/%3E%3Ccircle cx='52' cy='28' r='6'/%3E%3Cpath d='M60 52v-6a8 8 0 00-12-7'/%3E%3C/svg%3E");
}

/* Globe - Internationellt */
.sf-icon-globe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Cpath d='M8 32h48'/%3E%3Cpath d='M32 8c-10 8-10 40 0 48'/%3E%3Cpath d='M32 8c10 8 10 40 0 48'/%3E%3Cpath d='M14 16c10 4 26 4 36 0'/%3E%3Cpath d='M14 48c10-4 26-4 36 0'/%3E%3C/svg%3E");
}

/* Hardware/Beslag - Järnbeslag */
.sf-icon-hardware {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 12h16v8H24z'/%3E%3Cpath d='M20 20h24v4H20z'/%3E%3Cpath d='M28 24v28M36 24v28'/%3E%3Ccircle cx='32' cy='36' r='4'/%3E%3Cpath d='M22 52h20'/%3E%3C/svg%3E");
}

/* Mooring/Förtöjning - Ankring */
.sf-icon-mooring {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='48' r='8'/%3E%3Cpath d='M32 40V16'/%3E%3Cpath d='M24 24l8-8 8 8'/%3E%3Cpath d='M16 48h-4M52 48h-4'/%3E%3Cpath d='M8 48c4-4 8-4 12 0'/%3E%3Cpath d='M44 48c4-4 8-4 12 0'/%3E%3C/svg%3E");
}

/* Buoy - Boj */
.sf-icon-buoy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='32' cy='32' rx='16' ry='12'/%3E%3Cpath d='M16 32h32'/%3E%3Cpath d='M32 20v-8M28 12h8'/%3E%3Cpath d='M24 44l-4 8M40 44l4 8'/%3E%3Cpath d='M8 48c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0'/%3E%3C/svg%3E");
}

/* Sign/Skylt */
.sf-icon-sign {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8v48'/%3E%3Crect x='16' y='14' width='32' height='16' rx='2'/%3E%3Cpath d='M48 14l8 8-8 8'/%3E%3Crect x='16' y='34' width='28' height='12' rx='2'/%3E%3C/svg%3E");
}

/* Railing/Räcke */
.sf-icon-railing {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20h48'/%3E%3Cpath d='M8 44h48'/%3E%3Cpath d='M12 20v24M24 20v24M36 20v24M48 20v24'/%3E%3Ccircle cx='12' cy='16' r='3'/%3E%3Ccircle cx='48' cy='16' r='3'/%3E%3C/svg%3E");
}

/* Rope/Rep */
.sf-icon-rope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 52c4-8 8-8 12 0s8-8 12 0 8-8 12 0'/%3E%3Cpath d='M12 40c4-8 8-8 12 0s8-8 12 0 8-8 12 0'/%3E%3Ccircle cx='32' cy='20' r='12'/%3E%3Ccircle cx='32' cy='20' r='4'/%3E%3C/svg%3E");
}

/* Timber/Virke */
.sf-icon-timber {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='32' width='48' height='8' rx='1'/%3E%3Crect x='8' y='44' width='48' height='8' rx='1'/%3E%3Crect x='8' y='20' width='48' height='8' rx='1'/%3E%3Cpath d='M16 20v-8l4-4 4 4v8'/%3E%3C/svg%3E");
}

/* Cart/Varukorg */
.sf-icon-cart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8h8l8 32h24l6-20H20'/%3E%3Ccircle cx='26' cy='48' r='4'/%3E%3Ccircle cx='46' cy='48' r='4'/%3E%3C/svg%3E");
}

/* Clock - Öppettider */
.sf-icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='26'/%3E%3Cpolyline points='32 16 32 32 42 38'/%3E%3C/svg%3E");
}

/* Color variants */
.sf-icon-white {
    background-color: #ffffff;
}

.sf-icon-dark {
    background-color: #1e293b;
}

.sf-icon-gold {
    background-color: #f59e0b;
}

.sf-icon-muted {
    background-color: rgba(255, 255, 255, 0.6);
}

/* ── Produktkategorier ─────────────────────────────── */

/* Brygga nära vatten - Flytbryggor */
.sf-icon-dock {
    mask-image: url('../icons/bridge-water.svg');
    -webkit-mask-image: url('../icons/bridge-water.svg');
}

/* Ankare - Båtbommar */
.sf-icon-anchor {
    mask-image: url('../icons/anchor.svg');
    -webkit-mask-image: url('../icons/anchor.svg');
}

/* Badstege i vatten - Badflottar */
.sf-icon-float {
    mask-image: url('../icons/water-ladder.svg');
    -webkit-mask-image: url('../icons/water-ladder.svg');
}

/* Bro - Landgångar */
.sf-icon-bridge {
    mask-image: url('../icons/bridge.svg');
    -webkit-mask-image: url('../icons/bridge.svg');
}

/* Länk - Förankring */
.sf-icon-chain {
    mask-image: url('../icons/link.svg');
    -webkit-mask-image: url('../icons/link.svg');
}

/* Stege i vatten - Tillbehör */
.sf-icon-ladder {
    mask-image: url('../icons/ladder-water.svg');
    -webkit-mask-image: url('../icons/ladder-water.svg');
}

/* Boj - Förankring/Marina */
.sf-icon-buoy {
    mask-image: url('../icons/buoy.svg');
    -webkit-mask-image: url('../icons/buoy.svg');
}

/* Livboj - Säkerhet */
.sf-icon-lifering {
    mask-image: url('../icons/life-ring.svg');
    -webkit-mask-image: url('../icons/life-ring.svg');
}

/* Simmare */
.sf-icon-swim {
    mask-image: url('../icons/person-swimming.svg');
    -webkit-mask-image: url('../icons/person-swimming.svg');
}

/* ── Dokument ──────────────────────────────────────── */

/* Fil - Prislista (outline inline SVG) */
.sf-icon-pricelist {
    background-color: transparent;
    mask-image: none;
    -webkit-mask-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8h24l12 12v36a2 2 0 01-2 2H18a2 2 0 01-2-2V10a2 2 0 012-2z'/%3E%3Cpath d='M40 8v12h12'/%3E%3Cpath d='M24 28h16M24 36h16M24 44h10'/%3E%3C/svg%3E");
}

/* Bok - Katalog (outline inline SVG) */
.sf-icon-catalog {
    background-color: transparent;
    mask-image: none;
    -webkit-mask-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8h36a4 4 0 014 4v40a4 4 0 01-4 4H16a4 4 0 01-4-4V8z'/%3E%3Cpath d='M12 8a4 4 0 014-4h28v52H16a4 4 0 01-4-4'/%3E%3Cpath d='M20 20h16M20 28h16M20 36h8'/%3E%3C/svg%3E");
}

/* ── Kontakt ───────────────────────────────────────── */

/* Kamera */
.sf-icon-camera {
    mask-image: url('../icons/camera.svg');
    -webkit-mask-image: url('../icons/camera.svg');
}

/* Telefon */
.sf-icon-phone {
    mask-image: url('../icons/phone.svg');
    -webkit-mask-image: url('../icons/phone.svg');
}

/* E-post */
.sf-icon-email {
    mask-image: url('../icons/envelope.svg');
    -webkit-mask-image: url('../icons/envelope.svg');
}

/* Plats */
.sf-icon-location {
    mask-image: url('../icons/location-dot.svg');
    -webkit-mask-image: url('../icons/location-dot.svg');
}

/* ── Tidslinje / Om oss ────────────────────────────── */

/* Stjärna - Utmärkelse */
.sf-icon-badge {
    background-color: #f59e0b;
    mask-image: url('../icons/star.svg');
    -webkit-mask-image: url('../icons/star.svg');
}

/* Raket - Grundandet */
.sf-icon-rocket {
    mask-image: url('../icons/rocket.svg');
    -webkit-mask-image: url('../icons/rocket.svg');
}

/* Byggnad - Företag */
.sf-icon-building {
    mask-image: url('../icons/building.svg');
    -webkit-mask-image: url('../icons/building.svg');
}

/* Skruvmejsel + nyckel - Ingenjör */
.sf-icon-tools {
    mask-image: url('../icons/screwdriver-wrench.svg');
    -webkit-mask-image: url('../icons/screwdriver-wrench.svg');
}

/* Diagram - Tillväxt */
.sf-icon-chart {
    mask-image: url('../icons/chart-line.svg');
    -webkit-mask-image: url('../icons/chart-line.svg');
}

/* Användare - Familj/Team */
.sf-icon-people {
    mask-image: url('../icons/users.svg');
    -webkit-mask-image: url('../icons/users.svg');
}

/* Glob - Internationellt */
.sf-icon-globe {
    mask-image: url('../icons/globe.svg');
    -webkit-mask-image: url('../icons/globe.svg');
}

/* Lagerlokal */
.sf-icon-warehouse {
    mask-image: url('../icons/warehouse.svg');
    -webkit-mask-image: url('../icons/warehouse.svg');
}

/* Boj med förtöjning - Kättingförankring */
.sf-icon-buoy-mooring {
    mask-image: url('../icons/buoy-mooring.svg');
    -webkit-mask-image: url('../icons/buoy-mooring.svg');
}

/* Livboj - Förtöjningsförankring */
.sf-icon-life-ring {
    mask-image: url('../icons/life-ring.svg');
    -webkit-mask-image: url('../icons/life-ring.svg');
}

/* Skruvmejsel + nyckel - Skruvpålsförankring */
.sf-icon-screwdriver-wrench {
    mask-image: url('../icons/screwdriver-wrench.svg');
    -webkit-mask-image: url('../icons/screwdriver-wrench.svg');
}

/* ── Fix: inline-SVG ikoner (background-image) behöver transparent bakgrund ── */
/* Dessa använder background-image med SVG-data istället för mask-image-filer.  */
/* Utan detta fix visar basklassens background-color:#0d9488 en solid teal-ruta */
.sf-icon-package,
.sf-icon-factory,
.sf-icon-clock,
.sf-icon-cart,
.sf-icon-hardware,
.sf-icon-mooring,
.sf-icon-sign,
.sf-icon-railing,
.sf-icon-rope,
.sf-icon-timber {
    background-color: transparent;
    mask-image: none;
    -webkit-mask-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}