fix(pricing-table): 11875 ux and qa findings recommendations (#12569)

### Related Ticket(s)

https://jsw.ibm.com/browse/ADCMS-11875

### Description

Addressing last round of QA and UX findings in the comments:

https://jsw.ibm.com/browse/ADCMS-11676?focusedId=29836670&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-29836670
https://jsw.ibm.com/browse/ADCMS-11676?focusedId=29862732&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-29862732
https://jsw.ibm.com/browse/ADCMS-11875?focusedId=29961245&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-29961245

### Changelog

- packages/styles/scss/components/pricing-table/_pricing-table.scss
- new styles
- packages/web-components/src/components/pricing-table/pricing-table.ts
- new logic to select last highlighted cell in the last row

Author: bruno-amorim

packages/styles/scss/components/pricing-table/_pricing-table.scss

@@ -39,6 +39,8 @@
 
     overflow-y: hidden;
 
+    padding-block-end: 15px;
+
     .#{$c4d-prefix}-pricing-table-sentinel {
       position: relative;
       display: block;
@@ -131,6 +133,19 @@
     }
   }
 
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  :host(c4d-pricing-table-group) tr[part~='row--group-title'] {
+    box-shadow: 0 -3px 0 #e8daff;
+  }
+
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  :host(c4d-pricing-table-header-cell) div[part~='heading-container'] {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    block-size: 100%;
+  }
+
   :host(#{$c4d-prefix}-pricing-table-group) tr {
     border: none;
     border-radius: 4px;
@@ -383,8 +398,11 @@
   }
 
   :host([last-row]) {
-    ::slotted(.highlighted) {
+    ::slotted(.last-row-highlight) {
+      position: relative;
+      z-index: 0;
       border-radius: 0 0 10px 10px;
+      margin-block-end: -10px;
     }
   }
 }

packages/web-components/src/components/pricing-table/pricing-table.ts

@@ -169,6 +169,28 @@ class C4DPricingTable extends HostListenerMixin(
     this._getHeaderElements();
   };
 
+  protected _setLastRowHighlight(): void {
+    const rows = this.querySelectorAll(`${c4dPrefix}-pricing-table-row`);
+
+    rows.forEach((row, i) => {
+      const isLastRow = i === rows.length - 1;
+      row.toggleAttribute('last-row', isLastRow);
+
+      row.querySelectorAll('.last-row-highlight').forEach((cell) => {
+        cell.classList.remove('last-row-highlight');
+      });
+
+      if (isLastRow) {
+        const highlightedCells = row.querySelectorAll(
+          `${c4dPrefix}-pricing-table-cell.highlighted, ${c4dPrefix}-pricing-table-header-cell.highlighted`
+        );
+        highlightedCells.forEach((cell) => {
+          cell.classList.add('last-row-highlight');
+        });
+      }
+    });
+  }
+
   updated(): void {
     const { highlightColumn } = this;
 
@@ -187,6 +209,8 @@ class C4DPricingTable extends HostListenerMixin(
       `)
       );
     }
+
+    this._setLastRowHighlight();
   }
 
   connectedCallback() {
@@ -207,13 +231,6 @@ class C4DPricingTable extends HostListenerMixin(
   renderInner() {
     const { sentinelClass } = this.constructor as typeof C4DPricingTable;
 
-    //a selector for the last slotted highlighted row item becomes too complex. It's easier to just JS a 'last-row' class into it.
-    const rows = this.querySelectorAll(`${c4dPrefix}-pricing-table-row`);
-
-    rows.forEach((row, i) => {
-      row.toggleAttribute('last-row', i === rows.length - 1);
-    });
-
     this.setAPIPricingTableWidth();
 
     return html`