Feat: Rework cart drawer line layout and order confirmation page

resources/css/checkout.css

@@ -53,6 +53,7 @@
     --bbk-color-accent: #18181b;
     --bbk-color-accent-text: #ffffff;
     --bbk-color-danger: #dc2626;
+    --bbk-color-info: #2563eb;
 
     --bbk-radius: 8px;
     --bbk-radius-sm: 4px;
@@ -153,6 +154,11 @@
     outline-offset: 2px;
 }
 
+/* Programmatic focus targets only (tabindex=-1) — never reached by Tab, so
+   no ring needed. */
+.bbk-cart-heading:focus,
+.bbk-checkout-summary-heading:focus { outline: none; }
+
 .bbk-visually-hidden {
     position: absolute;
     width: 1px;
@@ -183,7 +189,7 @@
 
 .bbk-cart-item {
     display: grid;
-    grid-template-columns: 72px 1fr auto;
+    grid-template-columns: 72px 1fr;
     gap: 0.875rem;
     align-items: start;
 }
@@ -199,8 +205,23 @@
 
 .bbk-cart-item-detail { min-width: 0; }
 
+/* Title + remove button share the first row; quantity stepper + line total
+   share the last one. */
+.bbk-cart-item-head,
+.bbk-cart-item-foot {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.bbk-cart-item-head { align-items: flex-start; }
+.bbk-cart-item-foot { align-items: center; }
+
+.bbk-cart-item-remove-form { flex: 0 0 auto; }
+
 .bbk-cart-item-title {
     display: block;
+    min-width: 0;
     margin: 0 0 0.25rem;
     font-weight: 600;
     color: inherit;
@@ -252,24 +273,24 @@ a.bbk-cart-item-title:hover { text-decoration: underline; }
     color: var(--bbk-color-muted);
 }
 
-.bbk-cart-item-aside {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 0.5rem;
-}
-
-.bbk-cart-item-total { margin: 0; font-weight: 600; }
+.bbk-cart-item-total { margin: 0; font-weight: 600; white-space: nowrap; }
 
+/* 2.5rem hit area (same as the drawer's own close button), pulled up/right by
+   negative margins so the glyph lines up with the title's first line instead
+   of pushing the row taller. */
 .bbk-cart-item-remove {
-    font-size: 1.125rem;
-    width: 1.5rem;
-    height: 1.5rem;
+    font-size: 1.75rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: -0.5rem -0.5rem 0 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    border-radius: var(--bbk-radius-sm);
 }
 
+.bbk-cart-item-remove:hover { background: var(--bbk-color-bg-muted); }
+
 .bbk-cart-qty {
     display: inline-flex;
     align-items: center;
@@ -905,10 +926,39 @@ textarea.bbk-field-input { resize: vertical; }
     to { transform: rotate(360deg); }
 }
 
+/* ── Notice ────────────────────────────────────────────────────────────
+   Inline, static message box: `.bbk-notice` + a tone modifier. Static
+   content, so no live-region role — for messages injected after load, add
+   role="status" (or role="alert" for errors) on the element itself. */
+
+.bbk-notice {
+    --bbk-notice-color: var(--bbk-color-text);
+    display: flex;
+    align-items: flex-start;
+    gap: 0.625rem;
+    padding: 0.875rem 1rem;
+    border: 1px solid color-mix(in srgb, var(--bbk-notice-color) 25%, transparent);
+    border-radius: var(--bbk-radius-sm);
+    background: color-mix(in srgb, var(--bbk-notice-color) 6%, var(--bbk-color-bg));
+    color: var(--bbk-color-text);
+    font-size: 0.875rem;
+}
+
+.bbk-notice--info { --bbk-notice-color: var(--bbk-color-info); }
+
+.bbk-notice-icon {
+    flex: 0 0 auto;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--bbk-notice-color);
+}
+
+.bbk-notice-text { margin: 0; align-self: center; }
+
 /* ── Confirmation page ─────────────────────────────────────────────── */
 
 .bbk-confirmation {
-    max-width: 720px;
+    max-width: 560px;
     margin: 0 auto;
     padding: 3rem 1.5rem 5rem;
     font-family: var(--bbk-font);
@@ -916,7 +966,7 @@ textarea.bbk-field-input { resize: vertical; }
 }
 
 .bbk-confirmation-heading {
-    margin: 0 0 1rem;
+    margin: 0 0 1.25rem;
     font-size: 1.75rem;
     font-weight: 700;
 }
@@ -924,7 +974,7 @@ textarea.bbk-field-input { resize: vertical; }
 .bbk-confirmation-ref { margin: 0 0 0.25rem; }
 
 .bbk-confirmation-meta {
-    margin: 0 0 1rem;
+    margin: 1.5rem 0 1rem;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -940,17 +990,22 @@ textarea.bbk-field-input { resize: vertical; }
 .bbk-confirmation-meta-row dt { color: var(--bbk-color-muted); }
 .bbk-confirmation-meta-row dd { margin: 0; font-weight: 600; }
 
-.bbk-confirmation-body {
-    margin: 2rem 0;
-    display: grid;
-    gap: 2.5rem;
+.bbk-confirmation-section {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--bbk-color-border);
 }
 
-@media (min-width: 640px) {
-    .bbk-confirmation-body { grid-template-columns: 1fr 1fr; }
+.bbk-confirmation-section-heading {
+    margin: 0 0 1rem;
+    font-size: 1.125rem;
+    font-weight: 700;
 }
 
 .bbk-confirmation-lines {
+    list-style: none;
+    margin: 0 0 1.25rem;
+    padding: 0;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
@@ -965,16 +1020,21 @@ textarea.bbk-field-input { resize: vertical; }
 
 .bbk-confirmation-line-detail { min-width: 0; }
 
+.bbk-confirmation-line-name { margin: 0 0 0.25rem; }
+
+.bbk-confirmation-line-total { margin: 0; white-space: nowrap; }
+
 .bbk-confirmation-line-qty { color: var(--bbk-color-muted); }
 
-.bbk-confirmation-lines .bbk-cart-summary { margin-top: 0.75rem; }
-
 .bbk-confirmation-addresses {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     gap: 1.5rem;
 }
 
+@media (min-width: 480px) {
+    .bbk-confirmation-addresses { grid-template-columns: 1fr 1fr; }
+}
+
 .bbk-confirmation-address-heading,
 .bbk-confirmation-bank-transfer-heading {
     margin: 0 0 0.5rem;
@@ -982,11 +1042,6 @@ textarea.bbk-field-input { resize: vertical; }
     font-weight: 700;
 }
 
-.bbk-confirmation-bank-transfer {
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--bbk-color-border);
-}
-
 /* Store-authored rich text (ManageStoreDetails' RichEditor) — may be
    paragraphs, bold text or a bank/IBAN/BIC table. */
 .bbk-confirmation-bank-transfer-body {