/* Grid */
#page.site .woocommerce-orders-table {
  display               : grid;
  grid-template-columns : auto 1fr;
}
#page.site .woocommerce-orders-table > thead {
  display : none;
}
#page.site .woocommerce-orders-table > thead > tr > th:nth-child(5) {
  display : none;
}
#page.site .woocommerce-orders-table > tbody {
  display: contents ;
}
#page.site .woocommerce-orders-table > tbody > tr {
  grid-column           : 1/3;
  display               : grid;
  grid-template-columns : subgrid;
  column-gap            : 16px;
  grid-template-areas :  
    "no      no" 
    "datel   date" 
    "statusl status" 
    "summl   summ" 
    "action  action"
}
#page.site .woocommerce-orders-table > tbody > tr::before {
  display : none;
}
#page.site .woocommerce-orders-table__cell {
  display : contents;
}
#page.site .woocommerce-orders-table__cell:nth-child(5)::before {
  display : none;
}
#page.site .woocommerce-orders-table__cell::after {
  display : none;
}

@media(min-width: 744px) {
  #page.site .woocommerce-orders-table {
    display               : grid;
    grid-template-columns : auto auto auto auto 130px;
    column-gap            : 16px;
  }
  #page.site .woocommerce-orders-table > thead {
    display: contents ;
  }
  #page.site .woocommerce-orders-table > thead > tr {
    display               : grid;
    grid-template-columns : subgrid;
    grid-column           : 1/6;
  }
  #page.site .woocommerce-orders-table > thead > tr > th {
    display : block;
  }
  #page.site .woocommerce-orders-table > tbody > tr {
    display               : grid;
    grid-template-columns : subgrid;
    grid-column           : 1/6;
    grid-template-areas :  
      "no date status summ action"
  }
  #page.site .woocommerce-orders-table > tbody > tr::before {
    display : none;
  }
  #page.site .woocommerce-orders-table__cell {
    display : contents;
  }
  #page.site .woocommerce-orders-table__cell::before {
    display : none;
  }
}
@media(min-width: 1180px) {
  #page.site .woocommerce-orders-table {
    display               : grid;
    grid-template-columns : 80px auto auto auto auto 130px;
    column-gap            : 16px;
  }
  #page.site .woocommerce-orders-table > thead > tr {
    display               : grid;
    grid-template-columns : subgrid;
    grid-column           : 2/7;
  }
  #page.site .woocommerce-orders-table > tbody > tr {
    display               : grid;
    grid-template-columns : subgrid;
    grid-column           : 1/7;
    grid-template-areas :  
      "img no date status summ action"
  }
  #page.site .woocommerce-orders-table > thead > tr > th {
    display : block;
  }
  #page.site .woocommerce-orders-table > tbody > tr::before {
    display   : block;
    grid-area : img;
  }
  #page.site .woocommerce-orders-table__cell {
    display : contents;
  }
  #page.site .woocommerce-orders-table__cell::before {
    display : none;
  }
}

#page.site .woocommerce-orders-table__cell:nth-child(1) > :nth-child(1) {
  grid-area: no;
}
#page.site .woocommerce-orders-table__cell:nth-child(2) > :nth-child(1) {
  grid-area: date;
}
#page.site .woocommerce-orders-table__cell:nth-child(2)::before {
  grid-area: datel;
}
#page.site .woocommerce-orders-table__cell:nth-child(3) > :nth-child(1) {
  grid-area: status;
}
#page.site .woocommerce-orders-table__cell:nth-child(3)::before {
  grid-area: statusl;
}
#page.site .woocommerce-orders-table__cell:nth-child(4) > :nth-child(1) {
  grid-area: summ;
}
#page.site .woocommerce-orders-table__cell:nth-child(4)::before {
  grid-area: summl;
}
#page.site .woocommerce-orders-table__cell:nth-child(5) > :nth-child(1) {
  grid-area: action;
}
#page.site .woocommerce-orders-table__cell:nth-child(5)::before {
  grid-area: actionl;
}
#page.site .woocommerce-orders-table__cell-order-actions a::after {
  display: none !important;
}


/* Layout */
#page.site .woocommerce-orders-table > thead > tr > th {
  padding : 0 0 16px 0;
}
#page.site .woocommerce-orders-table > thead > tr > th:nth-child(1) {
  padding-left : 16px;
}
#page.site .woocommerce-orders-table > tbody > tr {
  margin-bottom : 8px;
}
#page.site .woocommerce-orders-table > tbody > tr {
  padding: 16px
}
#page.site .woocommerce-orders-table__cell-order-actions a {
  margin-top: 16px;
}
@media(min-width: 744px) {
  #page.site .woocommerce-orders-table > tbody > tr {
    height  : 80px;
    padding: 0 16px 0 16px;
  }
  #page.site .woocommerce-orders-table__cell-order-actions a {
    margin-top: 0;
  }
}
@media(min-width: 1180px) {
  #page.site .woocommerce-orders-table > tbody > tr {
    padding: 0 16px 0 0;
  }
  #page.site .woocommerce-orders-table > tbody > tr::before {
    height  : 80px;
    width   : 80px;
    z-index : 1;
  }
}


/* Design */
#page.site .woocommerce-orders-table__cell::before,
#page.site .woocommerce-orders-table td,
#page.site .woocommerce-orders-table th,
#page.site .woocommerce-orders-table time {
  font-size   : 12px;
  line-height : 18px ;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
}
#page.site .woocommerce-orders-table > tbody > tr {
  align-items      : center;
  border           : 1px solid var(--c-border);
  border-radius    : var(--c-radius);
  background-color : white;
}
#page.site .woocommerce-orders-table > tbody > tr::before {
  content       : url(/wp-content/plugins/custom/assets/list-image.svg);
  border-radius : 5px 0 0 5px;
}
#page.site .woocommerce-orders-table__cell {
  background-color : white;
  text-align       : left;
}
#page.site .woocommerce-orders-table__cell a {
  justify-items : center;
}