/* The wrapper section */
  #hinnariri {
    margin: 0 auto;
    text-align: center; /* center headings/subtitle */
    padding: 2rem 1rem;
  }
  
  /* Main heading */
  .priceList-template2-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
  }
  
  /* Subheading */
  .priceList-template2-subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
  }
  
  /* Category and table name headings */
  .priceList-template2-category-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    text-transform: uppercase;
  }
  .priceList-template2-table-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1.5rem 0 1rem;
    text-transform: uppercase;
  }
  
  /* The price table */
  .priceList-template2-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 1rem;
    /* Optionally center it */
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Table header */
  .priceList-template2-table thead th {
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem;
    border-bottom: 2px solid #ddd;
    color: var(--ast-global-color-0);
  }
  
  /* Column widths/alignment */
  .service-col {
    width: 40%;
    text-align: left;
  }
  .unit-col,
  .price-col,
  .desc-col {
    width: 20%;
    text-align: center;
  }
  
  /* Table body */
  .priceList-template2-table tbody tr {
    border-bottom: 1px solid #eee;
  }
  
  .priceList-template2-table tbody td {
    padding: 0.75rem;
  }
  
  /* If you want a highlighted row (like “Full Head” in the screenshot),
     you can add a 'highlight' key in your data and do: <tr class="highlight"> */
  .priceList-template2-table tr.highlight td {
    border: 2px solid #c2a67f; /* a gold-like color */
    font-weight: 600;
  }

 .priceList-template2-table tr:nth-child(even) {
    background-color: #f2f2f2;
  }