.commerce-skills-dialog{position:fixed;inset:0;margin:auto;width:min(900px,calc(100% - 40px));max-height:88dvh;padding:28px;border:1px solid #d9c5ac;border-radius:16px;background:linear-gradient(135deg,#fffdf8,#f4e9dc);color:#443426;box-shadow:0 28px 100px #2e201940;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c4ab90 transparent}
.commerce-skills-dialog::backdrop{background:#2f251e70;backdrop-filter:blur(5px)}
.commerce-skills-close{position:absolute;right:18px;top:16px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #e5d5c1;border-radius:50%;background:#fffaf2;color:#8b7159;font-size:23px;line-height:1;cursor:pointer}
.commerce-skills-header{margin:0 40px 23px 0}
.commerce-skills-eyebrow{display:block;font-size:11px;color:#a57a50;margin-bottom:9px}
.commerce-skills-header h2{margin:0 0 8px;font-size:27px;line-height:1.3;color:#483425}
.commerce-skills-header p{margin:0;color:#95816d;font-size:13px;line-height:1.7}
.commerce-skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.commerce-skill-card{--skill-ink:#96603c;--skill-tint:#f6e7d5;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:184px;padding:18px;border:1px solid #e7d9c8;border-radius:14px;text-align:left;background:#fffdf9;color:#4e3b2c;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s}
.commerce-skill-card:nth-child(2){--skill-ink:#8768b0;--skill-tint:#f0eafa}
.commerce-skill-card:nth-child(3){--skill-ink:#50877b;--skill-tint:#e6f1ec}
.commerce-skill-card:nth-child(4){--skill-ink:#ad6774;--skill-tint:#f8e9ed}
.commerce-skill-card:nth-child(5){--skill-ink:#677f9c;--skill-tint:#e9eff6}
.commerce-skill-card:nth-child(6){--skill-ink:#9a7e42;--skill-tint:#f5efdd}
.commerce-skill-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.commerce-skill-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--skill-tint);color:var(--skill-ink)}
.commerce-skill-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.commerce-skill-number{font-size:11px;color:#bead99}
.commerce-skill-card strong{font-size:15px;line-height:1.55;color:#4a3526}
.commerce-skill-card p{margin:7px 0 16px;color:#96816c;font-size:12px;line-height:1.7}
.commerce-skill-cta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;color:var(--skill-ink);font-size:11px}
.commerce-skill-card:hover{transform:translateY(-3px);border-color:#c9aa85;box-shadow:0 8px 22px #6b462213}
.commerce-skills-dialog :is(button,a):focus-visible{outline:2px solid #a47243;outline-offset:3px}
.commerce-skills-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:0;border:0;background:transparent;color:#967453;font-size:12px;cursor:pointer}
.commerce-guide-steps{display:grid;gap:0;border:1px solid #e6d8c6;border-radius:13px;padding:0 20px;margin:0 0 18px;list-style:none;background:#fffdf9;counter-reset:guide-step}
.commerce-guide-steps li{position:relative;padding:18px 0 18px 36px;border-bottom:1px solid #eee3d5;counter-increment:guide-step}
.commerce-guide-steps li:last-child{border:0}
.commerce-guide-steps li::before{content:counter(guide-step,decimal-leading-zero);position:absolute;left:0;top:20px;font-size:11px;color:#ad8a64}
.commerce-guide-steps h3{margin:0 0 6px;font-size:15px;color:#58402b}
.commerce-guide-steps p{margin:0;font-size:13px;color:#8a7764;line-height:1.9}
.commerce-guide-note{margin:0 0 18px;padding:12px 15px;border-left:2px solid #bf956c;background:#efe1cf80;font-size:12px;line-height:1.8;color:#8b6c50}
.commerce-guide-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.commerce-guide-actions a,.commerce-guide-actions button{display:inline-flex;gap:14px;padding:10px 15px;border:1px solid #c8ab8c;border-radius:7px;background:#86603f;color:#fffaf2;font-size:13px;cursor:pointer}
.commerce-guide-actions small{font-size:11px;color:#9a826a}
@media(max-width:700px){.commerce-skills-dialog{padding:22px;width:calc(100% - 24px)}.commerce-skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.commerce-skill-card{padding:14px;min-height:178px}.commerce-skills-header h2{font-size:24px}}
@media(max-width:420px){.commerce-skills-dialog{padding:20px 16px;border-radius:15px;max-height:90dvh}.commerce-skills-grid{grid-template-columns:1fr}.commerce-skill-card{min-height:156px}.commerce-skill-top{margin-bottom:10px}.commerce-skills-header{margin-right:25px}.commerce-guide-steps{padding:0 14px}.commerce-guide-steps li{padding-left:28px}}
@media(prefers-reduced-motion:reduce){.commerce-skill-card{transition:none;transform:none!important}}
/* Match the heading, spacing and navigation rows in the supplier catalog. */
body .catalog-sidebar .sidebar-resources .sidebar-label{display:block;margin-top:18px}
body .catalog-sidebar .sidebar-resources .sidebar-link{height:auto;min-height:43px;padding-top:9px;padding-bottom:9px;font-size:14px;color:#716052;white-space:normal;line-height:1.5;word-break:keep-all;overflow-wrap:normal}
body .catalog-sidebar .sidebar-resources .sidebar-link:hover{background:#ecdfcf;color:#684025}
body .catalog-sidebar .sidebar-resources .sidebar-link.is-resource-active{background:#e9d9c6;color:#684025;box-shadow:inset 2px 0 #a56f45}
body.catalog-page-active .catalog-sidebar>.sidebar-resources{display:block}
.commerce-resource-nav{display:flex;flex-wrap:wrap;gap:5px;margin:0 38px 22px 0;padding:0 0 16px;border-bottom:1px solid #e1d0bb}
.commerce-resource-nav[hidden]{display:none}
.commerce-resource-nav button{min-height:36px;padding:7px 11px;border:1px solid transparent;border-radius:6px;background:transparent;color:#806a55;font-size:13px;line-height:1.5;cursor:pointer;transition:background .18s,color .18s}
.commerce-resource-nav button:hover{background:#f0e4d5;color:#684025}
.commerce-resource-nav button[aria-pressed="true"]{background:#e9d9c6;border-color:#d8bfa1;color:#684025}
.commerce-skill-card strong{text-wrap:balance}
.commerce-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.commerce-resource-empty{padding:32px 24px;border:1px dashed #d4baa0;border-radius:14px;background:#fffaf3;text-align:center}
.commerce-resource-empty .commerce-skill-icon{margin:0 auto 15px;--skill-ink:#98704b;--skill-tint:#f1e2cf}
.commerce-resource-empty h3{margin:0 0 10px;font-size:18px;color:#725338}
.commerce-resource-empty p{max-width:400px;margin:0 auto;color:#97816c;font-size:13px;line-height:1.8}
.commerce-resource-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.commerce-resource-tags span{padding:6px 10px;border-radius:5px;background:#efe2d1;color:#92765c;font-size:11px}
@media(min-width:761px) and (max-width:959px){
 body .catalog-sidebar .sidebar-resources .sidebar-link{font-size:13px}
}
@media(max-width:760px){
 body .catalog-sidebar .sidebar-resources{display:block;padding-top:10px;margin-top:10px}
 body .catalog-sidebar .sidebar-resources .sidebar-title{display:flex;padding:2px 3px 10px}
 body .catalog-sidebar .sidebar-resources .sidebar-label{margin-top:10px;padding:0 3px 6px}
 body .catalog-sidebar .sidebar-resources .sidebar-link{display:inline-flex;height:34px;min-height:34px;padding:0 12px;margin:2px 6px 2px 0;width:auto;font-size:12px;vertical-align:top}
}
@media(max-width:420px){.commerce-resource-grid{grid-template-columns:1fr}.commerce-resource-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-right:0;padding-top:26px}.commerce-resource-nav button{font-size:12px;padding:7px 4px}.commerce-resource-nav button:last-child{word-break:keep-all}.commerce-skills-header p{font-size:14px}}
