fix: adjust LargeTable styling

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -6,26 +6,79 @@
 
 .thead {
   background-color: var(--Base-Surface-Secondary-Normal);
+}
+
+.iconRow {
+  background-color: var(--Base-Surface-Secondary-Normal);
+  border-bottom: none;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-.th,
-.td {
+.verticalTableHeader {
+  width: 242px;
+}
+
+.iconTh {
   border: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  border-bottom: none;
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
 }
 
-.th {
+.summaryTh {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-top: none;
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;
+  padding: 0 var(--Spacing-x3) var(--Spacing-x2);
 }
 
 .td {
+  border: 1px solid var(--Base-Border-Subtle);
   font-size: var(--typography-Footnote-Regular-fontSize);
+  /* padding: var(--Spacing-x3) var(--Spacing-x2); */
   text-align: center;
 }
 
 .tr:nth-child(odd) {
   background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
 }
+
+.benefitTh {
+  border: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: 400;
+}
+
+.details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.benefitHeader {
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
+  text-align: start;
+}
+
+.benefitDescription {
+  margin: 0;
+  padding-top: var(--Spacing-x1);
+  text-align: start;
+  padding-right: calc(24px + var(--Spacing-x1));
+}
+
+.chevron {
+  display: flex;
+  align-self: start;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary {
+  list-style: none;
+}