/* Used in Cart and Order List */
.c-item-list .c-item {
  position         : relative;
  margin-bottom    : 12px;
  padding          : 12px;
  display          : grid;
  column-gap       : 12px;
  align-items      : center;
  justify-items    : left;
  border           : 1px solid var(--c-border);
  border-radius    : var(--c-radius);
  background-color : white;
}
@media (min-width: 744px) {
  .c-item-list .c-item {
    padding     : 24px;
    align-items : start;
  }
}

.c-item-list .c-item:not(.c-open) .c--delivery-date-info,
.c-item-list .c-item:not(.c-open) .c--selling-unit,
.c-item-list .c-item:not(.c-open) .c--secondary-packaging,
.c-item-list .c-item:not(.c-open) .c--comment {
  display: none !important;
}

.c-item-list .c-item {
  grid-template-columns : auto  1fr;
  grid-template-areas   :
    "icons    offer  "
    "title    title  "
    "meta     meta   "
    "gDate    .      "
    "lDate    iDate  "
    ".        eDate  "
    "gAmount  .      "
    "lAmount  iAmount"
    ".        eAmount"
    "gPiece   .      "
    "lPiece   iPiece "
    ".        ePiece "
    "gSummary .      "
    "summary  summary"
    "mobile   mobile "
    "open     open   "
  /*
    "gPack    .      "
    "lPack    lPack  "
    "iPack    iPack  "
  */
    "gUnit    .      " 
    "lUnit    lUnit  "
    "iUnit    iUnit  "
    "gComm    .      "
    "lComm    lComm  "
    "iComm    iComm  "
    "gInfo    .      "
    "info     info   ";
}

@media (min-width: 744px) {
  .c-item-list .c-item {
    grid-template-columns : 58px 155px 124px 124px 124px 1fr;
    grid-template-areas   :
      "open     image   title   title   offer   offer  "
      "open     image   meta    meta    meta    meta   " 
      "open     image   .       .       .       .      "
      "open     image   lAmount lPiece  lDate   .      "
      "open     image   iAmount iPiece  iDate   .      "
      ".        .       eAmount eAmount eAmount eAmount"
      ".        .       ePiece  ePiece  ePiece  ePiece "
      ".        .       eDate   eDate   eDate   eDate  "
      "gSummary .       .       .       .       .      "
      ".        .       summary summary summary summary"
    /*
      "gPack    .       .       .       .       .      "
      "lPack    lPack   lPack   lPack   lPack   lPack  "
      "iPack    iPack   iPack   iPack   iPack   iPack  "
    */
      "gUnit    .       .       .       .       .      "
      "lUnit    lUnit   lUnit   lUnit   lUnit   lUnit  "
      "iUnit    iUnit   iUnit   iUnit   iUnit   iUnit  "
      "gComm    .       .       .       .       .      "
      "lComm    lComm   lComm   lComm   lComm   lComm  "
      "iComm    iComm   iComm   iComm   iComm   iComm  "
      "gInfo    .       .       .       .       .      "
      "info     info    info    info    info    info   "
  }
}

@media (min-width: 744px) {
  .woocommerce-cart-form .c-item-list .c-item {
    grid-template-columns : 58px 155px 124px 124px 124px 1fr;
    grid-template-areas   :
      "open     image   title   title    offer   offer  "
      "open     image   meta    meta     meta    meta   " 
      "open     image   .       .        .       .      "
      "open     image   lDate   lAmount  lPiece  .      "
      "open     image   iDate   iAmount  iPiece  .      "
      ".        .       eAmount eAmount  eAmount eAmount"
      ".        .       ePiece  ePiece   ePiece  ePiece "
      ".        .       eDate   eDate    eDate   eDate  "
      "gSummary .       .       .        .       .      "
      ".        .       summary summary  summary summary"
    /*
      "gPack    .       .       .        .       .      "
      "lPack    lPack   lPack   lPack    lPack   lPack  "
      "iPack    iPack   iPack   iPack    iPack   iPack  "
    */
      "gUnit    .       .       .        .       .      "
      "lUnit    lUnit   lUnit   lUnit    lUnit   lUnit  "
      "iUnit    iUnit   iUnit   iUnit    iUnit   iUnit  "
      "gComm    .       .       .        .       .      "
      "lComm    lComm   lComm   lComm    lComm   lComm  "
      "iComm    iComm   iComm   iComm    iComm   iComm  "
      "gInfo    .       .       .        .       .      "
      "info     info    info    info     info    info   "
  }
}


@media (min-width: 1200px) {
  .c-item-list .c-item {
    grid-template-columns : 58px 155px 124px 124px 124px 1fr;
    grid-template-areas   :
      "open    image   title   title   title   offer  "
      "open    image   meta    meta    meta    piece  "
      "open    image   .       .       .       amount "
      "open    image   lAmount lPiece  lDate   price  "
      "open    image   iAmount iPiece  iDate   summ   "
      ".       .       eAmount eAmount eAmount eAmount"
      ".       .       ePiece  ePiece  ePiece  ePiece "
      ".       .       eDate   eDate   eDate   eDate  "
      "gPack   .       .       .       .       .      "

      "lUnit   lUnit   lUnit   lUnit   .       .      "
      "iUnit   iUnit   iUnit   iUnit   info    info   "
      "gComm   .       .       .       info    info   "
      "lComm   lComm   lComm   lComm   info    info   "
      "iComm   iComm   iComm   iComm   info    info   ";

    /*
      "lPack   lPack   lPack   lPack   lUnit   lUnit  "
      "iPack   iPack   iPack   iPack   iUnit   iUnit  "
      "gComm   .       .       .       .       .      "
      "lComm   lComm   lComm   lComm   .       .      "
      "iComm   iComm   iComm   iComm   info    info   "; 
    */
  }
  .c-item-list .c-item:has(.c--selling-unit.c-hidden) {
    grid-template-areas:
      "open    image   title   title   title   offer  "
      "open    image   meta    meta    meta    piece  "
      "open    image   .       .       .       amount "
      "open    image   lAmount lPiece  lDate   price  "
      "open    image   iAmount iPiece  iDate   summ   "
      ".       .       eAmount eAmount eAmount eAmount"
      ".       .       ePiece  ePiece  ePiece  ePiece "
      ".       .       eDate   eDate   eDate   eDate  "
      "gPack   .       .       .       .       .      "

      "lComm   lComm   lComm   lComm   .       .      "
      "iComm   iComm   iComm   iComm   info    info   ";

    /*
      "lPack   lPack   lPack   lPack   .       .      "
      "iPack   iPack   iPack   iPack   info    info   "
      "gComm   .       .       .       info    info   "
      "lComm   lComm   lComm   lComm   info    info   "
      "iComm   iComm   iComm   iComm   info    info   ";
    */
  }
}

@media (min-width: 1200px) {
  .woocommerce-cart-form .c-item-list .c-item {
    grid-template-columns : 58px 155px 124px 124px 124px 1fr;
    grid-template-areas   :
      "open    image   title   title    title    offer  "
      "open    image   meta    meta     meta     piece  "
      "open    image   .       .        .        amount "
      "open    image   lDate   lAmount  lPiece   price  "
      "open    image   iDate   iAmount  iPiece   summ   "
      ".       .       eAmount eAmount  eAmount  eAmount"
      ".       .       ePiece  ePiece   ePiece   ePiece "
      ".       .       eDate   eDate    eDate    eDate  "
      "gPack   .       .       .        .        .      "

      "lUnit   lUnit   lUnit   lUnit    .        .      "
      "iUnit   iUnit   iUnit   iUnit    info     info   "
      "gComm   .       .       .        info     info   "
      "lComm   lComm   lComm   lComm    info     info   "
      "iComm   iComm   iComm   iComm    info     info   ";

    /*
      "lPack   lPack   lPack   lPack    lUnit    lUnit  "
      "iPack   iPack   iPack   iPack    iUnit    iUnit  "
      "gComm   .       .       .        .        .      "
      "lComm   lComm   lComm   lComm    .        .      "
      "iComm   iComm   iComm   iComm    info     info   ";
    */
  }
  .woocommerce-cart-form .c-item-list .c-item:has(.c--selling-unit.c-hidden) {
    grid-template-areas:
      "open    image   title   title    title   offer  "
      "open    image   meta    meta     meta    piece  "
      "open    image   .       .        .       amount "
      "open    image   lDate   lAmount  lPiece  price  "
      "open    image   iDate   iAmount  iPiece  summ   "
      ".       .       eAmount eAmount  eAmount eAmount"
      ".       .       ePiece  ePiece   ePiece  ePiece "
      ".       .       eDate   eDate    eDate   eDate  "
      "gPack   .       .       .        .       .      "

      "lUnit   lUnit   lUnit   lUnit    .       .      "
      "iUnit   iUnit   iUnit   iUnit    info    info   "
      "gComm   .       .       .        info    info   "
      "lComm   lComm   lComm   lComm    info    info   "
      "iComm   iComm   iComm   iComm    info    info   ";

    /*
      "lPack   lPack   lPack   lPack    .       .      "
      "iPack   iPack   iPack   iPack    info    info   "
      "gComm   .       .       .        info    info   "
      "lComm   lComm   lComm   lComm    info    info   "
      "iComm   iComm   iComm   iComm    info    info   ";
    */
  }
}


/* Icons */
.c-item-list .c-item::before {
  content   : '';
  grid-area : icons;
  height    : 20px;
}
@media (min-width: 744px) {
  .c-item-list .c-item::before {
    display: none;
  }
}

/* Product name */
.c-item-list .c-item > a:nth-child(1) {
  grid-area       : title;
  text-decoration : none;
  height          : 20px;
}
.c-item-list .c-item > a:nth-child(1):focus {
  outline         : none;
  text-decoration : underline;
}

/* Meta */
.c-item-list .c-item > div:nth-child(2) {
  grid-area : meta;
}

/* List name */
.c-item-list .c-item > div:nth-child(3) {
  display: none;
}
.woocommerce-cart-form .c-item-list .c-item > div:nth-child(3) {
  position              : absolute;
  display               : grid;
  grid-template-columns : auto auto;
  align-items           : center;
  top                   : -1px;
  left                  : -1px;
  background-color      : var(--c-border);
  padding               : 6px 8px;
  border-radius         : var(--c-radius) 0 var(--c-radius) 0;
  line-height           : 13px;
}
.woocommerce-cart-form .c-item-list .c-item > div:nth-child(3):before {
  content             : '';
  display             : inline-block;
  height              : 18px;
  width               : 18px;
  background-image    : url(/wp-content/plugins/custom/assets/list-icon.svg);
  background-repeat   : no-repeat;
  background-size     : 12px;
  background-position : center center;
}

/* image */
.c-item-list .c-item > img:nth-child(4) {
  display : none;
}
@media(min-width: 744px) {
  .c-item-list .c-item > img:nth-child(4) {
    display        : block;
    grid-area      : image;
    justify-self   : left;
    margin         : 0;
    height         : 116px;
    width          : auto;
    border-radius  : var(--c-radius);
  }
}

/* select item */
.c-item-list .c-item > input:nth-child(5) {
  position : absolute;
  top      : 12px;
  left     : 12px;
}
.woocommerce-cart-form .c-item-list .c-item > input:nth-child(5) {
  display: none;
}
@media(min-width: 744px) {
  .c-item-list .c-item > input:nth-child(5) {
    top  : 24px;
    left : 24px;
  }
}

/* delete item */
.c-item-list .c-item > .button_delete {
  position            : absolute;
  top                 : 9px;
  right               : 7px;
  height              : 24px;
  width               : 24px;
  padding             : 0;
  border-radius       : var(--c-radius);
  background-color    : white;
  background-image    : url(/wp-content/plugins/custom/assets/trash-icon.svg);
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
} 
.c-item-list .c-item:has(.span_summaryOffer:not(.c-hidden)) > .button_delete{
  top : 24px;
}

@media(min-width: 744px) {
  .c-item-list .c-item > .button_delete {
    top   : 24px;
    right : 24px;
  }
}

/* open item */
.c-item-list .c-item > button:nth-child(7) {
  grid-area           : open;
  align-self          : center;
  justify-self        : center;
  margin-top          : 12px;
  width               : 32px;
  height              : 20px;
  border-radius       : 6px;
  border              : none;
  padding             : 0px;
  background-color    : white;
  background-image    : url(/wp-content/plugins/custom/assets/chevron-down-icon.svg);
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
}
.c-item-list .c-item.c-open > button:nth-child(7) {
  background-image    : url(/wp-content/plugins/custom/assets/chevron-up-icon.svg);
}
@media(min-width: 744px) {
  .c-item-list .c-item > button:nth-child(7) {
    justify-self  : left;
    margin-top    : 0;
    border        : 1px solid var(--c-button);
    border-radius : 50% ;
    width         : 32px;
    height        : 32px;
  }
}

/* Summary */
.c-item-list .c-item > .fieldset_summary {
  display : contents;
}
.c-item-list .c-item > .fieldset_summary::before {
  content   : '';
  grid-area : gSummary;
  height    : 12px;
}
.c-item-list .c-item > .fieldset_summary .span_summaryOffer {
  position         : absolute;
  top              : 0;
  /* grid-area     : offer; */
  justify-self     : right;
  margin-bottom    : 0;
  background-color : var(--c-error);
  color            : white;
  border           : none;
  font-size        : 12px;
  line-height      : 18px;
  font-weight      : 400;
  font-family      : var(--c-font-familiy-text);
  padding          : 1px 6px;
  border-radius    : 0 4px 0 4px;
  text-transform   : none;
}
.c-item-list .c-item .fieldset_summary .span_summaryOfferName {
  margin-right: 8px;
}
.c-item-list .c-item > .fieldset_summary > .span_summaryPiece {
  display: none;
}
.c-item-list .c-item > .fieldset_summary > .span_summaryAmount {
  display: none;
}
.c-item-list .c-item > .fieldset_summary > .span_summaryPrice {
  display: none;
}
.c-item-list .c-item > .fieldset_summary > .span_summarySumm {
  grid-area    : mobile;
  justify-self : right;
  font-size    : 14px;
  line-height  : 20px;
  font-weight  : 500;
  font-family  : var(--c-font-familiy-title);
  color        : var(--c-text-title);
  margin-left  : 1em;
}
body:not(.logged-in) .c-item-list .c-item > .fieldset_summary > .span_summarySumm {
  display : none;
}
.c-item-list .c-item > .fieldset_summary > .span_summaryAll {
  display : none;
}
.c-item-list .c-item > .fieldset_summary > .span_summaryAllShort {
  display : none;
}
.c-item-list .c-item > .fieldset_summary > .span_summaryAllMobile {
  grid-area    : summary;
  justify-self : right;
}
body:not(.logged-in) .c-item-list .c-item > .fieldset_summary > .span_summaryAllMobile {
  display : none;
}
.c-item-list .c-item > .fieldset_summary del {
  opacity : 0.5;
}
@media (min-width: 744px) {
  .c-item-list .c-item > .fieldset_summary > .span_summaryAll {
    display      : block;
    grid-area    : summary;
    justify-self : right;
  }
  body:not(.logged-in) .c-item-list .c-item > .fieldset_summary > .span_summaryAll {
    display      : none;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summaryAll span {
    font-size    : 14px;
    line-height  : 20px;
    font-weight  : 500;
    font-family  : var(--c-font-familiy-title);
    color        : var(--c-text-title);
    margin-left  : 1em;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summarySumm {
  display: none;
}
  .c-item-list .c-item > .fieldset_summary .span_summaryAllMobile {
    display: none;
  }
}

@media (min-width: 1200px) {
  .c-item-list .c-item > .fieldset_summary::before {
    display : none;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summaryPiece {
    display      : block;
    grid-area    : piece;
    justify-self : right;
    position     : relative;
    top          : 8px;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summaryAmount {
    display      : block;
    grid-area    : amount;
    justify-self : right;
    position     : relative;
    top          : 8px;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summaryPrice {
    display      : block;
    grid-area    : price;
    justify-self : right;
    position     : relative;
    top          : 8px;
  }
  body:not(.logged-in) .c-item-list .c-item > .fieldset_summary > .span_summaryPrice {
    display : none;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summarySumm {
    display      : block;
    grid-area    : summ;
    justify-self : right;
    align-self   : center;
    font-size    : 14px;
    line-height  : 20px;
    font-weight  : 500;
    font-family  : var(--c-font-familiy-title);
    color        : var(--c-text-title);
  }
  body:not(.logged-in) .c-item-list .c-item > .fieldset_summary > .span_summarySumm {
    display : none;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summaryAll {
    display : none;
  }
  .c-item-list .c-item > .fieldset_summary > .span_summaryAllShort {
    display : none;
  }

}

/* Amount */
.c-item-list .c-item > .c--amount {
  display : contents;
}
.c-item-list .c-item > .c--amount > label {
  grid-area : lAmount;
}
.c-item-list .c-item > .c--amount > div:nth-child(2) {
  grid-area : iAmount;
  justify-self: stretch;
}
.c-item-list .c-item > .c--amount > div:nth-child(3) {
  grid-area : eAmount;
}
.c-item-list .c-item > .c--amount::before {
  content   : '';
  grid-area : gAmount;
  height    : 12px;
}
@media(min-width: 744px) {
  .c-item-list .c-item > .c--amount::before {
    display: none;
  }
}

/* Amount Select */
.c-item-list .c-item > .c--amount-select {
  display : contents;
}
.c-item-list .c-item > .c--amount-select > label {
  grid-area : lAmount;
}
.c-item-list .c-item > .c--amount-select > select {
  grid-area : iAmount;
}
.c-item-list .c-item > .c--amount-select > div:nth-child(3) {
  grid-area : eAmount;
}
.c-item-list .c-item > .c--amount-select::before {
  content   : '';
  grid-area : gAmount;
  height    : 12px;
}
@media(min-width: 744px) {
  .c-item-list .c-item > .c--amount-select::before {
    display: none;
  }
}

/* Weight per piece */
.c-item-list .c-item > .c--weight-per-piece {
  display : contents;
}
.c-item-list .c-item > .c--weight-per-piece > label {
  grid-area : lPiece;
}
.c-item-list .c-item > .c--weight-per-piece > div:nth-child(2) {
  grid-area : iPiece;
  justify-self: stretch;
}
.c-item-list .c-item > .c--weight-per-piece > div:nth-child(3) {
  grid-area : ePiece;
}
.c-item-list .c-item > .c--weight-per-piece::before {
  content   : '';
  grid-area : gPiece;
  height    : 12px;
}
@media (min-width: 744px) {
  .c-item-list .c-item > .c--weight-per-piece::before {
    display: none;
  }
}

/* Delivery Date */
.c-item-list .c-item > .c-delivery-date {
  display : none;
}
.woocommerce-cart-form .c-item-list .c-item > .c-delivery-date {
  display : contents;
}
.c-item-list .c-item > .c-delivery-date > label {
  grid-area : lDate;
}
.c-item-list .c-item > .c-delivery-date > div {
  grid-area    : iDate;
  justify-self : stretch;
}
.c-item-list .c-item > .c-delivery-date > p {
  grid-area : eDate;
}
.c-item-list .c-item > .c-delivery-date:before {
  content   : '';
  grid-area : gDate;
  height    : 12px;
}
@media(min-width: 744px) {
  .c-item-list .c-item > .c-delivery-date::before {
    display : none;
  }
}

/* Secondary Packaging */
.c-item-list .c-item > .c--secondary-packaging {
  display : contents;
}
.c-item-list .c-item > .c--secondary-packaging > label {
  grid-area: lPack;
  display  : none;
}
.c-item-list .c-item > .c--secondary-packaging > select {
  grid-area: iPack;
  display  : none; 
}
.c-item-list .c-item > .c--secondary-packaging::before {
  display : none;
}
@media(min-width: 1200px) {
  .c-item-list .c-item > .c--secondary-packaging::before {
    content   : '';
    grid-area : gPack;
    height    : 12px;
}
}

/* Selling Unit */
.c-item-list .c-item > .c--selling-unit {
  display : contents;
}
.c-item-list .c-item > .c--selling-unit > label {
  grid-area: lUnit;
}
.c-item-list .c-item > .c--selling-unit > select {
  grid-area: iUnit;
}
.c-item-list .c-item > .c--selling-unit::before {
  content: '';
  grid-area: gUnit;
  height   : 12px;
}
@media(min-width: 1200px) {
  .c-item-list .c-item > .c--selling-unit::before {
    display: none;
  }
}

/* Comment */
.c-item-list .c-item > .c--comment {
  display : contents;
}
.c-item-list .c-item > .c--comment > label {
  grid-area: lComm;
}
.c-item-list .c-item > .c--comment > textarea {
  grid-area: iComm;
}
.c-item-list .c-item > .c--comment::before {
  content   : '';
  grid-area : gComm;
  height    : 12px;
}

/* Delivery Date Info */
.c-item-list .c-item > .c--delivery-date-info {
  grid-area  : info;
  width      : 100%;
  margin-top : 12px;
}
.woocommerce-cart-form .c-item-list .c-item > .c--delivery-date-info > div:nth-child(1) {
  display : none;
}
@media(min-width: 1200px) {
  .c-item-list .c-item > .c--delivery-date-info {
    margin-top: 0;
  }
}