/******************************************************************

Stylesheet: Block Style
Block: Warehouse Sections

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
WRAPS
*********************/
/*********************
COLORS
*********************/
/*********************
FONT FAMILY
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
TRANSITIONS
*********************/
.sp-block-warehouse-sections {
  color: #1a1818;
}
.sp-block-warehouse-sections .sp-warehouse-sections__list {
  display: grid;
  gap: 0;
}
.sp-block-warehouse-sections .sp-warehouse-sections__header,
.sp-block-warehouse-sections .sp-warehouse-sections__row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) minmax(170px, 1.2fr) minmax(120px, 0.9fr) 481px;
  column-gap: 16px;
  align-items: center;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__header,
  .sp-block-warehouse-sections .sp-warehouse-sections__row {
    grid-template-columns: minmax(50px, 1fr) minmax(60px, 1fr) minmax(100px, 1.2fr);
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__header {
  padding: 0.6em 0;
  border-top: 2px solid #c49a6c;
  border-bottom: 2px solid #c49a6c;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__header {
    margin-bottom: 16px;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__heading {
  font-weight: 700;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__heading.heading--price {
    text-align: right;
  }
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__heading.heading--status {
    display: none;
  }
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__heading.heading--actions {
    display: none;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__body {
  display: grid;
  gap: 0;
}
.sp-block-warehouse-sections .sp-warehouse-sections__row {
  position: relative;
  padding: 0;
  min-height: 52px;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__row {
    border-bottom: 1px solid #c49a6c;
  }
  .sp-block-warehouse-sections .sp-warehouse-sections__row:last-of-type {
    border-bottom: none;
  }
}
@media (min-width: 1221px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__row {
    min-height: 57px;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__row::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  inset: 0.3em -1em;
  border-radius: 50px;
  background: rgba(196, 154, 108, 0.3);
  opacity: 0;
  transition: opacity 0.15s ease;
}
@media (min-width: 1221px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__row::after {
    width: var(--text-columns-width);
    inset: 0.4em -1.4em;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__row:hover::after, .sp-block-warehouse-sections .sp-warehouse-sections__row:focus-within::after {
  opacity: 1;
}
.sp-block-warehouse-sections .sp-warehouse-sections__cell {
  position: relative;
  z-index: 1;
  padding: 0.25em 0;
  min-width: 0;
}
.sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--unit {
  font-weight: 600;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--price {
    display: none;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--status {
  white-space: nowrap;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--status {
    display: none;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--actions {
  justify-self: end;
  width: 100%;
  text-align: right;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--actions {
    display: none;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--mobile-price {
  text-align: right;
  display: none;
}
@media (max-width: 1220px) {
  .sp-block-warehouse-sections .sp-warehouse-sections__cell.sp-warehouse-sections__cell--mobile-price {
    display: block;
  }
}
.sp-block-warehouse-sections .sp-warehouse-sections__actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  column-gap: 16px !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sp-block-warehouse-sections .sp-warehouse-sections__actions .sp-warehouse-sections__action {
  padding: 0.7em 2.2em;
}
.sp-block-warehouse-sections .sp-warehouse-sections__placeholder {
  margin: 0;
  padding: 32px;
  background: #f3efec;
  border: 1px dashed #c49a6c;
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: center;
}