/* Instant Ship section of the product page (front/view/block/instant-ship.twig).

   One table, one more option: when the product has a configurator the panel drops
   its bottom corners and padding, and the configurator hero directly under it is
   styled as the table's last row (configurator-v2.css), built to order after the
   items that are on the shelf.

   Rows stay quiet: the item title in heading weight, its ordering code in plain
   monospace under it, one button per row. One headline promise. */

#instant-ship .instant-ship {
  background: var(--cz-tertiary-bg);
  border-radius: 1.25rem;               /* matches .cfg-hero */
  padding: 2.5rem 3rem 2.75rem;
}
#instant-ship .instant-ship.is-joined {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0;
}

/* --- heading: logo, the promise as headline, one sentence of context --- */
#instant-ship .instant-ship-logo {
  height: 2rem;
  width: auto;
  display: block;
  margin-bottom: 1.125rem;
}
#instant-ship .instant-ship-title {
  font-size: 1.75rem;                   /* between h3 and h2: the promise is the section */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cz-heading-color);
  margin: 0 0 .625rem;
}
#instant-ship .instant-ship-intro {
  font-size: .9375rem;
  color: var(--cz-secondary-color);
  margin: 0;
}

/* --- the product table --- */
#instant-ship .instant-ship-table-wrap {
  margin-top: 1.75rem;
}
#instant-ship .instant-ship-table {
  --cz-table-bg: transparent;
  --cz-table-border-color: var(--cz-border-color);
}
#instant-ship .instant-ship-table thead th {
  font-size: .75rem;
  font-weight: 600;
  color: var(--cz-secondary-color);
  border-bottom: 2px solid var(--cz-border-color);
  padding: 0 .75rem .625rem;
  white-space: nowrap;
}
#instant-ship .instant-ship-table thead th:first-child,
#instant-ship .instant-ship-table tbody td:first-child {
  padding-left: 0;
}
#instant-ship .instant-ship-table thead th:last-child,
#instant-ship .instant-ship-table tbody td:last-child {
  padding-right: 0;
}
#instant-ship .instant-ship-table tbody td {
  padding: 1.125rem .75rem;
  border-bottom: 1px solid var(--cz-border-color);
}
#instant-ship .instant-ship-table tbody tr:last-child td {
  border-bottom: 0;
}
#instant-ship .instant-ship-col-stock  { width: 12rem; }
#instant-ship .instant-ship-col-price  { width: 8.5rem; }
#instant-ship .instant-ship-col-action { width: 9rem; }

/* fixture cell: photo on a light tile, code plate, attributes */
#instant-ship .instant-ship-fixture {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
#instant-ship .instant-ship-thumb {
  flex-shrink: 0;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: .75rem;
  padding: .375rem;
  background: var(--cz-body-bg);
  border: 1px solid var(--cz-border-color);
}
#instant-ship .instant-ship-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
#instant-ship .instant-ship-fixture-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* the item title first: the SAP item name split on its pipes into attributes,
   set in heading weight because it carries the product facts */
#instant-ship .instant-ship-attrs {
  display: block;                       /* the theme makes every ul a flex column */
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cz-heading-color);
}
#instant-ship .instant-ship-attrs li {
  display: inline;
  white-space: nowrap;                  /* "120-277V" stays whole; the list wraps between items */
}
#instant-ship .instant-ship-attrs li:only-child {
  white-space: normal;                  /* a title with no pipes must still wrap on phones */
}
#instant-ship .instant-ship-attrs li + li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: .8em;
  /*background: var(--cz-border-color);*/
  background: var(--cz-primary);
  margin: 0 .625rem;
  vertical-align: -.08em;
}

/* the ordering code under it: plain monospace, muted, no box so it never reads as a button */
#instant-ship .instant-ship-code {
  margin-top: .375rem;
  font-family: var(--cz-font-monospace, ui-monospace, Menlo, monospace);
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--cz-secondary-color);
  word-break: break-all;
}

/* admin note under the code: a step smaller than the code, never louder than it */
#instant-ship .instant-ship-extra {
  margin: .25rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--cz-secondary-color);
  max-width: 60ch;
}

/* stock: a dot and plain words */
#instant-ship .instant-ship-stock {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
#instant-ship .instant-ship-stock::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
#instant-ship .instant-ship-stock.is-in      { color: var(--cz-success); }
#instant-ship .instant-ship-stock.is-out     { color: var(--cz-danger); }
#instant-ship .instant-ship-stock.is-unknown { color: var(--cz-secondary-color); font-weight: 500; }

/* incoming receipts under the stock label: hollow dot in the same column as the
   stock dot, quantity emphasised, date muted */
#instant-ship .instant-ship-incoming {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  margin-top: .375rem;
  font-size: .75rem;
  color: var(--cz-secondary-color);
  white-space: nowrap;
}
#instant-ship .instant-ship-incoming li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
#instant-ship .instant-ship-incoming li::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
  flex-shrink: 0;
}
#instant-ship .instant-ship-incoming strong {
  font-weight: 600;
  color: var(--cz-body-color);
}

#instant-ship .instant-ship-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cz-heading-color);
  white-space: nowrap;
}
#instant-ship .instant-ship-price.is-unknown {
  font-size: .875rem;
  font-weight: 500;
  color: var(--cz-secondary-color);
}

/* signed out: one cell spans stock + price with a quiet text link, so the row keeps
   a single button */
#instant-ship .instant-ship-gated-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--cz-primary);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
#instant-ship .instant-ship-gated-short {
  display: none;
}
#instant-ship .instant-ship-gated-link span {
  text-decoration: underline;
  text-decoration-color: rgba(var(--cz-primary-rgb), .35);
  text-underline-offset: .2em;
}
#instant-ship .instant-ship-gated-link:hover span,
#instant-ship .instant-ship-gated-link:focus-visible span {
  text-decoration-color: currentColor;
}

/* --- footer: one line --- */
#instant-ship .instant-ship-foot {
  font-size: .8125rem;
  color: var(--cz-secondary-color);
  margin: 1.25rem 0 0;
}
#instant-ship .instant-ship-foot a {
  font-weight: 600;
  text-decoration: none;
}

/* --- phones: each row becomes a stacked card ---
   photo + code on top, stock and price side by side, full-width button */
@media (max-width: 767.98px) {
  #instant-ship .instant-ship {
    padding: 1.5rem 1.25rem 1.75rem;
  }
  #instant-ship .instant-ship.is-joined {
    padding-bottom: 0;
  }
  #instant-ship .instant-ship-title {
    font-size: 1.375rem;
  }
  #instant-ship .instant-ship-table-wrap {
    margin-top: 1.25rem;
  }

  #instant-ship .instant-ship-table,
  #instant-ship .instant-ship-table tbody,
  #instant-ship .instant-ship-table tr,
  #instant-ship .instant-ship-table td {
    display: block;
    width: auto;
  }
  #instant-ship .instant-ship-table thead {
    display: none;
  }
  #instant-ship .instant-ship-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cz-border-color);
  }
  #instant-ship .instant-ship-table tbody tr:first-child {
    padding-top: 0;
  }
  #instant-ship .instant-ship-table tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  #instant-ship .instant-ship-table tbody td {
    padding: 0 !important;
    border: 0;
  }
  #instant-ship .instant-ship-col-product {
    flex: 1 1 100%;
  }
  #instant-ship .instant-ship-fixture {
    align-items: flex-start;
  }
  #instant-ship .instant-ship-thumb {
    width: 4rem;
    height: 4rem;
  }
  #instant-ship .instant-ship-attrs {
    font-size: .9375rem;
  }
  #instant-ship .instant-ship-code {
    font-size: .75rem;
  }
  #instant-ship .instant-ship-extra {
    font-size: .6875rem;
  }
  /* stock and price sit side by side under the fixture, each with its label */
  #instant-ship .instant-ship-col-stock,
  #instant-ship .instant-ship-col-price {
    flex: 1 1 40%;
  }
  #instant-ship .instant-ship-col-stock::before,
  #instant-ship .instant-ship-col-price::before {
    content: attr(data-label);
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--cz-secondary-color);
    margin-bottom: .25rem;
  }
  #instant-ship .instant-ship-col-action {
    flex: 1 1 100%;
    text-align: left !important;
  }
  #instant-ship .instant-ship-col-action .btn {
    width: 100%;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  /* signed out: the sign-in link becomes an outline pill button, the same size as
     the quote button, and the two share one row at equal widths */
  #instant-ship .instant-ship-col-gated,
  #instant-ship .instant-ship-col-gated + .instant-ship-col-action {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
  }
  #instant-ship .instant-ship-gated-link {
    width: 100%;
    justify-content: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border: 1px solid var(--cz-primary);
    border-radius: 2rem;
    font-size: .75rem;               /* .btn-sm */
    line-height: 1.5;
    white-space: nowrap;
  }
  #instant-ship .instant-ship-gated-link:hover,
  #instant-ship .instant-ship-gated-link:focus-visible {
    background: var(--cz-primary);
    color: #fff;
  }
  #instant-ship .instant-ship-gated-link span {
    text-decoration: none;
  }
  #instant-ship .instant-ship-gated-full { display: none; }
  #instant-ship .instant-ship-gated-short { display: inline; }
  #instant-ship .instant-ship-col-gated + .instant-ship-col-action .btn {
    width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
  }

}