.input_sku {
  display: none !important;
}

/* Page Header */
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) {
  display               : grid;
  align-items           : center;
  margin-bottom         : 16px;
  column-gap            : 8px;
  grid-template-columns : 1fr auto;
  grid-template-areas   : 
    "title  button"
    "toCart toCart";
}
@media (min-width: 744px) {
  #page.site:has(.c-order-list) .c-page-header div:nth-child(2) {
    column-gap            : 8px;
    grid-template-columns : auto auto 1fr auto;
    grid-template-areas   : "title button . toCart";
  }
}
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) > h1 {
  grid-area : title;
  margin    : 0;
}
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) > input {
  grid-area : title;
}
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) > :nth-child(3) {
  grid-area        : button;
  opacity          : 0.6;
  background-color : var(--c-background);
}
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) > :nth-child(3)::before {
  background-image : url(/wp-content/plugins/custom/assets/edit-icon.svg);
}
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) > :nth-child(4) {
  grid-area : button;
}
#page.site:has(.c-order-list) .c-page-header div:nth-child(2) > :nth-child(5) {
  grid-area  : toCart;
  margin-top : 8px;
}
@media (min-width: 744px) {
  #page.site:has(.c-order-list) .c-page-header div:nth-child(2) > :nth-child(5) {
    margin: 0;
  }
}

/* Info Area */
.c-order-list > :nth-child(2) {
  display               : grid;
  position              : relative; /* for the menu*/
  align-items           : center;
  column-gap            : 8px;
  margin                : 0 0 24px 0;
  grid-template-rows    : auto 8px auto 8px repeat(4, auto);
  grid-template-columns : 
     auto              auto              1fr            auto           auto       auto;
  grid-template-areas: 
    "dFrom             dFrom             dFrom          dFrom          dFrom      dFrom      "
    ".                 .                 .              .              .          .          "
    "dTo               dTo               dTo            dTo            dTo        dTo        "
    ".                 .                 .              .              .          .          "
    "datel             datel             datel          datel          datel      .          "
    "date              date              date           date           date       button_menu"
    "err               err               err            err            err        err        "
    "p_productsLabel   p_productsCount   .              p_priceLabel   p_price    p_price    ";
}
@media (min-width: 744px) {
  .c-order-list > :nth-child(2) {
    column-gap            : 0;
    grid-template-rows    : repeat(2, auto);
    grid-template-columns : 
      123px    8px  123px  minmax(8px, 1fr)   auto              8px   auto              minmax(8px,16px)   auto    8px   123px   8px   auto           auto      8px   auto;
    grid-template-areas: 
      "dFrom   .     dTo   .                  p_productsLabel   .     p_productsCount   .                  datel   .     date    .     p_priceLabel   p_price   .     button_menu"
      "err     err   err   err                err               err   err               err                err     err   err     err   err            err       err   err        "
  }
}
.c-order-list .c-from-date {
  display : contents;
}
.c-order-list .c-from-date > label {
  display : none;
}
.c-order-list .c-from-date > div{
  grid-area: dFrom;
}
.c-order-list .c-from-date > p {
  grid-area : err;
}
.c-order-list .c-to-date {
  display : contents;
}
.c-order-list .c-to-date > label {
  display : none;
}
.c-order-list .c-to-date > div {
  grid-area: dTo;
}
.c-order-list .c-to-date > p {
  grid-area : err;
}
.c-order-list .input_sku {
  grid-area : input_sku;
}

#page.site .c-order-list .p_productsLabel {
  grid-area   : p_productsLabel;
  margin      : 0;
  align-self  : end;
  font-size   : 14px;
  line-height : 20px;
}
@media (min-width: 744px) {
  #page.site .c-order-list .p_productsLabel {
    margin     : 0 0 0 0;
    align-self  : center;
    font-weight : 500;
    font-family : var(--c-font-familiy-title);
    color       : var(--c-text-title);
  }
}
#page.site .c-order-list .p_productsCount {
  grid-area   : p_productsCount;
  margin      : 0;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-title);
  align-self  : end;
}
@media (min-width: 744px) {
  #page.site .c-order-list .p_productsCount {
    align-self  : center;
  }
}
.c-order-list .c-common-delivery-date {
  display : contents
}
.c-order-list .c-common-delivery-date > label {
  grid-area     : datel;
}
@media (min-width: 744px) {
  .c-order-list .c-common-delivery-date > label {
    font-size   : 14px;
    line-height : 20px;
    font-weight : 500;
    font-family : var(--c-font-familiy-title);
    color       : var(--c-text-title);
  }
}
.c-order-list .c-common-delivery-date > div {
  grid-area : date;
}
.c-order-list .c-common-delivery-date > p {
  grid-area : err;
}
#page.site .c-order-list .p_priceLabel {
  grid-area    : p_priceLabel;
  margin       : 0 8px 0 0;
  align-self   : end;
}
@media (min-width: 744px) {
  #page.site .c-order-list .p_priceLabel {
    display : none;
  }
}
@media (min-width: 1180px) {
  #page.site .c-order-list .p_priceLabel {
    display     : block;
    font-size   : 14px;
    line-height : 20px;
    font-weight : 500;
    font-family : var(--c-font-familiy-title);
    color       : var(--c-text-title);
    align-self  : center;
  }
}
#page.site .c-order-list .p_price {
  grid-area   : p_price;
  margin      : 0;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-title);
  align-self  : end;
}
@media (min-width: 744px) {
  #page.site .c-order-list .p_price {
    align-self : center;
  }
}

/* Menu */
.c-order-list .button_menu {
  grid-area        : button_menu;
  background-color : var(--c-background);
}
.c-order-list .button_menu::before {
  background-image : url(/wp-content/plugins/custom/assets/more-icon.svg)
}
.c-order-list .div_menu {
  position         : absolute;
  right            : 0;
  top              : 41px;
  z-index          : 1;
  background-color : white;
  border           : 1px solid var(--c-border);
  border-radius    : var(--c-radius);
}
.c-order-list .div_menu button {
  display          : block;
  background-color : white;
  width            : 100%;
  border-radius    : var(--c-radius);
  text-align       : left;
}
#page.site .div_menu button:focus {
  color : var(--c-text-title);
}
#page.site .div_menu > button:hover {
  background-color: var(--c-background);
}

/* Duplicate */
.c-order-list .fieldset_duplicate {
  display               : grid;
  align-items           : center;
  column-gap            : 8px;
  padding               : 8px;
  margin                : 24px 0;
  border                : 1px solid var(--c-border);
  border-radius         : var(--c-radius);
  grid-template-columns : 1fr;
  grid-template-areas   : 
    "label_duplicateName "
    "input_duplicateName "
    "label_customer      "
    "select_customer     "
    "button_duplicateSave"
}
@media (min-width: 744px) {
  .c-order-list .fieldset_duplicate {
    grid-template-columns : 1fr auto auto;
    grid-template-areas   : 
      "label_duplicateName label_customer  .                   "
      "input_duplicateName select_customer button_duplicateSave";
  }
}
.c-order-list .fieldset_duplicate .label_duplicateName {
  grid-area : label_duplicateName;
}
.c-order-list .fieldset_duplicate .input_duplicateName {
  grid-area : input_duplicateName;
}
.c-order-list .fieldset_duplicate .label_customer {
  grid-area  : label_customer;
  margin-top : 8px;
}
@media (min-width: 744px) {
  .c-order-list .fieldset_duplicate .label_customer {
    margin: 0;
  }
}
.c-order-list .fieldset_duplicate .select_customer {
  grid-area : select_customer;
}
.c-order-list .fieldset_duplicate .button_duplicateSave {
  grid-area  : button_duplicateSave;
  margin-top : 8px;
}
@media (min-width: 744px) {
  .c-order-list .fieldset_duplicate .button_duplicateSave {
    margin: 0;
  }
}

/* Add Products */
.c-order-list .fieldset_addProducts {
  display               : grid;
  grid-template-columns : 1fr;
  padding               : 8px;
  margin                : 24px 0;
  border                : 1px solid var(--c-border);
  border-radius         : var(--c-radius);
}
.c-order-list .fieldset_addProducts .button_addProducts {
  justify-self : right;
  margin-top   : 8px;
}

/* spinner */
.c-spinner-list {
  z-index              : 1000;
  position             : absolute;
  top                  : 0;
  bottom               : 0;
  left                 : 0;
  right                : 0;
  display              : grid;
  grid-template-columns: 1fr;
  grid-template-rows   : 1fr;
  align-items          : center;
  justify-items        : center;
  backdrop-filter      : blur(3px);
}
.c-spinner-list span {
  font-size      : 10px;
  width          : 1em;
  height         : 1em;
  border-radius  : 50%;
  position       : relative;
  text-indent    : -9999em;
  animation      : c-spinner-list 1.1s infinite ease;
  /* transform      : translateZ(0) scale(0.3); */
  transform      : translateZ(0);
  --color-10     : rgba(137, 133, 111, 1.0);
  --color-07     : rgba(137, 133, 111, 0.7);
  --color-05     : rgba(137, 133, 111, 0.5);
  --color-02     : rgba(137, 133, 111, 0.2);
}
@keyframes c-spinner-list {
  0%,
  100%  {box-shadow: 0em -2.6em 0em 0em var(--color-10), 1.8em -1.8em 0 0em var(--color-02), 2.5em 0em 0 0em var(--color-02), 1.75em 1.75em 0 0em var(--color-02), 0em 2.5em 0 0em var(--color-02), -1.8em 1.8em 0 0em var(--color-02), -2.6em 0em 0 0em var(--color-05), -1.8em -1.8em 0 0em var(--color-07);}
  12.5% {box-shadow: 0em -2.6em 0em 0em var(--color-07), 1.8em -1.8em 0 0em var(--color-10), 2.5em 0em 0 0em var(--color-02), 1.75em 1.75em 0 0em var(--color-02), 0em 2.5em 0 0em var(--color-02), -1.8em 1.8em 0 0em var(--color-02), -2.6em 0em 0 0em var(--color-02), -1.8em -1.8em 0 0em var(--color-05);}
  25%   {box-shadow: 0em -2.6em 0em 0em var(--color-05), 1.8em -1.8em 0 0em var(--color-07), 2.5em 0em 0 0em var(--color-10), 1.75em 1.75em 0 0em var(--color-02), 0em 2.5em 0 0em var(--color-02), -1.8em 1.8em 0 0em var(--color-02), -2.6em 0em 0 0em var(--color-02), -1.8em -1.8em 0 0em var(--color-02);}
  37.5% {box-shadow: 0em -2.6em 0em 0em var(--color-02), 1.8em -1.8em 0 0em var(--color-05), 2.5em 0em 0 0em var(--color-07), 1.75em 1.75em 0 0em var(--color-10), 0em 2.5em 0 0em var(--color-02), -1.8em 1.8em 0 0em var(--color-02), -2.6em 0em 0 0em var(--color-02), -1.8em -1.8em 0 0em var(--color-02);}
  50%   {box-shadow: 0em -2.6em 0em 0em var(--color-02), 1.8em -1.8em 0 0em var(--color-02), 2.5em 0em 0 0em var(--color-05), 1.75em 1.75em 0 0em var(--color-07), 0em 2.5em 0 0em var(--color-10), -1.8em 1.8em 0 0em var(--color-02), -2.6em 0em 0 0em var(--color-02), -1.8em -1.8em 0 0em var(--color-02);}
  62.5% {box-shadow: 0em -2.6em 0em 0em var(--color-02), 1.8em -1.8em 0 0em var(--color-02), 2.5em 0em 0 0em var(--color-02), 1.75em 1.75em 0 0em var(--color-05), 0em 2.5em 0 0em var(--color-07), -1.8em 1.8em 0 0em var(--color-10), -2.6em 0em 0 0em var(--color-02), -1.8em -1.8em 0 0em var(--color-02);}
  75%   {box-shadow: 0em -2.6em 0em 0em var(--color-02), 1.8em -1.8em 0 0em var(--color-02), 2.5em 0em 0 0em var(--color-02), 1.75em 1.75em 0 0em var(--color-02), 0em 2.5em 0 0em var(--color-05), -1.8em 1.8em 0 0em var(--color-07), -2.6em 0em 0 0em var(--color-10), -1.8em -1.8em 0 0em var(--color-02);}
  87.5% {box-shadow: 0em -2.6em 0em 0em var(--color-02), 1.8em -1.8em 0 0em var(--color-02), 2.5em 0em 0 0em var(--color-02), 1.75em 1.75em 0 0em var(--color-02), 0em 2.5em 0 0em var(--color-02), -1.8em 1.8em 0 0em var(--color-05), -2.6em 0em 0 0em var(--color-07), -1.8em -1.8em 0 0em var(--color-10);}
}