/* Kinold line icons — CSS masks used as <i class="ic ic-NAME"></i>; kept out of the page so every page load stays light */
.ic-pin{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.4%22/%3E%3C/svg%3E")}
.ic-call{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 3.5h3.2l1.6 4-2.1 1.3a11 11 0 0 0 5.5 5.5l1.3-2.1 4 1.6V17a2 2 0 0 1-2 2A15.5 15.5 0 0 1 3 5.5a2 2 0 0 1 2-2z%22/%3E%3C/svg%3E")}
.ic-bolt{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2.5 5 13.5h6l-1 8 8-11h-6z%22/%3E%3C/svg%3E")}
.ic-bell{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z%22/%3E%3Cpath d=%22M10 20.5a2 2 0 0 0 4 0%22/%3E%3C/svg%3E")}
.ic-check{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.3 2.7 2.7L16 9.6%22/%3E%3C/svg%3E")}
.ic-gift{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%228.5%22 width=%2217%22 height=%224%22 rx=%221%22/%3E%3Cpath d=%22M5 12.5v8h14v-8M12 8.5v12M12 8.5S10.5 4 8 4.6c-2 .5-1.5 3.9 4 3.9zM12 8.5S13.5 4 16 4.6c2 .5 1.5 3.9-4 3.9z%22/%3E%3C/svg%3E")}
.ic-recycle{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.5 9.5 10 5a2.2 2.2 0 0 1 3.8 0l1.2 2M17.2 11l2.3 4a2.2 2.2 0 0 1-1.9 3.3H15M9.5 18.3H6.3A2.2 2.2 0 0 1 4.4 15l1.5-2.6%22/%3E%3Cpath d=%22m14 4.5 1.4 2.6-2.7 1.2M18.6 18.3h-3.4l1.6-2.6M4 10.8l1.9 2.1 1.9-2.4%22/%3E%3C/svg%3E")}
.ic-plug{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 2.5v5M15 2.5v5M6.5 7.5h11v3a5.5 5.5 0 0 1-11 0zM12 16v5.5%22/%3E%3C/svg%3E")}
.ic-link{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1%22/%3E%3Cpath d=%22M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1%22/%3E%3C/svg%3E")}
.ic-clip{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m20 11.5-8.2 8.2a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.4 8.4a1.7 1.7 0 0 1-2.4-2.4l7.7-7.7%22/%3E%3C/svg%3E")}
.ic-shield{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.8 4.5 5.6v5.7c0 4.6 3.1 8.4 7.5 9.9 4.4-1.5 7.5-5.3 7.5-9.9V5.6z%22/%3E%3Cpath d=%22m9 12 2.2 2.2L15.5 10%22/%3E%3C/svg%3E")}
.ic-doc{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 2.5h8l4 4v15H6z%22/%3E%3Cpath d=%22M14 2.5v4h4M9 12h6M9 16h6%22/%3E%3C/svg%3E")}
.ic-buds{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.5 13.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 3.5 3.5v9a1.5 1.5 0 0 1-3 0v-5.5zM16.5 13.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0-3.5 3.5v9a1.5 1.5 0 0 0 3 0v-5.5z%22/%3E%3C/svg%3E")}
.ic-phone{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%222.5%22 width=%2212%22 height=%2219%22 rx=%222.5%22/%3E%3Cpath d=%22M10.5 18.5h3%22/%3E%3C/svg%3E")}
.ic-app{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%222.5%22 width=%2212%22 height=%2219%22 rx=%222.5%22/%3E%3Cpath d=%22M12 7v7M9 11.5l3 3 3-3%22/%3E%3C/svg%3E")}
.ic-box{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2.8 8.5 4.6v9.2L12 21.2l-8.5-4.6V7.4z%22/%3E%3Cpath d=%22m3.5 7.4 8.5 4.6 8.5-4.6M12 12v9.2%22/%3E%3C/svg%3E")}
.ic-spark{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3v4M12 17v4M3 12h4M17 12h4M6.3 6.3l2.4 2.4M15.3 15.3l2.4 2.4M17.7 6.3l-2.4 2.4M8.7 15.3l-2.4 2.4%22/%3E%3C/svg%3E")}
.ic-camera{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8.5A2.5 2.5 0 0 1 5.5 6h1.6l1.4-2h7l1.4 2h1.6A2.5 2.5 0 0 1 21 8.5v9a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223.6%22/%3E%3C/svg%3E")}
.ic-thumb{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.5 10.5v10h-3v-10zM7.5 10.5 11 3.5a2.2 2.2 0 0 1 2.4 2.6l-.7 3.4h5.8a2 2 0 0 1 2 2.4l-1.4 6.6a2 2 0 0 1-2 1.5H7.5%22/%3E%3C/svg%3E")}
.ic-help{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.8%22/%3E%3Ccircle cx=%2212%22 cy=%2217%22 r=%22.6%22 fill=%22%23000%22/%3E%3C/svg%3E")}
.ic-truck{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 6.5h11v9.5h-11zM13.5 10h4l3 3v3h-7%22/%3E%3Ccircle cx=%226.5%22 cy=%2217.5%22 r=%221.8%22/%3E%3Ccircle cx=%2217%22 cy=%2217.5%22 r=%221.8%22/%3E%3C/svg%3E")}
.ic-tag{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12.6V4h8.6l9.4 9.4-8.6 8.6z%22/%3E%3Ccircle cx=%227.6%22 cy=%228.6%22 r=%221.4%22/%3E%3C/svg%3E")}
.ic-lock{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224.5%22 y=%2210.5%22 width=%2215%22 height=%2210.5%22 rx=%222%22/%3E%3Cpath d=%22M8 10.5V7a4 4 0 0 1 8 0v3.5%22/%3E%3C/svg%3E")}
.ic-ticket{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7.5h18v3a1.8 1.8 0 0 0 0 3.6v3H3v-3a1.8 1.8 0 0 0 0-3.6z%22/%3E%3Cpath d=%22M14.5 7.5v10%22 stroke-dasharray=%222 2%22/%3E%3C/svg%3E")}
.ic-card{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222.5%22 y=%225.5%22 width=%2219%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M2.5 10h19M6 15h4%22/%3E%3C/svg%3E")}
.ic-chat{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5.5h16v10H9.5L5 19.5v-4H4z%22/%3E%3C/svg%3E")}
.ic-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%225%22 width=%2217%22 height=%2215.5%22 rx=%222%22/%3E%3Cpath d=%22M3.5 10h17M8 3v4M16 3v4%22/%3E%3C/svg%3E")}
.ic-warn{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5 2.5 20h19z%22/%3E%3Cpath d=%22M12 10v4.5%22/%3E%3Ccircle cx=%2212%22 cy=%2217.3%22 r=%22.6%22 fill=%22%23000%22/%3E%3C/svg%3E")}
.ic-store{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 9.5 5 4.5h14l1.5 5M4.5 9.5V20h15V9.5M9.5 20v-5h5v5%22/%3E%3Cpath d=%22M3.5 9.5a2.8 2.8 0 0 0 5.6 0 2.8 2.8 0 0 0 5.8 0 2.8 2.8 0 0 0 5.6 0%22/%3E%3C/svg%3E")}
.ic-scooter{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%225.5%22 cy=%2217%22 r=%222.5%22/%3E%3Ccircle cx=%2218.5%22 cy=%2217%22 r=%222.5%22/%3E%3Cpath d=%22M8 17h7.5l2-8h2.5M15.5 5.5h2l-1 3.5M8 17l1.5-4.5H14%22/%3E%3C/svg%3E")}
.ic-bus{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%223.5%22 width=%2216%22 height=%2214%22 rx=%222.5%22/%3E%3Cpath d=%22M4 11h16M7.5 17.5v2.5M16.5 17.5v2.5%22/%3E%3Ccircle cx=%228%22 cy=%2214.2%22 r=%22.6%22 fill=%22%23000%22/%3E%3Ccircle cx=%2216%22 cy=%2214.2%22 r=%22.6%22 fill=%22%23000%22/%3E%3C/svg%3E")}
.ic-pencil{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m15 4.5 4.5 4.5L8.5 20H4v-4.5z%22/%3E%3Cpath d=%22m13 6.5 4.5 4.5%22/%3E%3C/svg%3E")}
.ic-receipt{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5.5 2.5h13v19l-2.2-1.5-2.1 1.5-2.2-1.5-2.2 1.5-2.1-1.5-2.2 1.5z%22/%3E%3Cpath d=%22M9 8h6M9 12h6%22/%3E%3C/svg%3E")}
.ic-clock{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E")}
.ic-fire{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21.5a6.5 6.5 0 0 0 6.5-6.5c0-4.5-4-6.5-4.5-10.5-2.5 2-3.5 4-3.5 6.5-1-.5-1.8-1.5-2-3-1.5 1.5-3 4-3 7a6.5 6.5 0 0 0 6.5 6.5z%22/%3E%3C/svg%3E")}
.ic-cookie{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 12.5A8.5 8.5 0 1 1 11.5 3.5a3 3 0 0 0 4 3.5 3 3 0 0 0 5 5.5z%22/%3E%3Ccircle cx=%228.5%22 cy=%2210%22 r=%22.7%22 fill=%22%23000%22/%3E%3Ccircle cx=%2212.5%22 cy=%2215%22 r=%22.7%22 fill=%22%23000%22/%3E%3Ccircle cx=%228%22 cy=%2215.5%22 r=%22.7%22 fill=%22%23000%22/%3E%3C/svg%3E")}
.ic-star{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 3 2.7 5.6 6.1.8-4.5 4.3 1.1 6.1L12 16.9l-5.4 2.9 1.1-6.1-4.5-4.3 6.1-.8z%22/%3E%3C/svg%3E")}
.ic-watch{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226.5%22 y=%226.5%22 width=%2211%22 height=%2211%22 rx=%223%22/%3E%3Cpath d=%22M9 6.5 9.6 3h4.8l.6 3.5M9 17.5l.6 3.5h4.8l.6-3.5M12 10v2.2l1.4 1%22/%3E%3C/svg%3E")}
.ic-ret{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9h11a5 5 0 0 1 0 10H8%22/%3E%3Cpath d=%22M8 5 4 9l4 4%22/%3E%3C/svg%3E")}
.ic-cash{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222.5%22 y=%226%22 width=%2219%22 height=%2212%22 rx=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.6%22/%3E%3Cpath d=%22M6 9.5v.01M18 14.5v.01%22/%3E%3C/svg%3E")}
.ic-user{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 21c0-4 4-6 8-6s8 2 8 6%22/%3E%3C/svg%3E")}
.ic-print{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 8V3.5h10V8%22/%3E%3Crect x=%223.5%22 y=%228%22 width=%2217%22 height=%228.5%22 rx=%222%22/%3E%3Cpath d=%22M7 14h10v6.5H7z%22/%3E%3C/svg%3E")}
.ic-map{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3.5 6.5 5.5-2.5 6 2.5 5.5-2.5v13.5l-5.5 2.5-6-2.5-5.5 2.5z%22/%3E%3Cpath d=%22M9 4v13.5M15 6.5V20%22/%3E%3C/svg%3E")}
.ic-flag{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 21V4M5 4.5h11l-2 4 2 4H5%22/%3E%3C/svg%3E")}
.ic-trash{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M10 11v6M14 11v6M5.5 7l1 13h11l1-13M9 7V4h6v3%22/%3E%3C/svg%3E")}
.icondel{color:var(--muted);padding-left:10px!important;padding-right:10px!important}.icondel .ic{margin:0}.icondel:hover{color:var(--danger)}
.ic-search{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22m16 16 4.5 4.5%22/%3E%3C/svg%3E")}
/* ---------- select boxes: one designed control across the shop (staff screens keep theirs) ----------
   closed: rounded field, own chevron, sized to its text (no "Midnight B…"); open (Chrome / Edge / Android 135+):
   a frosted list with rounded rows, the chosen one in orange with a tick. Other browsers keep their own list. */
body:not(.in-admin) select{-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%238a919c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:13px 13px;padding-right:34px;border-radius:12px;font-weight:600;transition:border-color .15s,box-shadow .15s,background-color .15s}
body:not(.in-admin) select:hover{border-color:color-mix(in srgb,var(--fg) 26%,var(--border))}
body:not(.in-admin) select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body:not(.in-admin) .etarow select{background-color:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:7px 34px 7px 14px;font-weight:700}
body:not(.in-admin) .etarow select:hover{border-color:var(--border)}
body:not(.in-admin) .addon select{max-width:150px;field-sizing:content;padding:8px 32px 8px 12px;font-size:13px;border-radius:12px;text-overflow:ellipsis}
body:not(.in-admin) .revf select,body:not(.in-admin) .sortbar select{border-radius:999px}
body:not(.in-admin) .field select{font-weight:500}
body:not(.in-admin) .addon select{min-height:36px}.addon .acts .btn{min-height:36px}
@media(max-width:560px){.addon:has(select){flex-wrap:wrap;row-gap:8px}.addon:has(select) .acts{width:100%;padding-left:58px}body:not(.in-admin) .addon .acts select{flex:1;max-width:none}.addon .acts .btn{flex:none}}   /* phones: name on one line, colour + Add underneath */
@supports (appearance:base-select){
 body:not(.in-admin) select,body:not(.in-admin) select::picker(select){appearance:base-select}
 body:not(.in-admin) select{background-image:none;padding-right:12px;display:inline-flex;align-items:center;gap:10px}
 body:not(.in-admin) .field select{display:flex;width:100%}
 body:not(.in-admin) .etarow select{padding-right:14px}
 body:not(.in-admin) .addon select{padding-right:12px;max-width:none}
 body:not(.in-admin) select::picker-icon{content:'';width:13px;height:13px;margin-left:auto;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") center/contain no-repeat;transition:rotate .2s ease}
 body:not(.in-admin) select:open::picker-icon{rotate:180deg}
 body:not(.in-admin) select:open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 body:not(.in-admin) select::picker(select){border:1px solid var(--border);border-radius:16px;padding:6px;margin-block:6px;min-width:anchor-size(width);max-height:min(340px,56vh);overflow:auto;scrollbar-width:thin;
   background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
   box-shadow:0 18px 48px rgba(16,20,27,.16),0 2px 6px rgba(16,20,27,.06);
   opacity:1;translate:0 0;transition:opacity .16s ease,translate .16s ease,display .16s allow-discrete,overlay .16s allow-discrete}
 body:not(.in-admin) select:not(:open)::picker(select){opacity:0;translate:0 -4px}
 @starting-style{body:not(.in-admin) select:open::picker(select){opacity:0;translate:0 -4px}}
 html.glass-solid body:not(.in-admin) select::picker(select){background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
 body:not(.in-admin) select option{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-weight:500;color:var(--fg);cursor:pointer;transition:background-color .12s}
 body:not(.in-admin) select option:hover,body:not(.in-admin) select option:focus-visible{background:var(--surface-2);outline:none}
 body:not(.in-admin) select option:checked{font-weight:700;color:var(--accent-deep);background:var(--accent-soft)}
 body:not(.in-admin) select option::checkmark{order:1;margin-left:auto;content:'';width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 12.5 4.5 4.5L19 7.5%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 12.5 4.5 4.5L19 7.5%22/%3E%3C/svg%3E") center/contain no-repeat}
 @media(prefers-reduced-motion:reduce){body:not(.in-admin) select::picker(select),body:not(.in-admin) select::picker-icon{transition:none}}
}
/* ---------- motion (fx.js): page changes, photo glide, add-to-cart flight, sections rising into view ---------- */
#main.pgin>*:not(.stickybuy):not(.cobar){animation:pgin .42s cubic-bezier(.2,.75,.25,1) .08s both}
@keyframes pgin{from{opacity:0;transform:translateY(12px)}}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-new(root){animation:none}
::view-transition-old(root){z-index:1;animation:vtpage .12s cubic-bezier(.4,0,1,1) both}
@keyframes vtpage{to{opacity:0}}
::view-transition-group(pimg){z-index:2;animation-duration:.48s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(pimg),::view-transition-new(pimg){height:100%;object-fit:contain;animation-duration:.18s;animation-timing-function:ease-out}
html.vt-same::view-transition-old(pimg),html.vt-same.vt-back::view-transition-new(pimg){animation:none;opacity:0}
html.vt-same::view-transition-new(pimg),html.vt-same.vt-back::view-transition-old(pimg){animation:none;opacity:1}
.rv{opacity:0;translate:0 14px;transition:opacity .55s cubic-bezier(.2,.7,.2,1),translate .55s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;translate:0 0}
.fxfly{position:fixed;z-index:2147483000;pointer-events:none;box-sizing:border-box;margin:0;background:#fff;box-shadow:0 12px 32px rgba(16,20,27,.2);will-change:transform,opacity}
#pdPrice,#pdWas,#pdSave{font-variant-numeric:tabular-nums}
@media print{.rv{opacity:1;translate:none}}
#toTop{opacity:0;visibility:hidden;translate:0 10px;scale:.9;transition:opacity .2s ease,translate .25s ease,scale .25s ease,visibility .25s}
#toTop.show{opacity:1;visibility:visible;translate:0 0;scale:1}
.ic-x{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6 6 18%22/%3E%3C/svg%3E")}
.ic-chev{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E")}
.ic-sliders{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h9M17 7h3M4 17h3M11 17h9%22/%3E%3Ccircle cx=%2215%22 cy=%227%22 r=%222%22/%3E%3Ccircle cx=%229%22 cy=%2217%22 r=%222%22/%3E%3C/svg%3E")}
.ic-compare{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7%22/%3E%3C/svg%3E")}
.ic-play{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M8 5.6v12.8a.8.8 0 0 0 1.2.7l10.4-6.4a.8.8 0 0 0 0-1.4L9.2 4.9A.8.8 0 0 0 8 5.6z%22 fill=%22%23000%22/%3E%3C/svg%3E")}
/* close buttons: a drawn cross instead of the font's ✕ (which looks different on every phone) */
button.x,.annbar button{font-size:0!important}
button.x::before,.annbar button::before{content:'';display:block;width:15px;height:15px;margin:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6 6 18%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6 6 18%22/%3E%3C/svg%3E") center/contain no-repeat}
#toast{width:max-content;max-width:min(520px,calc(100vw - 32px));border-radius:22px;text-wrap:pretty;line-height:1.35}
#toast .ic{margin:0;flex:none}
/* notes: the icon lines up with the first line of text (it sat halfway down a two-paragraph note) */
div.note{align-items:flex-start}div.note>svg:first-child,div.note>.ic:first-child{margin-top:1px}
.ic-send{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 3 10 14M21 3l-6.5 18-4-8-8-4z%22/%3E%3C/svg%3E")}
@media(max-width:720px){body.chat-open .wafab{opacity:0;transform:scale(.6);pointer-events:none}}
/* wide tables (compare, buying guides) on phones: the right edge fades while there is more to scroll to, so the third model
   is not missed; gone at the end, and not there at all when the table fits (inactive scroll timeline = no fade) */
@property --tf{syntax:'<length>';inherits:false;initial-value:0px}
@supports (animation-timeline:scroll()){
 .tblwrap{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--tf)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--tf)),transparent);animation:tblfade linear both;animation-timeline:scroll(self inline)}
 @keyframes tblfade{0%{--tf:44px}88%{--tf:44px}100%{--tf:0px}}
}
/* product-card photos still on their way: a soft shimmer instead of an empty white square */
.thumb.photo:has(>img.pimg:not(.ld)){background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%);background-size:300% 100%;animation:skshine 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.thumb.photo:has(>img.pimg:not(.ld)){animation:none}}
/* desktop: the photo eases in a touch when the mouse is on a card */
@media(hover:hover) and (pointer:fine){.card .thumb img.pimg{transition:scale .5s cubic-bezier(.2,.7,.2,1)}.card:hover .thumb img.pimg{scale:1.045}}
@media(prefers-reduced-motion:reduce){.card .thumb img.pimg{transition:none}.card:hover .thumb img.pimg{scale:1}}
/* browser autofill keeps our field colours (Chrome paints filled-in name / phone fields light blue or yellow — a bright patch in dark mode) */
input:-webkit-autofill,input:-webkit-autofill:hover,textarea:-webkit-autofill{-webkit-text-fill-color:var(--fg);-webkit-box-shadow:0 0 0 1000px var(--surface) inset;box-shadow:0 0 0 1000px var(--surface) inset;caret-color:var(--fg);transition:background-color 9999s ease-out}
input:-webkit-autofill:focus{-webkit-text-fill-color:var(--fg);-webkit-box-shadow:0 0 0 1000px var(--surface) inset,0 0 0 3px var(--accent-soft);box-shadow:0 0 0 1000px var(--surface) inset,0 0 0 3px var(--accent-soft)}
/* footer: plain links (underlined only on hover with a mouse); on phones the Shop / Support / Company lists fold into rows
   you tap open, instead of a wall of 25 underlined links */
footer a.fl{text-decoration:none}
@media(hover:hover){footer a.fl:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}}
@media(max-width:720px){
 footer .fcols{grid-template-columns:1fr;gap:0}
 footer .fcols>div:first-child{margin-bottom:14px}
 footer .fcols>div:has(>h4){border-top:1px solid var(--border)}
 footer .fcols>div>h4{display:flex;justify-content:space-between;align-items:center;margin:0;padding:15px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
 footer .fcols>div>h4::after{content:'';width:15px;height:15px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") center/contain no-repeat;transition:rotate .25s ease}
 footer .fcols>div.open>h4::after{rotate:180deg}
 footer .fcols>div:has(>h4):not(.open)>:not(h4){display:none}
 footer .fcols>div.open{padding-bottom:8px}
 footer .fcols>div:last-child{border-bottom:1px solid var(--border);margin-bottom:18px}
}
/* photo viewer (fx.js): full screen, swipe between the product's photos, tap to zoom in and drag around */
.modal.zoom.lb{display:block;padding:0;background:#08090c;cursor:auto}
.lbtrack{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lbtrack::-webkit-scrollbar,.lbslide::-webkit-scrollbar{display:none}
.lbtrack.locked{overflow-x:hidden}
.lbslide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:64px 14px 76px;overflow:hidden;scrollbar-width:none}
.modal.zoom.lb .lbslide img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:16px;cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.lbslide.zoomed{display:block;overflow:auto;padding:0}
.modal.zoom.lb .lbslide.zoomed img{max-width:none;max-height:none;width:220%;border-radius:0;cursor:zoom-out}
@media(min-width:900px){.modal.zoom.lb .lbslide.zoomed img{width:140%}}
.lbcount{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));translate:-50% 0;color:#fff;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;font-size:13px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lbcount b{font-weight:800}
.lbnav{display:none;position:fixed;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;place-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lbnav .ic{margin:0;width:22px;height:22px}.lbnav.prev{left:22px}.lbnav.prev .ic{rotate:90deg}.lbnav.next{right:22px}.lbnav.next .ic{rotate:-90deg}.lbnav:hover{background:rgba(255,255,255,.26)}
@media(hover:hover) and (pointer:fine),(min-width:900px){.lbnav{display:grid}}
/* orange text links ("See all", "How it works"…) look the same whether they are buttons or links: no underline, until hovered with a mouse */
a.link{text-decoration:none}
@media(hover:hover){a.link:hover,button.link:hover{text-decoration:underline;text-underline-offset:3px}}
.ic-download{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v11M7 10l5 5 5-5M5 20h14%22/%3E%3C/svg%3E")}
.ic-upload{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 16V5M7 10l5-5 5 5M5 20h14%22/%3E%3C/svg%3E")}
/* staff products tab: search box and category list look like the orders tab's search box */
#pq,#pcat{background-color:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 12px;font:inherit;font-size:14px;color:var(--fg);min-height:42px}
#pq:focus,#pcat:focus{outline:none;border-color:var(--accent)}
/* staff screens: the same closed look for select boxes (rounded, thin chevron); the open list stays the phone's own */
body.in-admin select{-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%238a919c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:13px 13px;padding-right:34px}
/* staff editor: buttons inside form labels keep normal case ("Choose photo", not CHOOSE PHOTO); long text boxes grow with what is typed */
.field label.btn{text-transform:none;letter-spacing:0;font-size:13px;color:var(--fg);margin:0;display:inline-flex}
body.in-admin #modalRoot textarea{field-sizing:content;min-height:84px;max-height:360px}
/* car showcase on phones: the car whole on top, the words below on dark (they sat on the sky and over the windscreen) */
@media(max-width:560px){
 .carshow:not(.nocar){background-color:#0d1117;background-size:100% auto;background-position:center top!important;background-repeat:no-repeat;padding:calc(50vw - 6px) 20px 22px;min-height:0}
 .carshow:not(.nocar)::before{background:linear-gradient(180deg,rgba(13,17,23,0) 0,rgba(13,17,23,0) calc(50vw - 70px),#0d1117 calc(50vw - 4px))}
 .carshow:not(.nocar) h2{margin-top:6px}
}
/* category bar: the right edge fades only while there are more categories to scroll to (it also faded the last one, "Cars", when scrolled to the end) */
@supports (animation-timeline:scroll()){
 #navbar.navbar{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--tf)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--tf)),transparent);animation:tblfade linear both;animation-timeline:scroll(self inline)}
}
/* dark mode: the shipping note, spend-more progress and bundle savings had fixed light backgrounds (bright patches on the dark page) */
[data-theme="dark"] .shipbox{background:#16223b;color:#b9cdfa}
[data-theme="dark"] .freeship.tierprog,[data-theme="dark"] .bp .save{background:#12271b;color:#6ee7a0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .shipbox{background:#16223b;color:#b9cdfa}:root:not([data-theme="light"]) .freeship.tierprog,:root:not([data-theme="light"]) .bp .save{background:#12271b;color:#6ee7a0}}
.buyrow.wishonly .wishbtn{width:auto;min-width:0;height:48px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:14px;color:var(--fg)}
.buyrow.wishonly .wishbtn.on span{font-size:0}.buyrow.wishonly .wishbtn.on span::before{content:'Saved';font-size:14px}
/* compare tray: small photos of the chosen models (and empty slots) instead of names cut to "R…" */
.cmptray .ctl{display:inline-flex;align-items:center;font-weight:700;font-size:13.5px;flex:none}
.cmptray .cthumbs{display:flex;gap:6px;flex:none}
.cmptray .cthumbs img,.cmptray .cslot{width:32px;height:32px;border-radius:9px;background:#fff;object-fit:contain;padding:2px;box-sizing:border-box}
.cmptray .cslot{border:1.5px dashed color-mix(in srgb,var(--bg) 45%,transparent);background:transparent}
.cmptray .cslot.on{background:#fff;border:0}
.cmptray .btn:disabled{opacity:1;background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg)}
/* WhatsApp deals box: name, number, agree, then the button — in that order */
.subbox .subgo{margin-top:12px;background:#0f7a3f;border-color:#0f7a3f;color:#fff}
.subbox .subgo:hover{background:#0c6533}
@media(max-width:560px){.subbox .subf input{min-width:0;flex:1 1 100%}.subbox .subgo{width:100%}}
.cmptray .btn{white-space:nowrap}
@media(max-width:720px){.cmptray{gap:8px;padding:7px 6px 7px 12px}.cmptray .ctl{font-size:0;gap:0}.cmptray .ctl .ic{font-size:16px;margin:0}.cmptray .cthumbs{gap:4px}.cmptray .cthumbs img,.cmptray .cslot{width:28px;height:28px;border-radius:8px}.cmptray .btn{padding:8px 12px}}
/* exact star fill */
.stars{position:relative;display:inline-block}
.stars .on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--star)}
/* long reviews: five lines, then "Read more" */
.rev p.long:not(.open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.rev .revmore{padding:2px 0;min-height:0;margin-top:-4px}
/* one main heading (h1) per page for search engines and screen readers — same look as before */
#main h1.pgtitle{font-size:20px;font-weight:700;line-height:1.5;letter-spacing:-.01em;margin:0;color:var(--fg)}
.carshow h1{color:#fff;font-size:clamp(30px,5.5vw,48px);line-height:1;margin:10px 0 8px;font-weight:800;letter-spacing:-.02em}
@media(max-width:560px){.carshow:not(.nocar) h1{margin-top:6px}}
.empty h1.eh{font-size:18.72px;font-weight:700;line-height:1.5;letter-spacing:-.01em;margin:0 0 6px;color:var(--fg)}
/* contrast: WhatsApp-green share text on the dark page */
[data-theme="dark"] .sharebtn{color:#3fd27a}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sharebtn{color:#3fd27a}}
#modalRoot [tabindex="-1"]:focus{outline:none}
.arow.myord{align-items:flex-start}
.arow.myord .mini{width:52px;height:52px;flex:none;border-radius:12px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.arow.myord .mini img{width:100%;height:100%;object-fit:contain;padding:4px}
@media(max-width:560px){.arow.myord{flex-wrap:wrap}.arow.myord .g{flex:1 1 calc(100% - 66px)}.arow.myord .acts{width:100%;justify-content:flex-end}}
.addrpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-4px 0 14px}.addrpick span{font-size:12.5px;color:var(--muted);font-weight:600;margin-right:2px}.addrpick .chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer}.addrpick .chip.on{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft)}
.starpick{align-items:center}.starpick .starword{margin-left:10px;font-size:14px;font-weight:700;color:var(--fg)}
@media(hover:hover){.starpick:hover button{color:var(--star)}.starpick button:hover~button{color:var(--border)}}
/* offline bar: one line, and the page moves down under it instead of the bar covering the header (logo, cart) */
.offbar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:calc(32px + env(safe-area-inset-top,0px));line-height:18px;box-sizing:border-box}
body.is-offline{padding-top:32px}
body.is-offline header.top{top:calc(32px + env(safe-area-inset-top,0px))}
/* phones turned sideways (wide but short): the header slides away while scrolling down like on an upright phone,
   and the product photo fits on the screen (it was taller than the whole screen) */
@media(orientation:landscape) and (max-height:520px){
 header.top{transition:transform .25s ease}
 body.hdr-tuck header.top{transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px))}
 .pdnav{transition:top .25s ease}body.hdr-tuck .pdnav{top:calc(env(safe-area-inset-top,0px) + 6px)}
 .pd .gallery{max-width:calc(100svh - 40px);margin-inline:auto}
}
@media(orientation:landscape) and (max-height:520px) and (prefers-reduced-motion:reduce){header.top,.pdnav{transition:none}}
/* car pages: the showcase card grows into the big car photo (cards and the photo differ in shape: fill, don't letterbox) */
html.vt-car::view-transition-old(pimg),html.vt-car::view-transition-new(pimg){object-fit:cover}
html.vt-car::view-transition-group(pimg){animation-duration:.55s}
/* campaign landing pages on phones: the photo whole on top, the headline below it (it sat on the phone's screen in the photo) */
@media(max-width:560px){
 .suhero.lphero[style*="background-image"]{display:block;min-height:0;background-color:#ecf2f8;background-size:100% auto;background-position:center top;padding:calc((100vw - 32px) * .56 + 4px) 22px 24px}
 .suhero.lphero[style*="background-image"]::before{background:linear-gradient(180deg,rgba(236,242,248,0) 0,rgba(236,242,248,0) calc((100vw - 32px) * .56 - 48px),#ecf2f8 calc((100vw - 32px) * .56))}
 .suhero.lphero .txt{max-width:100%}
}
/* card price row: when "from", the sale price and the old price don't fit (narrow phone cards), the old price moves to the next line instead of being cut off */
.pricerow{flex-wrap:wrap;row-gap:0}.pricerow>*{white-space:nowrap}
/* price-drop alert: the phone field looks like every other field in the shop (it was the browser's bare box) */
.pwatch input{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 12px;font:inherit;font-size:14px;color:var(--fg);min-height:44px;box-sizing:border-box}
.pwatch input:focus,.notifybox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* the smallest Android phones (320px): the sticky price no longer slides under "Add to cart" */
@media(max-width:350px){#stickyBuy{padding-left:10px;padding-right:10px;gap:6px}#stickyBuy .btn{padding:11px 11px;font-size:13.5px}#stickyBuy .sbp b{font-size:15px}}
/* car page opening (fx.js adds .carin): headline lines rise in one after another as the photo lands, then the figures */
@keyframes csup{from{opacity:0;transform:translateY(18px)}}
.carin .carshow .cs-inner>*,.carin .carstat{animation:csup .62s cubic-bezier(.2,.75,.25,1) .2s both}
.carin .carshow .cs-inner>:nth-child(2){animation-delay:.28s}.carin .carshow .cs-inner>:nth-child(3){animation-delay:.36s}
.carin .carshow .cs-inner>:nth-child(4){animation-delay:.44s}.carin .carshow .cs-inner>:nth-child(5){animation-delay:.52s}
.carin .carstat:nth-child(1){animation-delay:.34s}.carin .carstat:nth-child(2){animation-delay:.42s}.carin .carstat:nth-child(3){animation-delay:.5s}.carin .carstat:nth-child(4){animation-delay:.58s}
.carstat b{font-variant-numeric:tabular-nums}
/* quantity stepper: the number rolls (fx.js fxTick); − / + fade at the ends; the total for that many sits beside it */
.qty span{font-variant-numeric:tabular-nums;font-size:17px}
.qty.min button:first-child,.qty.max button:last-child{color:var(--muted);opacity:.45}
.qtot{display:inline-block;vertical-align:middle;margin-left:14px;font-family:var(--head);font-weight:750;font-size:16px;font-variant-numeric:tabular-nums;opacity:0;translate:-8px 0;transition:opacity .22s,translate .32s cubic-bezier(.2,.8,.3,1)}
.qtot::after{content:' total';font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted)}
.qtot.on{opacity:1;translate:0}
@media(prefers-reduced-motion:reduce){.qtot{transition:none}}
/* specifications, Apple-style: sections split by hairlines, the figure first and large, details in lines under it */
.specs.apl,.specs.apl.grouped{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:4px 30px;margin-top:0;overflow:hidden}
.apl .asec{display:grid;grid-template-columns:210px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--border)}
.apl .asec:first-child{border-top:0}
.apl.solo .asec{grid-template-columns:1fr}
.apl .asec h3{margin:0;font:700 21px/1.25 var(--head);letter-spacing:-.01em}
.apl .asis{display:flex;flex-wrap:wrap;gap:24px 56px}
.apl .asi{min-width:0;max-width:100%}
.apl .ask{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:5px}
.apl .asb{font:800 32px/1.08 var(--head);letter-spacing:-.025em}
.apl .asm{font:700 20px/1.25 var(--head);letter-spacing:-.01em}
.apl .ass{font-size:15px;font-weight:650;margin-top:5px}
.apl .asd{font-size:14.5px;color:var(--muted);margin-top:3px}
.specs.apl:not(.open) .xtra{display:none}
.apl .sgmore{border-top:1px solid var(--border);margin:0 -30px;width:calc(100% + 60px)}
@media(max-width:760px){.specs.apl,.specs.apl.grouped{padding:2px 20px}.apl .asec{grid-template-columns:1fr;gap:14px;padding:22px 0}.apl .asb{font-size:28px}.apl .asis{gap:20px 36px}.apl .sgmore{margin:0 -20px;width:calc(100% + 40px)}}
/* order placed: the items are listed by name; long lines wrap on the right */
.deliver .row{gap:10px}.deliver .row span:last-child{text-align:right}
/* phones: the chat rises from the bottom as a sheet over a dimmed page (a tap on the dimmed page closes it — fx.js) */
@keyframes chatup{from{translate:0 48px;opacity:.4}}
@media(max-width:720px){body .chatpanel{left:0;right:0;bottom:0;width:auto;max-width:none;height:min(620px,calc(100dvh - 64px));border-radius:22px 22px 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 0 0 100vmax rgba(0,0,0,.4),0 -10px 30px rgba(0,0,0,.18);}body .chatpanel.rise{animation:chatup .32s cubic-bezier(.2,.8,.3,1)}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){body .chatpanel.rise{animation:none}}
/* installed app on edge-to-edge phones: the strip under the clock and battery takes the header's colour (white / dark)
   instead of showing the grey page through it — and keeps it while scrolling. 0px tall everywhere else */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--surface);z-index:55;pointer-events:none}
/* phone keyboard up (fx.js adds html.kb): the bars stuck to the bottom step aside so the form keeps the room */
@media(max-width:760px){html.kb .bnav,html.kb .stickybuy,html.kb .cobar,html.kb .wafab,html.kb .cmptray,html.kb .totop{display:none!important}}
/* "A new version of Kinold is ready · Update" (fx.js) */
.updbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:150;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-radius:16px;background:var(--fg);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px;font-weight:650;max-width:calc(100vw - 32px);animation:csup .4s cubic-bezier(.2,.75,.25,1) both}
.updbar .btn{flex:none}
@media(max-width:760px){.updbar{left:16px;right:16px;transform:none;justify-content:space-between;bottom:calc(92px + env(safe-area-inset-bottom,0px))}body.has-sticky .updbar,body.in-checkout .updbar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}html.kb .updbar{display:none}}
.appver{text-align:center;font-size:12.5px;color:var(--muted);margin:0 0 22px}.appver .link{font-size:12.5px}