.block-promo {
  font-size: 0.875rem;
  margin-top: 1rem;
}

.block-promo .promo-code .alert-danger {
  position   : relative;
  margin-top : 1.25rem;
  background : hsl(0, 84%, 97%);
  border     : 1px solid hsl(0, 84%, 90%);
  color      : hsl(0, 84%, 50%);
  display    : none;
  padding    : 0.75rem;
  border-radius: var(--radius-md);
}

.block-promo .promo-code .alert-danger:after {
  bottom              : 100%;
  left                : 10%;
  border              : solid transparent;
  content             : " ";
  height              : 0;
  width               : 0;
  position            : absolute;
  pointer-events      : none;
  border-bottom-color : hsl(0, 84%, 90%);
  border-width        : 10px;
  margin-left         : -10px
}

.block-promo .promo-code form {
  text-align : left;
  display    : flex;
  gap        : 0.5rem;
}

.block-promo .promo-input {
  position: relative;
  background: var(--color-white-default);
  color: var(--color-black-default);
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  width: 100%;
  height: 2.5rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.block-promo .promo-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-20);
}

.block-promo .promo-input + button {
  position: relative;
  right: auto;
  font-size: 0.875rem;
  text-transform : capitalize;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  background: transparent;
  border: 2px solid var(--color-black-default);
  color: var(--color-black-default);
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.block-promo .promo-input + button:hover {
  background: var(--color-black-default);
  color: var(--color-white-default);
}

.block-promo .promo-input::placeholder {
  font-size: 0.875rem;
  color: var(--color-grey-font-default);
}

.block-promo .promo-name {
  background: var(--color-primary-90);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-primary-30);
}

.block-promo .cart-summary-line .label,
.block-promo .promo-name {
  font-weight : 600;
  color       : var(--color-primary);
  margin-bottom: 0.5rem;
  display     : flex;
  align-items : center;
  justify-content: space-between;
}

.block-promo .cart-summary-line .label a,
.block-promo .promo-name a {
  display     : inline-block;
  font-weight : 400;
  color       : var(--color-grey-font-default);
  font-size   : 0.8125rem;
  transition: all 0.2s ease;
}

.block-promo .cart-summary-line .label a:hover,
.block-promo .promo-name a:hover {
  color: var(--color-primary);
}

.block-promo .cart-summary-line .label {
  display: inline-block;
  margin: 3px 0 0;
}

.block-promo .promo-code-button {
  padding-left  : 0;
  margin-bottom : 1rem;
  display       : inline-block
}

.block-promo.promo-highlighted {
  padding        : 1.25rem;
  padding-bottom : 0;
  margin-bottom  : 0
}