/* Stacksole Magento Development page: page-specific additions.
 * Builds on stacksole-seo.css (shared design system), stacksole-shopify.css
 * (shared components) and stacksole-wp-dev.css (service rows). Adds the
 * catalog storefront mock-up, B2B card and architecture diagram. */

.sk {
	--i-link: 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='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
	--i-package: 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='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
	--i-database: 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%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
	--i-filter: 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='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/%3E%3C/svg%3E");
	--i-trend: 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='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
}

.sk-i-link { --ic: var(--i-link); }
.sk-i-package { --ic: var(--i-package); }
.sk-i-database { --ic: var(--i-database); }
.sk-i-filter { --ic: var(--i-filter); }
.sk-i-trend { --ic: var(--i-trend); }

body.page-id-6302 .page-title-wrapper {
	display: none;
}

body.page-id-6302 .convis-content-area,
body.page-id-6302 .convis-content-area > .container,
body.page-id-6302 .convis-content-area .content-area,
body.page-id-6302 .convis-content-area .page-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

/* Hero: catalog storefront mock-up */
.sk .sk-mg { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 16px 18px 22px; font-size: 12px; color: var(--sk-navy); }
.sk .sk-mg-side { display: grid; align-content: start; gap: 14px; }
.sk .sk-mg-side > b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.sk .sk-mg-grp { display: grid; gap: 7px; }
.sk .sk-mg-grp small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-muted); }
.sk .sk-mg-opt { display: flex; align-items: center; gap: 7px; color: var(--sk-text); }
.sk .sk-mg-opt::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px #c9d3e6; }
.sk .sk-mg-opt.on::before { background: var(--sk-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: none; }
.sk .sk-mg-range { position: relative; height: 4px; margin: 4px 0; border-radius: 2px; background: #dfe5ef; }
.sk .sk-mg-range::after { content: ""; position: absolute; left: 18%; right: 26%; top: 0; bottom: 0; border-radius: 2px; background: var(--sk-blue); }
.sk .sk-mg-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--sk-line); font-weight: 600; }
.sk .sk-mg-bar span { padding: 5px 10px; border: 1px solid var(--sk-line); border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--sk-muted); }
.sk .sk-mg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sk .sk-mg-card i { display: block; aspect-ratio: 1 / 1; margin-bottom: 8px; border-radius: 12px; background: #eef2f8; }
.sk .sk-mg-card:nth-child(2n) i { background: #e6eefc; }
.sk .sk-mg-card span { display: block; width: 78%; height: 7px; margin-bottom: 5px; border-radius: 4px; background: #dfe5ef; }
.sk .sk-mg-card b { font-size: 11.5px; font-weight: 600; color: var(--sk-muted); }
.sk .sk-mg-float .sk-float-h { margin-bottom: 10px; }
.sk .sk-mg-float ul { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.sk .sk-mg-float li { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.sk .sk-mg-float li .sk-i { color: var(--sk-blue); }

/* Architecture visual */
.sk .sk-arch { display: grid; gap: 26px; padding: 22px; border: 1px solid var(--sk-line); border-radius: 24px; background: var(--sk-soft); }
.sk .sk-arch-tier { position: relative; padding: 16px 18px 18px; border: 1px solid var(--sk-line); border-radius: 20px; background: #ffffff; box-shadow: var(--sk-shadow); }
.sk .sk-arch-tier + .sk-arch-tier::before { content: ""; position: absolute; top: -27px; left: 50%; width: 1px; height: 26px; background: #b8c4d9; }
.sk .sk-arch-top { border-color: #dbe6fb; background: var(--sk-blue-t); }
.sk .sk-arch-tag { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-blue); }
.sk .sk-arch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sk .sk-arch-node { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--sk-line); border-radius: 14px; background: #ffffff; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--sk-navy); }
.sk .sk-arch-node .sk-i { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sk-blue); }
.sk .sk-arch-top .sk-arch-node { border-color: #dbe6fb; }

/* B2B capability card */
.sk .sk-b2b { display: flex; align-items: flex-start; gap: 18px; margin-top: 16px; padding: 24px 28px; border: 1px solid var(--sk-line); border-radius: 20px; background: #ffffff; box-shadow: var(--sk-shadow); }
.sk .sk-b2b h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; color: var(--sk-navy); }
.sk .sk-b2b p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sk-text); }

@media (max-width: 1100px) {
	.sk .sk-arch { max-width: 640px; margin-inline: auto; width: 100%; }
}

@media (max-width: 767px) {
	.sk .sk-mg { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-mg-side { display: none; }
	.sk .sk-arch { padding: 16px; gap: 24px; }
	.sk .sk-arch-tier + .sk-arch-tier::before { top: -25px; height: 24px; }
	.sk .sk-arch-row { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-b2b { padding: 20px; }
}