/* Commerce extends the existing PK-WS design; no additional framework. */
.commerce-hero { padding-top: 2rem; padding-bottom: 3.5rem; min-height: 0; }
.commerce-hero .pkws-breadcrumb { margin-bottom: 1.5rem; }
.commerce-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:2.5rem; align-items:center; }
.commerce-hero-grid > * { min-width:0; }
.pkws-commerce .btn { max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:center; text-transform:none; letter-spacing:0; }
.pkws-commerce .btn-primary { color:#fff; background:var(--pkws-red); border-color:var(--pkws-red); }
.pkws-commerce .btn-primary:hover { background:#b52233; border-color:#b52233; }
.pkws-commerce .pkws-anchor-nav .container { flex-wrap:wrap; overflow-x:visible; }
.pkws-commerce > section:not(.pkws-hero) { scroll-margin-top:155px; }
@media(max-width:767px) { .pkws-commerce .pkws-anchor-nav { position:static; } .pkws-commerce > section:not(.pkws-hero) { scroll-margin-top:78px; } }
.commerce-hero h1 { font-size:clamp(2.3rem,3.3vw,3.2rem); }
.commerce-hero .commerce-hero-note { font-size:.95rem; margin-top:1.25rem; }
.commerce-visual { margin:0; min-width:0; }
.commerce-visual picture { display:block; }
.commerce-visual img { width:100%; height:auto; border-radius:18px; background:#edf4f8; }
.commerce-visual figcaption { margin-top:.65rem; font-size:.78rem; color:var(--pkws-muted); }
.commerce-visual--hero { padding:1rem; border:1px solid rgba(255,255,255,.22); border-radius:24px; background:rgba(255,255,255,.06); }
.commerce-visual--hero figcaption { color:#d4e1ee; }
.commerce-visual-labels { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:.4rem; margin-top:.8rem; text-align:center; font-size:.78rem; line-height:1.5; align-items:center; color:#fff; }
.commerce-visual-labels strong { padding:.65rem .35rem; border-radius:9px; color:#0b2447; background:#b8eee8; }
.commerce-path { display:flex; flex-direction:column; border-top:4px solid var(--pkws-blue); }
.commerce-path > a { margin-top:auto; font-weight:700; text-decoration:underline; }
.commerce-align { align-items:center; }
.commerce-data-map { padding:1.6rem; border:1px solid var(--pkws-line); border-radius:18px; background:#fff; text-align:center; }
.commerce-data-master { display:grid; gap:.4rem; padding:1.4rem; color:#fff; background:var(--pkws-navy); border-radius:12px; }
.commerce-data-master strong { font-size:1.55rem; }
.commerce-data-master span { font-size:.85rem; }
.commerce-data-channels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; padding-top:1.5rem; }
.commerce-data-channels span { position:relative; padding:.7rem .25rem; border:1px solid #9abbd3; border-radius:8px; font-size:.85rem; font-weight:700; color:var(--pkws-navy); background:#eaf3fc; }
.commerce-data-channels span::before { position:absolute; content:""; height:1.5rem; width:2px; background:#628cae; bottom:100%; left:50%; }
.commerce-data-map p { margin:.9rem 0 0; font-size:.8rem; }
.commerce-feature-heading { margin:3rem 0 1.2rem; }
.commerce-number { display:block; color:var(--pkws-blue); font-weight:700; font-size:.8rem; margin-bottom:.7rem; }
.commerce-features .pkws-card p { margin-bottom:0; }
.commerce-note { margin:1.5rem 0; padding:1rem 1.2rem; border-left:3px solid #267c81; background:#edf7f6; color:#234852; border-radius:0 10px 10px 0; }
.commerce-chip-list { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.3rem 0; }
.commerce-chip-list span { padding:.4rem .7rem; border-radius:7px; color:#234852; background:#e0efee; font-size:.83rem; }
.commerce-flow { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; margin:2rem 0; padding:0; list-style:none; }
.commerce-flow li { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; min-height:88px; padding:.8rem; border:1px solid #b4cbdc; border-radius:12px; color:var(--pkws-navy); background:#edf4f9; font-weight:700; font-size:.87rem; }
.commerce-flow li:not(:last-child)::after { content:"→"; position:absolute; left:100%; width:1rem; color:#346989; }
.commerce-flow--orders { grid-template-columns:repeat(5,minmax(0,1fr)); }
.commerce-flow--orders li { color:#fff; background:#193959; border-color:#7195b0; }
.commerce-flow--orders li::after { color:#b8eee8 !important; }
.pkws-commerce .commerce-light-note { color:#d4e1ee; font-size:.92rem; }
.commerce-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.5rem; list-style:none; margin:0; padding:0; }
.commerce-steps li { border-top:2px solid #bbcedf; padding-top:1rem; min-width:0; }
.commerce-steps span { display:block; margin-bottom:1rem; color:var(--pkws-red); font-weight:700; }
.commerce-steps h3 { font-size:1.12rem; }
.commerce-steps p { font-size:.95rem; }
.commerce-related { display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; margin-top:2rem; }
.commerce-related a { text-decoration:underline; padding:.5rem 0; }
.pkws-commerce .pkws-actions { flex-wrap:wrap; }
.pkws-commerce .pkws-actions a:not(.btn) { text-decoration:underline; }
@media(max-width:1199px) { .commerce-hero-grid { gap:1.5rem; } .commerce-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:991px) { .commerce-hero-grid { grid-template-columns:1fr; } .commerce-visual--hero { max-width:720px; } .commerce-flow { grid-template-columns:repeat(3,minmax(0,1fr)); } .commerce-flow li:nth-child(3)::after { display:none; } }
@media(max-width:767px) { .commerce-hero h1 { font-size:clamp(2rem,7.6vw,3.2rem); } .commerce-hero { padding-top:1rem; } .commerce-visual-labels { font-size:.7rem; } .commerce-steps { grid-template-columns:1fr; gap:.8rem; } .commerce-data-map { padding:1rem; } .commerce-data-channels { gap:.35rem; } .commerce-data-channels span { font-size:.76rem; } .commerce-flow { grid-template-columns:1fr; gap:.85rem; } .commerce-flow li { min-height:56px; } .commerce-flow li:not(:last-child)::after { display:block; top:100%; left:50%; width:1rem; height:.85rem; line-height:.85rem; content:"↓"; } }