/* ============================================================================
 * Delivery Notice Banner
 * ============================================================================
 * Store-specific notice banner displayed below the header.
 * Uses brand color variables so it adapts to each brand automatically.
 * ========================================================================== */

.delivery-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 16px 30px;
  background-color: rgba(var(--color-brand-rgb), 0.08);
  width: 100%;
}

.delivery-notice__icon {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  color: var(--color-brand-dark);
}

.delivery-notice__text {
  font-family: var(--font-primary), sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.36px;
  color: var(--color-brand-dark);
  margin: 0;
}

@media (max-width: 768px) {
  .delivery-notice {
    padding: 12px 16px;
    gap: 10px;
  }

  .delivery-notice__text {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.2px;
  }

  .delivery-notice__icon {
    width: 22px;
    height: 22px;
  }
}