/*
 * Lapisoft components: small reusable classes (ls- prefix) for pages built
 * with core blocks. Colors, sizes and spacing come from tokens.css.
 * Mobile first. "Desktop" starts at Astra's desktop breakpoint (922px).
 * Loaded after tokens.css, on the front end and in the block editor.
 */

/* ---- Sections ----------------------------------------------------------
 * A section is a Group block: "Align: Full width", "Inner blocks use content
 * width", plus one ls-section-* background. Spacing inside sections comes
 * from gaps, so text blocks have no margins here.
 * .wp-block-group is needed to beat Astra's default block padding.
 */
.wp-block-group.ls-section {
	position: relative;
	padding: var(--ls-space-10) var(--ls-space-3);
	font-size: var(--ls-fluid-body);
	line-height: 1.7;
}
.wp-block-group.ls-section > * + * { margin-top: var(--ls-space-6); }
.ls-section :is(h1, h2, h3, h4, p) { margin: 0; }
/* WordPress adds 24px between the blocks of a Group; here gaps do that */
.ls-section :where(.wp-block-group) > * { margin-block: 0; }
.ls-section h1 { font-size: var(--ls-fluid-h1); line-height: var(--ls-line-height-h1); }
.ls-section h2 { font-size: var(--ls-fluid-h2); line-height: var(--ls-line-height-h2); }
.ls-section h3 { font-size: var(--ls-fluid-h3); line-height: var(--ls-line-height-h3); }
.ls-section h4 { font-size: var(--ls-fluid-h4); line-height: var(--ls-line-height-h4); }

.ls-section-navy { background: var(--ls-color-navy); color: var(--ls-color-on-navy-muted); }
.ls-section-navy :is(h1, h2) { color: var(--ls-color-accent); }
.ls-section-blue { background: var(--ls-color-primary-strong); color: var(--ls-color-bg); }
.ls-section-blue :is(h1, h2) { color: var(--ls-color-bg); }
.ls-section-yellow { background: var(--ls-color-accent); color: var(--ls-color-heading); }
.ls-section-light { background: var(--ls-color-bg-alt); }

/* ---- Text roles -------------------------------------------------------- */
.ls-eyebrow {
	font-family: var(--ls-font-heading);
	font-size: var(--ls-font-size-h6);
	font-weight: var(--ls-font-weight-heading);
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ls-color-primary-strong);
}
.ls-section-navy .ls-eyebrow,
.ls-section-blue .ls-eyebrow { color: var(--ls-color-bg); }
.ls-section-yellow .ls-eyebrow { color: var(--ls-color-heading); }

.ls-lead { font-size: clamp(17px, 15.6px + 0.36vw, 20px); }
.ls-note { font-size: var(--ls-font-size-small); line-height: 1.6; }

/* "More about X →" link line */
.ls-more {
	font-family: var(--ls-font-heading);
	font-size: var(--ls-font-size-small);
	font-weight: var(--ls-font-weight-heading);
}
.ls-more a { color: var(--ls-color-primary-strong); text-decoration: none; }
.ls-more a:hover,
.ls-more a:focus { text-decoration: underline; }
.ls-section-yellow .ls-more a { color: var(--ls-color-heading); }

/* ---- Layout: stacks and grids ------------------------------------------ */
.ls-stack { display: flex; flex-direction: column; gap: var(--ls-space-2); }
.ls-stack-lg { gap: var(--ls-space-3); }

/* Grids stack on phones and get their columns on desktop */
.ls-grid { display: grid; gap: var(--ls-space-2); }
.ls-grid-2 { gap: var(--ls-space-6); }
.ls-grid-split { gap: var(--ls-space-4); }
.ls-grid-top { align-items: start; }
.ls-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-2); }

/* ---- Cards ------------------------------------------------------------- */
.ls-card {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-2);
	padding: var(--ls-space-3);
	background: var(--ls-color-bg);
	border-radius: var(--ls-radius-card);
	color: var(--ls-color-text);
}
.ls-card h3 { font-size: 20px; line-height: var(--ls-line-height-h4); color: var(--ls-color-heading); }
.ls-card p { font-size: 16px; line-height: 1.6; }

/* Colored band at the top of a card: a Group with the heading in it, as the
 * card's first block. :first-child also beats the WordPress layout rule that
 * zeroes the top margin of a Group's first block. */
.ls-card > .ls-card-header:first-child {
	margin: calc(-1 * var(--ls-space-3)) calc(-1 * var(--ls-space-3)) 0;
	padding: 20px var(--ls-space-3);
	background: var(--ls-color-accent);
	border-radius: var(--ls-radius-card) var(--ls-radius-card) 0 0;
}
.ls-card-header h3 { font-size: var(--ls-fluid-h4); }

/* Colored top stripe for cards and chat mockups */
.ls-stripe-navy { border-top: 6px solid var(--ls-color-navy); }
.ls-stripe-accent { border-top: 6px solid var(--ls-color-accent); }
.ls-stripe-blue { border-top: 6px solid var(--ls-color-primary-strong); }

/* Short bold line under a card header. Rubik 600, see functions.php */
.ls-card .ls-card-summary {
	font-size: var(--ls-font-size-small);
	font-weight: 600;
	color: var(--ls-color-heading);
}

/* Logo in a card: an Image block with its height set in the block */
.wp-block-image.ls-logo { display: flex; align-items: center; height: 56px; margin: 0; }

/* Icon in a navy square above a card heading: ls-icon-box plus a ls-icon-* class on the heading */
.ls-icon-box { position: relative; }
.ls-icon-box::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: var(--ls-space-2);
	background: var(--ls-color-navy);
	border-radius: var(--ls-radius-sm);
}
.ls-icon-box::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 12px;
	width: 24px;
	height: 24px;
	background: var(--ls-color-accent);
	-webkit-mask: var(--ls-icon) center / contain no-repeat;
	mask: var(--ls-icon) center / contain no-repeat;
}

/* ---- Data tiles (on navy) ---------------------------------------------- */
.ls-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--ls-space-2);
	background: var(--ls-color-navy-deep);
	border-radius: var(--ls-radius-card);
	color: var(--ls-color-on-navy-muted);
	font-size: var(--ls-font-size-small);
	line-height: 1.5;
}
.ls-tile::before {
	content: "";
	width: 24px;
	height: 24px;
	background: var(--ls-color-accent);
	-webkit-mask: var(--ls-icon) center / contain no-repeat;
	mask: var(--ls-icon) center / contain no-repeat;
}
.ls-tile > p:first-child {
	font-size: 17px;
	line-height: 1.35;
	font-weight: var(--ls-font-weight-body-bold);
	color: var(--ls-color-bg);
}
.ls-tile-accent { background: var(--ls-color-accent); color: var(--ls-color-heading); }
.ls-tile-accent::before { background: var(--ls-color-heading); }
.ls-tile-accent > p:first-child { color: var(--ls-color-heading); }

/* ---- Chat mockups ------------------------------------------------------ */
.ls-chat {
	display: flex;
	flex-direction: column;
	background: var(--ls-color-bg);
	border-radius: var(--ls-radius-card);
	overflow: hidden;
	color: var(--ls-color-heading);
}
.ls-chat-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ls-space-1);
	padding: var(--ls-space-2) 20px;
	border-bottom: 1px solid var(--ls-color-border);
}
.ls-chat-title {
	font-family: var(--ls-font-heading);
	font-size: var(--ls-font-size-small);
	font-weight: var(--ls-font-weight-heading);
	line-height: 1.4;
}
.ls-chat-status {
	display: inline-flex;
	align-items: center;
	gap: var(--ls-space-1);
	white-space: nowrap;
	padding: 4px 12px;
	border-radius: var(--ls-button-radius);
	background: var(--ls-color-primary-tint);
	color: var(--ls-color-primary-strong);
	font-size: var(--ls-font-size-small);
	font-weight: var(--ls-font-weight-body-bold);
	line-height: 1.4;
}
.ls-chat-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.ls-chat-body {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-2);
	padding: 20px;
	font-size: 16px;
	line-height: 1.6;
}
.ls-chat strong { font-weight: var(--ls-font-weight-body-bold); }

/* The person's question */
.ls-bubble {
	align-self: flex-end;
	max-width: 90%;
	padding: 12px 18px;
	background: var(--ls-color-primary-strong);
	color: var(--ls-color-bg);
	border-radius: var(--ls-radius-card) var(--ls-radius-card) 4px var(--ls-radius-card);
	line-height: 1.5;
}
/* Example question in a card */
.ls-bubble-light {
	padding: 12px var(--ls-space-2);
	background: var(--ls-color-primary-tint);
	color: var(--ls-color-heading);
	border-radius: var(--ls-radius-card) var(--ls-radius-card) var(--ls-radius-card) 4px;
	font-size: 16px;
	line-height: 1.5;
}
/* "Checked the Lapisoft schedule" line with the eye icon */
.ls-chat-note {
	display: flex;
	align-items: center;
	gap: var(--ls-space-1);
	color: var(--ls-color-text);
	font-size: var(--ls-font-size-small);
	line-height: 1.4;
}
.ls-chat-note::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--ls-icon) center / contain no-repeat;
	mask: var(--ls-icon) center / contain no-repeat;
}
/* Decorative "Ask about your shop…" field (Custom HTML block, aria-hidden) */
.ls-chat-footer { padding: var(--ls-space-2) 20px; border-top: 1px solid var(--ls-color-border); }
.ls-chat-input {
	display: flex;
	align-items: center;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--ls-color-border);
	border-radius: var(--ls-button-radius);
	background: var(--ls-color-bg-alt);
	color: var(--ls-color-text);
	font-size: 16px;
}

/* Data lists: Table blocks in chat answers. .wp-block-table beats core table CSS */
.wp-block-table.ls-data {
	margin: 0;
	border: 1px solid var(--ls-color-border);
	border-radius: var(--ls-radius-sm);
	overflow: hidden;
	color: var(--ls-color-heading);
	font-size: var(--ls-font-size-small);
	line-height: 1.4;
}
.wp-block-table.ls-data table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.wp-block-table.ls-data td {
	padding: 12px 4px;
	border: 0;
	border-bottom: 1px solid var(--ls-color-border);
	vertical-align: top;
}
.wp-block-table.ls-data td:first-child { padding-left: 12px; }
.wp-block-table.ls-data td:last-child { padding-right: 12px; }
.wp-block-table.ls-data tr:last-child td { border-bottom: 0; }
.ls-data strong { font-weight: var(--ls-font-weight-body-bold); }
/* Column roles: schedule = time | job + material | team; estimates = name | amount; slabs = name | count | area */
.ls-data-schedule td:first-child,
.ls-data-schedule td:last-child,
.ls-data-estimates td:last-child,
.ls-data-slabs td + td { white-space: nowrap; }
.ls-data-schedule td:first-child,
.ls-data-schedule td:last-child { font-weight: var(--ls-font-weight-body-bold); }
.ls-data-schedule td:last-child { color: var(--ls-color-primary-strong); }
.ls-data-schedule td:nth-child(2),
.ls-data-slabs td:nth-child(2) { color: var(--ls-color-text); }
.ls-data-schedule td:nth-child(2) strong { color: var(--ls-color-heading); }

/* Payment bars (Custom HTML block): <p><span>Label</span><strong>$1</strong><span class="ls-bar"><span style="width:83%"></span></span></p> */
.ls-bars { display: flex; flex-direction: column; gap: 12px; font-size: var(--ls-font-size-small); line-height: 1.4; }
.ls-bars p { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.ls-bars strong { font-weight: var(--ls-font-weight-body-bold); }
.ls-bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--ls-color-primary-tint); }
.ls-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--ls-color-primary-strong); }

/* ---- Question and answer list: h3 + p pairs in one Group --------------- */
.ls-faq > h3 {
	padding-top: var(--ls-space-3);
	font-size: 20px;
	line-height: var(--ls-line-height-h4);
	color: var(--ls-color-heading);
}
.ls-faq > h3 + p { margin-top: var(--ls-space-1); }
.ls-faq > p {
	padding-bottom: var(--ls-space-3);
	border-bottom: 1px solid var(--ls-color-border);
	font-size: 17px;
}
.ls-faq > p:last-child { border-bottom: 0; }

/* ---- Buttons: variants for the Buttons block (Astra styles the base) --- */
.ls-actions { gap: var(--ls-space-2); padding-top: var(--ls-space-1); }
.wp-block-button.ls-btn-accent .wp-block-button__link,
.wp-block-button.ls-btn-outline-light .wp-block-button__link { text-transform: none; }
.wp-block-button.ls-btn-accent .wp-block-button__link {
	background: var(--ls-color-accent);
	border-color: var(--ls-color-accent);
	color: var(--ls-color-heading);
}
.wp-block-button.ls-btn-accent .wp-block-button__link:hover,
.wp-block-button.ls-btn-accent .wp-block-button__link:focus {
	background: var(--ls-color-bg);
	border-color: var(--ls-color-accent);
	color: var(--ls-color-heading);
}
.wp-block-button.ls-btn-outline-light .wp-block-button__link {
	background: transparent;
	border-color: var(--ls-color-bg);
	color: var(--ls-color-bg);
}
.wp-block-button.ls-btn-outline-light .wp-block-button__link:hover,
.wp-block-button.ls-btn-outline-light .wp-block-button__link:focus {
	background: var(--ls-color-bg);
	border-color: var(--ls-color-bg);
	color: var(--ls-color-heading);
}
.wp-block-button.ls-btn-accent .wp-block-button__link:focus-visible,
.wp-block-button.ls-btn-outline-light .wp-block-button__link:focus-visible {
	outline: 3px solid var(--ls-color-accent);
	outline-offset: 2px;
}

/* ---- Hero and CTA: decorative blocks, CSS only ------------------------- */
.ls-hero,
.ls-cta { overflow: hidden; isolation: isolate; }
/* The transparent site header lies over the hero, so add its height on top */
.wp-block-group.ls-hero { padding-top: calc(var(--ls-header-height-mobile) + var(--ls-space-4) * 2); }
.ls-cta { text-align: center; }
.wp-block-group.ls-cta > * + * { margin-top: var(--ls-space-3); }
.ls-cta p { max-width: 680px; }
/* Two shapes on the section, the third on its first block; all behind the content */
.ls-hero::before, .ls-hero::after, .ls-hero > :first-child::before,
.ls-cta::before, .ls-cta::after, .ls-cta > :first-child::before {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: var(--ls-radius-card);
}
.ls-hero::before { right: -60px; bottom: 40px; width: 300px; height: 520px; background: var(--ls-color-navy-deep); }
.ls-hero::after { top: -40px; left: 300px; width: 140px; height: 90px; background: var(--ls-color-primary-strong); }
.ls-hero > :first-child::before { left: 24px; bottom: -40px; width: 96px; height: 96px; background: var(--ls-color-accent); }
.ls-cta::before { left: -60px; bottom: -60px; width: 200px; height: 150px; background: var(--ls-color-primary-strong); }
.ls-cta::after { right: -60px; top: -60px; width: 220px; height: 140px; background: var(--ls-color-navy-deep); }
.ls-cta > :first-child::before { right: 24px; bottom: 32px; width: 64px; height: 64px; background: var(--ls-color-accent); }

/* ---- Desktop ----------------------------------------------------------- */
@media (min-width: 922px) {
	.wp-block-group.ls-section { padding-top: var(--ls-space-15); padding-bottom: var(--ls-space-15); }
	.wp-block-group.ls-hero { padding-top: calc(var(--ls-header-height) + var(--ls-space-6) * 2); }
	.ls-grid { gap: var(--ls-space-3); }
	.ls-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--ls-space-4) * 2); align-items: center; }
	.ls-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ls-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ls-grid-split { grid-template-columns: 4fr 8fr; gap: calc(var(--ls-space-4) * 2); }
	.ls-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ls-tile { padding: 20px; }
	.ls-chat-header,
	.ls-chat-footer { padding-left: var(--ls-space-3); padding-right: var(--ls-space-3); }
	.ls-chat-body { padding: var(--ls-space-3); }
	.wp-block-table.ls-data td { padding: 12px 6px; }
	.wp-block-table.ls-data td:first-child { padding-left: var(--ls-space-2); }
	.wp-block-table.ls-data td:last-child { padding-right: var(--ls-space-2); }

	.ls-hero::before { top: 64px; right: -60px; bottom: auto; width: 640px; height: 640px; }
	.ls-hero::after { top: -40px; left: auto; right: -80px; width: 320px; height: 200px; }
	.ls-hero > :first-child::before { top: 620px; left: calc(50% - 20px); bottom: auto; width: 128px; height: 128px; }
	.ls-cta::before { left: -80px; bottom: -80px; width: 360px; height: 280px; }
	.ls-cta::after { right: -60px; top: -60px; width: 420px; height: 260px; }
	.ls-cta > :first-child::before { right: 200px; bottom: 64px; width: 96px; height: 96px; }
}

/* ---- Icons: 24px line icons as masks, drawn in the current color ------
 * Add a ls-icon-* class next to ls-tile, ls-icon-box or ls-chat-note.
 */
.ls-chat-note,
.ls-icon-eye { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ls-icon-customers { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7'/%3E%3Cpath d='M18 14a6 6 0 0 1 3.5 6'/%3E%3C/svg%3E"); }
.ls-icon-estimates { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E"); }
.ls-icon-jobs { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E"); }
.ls-icon-schedule { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.ls-icon-fabrication { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M4.2 4.2l2.1 2.1'/%3E%3Cpath d='M17.7 17.7l2.1 2.1'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3Cpath d='M4.2 19.8l2.1-2.1'/%3E%3Cpath d='M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
.ls-icon-slabs { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 8l10 5 10-5-10-5z'/%3E%3Cpath d='m2 16 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); }
.ls-icon-invoices { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ls-icon-orders { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h11l2-8H6.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E"); }
.ls-icon-tasks { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.ls-icon-user { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.ls-icon-shield { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ls-icon-lock { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }